diff --git a/src/components/ToolCall.tsx b/src/components/ToolCall.tsx index 7af9c7e..7871863 100644 --- a/src/components/ToolCall.tsx +++ b/src/components/ToolCall.tsx @@ -1,5 +1,5 @@ -import { useState, useMemo } from 'react'; -import { ChevronRight, ChevronDown } from 'lucide-react'; +import { useState, useCallback, useMemo } from 'react'; +import { ChevronRight, ChevronDown, Check, Copy } from 'lucide-react'; import hljs from 'highlight.js/lib/common'; import { useT } from '../hooks/useLocale'; import { ImageBlock } from './ImageBlock'; @@ -109,6 +109,29 @@ function highlightCode(text: string): string | null { } } +/** Small copy-to-clipboard button for tool call content blocks. */ +function CopyButton({ text }: { text: string }) { + const [copied, setCopied] = useState(false); + const handleCopy = useCallback(() => { + navigator.clipboard.writeText(text).then(() => { + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }); + }, [text]); + + return ( + + ); +} + export function HighlightedPre({ text, className }: { text: string; className: string }) { const highlighted = useMemo(() => highlightCode(text), [text]); @@ -225,10 +248,13 @@ export function ToolCall({ name, input, result }: { name: string; input?: Record {inputStr && (
{t('tool.parameters')}
- +
+ + +
)} {result && (() => { @@ -239,18 +265,24 @@ export function ToolCall({ name, input, result }: { name: string; input?: Record {imageData ? ( <> {imageData.remaining && ( - +
+ + +
)} ) : ( - +
+ + +
)} );