feat: add emoji icons to tool call badges

Replace Lucide icons with emojis on tool call badges for better visual
identification:  exec, 🔍 web_search, 📖 read, ✏️ write/edit,
🧠 memory,  cron, 🚀 sessions_spawn, and more.

Also reduces bundle by removing unused Lucide icon imports from ToolCall.

Closes feedback item #15.
This commit is contained in:
Nicolas Varrot
2026-02-11 20:25:31 +00:00
parent 59104b4217
commit 72f7d76cc4
2 changed files with 34 additions and 24 deletions

View File

@@ -22,7 +22,7 @@
## Item #15 ## Item #15
- **Date:** 2026-02-11 - **Date:** 2026-02-11
- **Priority:** medium - **Priority:** medium
- **Status:** pending - **Status:** in-progress
- **Description:** Ajouter des icônes/emojis sur les tool call badges dans l'app (comme sur la démo de la landing page) - **Description:** Ajouter des icônes/emojis sur les tool call badges dans l'app (comme sur la démo de la landing page)
- Sur la landing page les badges tool calls ont des petits emojis (🔍 pour search, ⚡ pour exec, etc.) — c'est sympa et aide à identifier visuellement le type de tool - Sur la landing page les badges tool calls ont des petits emojis (🔍 pour search, ⚡ pour exec, etc.) — c'est sympa et aide à identifier visuellement le type de tool
- Reproduire ça dans la vraie app : ajouter une petite icône/emoji devant le nom du tool dans chaque badge - Reproduire ça dans la vraie app : ajouter une petite icône/emoji devant le nom du tool dans chaque badge

View File

@@ -1,5 +1,5 @@
import { useState, useMemo } from 'react'; import { useState, useMemo } from 'react';
import { ChevronRight, ChevronDown, Terminal, Globe, Search, FileText, Wrench, Code, Database, Image, MessageSquare, Brain, Cpu } from 'lucide-react'; import { ChevronRight, ChevronDown } from 'lucide-react';
import hljs from 'highlight.js/lib/common'; import hljs from 'highlight.js/lib/common';
import { useT } from '../hooks/useLocale'; import { useT } from '../hooks/useLocale';
import { ImageBlock } from './ImageBlock'; import { ImageBlock } from './ImageBlock';
@@ -31,29 +31,39 @@ function getColor(name: string): ToolColor {
return toolColors[name] || defaultColor; return toolColors[name] || defaultColor;
} }
const toolIcons: Record<string, React.ReactNode> = { const toolEmojis: Record<string, string> = {
exec: <Terminal size={13} />, exec: '⚡',
web_search: <Globe size={13} />, web_search: '🔍',
web_fetch: <Globe size={13} />, web_fetch: '🌐',
search: <Search size={13} />, search: '🔍',
Read: <FileText size={13} />, Read: '📖',
read: <FileText size={13} />, read: '📖',
Write: <Code size={13} />, Write: '✏️',
write: <Code size={13} />, write: '✏️',
Edit: <Code size={13} />, Edit: '✏️',
edit: <Code size={13} />, edit: '✏️',
browser: <Globe size={13} />, browser: '🌐',
image: <Image size={13} />, image: '🖼️',
message: <MessageSquare size={13} />, message: '💬',
database: <Database size={13} />, database: '🗄️',
memory_search: <Brain size={13} />, memory_search: '🧠',
memory_get: <Brain size={13} />, memory_get: '🧠',
cron: <Cpu size={13} />, cron: '⏰',
sessions_spawn: <Cpu size={13} />, sessions_spawn: '🚀',
sessions_send: '📨',
sessions_list: '📋',
sessions_history: '📜',
session_status: '📊',
tts: '🔊',
gateway: '⚙️',
canvas: '🎨',
nodes: '📡',
process: '⚙️',
voice_call: '📞',
}; };
function getToolIcon(name: string) { function getToolEmoji(name: string): string {
return toolIcons[name] || <Wrench size={13} />; return toolEmojis[name] || '🔧';
} }
function truncateResult(result: string, maxLen = 120): string { function truncateResult(result: string, maxLen = 120): string {
@@ -189,7 +199,7 @@ export function ToolCall({ name, input, result }: { name: string; input?: any; r
onClick={() => setOpen(!open)} 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`} 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="text-[13px] leading-none">{getToolEmoji(name)}</span>
<span className="font-mono font-semibold shrink-0">{name}</span> <span className="font-mono font-semibold shrink-0">{name}</span>
{hint && <span className="opacity-60 truncate font-mono text-[11px]">{hint}</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" />} {open ? <ChevronDown size={12} className="ml-1 opacity-60" /> : <ChevronRight size={12} className="ml-1 opacity-60" />}