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
- **Date:** 2026-02-11
- **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)
- 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

View File

@@ -1,5 +1,5 @@
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 { useT } from '../hooks/useLocale';
import { ImageBlock } from './ImageBlock';
@@ -31,29 +31,39 @@ 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} />,
const toolEmojis: Record<string, string> = {
exec: '⚡',
web_search: '🔍',
web_fetch: '🌐',
search: '🔍',
Read: '📖',
read: '📖',
Write: '✏️',
write: '✏️',
Edit: '✏️',
edit: '✏️',
browser: '🌐',
image: '🖼️',
message: '💬',
database: '🗄️',
memory_search: '🧠',
memory_get: '🧠',
cron: '⏰',
sessions_spawn: '🚀',
sessions_send: '📨',
sessions_list: '📋',
sessions_history: '📜',
session_status: '📊',
tts: '🔊',
gateway: '⚙️',
canvas: '🎨',
nodes: '📡',
process: '⚙️',
voice_call: '📞',
};
function getToolIcon(name: string) {
return toolIcons[name] || <Wrench size={13} />;
function getToolEmoji(name: string): string {
return toolEmojis[name] || '🔧';
}
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)}
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>
{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" />}