Spaces:
Running
Running
File size: 3,476 Bytes
b2c1c67 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | import { useState } from "react";
import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import {
BookOpenText,
Calculator,
Check,
ChevronDown,
ChevronRight,
Clock,
CloudSun,
FileSearch,
Globe,
Loader2,
} from "lucide-react";
const TOOL_ICONS = {
web_search: Globe,
get_weather: CloudSun,
calculator: Calculator,
get_current_datetime: Clock,
search_documents: FileSearch,
};
const TOOL_LABELS = {
web_search: "Searching the web",
get_weather: "Checking the weather",
calculator: "Calculating",
get_current_datetime: "Checking the time",
search_documents: "Searching your documents",
};
function ToolChip({ tool }) {
const Icon = TOOL_ICONS[tool.name] || Globe;
const running = tool.status === "running";
const label = TOOL_LABELS[tool.name] || tool.name;
const detail =
tool.arguments?.query ||
tool.arguments?.location ||
tool.arguments?.expression ||
"";
return (
<span className={"tool-chip " + (running ? "running" : "done")}>
{running ? <Loader2 size={12} className="spin" /> : <Check size={12} />}
<Icon size={12} />
{label}
{detail ? `: ${String(detail).slice(0, 60)}` : ""}
</span>
);
}
function Citations({ citations }) {
const [open, setOpen] = useState(false);
if (!citations?.length) return null;
return (
<div className="citations-box">
<button className="citations-header" onClick={() => setOpen(!open)}>
{open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
<BookOpenText size={14} />
{citations.length} source{citations.length > 1 ? "s" : ""} from your documents
</button>
{open &&
citations.map((citation, index) => (
<div className="citation-item" key={index}>
<div className="citation-source">{citation.source}</div>
{citation.excerpt}
</div>
))}
</div>
);
}
export default function MessageBubble({ message }) {
const isUser = message.role === "user";
return (
<div className="message-row fade-in">
<div className={"message-avatar " + (isUser ? "user" : "assistant")}>
{isUser ? "You".slice(0, 1) : "S"}
</div>
<div className="message-body">
<div className="message-author">{isUser ? "You" : "Synapse"}</div>
{message.tools?.length > 0 && (
<div className="tool-chips">
{message.tools.map((tool, index) => (
<ToolChip key={index} tool={tool} />
))}
</div>
)}
<div className={"message-content" + (message.live && !message.content ? " streaming-cursor" : "")}>
{isUser ? (
<span style={{ whiteSpace: "pre-wrap" }}>{message.content}</span>
) : (
<span className={message.live && message.content ? "streaming-cursor" : ""}>
<Markdown remarkPlugins={[remarkGfm]}>{message.content}</Markdown>
</span>
)}
</div>
<Citations citations={message.citations} />
{message.meta && (
<div className="message-meta">
<span>{message.meta.model}</span>
<span>
{message.meta.input_tokens + message.meta.output_tokens} tokens
</span>
<span>${Number(message.meta.cost_usd).toFixed(5)}</span>
<span>{(message.meta.latency_ms / 1000).toFixed(1)}s</span>
</div>
)}
</div>
</div>
);
}
|