🌿 feat: Multi-response Streaming (#3191)

* chore: comment back handlePlusCommand

* chore: ignore .git dir

* refactor: pass newConversation to `useSelectMention`

refactor: pass newConversation to Mention component

refactor: useChatFunctions for modular use of `ask` and `regenerate`

refactor: set latest message only for the first index in useChatFunctions

refactor: pass setLatestMessage to useChatFunctions

refactor: Pass setSubmission to useChatFunctions for submission handling

refactor: consolidate event handlers to separate hook from useSSE

WIP: additional response handlers

feat: responsive added convo, clears on new chat/navigating to chat, assistants excluded

feat: Add conversationByKeySelector to select any conversation by index

WIP: handle second submission with messages paired to root

* style: surface-primary-contrast

* refactor: remove unnecessary console.log statement in useChatFunctions

* refactor: Consolidate imports in ChatForm and Input hooks

* refactor: compositional usage of useSSE for multiple streams

* WIP: set latest 'multi' message

* WIP: first pass, added response streaming

* pass: performant multi-message stream

* fix: styling and message render

* second pass: modular, performant multi-stream

* fix: align parentMessageId of multiMessage

* refactor: move resetting latestMultiMessage

* chore: update footer text in Chat component

* fix: stop button styling

* fix: handle abortMessage request for multi-response

* clear messages but bug with latest message reset present

* fix: add delay for additional message generation

* fix: access LAST_CONVO_SETUP by index

* style: add div to prevent layout shift before hover buttons render

* chore: Update Message component styling for card messages

* chore: move hook use order

* fix: abort middleware using unsent field from req.body

* feat: support multi-response stream from initial message

* refactor: buildTree function to improve readability and remove unused code

* feat: add logger for frontend dev

* refactor: use depth to track if message is really last in its branch

* fix(buildTree): default export

* fix: share parent message Id and avoid duplication error for multi-response streams

* fix: prevent addedConvo reset to response convo

* feat: allow setting multi message as latest message to control which to respond to

* chore: wrap setSiblingIdxRev with useCallback

* chore: styling and allow editing messages

* style: styling fixes

* feat: Add "AddMultiConvo" component to Chat Header

* feat: prevent clearing added convos on endpoint, preset, mention, or modelSpec switch

* fix: message styling fixes, mainly related to code blocks

* fix: stop button visibility logic

* fix: Handle edge case in abortMiddleware for non-existant `abortControllers`

* refactor: optimize/memoize icons

* chore(GoogleClient): change info to debug logs

* style: active message styling

* style: prevent layout shift due to placeholder row

* chore: remove unused code

* fix: Update BaseClient to handle optional request body properties

* fix(ci): `onStart` now accepts 2 args, the 2nd being responseMessageId

* chore: bump data-provider

client/src/components/Chat/Input/AddedConvo.tsx

@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
+import type { TConversation, TEndpointOption, TPreset } from 'librechat-data-provider';
+import type { SetterOrUpdater } from 'recoil';
+import useGetSender from '~/hooks/Conversations/useGetSender';
+import { EndpointIcon } from '~/components/Endpoints';
+import { getPresetTitle } from '~/utils';
+
+export default function AddedConvo({
+  addedConvo,
+  setAddedConvo,
+}: {
+  addedConvo: TConversation | null;
+  setAddedConvo: SetterOrUpdater<TConversation | null>;
+}) {
+  const getSender = useGetSender();
+  const { data: endpointsConfig } = useGetEndpointsQuery();
+  const title = useMemo(() => {
+    const sender = getSender(addedConvo as TEndpointOption);
+    const title = getPresetTitle(addedConvo as TPreset);
+    return `+ ${sender}: ${title}`;
+  }, [addedConvo, getSender]);
+
+  if (!addedConvo) {
+    return null;
+  }
+  return (
+    <div className="flex items-start gap-4 py-2.5 pl-3 pr-1.5 text-sm">
+      <span className="mt-0 flex h-6 w-6 flex-shrink-0 items-center justify-center">
+        <div className="icon-md">
+          <EndpointIcon
+            conversation={addedConvo}
+            endpointsConfig={endpointsConfig}
+            containerClassName="shadow-stroke overflow-hidden rounded-full"
+            context="menu-item"
+            size={20}
+          />
+        </div>
+      </span>
+      <span className="text-token-text-secondary line-clamp-3 flex-1 py-0.5 font-semibold">
+        {title}
+      </span>
+      <button
+        className="text-token-text-secondary flex-shrink-0"
+        type="button"
+        onClick={() => setAddedConvo(null)}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          fill="none"
+          viewBox="0 0 24 24"
+          className="icon-lg"
+        >
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M7.293 7.293a1 1 0 0 1 1.414 0L12 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414L13.414 12l3.293 3.293a1 1 0 0 1-1.414 1.414L12 13.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L10.586 12 7.293 8.707a1 1 0 0 1 0-1.414"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </button>
+    </div>
+  );
+}

client/src/components/Chat/Input/ChatForm.tsx

@@ -6,12 +6,23 @@ import {
   isAssistantsEndpoint,
   fileConfig as defaultFileConfig,
 } from 'librechat-data-provider';
-import { useChatContext, useAssistantsMapContext, useChatFormContext } from '~/Providers';
-import { useRequiresKey, useTextarea, useSubmitMessage, useHandleKeyUp } from '~/hooks';
-import { useAutoSave } from '~/hooks/Input/useAutoSave';
+import {
+  useChatContext,
+  useAddedChatContext,
+  useAssistantsMapContext,
+  useChatFormContext,
+} from '~/Providers';
+import {
+  useTextarea,
+  useAutoSave,
+  useRequiresKey,
+  useHandleKeyUp,
+  useSubmitMessage,
+} from '~/hooks';
 import { TextareaAutosize } from '~/components/ui';
 import { useGetFileConfig } from '~/data-provider';
 import { cn, removeFocusRings } from '~/utils';
+import TextareaHeader from './TextareaHeader';
 import AttachFile from './Files/AttachFile';
 import AudioRecorder from './AudioRecorder';
 import { mainTextareaId } from '~/common';
@@ -25,16 +36,19 @@ import store from '~/store';
 const ChatForm = ({ index = 0 }) => {
   const submitButtonRef = useRef<HTMLButtonElement>(null);
   const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
+
   const SpeechToText = useRecoilValue(store.SpeechToText);
   const TextToSpeech = useRecoilValue(store.TextToSpeech);
   const automaticPlayback = useRecoilValue(store.automaticPlayback);
+
   const [showStopButton, setShowStopButton] = useRecoilState(store.showStopButtonByIndex(index));
+  const [showPlusPopover, setShowPlusPopover] = useRecoilState(store.showPlusPopoverFamily(index));
   const [showMentionPopover, setShowMentionPopover] = useRecoilState(
     store.showMentionPopoverFamily(index),
   );
-  const { requiresKey } = useRequiresKey();
 
-  const handleKeyUp = useHandleKeyUp({ index, textAreaRef });
+  const { requiresKey } = useRequiresKey();
+  const handleKeyUp = useHandleKeyUp({ textAreaRef, setShowPlusPopover, setShowMentionPopover });
   const { handlePaste, handleKeyDown, handleCompositionStart, handleCompositionEnd } = useTextarea({
     textAreaRef,
     submitButtonRef,
@@ -48,9 +62,18 @@ const ChatForm = ({ index = 0 }) => {
     isSubmitting,
     filesLoading,
     setFilesLoading,
+    newConversation,
     handleStopGenerating,
   } = useChatContext();
   const methods = useChatFormContext();
+  const {
+    addedIndex,
+    generateConversation,
+    conversation: addedConvo,
+    setConversation: setAddedConvo,
+    isSubmitting: isSubmittingAdded,
+  } = useAddedChatContext();
+  const showStopAdded = useRecoilValue(store.showStopButtonByIndex(addedIndex));
 
   const { clearDraft } = useAutoSave({
     conversationId: useMemo(() => conversation?.conversationId, [conversation]),
@@ -96,10 +119,25 @@ const ChatForm = ({ index = 0 }) => {
     >
       <div className="relative flex h-full flex-1 items-stretch md:flex-col">
         <div className="flex w-full items-center">
+          {showPlusPopover && !isAssistantsEndpoint(endpoint) && (
+            <Mention
+              setShowMentionPopover={setShowPlusPopover}
+              newConversation={generateConversation}
+              textAreaRef={textAreaRef}
+              commandChar="+"
+              placeholder="com_ui_add"
+              includeAssistants={false}
+            />
+          )}
           {showMentionPopover && (
-            <Mention setShowMentionPopover={setShowMentionPopover} textAreaRef={textAreaRef} />
+            <Mention
+              setShowMentionPopover={setShowMentionPopover}
+              newConversation={newConversation}
+              textAreaRef={textAreaRef}
+            />
           )}
           <div className="bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border dark:border-gray-600 dark:text-white [&:has(textarea:focus)]:border-gray-300 [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)] dark:[&:has(textarea:focus)]:border-gray-500">
+            <TextareaHeader addedConvo={addedConvo} setAddedConvo={setAddedConvo} />
             <FileRow
               files={files}
               setFiles={setFiles}
@@ -145,7 +183,7 @@ const ChatForm = ({ index = 0 }) => {
               endpointType={endpointType}
               disabled={disableInputs}
             />
-            {isSubmitting && showStopButton ? (
+            {(isSubmitting || isSubmittingAdded) && (showStopButton || showStopAdded) ? (
               <StopButton stop={handleStopGenerating} setShowStopButton={setShowStopButton} />
             ) : (
               endpoint && (

client/src/components/Chat/Input/Mention.tsx

@@ -1,30 +1,39 @@
 import { useState, useRef, useEffect } from 'react';
 import { EModelEndpoint } from 'librechat-data-provider';
 import type { SetterOrUpdater } from 'recoil';
-import type { MentionOption } from '~/common';
+import type { MentionOption, ConvoGenerator } from '~/common';
 import useSelectMention from '~/hooks/Input/useSelectMention';
 import { useAssistantsMapContext } from '~/Providers';
 import useMentions from '~/hooks/Input/useMentions';
 import { useLocalize, useCombobox } from '~/hooks';
-import { removeAtSymbolIfLast } from '~/utils';
+import { removeCharIfLast } from '~/utils';
 import MentionItem from './MentionItem';
 
 export default function Mention({
   setShowMentionPopover,
+  newConversation,
   textAreaRef,
+  commandChar = '@',
+  placeholder = 'com_ui_mention',
+  includeAssistants = true,
 }: {
   setShowMentionPopover: SetterOrUpdater<boolean>;
+  newConversation: ConvoGenerator;
   textAreaRef: React.MutableRefObject<HTMLTextAreaElement | null>;
+  commandChar?: string;
+  placeholder?: string;
+  includeAssistants?: boolean;
 }) {
   const localize = useLocalize();
   const assistantMap = useAssistantsMapContext();
   const { options, presets, modelSpecs, modelsConfig, endpointsConfig, assistantListMap } =
-    useMentions({ assistantMap });
+    useMentions({ assistantMap, includeAssistants });
   const { onSelectMention } = useSelectMention({
     presets,
     modelSpecs,
     assistantMap,
     endpointsConfig,
+    newConversation,
   });
 
   const [activeIndex, setActiveIndex] = useState(0);
@@ -49,7 +58,7 @@ export default function Mention({
       onSelectMention(mention);
 
       if (textAreaRef.current) {
-        removeAtSymbolIfLast(textAreaRef.current);
+        removeCharIfLast(textAreaRef.current, commandChar);
       }
     };
 
@@ -105,7 +114,7 @@ export default function Mention({
         <input
           autoFocus
           ref={inputRef}
-          placeholder={localize('com_ui_mention')}
+          placeholder={localize(placeholder)}
           className="mb-1 w-full border-0 bg-white p-2 text-sm focus:outline-none dark:bg-gray-700 dark:text-gray-200"
           autoComplete="off"
           value={searchValue}

client/src/components/Chat/Input/StopButton.tsx

@@ -1,33 +1,29 @@
 export default function StopButton({ stop, setShowStopButton }) {
   return (
-    <div className="absolute bottom-0 right-2 top-0 p-1 md:right-3 md:p-2">
-      <div className="flex h-full">
-        <div className="flex h-full flex-row items-center justify-center gap-3">
-          <button
-            type="button"
-            className="border-gizmo-gray-900 rounded-full border-2 p-1 dark:border-gray-200"
-            aria-label="Stop generating"
-            onClick={(e) => {
-              setShowStopButton(false);
-              stop(e);
-            }}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 16 16"
-              fill="currentColor"
-              className="text-gizmo-gray-900 h-2 w-2 dark:text-gray-200"
-              height="16"
-              width="16"
-            >
-              <path
-                d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2z"
-                strokeWidth="0"
-              ></path>
-            </svg>
-          </button>
-        </div>
-      </div>
+    <div className="absolute bottom-3 right-2 md:bottom-4 md:right-4">
+      <button
+        type="button"
+        className="border-gizmo-gray-900 rounded-full border-2 p-1 dark:border-gray-200"
+        aria-label="Stop generating"
+        onClick={(e) => {
+          setShowStopButton(false);
+          stop(e);
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          fill="currentColor"
+          className="text-gizmo-gray-900 h-2 w-2 dark:text-gray-200"
+          height="16"
+          width="16"
+        >
+          <path
+            d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2z"
+            strokeWidth="0"
+          ></path>
+        </svg>
+      </button>
     </div>
   );
 }

client/src/components/Chat/Input/TextareaHeader.tsx

@@ -0,0 +1,20 @@
+import AddedConvo from './AddedConvo';
+import type { TConversation } from 'librechat-data-provider';
+import type { SetterOrUpdater } from 'recoil';
+
+export default function TextareaHeader({
+  addedConvo,
+  setAddedConvo,
+}: {
+  addedConvo: TConversation | null;
+  setAddedConvo: SetterOrUpdater<TConversation | null>;
+}) {
+  if (!addedConvo) {
+    return null;
+  }
+  return (
+    <div className="divide-token-border-light m-1.5 flex flex-col divide-y overflow-hidden rounded-b-lg rounded-t-2xl bg-surface-primary-contrast">
+      <AddedConvo addedConvo={addedConvo} setAddedConvo={setAddedConvo} />
+    </div>
+  );
+}