mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-03-01 05:40:17 +01:00
✨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>
This commit is contained in:
Ruben Talstra
GitHub
parent
71c30a3640
commit
d99a9db3f6
58 changed files with 2146 additions and 1223 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue