hermes-os/components/MessageBubble.tsx

"use client";

import { useState } from "react";
import { Wrench, ChevronDown, ChevronRight, User, Bot } 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-2">
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center gap-1.5 text-xs py-1 px-2 rounded-lg active:bg-white/[0.04] transition-all"
        style={{ color: "#f59e0b" }}
      >
        <Wrench size={11} />
        <span className="font-mono">{tc.function.name}</span>
        {open ? <ChevronDown size={11} /> : <ChevronRight size={11} />}
      </button>
      {open && (
        <div className="mt-1 ml-2 pl-2 border-l border-white/[0.06] space-y-1">
          <pre className="text-[11px] text-zinc-500 overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto">
            {JSON.stringify(args, null, 2)}
          </pre>
          {result && (
            <pre className="text-[11px] text-zinc-600 overflow-x-auto whitespace-pre-wrap max-h-32 overflow-y-auto">
              {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-[90%] rounded-2xl px-4 py-3"
        style={{
          background: isUser ? "rgba(56,189,248,0.12)" : "rgba(255,255,255,0.04)",
          border: `1px solid ${isUser ? "rgba(56,189,248,0.2)" : "rgba(255,255,255,0.06)"}`,
        }}
      >
        <div className="flex items-center gap-1.5 mb-1">
          {isUser ? (
            <User size={12} className="text-sky-400" />
          ) : (
            <Bot size={12} className="text-amber-400" />
          )}
          <span className="text-[10px] font-medium" style={{ color: isUser ? "#38bdf8" : "#f59e0b" }}>
            {isUser ? "You" : "Hermes"}
          </span>
        </div>
        {content && (
          <p className="text-sm text-zinc-300 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)}
                />
              ))
            ) : (
              <CollapsedToolCalls toolCalls={toolCalls} toolResults={toolResults} />
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function CollapsedToolCalls({
  toolCalls,
  toolResults,
}: {
  toolCalls: ToolCall[];
  toolResults: Map<string, { name: string; content: string }>;
}) {
  const [open, setOpen] = useState(false);
  return (
    <div className="mt-2">
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center gap-1.5 text-xs py-1 px-2 rounded-lg active:bg-white/[0.04]"
        style={{ color: "#f59e0b" }}
      >
        <Wrench size={11} />
        <span>{toolCalls.length} tool calls</span>
        {open ? <ChevronDown size={11} /> : <ChevronRight size={11} />}
      </button>
      {open &&
        toolCalls.map((tc) => (
          <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
        ))}
    </div>
  );
}