PicoBot/web/src/components/Panel/ToolPanel.tsx

import {
  ChevronDown,
  ChevronRight,
  Play,
  Check,
  AlertTriangle,
  Terminal,
  Maximize2,
} from 'lucide-react';
import { useState, useMemo } from 'react';
import type { ChatMessage } from '../../types/protocol';
import { ToolDetailModal } from '../Chat/ToolDetailModal';

interface ToolPanelProps {
  messages: ChatMessage[];
}

interface ToolCallItem {
  toolCallId: string;
  toolName: string;
  status: 'calling' | 'result' | 'pending';
  arguments?: unknown;
  resultContent: string;
  callContent: string;
  durationMs?: number;
}

function formatDuration(ms: number): string {
  if (ms < 1000) {
    return `${ms}ms`;
  }
  if (ms < 60000) {
    return `${(ms / 1000).toFixed(1)}s`;
  }
  const minutes = Math.floor(ms / 60000);
  const seconds = Math.floor((ms % 60000) / 1000);
  return `${minutes}m ${seconds}s`;
}

function formatResultText(content: string): string {
  if (!content) return '';
  try {
    const parsed = JSON.parse(content);
    return JSON.stringify(parsed, null, 2);
  } catch {
    return content;
  }
}

function mergeToolMessages(messages: ChatMessage[]): ToolCallItem[] {
  const map = new Map<string, ToolCallItem>();

  for (const m of messages) {
    if (m.role !== 'tool' || !m.type?.startsWith('tool_')) continue;

    const key = m.toolCallId || m.id;
    let entry = map.get(key);

    if (!entry) {
      entry = {
        toolCallId: key,
        toolName: m.toolName || 'Unknown',
        status: 'calling',
        arguments: undefined,
        resultContent: '',
        callContent: '',
      };
      map.set(key, entry);
    }

    if (m.type === 'tool_call') {
      entry.arguments = m.arguments;
      entry.callContent = m.content;
    } else if (m.type === 'tool_result') {
      entry.status = 'result';
      entry.resultContent = m.content;
      entry.durationMs = m.durationMs;
    } else if (m.type === 'tool_pending') {
      entry.status = 'pending';
      entry.resultContent = m.content;
    }
  }

  return Array.from(map.values());
}

export function ToolPanel({ messages }: ToolPanelProps) {
  const [expandedTools, setExpandedTools] = useState<Set<string>>(new Set());
  const [detailModalTool, setDetailModalTool] = useState<ToolCallItem | null>(null);

  const toolCalls = useMemo(() => mergeToolMessages(messages), [messages]);

  const toggleExpand = (id: string) => {
    setExpandedTools((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  };

  const getStatusConfig = (status: ToolCallItem['status']) => {
    switch (status) {
      case 'calling':
        return {
          icon: Play,
          iconColor: 'text-amber-400',
          bgClass: 'bg-amber-400',
          borderClass: 'border-amber-500/30',
          label: '执行中',
          labelClass: 'text-amber-400',
        };
      case 'result':
        return {
          icon: Check,
          iconColor: 'text-emerald-400',
          bgClass: 'bg-emerald-400',
          borderClass: 'border-emerald-500/30',
          label: '已完成',
          labelClass: 'text-emerald-400',
        };
      case 'pending':
        return {
          icon: AlertTriangle,
          iconColor: 'text-orange-400',
          bgClass: 'bg-orange-400',
          borderClass: 'border-orange-500/30',
          label: '待确认',
          labelClass: 'text-orange-400',
        };
    }
  };

  if (toolCalls.length === 0) {
    return (
      <div className="flex h-full flex-col">
        <style>{animStyles}</style>
        <div className="border-b border-[var(--border-color)] p-4 font-semibold text-[var(--text-primary)] flex items-center gap-2">
          <Terminal className="h-4 w-4 text-[var(--accent-cyan)]" />
          工具调用
        </div>
        <div className="flex flex-1 items-center justify-center p-4 text-sm text-[var(--text-muted)]">
          <div className="text-center">
            <Terminal className="h-10 w-10 mx-auto mb-3 opacity-30" />
            暂无工具调用
          </div>
        </div>
      </div>
    );
  }

  return (
    <>
      <div className="flex h-full flex-col">
        <style>{animStyles}</style>
        <div className="border-b border-[var(--border-color)] p-4 font-semibold text-[var(--text-primary)] flex items-center gap-2">
          <Terminal className="h-4 w-4 text-[var(--accent-cyan)]" />
          工具调用
          <span className="ml-auto text-xs px-2 py-0.5 rounded-full bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]">
            {toolCalls.length}
          </span>
        </div>
        <div className="flex-1 overflow-y-auto p-3">
          <div className="space-y-2">
            {toolCalls.map((tool) => {
              const config = getStatusConfig(tool.status);
              const StatusIcon = config.icon;
              const isExpanded = expandedTools.has(tool.toolCallId);
              const hasResult = tool.resultContent.length > 0;
              const displayContent = tool.resultContent || tool.callContent;
              const formattedContent = formatResultText(displayContent);
              const previewLines = displayContent.split('\n').slice(0, 2).join('\n');
              const hasMore = displayContent.split('\n').length > 2 || displayContent.length > 200;

              return (
                <div
                  key={tool.toolCallId}
                  className={`rounded-xl border bg-[var(--bg-tertiary)]/50 text-sm overflow-hidden tool-card transition-colors duration-500 ${config.borderClass}`}
                >
                  <button
                    onClick={() => toggleExpand(tool.toolCallId)}
                    className="flex w-full items-center justify-between px-3 py-2.5 hover:bg-[var(--overlay-hover)] transition-colors"
                  >
                    <div className="flex items-center gap-2 min-w-0">
                      <span
                        className={`tool-status-icon ${tool.status === 'calling' && !hasResult ? 'animate-pulse' : ''}`}
                      >
                        <StatusIcon
                          className={`h-3.5 w-3.5 transition-colors duration-500 ${config.iconColor}`}
                        />
                      </span>
                      <span className="font-medium text-[var(--text-secondary)] truncate">
                        {tool.toolName}
                      </span>
                      <span
                        className={`text-xs flex-shrink-0 transition-colors duration-500 ${config.labelClass}`}
                      >
                        {config.label}
                      </span>
                      {tool.status === 'result' && tool.durationMs != null && (
                        <span className="text-xs text-[var(--text-muted)] flex-shrink-0 tabular-nums ml-1">
                          ⏱️ {formatDuration(tool.durationMs)}
                        </span>
                      )}
                    </div>
                    <div className="flex items-center gap-1 ml-2 flex-shrink-0">
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          setDetailModalTool(tool);
                        }}
                        className="p-0.5 rounded hover:bg-[var(--overlay-subtle)] transition-colors"
                        title="放大查看"
                      >
                        <Maximize2 className="h-3.5 w-3.5 text-[var(--text-muted)]" />
                      </button>
                      {isExpanded ? (
                        <ChevronDown className="h-4 w-4 text-[var(--text-muted)]" />
                      ) : (
                        <ChevronRight className="h-4 w-4 text-[var(--text-muted)]" />
                      )}
                    </div>
                  </button>

                  {/* 结果预览区 — 始终可见 */}
                  {hasResult && (
                    <div className="px-3 pb-2">
                      <div
                        className={`rounded-lg bg-[var(--overlay-dim-strong)] px-2.5 py-2 text-xs text-[var(--text-secondary)] font-mono cursor-pointer hover:bg-[var(--overlay-dim-heavy)] transition-colors ${
                          isExpanded ? '' : 'line-clamp-2'
                        }`}
                        onClick={() => toggleExpand(tool.toolCallId)}
                      >
                        {isExpanded ? (
                          <pre className="whitespace-pre-wrap break-all m-0">
                            {formattedContent}
                          </pre>
                        ) : (
                          <span className="whitespace-pre-wrap break-all">{previewLines}</span>
                        )}
                      </div>
                      {!isExpanded && hasMore && (
                        <div className="text-xs text-[var(--text-muted)] mt-1 px-1">
                          点击展开全部 ({displayContent.split('\n').length} 行)
                        </div>
                      )}
                    </div>
                  )}

                  {/* 展开区域：参数 */}
                  {isExpanded && tool.arguments ? (
                    <div className="border-t border-[var(--border-color)] px-3 py-2 bg-[var(--overlay-dim)]">
                      <div className="text-xs font-medium text-[var(--text-muted)] mb-1">参数:</div>
                      <pre className="rounded-lg bg-[var(--overlay-dim-heavy)] p-2 text-xs overflow-x-auto text-[var(--text-secondary)] font-mono whitespace-pre-wrap break-all">
                        {JSON.stringify(tool.arguments, null, 2)}
                      </pre>
                    </div>
                  ) : null}
                </div>
              );
            })}
          </div>
        </div>
      </div>
      {detailModalTool && (
        <ToolDetailModal
          toolName={detailModalTool.toolName}
          status={detailModalTool.status}
          statusLabel={
            detailModalTool.status === 'calling'
              ? '执行中'
              : detailModalTool.status === 'result'
                ? '已完成'
                : detailModalTool.status === 'pending'
                  ? '待确认'
                  : detailModalTool.status
          }
          arguments={detailModalTool.arguments}
          resultContent={detailModalTool.resultContent}
          callContent={detailModalTool.callContent}
          durationMs={detailModalTool.durationMs}
          onClose={() => setDetailModalTool(null)}
        />
      )}
    </>
  );
}

const animStyles = `
@keyframes tool-result-in {
  from { max-height: 0; opacity: 0; }
  to { max-height: 80px; opacity: 1; }
}

.tool-card {
  transition: border-color 0.5s ease;
}

.tool-status-icon {
  transition: transform 0.3s ease;
}

.tool-result-enter {
  animation: tool-result-in 0.4s ease-out;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
`;