🌿 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
2026-03-10 18:12:35 +01:00 · 2024-06-25 03:02:38 -04:00 · 2024-06-25 03:02:38 -04:00 · 156c52e293
commit 156c52e293
parent eef894e608
72 changed files with 2697 additions and 1326 deletions
--- a/client/src/components/Chat/Input/AddedConvo.tsx
+++ b/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>
+  );
+}