🌿 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/hooks/Input/index.ts

@@ -1,3 +1,4 @@
+export * from './useAutoSave';
 export { default as useUserKey } from './useUserKey';
 export { default as useDebounce } from './useDebounce';
 export { default as useTextarea } from './useTextarea';

client/src/hooks/Input/useHandleKeyUp.ts

@@ -1,6 +1,12 @@
 import { useCallback, useMemo } from 'react';
-import { useSetRecoilState } from 'recoil';
-import store from '~/store';
+import type { SetterOrUpdater } from 'recoil';
+
+/** Event Keys that shouldn't trigger a command */
+const invalidKeys = {
+  Escape: true,
+  Backspace: true,
+  Enter: true,
+};
 
 /**
  * Utility function to determine if a command should trigger.
@@ -23,10 +29,6 @@ const shouldTriggerCommand = (
   const isPrecededBySpace = textAreaRef.current?.value.charAt(startPos - 2) === ' ';
 
   const shouldTrigger = isAtStart || isPrecededBySpace;
-  if (shouldTrigger) {
-    // Blurring helps prevent the command from firing twice.
-    textAreaRef.current.blur();
-  }
   return shouldTrigger;
 };
 
@@ -34,33 +36,32 @@ const shouldTriggerCommand = (
  * Custom hook for handling key up events with command triggers.
  */
 const useHandleKeyUp = ({
-  index,
   textAreaRef,
+  setShowPlusPopover,
+  setShowMentionPopover,
 }: {
-  index: number;
   textAreaRef: React.RefObject<HTMLTextAreaElement>;
+  setShowPlusPopover: SetterOrUpdater<boolean>;
+  setShowMentionPopover: SetterOrUpdater<boolean>;
 }) => {
-  const setShowMentionPopover = useSetRecoilState(store.showMentionPopoverFamily(index));
-
   const handleAtCommand = useCallback(() => {
     if (shouldTriggerCommand(textAreaRef, '@')) {
       setShowMentionPopover(true);
     }
   }, [textAreaRef, setShowMentionPopover]);
 
-  // const handlePlusCommand = useCallback(() => {
-  //   if (shouldTriggerCommand(textAreaRef, '+')) {
-  //     console.log('+ command triggered');
-  //   }
-  // }, [textAreaRef]);
+  const handlePlusCommand = useCallback(() => {
+    if (shouldTriggerCommand(textAreaRef, '+')) {
+      setShowPlusPopover(true);
+    }
+  }, [textAreaRef, setShowPlusPopover]);
 
   const commandHandlers = useMemo(
     () => ({
       '@': handleAtCommand,
-      // '+': handlePlusCommand,
+      '+': handlePlusCommand,
     }),
-    [handleAtCommand],
-    // [handleAtCommand, handlePlusCommand],
+    [handleAtCommand, handlePlusCommand],
   );
 
   /**
@@ -73,7 +74,7 @@ const useHandleKeyUp = ({
         return;
       }
 
-      if (event.key === 'Escape') {
+      if (invalidKeys[event.key]) {
         return;
       }
 

client/src/hooks/Input/useMentions.ts

@@ -4,7 +4,12 @@ import {
   useGetStartupConfig,
   useGetEndpointsQuery,
 } from 'librechat-data-provider/react-query';
-import { getConfigDefaults, EModelEndpoint, alternateName } from 'librechat-data-provider';
+import {
+  getConfigDefaults,
+  EModelEndpoint,
+  alternateName,
+  isAssistantsEndpoint,
+} from 'librechat-data-provider';
 import type { AssistantsEndpoint, TAssistantsMap, TEndpointsConfig } from 'librechat-data-provider';
 import type { MentionOption } from '~/common';
 import useAssistantListMap from '~/hooks/Assistants/useAssistantListMap';
@@ -39,7 +44,13 @@ const assistantMapFn =
       }),
     });
 
-export default function useMentions({ assistantMap }: { assistantMap: TAssistantsMap }) {
+export default function useMentions({
+  assistantMap,
+  includeAssistants,
+}: {
+  assistantMap: TAssistantsMap;
+  includeAssistants: boolean;
+}) {
   const { data: presets } = useGetPresetsQuery();
   const { data: modelsConfig } = useGetModelsQuery();
   const { data: startupConfig } = useGetStartupConfig();
@@ -85,6 +96,10 @@ export default function useMentions({ assistantMap }: { assistantMap: TAssistant
   );
 
   const options: MentionOption[] = useMemo(() => {
+    let validEndpoints = endpoints;
+    if (!includeAssistants) {
+      validEndpoints = endpoints.filter((endpoint) => !isAssistantsEndpoint(endpoint));
+    }
     const mentions = [
       ...(modelSpecs?.length > 0 ? modelSpecs : []).map((modelSpec) => ({
         value: modelSpec.name,
@@ -101,7 +116,7 @@ export default function useMentions({ assistantMap }: { assistantMap: TAssistant
         }),
         type: 'modelSpec' as const,
       })),
-      ...(interfaceConfig.endpointsMenu ? endpoints : []).map((endpoint) => ({
+      ...(interfaceConfig.endpointsMenu ? validEndpoints : []).map((endpoint) => ({
         value: endpoint,
         label: alternateName[endpoint] ?? endpoint ?? '',
         type: 'endpoint' as const,
@@ -112,10 +127,10 @@ export default function useMentions({ assistantMap }: { assistantMap: TAssistant
           size: 20,
         }),
       })),
-      ...(endpointsConfig?.[EModelEndpoint.assistants]
+      ...(endpointsConfig?.[EModelEndpoint.assistants] && includeAssistants
         ? assistantListMap[EModelEndpoint.assistants] || []
         : []),
-      ...(endpointsConfig?.[EModelEndpoint.azureAssistants]
+      ...(endpointsConfig?.[EModelEndpoint.azureAssistants] && includeAssistants
         ? assistantListMap[EModelEndpoint.azureAssistants] || []
         : []),
       ...((interfaceConfig.presets ? presets : [])?.map((preset, index) => ({
@@ -142,6 +157,7 @@ export default function useMentions({ assistantMap }: { assistantMap: TAssistant
     assistantMap,
     endpointsConfig,
     assistantListMap,
+    includeAssistants,
     interfaceConfig.presets,
     interfaceConfig.endpointsMenu,
   ]);

client/src/hooks/Input/useSelectMention.ts

@@ -8,25 +8,26 @@ import type {
   TAssistantsMap,
   TEndpointsConfig,
 } from 'librechat-data-provider';
-import type { MentionOption } from '~/common';
+import type { MentionOption, ConvoGenerator } from '~/common';
 import { getConvoSwitchLogic, getModelSpecIconURL, removeUnavailableTools } from '~/utils';
-import { useDefaultConvo, useNewConvo } from '~/hooks';
 import { useChatContext } from '~/Providers';
+import { useDefaultConvo } from '~/hooks';
 import store from '~/store';
 
 export default function useSelectMention({
   presets,
   modelSpecs,
-  endpointsConfig,
   assistantMap,
+  endpointsConfig,
+  newConversation,
 }: {
   presets?: TPreset[];
   modelSpecs: TModelSpec[];
-  endpointsConfig: TEndpointsConfig;
   assistantMap: TAssistantsMap;
+  newConversation: ConvoGenerator;
+  endpointsConfig: TEndpointsConfig;
 }) {
   const { conversation } = useChatContext();
-  const { newConversation } = useNewConvo();
   const getDefaultConversation = useDefaultConvo();
   const modularChat = useRecoilValue(store.modularChat);
   const availableTools = useRecoilValue(store.availableTools);
@@ -45,12 +46,12 @@ export default function useSelectMention({
       }
 
       const {
+        template,
         shouldSwitch,
         isNewModular,
+        newEndpointType,
         isCurrentModular,
         isExistingConversation,
-        newEndpointType,
-        template,
       } = getConvoSwitchLogic({
         newEndpoint,
         modularChat,
@@ -58,7 +59,8 @@ export default function useSelectMention({
         endpointsConfig,
       });
 
-      if (isExistingConversation && isCurrentModular && isNewModular && shouldSwitch) {
+      const isModular = isCurrentModular && isNewModular && shouldSwitch;
+      if (isExistingConversation && isModular) {
         template.endpointType = newEndpointType as EModelEndpoint | undefined;
 
         const currentConvo = getDefaultConversation({
@@ -68,11 +70,20 @@ export default function useSelectMention({
         });
 
         /* We don't reset the latest message, only when changing settings mid-converstion */
-        newConversation({ template: currentConvo, preset, keepLatestMessage: true });
+        newConversation({
+          template: currentConvo,
+          preset,
+          keepLatestMessage: true,
+          keepAddedConvos: true,
+        });
         return;
       }
 
-      newConversation({ template: { ...(template as Partial<TConversation>) }, preset });
+      newConversation({
+        template: { ...(template as Partial<TConversation>) },
+        preset,
+        keepAddedConvos: isModular,
+      });
     },
     [conversation, getDefaultConversation, modularChat, newConversation, endpointsConfig],
   );
@@ -142,12 +153,12 @@ export default function useSelectMention({
       const newEndpoint = newPreset.endpoint ?? '';
 
       const {
+        template,
         shouldSwitch,
         isNewModular,
+        newEndpointType,
         isCurrentModular,
         isExistingConversation,
-        newEndpointType,
-        template,
       } = getConvoSwitchLogic({
         newEndpoint,
         modularChat,
@@ -155,7 +166,8 @@ export default function useSelectMention({
         endpointsConfig,
       });
 
-      if (isExistingConversation && isCurrentModular && isNewModular && shouldSwitch) {
+      const isModular = isCurrentModular && isNewModular && shouldSwitch;
+      if (isExistingConversation && isModular) {
         template.endpointType = newEndpointType as EModelEndpoint | undefined;
 
         const currentConvo = getDefaultConversation({
@@ -165,19 +177,24 @@ export default function useSelectMention({
         });
 
         /* We don't reset the latest message, only when changing settings mid-converstion */
-        newConversation({ template: currentConvo, preset: newPreset, keepLatestMessage: true });
+        newConversation({
+          template: currentConvo,
+          preset: newPreset,
+          keepLatestMessage: true,
+          keepAddedConvos: true,
+        });
         return;
       }
 
-      newConversation({ preset: newPreset });
+      newConversation({ preset: newPreset, keepAddedConvos: true });
     },
     [
-      availableTools,
-      conversation,
-      getDefaultConversation,
       modularChat,
+      conversation,
+      availableTools,
       newConversation,
       endpointsConfig,
+      getDefaultConversation,
     ],
   );