✨feat: OAuth for Actions (#5693)

* ✨feat: OAuth for Actions

* WIP: PoC flow state manager

* refactor: Add identifier field to token model from action schema

* chore: fix potential file type issues

* ci: fix type issue with action metadata auth

* fix: ensure FlowManagerOptions has a default ttl value

* WIP: OAUTH actions

* WIP: first pass OAuth Action

* fix: standardize identifier usage in OAuth flow handling

* fix: update token retrieval to include userId in query and use correct identifier

* refacotr: update token retrieval to use userId for OAuth token query

* feat: Tool Call Auth styling

* fix: streamline token creation and add type field to token schema

* refactor: cleanup OAuth flow by encrypting client credentials and ensuring oauth operations only run under condition

* refactor: use encrypted credentials in OAuth callback

* fix: update Token collection indexes to use expiresAt TTL index and not createdAt legacy index

* refactor: enhance Token index cleanup by improving logging and removing redundant index creation logic

* refactor: remove unused OAuth login route and related logic for improved clarity

* refactor: replace fetch with axios for OAuth token exchange and improve error handling

* refactor: better UX after authentication before oauth tool execution

* refactor: implement cleanup handlers for FlowStateManager intervals to enhance resource management

* refactor: encrypt OAuth tokens before storing and decrypt upon retrieval for enhanced security

* refactor: enhance authentication success page with improved styling and countdown feature

* refactor: add response_type parameter to OAuth redirect URI for improved compatibility

* chore: update translation.json new localizations

* chore: remove unused OGDialog import from OGDialogTemplate component

* refactor: Actions Auth using new Dialog styling, use same component with Agents/Assistants

* refactor: update removeNullishValues function to support removal of empty strings and adjust transform usage in schemas

* chore: bump version of librechat-data-provider to 0.7.6991

* refactor: integrate removeNullishValues function to clean metadata before encryption in agent and assistant routes

* refactor: update OAuth input fields to use 'password' type for better security

* refactor: update localization placeholders for sign-in message to use double curly braces

* refactor: add access_type parameter for offline access in createActionTool function

* refactor: implement handleOAuthToken function for token management and encryption

* feat: refresh token support

* refactor: add default expiration for access token and error handling for missing token

* feat: localizations for ActionAuth

* refactor: set refresh token expiration to null to not expire if expiry never given

* fix: prevent crash fromerror within async handleAbortError in AskController, EditController, and AgentController

* feat: Action Callback URL

* 🌍 i18n: Update translation.json with latest translations

* refactor: handle errors in flow state checking to prevent unhandled promise rejections

* fix: improve flow state concurrency to prevent multiple token creation calls

* refactor: RequestExecutor to use separate axios instance

* refactor: improve concurrency flows by keeping completed state until TTL expiry

* refactor: increase TTL for flow state management and adjust monitoring interval

* ci: mock axios instance creation in actions spec

* feat: add Babel and Jest configuration files; implement FlowStateManager tests with concurrency handling

* chore: add disableOAuth prop to ActionsAuth (not implemented for Assistants yet)

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

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

@@ -9,14 +9,14 @@ const Files = ({ message }: { message?: TMessage }) => {
   }, [message?.files]);
 
   const otherFiles = useMemo(() => {
-    return message?.files?.filter((file) => !file.type?.startsWith('image/')) || [];
+    return message?.files?.filter((file) => !(file.type?.startsWith('image/') === true)) || [];
   }, [message?.files]);
 
   return (
     <>
       {otherFiles.length > 0 &&
         otherFiles.map((file) => <FileContainer key={file.file_id} file={file as TFile} />)}
-      {imageFiles &&
+      {imageFiles.length > 0 &&
         imageFiles.map((file) => (
           <Image
             key={file.file_id}

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

@@ -11,7 +11,7 @@ export default function InProgressCall({
   progress: number;
   children: React.ReactNode;
 }) {
-  if ((!isSubmitting && progress < 1) || error) {
+  if ((!isSubmitting && progress < 1) || error === true) {
     return <CancelledIcon />;
   }
 

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

@@ -81,6 +81,8 @@ const Part = memo(({ part, isSubmitting, attachments, showCursor, isCreatedByUse
           initialProgress={toolCall.progress ?? 0.1}
           isSubmitting={isSubmitting}
           attachments={attachments}
+          auth={toolCall.auth}
+          expires_at={toolCall.expires_at}
         />
       );
     } else if (toolCall.type === ToolCallTypes.CODE_INTERPRETER) {

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

@@ -39,16 +39,19 @@ export default function ProgressText({
   onClick,
   inProgressText,
   finishedText,
+  authText,
   hasInput = true,
   popover = false,
 }: {
   progress: number;
-  onClick: () => void;
+  onClick?: () => void;
   inProgressText: string;
   finishedText: string;
+  authText?: string;
   hasInput?: boolean;
   popover?: boolean;
 }) {
+  const text = progress < 1 ? authText ?? inProgressText : finishedText;
   return (
     <Wrapper popover={popover}>
       <button
@@ -57,7 +60,7 @@ export default function ProgressText({
         disabled={!hasInput}
         onClick={onClick}
       >
-        {progress < 1 ? inProgressText : finishedText}
+        {text}
         <svg width="16" height="17" viewBox="0 0 16 17" fill="none">
           <path
             className={hasInput ? '' : 'stroke-transparent'}

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

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import * as Popover from '@radix-ui/react-popover';
+import { ShieldCheck, TriangleAlert } from 'lucide-react';
 import { actionDelimiter, actionDomainSeparator, Constants } from 'librechat-data-provider';
 import type { TAttachment } from 'librechat-data-provider';
 import useLocalize from '~/hooks/useLocalize';
@@ -14,6 +15,9 @@ import WrenchIcon from './WrenchIcon';
 import { useProgress } from '~/hooks';
 import { logger } from '~/utils';
 
+const radius = 56.08695652173913;
+const circumference = 2 * Math.PI * radius;
+
 export default function ToolCall({
   initialProgress = 0.1,
   isSubmitting,
@@ -21,6 +25,7 @@ export default function ToolCall({
   args: _args = '',
   output,
   attachments,
+  auth,
 }: {
   initialProgress: number;
   isSubmitting: boolean;
@@ -28,13 +33,10 @@ export default function ToolCall({
   args: string | Record<string, unknown>;
   output?: string | null;
   attachments?: TAttachment[];
+  auth?: string;
+  expires_at?: number;
 }) {
   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, isMCPToolCall } = useMemo(() => {
     if (typeof name !== 'string') {
       return { function_name: '', domain: null, isMCPToolCall: false };
@@ -83,8 +85,37 @@ export default function ToolCall({
     [args, output],
   );
 
+  const authDomain = useMemo(() => {
+    const authURL = auth ?? '';
+    if (!authURL) {
+      return '';
+    }
+    try {
+      const url = new URL(authURL);
+      return url.hostname;
+    } catch (e) {
+      return '';
+    }
+  }, [auth]);
+
+  const progress = useProgress(error === true ? 1 : initialProgress);
+  const cancelled = (!isSubmitting && progress < 1) || error === true;
+  const offset = circumference - progress * circumference;
+
   const renderIcon = () => {
-    if (progress < 1) {
+    if (progress < 1 && authDomain.length > 0) {
+      return (
+        <div
+          className="absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-full bg-transparent text-text-secondary"
+          style={{ opacity: 1, transform: 'none' }}
+          data-projection-id="849"
+        >
+          <div>
+            <ShieldCheck />
+          </div>
+        </div>
+      );
+    } else if (progress < 1) {
       return (
         <InProgressCall progress={progress} isSubmitting={isSubmitting} error={error}>
           <div
@@ -101,10 +132,13 @@ export default function ToolCall({
       );
     }
 
-    return error === true ? <CancelledIcon /> : <FinishedIcon />;
+    return cancelled ? <CancelledIcon /> : <FinishedIcon />;
   };
 
   const getFinishedText = () => {
+    if (cancelled) {
+      return localize('com_ui_error');
+    }
     if (isMCPToolCall === true) {
       return localize('com_assistants_completed_function', { 0: function_name });
     }
@@ -116,28 +150,49 @@ export default function ToolCall({
 
   return (
     <Popover.Root>
-      <div className="my-2.5 flex items-center gap-2.5">
-        <div className="relative h-5 w-5 shrink-0">{renderIcon()}</div>
-        <ProgressText
-          progress={progress}
-          onClick={() => ({})}
-          inProgressText={localize('com_assistants_running_action')}
-          finishedText={getFinishedText()}
-          hasInput={hasInfo}
-          popover={true}
-        />
-        {hasInfo && (
-          <ToolPopover
-            input={args ?? ''}
-            output={output}
-            domain={domain ?? ''}
-            function_name={function_name}
+      <div className="my-2.5 flex flex-wrap items-center gap-2.5">
+        <div className="flex w-full items-center gap-2.5">
+          <div className="relative h-5 w-5 shrink-0">{renderIcon()}</div>
+          <ProgressText
+            progress={cancelled ? 1 : progress}
+            inProgressText={localize('com_assistants_running_action')}
+            authText={
+              !cancelled && authDomain.length > 0 ? localize('com_ui_requires_auth') : undefined
+            }
+            finishedText={getFinishedText()}
+            hasInput={hasInfo}
+            popover={true}
           />
+          {hasInfo && (
+            <ToolPopover
+              input={args ?? ''}
+              output={output}
+              domain={authDomain || (domain ?? '')}
+              function_name={function_name}
+              pendingAuth={authDomain.length > 0 && !cancelled && progress < 1}
+            />
+          )}
+        </div>
+        {auth != null && auth && progress < 1 && !cancelled && (
+          <div className="flex w-full flex-col gap-2.5">
+            <div className="mb-1 mt-2">
+              <a
+                className="inline-flex items-center justify-center gap-2 rounded-3xl bg-surface-tertiary px-4 py-2 text-sm font-medium hover:bg-surface-hover"
+                href={auth}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {localize('com_ui_sign_in_to_domain', { 0: authDomain })}
+              </a>
+            </div>
+            <p className="flex items-center text-xs text-text-secondary">
+              <TriangleAlert className="mr-1.5 inline-block h-4 w-4" />
+              {localize('com_assistants_allow_sites_you_trust')}
+            </p>
+          </div>
         )}
       </div>
-      {attachments?.map((attachment, index) => (
-        <Attachment attachment={attachment} key={index} />
-      ))}
+      {attachments?.map((attachment, index) => <Attachment attachment={attachment} key={index} />)}
     </Popover.Root>
   );
 }

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

@@ -4,13 +4,15 @@ import useLocalize from '~/hooks/useLocalize';
 export default function ToolPopover({
   input,
   output,
-  function_name,
   domain,
+  function_name,
+  pendingAuth,
 }: {
   input: string;
   function_name: string;
   output?: string | null;
   domain?: string;
+  pendingAuth?: boolean;
 }) {
   const localize = useLocalize();
   const formatText = (text: string) => {
@@ -21,6 +23,17 @@ export default function ToolPopover({
     }
   };
 
+  let title =
+    domain != null && domain
+      ? localize('com_assistants_domain_info', { 0: domain })
+      : localize('com_assistants_function_use', { 0: function_name });
+  if (pendingAuth === true) {
+    title =
+      domain != null && domain
+        ? localize('com_assistants_action_attempt', { 0: domain })
+        : localize('com_assistants_attempt_info');
+  }
+
   return (
     <Popover.Portal>
       <Popover.Content
@@ -28,27 +41,23 @@ export default function ToolPopover({
         align="start"
         sideOffset={12}
         alignOffset={-5}
-        className="w-18 min-w-[180px]  max-w-sm rounded-lg bg-white dark:bg-gray-900"
+        className="w-18 min-w-[180px]  max-w-sm rounded-lg bg-surface-primary px-1"
       >
         <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 != null && domain
-                ? localize('com_assistants_domain_info', { 0: domain })
-                : localize('com_assistants_function_use', { 0: function_name })}
-            </div>
+            <div className="mb-2 text-sm font-medium text-text-primary">{title}</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">
+              <div className="max-h-32 overflow-y-auto rounded-md bg-surface-tertiary p-2">
                 <code className="!whitespace-pre-wrap ">{formatText(input)}</code>
               </div>
             </div>
             {output != null && output && (
               <>
-                <div className="mb-2 mt-2 text-sm font-medium dark:text-gray-100">
+                <div className="mb-2 mt-2 text-sm font-medium text-text-primary">
                   {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">
+                  <div className="max-h-32 overflow-y-auto rounded-md bg-surface-tertiary p-2">
                     <code className="!whitespace-pre-wrap ">{formatText(output)}</code>
                   </div>
                 </div>