203 lines
10 KiB
TypeScript
203 lines
10 KiB
TypeScript
import { useState, useMemo } from 'react';
|
|
import { ChevronRight, ChevronDown, Terminal, Globe, Search, FileText, Wrench, Code, Database, Image, MessageSquare, Brain, Cpu } from 'lucide-react';
|
|
import hljs from 'highlight.js/lib/common';
|
|
|
|
type ToolColor = { border: string; bg: string; text: string; icon: string; glow: string; expandBorder: string; expandBg: string };
|
|
|
|
const toolColors: Record<string, ToolColor> = {
|
|
exec: { border: 'border-amber-500/30', bg: 'bg-amber-500/10', text: 'text-amber-300', icon: 'text-amber-400', glow: 'shadow-[0_0_8px_rgba(245,158,11,0.15)]', expandBorder: 'border-amber-500/20', expandBg: 'bg-amber-950/20' },
|
|
web_search: { border: 'border-emerald-500/30', bg: 'bg-emerald-500/10', text: 'text-emerald-300', icon: 'text-emerald-400', glow: 'shadow-[0_0_8px_rgba(16,185,129,0.15)]', expandBorder: 'border-emerald-500/20', expandBg: 'bg-emerald-950/20' },
|
|
web_fetch: { border: 'border-emerald-500/30', bg: 'bg-emerald-500/10', text: 'text-emerald-300', icon: 'text-emerald-400', glow: 'shadow-[0_0_8px_rgba(16,185,129,0.15)]', expandBorder: 'border-emerald-500/20', expandBg: 'bg-emerald-950/20' },
|
|
Read: { border: 'border-sky-500/30', bg: 'bg-sky-500/10', text: 'text-sky-300', icon: 'text-sky-400', glow: 'shadow-[0_0_8px_rgba(14,165,233,0.15)]', expandBorder: 'border-sky-500/20', expandBg: 'bg-sky-950/20' },
|
|
read: { border: 'border-sky-500/30', bg: 'bg-sky-500/10', text: 'text-sky-300', icon: 'text-sky-400', glow: 'shadow-[0_0_8px_rgba(14,165,233,0.15)]', expandBorder: 'border-sky-500/20', expandBg: 'bg-sky-950/20' },
|
|
Write: { border: 'border-violet-500/30', bg: 'bg-violet-500/10', text: 'text-violet-300', icon: 'text-violet-400', glow: 'shadow-[0_0_8px_rgba(139,92,246,0.15)]', expandBorder: 'border-violet-500/20', expandBg: 'bg-violet-950/20' },
|
|
write: { border: 'border-violet-500/30', bg: 'bg-violet-500/10', text: 'text-violet-300', icon: 'text-violet-400', glow: 'shadow-[0_0_8px_rgba(139,92,246,0.15)]', expandBorder: 'border-violet-500/20', expandBg: 'bg-violet-950/20' },
|
|
Edit: { border: 'border-violet-500/30', bg: 'bg-violet-500/10', text: 'text-violet-300', icon: 'text-violet-400', glow: 'shadow-[0_0_8px_rgba(139,92,246,0.15)]', expandBorder: 'border-violet-500/20', expandBg: 'bg-violet-950/20' },
|
|
edit: { border: 'border-violet-500/30', bg: 'bg-violet-500/10', text: 'text-violet-300', icon: 'text-violet-400', glow: 'shadow-[0_0_8px_rgba(139,92,246,0.15)]', expandBorder: 'border-violet-500/20', expandBg: 'bg-violet-950/20' },
|
|
browser: { border: 'border-cyan-500/30', bg: 'bg-cyan-500/10', text: 'text-cyan-300', icon: 'text-cyan-400', glow: 'shadow-[0_0_8px_rgba(6,182,212,0.15)]', expandBorder: 'border-cyan-500/20', expandBg: 'bg-cyan-950/20' },
|
|
image: { border: 'border-pink-500/30', bg: 'bg-pink-500/10', text: 'text-pink-300', icon: 'text-pink-400', glow: 'shadow-[0_0_8px_rgba(236,72,153,0.15)]', expandBorder: 'border-pink-500/20', expandBg: 'bg-pink-950/20' },
|
|
message: { border: 'border-indigo-500/30', bg: 'bg-indigo-500/10', text: 'text-indigo-300', icon: 'text-indigo-400', glow: 'shadow-[0_0_8px_rgba(99,102,241,0.15)]', expandBorder: 'border-indigo-500/20', expandBg: 'bg-indigo-950/20' },
|
|
memory_search: { border: 'border-rose-500/30', bg: 'bg-rose-500/10', text: 'text-rose-300', icon: 'text-rose-400', glow: 'shadow-[0_0_8px_rgba(244,63,94,0.15)]', expandBorder: 'border-rose-500/20', expandBg: 'bg-rose-950/20' },
|
|
memory_get: { border: 'border-rose-500/30', bg: 'bg-rose-500/10', text: 'text-rose-300', icon: 'text-rose-400', glow: 'shadow-[0_0_8px_rgba(244,63,94,0.15)]', expandBorder: 'border-rose-500/20', expandBg: 'bg-rose-950/20' },
|
|
cron: { border: 'border-orange-500/30', bg: 'bg-orange-500/10', text: 'text-orange-300', icon: 'text-orange-400', glow: 'shadow-[0_0_8px_rgba(249,115,22,0.15)]', expandBorder: 'border-orange-500/20', expandBg: 'bg-orange-950/20' },
|
|
sessions_spawn: { border: 'border-teal-500/30', bg: 'bg-teal-500/10', text: 'text-teal-300', icon: 'text-teal-400', glow: 'shadow-[0_0_8px_rgba(20,184,166,0.15)]', expandBorder: 'border-teal-500/20', expandBg: 'bg-teal-950/20' },
|
|
};
|
|
|
|
const defaultColor: ToolColor = { border: 'border-zinc-500/30', bg: 'bg-zinc-500/10', text: 'text-zinc-300', icon: 'text-zinc-400', glow: 'shadow-[0_0_8px_rgba(161,161,170,0.1)]', expandBorder: 'border-zinc-500/20', expandBg: 'bg-zinc-800/25' };
|
|
|
|
function getColor(name: string): ToolColor {
|
|
return toolColors[name] || defaultColor;
|
|
}
|
|
|
|
const toolIcons: Record<string, React.ReactNode> = {
|
|
exec: <Terminal size={13} />,
|
|
web_search: <Globe size={13} />,
|
|
web_fetch: <Globe size={13} />,
|
|
search: <Search size={13} />,
|
|
Read: <FileText size={13} />,
|
|
read: <FileText size={13} />,
|
|
Write: <Code size={13} />,
|
|
write: <Code size={13} />,
|
|
Edit: <Code size={13} />,
|
|
edit: <Code size={13} />,
|
|
browser: <Globe size={13} />,
|
|
image: <Image size={13} />,
|
|
message: <MessageSquare size={13} />,
|
|
database: <Database size={13} />,
|
|
memory_search: <Brain size={13} />,
|
|
memory_get: <Brain size={13} />,
|
|
cron: <Cpu size={13} />,
|
|
sessions_spawn: <Cpu size={13} />,
|
|
};
|
|
|
|
function getToolIcon(name: string) {
|
|
return toolIcons[name] || <Wrench size={13} />;
|
|
}
|
|
|
|
function truncateResult(result: string, maxLen = 120): string {
|
|
if (!result) return '';
|
|
return truncate(result, maxLen);
|
|
}
|
|
|
|
/** Check if text looks like structured content worth highlighting */
|
|
function isStructured(text: string): boolean {
|
|
const lines = text.split('\n');
|
|
if (lines.length < 2) return false;
|
|
const trimmed = text.trim();
|
|
// JSON
|
|
if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) return true;
|
|
// Code patterns
|
|
const codePatterns = [/^(import|export|const|let|var|function|class|fn|pub|use|def|from)\s/, /[{};]\s*$/, /^\s*(if|else|for|while|return)\b/, /^\s*(\/\/|#|\/\*)/, /=>\s*[{(]/, /^\s*<\/?[A-Z]/];
|
|
let hits = 0;
|
|
for (const line of lines) {
|
|
for (const pat of codePatterns) {
|
|
if (pat.test(line)) { hits++; break; }
|
|
}
|
|
}
|
|
if (hits / lines.length > 0.2) return true;
|
|
// Terminal output (paths, errors, commands)
|
|
const termPatterns = [/^[/~]/, /^\s*\$\s/, /^[A-Z_]+=/, /error|warning|failed/i, /\.\w{1,4}:\d+/, /├|└|│/];
|
|
let termHits = 0;
|
|
for (const line of lines) {
|
|
for (const pat of termPatterns) {
|
|
if (pat.test(line)) { termHits++; break; }
|
|
}
|
|
}
|
|
return termHits / lines.length > 0.3;
|
|
}
|
|
|
|
/** Highlight code using highlight.js, returns HTML string or null */
|
|
function highlightCode(text: string): string | null {
|
|
if (!text || !isStructured(text)) return null;
|
|
try {
|
|
const result = hljs.highlightAuto(text);
|
|
return result.value;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export function HighlightedPre({ text, className }: { text: string; className: string }) {
|
|
const highlighted = useMemo(() => highlightCode(text), [text]);
|
|
|
|
if (highlighted) {
|
|
return (
|
|
<pre className={className}>
|
|
<code className="hljs" dangerouslySetInnerHTML={{ __html: highlighted }} />
|
|
</pre>
|
|
);
|
|
}
|
|
return <pre className={className}>{text}</pre>;
|
|
}
|
|
|
|
function getContextHint(name: string, input: any): string | null {
|
|
if (!input || typeof input !== 'object') return null;
|
|
switch (name) {
|
|
case 'exec':
|
|
return input.command ? truncate(input.command, 60) : null;
|
|
case 'Read': case 'read':
|
|
case 'Write': case 'write':
|
|
case 'Edit': case 'edit':
|
|
return input.file_path || input.path || null;
|
|
case 'web_search':
|
|
return input.query ? truncate(input.query, 50) : null;
|
|
case 'web_fetch':
|
|
return input.url ? truncate(input.url, 60) : null;
|
|
case 'browser':
|
|
return input.action || null;
|
|
case 'message':
|
|
return input.action ? `${input.action}${input.target ? ' → ' + input.target : ''}` : null;
|
|
case 'memory_search':
|
|
return input.query ? truncate(input.query, 50) : null;
|
|
case 'memory_get':
|
|
return input.path || null;
|
|
case 'cron':
|
|
return input.action || null;
|
|
case 'sessions_spawn':
|
|
return input.task ? truncate(input.task, 50) : null;
|
|
case 'image':
|
|
return input.prompt ? truncate(input.prompt, 50) : null;
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function truncate(s: string, max: number): string {
|
|
const clean = s.replace(/\n/g, ' ').trim();
|
|
return clean.length <= max ? clean : clean.slice(0, max) + '…';
|
|
}
|
|
|
|
export function ToolCall({ name, input, result }: { name: string; input?: any; result?: string }) {
|
|
const [open, setOpen] = useState(false);
|
|
const c = getColor(name);
|
|
|
|
const inputStr = input ? (typeof input === 'string' ? input : JSON.stringify(input, null, 2)) : '';
|
|
const hint = getContextHint(name, input);
|
|
|
|
return (
|
|
<div className="my-2">
|
|
{/* Tool use badge */}
|
|
<button
|
|
onClick={() => setOpen(!open)}
|
|
className={`inline-flex items-center gap-1.5 rounded-2xl border ${c.border} ${c.bg} ${c.glow} px-3 py-1.5 text-xs ${c.text} hover:brightness-125 transition-all max-w-full`}
|
|
>
|
|
<span className={c.icon}>{getToolIcon(name)}</span>
|
|
<span className="font-mono font-semibold shrink-0">{name}</span>
|
|
{hint && <span className="opacity-60 truncate font-mono text-[11px]">{hint}</span>}
|
|
{open ? <ChevronDown size={12} className="ml-1 opacity-60" /> : <ChevronRight size={12} className="ml-1 opacity-60" />}
|
|
</button>
|
|
|
|
{/* Result summary (always visible if result exists) */}
|
|
{result && !open && (
|
|
<div className="mt-1 text-[11px] text-zinc-400 pl-2 truncate max-w-md">
|
|
{truncateResult(result)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Expanded content */}
|
|
{open && (
|
|
<div className={`mt-2 rounded-2xl border ${c.expandBorder} ${c.expandBg} p-3 space-y-2`}>
|
|
{inputStr && (
|
|
<div>
|
|
<div className={`text-[11px] ${c.text} opacity-70 mb-1 font-medium`}>Paramètres</div>
|
|
<HighlightedPre
|
|
text={inputStr}
|
|
className="text-xs bg-[#1a1a20]/60 border border-white/5 p-2.5 rounded-xl overflow-x-auto text-zinc-300 font-mono"
|
|
/>
|
|
</div>
|
|
)}
|
|
{result && (
|
|
<div>
|
|
<div className={`text-[11px] ${c.text} opacity-70 mb-1 font-medium`}>Résultat</div>
|
|
<HighlightedPre
|
|
text={result}
|
|
className="text-xs bg-[#1a1a20]/60 border border-white/5 p-2.5 rounded-xl overflow-x-auto text-zinc-300 max-h-64 overflow-y-auto font-mono"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|