🚀 feat: Assistants Streaming (#2159)

* chore: bump openai to 4.29.0 and npm audit fix

* chore: remove unnecessary stream field from ContentData

* feat: new enum and types for AssistantStreamEvent

* refactor(AssistantService): remove stream field and add conversationId to text ContentData
> - return `finalMessage` and `text` on run completion
> - move `processMessages` to services/Threads to avoid circular dependencies with new stream handling
> - refactor(processMessages/retrieveAndProcessFile): add new `client` field to differentiate new RunClient type

* WIP: new assistants stream handling

* chore: stores messages to StreamRunManager

* chore: add additional typedefs

* fix: pass req and openai to StreamRunManager

* fix(AssistantService): pass openai as client to `retrieveAndProcessFile`

* WIP: streaming tool i/o, handle in_progress and completed run steps

* feat(assistants): process required actions with streaming enabled

* chore: condense early return check for useSSE useEffect

* chore: remove unnecessary comments and only handle completed tool calls when not function

* feat: add TTL for assistants run abort cacheKey

* feat: abort stream runs

* fix(assistants): render streaming cursor

* fix(assistants): hide edit icon as functionality is not supported

* fix(textArea): handle pasting edge cases; first, when onChange events wouldn't fire; second, when textarea wouldn't resize

* chore: memoize Conversations

* chore(useTextarea): reverse args order

* fix: load default capabilities when an azure is configured to support assistants, but `assistants` endpoint is not configured

* fix(AssistantSelect): update form assistant model on assistant form select

* fix(actions): handle azure strict validation for function names to fix crud for actions

* chore: remove content data debug log as it fires in rapid succession

* feat: improve UX for assistant errors mid-request

* feat: add tool call localizations and replace any domain separators from azure action names

* refactor(chat): error out tool calls without outputs during handleError

* fix(ToolService): handle domain separators allowing Azure use of actions

* refactor(StreamRunManager): types and throw Error if tool submission fails

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

@@ -24,8 +24,18 @@ const ChatForm = ({ index = 0 }) => {
   const [showStopButton, setShowStopButton] = useRecoilState(store.showStopButtonByIndex(index));
   const { requiresKey } = useRequiresKey();
 
+  const methods = useForm<{ text: string }>({
+    defaultValues: { text: '' },
+  });
+
   const { handlePaste, handleKeyUp, handleKeyDown, handleCompositionStart, handleCompositionEnd } =
-    useTextarea({ textAreaRef, submitButtonRef, disabled: !!requiresKey });
+    useTextarea({
+      textAreaRef,
+      submitButtonRef,
+      disabled: !!requiresKey,
+      setValue: methods.setValue,
+      getValues: methods.getValues,
+    });
 
   const {
     ask,
@@ -39,9 +49,6 @@ const ChatForm = ({ index = 0 }) => {
   } = useChatContext();
 
   const assistantMap = useAssistantsMapContext();
-  const methods = useForm<{ text: string }>({
-    defaultValues: { text: '' },
-  });
 
   const submitMessage = useCallback(
     (data?: { text: string }) => {

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

@@ -21,20 +21,20 @@ any) => {
 
     return (
       <>
-        {content.map((part: TMessageContentParts | undefined, idx: number) => {
-          if (!part) {
-            return null;
-          }
-          return (
-            <Part
-              key={`display-${messageId}-${idx}`}
-              showCursor={idx === content.length - 1 && isLast}
-              isSubmitting={isSubmitting}
-              part={part}
-              {...props}
-            />
-          );
-        })}
+        {content
+          .filter((part: TMessageContentParts | undefined) => part)
+          .map((part: TMessageContentParts | undefined, idx: number) => {
+            const showCursor = idx === content.length - 1 && isLast;
+            return (
+              <Part
+                key={`display-${messageId}-${idx}`}
+                showCursor={showCursor && isSubmitting}
+                isSubmitting={isSubmitting}
+                part={part}
+                {...props}
+              />
+            );
+          })}
         {!isSubmitting && unfinished && (
           <Suspense>
             <DelayedRender delay={250}>

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

@@ -5,23 +5,21 @@ import FileContainer from '~/components/Chat/Input/Files/FileContainer';
 import Plugin from '~/components/Messages/Content/Plugin';
 import Error from '~/components/Messages/Content/Error';
 import { DelayedRender } from '~/components/ui';
-import { useAuthContext } from '~/hooks';
 import EditMessage from './EditMessage';
 import Container from './Container';
 import Markdown from './Markdown';
 import { cn } from '~/utils';
 import Image from './Image';
 
-export const ErrorMessage = ({ text }: TText) => {
-  const { logout } = useAuthContext();
-
-  if (text.includes('ban')) {
-    logout();
-    return null;
-  }
+export const ErrorMessage = ({ text, className = '' }: TText) => {
   return (
     <Container>
-      <div className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200">
+      <div
+        className={cn(
+          'rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200',
+          className,
+        )}
+      >
         <Error text={text} />
       </div>
     </Container>

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

@@ -1,6 +1,7 @@
 import { ToolCallTypes, ContentTypes, imageGenTools } from 'librechat-data-provider';
 import type { TMessageContentParts, TMessage } from 'librechat-data-provider';
 import type { TDisplayProps } from '~/common';
+import { ErrorMessage } from './MessageContent';
 import RetrievalCall from './RetrievalCall';
 import CodeAnalyze from './CodeAnalyze';
 import Container from './Container';
@@ -17,6 +18,7 @@ const DisplayMessage = ({ text, isCreatedByUser = false, message, showCursor }:
   return (
     <div
       className={cn(
+        showCursor && !!text?.length ? 'result-streaming' : '',
         'markdown prose dark:prose-invert light w-full break-words',
         isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
       )}
@@ -44,7 +46,10 @@ export default function Part({
   if (!part) {
     return null;
   }
-  if (part.type === ContentTypes.TEXT) {
+
+  if (part.type === ContentTypes.ERROR) {
+    return <ErrorMessage text={part[ContentTypes.TEXT].value} className="my-2" />;
+  } else if (part.type === ContentTypes.TEXT) {
     // Access the value property
     return (
       <Container>

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

@@ -1,6 +1,7 @@
 // import { useState, useEffect } from 'react';
-import { actionDelimiter } from 'librechat-data-provider';
+import { actionDelimiter, actionDomainSeparator } from 'librechat-data-provider';
 import * as Popover from '@radix-ui/react-popover';
+import useLocalize from '~/hooks/useLocalize';
 import ProgressCircle from './ProgressCircle';
 import InProgressCall from './InProgressCall';
 import CancelledIcon from './CancelledIcon';
@@ -24,12 +25,14 @@ export default function ToolCall({
   args: string;
   output?: string | null;
 }) {
+  const localize = useLocalize();
   const progress = useProgress(initialProgress);
   const radius = 56.08695652173913;
   const circumference = 2 * Math.PI * radius;
   const offset = circumference - progress * circumference;
 
-  const [function_name, domain] = name.split(actionDelimiter);
+  const [function_name, _domain] = name.split(actionDelimiter);
+  const domain = _domain?.replaceAll(actionDomainSeparator, '.') ?? null;
   const error = output?.toLowerCase()?.includes('error processing tool');
 
   return (
@@ -58,8 +61,12 @@ export default function ToolCall({
         <ProgressText
           progress={progress}
           onClick={() => ({})}
-          inProgressText={'Running action'}
-          finishedText={domain ? `Talked to ${domain}` : `Ran ${function_name}`}
+          inProgressText={localize('com_assistants_running_action')}
+          finishedText={
+            domain
+              ? localize('com_assistants_completed_action', domain)
+              : localize('com_assistants_completed_function', function_name)
+          }
           hasInput={!!args?.length}
           popover={true}
         />

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

@@ -1,4 +1,5 @@
 import * as Popover from '@radix-ui/react-popover';
+import useLocalize from '~/hooks/useLocalize';
 
 export default function ToolPopover({
   input,
@@ -11,6 +12,7 @@ export default function ToolPopover({
   output?: string | null;
   domain?: string;
 }) {
+  const localize = useLocalize();
   const formatText = (text: string) => {
     try {
       return JSON.stringify(JSON.parse(text), null, 2);
@@ -31,7 +33,9 @@ export default function ToolPopover({
         <div tabIndex={-1}>
           <div className="bg-token-surface-primary max-w-sm rounded-md p-2 shadow-[0_0_24px_0_rgba(0,0,0,0.05),inset_0_0.5px_0_0_rgba(0,0,0,0.05),0_2px_8px_0_rgba(0,0,0,0.05)]">
             <div className="mb-2 text-sm font-medium dark:text-gray-100">
-              {domain ? 'Assistant sent this info to ' + domain : `Assistant used ${function_name}`}
+              {domain
+                ? localize('com_assistants_domain_info', domain)
+                : localize('com_assistants_function_use', function_name)}
             </div>
             <div className="bg-token-surface-secondary text-token-text-primary dark rounded-md text-xs">
               <div className="max-h-32 overflow-y-auto rounded-md p-2 dark:bg-gray-700">
@@ -40,7 +44,9 @@ export default function ToolPopover({
             </div>
             {output && (
               <>
-                <div className="mb-2 mt-2 text-sm font-medium dark:text-gray-100">Result</div>
+                <div className="mb-2 mt-2 text-sm font-medium dark:text-gray-100">
+                  {localize('com_ui_result')}
+                </div>
                 <div className="bg-token-surface-secondary text-token-text-primary dark rounded-md text-xs">
                   <div className="max-h-32 overflow-y-auto rounded-md p-2 dark:bg-gray-700">
                     <code className="!whitespace-pre-wrap ">{formatText(output)}</code>

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

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { EModelEndpoint } from 'librechat-data-provider';
 import type { TConversation, TMessage } from 'librechat-data-provider';
 import { Clipboard, CheckMark, EditIcon, RegenerateIcon, ContinueIcon } from '~/components/svg';
 import { useGenerationsByLatest, useLocalize } from '~/hooks';
@@ -55,21 +56,23 @@ export default function HoverButtons({
 
   return (
     <div className="visible mt-0 flex justify-center gap-1 self-end text-gray-400 lg:justify-start">
-      <button
-        className={cn(
-          'hover-button rounded-md p-1 text-gray-400 hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
-          isCreatedByUser ? '' : 'active',
-          hideEditButton ? 'opacity-0' : '',
-          isEditing ? 'active bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '',
-          !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
-        )}
-        onClick={onEdit}
-        type="button"
-        title={localize('com_ui_edit')}
-        disabled={hideEditButton}
-      >
-        <EditIcon />
-      </button>
+      {endpoint !== EModelEndpoint.assistants && (
+        <button
+          className={cn(
+            'hover-button rounded-md p-1 text-gray-400 hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
+            isCreatedByUser ? '' : 'active',
+            hideEditButton ? 'opacity-0' : '',
+            isEditing ? 'active bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '',
+            !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
+          )}
+          onClick={onEdit}
+          type="button"
+          title={localize('com_ui_edit')}
+          disabled={hideEditButton}
+        >
+          <EditIcon />
+        </button>
+      )}
       <button
         className={cn(
           'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
@@ -86,8 +89,10 @@ export default function HoverButtons({
       </button>
       {regenerateEnabled ? (
         <button
-          className={cn("hover-button active rounded-md p-1 text-gray-400 hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible",
-            !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',)}
+          className={cn(
+            'hover-button active rounded-md p-1 text-gray-400 hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible',
+            !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
+          )}
           onClick={regenerate}
           type="button"
           title={localize('com_ui_regenerate')}
@@ -97,8 +102,10 @@ export default function HoverButtons({
       ) : null}
       {continueSupported ? (
         <button
-          className={cn("hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible ",
-            !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',)}
+          className={cn(
+            'hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible ',
+            !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
+          )}
           onClick={handleContinue}
           type="button"
           title={localize('com_ui_continue')}

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

@@ -103,6 +103,7 @@ export default function Message(props: TMessageProps) {
                     copyToClipboard={copyToClipboard}
                     handleContinue={handleContinue}
                     latestMessage={latestMessage}
+                    isLast={isLast}
                   />
                 </SubRow>
               )}

client/src/components/Conversations/Conversations.tsx

@@ -1,9 +1,7 @@
 import { useMemo, memo } from 'react';
 import { parseISO, isToday } from 'date-fns';
-import { useLocation } from 'react-router-dom';
 import { TConversation } from 'librechat-data-provider';
 import { groupConversationsByDate } from '~/utils';
-import Conversation from './Conversation';
 import Convo from './Convo';
 
 const Conversations = ({
@@ -15,16 +13,14 @@ const Conversations = ({
   moveToTop: () => void;
   toggleNav: () => void;
 }) => {
-  const location = useLocation();
-  const { pathname } = location;
-  const ConvoItem = pathname.includes('chat') ? Conversation : Convo;
   const groupedConversations = useMemo(
     () => groupConversationsByDate(conversations),
     [conversations],
   );
-  const firstTodayConvoId = conversations.find((convo) =>
-    isToday(parseISO(convo.updatedAt)),
-  )?.conversationId;
+  const firstTodayConvoId = useMemo(
+    () => conversations.find((convo) => isToday(parseISO(convo.updatedAt)))?.conversationId,
+    [conversations],
+  );
 
   return (
     <div className="text-token-text-primary flex flex-col gap-2 pb-2 text-sm">
@@ -44,7 +40,7 @@ const Conversations = ({
                 {groupName}
               </div>
               {convos.map((convo, i) => (
-                <ConvoItem
+                <Convo
                   key={`${groupName}-${convo.conversationId}-${i}`}
                   isLatestConvo={convo.conversationId === firstTodayConvoId}
                   conversation={convo}

client/src/components/Conversations/Convo.tsx

@@ -1,6 +1,6 @@
 import { useRecoilValue } from 'recoil';
-import { useState, useRef, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
+import { useState, useRef, useMemo } from 'react';
 import { EModelEndpoint } from 'librechat-data-provider';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import type { MouseEvent, FocusEvent, KeyboardEvent } from 'react';
@@ -17,7 +17,8 @@ import store from '~/store';
 type KeyEvent = KeyboardEvent<HTMLInputElement>;
 
 export default function Conversation({ conversation, retainView, toggleNav, isLatestConvo }) {
-  const { conversationId: currentConvoId } = useParams();
+  const params = useParams();
+  const currentConvoId = useMemo(() => params.conversationId, [params.conversationId]);
   const updateConvoMutation = useUpdateConversationMutation(currentConvoId ?? '');
   const activeConvos = useRecoilValue(store.allConversationsSelector);
   const { data: endpointsConfig } = useGetEndpointsQuery();

client/src/components/SidePanel/Builder/ActionsInput.tsx

@@ -14,9 +14,11 @@ import type {
 } from 'librechat-data-provider';
 import type { ActionAuthForm } from '~/common';
 import type { Spec } from './ActionsTable';
+import { useAssistantsMapContext, useToastContext } from '~/Providers';
 import { ActionsTable, columns } from './ActionsTable';
 import { useUpdateAction } from '~/data-provider';
 import { cn, removeFocusOutlines } from '~/utils';
+import useLocalize from '~/hooks/useLocalize';
 import { Spinner } from '~/components/svg';
 
 const debouncedValidation = debounce(
@@ -44,6 +46,9 @@ export default function ActionsInput({
     setValidationResult(result);
   };
 
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+  const assistantMap = useAssistantsMapContext();
   const { handleSubmit, reset } = useFormContext<ActionAuthForm>();
   const [validationResult, setValidationResult] = useState<null | ValidationResult>(null);
   const [inputValue, setInputValue] = useState('');
@@ -81,9 +86,19 @@ export default function ActionsInput({
 
   const updateAction = useUpdateAction({
     onSuccess(data) {
+      showToast({
+        message: localize('com_assistants_update_actions_success'),
+        status: 'success',
+      });
       reset();
       setAction(data[2]);
     },
+    onError(error) {
+      showToast({
+        message: (error as Error)?.message ?? localize('com_assistants_update_actions_error'),
+        status: 'error',
+      });
+    },
   });
 
   const saveAction = handleSubmit((authFormData) => {
@@ -158,6 +173,7 @@ export default function ActionsInput({
       metadata,
       functions,
       assistant_id,
+      model: assistantMap[assistant_id].model,
     });
   });
 
@@ -185,7 +201,8 @@ export default function ActionsInput({
               onChange={(e) => console.log(e.target.value)}
               className="border-token-border-medium h-8 min-w-[100px] rounded-lg border bg-transparent px-2 py-0 text-sm"
             >
-              <option value="label">Examples</option>
+              <option value="label">{localize('com_ui_examples')}</option>
+              {/* TODO: make these appear and function correctly */}
               <option value="0">Weather (JSON)</option>
               <option value="1">Pet Store (YAML)</option>
               <option value="2">Blank Template</option>
@@ -218,7 +235,9 @@ export default function ActionsInput({
       {!!data && (
         <div>
           <div className="mb-1.5 flex items-center">
-            <label className="text-token-text-primary block font-medium">Available actions</label>
+            <label className="text-token-text-primary block font-medium">
+              {localize('com_assistants_available_actions')}
+            </label>
           </div>
           <ActionsTable columns={columns} data={data} />
         </div>
@@ -226,7 +245,9 @@ export default function ActionsInput({
       <div className="mt-4">
         <div className="mb-1.5 flex items-center">
           <span className="" data-state="closed">
-            <label className="text-token-text-primary block font-medium">Privacy policy</label>
+            <label className="text-token-text-primary block font-medium">
+              {localize('com_ui_privacy_policy')}
+            </label>
           </span>
         </div>
         <div className="rounded-md border border-gray-300 px-3 py-2 shadow-none focus-within:border-gray-800 focus-within:ring-1 focus-within:ring-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:focus-within:border-gray-500 dark:focus-within:ring-gray-500">
@@ -252,13 +273,12 @@ export default function ActionsInput({
           className="focus:shadow-outline mt-1 flex min-w-[100px] items-center justify-center rounded bg-green-500 px-4 py-2 font-semibold text-white hover:bg-green-400 focus:border-green-500 focus:outline-none focus:ring-0 disabled:bg-green-400"
           type="button"
         >
-          {/* TODO: Add localization */}
           {updateAction.isLoading ? (
             <Spinner className="icon-md" />
           ) : action?.action_id ? (
-            'Update'
+            localize('com_ui_update')
           ) : (
-            'Create'
+            localize('com_ui_create')
           )}
         </button>
       </div>

client/src/components/SidePanel/Builder/ActionsPanel.tsx

@@ -6,9 +6,11 @@ import {
   TokenExchangeMethodEnum,
 } from 'librechat-data-provider';
 import type { AssistantPanelProps, ActionAuthForm } from '~/common';
+import { useAssistantsMapContext, useToastContext } from '~/Providers';
 import { Dialog, DialogTrigger } from '~/components/ui';
 import { useDeleteAction } from '~/data-provider';
 import { NewTrashIcon } from '~/components/svg';
+import useLocalize from '~/hooks/useLocalize';
 import ActionsInput from './ActionsInput';
 import ActionsAuth from './ActionsAuth';
 import { Panel } from '~/common';
@@ -20,12 +22,25 @@ export default function ActionsPanel({
   setActivePanel,
   assistant_id,
 }: AssistantPanelProps) {
+  const localize = useLocalize();
+  const { showToast } = useToastContext();
+  const assistantMap = useAssistantsMapContext();
   const [openAuthDialog, setOpenAuthDialog] = useState(false);
   const deleteAction = useDeleteAction({
     onSuccess: () => {
+      showToast({
+        message: localize('com_assistants_delete_actions_success'),
+        status: 'success',
+      });
       setActivePanel(Panel.builder);
       setAction(undefined);
     },
+    onError(error) {
+      showToast({
+        message: (error as Error)?.message ?? localize('com_assistants_delete_actions_error'),
+        status: 'error',
+      });
+    },
   });
 
   const methods = useForm<ActionAuthForm>({
@@ -115,6 +130,7 @@ export default function ActionsPanel({
                     const confirmed = confirm('Are you sure you want to delete this action?');
                     if (confirmed) {
                       deleteAction.mutate({
+                        model: assistantMap[assistant_id].model,
                         action_id: action.action_id,
                         assistant_id,
                       });
@@ -129,8 +145,7 @@ export default function ActionsPanel({
             )}
             <div className="text-xl font-medium">{(action ? 'Edit' : 'Add') + ' ' + 'actions'}</div>
             <div className="text-token-text-tertiary text-sm">
-              {/* TODO: use App title */}
-              Let your Assistant retrieve information or take actions outside of LibreChat.
+              {localize('com_assistants_actions_info')}
             </div>
             {/* <div className="text-sm text-token-text-tertiary">
             <a href="https://help.openai.com/en/articles/8554397-creating-a-gpt" target="_blank" rel="noreferrer" className="font-medium">Learn more.</a>
@@ -141,7 +156,7 @@ export default function ActionsPanel({
               <div className="relative mb-6">
                 <div className="mb-1.5 flex items-center">
                   <label className="text-token-text-primary block font-medium">
-                    Authentication
+                    {localize('com_ui_authentication')}
                   </label>
                 </div>
                 <div className="border-token-border-medium flex rounded-lg border text-sm hover:cursor-pointer">

client/src/components/SidePanel/Builder/AssistantSelect.tsx

@@ -107,6 +107,7 @@ export default function AssistantSelect({
         functions,
         ...actions,
         assistant: update,
+        model: update.model,
       };
 
       Object.entries(assistant).forEach(([name, value]) => {