Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-23 20:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🔎 feat: Native Web Search with Citation References (#7516)

Browse source 
* WIP: search tool integration

* WIP: Add web search capabilities and API key management to agent actions

* WIP: web search capability to agent configuration and selection

* WIP: Add web search capability to backend agent configuration

* WIP: add web search option to default agent form values

* WIP: add attachments for web search

* feat: add plugin for processing web search citations

* WIP: first pass, Citation UI

* chore: remove console.log

* feat: Add AnimatedTabs component for tabbed UI functionality

* refactor: AnimatedTabs component with CSS animations and stable ID generation

* WIP example content

* feat: SearchContext for managing search results apart from MessageContext

* feat: Enhance AnimatedTabs with underline animation and state management

* WIP: first pass, Implement dynamic tab functionality in Sources component with search results integration

* fix: Update class names for improved styling in Sources and AnimatedTabs components

* feat: Improve styling and layout in Sources component with enhanced button and item designs

* feat: Refactor Sources component to integrate OGDialog for source display and improve layout

* style: Update background color in SourceItem and SourcesGroup components for improved visibility

* refactor: Sources component to enhance SourceItem structure and improve favicon handling

* style: Adjust font size of domain text in SourceItem for better readability

* feat: Add localization for citation source and details in CompositeCitation component

* style: add theming to Citation components

* feat: Enhance SourceItem component with dialog support and improved hovercard functionality

* feat: Add localization for sources tab and image alt text in Sources component

* style: Replace divs with spans for better semantic structure in CompositeCitation and Citation components

* refactor: Sources component to use useMemo for tab generation and improve performance

* chore: bump @librechat/agents to v2.4.318

* chore: update search result types

* fix: search results retrieval in ContentParts component, re-render attachments when expected

* feat: update sources style/types to use latest search result structure

* style: enhance Dialog (expanded) SourceItem component with link wrapping and improved styling

* style: update ImageItem component styling for improved title visibility

* refactor: remove SourceItemBase component and adjust SourceItem layout for improved styling

* chore: linting twcss order

* fix: prevent FileAttachment from rendering search attachments

* fix: append underscore to responseMessageId for unique identification to prevent mapping of previous latest message's attachments

* chore: remove unused parameter 'useSpecs' from loadTools function

* chore: twcss order

* WIP: WebSearch Tool UI

* refactor: add limit parameter to StackedFavicons for customizable source display

* refactor: optimize search results memoization by making more granular and separate conerns

* refactor: integrated StackedFavicons to WebSearch mid-run

* chore: bump @librechat/agents to expose handleToolCallChunks

* chore: use typedefs from dedicated file instead of defining them in AgentClient module

* WIP: first pass, search progress results

* refactor: move createOnSearchResults function to a dedicated search module

* chore: bump @librechat/agents to v2.4.320

* WIP: first pass, search results processed UX

* refactor: consolidate context variables in createOnSearchResults function

* chore: bump @librechat/agents to v2.4.321

* feat: add guidelines for web search tool response formatting in loadTools function

* feat: add isLast prop to Part component and update WebSearch logic for improved state handling

* style: update Hovercard styles for improved UI consistency

* feat: export FaviconImage component for improved accessibility in other modules

* refactor: export getCleanDomain function and use FaviconImage in Citation component for improved source representation

* refactor: implement SourceHovercard component for consistency and DRY compliance

* fix: replace <p> with <span> for snippet and title in SourceItem and SourceHovercard for consistency

* style: `not-prose`

* style: remove 'not-prose' class for consistency in SourceItem, Citation, and SourceHovercard components, adjust style classes

* refactor: `imageUrl` on hover and prevent duplicate sources

* refactor: enhance SourcesGroup dialog layout and improve source item presentation

* refactor: reorganize Web Components, save in same directory

* feat: add 'news' refType to refTypeMap for citation sources

* style: adjust Hovercard width for improved layout

* refactor: update tool usage guidelines for improved clarity and execution

* chore: linting

* feat: add Web Search badge with initial permissions and local storage logic

* feat: add webSearch support to interface and permissions schemas

* feat: implement Web Search API key management and localization updates

* feat: refactor Web Search API key handling and integrate new search API key form

* fix: remove unnecessary visibility state from FileAttachment component

* feat: update WebSearch component to use Globe icon and localized search label

* feat: enhance ApiKeyDialog with dropdown for reranker selection and update translations

* feat: implement dropdown menus for engine, scraper, and reranker selection in ApiKeyDialog

* chore: linting and add unknown instead of `any` type

* feat: refactor ApiKeyDialog and useAuthSearchTool for improved API key management

* refactor: update ocrSchema to use template literals for default apiKey and baseURL

* feat: add web search configuration and utility functions for environment variable extraction

* fix: ensure filepath is defined before checking its prefix in useAttachmentHandler

* feat: enhance web search functionality with improved configuration and environment variable extraction for authFields

* fix: update auth type in TPluginAction and TUpdateUserPlugins to use Partial<Record<string, string>>

* feat: implement web search authentication verification and enhance webSearchAuth structure

* feat: enhance ephemeral agent handling with new web search capability and type definition

* feat: enhance isEphemeralAgent function to include web search selection

* feat: refactor verifyWebSearchAuth to improve key handling and authentication checks

* feat: implement loadWebSearchAuth function for improved web search authentication handling

* feat: enhance web search authentication with new configuration options and refactor related types

* refactor: rename search engine to search provider and update related localization keys

* feat: update verifyWebSearchAuth to handle multiple authentication types and improve error handling

* feat: update ApiKeyDialog to accept authTypes prop and remove isUserProvided check

* feat: add tests for extractWebSearchEnvVars and loadWebSearchAuth functions

* feat: enhance loadWebSearchAuth to support specific service checks for providers, scrapers, and rerankers

* fix: update web search configuration key and adjust auth result handling in loadTools function

* feat: add new progress key for repeated web searching and update localization

* chore: bump @librechat/agents to 2.4.322

* feat: enhance loadTools function to include ISO time and improve search tool logging

* feat: update StackedFavicons to handle negative start index and improve citation attribution styling and text

* chore: update .gitignore to categorize AI-related files

* fix: mobile responsiveness of sources/citations hovercards

* feat: enhance source display with improved line clamping for better readability

* chore: bump @librechat/agents to v2.4.33

* feat: add handling for image sources in references mapping

* chore: bump librechat-data-provider version to 0.7.84

* chore: bump @librechat/agents version to 2.4.34

* fix: update auth handling to support multiple auth types in tools and allow key configuration in agent panel

* chore: remove redundant agent attribution text from search form

* fix: web search auth uninstall

* refactor: convert CheckboxButton to a forwardRef component and update setValue callback signature

* feat: add triggerRef prop to ApiKeyDialog components for improved dialog control

* feat: integrate triggerRef in CodeInterpreter and WebSearch components for enhanced dialog management

* feat: enhance ApiKeyDialog with additional links for Firecrawl and Jina API key guidance

* feat: implement web search configuration handling in ApiKeyDialog and add tests for dropdown visibility

* fix: update webSearchConfig reference in config route for correct payload assignment

* feat: update ApiKeyDialog to conditionally render sections based on authTypes and modify loadWebSearchAuth to correctly categorize authentication types

* feat: refactor ApiKeyDialog and related tests to use SearchCategories and RerankerTypes enums and remove nested ternaries

* refactor: move ThinkingButton rendering to improve layout consistency in ContentParts

* feat: integrate search context into Markdown component to conditionally include unicodeCitation plugin

* chore: bump @librechat/agents to v2.4.35

* chore: remove unused 18n key

* ci: add WEB_SEARCH permission testing and update AppService tests for new webSearch configuration

* ci: add more comprehensive tests for loadWebSearchAuth to validate authentication handling and authTypes structure

* chore: remove debugging console log from web.spec.ts to clean up test output
This commit is contained in:
Danny Avila 2025-05-23 00:14:04 -04:00
parent bf80cf30b3
commit 0dbbf7de04
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
73 changed files with 6366 additions and 2003 deletions
Download patch file Download diff file Expand all files Collapse all files

160
client/src/components/ui/AnimatedTabs.tsx Normal file
View file

@ -0,0 +1,160 @@
import * as Ariakit from '@ariakit/react';
import { ReactNode, forwardRef, useEffect, useRef } from 'react';
import type { ElementRef } from 'react';
import { cn } from '~/utils';
import './AnimatedTabs.css';
export interface TabItem {
id?: string;
label: ReactNode;
content: ReactNode;
disabled?: boolean;
}
export interface AnimatedTabsProps {
tabs: TabItem[];
className?: string;
tabListClassName?: string;
tabClassName?: string;
tabPanelClassName?: string;
tabListProps?: Ariakit.TabListProps;
containerClassName?: string;
defaultSelectedId?: string;
}
function usePrevious<T>(value: T) {
const ref = useRef<T>();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
const Tab = forwardRef<ElementRef<typeof Ariakit.Tab>, Ariakit.TabProps>(function Tab(props, ref) {
const tabRef = useRef<HTMLButtonElement | null>(null);
useEffect(() => {
const tabElement = tabRef.current;
if (!tabElement) return;
const updateState = () => {
const isSelected = tabElement.getAttribute('aria-selected') === 'true';
tabElement.setAttribute('data-state', isSelected ? 'active' : 'inactive');
};
updateState();
const observer = new MutationObserver(updateState);
observer.observe(tabElement, { attributes: true, attributeFilter: ['aria-selected'] });
return () => observer.disconnect();
}, []);
return (
<Ariakit.Tab
ref={(node) => {
// Forward the ref to both our local ref and the provided ref
tabRef.current = node;
if (typeof ref === 'function') ref(node);
else if (ref) ref.current = node;
}}
{...props}
className={`animated-tab aria-selected:text-token-text-primary flex select-none items-center justify-center gap-2 whitespace-nowrap border-none text-sm font-medium outline-none transition-colors aria-disabled:opacity-50 ${props.className || ''}`}
/>
);
});
const TabPanel = forwardRef<ElementRef<typeof Ariakit.TabPanel>, Ariakit.TabPanelProps>(
function TabPanel(props, ref) {
const tab = Ariakit.useTabContext();
const previousTabId = usePrevious(Ariakit.useStoreState(tab, 'selectedId'));
const wasOpen = props.tabId && previousTabId === props.tabId;
return (
<Ariakit.TabPanel
ref={ref}
{...props}
data-was-open={wasOpen || undefined}
className={`animated-tab-panel max-w-full ${props.className || ''}`}
/>
);
},
);
export function AnimatedTabs({
tabs,
className = '',
tabListClassName = '',
tabClassName = '',
tabPanelClassName = '',
containerClassName = '',
tabListProps = {},
defaultSelectedId,
}: AnimatedTabsProps) {
const tabIds = tabs.map((tab, index) => tab.id || `tab-${index}`);
const firstTabId = defaultSelectedId || tabIds[0];
const tabListRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const tabList = tabListRef.current;
if (!tabList) return;
// Function to update the underline position
const updateUnderline = () => {
const activeTab = tabList.querySelector('[data-state="active"]') as HTMLElement;
if (!activeTab) return;
tabList.style.setProperty('--tab-left', `${activeTab.offsetLeft}px`);
tabList.style.setProperty('--tab-width', `${activeTab.offsetWidth}px`);
};
updateUnderline();
const observer = new MutationObserver(updateUnderline);
observer.observe(tabList, { attributes: true, subtree: true, attributeFilter: ['data-state'] });
return () => observer.disconnect();
}, [tabs]);
return (
<div className={`w-full ${className}`}>
<Ariakit.TabProvider defaultSelectedId={firstTabId}>
<Ariakit.TabList
ref={tabListRef}
aria-label="Tabs"
className={`animated-tab-list flex py-1 ${tabListClassName}`}
{...tabListProps}
>
{tabs.map((tab, index) => (
<Tab
key={tabIds[index]}
id={tabIds[index]}
disabled={tab.disabled}
className={tabClassName}
data-state={tabIds[index] === firstTabId ? 'active' : 'inactive'}
>
{tab.label}
</Tab>
))}
</Ariakit.TabList>
<div
className={cn(
'animated-panels relative flex w-full flex-col items-center overflow-hidden p-0',
containerClassName,
)}
>
{tabs.map((tab, index) => (
<TabPanel
key={`panel-${tabIds[index]}`}
id={`panel-${tabIds[index]}`}
tabId={tabIds[index]}
className={tabPanelClassName}
>
{tab.content}
</TabPanel>
))}
</div>
</Ariakit.TabProvider>
</div>
);
}