claude-code/packages/remote-control-server/web/components/ChatMessage.tsx

import { cn } from "../src/lib/utils";
import { User, Bot, Wrench, Loader2 } from "lucide-react";

export interface ToolCall {
  id: string;
  title: string;
  status: "running" | "complete" | "error";
}

export interface ChatMessageData {
  id: string;
  role: "user" | "agent";
  content: string;
  toolCalls?: ToolCall[];
  isStreaming?: boolean;
}

interface ChatMessageProps {
  message: ChatMessageData;
}

export function ChatMessage({ message }: ChatMessageProps) {
  const isUser = message.role === "user";

  return (
    <div
      className={cn(
        "flex gap-3 p-4 rounded-lg",
        isUser ? "bg-muted/50" : "bg-background"
      )}
    >
      <div
        className={cn(
          "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
          isUser ? "bg-primary text-primary-foreground" : "bg-secondary"
        )}
      >
        {isUser ? <User className="w-4 h-4" /> : <Bot className="w-4 h-4" />}
      </div>
      <div className="flex-1 min-w-0 space-y-2">
        <div className="text-sm font-medium">
          {isUser ? "You" : "Agent"}
        </div>
        <div className="text-sm whitespace-pre-wrap break-words">
          {message.content}
          {message.isStreaming && (
            <span className="inline-block w-1.5 h-4 ml-0.5 bg-foreground animate-pulse" />
          )}
        </div>
        {message.toolCalls && message.toolCalls.length > 0 && (
          <div className="space-y-1.5 pt-2">
            {message.toolCalls.map((tool) => (
              <ToolCallDisplay key={tool.id} toolCall={tool} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

interface ToolCallDisplayProps {
  toolCall: ToolCall;
}

function ToolCallDisplay({ toolCall }: ToolCallDisplayProps) {
  return (
    <div
      className={cn(
        "flex items-center gap-2 text-xs px-2 py-1.5 rounded border",
        toolCall.status === "running" && "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800",
        toolCall.status === "complete" && "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800",
        toolCall.status === "error" && "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800"
      )}
    >
      {toolCall.status === "running" ? (
        <Loader2 className="w-3 h-3 animate-spin text-yellow-600 dark:text-yellow-400" />
      ) : (
        <Wrench className={cn(
          "w-3 h-3",
          toolCall.status === "complete" && "text-green-600 dark:text-green-400",
          toolCall.status === "error" && "text-red-600 dark:text-red-400"
        )} />
      )}
      <span className="truncate">{toolCall.title}</span>
      <span className={cn(
        "ml-auto text-[10px] uppercase font-medium",
        toolCall.status === "running" && "text-yellow-600 dark:text-yellow-400",
        toolCall.status === "complete" && "text-green-600 dark:text-green-400",
        toolCall.status === "error" && "text-red-600 dark:text-red-400"
      )}>
        {toolCall.status}
      </span>
    </div>
  );
}