mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-08-04 06:52:47 +00:00
🎭 feat: Custom UI Renderers for Skill Tool Calls (#12684)
* feat: Custom UI renderers for skill, read_file, and bash_tool Add specialized tool call components for the three skill tools, replacing the generic ToolCall fallback with contextual UI. * fix: Address review findings for skill tool UI renderers - Fix Codex P2: read skillName (camelCase) matching agent pipeline - Fix Codex P2: remove error regex from ReadFileCall to avoid false positives on normal file content containing "Error:" tokens - Extract useToolCallState hook to eliminate ~60% boilerplate duplication across SkillCall, ReadFileCall, and BashCall - Extract parseJsonField utility with consistent escaped-char-aware regex fallback, shared by all three components - Gate SkillCall bordered card on hasOutput to prevent empty card when expanded before output arrives - Skip highlightAuto for plaintext lang to avoid expensive auto-detection on files with unknown extensions - Expand LANG_MAP with php, cs, kt, swift, scss, less, lua, r; add FILENAME_MAP for Makefile and Dockerfile - Export langFromPath for testability - Add unit tests for parseJsonField, langFromPath, and ToolIcon skill type branches * refactor: Redesign BashCall as minimal terminal widget Replace the ExecuteCode-clone pattern with a purpose-built terminal UI: $ prompt prefix, dark background command zone, icon-only copy button, and raw monospace output. Drops useLazyHighlight, CodeWindowHeader, Stdout, and the "Output" label in favor of a cleaner two-zone layout that feels native to the terminal. * fix: parseJsonField unescape ordering and ReadFileCall empty card Replace the sequential .replace() chain in parseJsonField's regex fallback with a single-pass /\(.)/g replacement. The old chain processed \n before \, so \n (JSON-escaped literal backslash + n) was incorrectly decoded as a newline instead of \n. Gate ReadFileCall's bordered card on hasOutput (matching SkillCall's pattern) so the card does not render as an empty rounded box during streaming before output arrives. Add regression tests for \n decoding and unknown escape sequences. * fix: Followup review fixes - Refactor ExecuteCode to use shared useToolCallState hook, eliminating the last copy of the inline state machine - Escape regex metacharacters in parseJsonField to prevent injection from field names containing ., +, (, etc. - Fix contradictory test description in langFromPath tests * fix: Surface tool failure state in skill tool renderers Add error detection to useToolCallState via the shared isError check so tool calls that complete with an error prefix show a "failed" suffix instead of a success label. Prevents misleading users when read_file, skill, or bash_tool returns an error (e.g. file not found, skill not accessible). Matches the error handling pattern already used by the generic ToolCall component. * feat: Add bash syntax highlighting to BashCall command zone Reuse the shared useLazyHighlight singleton (already loaded by ReadFileCall and ExecuteCode) to highlight the command with bash grammar. Falls back to plain text while lowlight is loading. * fix: Align BashCall scrollbar to span full card width Move max-h/overflow-auto from the inner pre to the outer container so the scrollbar spans the full width like the output zone. Float the copy button with sticky positioning so it stays visible while scrolling long commands. * feat: Use GNU Bash icon for bash_tool progress header and ToolIcon Replace the generic SquareTerminal lucide icon with the GNU Bash logo (already in the project via LangIcon/langIconPaths) for both the BashCall progress header and the ToolIcon stacked icon mapping. * fix: Render raw content while highlighter loads, preserve command text on copy - ReadFileCall: fall back to raw output when useLazyHighlight returns null, preventing a blank code panel on first render before lowlight finishes its dynamic import - BashCall: drop .trim() from the copy handler so the clipboard receives exactly what's displayed (WYSIWYG copy) * fix: Alphabetize new translation keys within en/translation.json Relocate read_file, skill_finished, and skill_running into their correct alphabetical positions within the overall key list. * fix: Surface error state in ExecuteCode, fix BashCall import order - ExecuteCode now uses hasError from useToolCallState to show the "failed" suffix on failed code executions, matching the three new renderers - Reorder BashCall local imports to longest-to-shortest per project style
This commit is contained in:
Danny Avila
parent
64ec5f18b8
commit
3b820415ad
15 changed files with 846 additions and 129 deletions
|
|
@ -8,7 +8,18 @@ import {
|
|||
isImageVisionTool,
|
||||
} from 'librechat-data-provider';
|
||||
import type { TMessageContentParts, TAttachment } from 'librechat-data-provider';
|
||||
import { ImageGen, ExecuteCode, AgentUpdate, EmptyText, Reasoning, Summary, Text } from './Parts';
|
||||
import {
|
||||
ImageGen,
|
||||
ExecuteCode,
|
||||
AgentUpdate,
|
||||
EmptyText,
|
||||
Reasoning,
|
||||
Summary,
|
||||
Text,
|
||||
SkillCall,
|
||||
ReadFileCall,
|
||||
BashCall,
|
||||
} from './Parts';
|
||||
import { ErrorMessage } from './MessageContent';
|
||||
import RetrievalCall from './RetrievalCall';
|
||||
import { getCachedPreview } from '~/utils';
|
||||
|
|
@ -148,6 +159,36 @@ const Part = memo(function Part({
|
|||
attachments={attachments}
|
||||
/>
|
||||
);
|
||||
} else if (isToolCall && toolCall.name === 'skill') {
|
||||
return (
|
||||
<SkillCall
|
||||
args={toolCall.args}
|
||||
output={toolCall.output ?? ''}
|
||||
initialProgress={toolCall.progress ?? 0.1}
|
||||
isSubmitting={isSubmitting}
|
||||
attachments={attachments}
|
||||
/>
|
||||
);
|
||||
} else if (isToolCall && toolCall.name === 'read_file') {
|
||||
return (
|
||||
<ReadFileCall
|
||||
args={toolCall.args}
|
||||
output={toolCall.output ?? ''}
|
||||
initialProgress={toolCall.progress ?? 0.1}
|
||||
isSubmitting={isSubmitting}
|
||||
attachments={attachments}
|
||||
/>
|
||||
);
|
||||
} else if (isToolCall && toolCall.name === 'bash_tool') {
|
||||
return (
|
||||
<BashCall
|
||||
args={toolCall.args}
|
||||
output={toolCall.output ?? ''}
|
||||
initialProgress={toolCall.progress ?? 0.1}
|
||||
isSubmitting={isSubmitting}
|
||||
attachments={attachments}
|
||||
/>
|
||||
);
|
||||
} else if (isToolCall && toolCall.name === Tools.web_search) {
|
||||
return (
|
||||
<WebSearch
|
||||
|
|
|
|||
111
client/src/components/Chat/Messages/Content/Parts/BashCall.tsx
Normal file
111
client/src/components/Chat/Messages/Content/Parts/BashCall.tsx
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import type { TAttachment } from 'librechat-data-provider';
|
||||
import ProgressText from '~/components/Chat/Messages/Content/ProgressText';
|
||||
import CopyButton from '~/components/Messages/Content/CopyButton';
|
||||
import LangIcon from '~/components/Messages/Content/LangIcon';
|
||||
import useToolCallState from './useToolCallState';
|
||||
import useLazyHighlight from './useLazyHighlight';
|
||||
import { ERROR_PATTERNS } from './ExecuteCode';
|
||||
import { AttachmentGroup } from './Attachment';
|
||||
import parseJsonField from './parseJsonField';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
export default function BashCall({
|
||||
isSubmitting,
|
||||
initialProgress = 0.1,
|
||||
args,
|
||||
output = '',
|
||||
attachments,
|
||||
}: {
|
||||
initialProgress: number;
|
||||
isSubmitting: boolean;
|
||||
args?: string | Record<string, unknown>;
|
||||
output?: string;
|
||||
attachments?: TAttachment[];
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const command = useMemo(() => parseJsonField(args, 'command'), [args]);
|
||||
|
||||
const { showCode, toggleCode, expandStyle, expandRef, progress, cancelled, hasError, hasOutput } =
|
||||
useToolCallState(initialProgress, isSubmitting, output, !!command);
|
||||
|
||||
const highlighted = useLazyHighlight(command || undefined, 'bash');
|
||||
const outputHasError = useMemo(() => ERROR_PATTERNS.test(output), [output]);
|
||||
|
||||
const [isCopied, setIsCopied] = useState(false);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout>>();
|
||||
useEffect(() => () => clearTimeout(timerRef.current), []);
|
||||
|
||||
const handleCopy = useCallback(() => {
|
||||
setIsCopied(true);
|
||||
copy(command, { format: 'text/plain' });
|
||||
clearTimeout(timerRef.current);
|
||||
timerRef.current = setTimeout(() => setIsCopied(false), 3000);
|
||||
}, [command]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative my-1.5 flex size-5 shrink-0 items-center gap-2.5">
|
||||
<ProgressText
|
||||
progress={progress}
|
||||
onClick={toggleCode}
|
||||
inProgressText={localize('com_ui_running_command')}
|
||||
finishedText={
|
||||
cancelled ? localize('com_ui_cancelled') : localize('com_ui_command_finished')
|
||||
}
|
||||
errorSuffix={hasError && !cancelled ? localize('com_ui_tool_failed') : undefined}
|
||||
icon={
|
||||
<LangIcon
|
||||
lang="bash"
|
||||
className={cn(
|
||||
'size-4 shrink-0 text-text-secondary',
|
||||
progress < 1 && !cancelled && !hasError && 'animate-pulse',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
hasInput={!!command || hasOutput}
|
||||
isExpanded={showCode}
|
||||
error={cancelled}
|
||||
/>
|
||||
</div>
|
||||
<div style={expandStyle}>
|
||||
<div className="overflow-hidden" ref={expandRef}>
|
||||
<div className="my-2 overflow-hidden rounded-lg border border-border-light">
|
||||
{command && (
|
||||
<div className="relative max-h-[300px] overflow-auto bg-surface-tertiary dark:bg-gray-950">
|
||||
<CopyButton
|
||||
iconOnly
|
||||
isCopied={isCopied}
|
||||
onClick={handleCopy}
|
||||
className="sticky right-0 top-1 float-right mr-1.5 mt-1"
|
||||
label={localize('com_ui_copy_code')}
|
||||
/>
|
||||
<pre className="whitespace-pre-wrap break-words px-3 py-2.5 pr-10 font-mono text-xs">
|
||||
<span className="select-none text-text-tertiary" aria-hidden="true">
|
||||
{'$ '}
|
||||
</span>
|
||||
<code className="hljs language-bash">{highlighted ?? command}</code>
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
{hasOutput && (
|
||||
<div className={cn(command && 'border-t border-border-light')}>
|
||||
<pre
|
||||
className={cn(
|
||||
'max-h-[300px] overflow-auto whitespace-pre-wrap break-words px-3 py-2.5 font-mono text-xs',
|
||||
outputHasError ? 'text-red-600 dark:text-red-400' : 'text-text-primary',
|
||||
)}
|
||||
>
|
||||
{output}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{attachments && attachments.length > 0 && <AttachmentGroup attachments={attachments} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,124 +1,20 @@
|
|||
import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { useMemo } from 'react';
|
||||
import { SquareTerminal } from 'lucide-react';
|
||||
import type { TAttachment } from 'librechat-data-provider';
|
||||
import ProgressText from '~/components/Chat/Messages/Content/ProgressText';
|
||||
import { useProgress, useLocalize, useExpandCollapse } from '~/hooks';
|
||||
import useLazyHighlight from './useLazyHighlight';
|
||||
import useToolCallState from './useToolCallState';
|
||||
import CodeWindowHeader from './CodeWindowHeader';
|
||||
import { AttachmentGroup } from './Attachment';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import Stdout from './Stdout';
|
||||
import { cn } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
interface ParsedArgs {
|
||||
lang?: string;
|
||||
code?: string;
|
||||
}
|
||||
|
||||
interface HastText {
|
||||
type: 'text';
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface HastElement {
|
||||
type: 'element';
|
||||
tagName: string;
|
||||
properties?: { className?: string[] };
|
||||
children?: HastNode[];
|
||||
}
|
||||
|
||||
type HastNode = HastText | HastElement;
|
||||
|
||||
function hastToReact(nodes: HastNode[]): React.ReactNode[] {
|
||||
return nodes.map((node, i) => {
|
||||
if (node.type === 'text') {
|
||||
return node.value;
|
||||
}
|
||||
return React.createElement(
|
||||
node.tagName,
|
||||
{ key: i, className: node.properties?.className?.join(' ') },
|
||||
node.children ? hastToReact(node.children) : undefined,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
type LowlightModule = typeof import('lowlight');
|
||||
|
||||
/** Lazy-loaded lowlight singleton — only fetched when syntax highlighting is first needed. */
|
||||
let lowlightPromise: Promise<LowlightModule> | null = null;
|
||||
let lowlightModule: LowlightModule | null = null;
|
||||
|
||||
function loadLowlight(): Promise<LowlightModule> {
|
||||
if (lowlightModule) {
|
||||
return Promise.resolve(lowlightModule);
|
||||
}
|
||||
if (!lowlightPromise) {
|
||||
lowlightPromise = import('lowlight').then((mod) => {
|
||||
lowlightModule = mod;
|
||||
return mod;
|
||||
});
|
||||
}
|
||||
return lowlightPromise;
|
||||
}
|
||||
|
||||
function highlightCode(mod: LowlightModule, code: string, lang: string): React.ReactNode[] {
|
||||
try {
|
||||
const tree = mod.lowlight.registered(lang)
|
||||
? mod.lowlight.highlight(lang, code)
|
||||
: mod.lowlight.highlightAuto(code);
|
||||
return hastToReact(tree.children as HastNode[]);
|
||||
} catch {
|
||||
return [code];
|
||||
}
|
||||
}
|
||||
|
||||
/** Hook that lazily loads lowlight and returns highlighted nodes once ready. */
|
||||
function useLazyHighlight(code: string | undefined, lang: string): React.ReactNode[] | null {
|
||||
const [highlighted, setHighlighted] = useState<React.ReactNode[] | null>(() => {
|
||||
if (!code || !lowlightModule) {
|
||||
return null;
|
||||
}
|
||||
return highlightCode(lowlightModule, code, lang);
|
||||
});
|
||||
const prevKey = useRef('');
|
||||
|
||||
useEffect(() => {
|
||||
const key = `${lang}\0${code ?? ''}`;
|
||||
if (key === prevKey.current) {
|
||||
return;
|
||||
}
|
||||
prevKey.current = key;
|
||||
|
||||
if (!code) {
|
||||
setHighlighted(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (lowlightModule) {
|
||||
setHighlighted(highlightCode(lowlightModule, code, lang));
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
loadLowlight()
|
||||
.then((mod) => {
|
||||
if (!cancelled) {
|
||||
setHighlighted(highlightCode(mod, code, lang));
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) {
|
||||
setHighlighted([code]);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [code, lang]);
|
||||
|
||||
return highlighted;
|
||||
}
|
||||
|
||||
export function useParseArgs(args?: string | Record<string, unknown>): ParsedArgs | null {
|
||||
return useMemo(() => {
|
||||
if (typeof args === 'object' && args !== null) {
|
||||
|
|
@ -152,7 +48,7 @@ export function useParseArgs(args?: string | Record<string, unknown>): ParsedArg
|
|||
}, [args]);
|
||||
}
|
||||
|
||||
const ERROR_PATTERNS = /^(Traceback|Error:|Exception:|.*Error:)/m;
|
||||
export const ERROR_PATTERNS = /^(Traceback|Error:|Exception:|.*Error:)/m;
|
||||
|
||||
export default function ExecuteCode({
|
||||
isSubmitting,
|
||||
|
|
@ -168,29 +64,14 @@ export default function ExecuteCode({
|
|||
attachments?: TAttachment[];
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const hasOutput = output.length > 0;
|
||||
const autoExpand = useRecoilValue(store.autoExpandTools);
|
||||
|
||||
const { lang = 'py', code } = useParseArgs(args) ?? ({} as ParsedArgs);
|
||||
const hasContent = !!code || hasOutput;
|
||||
const [showCode, setShowCode] = useState(() => autoExpand && hasContent);
|
||||
const { style: expandStyle, ref: expandRef } = useExpandCollapse(showCode);
|
||||
|
||||
useEffect(() => {
|
||||
if (autoExpand && hasContent) {
|
||||
setShowCode(true);
|
||||
}
|
||||
}, [autoExpand, hasContent]);
|
||||
const progress = useProgress(initialProgress);
|
||||
const { showCode, toggleCode, expandStyle, expandRef, progress, cancelled, hasError, hasOutput } =
|
||||
useToolCallState(initialProgress, isSubmitting, output, !!code);
|
||||
|
||||
const highlighted = useLazyHighlight(code, lang);
|
||||
|
||||
const outputHasError = useMemo(() => ERROR_PATTERNS.test(output), [output]);
|
||||
|
||||
const toggleCode = useCallback(() => setShowCode((prev) => !prev), [setShowCode]);
|
||||
|
||||
const cancelled = !isSubmitting && progress < 1;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative my-1.5 flex size-5 shrink-0 items-center gap-2.5">
|
||||
|
|
@ -201,11 +82,12 @@ export default function ExecuteCode({
|
|||
finishedText={
|
||||
cancelled ? localize('com_ui_cancelled') : localize('com_ui_analyzing_finished')
|
||||
}
|
||||
errorSuffix={hasError && !cancelled ? localize('com_ui_tool_failed') : undefined}
|
||||
icon={
|
||||
<SquareTerminal
|
||||
className={cn(
|
||||
'size-4 shrink-0 text-text-secondary',
|
||||
progress < 1 && !cancelled && 'animate-pulse',
|
||||
progress < 1 && !cancelled && !hasError && 'animate-pulse',
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
import { useMemo } from 'react';
|
||||
import { FileText } from 'lucide-react';
|
||||
import type { TAttachment } from 'librechat-data-provider';
|
||||
import ProgressText from '~/components/Chat/Messages/Content/ProgressText';
|
||||
import useToolCallState from './useToolCallState';
|
||||
import useLazyHighlight from './useLazyHighlight';
|
||||
import CodeWindowHeader from './CodeWindowHeader';
|
||||
import { AttachmentGroup } from './Attachment';
|
||||
import parseJsonField from './parseJsonField';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
const LANG_MAP: Record<string, string> = {
|
||||
py: 'python',
|
||||
js: 'javascript',
|
||||
ts: 'typescript',
|
||||
tsx: 'typescript',
|
||||
jsx: 'javascript',
|
||||
rs: 'rust',
|
||||
go: 'go',
|
||||
rb: 'ruby',
|
||||
java: 'java',
|
||||
kt: 'kotlin',
|
||||
swift: 'swift',
|
||||
cs: 'csharp',
|
||||
php: 'php',
|
||||
lua: 'lua',
|
||||
r: 'r',
|
||||
sh: 'bash',
|
||||
bash: 'bash',
|
||||
zsh: 'bash',
|
||||
json: 'json',
|
||||
yaml: 'yaml',
|
||||
yml: 'yaml',
|
||||
toml: 'toml',
|
||||
md: 'markdown',
|
||||
sql: 'sql',
|
||||
css: 'css',
|
||||
scss: 'scss',
|
||||
less: 'less',
|
||||
html: 'html',
|
||||
xml: 'xml',
|
||||
c: 'c',
|
||||
cpp: 'cpp',
|
||||
h: 'c',
|
||||
hpp: 'cpp',
|
||||
};
|
||||
|
||||
const FILENAME_MAP: Record<string, string> = {
|
||||
makefile: 'makefile',
|
||||
dockerfile: 'dockerfile',
|
||||
};
|
||||
|
||||
export function langFromPath(filePath: string): string {
|
||||
const name = filePath.split('/').pop()?.toLowerCase() ?? '';
|
||||
const byName = FILENAME_MAP[name];
|
||||
if (byName) {
|
||||
return byName;
|
||||
}
|
||||
const ext = name.includes('.') ? (name.split('.').pop() ?? '') : '';
|
||||
return LANG_MAP[ext] ?? 'plaintext';
|
||||
}
|
||||
|
||||
export default function ReadFileCall({
|
||||
isSubmitting,
|
||||
initialProgress = 0.1,
|
||||
args,
|
||||
output = '',
|
||||
attachments,
|
||||
}: {
|
||||
initialProgress: number;
|
||||
isSubmitting: boolean;
|
||||
args?: string | Record<string, unknown>;
|
||||
output?: string;
|
||||
attachments?: TAttachment[];
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const filePath = useMemo(() => parseJsonField(args, 'file_path'), [args]);
|
||||
const fileName = filePath.split('/').pop() || filePath;
|
||||
const lang = useMemo(() => langFromPath(filePath), [filePath]);
|
||||
|
||||
const { showCode, toggleCode, expandStyle, expandRef, progress, cancelled, hasError, hasOutput } =
|
||||
useToolCallState(initialProgress, isSubmitting, output, !!filePath);
|
||||
|
||||
const highlighted = useLazyHighlight(hasOutput ? output : undefined, lang);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative my-1.5 flex size-5 shrink-0 items-center gap-2.5">
|
||||
<ProgressText
|
||||
progress={progress}
|
||||
onClick={toggleCode}
|
||||
inProgressText={localize('com_ui_reading_file', { 0: fileName })}
|
||||
finishedText={
|
||||
cancelled ? localize('com_ui_cancelled') : localize('com_ui_read_file', { 0: fileName })
|
||||
}
|
||||
errorSuffix={hasError && !cancelled ? localize('com_ui_tool_failed') : undefined}
|
||||
icon={
|
||||
<FileText
|
||||
className={cn(
|
||||
'size-4 shrink-0 text-text-secondary',
|
||||
progress < 1 && !cancelled && !hasError && 'animate-pulse',
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
}
|
||||
hasInput={!!filePath || hasOutput}
|
||||
isExpanded={showCode}
|
||||
error={cancelled}
|
||||
/>
|
||||
</div>
|
||||
<div style={expandStyle}>
|
||||
<div className="overflow-hidden" ref={expandRef}>
|
||||
{hasOutput && (
|
||||
<div className="my-2 overflow-hidden rounded-lg border border-border-light bg-surface-secondary">
|
||||
<CodeWindowHeader language={fileName} code={output} />
|
||||
<pre className="max-h-[300px] overflow-auto bg-surface-chat p-4 font-mono text-xs dark:bg-surface-primary-alt">
|
||||
<code className={`hljs language-${lang} !whitespace-pre`}>
|
||||
{highlighted ?? output}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{attachments && attachments.length > 0 && <AttachmentGroup attachments={attachments} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
import { useMemo } from 'react';
|
||||
import { ScrollText } from 'lucide-react';
|
||||
import type { TAttachment } from 'librechat-data-provider';
|
||||
import ProgressText from '~/components/Chat/Messages/Content/ProgressText';
|
||||
import useToolCallState from './useToolCallState';
|
||||
import { AttachmentGroup } from './Attachment';
|
||||
import parseJsonField from './parseJsonField';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import Stdout from './Stdout';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
export default function SkillCall({
|
||||
isSubmitting,
|
||||
initialProgress = 0.1,
|
||||
args,
|
||||
output = '',
|
||||
attachments,
|
||||
}: {
|
||||
initialProgress: number;
|
||||
isSubmitting: boolean;
|
||||
args?: string | Record<string, unknown>;
|
||||
output?: string;
|
||||
attachments?: TAttachment[];
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const skillName = useMemo(() => parseJsonField(args, 'skillName'), [args]);
|
||||
|
||||
const { showCode, toggleCode, expandStyle, expandRef, progress, cancelled, hasError, hasOutput } =
|
||||
useToolCallState(initialProgress, isSubmitting, output, !!skillName);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative my-1.5 flex size-5 shrink-0 items-center gap-2.5">
|
||||
<ProgressText
|
||||
progress={progress}
|
||||
onClick={toggleCode}
|
||||
inProgressText={localize('com_ui_skill_running', { 0: skillName })}
|
||||
finishedText={
|
||||
cancelled
|
||||
? localize('com_ui_cancelled')
|
||||
: localize('com_ui_skill_finished', { 0: skillName })
|
||||
}
|
||||
errorSuffix={hasError && !cancelled ? localize('com_ui_tool_failed') : undefined}
|
||||
icon={
|
||||
<ScrollText
|
||||
className={cn(
|
||||
'size-4 shrink-0 text-text-secondary',
|
||||
progress < 1 && !cancelled && !hasError && 'animate-pulse',
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
}
|
||||
hasInput={!!skillName || hasOutput}
|
||||
isExpanded={showCode}
|
||||
error={cancelled}
|
||||
/>
|
||||
</div>
|
||||
<div style={expandStyle}>
|
||||
<div className="overflow-hidden" ref={expandRef}>
|
||||
{hasOutput && (
|
||||
<div className="my-2 overflow-hidden rounded-lg border border-border-light bg-surface-secondary">
|
||||
<div className="bg-surface-primary-alt p-4 text-xs dark:bg-transparent">
|
||||
<div className="mb-1.5 text-[10px] font-medium uppercase tracking-wide text-text-secondary">
|
||||
{localize('com_ui_output')}
|
||||
</div>
|
||||
<div className="max-h-[200px] overflow-auto text-text-primary">
|
||||
<Stdout output={output} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{attachments && attachments.length > 0 && <AttachmentGroup attachments={attachments} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
import { langFromPath } from '../ReadFileCall';
|
||||
|
||||
describe('langFromPath', () => {
|
||||
describe('common extensions', () => {
|
||||
it.each([
|
||||
['main.py', 'python'],
|
||||
['index.js', 'javascript'],
|
||||
['app.ts', 'typescript'],
|
||||
['component.tsx', 'typescript'],
|
||||
['component.jsx', 'javascript'],
|
||||
['lib.rs', 'rust'],
|
||||
['main.go', 'go'],
|
||||
['Main.java', 'java'],
|
||||
])('%s -> %s', (filename, expected) => {
|
||||
expect(langFromPath(filename)).toBe(expected);
|
||||
});
|
||||
});
|
||||
|
||||
describe('full paths', () => {
|
||||
it('resolves language from the filename at the end of a Unix path', () => {
|
||||
expect(langFromPath('/home/user/project/main.py')).toBe('python');
|
||||
});
|
||||
|
||||
it('resolves language when path has multiple segments', () => {
|
||||
expect(langFromPath('/usr/local/src/app/index.ts')).toBe('typescript');
|
||||
});
|
||||
|
||||
it('ignores dots in directory names and uses the file extension', () => {
|
||||
expect(langFromPath('my.project/config.json')).toBe('json');
|
||||
});
|
||||
});
|
||||
|
||||
describe('extensionless filename map', () => {
|
||||
it('returns makefile for "makefile"', () => {
|
||||
expect(langFromPath('makefile')).toBe('makefile');
|
||||
});
|
||||
|
||||
it('returns makefile for mixed-case Makefile', () => {
|
||||
expect(langFromPath('Makefile')).toBe('makefile');
|
||||
});
|
||||
|
||||
it('returns dockerfile for Dockerfile', () => {
|
||||
expect(langFromPath('Dockerfile')).toBe('dockerfile');
|
||||
});
|
||||
|
||||
it('returns dockerfile for lowercase dockerfile', () => {
|
||||
expect(langFromPath('dockerfile')).toBe('dockerfile');
|
||||
});
|
||||
|
||||
it('resolves filename map entry from a full path', () => {
|
||||
expect(langFromPath('/home/user/project/Makefile')).toBe('makefile');
|
||||
});
|
||||
});
|
||||
|
||||
describe('case insensitivity', () => {
|
||||
it('handles uppercase extension .MD -> markdown', () => {
|
||||
expect(langFromPath('README.MD')).toBe('markdown');
|
||||
});
|
||||
|
||||
it('handles mixed-case extension .Ts -> typescript', () => {
|
||||
expect(langFromPath('module.Ts')).toBe('typescript');
|
||||
});
|
||||
|
||||
it('handles uppercase extension .JS -> javascript', () => {
|
||||
expect(langFromPath('bundle.JS')).toBe('javascript');
|
||||
});
|
||||
});
|
||||
|
||||
describe('unknown or unrecognised inputs', () => {
|
||||
it('returns plaintext for unknown extension', () => {
|
||||
expect(langFromPath('archive.xyz')).toBe('plaintext');
|
||||
});
|
||||
|
||||
it('returns plaintext for empty string', () => {
|
||||
expect(langFromPath('')).toBe('plaintext');
|
||||
});
|
||||
|
||||
it('returns plaintext for dotfile with no mapped extension (.gitignore)', () => {
|
||||
expect(langFromPath('.gitignore')).toBe('plaintext');
|
||||
});
|
||||
|
||||
it('returns plaintext for dotfile in a full path', () => {
|
||||
expect(langFromPath('/home/user/.gitignore')).toBe('plaintext');
|
||||
});
|
||||
});
|
||||
|
||||
describe('additional mapped extensions', () => {
|
||||
it.each([
|
||||
['query.sql', 'sql'],
|
||||
['style.css', 'css'],
|
||||
['style.scss', 'scss'],
|
||||
['style.less', 'less'],
|
||||
['index.html', 'html'],
|
||||
['config.xml', 'xml'],
|
||||
['config.yaml', 'yaml'],
|
||||
['config.yml', 'yaml'],
|
||||
['config.toml', 'toml'],
|
||||
['script.sh', 'bash'],
|
||||
['script.bash', 'bash'],
|
||||
['script.zsh', 'bash'],
|
||||
['data.json', 'json'],
|
||||
['file.c', 'c'],
|
||||
['file.h', 'c'],
|
||||
['file.cpp', 'cpp'],
|
||||
['file.hpp', 'cpp'],
|
||||
['App.kt', 'kotlin'],
|
||||
['App.swift', 'swift'],
|
||||
['Program.cs', 'csharp'],
|
||||
['script.php', 'php'],
|
||||
['mod.lua', 'lua'],
|
||||
['analysis.r', 'r'],
|
||||
['module.rb', 'ruby'],
|
||||
])('%s -> %s', (filename, expected) => {
|
||||
expect(langFromPath(filename)).toBe(expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
import parseJsonField from '../parseJsonField';
|
||||
|
||||
describe('parseJsonField', () => {
|
||||
describe('object args', () => {
|
||||
it('returns the field value when present', () => {
|
||||
expect(parseJsonField({ skillName: 'mySkill' }, 'skillName')).toBe('mySkill');
|
||||
});
|
||||
|
||||
it('returns empty string when field is missing', () => {
|
||||
expect(parseJsonField({ other: 'value' }, 'skillName')).toBe('');
|
||||
});
|
||||
|
||||
it('returns empty string when field is null', () => {
|
||||
expect(parseJsonField({ skillName: null }, 'skillName')).toBe('');
|
||||
});
|
||||
|
||||
it('coerces numeric field values to string', () => {
|
||||
expect(parseJsonField({ count: 42 }, 'count')).toBe('42');
|
||||
});
|
||||
|
||||
it('handles different field names — file_path', () => {
|
||||
expect(parseJsonField({ file_path: '/home/user/file.ts' }, 'file_path')).toBe(
|
||||
'/home/user/file.ts',
|
||||
);
|
||||
});
|
||||
|
||||
it('handles different field names — command', () => {
|
||||
expect(parseJsonField({ command: 'ls -la' }, 'command')).toBe('ls -la');
|
||||
});
|
||||
});
|
||||
|
||||
describe('undefined args', () => {
|
||||
it('returns empty string for undefined', () => {
|
||||
expect(parseJsonField(undefined, 'skillName')).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('valid JSON string args', () => {
|
||||
it('returns the field value when present', () => {
|
||||
expect(parseJsonField('{"skillName":"mySkill"}', 'skillName')).toBe('mySkill');
|
||||
});
|
||||
|
||||
it('returns empty string when field is missing from parsed JSON', () => {
|
||||
expect(parseJsonField('{"other":"value"}', 'skillName')).toBe('');
|
||||
});
|
||||
|
||||
it('handles different field names — file_path', () => {
|
||||
expect(parseJsonField('{"file_path":"/tmp/out.txt"}', 'file_path')).toBe('/tmp/out.txt');
|
||||
});
|
||||
|
||||
it('handles different field names — command', () => {
|
||||
expect(parseJsonField('{"command":"echo hello"}', 'command')).toBe('echo hello');
|
||||
});
|
||||
});
|
||||
|
||||
describe('empty string args', () => {
|
||||
it('returns empty string for empty string input', () => {
|
||||
expect(parseJsonField('', 'skillName')).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('partial/streaming JSON — regex fallback', () => {
|
||||
it('extracts field from malformed partial JSON', () => {
|
||||
const partial = '{"skillName":"mySkill","incomplete":';
|
||||
expect(parseJsonField(partial, 'skillName')).toBe('mySkill');
|
||||
});
|
||||
|
||||
it('returns empty string when field is absent from partial JSON', () => {
|
||||
const partial = '{"other":"value","incomplete":';
|
||||
expect(parseJsonField(partial, 'skillName')).toBe('');
|
||||
});
|
||||
|
||||
it('unescapes \\n in regex-matched values', () => {
|
||||
const partial = '{"command":"line1\\nline2","incomplete":';
|
||||
expect(parseJsonField(partial, 'command')).toBe('line1\nline2');
|
||||
});
|
||||
|
||||
it('unescapes \\" in regex-matched values', () => {
|
||||
const partial = '{"command":"say \\"hello\\"","incomplete":';
|
||||
expect(parseJsonField(partial, 'command')).toBe('say "hello"');
|
||||
});
|
||||
|
||||
it('unescapes \\\\ in regex-matched values', () => {
|
||||
const partial = '{"file_path":"C:\\\\Users\\\\file.txt","incomplete":';
|
||||
expect(parseJsonField(partial, 'file_path')).toBe('C:\\Users\\file.txt');
|
||||
});
|
||||
|
||||
it('handles whitespace between colon and value', () => {
|
||||
const partial = '{"skillName" : "spaced","incomplete":';
|
||||
expect(parseJsonField(partial, 'skillName')).toBe('spaced');
|
||||
});
|
||||
|
||||
it('decodes \\\\n as literal backslash + n, not newline', () => {
|
||||
const partial = '{"file_path":"C:\\\\note","incomplete":';
|
||||
expect(parseJsonField(partial, 'file_path')).toBe('C:\\note');
|
||||
});
|
||||
|
||||
it('preserves unknown escape sequences', () => {
|
||||
const partial = '{"command":"tab\\there","incomplete":';
|
||||
expect(parseJsonField(partial, 'command')).toBe('tab\\there');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -9,3 +9,6 @@ export { default as ExecuteCode } from './ExecuteCode';
|
|||
export { default as Summary } from './Summary';
|
||||
export { default as AgentUpdate } from './AgentUpdate';
|
||||
export { default as EditTextPart } from './EditTextPart';
|
||||
export { default as SkillCall } from './SkillCall';
|
||||
export { default as ReadFileCall } from './ReadFileCall';
|
||||
export { default as BashCall } from './BashCall';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
/** Extracts a string field from tool call args, handling object, JSON string, and partial-JSON fallback. */
|
||||
export default function parseJsonField(
|
||||
args: string | Record<string, unknown> | undefined,
|
||||
field: string,
|
||||
): string {
|
||||
if (typeof args === 'object' && args !== null) {
|
||||
return String(args[field] ?? '');
|
||||
}
|
||||
try {
|
||||
const parsed = JSON.parse(args || '{}');
|
||||
if (typeof parsed === 'object' && parsed !== null) {
|
||||
return String(parsed[field] ?? '');
|
||||
}
|
||||
} catch {
|
||||
// partial JSON during streaming; fall through to regex
|
||||
}
|
||||
const escaped = field.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
const re = new RegExp(`"${escaped}"\\s*:\\s*"((?:[^"\\\\]|\\\\.)*)"`);
|
||||
const match = args?.match(re);
|
||||
if (!match) {
|
||||
return '';
|
||||
}
|
||||
return match[1].replace(/\\(.)/g, (_, c: string) =>
|
||||
c === 'n' ? '\n' : c === '"' ? '"' : c === '\\' ? '\\' : `\\${c}`,
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
import React, { useState, useEffect, useRef } from 'react';
|
||||
|
||||
interface HastText {
|
||||
type: 'text';
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface HastElement {
|
||||
type: 'element';
|
||||
tagName: string;
|
||||
properties?: { className?: string[] };
|
||||
children?: HastNode[];
|
||||
}
|
||||
|
||||
type HastNode = HastText | HastElement;
|
||||
|
||||
function hastToReact(nodes: HastNode[]): React.ReactNode[] {
|
||||
return nodes.map((node, i) => {
|
||||
if (node.type === 'text') {
|
||||
return node.value;
|
||||
}
|
||||
return React.createElement(
|
||||
node.tagName,
|
||||
{ key: i, className: node.properties?.className?.join(' ') },
|
||||
node.children ? hastToReact(node.children) : undefined,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
type LowlightModule = typeof import('lowlight');
|
||||
|
||||
let lowlightPromise: Promise<LowlightModule> | null = null;
|
||||
let lowlightModule: LowlightModule | null = null;
|
||||
|
||||
function loadLowlight(): Promise<LowlightModule> {
|
||||
if (lowlightModule) {
|
||||
return Promise.resolve(lowlightModule);
|
||||
}
|
||||
if (!lowlightPromise) {
|
||||
lowlightPromise = import('lowlight').then((mod) => {
|
||||
lowlightModule = mod;
|
||||
return mod;
|
||||
});
|
||||
}
|
||||
return lowlightPromise;
|
||||
}
|
||||
|
||||
function highlightCode(mod: LowlightModule, code: string, lang: string): React.ReactNode[] {
|
||||
if (lang === 'plaintext') {
|
||||
return [code];
|
||||
}
|
||||
try {
|
||||
const tree = mod.lowlight.registered(lang)
|
||||
? mod.lowlight.highlight(lang, code)
|
||||
: mod.lowlight.highlightAuto(code);
|
||||
return hastToReact(tree.children as HastNode[]);
|
||||
} catch {
|
||||
return [code];
|
||||
}
|
||||
}
|
||||
|
||||
export default function useLazyHighlight(
|
||||
code: string | undefined,
|
||||
lang: string,
|
||||
): React.ReactNode[] | null {
|
||||
const [highlighted, setHighlighted] = useState<React.ReactNode[] | null>(() => {
|
||||
if (!code || !lowlightModule) {
|
||||
return null;
|
||||
}
|
||||
return highlightCode(lowlightModule, code, lang);
|
||||
});
|
||||
const prevKey = useRef('');
|
||||
|
||||
useEffect(() => {
|
||||
const key = `${lang}\0${code ?? ''}`;
|
||||
if (key === prevKey.current) {
|
||||
return;
|
||||
}
|
||||
prevKey.current = key;
|
||||
|
||||
if (!code) {
|
||||
setHighlighted(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (lowlightModule) {
|
||||
setHighlighted(highlightCode(lowlightModule, code, lang));
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
loadLowlight()
|
||||
.then((mod) => {
|
||||
if (!cancelled) {
|
||||
setHighlighted(highlightCode(mod, code, lang));
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) {
|
||||
setHighlighted([code]);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [code, lang]);
|
||||
|
||||
return highlighted;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { isError } from '~/components/Chat/Messages/Content/ToolOutput';
|
||||
import { useProgress, useExpandCollapse } from '~/hooks';
|
||||
import store from '~/store';
|
||||
|
||||
interface ToolCallState {
|
||||
showCode: boolean;
|
||||
toggleCode: () => void;
|
||||
expandStyle: React.CSSProperties;
|
||||
expandRef: React.RefObject<HTMLDivElement>;
|
||||
progress: number;
|
||||
cancelled: boolean;
|
||||
hasError: boolean;
|
||||
hasOutput: boolean;
|
||||
hasContent: boolean;
|
||||
}
|
||||
|
||||
export default function useToolCallState(
|
||||
initialProgress: number,
|
||||
isSubmitting: boolean,
|
||||
output: string,
|
||||
hasInput: boolean,
|
||||
): ToolCallState {
|
||||
const autoExpand = useRecoilValue(store.autoExpandTools);
|
||||
const hasOutput = output.length > 0;
|
||||
const hasError = hasOutput && isError(output);
|
||||
const hasContent = hasInput || hasOutput;
|
||||
|
||||
const [showCode, setShowCode] = useState(() => autoExpand && hasContent);
|
||||
const { style: expandStyle, ref: expandRef } = useExpandCollapse(showCode);
|
||||
|
||||
useEffect(() => {
|
||||
if (autoExpand && hasContent) {
|
||||
setShowCode(true);
|
||||
}
|
||||
}, [autoExpand, hasContent]);
|
||||
|
||||
const progress = useProgress(initialProgress);
|
||||
const toggleCode = useCallback(() => setShowCode((prev) => !prev), []);
|
||||
const cancelled = !isSubmitting && progress < 1 && !hasError;
|
||||
|
||||
return {
|
||||
showCode,
|
||||
toggleCode,
|
||||
expandStyle,
|
||||
expandRef,
|
||||
progress,
|
||||
cancelled,
|
||||
hasError,
|
||||
hasOutput,
|
||||
hasContent,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,7 +1,22 @@
|
|||
import { Constants, isActionTool } from 'librechat-data-provider';
|
||||
import { Terminal, Globe, ImageIcon, ArrowRightLeft, FileSearch, Zap, Wrench } from 'lucide-react';
|
||||
import {
|
||||
Terminal,
|
||||
Globe,
|
||||
ImageIcon,
|
||||
ArrowRightLeft,
|
||||
FileSearch,
|
||||
FileText,
|
||||
ScrollText,
|
||||
Zap,
|
||||
Wrench,
|
||||
} from 'lucide-react';
|
||||
import LangIcon from '~/components/Messages/Content/LangIcon';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
function BashIcon({ className }: { className?: string }) {
|
||||
return <LangIcon lang="bash" className={className} />;
|
||||
}
|
||||
|
||||
export type ToolIconType =
|
||||
| 'mcp'
|
||||
| 'execute_code'
|
||||
|
|
@ -9,6 +24,9 @@ export type ToolIconType =
|
|||
| 'image_gen'
|
||||
| 'agent_handoff'
|
||||
| 'file_search'
|
||||
| 'skill'
|
||||
| 'read_file'
|
||||
| 'bash_tool'
|
||||
| 'action'
|
||||
| 'generic';
|
||||
|
||||
|
|
@ -19,6 +37,9 @@ const ICON_MAP: Record<ToolIconType, React.ComponentType<{ className?: string }>
|
|||
image_gen: ImageIcon,
|
||||
agent_handoff: ArrowRightLeft,
|
||||
file_search: FileSearch,
|
||||
skill: ScrollText,
|
||||
read_file: FileText,
|
||||
bash_tool: BashIcon,
|
||||
action: Zap,
|
||||
generic: Wrench,
|
||||
};
|
||||
|
|
@ -45,6 +66,15 @@ export function getToolIconType(name: string): ToolIconType {
|
|||
if (name === 'code_interpreter') {
|
||||
return 'execute_code';
|
||||
}
|
||||
if (name === 'skill') {
|
||||
return 'skill';
|
||||
}
|
||||
if (name === 'read_file') {
|
||||
return 'read_file';
|
||||
}
|
||||
if (name === 'bash_tool') {
|
||||
return 'bash_tool';
|
||||
}
|
||||
if (name.startsWith(Constants.LC_TRANSFER_TO_)) {
|
||||
return 'agent_handoff';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,3 +32,29 @@ describe('getToolIconType - ACTN-01: Action delimiter detection', () => {
|
|||
expect(getToolIconType(`${Constants.LC_TRANSFER_TO_}agent1`)).toBe('agent_handoff');
|
||||
});
|
||||
});
|
||||
|
||||
describe('getToolIconType - SKILL-01: Skill tool icon types', () => {
|
||||
it('returns "skill" for tool name "skill"', () => {
|
||||
expect(getToolIconType('skill')).toBe('skill');
|
||||
});
|
||||
|
||||
it('returns "read_file" for tool name "read_file"', () => {
|
||||
expect(getToolIconType('read_file')).toBe('read_file');
|
||||
});
|
||||
|
||||
it('returns "bash_tool" for tool name "bash_tool"', () => {
|
||||
expect(getToolIconType('bash_tool')).toBe('bash_tool');
|
||||
});
|
||||
|
||||
it('skill types take priority over the "generic" fallback', () => {
|
||||
expect(getToolIconType('skill')).not.toBe('generic');
|
||||
expect(getToolIconType('read_file')).not.toBe('generic');
|
||||
expect(getToolIconType('bash_tool')).not.toBe('generic');
|
||||
});
|
||||
|
||||
it('skill types take priority over the "action" fallback', () => {
|
||||
expect(getToolIconType('skill')).not.toBe('action');
|
||||
expect(getToolIconType('read_file')).not.toBe('action');
|
||||
expect(getToolIconType('bash_tool')).not.toBe('action');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -840,6 +840,7 @@
|
|||
"com_ui_collapse_chat": "Collapse Chat",
|
||||
"com_ui_collapse_summary": "Collapse Summary",
|
||||
"com_ui_collapse_thoughts": "Collapse Thoughts",
|
||||
"com_ui_command_finished": "Finished running",
|
||||
"com_ui_command_placeholder": "Optional: Enter a command for the prompt or name will be used",
|
||||
"com_ui_command_usage_placeholder": "Select a Prompt by command or name",
|
||||
"com_ui_complete": "Complete!",
|
||||
|
|
@ -1326,6 +1327,8 @@
|
|||
"com_ui_provider": "Provider",
|
||||
"com_ui_quality": "Quality",
|
||||
"com_ui_read_aloud": "Read aloud",
|
||||
"com_ui_read_file": "Read {{0}}",
|
||||
"com_ui_reading_file": "Reading {{0}}",
|
||||
"com_ui_redirect_uri": "Redirect URI",
|
||||
"com_ui_redirect_uri_instructions": "Copy this redirect URI and configure it in your OAuth provider settings.",
|
||||
"com_ui_redirecting_to_provider": "Redirecting to {{0}}, please wait...",
|
||||
|
|
@ -1394,6 +1397,7 @@
|
|||
"com_ui_run_code": "Run Code",
|
||||
"com_ui_run_code_error": "There was an error running the code",
|
||||
"com_ui_running": "Running...",
|
||||
"com_ui_running_command": "Running command",
|
||||
"com_ui_save": "Save",
|
||||
"com_ui_save_badge_changes": "Save badge changes?",
|
||||
"com_ui_save_changes": "Save Changes",
|
||||
|
|
@ -1475,6 +1479,7 @@
|
|||
"com_ui_skill_file_binary": "Binary file — cannot preview inline",
|
||||
"com_ui_skill_file_download": "Download",
|
||||
"com_ui_skill_file_load_error": "Failed to load file content",
|
||||
"com_ui_skill_finished": "Ran {{0}}",
|
||||
"com_ui_skill_instructions": "Instructions",
|
||||
"com_ui_skill_instructions_placeholder": "Enter your skill instructions in markdown...",
|
||||
"com_ui_skill_name_invalid": "Use lowercase letters, digits, and dashes only (kebab-case)",
|
||||
|
|
@ -1491,6 +1496,7 @@
|
|||
"com_ui_skill_role_editor_desc": "Can view and edit the skill",
|
||||
"com_ui_skill_role_owner_desc": "Full control over the skill including sharing and deletion",
|
||||
"com_ui_skill_role_viewer_desc": "Can view and use the skill but cannot edit it",
|
||||
"com_ui_skill_running": "Running {{0}}",
|
||||
"com_ui_skill_sr_public": "Public skill",
|
||||
"com_ui_skill_update_conflict": "Another edit was saved before yours. Reloading the latest version.",
|
||||
"com_ui_skill_update_error": "Failed to save skill",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,9 @@ export enum Tools {
|
|||
function = 'function',
|
||||
memory = 'memory',
|
||||
ui_resources = 'ui_resources',
|
||||
skill = 'skill',
|
||||
read_file = 'read_file',
|
||||
bash_tool = 'bash_tool',
|
||||
}
|
||||
|
||||
export enum EToolResources {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue