🧩 feat: Web Search Config Validations & Clipboard Citation Processing (#7530)

* 🔧 chore: Add missing optional `scraperTimeout` to webSearchSchema

* chore: Add missing optional `scraperTimeout` to web search authentication result

* chore: linting

* feat: Integrate attachment handling and citation processing in message components

- Added `useAttachments` hook to manage message attachments and search results.
- Updated `MessageParts`, `ContentParts`, and `ContentRender` components to utilize the new hook for improved attachment handling.
- Enhanced `useCopyToClipboard` to format citations correctly, including support for composite citations and deduplication.
- Introduced utility functions for citation processing and cleanup.
- Added tests for the new `useCopyToClipboard` functionality to ensure proper citation formatting and handling.

* feat: Add configuration for LibreChat Code Interpreter API and Web Search variables

* fix: Update searchResults type to use SearchResultData for better type safety

* feat: Add web search configuration validation and logging

- Introduced `checkWebSearchConfig` function to validate web search configuration values, ensuring they are environment variable references.
- Added logging for proper configuration and warnings for incorrect values.
- Created unit tests for `checkWebSearchConfig` to cover various scenarios, including valid and invalid configurations.

* docs: Update README to include Web Search feature details

- Added a section for the Web Search feature, highlighting its capabilities to search the internet and enhance AI context.
- Included links for further information on the Web Search functionality.

* ci: Add mock for checkWebSearchConfig in AppService tests

* chore: linting

* feat: Enhance Shared Messages with Web Search UI by adding searchResults prop to SearchContent and MinimalHoverButtons components

* chore: linting

* refactor: remove Meilisearch index sync from importConversations function

* feat: update safeSearch implementation to use SafeSearchTypes enum

* refactor: remove commented-out code in loadTools function

* fix: ensure responseMessageId handles latestMessage ID correctly

* feat: enhance Vite configuration for improved chunking and caching

- Added additional globIgnores for map files in Workbox configuration.
- Implemented high-impact chunking for various large libraries to optimize performance.
- Increased chunkSizeWarningLimit from 1200 to 1500 for better handling of larger chunks.

* refactor: move health check hook to Root, fix bad setState for Temporary state

- Enhanced the `useHealthCheck` hook to initiate health checks only when the user is authenticated.
- Added logic for managing health check intervals and handling window focus events.
- Introduced a new test suite for `useHealthCheck` to cover various scenarios including authentication state changes and error handling.
- Removed the health check invocation from `ChatRoute` and added it to `Root` for global health monitoring.

* fix: update font alias in Vite configuration for correct path resolution

client/src/components/Chat/Messages/Content/ContentParts.tsx

@@ -1,13 +1,17 @@
 import { memo, useMemo, useState } from 'react';
-import { useRecoilValue, useRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { ContentTypes } from 'librechat-data-provider';
-import type { TMessageContentParts, TAttachment, Agents } from 'librechat-data-provider';
-import { useSearchResultsByTurn } from '~/hooks/Messages/useSearchResultsByTurn';
+import type {
+  TMessageContentParts,
+  SearchResultData,
+  TAttachment,
+  Agents,
+} from 'librechat-data-provider';
 import { ThinkingButton } from '~/components/Artifacts/Thinking';
-import useLocalize from '~/hooks/useLocalize';
-import { mapAttachments } from '~/utils/map';
 import { MessageContext, SearchContext } from '~/Providers';
 import Sources from '~/components/Web/Sources';
+import useLocalize from '~/hooks/useLocalize';
+import { mapAttachments } from '~/utils/map';
 import { EditTextPart } from './Parts';
 import store from '~/store';
 import Part from './Part';
@@ -17,6 +21,7 @@ type ContentPartsProps = {
   messageId: string;
   conversationId?: string | null;
   attachments?: TAttachment[];
+  searchResults?: { [key: string]: SearchResultData };
   isCreatedByUser: boolean;
   isLast: boolean;
   isSubmitting: boolean;
@@ -35,6 +40,7 @@ const ContentParts = memo(
     messageId,
     conversationId,
     attachments,
+    searchResults,
     isCreatedByUser,
     isLast,
     isSubmitting,
@@ -44,15 +50,9 @@ const ContentParts = memo(
     setSiblingIdx,
   }: ContentPartsProps) => {
     const localize = useLocalize();
-    const messageAttachmentsMap = useRecoilValue(store.messageAttachmentsMap);
     const [showThinking, setShowThinking] = useRecoilState<boolean>(store.showThinking);
     const [isExpanded, setIsExpanded] = useState(showThinking);
-    const messageAttachments = useMemo(
-      () => attachments ?? messageAttachmentsMap[messageId] ?? [],
-      [attachments, messageAttachmentsMap, messageId],
-    );
-    const searchResults = useSearchResultsByTurn(messageAttachments);
-    const attachmentMap = useMemo(() => mapAttachments(messageAttachments), [messageAttachments]);
+    const attachmentMap = useMemo(() => mapAttachments(attachments ?? []), [attachments]);
 
     const hasReasoningParts = useMemo(() => {
       const hasThinkPart = content?.some((part) => part?.type === ContentTypes.THINK) ?? false;

client/src/components/Chat/Messages/Content/SearchContent.tsx

@@ -1,26 +1,40 @@
 import { Suspense, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { ContentTypes } from 'librechat-data-provider';
-import type { Agents, TMessage, TMessageContentParts } from 'librechat-data-provider';
+import type {
+  Agents,
+  TMessage,
+  TAttachment,
+  SearchResultData,
+  TMessageContentParts,
+} from 'librechat-data-provider';
 import { UnfinishedMessage } from './MessageContent';
 import { DelayedRender } from '~/components/ui';
-import MarkdownLite from './MarkdownLite';
+import Sources from '~/components/Web/Sources';
 import { cn, mapAttachments } from '~/utils';
+import { SearchContext } from '~/Providers';
+import MarkdownLite from './MarkdownLite';
 import store from '~/store';
 import Part from './Part';
 
-const SearchContent = ({ message }: { message: TMessage }) => {
+const SearchContent = ({
+  message,
+  attachments,
+  searchResults,
+}: {
+  message: TMessage;
+  attachments?: TAttachment[];
+  searchResults?: { [key: string]: SearchResultData };
+}) => {
   const enableUserMsgMarkdown = useRecoilValue(store.enableUserMsgMarkdown);
   const { messageId } = message;
-  const messageAttachmentsMap = useRecoilValue(store.messageAttachmentsMap);
-  const attachmentMap = useMemo(
-    () => mapAttachments(message?.attachments ?? messageAttachmentsMap[messageId] ?? []),
-    [message?.attachments, messageAttachmentsMap, messageId],
-  );
+
+  const attachmentMap = useMemo(() => mapAttachments(attachments ?? []), [attachments]);
 
   if (Array.isArray(message.content) && message.content.length > 0) {
     return (
-      <>
+      <SearchContext.Provider value={{ searchResults }}>
+        <Sources />
         {message.content
           .filter((part: TMessageContentParts | undefined) => part)
           .map((part: TMessageContentParts | undefined, idx: number) => {
@@ -49,7 +63,7 @@ const SearchContent = ({ message }: { message: TMessage }) => {
             </DelayedRender>
           </Suspense>
         )}
-      </>
+      </SearchContext.Provider>
     );
   }
 

client/src/components/Chat/Messages/MessageParts.tsx

@@ -2,8 +2,8 @@ import React, { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import type { TMessageContentParts } from 'librechat-data-provider';
 import type { TMessageProps, TMessageIcon } from '~/common';
+import { useMessageHelpers, useLocalize, useAttachments } from '~/hooks';
 import MessageIcon from '~/components/Chat/Messages/MessageIcon';
-import { useMessageHelpers, useLocalize } from '~/hooks';
 import ContentParts from './Content/ContentParts';
 import SiblingSwitch from './SiblingSwitch';
 
@@ -17,7 +17,10 @@ export default function Message(props: TMessageProps) {
   const localize = useLocalize();
   const { message, siblingIdx, siblingCount, setSiblingIdx, currentEditId, setCurrentEditId } =
     props;
-
+  const { attachments, searchResults } = useAttachments({
+    messageId: message?.messageId,
+    attachments: message?.attachments,
+  });
   const {
     edit,
     index,
@@ -91,7 +94,7 @@ export default function Message(props: TMessageProps) {
       >
         <div className="m-auto justify-center p-4 py-2 md:gap-6">
           <div
-            id={messageId}
+            id={messageId ?? ''}
             aria-label={`message-${message.depth}-${messageId}`}
             className={cn(baseClasses.common, baseClasses.chat, 'message-render')}
           >
@@ -116,10 +119,11 @@ export default function Message(props: TMessageProps) {
                     isLast={isLast}
                     enterEdit={enterEdit}
                     siblingIdx={siblingIdx}
-                    messageId={message.messageId}
+                    attachments={attachments}
                     isSubmitting={isSubmitting}
+                    searchResults={searchResults}
+                    messageId={message.messageId}
                     setSiblingIdx={setSiblingIdx}
-                    attachments={message.attachments}
                     isCreatedByUser={message.isCreatedByUser}
                     conversationId={conversation?.conversationId}
                     content={message.content as Array<TMessageContentParts | undefined>}

client/src/components/Chat/Messages/MinimalHoverButtons.tsx

@@ -1,16 +1,21 @@
 import { useState } from 'react';
-import type { TMessage } from 'librechat-data-provider';
+import type { TMessage, TAttachment, SearchResultData } from 'librechat-data-provider';
 import { useLocalize, useCopyToClipboard } from '~/hooks';
 import { Clipboard, CheckMark } from '~/components/svg';
 
 type THoverButtons = {
   message: TMessage;
+  searchResults?: { [key: string]: SearchResultData };
 };
 
-export default function MinimalHoverButtons({ message }: THoverButtons) {
+export default function MinimalHoverButtons({ message, searchResults }: THoverButtons) {
   const localize = useLocalize();
   const [isCopied, setIsCopied] = useState(false);
-  const copyToClipboard = useCopyToClipboard({ text: message.text, content: message.content });
+  const copyToClipboard = useCopyToClipboard({
+    text: message.text,
+    content: message.content,
+    searchResults,
+  });
 
   return (
     <div className="visible mt-0 flex justify-center gap-1 self-end text-gray-400 lg:justify-start">

client/src/components/Chat/Messages/ui/MessageRender.tsx

@@ -94,10 +94,10 @@ const MessageRender = memo(
       () =>
         showCardRender && !isLatestMessage
           ? () => {
-            logger.log(`Message Card click: Setting ${msg?.messageId} as latest message`);
-            logger.dir(msg);
-            setLatestMessage(msg!);
-          }
+              logger.log(`Message Card click: Setting ${msg?.messageId} as latest message`);
+              logger.dir(msg);
+              setLatestMessage(msg!);
+            }
           : undefined,
       [showCardRender, isLatestMessage, msg, setLatestMessage],
     );