🔍 feat: Show Messages from Search Result (#2699)

* refactor(Nav): delegate Search-specific variables/hooks to SearchContext

* fix: safely determine firstTodayConvoId if convo is undefined

* chore: remove empty line

* feat: initial render of search messages

* feat: SearchButtons

* update Ko.ts

* update localizations with new key phrases

* chore: localization comparisons

* fix: clear conversation state on searchQuery navigation

* style: search messages view styling

* refactor(Convo): consolidate logic to navigateWithLastTools from useNavigateToConvo

* fix(SearchButtons): styling and correct navigation logic

* fix(SearchBar): invalidate all message queries and invoke `clearText` if onChange value is empty

* refactor(NewChat): consolidate new chat button logic to NewChatButtonIcon

* chore: localizations for Nav date groups

* chore: update comparisons

* fix: early return from sendRequest to avoid quick searchQuery reset

* style: Link Icon

* chore: bump tiktoken, use o200k_base for gpt-4o

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

@@ -0,0 +1,53 @@
+import { Suspense } from 'react';
+import type { TMessage, TMessageContentParts } from 'librechat-data-provider';
+import { UnfinishedMessage } from './MessageContent';
+import { DelayedRender } from '~/components/ui';
+import MarkdownLite from './MarkdownLite';
+import { cn } from '~/utils';
+import Part from './Part';
+
+const SearchContent = ({ message }: { message: TMessage }) => {
+  const { messageId } = message;
+  if (Array.isArray(message.content) && message.content.length > 0) {
+    return (
+      <>
+        {message.content
+          .filter((part: TMessageContentParts | undefined) => part)
+          .map((part: TMessageContentParts | undefined, idx: number) => {
+            if (!part) {
+              return null;
+            }
+            return (
+              <Part
+                key={`display-${messageId}-${idx}`}
+                showCursor={false}
+                isSubmitting={false}
+                part={part}
+                message={message}
+              />
+            );
+          })}
+        {message.unfinished && (
+          <Suspense>
+            <DelayedRender delay={250}>
+              <UnfinishedMessage message={message} key={`unfinished-${messageId}`} />
+            </DelayedRender>
+          </Suspense>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'markdown prose dark:prose-invert light w-full break-words',
+        message.isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
+      )}
+    >
+      <MarkdownLite content={message.text ?? ''} />
+    </div>
+  );
+};
+
+export default SearchContent;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { cn } from '~/utils';
+
+const MinimalMessages = React.forwardRef(
+  (
+    props: { children: React.ReactNode; className?: string },
+    ref: React.ForwardedRef<HTMLDivElement>,
+  ) => {
+    return (
+      <div
+        className={cn(
+          'relative flex w-full grow overflow-hidden bg-white dark:bg-gray-800',
+          props.className,
+        )}
+      >
+        <div className="transition-width relative h-full w-full flex-1 overflow-auto bg-white dark:bg-gray-800">
+          <div className="flex h-full flex-col" role="presentation" tabIndex={0}>
+            <div className="flex-1 overflow-hidden overflow-y-auto">
+              <div className="dark:gpt-dark-gray relative h-full">
+                <div
+                  ref={ref}
+                  style={{
+                    height: '100%',
+                    overflowY: 'auto',
+                    width: '100%',
+                  }}
+                >
+                  <div className="flex flex-col pb-9 text-sm dark:bg-transparent">
+                    {props.children}
+                    <div className="dark:gpt-dark-gray group h-0 w-full flex-shrink-0 dark:border-gray-800/50" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+export default MinimalMessages;

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

@@ -0,0 +1,40 @@
+import { Link } from 'lucide-react';
+import type { TMessage } from 'librechat-data-provider';
+import { useLocalize, useNavigateToConvo } from '~/hooks';
+import { useSearchContext } from '~/Providers';
+import { getConversationById } from '~/utils';
+
+export default function SearchButtons({ message }: { message: TMessage }) {
+  const localize = useLocalize();
+  const { searchQueryRes } = useSearchContext();
+  const { navigateWithLastTools } = useNavigateToConvo();
+
+  if (!message.conversationId) {
+    return null;
+  }
+
+  const clickHandler = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+
+    const conversation = getConversationById(searchQueryRes?.data, message.conversationId);
+    if (!conversation) {
+      return;
+    }
+
+    document.title = message.title ?? '';
+    navigateWithLastTools(conversation);
+  };
+
+  return (
+    <div className="visible mt-0 flex items-center justify-center gap-1 self-end text-gray-400 lg:justify-start">
+      <a
+        className="ml-0 flex cursor-pointer items-center gap-1.5 rounded-md p-1 text-xs hover:text-gray-900 hover:underline dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"
+        onClick={clickHandler}
+        title={localize('com_ui_go_to_conversation')}
+      >
+        <Link className="icon-sm" />
+        {message.title}
+      </a>
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { useRecoilValue } from 'recoil';
+import { useAuthContext, useLocalize } from '~/hooks';
+import type { TMessageProps } from '~/common';
+import Icon from '~/components/Chat/Messages/MessageIcon';
+import SearchContent from './Content/SearchContent';
+import SearchButtons from './SearchButtons';
+import SubRow from './SubRow';
+import { cn } from '~/utils';
+import store from '~/store';
+
+export default function Message({ message }: Pick<TMessageProps, 'message'>) {
+  const UsernameDisplay = useRecoilValue<boolean>(store.UsernameDisplay);
+  const { user } = useAuthContext();
+  const localize = useLocalize();
+
+  if (!message) {
+    return null;
+  }
+
+  const { isCreatedByUser } = message ?? {};
+
+  let messageLabel = '';
+  if (isCreatedByUser) {
+    messageLabel = UsernameDisplay ? user?.name || user?.username : localize('com_user_message');
+  } else {
+    messageLabel = message.sender;
+  }
+
+  return (
+    <>
+      <div className="text-token-text-primary w-full border-0 bg-transparent dark:border-0 dark:bg-transparent">
+        <div className="m-auto justify-center p-4 py-2 text-base md:gap-6 ">
+          <div className="final-completion group mx-auto flex flex-1 gap-3 text-base md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5">
+            <div className="relative flex flex-shrink-0 flex-col items-end">
+              <div>
+                <div className="pt-0.5">
+                  <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
+                    <Icon message={message} />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className={cn('relative flex w-11/12 flex-col', isCreatedByUser ? '' : 'agent-turn')}
+            >
+              <div className="select-none font-semibold">{messageLabel}</div>
+              <div className="flex-col gap-1 md:gap-3">
+                <div className="flex max-w-full flex-grow flex-col gap-0">
+                  <SearchContent message={message} />
+                </div>
+              </div>
+              <SubRow classes="text-xs">
+                <SearchButtons message={message} />
+              </SubRow>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

client/src/components/Chat/SearchView.tsx

@@ -1,22 +0,0 @@
-import { memo } from 'react';
-import { useRecoilValue } from 'recoil';
-import MessagesView from './Messages/MessagesView';
-import store from '~/store';
-
-import Header from './Header';
-
-function SearchView() {
-  const searchResultMessagesTree = useRecoilValue(store.searchResultMessagesTree);
-
-  return (
-    <div className="relative flex w-full grow overflow-hidden bg-white dark:bg-gray-800">
-      <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white pt-0 dark:bg-gray-800">
-        <div className="flex h-full flex-col" role="presentation" tabIndex={0}>
-          <MessagesView messagesTree={searchResultMessagesTree} Header={<Header />} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default memo(SearchView);