codex-linux 1.0.0

package/src/renderer/components/FileAttachments.tsx

@@ -0,0 +1,247 @@
+import React, { useState, useRef } from 'react';
+import { Paperclip, X, Image, FileText, File, Upload, Loader2 } from 'lucide-react';
+
+export interface Attachment {
+  id: string;
+  name: string;
+  type: 'image' | 'pdf' | 'file';
+  size: number;
+  data: string;
+  preview?: string;
+}
+
+interface FileAttachmentsProps {
+  onAttach: (files: Attachment[]) => void;
+  maxSize?: number;
+  allowedTypes?: string[];
+}
+
+function cn(...inputs: (string | undefined | null | boolean)[]): string {
+  return inputs.filter(Boolean).join(' ');
+}
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+};
+
+const getFileIcon = (type: Attachment['type']) => {
+  switch (type) {
+    case 'image':
+      return Image;
+    case 'pdf':
+      return FileText;
+    default:
+      return File;
+  }
+};
+
+export const FileAttachments: React.FC<FileAttachmentsProps> = ({
+  onAttach,
+  maxSize = 10 * 1024 * 1024, // 10MB default
+  allowedTypes = ['image/*', 'application/pdf', '.txt', '.md', '.json', '.js', '.ts'],
+}) => {
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const processFile = async (file: File): Promise<Attachment | null> => {
+    if (file.size > maxSize) {
+      console.warn(`File ${file.name} exceeds max size of ${formatFileSize(maxSize)}`);
+      return null;
+    }
+
+    const type: Attachment['type'] = file.type.startsWith('image/')
+      ? 'image'
+      : file.type === 'application/pdf'
+      ? 'pdf'
+      : 'file';
+
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      
+      reader.onload = () => {
+        const attachment: Attachment = {
+          id: `attach-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+          name: file.name,
+          type,
+          size: file.size,
+          data: reader.result as string,
+        };
+
+        if (type === 'image') {
+          attachment.preview = reader.result as string;
+        }
+
+        resolve(attachment);
+      };
+
+      reader.onerror = () => {
+        console.error(`Failed to read file: ${file.name}`);
+        resolve(null);
+      };
+
+      if (type === 'image') {
+        reader.readAsDataURL(file);
+      } else {
+        reader.readAsText(file);
+      }
+    });
+  };
+
+  const handleFiles = async (files: FileList | File[]) => {
+    setIsLoading(true);
+    const newAttachments: Attachment[] = [];
+    const fileArray = Array.from(files);
+
+    for (const file of fileArray) {
+      const attachment = await processFile(file);
+      if (attachment) {
+        newAttachments.push(attachment);
+      }
+    }
+
+    if (newAttachments.length > 0) {
+      const updated = [...attachments, ...newAttachments];
+      setAttachments(updated);
+      onAttach(updated);
+    }
+
+    setIsLoading(false);
+  };
+
+  const handleRemove = (id: string) => {
+    const updated = attachments.filter(a => a.id !== id);
+    setAttachments(updated);
+    onAttach(updated);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    
+    if (e.dataTransfer.files.length > 0) {
+      await handleFiles(e.dataTransfer.files);
+    }
+  };
+
+  const handleInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      await handleFiles(e.target.files);
+      e.target.value = '';
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      {/* Drop zone */}
+      <div
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={cn(
+          'border-2 border-dashed rounded-lg p-4 transition-colors',
+          isDragging
+            ? 'border-primary bg-primary/5'
+            : 'border-border hover:border-muted-foreground'
+        )}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          onChange={handleInputChange}
+          accept={allowedTypes.join(',')}
+          className="hidden"
+        />
+        
+        <div className="flex flex-col items-center justify-center gap-2">
+          {isLoading ? (
+            <>
+              <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+              <p className="text-sm text-muted-foreground">Processing files...</p>
+            </>
+          ) : (
+            <>
+              <Upload className={cn(
+                'w-8 h-8 transition-colors',
+                isDragging ? 'text-primary' : 'text-muted-foreground'
+              )} />
+              <p className="text-sm text-muted-foreground">
+                Drag & drop files here, or{' '}
+                <button
+                  onClick={() => fileInputRef.current?.click()}
+                  className="text-primary hover:underline"
+                >
+                  browse
+                </button>
+              </p>
+              <p className="text-xs text-muted-foreground">
+                Images, PDFs, and code files up to {formatFileSize(maxSize)}
+              </p>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Attachment list */}
+      {attachments.length > 0 && (
+        <div className="space-y-2">
+          {attachments.map((attachment) => {
+            const Icon = getFileIcon(attachment.type);
+            
+            return (
+              <div
+                key={attachment.id}
+                className="flex items-center gap-3 p-2 bg-muted rounded-lg"
+              >
+                {attachment.type === 'image' && attachment.preview ? (
+                  <div className="w-10 h-10 rounded overflow-hidden bg-background flex-shrink-0">
+                    <img
+                      src={attachment.preview}
+                      alt={attachment.name}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                ) : (
+                  <div className="w-10 h-10 rounded bg-background flex items-center justify-center flex-shrink-0">
+                    <Icon className="w-5 h-5 text-muted-foreground" />
+                  </div>
+                )}
+                
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">{attachment.name}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {attachment.type.toUpperCase()} • {formatFileSize(attachment.size)}
+                  </p>
+                </div>
+                
+                <button
+                  onClick={() => handleRemove(attachment.id)}
+                  className="p-1 hover:bg-background rounded transition-colors"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FileAttachments;

package/src/renderer/components/FileExplorer.tsx

@@ -0,0 +1,242 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Folder, File, ChevronRight, ChevronDown, RefreshCw, Search, Filter } from 'lucide-react';
+
+interface FileNode {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  children?: FileNode[];
+  expanded?: boolean;
+  isLoading?: boolean;
+}
+
+interface FileExplorerProps {
+  rootPath: string;
+  onFileSelect: (path: string) => void;
+  selectedFile?: string;
+  fileFilter?: string[];
+}
+
+export const FileExplorer: React.FC<FileExplorerProps> = ({
+  rootPath,
+  onFileSelect,
+  selectedFile,
+  fileFilter
+}) => {
+  const [tree, setTree] = useState<FileNode | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const loadDirectory = useCallback(async (path: string): Promise<FileNode[]> => {
+    try {
+      const entries = await window.electronAPI.fs.readdir(path, { withFileTypes: true });
+      const nodes: FileNode[] = [];
+
+      for (const entry of entries) {
+        // Skip hidden files and common ignore patterns
+        if (entry.name.startsWith('.') && entry.name !== '.git') continue;
+        if (entry.name === 'node_modules') continue;
+        if (entry.name === 'dist') continue;
+        if (entry.name === 'build') continue;
+
+        const fullPath = `${path}/${entry.name}`;
+        const node: FileNode = {
+          name: entry.name,
+          path: fullPath,
+          type: entry.isDirectory() ? 'directory' : 'file'
+        };
+
+        if (entry.isDirectory()) {
+          node.children = [];
+        }
+
+        nodes.push(node);
+      }
+
+      // Sort: directories first, then files
+      return nodes.sort((a, b) => {
+        if (a.type === b.type) {
+          return a.name.localeCompare(b.name);
+        }
+        return a.type === 'directory' ? -1 : 1;
+      });
+    } catch (error) {
+      console.error('Failed to load directory:', error);
+      return [];
+    }
+  }, []);
+
+  const loadTree = useCallback(async () => {
+    setIsLoading(true);
+    const root: FileNode = {
+      name: rootPath.split('/').pop() || 'root',
+      path: rootPath,
+      type: 'directory',
+      expanded: true,
+      children: await loadDirectory(rootPath)
+    };
+    setTree(root);
+    setIsLoading(false);
+  }, [rootPath, loadDirectory]);
+
+  useEffect(() => {
+    loadTree();
+  }, [loadTree]);
+
+  const toggleNode = async (node: FileNode, parentPath: string[]) => {
+    if (node.type !== 'directory') {
+      onFileSelect(node.path);
+      return;
+    }
+
+    const updateTree = (current: FileNode, path: string[]): FileNode => {
+      if (path.length === 0) {
+        return {
+          ...current,
+          expanded: !current.expanded,
+          children: current.expanded ? current.children : undefined
+        };
+      }
+
+      if (!current.children) return current;
+
+      return {
+        ...current,
+        children: current.children.map(child => 
+          child.name === path[0] ? updateTree(child, path.slice(1)) : child
+        )
+      };
+    };
+
+    if (!node.children || node.children.length === 0) {
+      // Load children
+      const children = await loadDirectory(node.path);
+      const updateTreeWithChildren = (current: FileNode, path: string[]): FileNode => {
+        if (path.length === 0) {
+          return { ...current, expanded: true, children };
+        }
+        if (!current.children) return current;
+        return {
+          ...current,
+          children: current.children.map(child => 
+            child.name === path[0] ? updateTreeWithChildren(child, path.slice(1)) : child
+          )
+        };
+      };
+      setTree(prev => prev ? updateTreeWithChildren(prev, [...parentPath, node.name]) : null);
+    } else {
+      setTree(prev => prev ? updateTree(prev, [...parentPath, node.name]) : null);
+    }
+  };
+
+  const filterNodes = (nodes: FileNode[], query: string): FileNode[] => {
+    if (!query) return nodes;
+    
+    return nodes.reduce<FileNode[]>((acc, node) => {
+      const matches = node.name.toLowerCase().includes(query.toLowerCase());
+      
+      if (node.type === 'directory' && node.children) {
+        const filteredChildren = filterNodes(node.children, query);
+        if (matches || filteredChildren.length > 0) {
+          acc.push({ ...node, children: filteredChildren, expanded: true });
+        }
+      } else if (matches) {
+        acc.push(node);
+      }
+      
+      return acc;
+    }, []);
+  };
+
+  const renderNode = (node: FileNode, depth: number = 0, parentPath: string[] = []): React.ReactNode => {
+    const isSelected = selectedFile === node.path;
+    const paddingLeft = depth * 16 + 8;
+
+    return (
+      <div key={node.path}>
+        <div
+          onClick={() => toggleNode(node, parentPath)}
+          className={`flex items-center gap-1 py-1 px-2 cursor-pointer hover:bg-muted transition-colors ${
+            isSelected ? 'bg-primary/10 text-primary' : ''
+          }`}
+          style={{ paddingLeft: `${paddingLeft}px` }}
+        >
+          {node.type === 'directory' && (
+            <span className="w-4 h-4 flex items-center justify-center">
+              {node.expanded ? (
+                <ChevronDown className="w-3 h-3 text-muted-foreground" />
+              ) : (
+                <ChevronRight className="w-3 h-3 text-muted-foreground" />
+              )}
+            </span>
+          )}
+          
+          {node.type === 'directory' ? (
+            <Folder className={`w-4 h-4 ${isSelected ? 'text-primary' : 'text-blue-500'}`} />
+          ) : (
+            <File className={`w-4 h-4 ${isSelected ? 'text-primary' : 'text-muted-foreground'}`} />
+          )}
+          
+          <span className="text-sm truncate">{node.name}</span>
+        </div>
+
+        {node.type === 'directory' && node.expanded && node.children && (
+          <div>
+            {node.children.map(child => 
+              renderNode(child, depth + 1, [...parentPath, node.name])
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const filteredTree = tree && searchQuery 
+    ? { ...tree, children: filterNodes(tree.children || [], searchQuery) }
+    : tree;
+
+  return (
+    <div className="flex flex-col h-full bg-card border-r border-border">
+      {/* Header */}
+      <div className="p-3 border-b border-border">
+        <div className="flex items-center justify-between mb-2">
+          <span className="font-medium text-sm">Explorer</span>
+          <button
+            onClick={loadTree}
+            className="p-1.5 hover:bg-muted rounded-md"
+            title="Refresh"
+          >
+            <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
+          </button>
+        </div>
+        
+        <div className="relative">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+            placeholder="Search files..."
+            className="w-full pl-8 pr-3 py-1.5 bg-background border border-input rounded-md text-sm"
+          />
+        </div>
+      </div>
+
+      {/* File Tree */}
+      <div className="flex-1 overflow-auto py-2">
+        {filteredTree ? (
+          renderNode(filteredTree)
+        ) : (
+          <div className="flex items-center justify-center h-full text-muted-foreground">
+            {isLoading ? 'Loading...' : 'No files'}
+          </div>
+        )}
+      </div>
+
+      {/* Status Bar */}
+      <div className="px-3 py-2 border-t border-border text-xs text-muted-foreground">
+        {tree?.children?.length || 0} items
+      </div>
+    </div>
+  );
+};