368 lines
14 KiB
TypeScript
368 lines
14 KiB
TypeScript
import type { ToolInvocationUIPart } from '@ai-sdk/ui-utils';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import { memo, useMemo, useState } from 'react';
|
|
import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
|
|
import { classNames } from '~/utils/classNames';
|
|
import {
|
|
TOOL_EXECUTION_APPROVAL,
|
|
TOOL_EXECUTION_DENIED,
|
|
TOOL_EXECUTION_ERROR,
|
|
TOOL_NO_EXECUTE_FUNCTION,
|
|
} from '~/utils/constants';
|
|
import { cubicEasingFn } from '~/utils/easings';
|
|
import { logger } from '~/utils/logger';
|
|
import { themeStore, type Theme } from '~/lib/stores/theme';
|
|
import { useStore } from '@nanostores/react';
|
|
import type { ToolCallAnnotation } from '~/types/context';
|
|
|
|
const highlighterOptions = {
|
|
langs: ['json'],
|
|
themes: ['light-plus', 'dark-plus'],
|
|
};
|
|
|
|
const jsonHighlighter: HighlighterGeneric<BundledLanguage, BundledTheme> =
|
|
import.meta.hot?.data.jsonHighlighter ?? (await createHighlighter(highlighterOptions));
|
|
|
|
if (import.meta.hot) {
|
|
import.meta.hot.data.jsonHighlighter = jsonHighlighter;
|
|
}
|
|
|
|
interface JsonCodeBlockProps {
|
|
className?: string;
|
|
code: string;
|
|
theme: Theme;
|
|
}
|
|
|
|
function JsonCodeBlock({ className, code, theme }: JsonCodeBlockProps) {
|
|
let formattedCode = code;
|
|
|
|
try {
|
|
if (typeof formattedCode === 'object') {
|
|
formattedCode = JSON.stringify(formattedCode, null, 2);
|
|
} else if (typeof formattedCode === 'string') {
|
|
// Attempt to parse and re-stringify for formatting
|
|
try {
|
|
const parsed = JSON.parse(formattedCode);
|
|
formattedCode = JSON.stringify(parsed, null, 2);
|
|
} catch {
|
|
// Leave as is if not JSON
|
|
}
|
|
}
|
|
} catch (e) {
|
|
// If parsing fails, keep original code
|
|
logger.error('Failed to parse JSON', { error: e });
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={classNames('text-xs rounded-md overflow-hidden mcp-tool-invocation-code', className)}
|
|
dangerouslySetInnerHTML={{
|
|
__html: jsonHighlighter.codeToHtml(formattedCode, {
|
|
lang: 'json',
|
|
theme: theme === 'dark' ? 'dark-plus' : 'light-plus',
|
|
}),
|
|
}}
|
|
style={{
|
|
padding: '0',
|
|
margin: '0',
|
|
}}
|
|
></div>
|
|
);
|
|
}
|
|
|
|
interface ToolInvocationsProps {
|
|
toolInvocations: ToolInvocationUIPart[];
|
|
toolCallAnnotations: ToolCallAnnotation[];
|
|
addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
|
|
}
|
|
|
|
export const ToolInvocations = memo(({ toolInvocations, toolCallAnnotations, addToolResult }: ToolInvocationsProps) => {
|
|
const theme = useStore(themeStore);
|
|
const [showDetails, setShowDetails] = useState(false);
|
|
|
|
const toggleDetails = () => {
|
|
setShowDetails((prev) => !prev);
|
|
};
|
|
|
|
const toolCalls = useMemo(
|
|
() => toolInvocations.filter((inv) => inv.toolInvocation.state === 'call'),
|
|
[toolInvocations],
|
|
);
|
|
|
|
const toolResults = useMemo(
|
|
() => toolInvocations.filter((inv) => inv.toolInvocation.state === 'result'),
|
|
[toolInvocations],
|
|
);
|
|
|
|
const hasToolCalls = toolCalls.length > 0;
|
|
const hasToolResults = toolResults.length > 0;
|
|
|
|
if (!hasToolCalls && !hasToolResults) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="tool-invocation border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150 mt-4 mb-4">
|
|
<div className="flex">
|
|
<button
|
|
className="flex items-stretch bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover w-full overflow-hidden"
|
|
onClick={toggleDetails}
|
|
aria-label={showDetails ? 'Collapse details' : 'Expand details'}
|
|
>
|
|
<div className="p-2">
|
|
<div className="i-ph:wrench text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"></div>
|
|
</div>
|
|
<div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
|
|
<div className="px-5 p-2 w-full text-left">
|
|
<div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">
|
|
MCP Tool Invocations{' '}
|
|
{hasToolResults && (
|
|
<span className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">
|
|
({toolResults.length} tool{hasToolResults ? 's' : ''} used)
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
<div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
|
|
<AnimatePresence>
|
|
{hasToolResults && (
|
|
<motion.button
|
|
initial={{ width: 0 }}
|
|
animate={{ width: 'auto' }}
|
|
exit={{ width: 0 }}
|
|
transition={{ duration: 0.15, ease: cubicEasingFn }}
|
|
className="bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover"
|
|
onClick={toggleDetails}
|
|
>
|
|
<div className="p-2">
|
|
<div
|
|
className={`${showDetails ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'} text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors`}
|
|
></div>
|
|
</div>
|
|
</motion.button>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
<AnimatePresence>
|
|
{hasToolCalls && (
|
|
<motion.div
|
|
className="details"
|
|
initial={{ height: 0 }}
|
|
animate={{ height: 'auto' }}
|
|
exit={{ height: '0px' }}
|
|
transition={{ duration: 0.15 }}
|
|
>
|
|
<div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
|
|
|
|
<div className="p-5 text-left bg-bolt-elements-actions-background">
|
|
<ToolCallsList
|
|
toolInvocations={toolCalls}
|
|
toolCallAnnotations={toolCallAnnotations}
|
|
addToolResult={addToolResult}
|
|
theme={theme}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{hasToolResults && showDetails && (
|
|
<motion.div
|
|
className="details"
|
|
initial={{ height: 0 }}
|
|
animate={{ height: 'auto' }}
|
|
exit={{ height: '0px' }}
|
|
transition={{ duration: 0.15 }}
|
|
>
|
|
<div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
|
|
|
|
<div className="p-5 text-left bg-bolt-elements-actions-background">
|
|
<ToolResultsList toolInvocations={toolResults} toolCallAnnotations={toolCallAnnotations} theme={theme} />
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
const toolVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: { opacity: 1, y: 0 },
|
|
};
|
|
|
|
interface ToolResultsListProps {
|
|
toolInvocations: ToolInvocationUIPart[];
|
|
toolCallAnnotations: ToolCallAnnotation[];
|
|
theme: Theme;
|
|
}
|
|
|
|
const ToolResultsList = memo(({ toolInvocations, toolCallAnnotations, theme }: ToolResultsListProps) => {
|
|
return (
|
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
|
|
<ul className="list-none space-y-4">
|
|
{toolInvocations.map((tool, index) => {
|
|
const toolCallState = tool.toolInvocation.state;
|
|
|
|
if (toolCallState !== 'result') {
|
|
return null;
|
|
}
|
|
|
|
const { toolName, toolCallId } = tool.toolInvocation;
|
|
|
|
const annotation = toolCallAnnotations.find((annotation) => {
|
|
return annotation.toolCallId === toolCallId;
|
|
});
|
|
|
|
const isErrorResult = [TOOL_NO_EXECUTE_FUNCTION, TOOL_EXECUTION_DENIED, TOOL_EXECUTION_ERROR].includes(
|
|
tool.toolInvocation.result,
|
|
);
|
|
|
|
return (
|
|
<motion.li
|
|
key={index}
|
|
variants={toolVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
transition={{
|
|
duration: 0.2,
|
|
ease: cubicEasingFn,
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-1.5 text-xs mb-1">
|
|
{isErrorResult ? (
|
|
<div className="text-lg text-bolt-elements-icon-error">
|
|
<div className="i-ph:x"></div>
|
|
</div>
|
|
) : (
|
|
<div className="text-lg text-bolt-elements-icon-success">
|
|
<div className="i-ph:check"></div>
|
|
</div>
|
|
)}
|
|
<div className="text-bolt-elements-textSecondary text-xs">Server:</div>
|
|
<div className="text-bolt-elements-textPrimary font-semibold">{annotation?.serverName}</div>
|
|
</div>
|
|
|
|
<div className="ml-6 mb-2">
|
|
<div className="text-bolt-elements-textSecondary text-xs mb-1">
|
|
Tool: <span className="text-bolt-elements-textPrimary font-semibold">{toolName}</span>
|
|
</div>
|
|
<div className="text-bolt-elements-textSecondary text-xs mb-1">
|
|
Description:{' '}
|
|
<span className="text-bolt-elements-textPrimary font-semibold">{annotation?.toolDescription}</span>
|
|
</div>
|
|
<div className="text-bolt-elements-textSecondary text-xs mb-1">Parameters:</div>
|
|
<div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
|
|
<JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.args)} theme={theme} />
|
|
</div>
|
|
<div className="text-bolt-elements-textSecondary text-xs mt-3 mb-1">Result:</div>
|
|
<div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
|
|
<JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.result)} theme={theme} />
|
|
</div>
|
|
</div>
|
|
</motion.li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</motion.div>
|
|
);
|
|
});
|
|
|
|
interface ToolCallsListProps {
|
|
toolInvocations: ToolInvocationUIPart[];
|
|
toolCallAnnotations: ToolCallAnnotation[];
|
|
addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
|
|
theme: Theme;
|
|
}
|
|
|
|
const ToolCallsList = memo(({ toolInvocations, toolCallAnnotations, addToolResult, theme }: ToolCallsListProps) => {
|
|
return (
|
|
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
|
|
<ul className="list-none space-y-4">
|
|
{toolInvocations.map((tool, index) => {
|
|
const toolCallState = tool.toolInvocation.state;
|
|
|
|
if (toolCallState !== 'call') {
|
|
return null;
|
|
}
|
|
|
|
const { toolName, toolCallId } = tool.toolInvocation;
|
|
|
|
const annotation = toolCallAnnotations.find((annotation) => {
|
|
return annotation.toolCallId === toolCallId;
|
|
});
|
|
|
|
return (
|
|
<motion.li
|
|
key={index}
|
|
variants={toolVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
transition={{
|
|
duration: 0.2,
|
|
ease: cubicEasingFn,
|
|
}}
|
|
>
|
|
<div className="ml-6 mb-2">
|
|
<div key={toolCallId}>
|
|
<div className="text-bolt-elements-textPrimary">Bolt wants to use a tool.</div>
|
|
<div className="text-bolt-elements-textSecondary text-xs mb-1">
|
|
Server:{' '}
|
|
<span className="text-bolt-elements-textPrimary font-semibold">{annotation?.serverName}</span>
|
|
</div>
|
|
<div className="text-bolt-elements-textSecondary text-xs mb-1">
|
|
Tool: <span className="text-bolt-elements-textPrimary font-semibold">{toolName}</span>
|
|
</div>
|
|
<div className="text-bolt-elements-textSecondary text-xs mb-1">
|
|
Description:{' '}
|
|
<span className="text-bolt-elements-textPrimary font-semibold">{annotation?.toolDescription}</span>
|
|
</div>
|
|
<div className="text-bolt-elements-textSecondary text-xs mb-1">Parameters:</div>
|
|
<div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
|
|
<JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.args)} theme={theme} />
|
|
</div>{' '}
|
|
<div className="flex justify-end gap-2 pt-2">
|
|
<button
|
|
className={classNames(
|
|
'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
|
|
'bg-purple-500 hover:bg-purple-600',
|
|
'text-white',
|
|
'disabled:opacity-50 disabled:cursor-not-allowed',
|
|
)}
|
|
onClick={() =>
|
|
addToolResult({
|
|
toolCallId,
|
|
result: TOOL_EXECUTION_APPROVAL.APPROVE,
|
|
})
|
|
}
|
|
>
|
|
Approve
|
|
</button>
|
|
<button
|
|
className={classNames(
|
|
'px-3 py-1.5 rounded-lg text-sm',
|
|
'bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4',
|
|
'text-bolt-elements-textPrimary',
|
|
'transition-all duration-200',
|
|
'flex items-center gap-2',
|
|
)}
|
|
onClick={() =>
|
|
addToolResult({
|
|
toolCallId,
|
|
result: TOOL_EXECUTION_APPROVAL.REJECT,
|
|
})
|
|
}
|
|
>
|
|
Reject
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</motion.div>
|
|
);
|
|
});
|