Beautify chat UI: tool pills, code blocks, modern links

This commit is contained in:
2026-06-15 12:35:50 -07:00
parent 812ee4bfec
commit 3f40e5f86e

View File

@@ -302,7 +302,7 @@ function escapeHtmlAttr(s: string): string {
} }
const LINK_STYLE = const LINK_STYLE =
"color:#4338ca;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;word-break:break-all"; "color:#4f46e5;text-decoration:none;font-weight:500;border-bottom:1px solid #c7d2fe;transition:all 0.2s ease;overflow-wrap:anywhere;word-break:break-all";
/** [label](https://...) — href restricted to http(s) */ /** [label](https://...) — href restricted to http(s) */
function markdownLinksToHtml(s: string): string { function markdownLinksToHtml(s: string): string {
@@ -963,6 +963,31 @@ const suggestionChipStyle: React.CSSProperties = {
transition: "all 0.1s ease", transition: "all 0.1s ease",
}; };
import {
FileText,
Terminal,
Search,
Globe,
FolderTree,
Wrench,
CheckCircle2,
XCircle,
Database,
CloudUpload
} from "lucide-react";
function getToolIcon(name: string) {
const n = name.toLowerCase();
if (n.includes("read") || n.includes("edit") || n.includes("write")) return <FileText size={12} />;
if (n.includes("shell") || n.includes("exec") || n.includes("command")) return <Terminal size={12} />;
if (n.includes("search") || n.includes("grep") || n.includes("find")) return <Search size={12} />;
if (n.includes("fetch") || n.includes("curl") || n.includes("browser")) return <Globe size={12} />;
if (n.includes("list") || n.includes("tree")) return <FolderTree size={12} />;
if (n.includes("deploy") || n.includes("ship")) return <CloudUpload size={12} />;
if (n.includes("database") || n.includes("sql")) return <Database size={12} />;
return <Wrench size={12} />;
}
export function ChatPanel({ export function ChatPanel({
structural = false, structural = false,
artifactSlot, artifactSlot,