hermes-os/components/MessageBubble.tsx

"use client";

import { useState } from "react";
import { Wrench, ChevronDown, ChevronRight } from "lucide-react";
import type { Message, ToolCall } from "@/lib/types";

type Verbosity = "compact" | "normal" | "full";

interface Props {
  message: Message;
  toolResults: Map<string, { name: string; content: string }>;
  verbosity?: Verbosity;
}

function ToolCallBlock({ tc, result, showResult }: { tc: ToolCall; result?: { name: string; content: string }; showResult: boolean }) {
  const [open, setOpen] = useState(showResult);
  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>
          {showResult && 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, 1000)}{result.content.length > 1000 ? "..." : ""}
            </pre>
          )}
        </div>
      )}
    </div>
  );
}

export function MessageBubble({ message, toolResults, verbosity = "normal" }: 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;

  // Compact: no tool calls at all
  const showTools = verbosity !== "compact" && toolCalls.length > 0;
  // Full: expand tool calls and show results
  const expandTools = verbosity === "full";

  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">
            {verbosity === "compact" && content.length > 300
              ? content.slice(0, 300) + "..."
              : content}
          </p>
        )}
        {showTools && (
          <div>
            {expandTools ? (
              // Full: show all tool calls expanded with results
              toolCalls.map((tc) => (
                <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={true} />
              ))
            ) : toolCalls.length <= 3 ? (
              // Normal: collapsed tool calls, no results
              toolCalls.map((tc) => (
                <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} showResult={false} />
              ))
            ) : (
              // Normal with many tools: collapsed summary
              <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)} showResult={false} />
      ))}
    </div>
  );
}