Hermes
4f5fde34a3
- New visual identity: solid dark cards, purple accent, iOS-like feel - Session replay: newest messages first, message input with send button - Chat proxy route for sending messages to sessions - systemd user service with deploy script - All pages restyled: Pulse, Memory, History, Skills, Cron, Soul, Config
104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Wrench, ChevronDown, ChevronRight } from "lucide-react";
|
|
import type { Message, ToolCall } from "@/lib/types";
|
|
|
|
interface Props {
|
|
message: Message;
|
|
toolResults: Map<string, { name: string; content: string }>;
|
|
}
|
|
|
|
function ToolCallBlock({ tc, result }: { tc: ToolCall; result?: { name: string; content: string } }) {
|
|
const [open, setOpen] = useState(false);
|
|
let args: Record<string, unknown> = {};
|
|
try { args = JSON.parse(tc.function.arguments); } catch {}
|
|
|
|
return (
|
|
<div className="mt-1.5">
|
|
<button
|
|
onClick={() => setOpen(!open)}
|
|
className="flex items-center gap-1 text-[11px] py-0.5 px-1.5 rounded-md active:bg-white/[0.04]"
|
|
style={{ color: "var(--accent)" }}
|
|
>
|
|
<Wrench size={10} />
|
|
<span className="font-mono">{tc.function.name}</span>
|
|
{open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
|
|
</button>
|
|
{open && (
|
|
<div className="mt-1 ml-2 pl-2 space-y-1" style={{ borderLeft: "2px solid var(--border)" }}>
|
|
<pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto" style={{ color: "var(--text-3)" }}>
|
|
{JSON.stringify(args, null, 2)}
|
|
</pre>
|
|
{result && (
|
|
<pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-32 overflow-y-auto" style={{ color: "var(--text-3)", opacity: 0.6 }}>
|
|
{result.content.slice(0, 500)}{result.content.length > 500 ? "..." : ""}
|
|
</pre>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function MessageBubble({ message, toolResults }: Props) {
|
|
const isUser = message.role === "user";
|
|
const content = message.content || "";
|
|
|
|
let toolCalls: ToolCall[] = [];
|
|
if (message.tool_calls) {
|
|
try { toolCalls = JSON.parse(message.tool_calls); } catch {}
|
|
}
|
|
|
|
if (!content && toolCalls.length === 0) return null;
|
|
|
|
return (
|
|
<div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
|
|
<div
|
|
className="max-w-[88%] rounded-2xl px-3.5 py-2.5"
|
|
style={{
|
|
background: isUser ? "var(--accent)" : "var(--bg-raised)",
|
|
color: isUser ? "white" : "var(--text-1)",
|
|
}}
|
|
>
|
|
{content && (
|
|
<p className="text-[14px] whitespace-pre-wrap leading-relaxed break-words">
|
|
{content}
|
|
</p>
|
|
)}
|
|
{toolCalls.length > 0 && (
|
|
<div>
|
|
{toolCalls.length <= 3 ? (
|
|
toolCalls.map((tc) => (
|
|
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
|
|
))
|
|
) : (
|
|
<CollapsedTools toolCalls={toolCalls} toolResults={toolResults} />
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CollapsedTools({ toolCalls, toolResults }: { toolCalls: ToolCall[]; toolResults: Map<string, { name: string; content: string }> }) {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<div className="mt-1.5">
|
|
<button
|
|
onClick={() => setOpen(!open)}
|
|
className="flex items-center gap-1 text-[11px] py-0.5 px-1.5 rounded-md active:bg-white/[0.04]"
|
|
style={{ color: "var(--accent)" }}
|
|
>
|
|
<Wrench size={10} />
|
|
<span>{toolCalls.length} tool calls</span>
|
|
{open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
|
|
</button>
|
|
{open && toolCalls.map((tc) => (
|
|
<ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|