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

🔎 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

168
client/src/components/Web/Citation.tsx Normal file
View file

@ -0,0 +1,168 @@
import { memo, useState, useContext } from 'react';
import type { CitationProps } from './types';
import { SourceHovercard, FaviconImage, getCleanDomain } from '~/components/Web/SourceHovercard';
import { CitationContext, useCitation, useCompositeCitations } from './Context';
import { useLocalize } from '~/hooks';
interface CompositeCitationProps {
citationId?: string;
node?: {
properties?: CitationProps;
};
}
export function CompositeCitation(props: CompositeCitationProps) {
const localize = useLocalize();
const { citations, citationId } = props.node?.properties ?? ({} as CitationProps);
const { setHoveredCitationId } = useContext(CitationContext);
const [currentPage, setCurrentPage] = useState(0);
const sources = useCompositeCitations(citations || []);
if (!sources || sources.length === 0) return null;
const totalPages = sources.length;
const getCitationLabel = () => {
if (!sources || sources.length === 0) return localize('com_citation_source');
const firstSource = sources[0];
const remainingCount = sources.length - 1;
const attribution =
firstSource.attribution ||
firstSource.title ||
getCleanDomain(firstSource.link || '') ||
localize('com_citation_source');
return remainingCount > 0 ? `${attribution} +${remainingCount}` : attribution;
};
const handlePrevPage = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (currentPage > 0) {
setCurrentPage(currentPage - 1);
}
};
const handleNextPage = (e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (currentPage < totalPages - 1) {
setCurrentPage(currentPage + 1);
}
};
const currentSource = sources?.[currentPage];
return (
<SourceHovercard
source={currentSource}
label={getCitationLabel()}
onMouseEnter={() => setHoveredCitationId(citationId || null)}
onMouseLeave={() => setHoveredCitationId(null)}
>
{totalPages > 1 && (
<span className="mb-2 flex items-center justify-between border-b border-border-heavy pb-2">
<span className="flex gap-2">
<button
onClick={handlePrevPage}
disabled={currentPage === 0}
style={{ opacity: currentPage === 0 ? 0.5 : 1 }}
className="flex cursor-pointer items-center justify-center border-none bg-transparent p-0 text-base"
>
←
</button>
<button
onClick={handleNextPage}
disabled={currentPage === totalPages - 1}
style={{ opacity: currentPage === totalPages - 1 ? 0.5 : 1 }}
className="flex cursor-pointer items-center justify-center border-none bg-transparent p-0 text-base"
>
→
</button>
</span>
<span className="text-xs text-text-tertiary">
{currentPage + 1}/{totalPages}
</span>
</span>
)}
<span className="mb-2 flex items-center">
<FaviconImage domain={getCleanDomain(currentSource.link || '')} className="mr-2" />
<a
href={currentSource.link}
target="_blank"
rel="noopener noreferrer"
className="line-clamp-2 cursor-pointer overflow-hidden text-sm font-bold text-[#0066cc] hover:underline dark:text-blue-400 md:line-clamp-3"
>
{currentSource.attribution}
</a>
</span>
<h4 className="mb-1.5 mt-0 text-xs text-text-primary md:text-sm">{currentSource.title}</h4>
<p className="my-2 text-ellipsis break-all text-xs text-text-secondary md:text-sm">
{currentSource.snippet}
</p>
</SourceHovercard>
);
}
interface CitationComponentProps {
citationId: string;
citationType: 'span' | 'standalone' | 'composite' | 'group' | 'navlist';
node?: {
properties?: CitationProps;
};
}
export function Citation(props: CitationComponentProps) {
const localize = useLocalize();
const { citation, citationId } = props.node?.properties ?? {};
const { setHoveredCitationId } = useContext(CitationContext);
const refData = useCitation({
turn: citation?.turn || 0,
refType: citation?.refType,
index: citation?.index || 0,
});
if (!refData) return null;
const getCitationLabel = () => {
return (
refData.attribution ||
refData.title ||
getCleanDomain(refData.link || '') ||
localize('com_citation_source')
);
};
return (
<SourceHovercard
source={refData}
label={getCitationLabel()}
onMouseEnter={() => setHoveredCitationId(citationId || null)}
onMouseLeave={() => setHoveredCitationId(null)}
/>
);
}
export interface HighlightedTextProps {
children: React.ReactNode;
citationId?: string;
}
export function useHighlightState(citationId: string | undefined) {
const { hoveredCitationId } = useContext(CitationContext);
return citationId && hoveredCitationId === citationId;
}
export const HighlightedText = memo(function HighlightedText({
children,
citationId,
}: HighlightedTextProps) {
const isHighlighted = useHighlightState(citationId);
return (
<span
className={`rounded px-0 py-0.5 transition-colors ${isHighlighted ? 'bg-amber-300/20' : ''}`}
>
{children}
</span>
);
});

105
client/src/components/Web/Context.tsx Normal file
View file

@ -0,0 +1,105 @@
import { createContext, useContext } from 'react';
import type { SearchRefType, ValidSource, ResultReference } from 'librechat-data-provider';
import type * as t from './types';
import { useSearchContext } from '~/Providers';
export interface CitationContextType {
hoveredCitationId: string | null;
setHoveredCitationId: (id: string | null) => void;
}
export const CitationContext = createContext<CitationContextType>({
hoveredCitationId: null,
setHoveredCitationId: () => {},
});
export function useHighlightState(citationId: string | undefined) {
const { hoveredCitationId } = useContext(CitationContext);
return citationId && hoveredCitationId === citationId;
}
export type CitationSource = (ValidSource | ResultReference) & {
turn: number;
refType: string | SearchRefType;
index: number;
};
const refTypeMap: Record<string | SearchRefType, string> = {
search: 'organic',
ref: 'references',
news: 'topStories',
};
export function useCitation({
turn,
index,
refType: _refType,
}: {
turn: number;
index: number;
refType?: SearchRefType | string;
}): (t.Citation & t.Reference) | undefined {
const { searchResults } = useSearchContext();
if (!_refType) {
return undefined;
}
const refType = refTypeMap[_refType.toLowerCase()]
? refTypeMap[_refType.toLowerCase()]
: _refType;
if (!searchResults || !searchResults[turn] || !searchResults[turn][refType]) {
return undefined;
}
const source: CitationSource = searchResults[turn][refType][index];
if (!source) {
return undefined;
}
return {
...source,
turn,
refType: _refType.toLowerCase(),
index,
link: source.link ?? '',
title: source.title ?? '',
snippet: source['snippet'] ?? '',
attribution: source.attribution ?? '',
};
}
export function useCompositeCitations(
citations: Array<{ turn: number; refType: SearchRefType | string; index: number }>,
): Array<t.Citation & t.Reference> {
const { searchResults } = useSearchContext();
const result: Array<t.Citation & t.Reference> = [];
for (const { turn, refType: _refType, index } of citations) {
const refType = refTypeMap[_refType.toLowerCase()]
? refTypeMap[_refType.toLowerCase()]
: _refType;
if (!searchResults || !searchResults[turn] || !searchResults[turn][refType]) {
continue;
}
const source: CitationSource = searchResults[turn][refType][index];
if (!source) {
continue;
}
result.push({
...source,
turn,
refType: _refType.toLowerCase(),
index,
link: source.link ?? '',
title: source.title ?? '',
snippet: source['snippet'] ?? '',
attribution: source.attribution ?? '',
});
}
return result;
}

113
client/src/components/Web/SourceHovercard.tsx Normal file
View file

@ -0,0 +1,113 @@
import React, { ReactNode } from 'react';
import * as Ariakit from '@ariakit/react';
import { ChevronDown } from 'lucide-react';
import { VisuallyHidden } from '@ariakit/react';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
export interface SourceData {
link: string;
title?: string;
attribution?: string;
snippet?: string;
}
interface SourceHovercardProps {
source: SourceData;
label: string;
onMouseEnter?: () => void;
onMouseLeave?: () => void;
children?: ReactNode;
}
/** Helper to get domain favicon */
function getFaviconUrl(domain: string) {
return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
}
/** Helper to get clean domain name */
export function getCleanDomain(url: string) {
const domain = url.replace(/(^\w+:|^)\/\//, '').split('/')[0];
return domain.startsWith('www.') ? domain.substring(4) : domain;
}
export function FaviconImage({ domain, className = '' }: { domain: string; className?: string }) {
return (
<div className={cn('relative size-4 flex-shrink-0 overflow-hidden rounded-full', className)}>
<div className="absolute inset-0 rounded-full bg-white" />
<img src={getFaviconUrl(domain)} alt={domain} className="relative size-full" />
<div className="border-border-light/10 absolute inset-0 rounded-full border dark:border-transparent"></div>
</div>
);
}
export function SourceHovercard({
source,
label,
onMouseEnter,
onMouseLeave,
children,
}: SourceHovercardProps) {
const localize = useLocalize();
const domain = getCleanDomain(source.link || '');
return (
<span className="relative ml-0.5 inline-block">
<Ariakit.HovercardProvider showTimeout={150} hideTimeout={150}>
<span className="flex items-center">
<Ariakit.HovercardAnchor
render={
<a
href={source.link}
target="_blank"
rel="noopener noreferrer"
className="ml-1 inline-block h-5 max-w-36 cursor-pointer items-center overflow-hidden text-ellipsis whitespace-nowrap rounded-xl border border-border-heavy bg-surface-secondary px-2 text-xs font-medium no-underline transition-colors hover:bg-surface-hover dark:border-border-medium dark:hover:bg-surface-tertiary"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
{label}
</a>
}
/>
<Ariakit.HovercardDisclosure className="ml-0.5 rounded-full text-text-primary focus:outline-none focus:ring-2 focus:ring-ring">
<VisuallyHidden>{localize('com_citation_more_details', { label })}</VisuallyHidden>
<ChevronDown className="icon-sm" />
</Ariakit.HovercardDisclosure>
<Ariakit.Hovercard
gutter={16}
className="dark:shadow-lg-dark z-[999] w-[300px] max-w-[calc(100vw-2rem)] rounded-xl border border-border-medium bg-surface-secondary p-3 text-text-primary shadow-lg"
portal={true}
unmountOnHide={true}
>
{children}
{!children && (
<>
<span className="mb-2 flex items-center">
<FaviconImage domain={domain} className="mr-2" />
<a
href={source.link}
target="_blank"
rel="noopener noreferrer"
className="line-clamp-2 cursor-pointer overflow-hidden text-sm font-bold text-[#0066cc] hover:underline dark:text-blue-400 md:line-clamp-3"
>
{source.attribution || domain}
</a>
</span>
<h4 className="mb-1.5 mt-0 text-xs text-text-primary md:text-sm">
{source.title || source.link}
</h4>
{source.snippet && (
<span className="my-2 text-ellipsis break-all text-xs text-text-secondary md:text-sm">
{source.snippet}
</span>
)}
</>
)}
</Ariakit.Hovercard>
</span>
</Ariakit.HovercardProvider>
</span>
);
}

409
client/src/components/Web/Sources.tsx Normal file
View file

@ -0,0 +1,409 @@
import React, { useMemo } from 'react';
import * as Ariakit from '@ariakit/react';
import { VisuallyHidden } from '@ariakit/react';
import { Globe, Newspaper, Image, ChevronDown } from 'lucide-react';
import type { ValidSource, ImageResult } from 'librechat-data-provider';
import { FaviconImage, getCleanDomain } from '~/components/Web/SourceHovercard';
import { useSearchContext } from '~/Providers';
import { AnimatedTabs } from '~/components/ui';
import { useLocalize } from '~/hooks';
import {
OGDialog,
OGDialogTitle,
OGDialogContent,
OGDialogTrigger,
} from '~/components/ui/OriginalDialog';
interface SourceItemProps {
source: ValidSource;
isNews?: boolean;
expanded?: boolean;
}
function SourceItem({ source, isNews, expanded = false }: SourceItemProps) {
const localize = useLocalize();
const domain = getCleanDomain(source.link);
if (expanded) {
return (
<a
href={source.link}
target="_blank"
rel="noopener noreferrer"
className="flex w-full flex-col rounded-lg bg-surface-primary-contrast px-3 py-2 text-sm transition-all duration-300 hover:bg-surface-tertiary"
>
<div className="flex items-center gap-2">
<FaviconImage domain={domain} />
<span className="truncate text-xs font-medium text-text-secondary">{domain}</span>
</div>
<div className="mt-1">
<span className="line-clamp-2 text-sm font-medium text-text-primary md:line-clamp-3">
{source.title || source.link}
</span>
{'snippet' in source && source.snippet && (
<span className="mt-1 line-clamp-2 text-xs text-text-secondary md:line-clamp-3">
{source.snippet}
</span>
)}
</div>
</a>
);
}
return (
<span className="not-prose relative inline-block h-full w-full">
<Ariakit.HovercardProvider showTimeout={150} hideTimeout={150}>
<div className="flex h-full items-center">
<Ariakit.HovercardAnchor
render={
<a
href={source.link}
target="_blank"
rel="noopener noreferrer"
className="flex h-full w-full flex-col rounded-lg bg-surface-primary-contrast px-3 py-2 text-sm transition-all duration-300 hover:bg-surface-tertiary"
>
<div className="flex items-center gap-2">
<FaviconImage domain={domain} />
<span className="truncate text-xs font-medium text-text-secondary">{domain}</span>
</div>
<div className="mt-1">
<span className="line-clamp-2 text-sm font-medium text-text-primary md:line-clamp-3">
{source.title || source.link}
</span>
{/* {'snippet' in source && source.snippet && (
<span className="mt-1 line-clamp-2 md:line-clamp-3 text-xs text-text-secondary">
{source.snippet}
</span>
)} */}
</div>
</a>
}
/>
<Ariakit.HovercardDisclosure className="absolute right-2 rounded-full text-text-primary focus:outline-none focus:ring-2 focus:ring-ring">
<VisuallyHidden>
{localize('com_citation_more_details', { label: domain })}
</VisuallyHidden>
<ChevronDown className="icon-sm" />
</Ariakit.HovercardDisclosure>
<Ariakit.Hovercard
gutter={16}
className="dark:shadow-lg-dark z-[999] w-[300px] max-w-[calc(100vw-2rem)] rounded-xl border border-border-medium bg-surface-secondary p-3 text-text-primary shadow-lg"
portal={true}
unmountOnHide={true}
>
<div className="flex gap-3">
<div className="flex-1">
<div className="mb-2 flex items-center">
<FaviconImage domain={domain} className="mr-2" />
<a
href={source.link}
target="_blank"
rel="noopener noreferrer"
className="line-clamp-2 cursor-pointer overflow-hidden text-sm font-bold text-[#0066cc] hover:underline dark:text-blue-400 md:line-clamp-3"
>
{source.attribution || domain}
</a>
</div>
<h4 className="mb-1.5 mt-0 text-xs text-text-primary md:text-sm">
{source.title || source.link}
</h4>
{'snippet' in source && source.snippet && (
<span className="my-2 text-ellipsis break-all text-xs text-text-secondary md:text-sm">
{source.snippet}
</span>
)}
</div>
{'imageUrl' in source && source.imageUrl && (
<div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md">
<img
src={source.imageUrl}
alt={source.title || localize('com_sources_image_alt')}
className="h-full w-full object-cover"
/>
</div>
)}
</div>
</Ariakit.Hovercard>
</div>
</Ariakit.HovercardProvider>
</span>
);
}
function ImageItem({ image }: { image: ImageResult }) {
const localize = useLocalize();
return (
<a
href={image.imageUrl}
target="_blank"
rel="noopener noreferrer"
className="group overflow-hidden rounded-lg bg-surface-secondary transition-all duration-300 hover:bg-surface-tertiary"
>
{image.imageUrl && (
<div className="relative aspect-square w-full overflow-hidden">
<img
src={image.imageUrl}
alt={image.title || localize('com_sources_image_alt')}
className="size-full object-cover"
/>
{image.title && (
<div className="absolute bottom-0 left-0 right-0 w-full border-none bg-gray-900/80 p-1 text-xs font-medium text-white backdrop-blur-sm">
<span className="truncate">{image.title}</span>
</div>
)}
</div>
)}
</a>
);
}
export function StackedFavicons({
sources,
start = 0,
end = 3,
}: {
sources: ValidSource[];
start?: number;
end?: number;
}) {
let slice = [start, end];
if (start < 0) {
slice = [start];
}
return (
<div className="relative flex">
{sources.slice(...slice).map((source, i) => (
<FaviconImage
key={`icon-${i}`}
domain={getCleanDomain(source.link)}
className={i > 0 ? 'ml-[-6px]' : ''}
/>
))}
</div>
);
}
function SourcesGroup({ sources, limit = 3 }: { sources: ValidSource[]; limit?: number }) {
const localize = useLocalize();
const visibleSources = sources.slice(0, limit);
const remainingSources = sources.slice(limit);
const hasMoreSources = remainingSources.length > 0;
/** Calculate grid columns based on number of items (including the +X sources button if present) */
const totalItems = hasMoreSources ? visibleSources.length + 1 : visibleSources.length;
const gridCols = `grid-cols-${Math.min(totalItems, 4)}`;
return (
<div className={`grid ${gridCols} scrollbar-none w-full gap-2 overflow-x-auto`}>
<OGDialog>
{visibleSources.map((source, i) => (
<div key={`source-${i}`} className="w-full min-w-[120px]">
<SourceItem source={source} />
</div>
))}
{hasMoreSources && (
<OGDialogTrigger className="flex flex-col rounded-lg bg-surface-primary-contrast px-3 py-2 text-sm transition-all duration-300 hover:bg-surface-tertiary">
<div className="flex items-center gap-2">
<StackedFavicons sources={remainingSources} />
<span className="truncate text-xs font-medium text-text-secondary">
{localize('com_sources_more_sources', { count: remainingSources.length })}
</span>
</div>
</OGDialogTrigger>
)}
<OGDialogContent className="flex max-h-[80vh] max-w-full flex-col overflow-hidden rounded-lg bg-surface-primary p-0 md:max-w-[600px]">
<div className="sticky top-0 z-10 flex items-center justify-between border-b border-border-light bg-surface-primary px-3 py-2">
<OGDialogTitle className="text-base font-medium">
{localize('com_sources_title')}
</OGDialogTitle>
<button
className="rounded-full p-1 text-text-secondary hover:bg-surface-tertiary hover:text-text-primary"
aria-label={localize('com_ui_close')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div className="flex-1 overflow-y-auto px-3 py-2">
<div className="flex flex-col gap-2">
{[...visibleSources, ...remainingSources].map((source, i) => (
<a
key={`more-source-${i}`}
href={source.link}
target="_blank"
rel="noopener noreferrer"
className="flex gap-2 rounded-lg px-2 py-2 transition-colors hover:bg-surface-tertiary"
>
<FaviconImage
domain={getCleanDomain(source.link)}
className="h-5 w-5 flex-shrink-0"
/>
<div className="min-w-0 flex-1">
<h3 className="mb-0.5 truncate text-sm font-medium text-text-primary">
{source.title || source.link}
</h3>
{'snippet' in source && source.snippet && (
<p className="mb-1 line-clamp-2 text-xs text-text-secondary md:line-clamp-3">
{source.snippet}
</p>
)}
<span className="text-xs text-text-secondary-alt">
{getCleanDomain(source.link)}
</span>
</div>
{'imageUrl' in source && source.imageUrl && (
<div className="hidden h-12 w-12 flex-shrink-0 overflow-hidden rounded-md sm:block">
<img
src={source.imageUrl}
alt={source.title || localize('com_sources_image_alt')}
className="h-full w-full object-cover"
/>
</div>
)}
</a>
))}
</div>
</div>
</OGDialogContent>
</OGDialog>
</div>
);
}
function TabWithIcon({ label, icon }: { label: string; icon: React.ReactNode }) {
return (
<div className="flex items-center gap-2 rounded-md px-3 py-1 text-sm transition-colors hover:bg-surface-tertiary hover:text-text-primary">
{React.cloneElement(icon as React.ReactElement, { size: 14 })}
<span>{label}</span>
</div>
);
}
export default function Sources() {
const localize = useLocalize();
const { searchResults } = useSearchContext();
const { organicSources, topStories, images, hasAnswerBox } = useMemo(() => {
if (!searchResults) {
return {
organicSources: [],
topStories: [],
images: [],
hasAnswerBox: false,
};
}
const organicSourcesMap = new Map<string, ValidSource>();
const topStoriesMap = new Map<string, ValidSource>();
const imagesMap = new Map<string, ImageResult>();
let hasAnswerBox = false;
Object.values(searchResults).forEach((result) => {
if (!result) return;
if (result.organic?.length) {
result.organic.forEach((source) => {
if (source.link) {
organicSourcesMap.set(source.link, source);
}
});
}
if (result.references?.length) {
result.references.forEach((source) => {
if (source.type === 'image') {
imagesMap.set(source.link, {
...source,
imageUrl: source.link,
});
return;
}
if (source.link) {
organicSourcesMap.set(source.link, source);
}
});
}
if (result.topStories?.length) {
result.topStories.forEach((source) => {
if (source.link) {
topStoriesMap.set(source.link, source);
}
});
}
if (result.images?.length) {
result.images.forEach((image) => {
if (image.imageUrl) {
imagesMap.set(image.imageUrl, image);
}
});
}
if (result.answerBox) {
hasAnswerBox = true;
}
});
return {
organicSources: Array.from(organicSourcesMap.values()),
topStories: Array.from(topStoriesMap.values()),
images: Array.from(imagesMap.values()),
hasAnswerBox,
};
}, [searchResults]);
const tabs = useMemo(() => {
const availableTabs: Array<{ label: React.ReactNode; content: React.ReactNode }> = [];
if (organicSources.length || topStories.length || hasAnswerBox) {
availableTabs.push({
label: <TabWithIcon label={localize('com_sources_tab_all')} icon={<Globe />} />,
content: <SourcesGroup sources={[...organicSources, ...topStories]} />,
});
}
if (topStories.length) {
availableTabs.push({
label: <TabWithIcon label={localize('com_sources_tab_news')} icon={<Newspaper />} />,
content: <SourcesGroup sources={topStories} limit={3} />,
});
}
if (images.length) {
availableTabs.push({
label: <TabWithIcon label={localize('com_sources_tab_images')} icon={<Image />} />,
content: (
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
{images.map((item, i) => (
<ImageItem key={`image-${i}`} image={item} />
))}
</div>
),
});
}
return availableTabs;
}, [organicSources, topStories, images, hasAnswerBox, localize]);
if (!tabs.length) return null;
return (
<AnimatedTabs
tabs={tabs}
containerClassName="flex min-w-full mb-4"
tabListClassName="flex items-center mb-2 border-b border-border-light overflow-x-auto"
tabPanelClassName="w-full overflow-x-auto scrollbar-none md:mx-0 md:px-0"
tabClassName="flex items-center whitespace-nowrap text-xs font-medium text-token-text-secondary px-1 pt-2 pb-1 border-b-2 border-transparent data-[state=active]:text-text-primary outline-none"
/>
);
}

2
client/src/components/Web/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from './plugin';
export type * from './types';

250
client/src/components/Web/plugin.ts Normal file
View file

@ -0,0 +1,250 @@
import { visit } from 'unist-util-visit';
import type { Node } from 'unist';
import type { Citation, CitationNode } from './types';
const SPAN_REGEX = /(\\ue203.*?\\ue204)/g;
const COMPOSITE_REGEX = /(\\ue200.*?\\ue201)/g;
const STANDALONE_PATTERN = /\\ue202turn(\d+)(search|image|news|video|ref)(\d+)/g;
const CLEANUP_REGEX = /\\ue200|\\ue201|\\ue202|\\ue203|\\ue204|\\ue206/g;
/**
* Checks if a standalone marker is truly standalone (not inside a composite block)
*/
function isStandaloneMarker(text: string, position: number): boolean {
const beforeText = text.substring(0, position);
const lastUe200 = beforeText.lastIndexOf('\\ue200');
const lastUe201 = beforeText.lastIndexOf('\\ue201');
return lastUe200 === -1 || (lastUe201 !== -1 && lastUe201 > lastUe200);
}
/**
* Find the next pattern match from the current position
*/
function findNextMatch(
text: string,
position: number,
): { type: string; match: RegExpExecArray | null; index: number } | null {
// Reset regex lastIndex to start from current position
SPAN_REGEX.lastIndex = position;
COMPOSITE_REGEX.lastIndex = position;
STANDALONE_PATTERN.lastIndex = position;
// Find next occurrence of each pattern
const spanMatch = SPAN_REGEX.exec(text);
const compositeMatch = COMPOSITE_REGEX.exec(text);
// For standalone, we need to check each match
let standaloneMatch: RegExpExecArray | null = null;
STANDALONE_PATTERN.lastIndex = position;
// Find the first standalone match that's not inside a composite block
let match: RegExpExecArray | null;
while (!standaloneMatch && (match = STANDALONE_PATTERN.exec(text)) !== null) {
if (isStandaloneMarker(text, match.index)) {
standaloneMatch = match;
}
}
// Find closest match
let nextMatch: RegExpExecArray | null = null;
let matchType = '';
let matchIndex = -1;
let typeIndex = -1;
if (spanMatch && (!nextMatch || spanMatch.index < matchIndex || matchIndex === -1)) {
nextMatch = spanMatch;
matchType = 'span';
matchIndex = spanMatch.index;
// We can use a counter for typeIndex if needed
typeIndex = 0;
}
if (compositeMatch && (!nextMatch || compositeMatch.index < matchIndex || matchIndex === -1)) {
nextMatch = compositeMatch;
matchType = 'composite';
matchIndex = compositeMatch.index;
typeIndex = 0;
}
if (standaloneMatch && (!nextMatch || standaloneMatch.index < matchIndex || matchIndex === -1)) {
nextMatch = standaloneMatch;
matchType = 'standalone';
matchIndex = standaloneMatch.index;
typeIndex = 0;
}
if (!nextMatch) return null;
return { type: matchType, match: nextMatch, index: typeIndex };
}
function processTree(tree: Node) {
visit(tree, 'text', (node, index, parent) => {
const textNode = node as CitationNode;
const parentNode = parent as CitationNode;
if (typeof textNode.value !== 'string') return;
const originalValue = textNode.value;
const segments: Array<CitationNode> = [];
// Single-pass processing through the string
let currentPosition = 0;
// Important change: Create a map to track citation IDs by their position
// This ensures consistent IDs across multiple segments
const citationIds = new Map<number, string>();
const typeCounts = { span: 0, composite: 0, standalone: 0 };
while (currentPosition < originalValue.length) {
const nextMatchInfo = findNextMatch(originalValue, currentPosition);
if (!nextMatchInfo) {
// No more matches, add remaining content with cleanup
const remainingText = originalValue.substring(currentPosition).replace(CLEANUP_REGEX, '');
if (remainingText) {
segments.push({ type: 'text', value: remainingText });
}
break;
}
const { type, match } = nextMatchInfo;
const matchIndex = match!.index;
const matchText = match![0];
// Add cleaned text before this match
if (matchIndex > currentPosition) {
const textBeforeMatch = originalValue
.substring(currentPosition, matchIndex)
.replace(CLEANUP_REGEX, '');
if (textBeforeMatch) {
segments.push({ type: 'text', value: textBeforeMatch });
}
}
// Generate a unique ID for this citation based on its position in the text
const citationId = `${type}-${typeCounts[type as keyof typeof typeCounts]}-${matchIndex}`;
citationIds.set(matchIndex, citationId);
// Process based on match type
switch (type) {
case 'span': {
const spanText = matchText;
const cleanText = spanText.replace(/\\ue203|\\ue204/g, '');
// Look ahead for associated citation
let associatedCitationId: string | null = null;
const endOfSpan = matchIndex + matchText.length;
// Check if there's a citation right after this span
const nextCitation = findNextMatch(originalValue, endOfSpan);
if (
nextCitation &&
(nextCitation.type === 'standalone' || nextCitation.type === 'composite') &&
nextCitation.match!.index - endOfSpan < 5
) {
// Use the ID that will be generated for the next citation
const nextIndex = nextCitation.match!.index;
const nextType = nextCitation.type;
associatedCitationId = `${nextType}-${typeCounts[nextType as keyof typeof typeCounts]}-${nextIndex}`;
}
segments.push({
type: 'highlighted-text',
data: {
hName: 'highlighted-text',
hProperties: { citationId: associatedCitationId },
},
children: [{ type: 'text', value: cleanText }],
});
typeCounts.span++;
break;
}
case 'composite': {
const compositeText = matchText;
// Use a regular expression to extract reference indices
const compositeRefRegex = new RegExp(STANDALONE_PATTERN.source, 'g');
let refMatch: RegExpExecArray | null;
const citations: Array<Citation> = [];
while ((refMatch = compositeRefRegex.exec(compositeText)) !== null) {
const turn = Number(refMatch[1]);
const refType = refMatch[2];
const refIndex = Number(refMatch[3]);
citations.push({
turn,
refType,
index: refIndex,
});
}
if (citations.length > 0) {
segments.push({
type: 'composite-citation',
data: {
hName: 'composite-citation',
hProperties: {
citations,
citationId: citationId,
},
},
});
}
typeCounts.composite++;
break;
}
case 'standalone': {
// Extract reference info
const turn = Number(match![1]);
const refType = match![2];
const refIndex = Number(match![3]);
segments.push({
type: 'citation',
data: {
hName: 'citation',
hProperties: {
citation: {
turn,
refType,
index: refIndex,
},
citationType: 'standalone',
citationId: citationId,
},
},
});
typeCounts.standalone++;
break;
}
}
// Move position forward
currentPosition = matchIndex + matchText.length;
}
// Replace the original node with our segments or clean up the original
if (segments.length > 0 && index !== undefined) {
parentNode.children?.splice(index, 1, ...segments);
return index + segments.length;
} else if (textNode.value !== textNode.value.replace(CLEANUP_REGEX, '')) {
// If we didn't create segments but there are markers to clean up
textNode.value = textNode.value.replace(CLEANUP_REGEX, '');
}
});
}
export function unicodeCitation() {
return (tree: Node) => {
processTree(tree);
};
}

32
client/src/components/Web/types.ts Normal file
View file

@ -0,0 +1,32 @@
import type { SearchRefType } from 'librechat-data-provider';
export type Citation = { turn: number; refType: SearchRefType | string; index: number };
export type CitationProps = {
citationId?: string | null;
citationType?: string;
citations?: Array<Citation>;
citation?: Citation;
};
export type CitationNode = {
type?: string;
value?: string;
data?: {
hName?: string;
hProperties?: CitationProps;
};
children?: Array<CitationNode>;
};
export interface Sitelink {
title: string;
link: string;
}
export interface Reference {
title: string;
link: string;
snippet: string;
sitelinks?: Sitelink[];
attribution: string;
}