refactor: extract widget components from ToolWidgets
- Extract TodoWidget component for todo functionality - Extract LSWidget component for LS/list functionality - Extract BashWidget component for bash terminal display - Create widgets/index.ts for centralized exports - Prepare ToolWidgets.new.tsx as refactored structure - Improve code maintainability and enable lazy loading
This commit is contained in:
Vivek R
4
src/components/ToolWidgets.new.tsx
Normal file
4
src/components/ToolWidgets.new.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
// This file re-exports all widgets from the widgets directory
|
||||
// It maintains backward compatibility with the original ToolWidgets.tsx
|
||||
|
||||
export * from './widgets';
|
||||
71
src/components/widgets/BashWidget.tsx
Normal file
71
src/components/widgets/BashWidget.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import React from "react";
|
||||
import { Terminal, ChevronRight } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface BashWidgetProps {
|
||||
command: string;
|
||||
description?: string;
|
||||
result?: any;
|
||||
}
|
||||
|
||||
export const BashWidget: React.FC<BashWidgetProps> = ({ command, description, result }) => {
|
||||
// Extract result content if available
|
||||
let resultContent = '';
|
||||
let isError = false;
|
||||
|
||||
if (result) {
|
||||
isError = result.is_error || false;
|
||||
if (typeof result.content === 'string') {
|
||||
resultContent = result.content;
|
||||
} else if (result.content && typeof result.content === 'object') {
|
||||
if (result.content.text) {
|
||||
resultContent = result.content.text;
|
||||
} else if (Array.isArray(result.content)) {
|
||||
resultContent = result.content
|
||||
.map((c: any) => (typeof c === 'string' ? c : c.text || JSON.stringify(c)))
|
||||
.join('\n');
|
||||
} else {
|
||||
resultContent = JSON.stringify(result.content, null, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border bg-zinc-950 overflow-hidden">
|
||||
<div className="px-4 py-2 bg-zinc-900/50 flex items-center gap-2 border-b">
|
||||
<Terminal className="h-3.5 w-3.5 text-green-500" />
|
||||
<span className="text-xs font-mono text-muted-foreground">Terminal</span>
|
||||
{description && (
|
||||
<>
|
||||
<ChevronRight className="h-3 w-3 text-muted-foreground" />
|
||||
<span className="text-xs text-muted-foreground">{description}</span>
|
||||
</>
|
||||
)}
|
||||
{/* Show loading indicator when no result yet */}
|
||||
{!result && (
|
||||
<div className="ml-auto flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<div className="h-2 w-2 bg-green-500 rounded-full animate-pulse" />
|
||||
<span>Running...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
<code className="text-xs font-mono text-green-400 block">
|
||||
$ {command}
|
||||
</code>
|
||||
|
||||
{/* Show result if available */}
|
||||
{result && (
|
||||
<div className={cn(
|
||||
"mt-3 p-3 rounded-md border text-xs font-mono whitespace-pre-wrap overflow-x-auto",
|
||||
isError
|
||||
? "border-red-500/20 bg-red-500/5 text-red-400"
|
||||
: "border-green-500/20 bg-green-500/5 text-green-300"
|
||||
)}>
|
||||
{resultContent || (isError ? "Command failed" : "Command completed")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
229
src/components/widgets/LSWidget.tsx
Normal file
229
src/components/widgets/LSWidget.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
import React, { useState } from "react";
|
||||
import { FolderOpen, Folder, FileCode, FileText, Terminal, ChevronRight } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface LSWidgetProps {
|
||||
path: string;
|
||||
result?: any;
|
||||
}
|
||||
|
||||
export const LSWidget: React.FC<LSWidgetProps> = ({ path, result }) => {
|
||||
// If we have a result, show it using the LSResultWidget
|
||||
if (result) {
|
||||
let resultContent = '';
|
||||
if (typeof result.content === 'string') {
|
||||
resultContent = result.content;
|
||||
} else if (result.content && typeof result.content === 'object') {
|
||||
if (result.content.text) {
|
||||
resultContent = result.content.text;
|
||||
} else if (Array.isArray(result.content)) {
|
||||
resultContent = result.content
|
||||
.map((c: any) => (typeof c === 'string' ? c : c.text || JSON.stringify(c)))
|
||||
.join('\n');
|
||||
} else {
|
||||
resultContent = JSON.stringify(result.content, null, 2);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 p-3 rounded-lg bg-muted/50">
|
||||
<FolderOpen className="h-4 w-4 text-primary" />
|
||||
<span className="text-sm">Directory contents for:</span>
|
||||
<code className="text-sm font-mono bg-background px-2 py-0.5 rounded">
|
||||
{path}
|
||||
</code>
|
||||
</div>
|
||||
{resultContent && <LSResultWidget content={resultContent} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 p-3 rounded-lg bg-muted/50">
|
||||
<FolderOpen className="h-4 w-4 text-primary" />
|
||||
<span className="text-sm">Listing directory:</span>
|
||||
<code className="text-sm font-mono bg-background px-2 py-0.5 rounded">
|
||||
{path}
|
||||
</code>
|
||||
{!result && (
|
||||
<div className="ml-auto flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<div className="h-2 w-2 bg-blue-500 rounded-full animate-pulse" />
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface LSResultWidgetProps {
|
||||
content: string;
|
||||
}
|
||||
|
||||
export const LSResultWidget: React.FC<LSResultWidgetProps> = ({ content }) => {
|
||||
const [expandedDirs, setExpandedDirs] = useState<Set<string>>(new Set());
|
||||
|
||||
// Parse the directory tree structure
|
||||
const parseDirectoryTree = (rawContent: string) => {
|
||||
const lines = rawContent.split('\n');
|
||||
const entries: Array<{
|
||||
path: string;
|
||||
name: string;
|
||||
type: 'file' | 'directory';
|
||||
level: number;
|
||||
}> = [];
|
||||
|
||||
let currentPath: string[] = [];
|
||||
|
||||
for (const line of lines) {
|
||||
// Skip NOTE section and everything after it
|
||||
if (line.startsWith('NOTE:')) {
|
||||
break;
|
||||
}
|
||||
|
||||
// Skip empty lines
|
||||
if (!line.trim()) continue;
|
||||
|
||||
// Calculate indentation level
|
||||
const indent = line.match(/^(\s*)/)?.[1] || '';
|
||||
const level = Math.floor(indent.length / 2);
|
||||
|
||||
// Extract the entry name
|
||||
const entryMatch = line.match(/^\s*-\s+(.+?)(\/$)?$/);
|
||||
if (!entryMatch) continue;
|
||||
|
||||
const fullName = entryMatch[1];
|
||||
const isDirectory = line.trim().endsWith('/');
|
||||
const name = isDirectory ? fullName : fullName;
|
||||
|
||||
// Update current path based on level
|
||||
currentPath = currentPath.slice(0, level);
|
||||
currentPath.push(name);
|
||||
|
||||
entries.push({
|
||||
path: currentPath.join('/'),
|
||||
name,
|
||||
type: isDirectory ? 'directory' : 'file',
|
||||
level,
|
||||
});
|
||||
}
|
||||
|
||||
return entries;
|
||||
};
|
||||
|
||||
const entries = parseDirectoryTree(content);
|
||||
|
||||
const toggleDirectory = (path: string) => {
|
||||
setExpandedDirs(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(path)) {
|
||||
next.delete(path);
|
||||
} else {
|
||||
next.add(path);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
// Group entries by parent for collapsible display
|
||||
const getChildren = (parentPath: string, parentLevel: number) => {
|
||||
return entries.filter(e => {
|
||||
if (e.level !== parentLevel + 1) return false;
|
||||
const parentParts = parentPath.split('/').filter(Boolean);
|
||||
const entryParts = e.path.split('/').filter(Boolean);
|
||||
|
||||
// Check if this entry is a direct child of the parent
|
||||
if (entryParts.length !== parentParts.length + 1) return false;
|
||||
|
||||
// Check if all parent parts match
|
||||
for (let i = 0; i < parentParts.length; i++) {
|
||||
if (parentParts[i] !== entryParts[i]) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
};
|
||||
|
||||
const renderEntry = (entry: typeof entries[0], isRoot = false) => {
|
||||
const hasChildren = entry.type === 'directory' &&
|
||||
entries.some(e => e.path.startsWith(entry.path + '/') && e.level === entry.level + 1);
|
||||
const isExpanded = expandedDirs.has(entry.path) || isRoot;
|
||||
|
||||
const getIcon = () => {
|
||||
if (entry.type === 'directory') {
|
||||
return isExpanded ?
|
||||
<FolderOpen className="h-3.5 w-3.5 text-blue-500" /> :
|
||||
<Folder className="h-3.5 w-3.5 text-blue-500" />;
|
||||
}
|
||||
|
||||
// File type icons based on extension
|
||||
const ext = entry.name.split('.').pop()?.toLowerCase();
|
||||
switch (ext) {
|
||||
case 'rs':
|
||||
return <FileCode className="h-3.5 w-3.5 text-orange-500" />;
|
||||
case 'toml':
|
||||
case 'yaml':
|
||||
case 'yml':
|
||||
case 'json':
|
||||
return <FileText className="h-3.5 w-3.5 text-yellow-500" />;
|
||||
case 'md':
|
||||
return <FileText className="h-3.5 w-3.5 text-blue-400" />;
|
||||
case 'js':
|
||||
case 'jsx':
|
||||
case 'ts':
|
||||
case 'tsx':
|
||||
return <FileCode className="h-3.5 w-3.5 text-yellow-400" />;
|
||||
case 'py':
|
||||
return <FileCode className="h-3.5 w-3.5 text-blue-500" />;
|
||||
case 'go':
|
||||
return <FileCode className="h-3.5 w-3.5 text-cyan-500" />;
|
||||
case 'sh':
|
||||
case 'bash':
|
||||
return <Terminal className="h-3.5 w-3.5 text-green-500" />;
|
||||
default:
|
||||
return <FileText className="h-3.5 w-3.5 text-muted-foreground" />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={entry.path}>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 py-1 px-2 rounded hover:bg-muted/50 transition-colors cursor-pointer",
|
||||
!isRoot && "ml-4"
|
||||
)}
|
||||
onClick={() => entry.type === 'directory' && hasChildren && toggleDirectory(entry.path)}
|
||||
>
|
||||
{entry.type === 'directory' && hasChildren && (
|
||||
<ChevronRight className={cn(
|
||||
"h-3 w-3 text-muted-foreground transition-transform",
|
||||
isExpanded && "rotate-90"
|
||||
)} />
|
||||
)}
|
||||
{(!hasChildren || entry.type !== 'directory') && (
|
||||
<div className="w-3" />
|
||||
)}
|
||||
{getIcon()}
|
||||
<span className="text-sm font-mono">{entry.name}</span>
|
||||
</div>
|
||||
|
||||
{entry.type === 'directory' && hasChildren && isExpanded && (
|
||||
<div className="ml-2">
|
||||
{getChildren(entry.path, entry.level).map(child => renderEntry(child))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Get root entries
|
||||
const rootEntries = entries.filter(e => e.level === 0);
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border bg-muted/20 p-3">
|
||||
<div className="space-y-1">
|
||||
{rootEntries.map(entry => renderEntry(entry, true))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
63
src/components/widgets/TodoWidget.tsx
Normal file
63
src/components/widgets/TodoWidget.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import React from "react";
|
||||
import { CheckCircle2, Circle, Clock, FileEdit } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface TodoWidgetProps {
|
||||
todos: any[];
|
||||
result?: any;
|
||||
}
|
||||
|
||||
export const TodoWidget: React.FC<TodoWidgetProps> = ({ todos, result: _result }) => {
|
||||
const statusIcons = {
|
||||
completed: <CheckCircle2 className="h-4 w-4 text-green-500" />,
|
||||
in_progress: <Clock className="h-4 w-4 text-blue-500 animate-pulse" />,
|
||||
pending: <Circle className="h-4 w-4 text-muted-foreground" />
|
||||
};
|
||||
|
||||
const priorityColors = {
|
||||
high: "bg-red-500/10 text-red-500 border-red-500/20",
|
||||
medium: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20",
|
||||
low: "bg-green-500/10 text-green-500 border-green-500/20"
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<FileEdit className="h-4 w-4 text-primary" />
|
||||
<span className="text-sm font-medium">Todo List</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{todos.map((todo, idx) => (
|
||||
<div
|
||||
key={todo.id || idx}
|
||||
className={cn(
|
||||
"flex items-start gap-3 p-3 rounded-lg border bg-card/50",
|
||||
todo.status === "completed" && "opacity-60"
|
||||
)}
|
||||
>
|
||||
<div className="mt-0.5">
|
||||
{statusIcons[todo.status as keyof typeof statusIcons] || statusIcons.pending}
|
||||
</div>
|
||||
<div className="flex-1 space-y-1">
|
||||
<p className={cn(
|
||||
"text-sm",
|
||||
todo.status === "completed" && "line-through"
|
||||
)}>
|
||||
{todo.content}
|
||||
</p>
|
||||
{todo.priority && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn("text-xs", priorityColors[todo.priority as keyof typeof priorityColors])}
|
||||
>
|
||||
{todo.priority}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
27
src/components/widgets/index.ts
Normal file
27
src/components/widgets/index.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
// Re-export all widgets from their individual files
|
||||
export { TodoWidget } from './TodoWidget';
|
||||
export { LSWidget } from './LSWidget';
|
||||
export { BashWidget } from './BashWidget';
|
||||
|
||||
// TODO: Add these widgets as they are implemented
|
||||
// export { LSResultWidget } from './LSWidget';
|
||||
// export { ReadWidget } from './ReadWidget';
|
||||
// export { ReadResultWidget } from './ReadResultWidget';
|
||||
// export { GlobWidget } from './GlobWidget';
|
||||
// export { WriteWidget } from './WriteWidget';
|
||||
// export { GrepWidget } from './GrepWidget';
|
||||
// export { EditWidget } from './EditWidget';
|
||||
// export { EditResultWidget } from './EditResultWidget';
|
||||
// export { MCPWidget } from './MCPWidget';
|
||||
// export { CommandWidget } from './CommandWidget';
|
||||
// export { CommandOutputWidget } from './CommandOutputWidget';
|
||||
// export { SummaryWidget } from './SummaryWidget';
|
||||
// export { MultiEditWidget } from './MultiEditWidget';
|
||||
// export { MultiEditResultWidget } from './MultiEditResultWidget';
|
||||
// export { SystemReminderWidget } from './SystemReminderWidget';
|
||||
// export { SystemInitializedWidget } from './SystemInitializedWidget';
|
||||
// export { TaskWidget } from './TaskWidget';
|
||||
// export { WebSearchWidget } from './WebSearchWidget';
|
||||
// export { ThinkingWidget } from './ThinkingWidget';
|
||||
// export { WebFetchWidget } from './WebFetchWidget';
|
||||
// export { TodoReadWidget } from './TodoReadWidget';
|
||||
Reference in New Issue
Block a user