suna/frontend/src/components/thread/tool-components.tsx

'use client';

import React from 'react';
import { ParsedTag, ToolComponentProps } from '@/lib/types/tool-calls';
import { 
  File, FileText, Terminal, FolderPlus, Folder, Code, Search as SearchIcon, 
  Bell, Replace, Plus, Minus, Globe, Search
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { diffLines } from 'diff';

// Shared compact mode component
const CompactToolDisplay: React.FC<{
  icon: React.ReactNode,
  name: string,
  input: string,
  isRunning?: boolean
}> = ({ icon, name, input, isRunning }) => {
  return (
    <div className="flex items-center gap-2 px-2 py-1 text-xs bg-muted/30 rounded">
      {icon}
      <span className="font-medium">{name}: {input}</span>
      {isRunning && (
        <div className="flex items-center gap-1">
          <span className="text-amber-500">Running</span>
          <div className="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
        </div>
      )}
    </div>
  );
};

/**
 * Create File Tool Component
 */
export const CreateFileTool: React.FC<ToolComponentProps> = ({ tag, mode }) => {
  const filePath = tag.attributes.file_path || '';
  const fileContent = tag.content || '';
  const isRunning = tag.status === 'running';
  
  if (mode === 'compact') {
    return (
      <CompactToolDisplay 
        icon={<FileText className="h-4 w-4 mr-2" />}
        name={isRunning ? "Creating file" : "Created file"}
        input={filePath}
        isRunning={isRunning}
      />
    );
  }

  return (
    <div className="border rounded-lg overflow-hidden border-subtle dark:border-white/10">
      <div className="flex items-center px-2 py-1 text-xs font-medium border-b border-subtle dark:border-white/10 bg-background-secondary dark:bg-background-secondary text-foreground">
        <FileText className="h-4 w-4 mr-2" />
        <div className="flex-1">{isRunning ? "Creating file" : "Created file"}: {filePath}</div>
        {isRunning && (
          <div className="flex items-center gap-2">
            <span className="text-amber-500">Running</span>
            <div className="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
          </div>
        )}
      </div>
      <div className="p-3 bg-card-bg dark:bg-background-secondary text-foreground">
        <div className="space-y-2">
          <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
            <FileText className="h-3 w-3" />
            <span className="font-mono">{filePath}</span>
          </div>
          <pre className="whitespace-pre-wrap bg-muted p-2 rounded-md text-xs overflow-x-auto max-h-60">
            {fileContent}
          </pre>
        </div>
      </div>
    </div>
  );
};

/**
 * Full File Rewrite Tool Component
 */
export const FullFileRewriteTool: React.FC<ToolComponentProps> = ({ tag, mode }) => {
  const filePath = tag.attributes.file_path || '';
  const fileContent = tag.content || '';
  const isRunning = tag.status === 'running';
  
  if (mode === 'compact') {
    return (
      <CompactToolDisplay
        icon={<FileText className="h-4 w-4 mr-2" />}
        name={isRunning ? "Rewriting file" : "Rewrote file"}
        input={filePath}
        isRunning={isRunning}
      />
    );
  }

  return (
    <div className="border rounded-lg overflow-hidden border-subtle dark:border-white/10">
      <div className="flex items-center px-2 py-1 text-xs font-medium border-b border-subtle dark:border-white/10 bg-background-secondary dark:bg-background-secondary text-foreground">
        <FileText className="h-4 w-4 mr-2" />
        <div className="flex-1">{isRunning ? "Rewriting file" : "Rewrote file"}: {filePath}</div>
        {isRunning && (
          <div className="flex items-center gap-2">
            <span className="text-amber-500">Running</span>
            <div className="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
          </div>
        )}
      </div>
      <div className="p-3 bg-card-bg dark:bg-background-secondary text-foreground">
        <div className="space-y-2">
          <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
            <FileText className="h-3 w-3" />
            <span className="font-mono">{filePath}</span>
          </div>
          <pre className="whitespace-pre-wrap bg-muted p-2 rounded-md text-xs overflow-x-auto max-h-60">
            {fileContent}
          </pre>
        </div>
      </div>
    </div>
  );
};

/**
 * Read File Tool Component
 */
export const ReadFileTool: React.FC<ToolComponentProps> = ({ tag, mode }) => {
  const filePath = tag.attributes.file_path || '';
  const fileContent = tag.content || '';
  const isRunning = tag.status === 'running';
  
  if (mode === 'compact') {
    return (
      <CompactToolDisplay
        icon={<File className="h-4 w-4 mr-2" />}
        name={isRunning ? "Reading file" : "Read file"}
        input={filePath}
        isRunning={isRunning}
      />
    );
  }

  return (
    <div className="border rounded-lg overflow-hidden border-subtle dark:border-white/10">
      <div className="flex items-center px-2 py-1 text-xs font-medium border-b border-subtle dark:border-white/10 bg-background-secondary dark:bg-background-secondary text-foreground">
        <File className="h-4 w-4 mr-2" />
        <div className="flex-1">{isRunning ? "Reading file" : "Read file"}: {filePath}</div>
        {isRunning && (
          <div className="flex items-center gap-2">
            <span className="text-amber-500">Running</span>
            <div className="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
          </div>
        )}
      </div>
      <div className="p-3 bg-card-bg dark:bg-background-secondary text-foreground">
        <div className="space-y-2">
          <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
            <File className="h-3 w-3" />
            <span className="font-mono">{filePath}</span>
          </div>
          <pre className="whitespace-pre-wrap bg-muted p-2 rounded-md text-xs overflow-x-auto max-h-60">
            {fileContent}
          </pre>
        </div>
      </div>
    </div>
  );
};

/**
 * Execute Command Tool Component
 */
export const ExecuteCommandTool: React.FC<ToolComponentProps> = ({ tag, mode }) => {
  const output = tag.content || '';
  const command = tag.resultTag?.content || '';
  const isRunning = tag.status === 'running';

  if (mode === 'compact') {
    return (
      <CompactToolDisplay
        icon={<Terminal className="h-4 w-4 mr-2" />}
        name={isRunning ? "Executing" : "Executed"}
        input={tag.content}  // in compact mode, the command is in the content
        isRunning={isRunning}
      />
    );
  }

  return (
    <div className="border rounded-lg overflow-hidden border-subtle dark:border-white/10">
      <div className="flex items-center px-2 py-1 text-xs font-medium border-b border-subtle dark:border-white/10 bg-background-secondary dark:bg-background-secondary text-foreground">
        <Terminal className="h-4 w-4 mr-2" />
        <div className="flex-1">{isRunning ? `Executing: ${command}` : `Executed: ${command}`}</div>
        {isRunning && (
          <div className="flex items-center gap-2">
            <span className="text-amber-500">Running</span>
            <div className="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
          </div>
        )}
      </div>
      <div className="p-3 bg-card-bg dark:bg-background-secondary text-foreground">
        <div className="font-mono text-xs bg-black text-green-400 p-3 rounded-md">
          <div className="flex items-center gap-2 mb-2 text-white/80">
            <div className="w-3 h-3 rounded-full bg-red-500" />
            <div className="w-3 h-3 rounded-full bg-yellow-500" />
            <div className="w-3 h-3 rounded-full bg-green-500" />
            <div className="flex-1 text-center text-xs">Terminal</div>
          </div>

          <div className="space-y-1">
            <div className="flex items-start gap-2">
              <span className="text-blue-400">user@localhost</span>
              <span className="text-white/60">:</span>
              <span className="text-purple-400">~</span>
              <span className="text-white/60">$</span>
              <span>{command}</span>
            </div>
            
            {output && (
              <pre className="whitespace-pre-wrap pl-4 text-white/90">{output}</pre>
            )}

            {!isRunning && (
              <div className="flex items-start gap-2">
                <span className="text-blue-400">user@localhost</span>
                <span className="text-white/60">:</span>
                <span className="text-purple-400">~</span>
                <span className="text-white/60">$</span>
                <span className="animate-pulse">█</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

/**
 * String Replace Tool Component
 */
export const StringReplaceTool: React.FC<ToolComponentProps> = ({ tag, mode }) => {
  const content = tag.content || '';
  const isRunning = tag.status === 'running';
  
  // Parse the old and new strings from the content
  const oldStrMatch = content.match(/<old_str>([\s\S]*?)<\/old_str>/);
  const newStrMatch = content.match(/<new_str>([\s\S]*?)<\/new_str>/);
  
  const oldStr = oldStrMatch ? oldStrMatch[1] : '';
  const newStr = newStrMatch ? newStrMatch[1] : '';
  
  // Calculate the diff between old and new strings
  const diff = diffLines(oldStr, newStr);
  
  interface DiffPart {
    added?: boolean;
    removed?: boolean;
    value: string;
  }

  if (mode === 'compact') {
    return (
      <CompactToolDisplay
        icon={<Replace className="h-4 w-4 mr-2" />}
        name={isRunning ? "Updating file" : "Updated file"}
        input=""
        isRunning={isRunning}
      />
    );
  }
  
  return (
    <div className="border rounded-lg overflow-hidden border-subtle dark:border-white/10">
      <div className="flex items-center px-2 py-1 text-xs font-medium border-b border-subtle dark:border-white/10 bg-background-secondary dark:bg-background-secondary text-foreground">
        <Replace className="h-4 w-4 mr-2" />
        <div className="flex-1">{isRunning ? "Updating file" : "Updated file"}</div>
        {isRunning && (
          <div className="flex items-center gap-2">
            <span className="text-amber-500">Running</span>
            <div className="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
          </div>
        )}
      </div>
      <div className="p-3 bg-card-bg dark:bg-background-secondary text-foreground">
        <div className="space-y-2">
          <div className="border border-subtle dark:border-white/10 rounded-md overflow-hidden font-mono text-xs">
            {diff.map((part: DiffPart, index: number) => (
              <div 
                key={index}
                className={cn(
                  "px-2 py-0.5 flex items-start",
                  part.added ? "bg-green-500/10 text-green-700 dark:text-green-400" : 
                  part.removed ? "bg-red-500/10 text-red-700 dark:text-red-400" : 
                  "text-foreground"
                )}
              >
                <span className="mr-2">
                  {part.added ? <Plus className="h-3 w-3" /> : 
                   part.removed ? <Minus className="h-3 w-3" /> : 
                   <span className="w-3" />}
                </span>
                <pre className="whitespace-pre-wrap flex-1">{part.value}</pre>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

/**
 * Notification Tool Component
 */
export const NotifyTool: React.FC<ToolComponentProps> = ({ tag, mode }) => {
  const message = tag.attributes.message || '';
  const type = tag.attributes.type || 'info';
  const isRunning = tag.status === 'running';
  
  if (mode === 'compact') {
    return (
      <CompactToolDisplay
        icon={<Bell className="h-4 w-4 mr-2" />}
        name={isRunning ? "Sending notification" : "Sent notification"}
        input={message.substring(0, 30) + (message.length > 30 ? '...' : '')}
        isRunning={isRunning}
      />
    );
  }

  return (
    <div className="border rounded-lg overflow-hidden border-subtle dark:border-white/10">
      <div className="flex items-center px-2 py-1 text-xs font-medium border-b border-subtle dark:border-white/10 bg-background-secondary dark:bg-background-secondary text-foreground">
        <Bell className="h-4 w-4 mr-2" />
        <div className="flex-1">{isRunning ? "Sending notification" : "Sent notification"}: {message.substring(0, 30)}{message.length > 30 ? '...' : ''}</div>
        {isRunning && (
          <div className="flex items-center gap-2">
            <span className="text-amber-500">Running</span>
            <div className="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
          </div>
        )}
      </div>
      <div className="p-3 bg-card-bg dark:bg-background-secondary text-foreground">
        <div className={cn(
          "p-2 rounded-md",
          type === 'error' ? 'bg-red-500/10 text-red-600 dark:text-red-400' :
          type === 'warning' ? 'bg-amber-500/10 text-amber-600 dark:text-amber-400' :
          type === 'success' ? 'bg-green-500/10 text-green-600 dark:text-green-400' :
          'bg-blue-500/10 text-blue-600 dark:text-blue-400'
        )}>
          {message}
        </div>
      </div>
    </div>
  );
};

/**
 * Directory Tool Component (for create-directory and list-directory)
 */
export const DirectoryTool: React.FC<ToolComponentProps> = ({ tag, mode }) => {
  const path = tag.attributes.path || '';
  const content = tag.content || '';
  const isListDirectory = tag.tagName === 'list-directory';
  const isRunning = tag.status === 'running';
  
  if (mode === 'compact') {
    return (
      <CompactToolDisplay
        icon={isListDirectory ? <Folder className="h-4 w-4 mr-2" /> : <FolderPlus className="h-4 w-4 mr-2" />}
        name={isListDirectory ? 
          (isRunning ? "Listing directory" : "Listed directory") : 
          (isRunning ? "Creating directory" : "Created directory")}
        input={path}
        isRunning={isRunning}
      />
    );
  }

  return (
    <div className="border rounded-lg overflow-hidden border-subtle dark:border-white/10">
      <div className="flex items-center px-2 py-1 text-xs font-medium border-b border-subtle dark:border-white/10 bg-background-secondary dark:bg-background-secondary text-foreground">
        {isListDirectory ? <Folder className="h-4 w-4 mr-2" /> : <FolderPlus className="h-4 w-4 mr-2" />}
        <div className="flex-1">
          {isListDirectory ? 
            (isRunning ? `Listing directory: ${path}` : `Listed directory: ${path}`) : 
            (isRunning ? `Creating directory: ${path}` : `Created directory: ${path}`)}
        </div>
        {isRunning && (
          <div className="flex items-center gap-2">
            <span className="text-amber-500">Running</span>
            <div className="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
          </div>
        )}
      </div>
      <div className="p-3 bg-card-bg dark:bg-background-secondary text-foreground">
        <div className="space-y-2">
          <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
            <Folder className="h-3 w-3" />
            <span className="font-mono">{path}</span>
          </div>
          {isListDirectory && content && (
            <pre className="whitespace-pre-wrap bg-muted p-2 rounded-md text-xs overflow-x-auto max-h-60">
              {content}
            </pre>
          )}
        </div>
      </div>
    </div>
  );
};

/**
 * Search Code Tool Component
 */
export const SearchCodeTool: React.FC<ToolComponentProps> = ({ tag, mode }) => {
  const query = tag.attributes.query || '';
  const content = tag.content || '';
  const isRunning = tag.status === 'running';
  
  if (mode === 'compact') {
    return (
      <CompactToolDisplay
        icon={<SearchIcon className="h-4 w-4 mr-2" />}
        name={isRunning ? "Searching code" : "Searched code"}
        input={query}
        isRunning={isRunning}
      />
    );
  }

  return (
    <div className="border rounded-lg overflow-hidden border-subtle dark:border-white/10">
      <div className="flex items-center px-2 py-1 text-xs font-medium border-b border-subtle dark:border-white/10 bg-background-secondary dark:bg-background-secondary text-foreground">
        <SearchIcon className="h-4 w-4 mr-2" />
        <div className="flex-1">{isRunning ? "Searching code" : "Searched code"}: {query}</div>
        {isRunning && (
          <div className="flex items-center gap-2">
            <span className="text-amber-500">Running</span>
            <div className="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
          </div>
        )}
      </div>
      <div className="p-3 bg-card-bg dark:bg-background-secondary text-foreground">
        <div className="space-y-2">
          <div className="flex items-center gap-1 text-xs bg-primary/10 p-1 rounded">
            <SearchIcon className="h-3 w-3" />
            <span className="font-mono">{query}</span>
          </div>
          <pre className="whitespace-pre-wrap bg-muted p-2 rounded-md text-xs overflow-x-auto max-h-60">
            {content}
          </pre>
        </div>
      </div>
    </div>
  );
};

/**
 * Browser Navigate Tool Component
 */
export const BrowserNavigateTool: React.FC<ToolComponentProps> = ({ tag, mode }) => {
  const url = tag.content || '';
  const isRunning = tag.status === 'running';
  
  if (mode === 'compact') {
    return (
      <CompactToolDisplay
        icon={<Globe className="h-4 w-4 mr-2" />}
        name={isRunning ? "Navigating to" : "Navigated to"}
        input={url}
        isRunning={isRunning}
      />
    );
  }

  return (
    <div className="border rounded-lg overflow-hidden border-subtle dark:border-white/10">
      <div className="flex items-center px-2 py-1 text-xs font-medium border-b border-subtle dark:border-white/10 bg-background-secondary dark:bg-background-secondary text-foreground">
        <Globe className="h-4 w-4 mr-2" />
        <div className="flex-1">{isRunning ? `Navigating to` : `Navigated to`}: {url}</div>
        {isRunning && (
          <div className="flex items-center gap-2">
            <span className="text-amber-500">Running</span>
            <div className="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
          </div>
        )}
      </div>
      <div className="p-3 bg-card-bg dark:bg-background-secondary text-foreground">
        <div className="space-y-2">
          <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
            <Globe className="h-3 w-3" />
            <span className="font-mono">{url}</span>
          </div>
          
          {/* Display VNC preview if available */}
          {tag.vncPreview && (
            <div className="mt-2 border border-subtle dark:border-white/10 rounded-md overflow-hidden">
              <div className="text-xs bg-black text-white p-1">VNC Preview</div>
              <div className="relative w-full h-[300px] overflow-hidden">
                <iframe 
                  src={tag.vncPreview} 
                  title="Browser preview" 
                  className="absolute top-0 left-0 border-0"
                  style={{
                    width: '200%',
                    height: '200%',
                    transform: 'scale(0.5)',
                    transformOrigin: '0 0'
                  }}
                  sandbox="allow-same-origin allow-scripts"
                />
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

/**
 * Web Search Tool Component
 */
export const WebSearchTool: React.FC<ToolComponentProps> = ({ tag, mode }) => {
  const query = tag.attributes.query || '';
  const isRunning = tag.status === 'running';
  
  if (mode === 'compact') {
    return (
      <CompactToolDisplay
        icon={<Search className="h-4 w-4 mr-2" />}
        name={isRunning ? "Web search in progress..." : "Web search complete"}
        input={query}
        isRunning={isRunning}
      />
    );
  }

  const results = tag.result?.output ? JSON.parse(tag.result.output) : [];

  return (
    <div className="border rounded-lg overflow-hidden border-subtle dark:border-white/10">
      <div className="flex items-center px-2 py-1 text-xs font-medium border-b border-subtle dark:border-white/10 bg-background-secondary dark:bg-background-secondary text-foreground">
        <Search className="h-4 w-4 mr-2" />
        <div className="flex-1">Web Search: {query}</div>
        {isRunning && (
          <div className="flex items-center gap-2">
            <span className="text-amber-500">Searching</span>
            <div className="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
          </div>
        )}
      </div>
      <div className="p-3 bg-card-bg dark:bg-background-secondary text-foreground">
        {results.length > 0 ? (
          <div className="space-y-3">
            {results.map((result: any, index: number) => (
              <div key={index} className="text-sm">
                <a href={result.URL} target="_blank" rel="noopener noreferrer" className="font-medium text-blue-600 hover:underline">
                  {result.Title}
                </a>
                <div className="text-xs text-muted-foreground mt-1">
                  {result.URL}
                  {result['Published Date'] && (
                    <span className="ml-2">
                      ({new Date(result['Published Date']).toLocaleDateString()})
                    </span>
                  )}
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-sm text-muted-foreground">No results found</div>
        )}
      </div>
    </div>
  );
};

// Tool component registry
export const ToolComponentRegistry: Record<string, React.FC<ToolComponentProps>> = {
  'create-file': CreateFileTool,
  'read-file': ReadFileTool,
  'execute-command': ExecuteCommandTool,
  'str-replace': StringReplaceTool,
  'create-directory': DirectoryTool,
  'list-directory': DirectoryTool,
  'search-code': SearchCodeTool,
  'notify': NotifyTool,
  'ask': NotifyTool,  // Handle ask similar to notify for now
  'complete': NotifyTool, // Handle complete similar to notify for now
  'full-file-rewrite': FullFileRewriteTool,
  'browser-navigate-to': BrowserNavigateTool,
  'browser-click-element': BrowserNavigateTool,
  'browser-input-text': BrowserNavigateTool,
  'browser-go-back': BrowserNavigateTool,
  'browser-wait': BrowserNavigateTool,
  'browser-scroll-down': BrowserNavigateTool,
  'browser-scroll-up': BrowserNavigateTool,
  'browser-scroll-to-text': BrowserNavigateTool,
  'browser-switch-tab': BrowserNavigateTool,
  'browser-close-tab': BrowserNavigateTool,
  'browser-get-dropdown-options': BrowserNavigateTool,
  'browser-select-dropdown-option': BrowserNavigateTool,
  'browser-drag-drop': BrowserNavigateTool,
  'web-search': WebSearchTool,
};

// Helper function to get the appropriate component for a tag
export function getComponentForTag(tag: ParsedTag): React.FC<ToolComponentProps> {
  console.log("getComponentForTag", tag);
  if (!tag || !tag?.tagName) {
    console.warn(`No tag name for tag: ${tag}`);
  }
  if (!ToolComponentRegistry[tag.tagName]) {
    console.warn(`No component registered for tag type: ${tag.tagName}`);
  }
  return ToolComponentRegistry[tag.tagName] || 
    // Fallback component for unknown tag types
    (({tag, mode}) => {
      console.log(`Rendering fallback component for tag: ${tag.tagName}`, tag);
      const isRunning = tag.status === 'running';
      
      if (mode === 'compact') {
        return (
          <CompactToolDisplay
            icon={<Code className="h-4 w-4 mr-2" />}
            name={isRunning ? `${tag.tagName} operation running` : `${tag.tagName} operation complete`}
            input=""
            isRunning={isRunning}
          />
        );
      }

      return (
        <div className="border rounded-lg overflow-hidden border-subtle dark:border-white/10">
          <div className="flex items-center px-2 py-1 text-xs font-medium border-b border-subtle dark:border-white/10 bg-background-secondary dark:bg-background-secondary text-foreground">
            <Code className="h-4 w-4 mr-2" />
            <div className="flex-1">{isRunning ? `${tag.tagName} operation running` : `${tag.tagName} operation complete`}</div>
            {isRunning && (
              <div className="flex items-center gap-2">
                <span className="text-amber-500">Running</span>
                <div className="h-2 w-2 rounded-full bg-amber-500 animate-pulse"></div>
              </div>
            )}
          </div>
          <div className="p-3 bg-card-bg dark:bg-background-secondary text-foreground">
            <pre className="whitespace-pre-wrap bg-muted p-2 rounded-md text-xs">{tag.content || ''}</pre>
          </div>
        </div>
      );
    });
}