tkmind_go/ui/desktop/src/components/ToolCallArguments.tsx

import { useState } from 'react';
import MarkdownContent from './MarkdownContent';
import Expand from './ui/Expand';

export type ToolCallArgumentValue =
  | string
  | number
  | boolean
  | null
  | ToolCallArgumentValue[]
  | { [key: string]: ToolCallArgumentValue };

interface ToolCallArgumentsProps {
  args: Record<string, ToolCallArgumentValue>;
}

export function ToolCallArguments({ args }: ToolCallArgumentsProps) {
  const [expandedKeys, setExpandedKeys] = useState<Record<string, boolean>>({});

  const toggleKey = (key: string) => {
    setExpandedKeys((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  const renderValue = (key: string, value: ToolCallArgumentValue) => {
    if (typeof value === 'string') {
      const needsExpansion = value.length > 60;
      const isExpanded = expandedKeys[key];

      if (!needsExpansion) {
        return (
          <div className="text-xs mb-2">
            <div className="flex flex-row">
              <span className="text-textSubtle min-w-[140px]">{key}</span>
              <span className="text-textPlaceholder">{value}</span>
            </div>
          </div>
        );
      }

      return (
        <div className="text-sm mb-2">
          <div className="flex flex-row items-stretch">
            <button
              onClick={() => toggleKey(key)}
              className="flex text-left text-textSubtle min-w-[140px]"
            >
              <span>{key}</span>
            </button>
            <div className="w-full flex items-stretch">
              {isExpanded ? (
                <div>
                  <MarkdownContent content={value} className="text-sm text-textPlaceholder" />
                </div>
              ) : (
                <button onClick={() => toggleKey(key)} className="text-left text-textPlaceholder">
                  {value.slice(0, 60)}...
                </button>
              )}
              <button
                onClick={() => toggleKey(key)}
                className="flex flex-row items-stretch grow text-textPlaceholder pr-2"
              >
                <div className="min-w-2 grow" />
                <Expand size={5} isExpanded={isExpanded} />
              </button>
            </div>
          </div>
        </div>
      );
    }

    // Handle non-string values (arrays, objects, etc.)
    const content = Array.isArray(value)
      ? value.map((item, index) => `${index + 1}. ${JSON.stringify(item)}`).join('\n')
      : typeof value === 'object' && value !== null
        ? JSON.stringify(value, null, 2)
        : String(value);

    return (
      <div className="mb-2">
        <div className="flex flex-row text-xs">
          <span className="text-textSubtle min-w-[140px]">{key}</span>
          <pre className="whitespace-pre-wrap text-textPlaceholder overflow-x-auto max-w-full">
            {content}
          </pre>
        </div>
      </div>
    );
  };

  return (
    <div className="my-2">
      {Object.entries(args).map(([key, value]) => (
        <div key={key}>{renderValue(key, value)}</div>
      ))}
    </div>
  );
}