jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/settings/ContextDocumentsSection.tsx

@@ -0,0 +1,317 @@
+'use client';
+
+import { useState, useRef, useCallback } from 'react';
+import { openDialog } from '@/lib/tauri';
+import { dataBridge } from '@/lib/data-bridge';
+import type { ContextDocument } from '@/lib/data-bridge';
+
+interface ContextDocumentsSectionProps {
+  initialDocuments: ContextDocument[];
+}
+
+export function ContextDocumentsSection({ initialDocuments }: ContextDocumentsSectionProps) {
+  const [documents, setDocuments] = useState<ContextDocument[]>(initialDocuments);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [editingDoc, setEditingDoc] = useState<{ name: string; content: string }>({ name: '', content: '' });
+  const [isAdding, setIsAdding] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const handleAddText = () => {
+    setDropdownOpen(false);
+    setIsAdding(true);
+    setEditingDoc({ name: '', content: '' });
+    setValidationError(null);
+  };
+
+  const handleAddFile = async () => {
+    setDropdownOpen(false);
+    const selected = await openDialog({ multiple: true, title: 'Select context files' });
+    if (!selected) return;
+    const paths = Array.isArray(selected) ? selected : [selected];
+    for (const filePath of paths) {
+      if (typeof filePath === 'string') {
+        const name = filePath.split('/').pop() || filePath;
+        // Skip duplicates by name
+        if (documents.some(d => d.name === name)) continue;
+        const doc: ContextDocument = { type: 'file', name, path: filePath };
+        await dataBridge.addContextDocument(doc);
+        setDocuments(prev => [...prev, doc]);
+      }
+    }
+  };
+
+  const handleSaveNew = async () => {
+    if (!editingDoc.name.trim()) {
+      setValidationError('Name is required');
+      return;
+    }
+    if (!editingDoc.content.trim()) {
+      setValidationError('Content is required');
+      return;
+    }
+    setValidationError(null);
+    const doc: ContextDocument = { type: 'text', name: editingDoc.name.trim(), content: editingDoc.content };
+    await dataBridge.addContextDocument(doc);
+    setDocuments(prev => [...prev, doc]);
+    setIsAdding(false);
+    setEditingDoc({ name: '', content: '' });
+  };
+
+  const handleCancelNew = () => {
+    setIsAdding(false);
+    setEditingDoc({ name: '', content: '' });
+    setValidationError(null);
+  };
+
+  const handleEdit = (index: number) => {
+    const doc = documents[index];
+    setEditingIndex(index);
+    setEditingDoc({ name: doc.name, content: doc.content || '' });
+    setValidationError(null);
+  };
+
+  const handleSaveEdit = async () => {
+    if (editingIndex === null) return;
+    if (!editingDoc.name.trim()) {
+      setValidationError('Name is required');
+      return;
+    }
+    if (!editingDoc.content.trim()) {
+      setValidationError('Content is required');
+      return;
+    }
+    setValidationError(null);
+    const doc: ContextDocument = { type: 'text', name: editingDoc.name.trim(), content: editingDoc.content };
+    await dataBridge.updateContextDocument(editingIndex, doc);
+    setDocuments(prev => prev.map((d, i) => i === editingIndex ? doc : d));
+    setEditingIndex(null);
+    setEditingDoc({ name: '', content: '' });
+  };
+
+  const handleCancelEdit = () => {
+    setEditingIndex(null);
+    setEditingDoc({ name: '', content: '' });
+    setValidationError(null);
+  };
+
+  const handleRemove = async (index: number) => {
+    await dataBridge.removeContextDocument(index);
+    setDocuments(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    if (containerRef.current && !containerRef.current.contains(e.relatedTarget as Node)) {
+      setDragOver(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback(async (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    const files = Array.from(e.dataTransfer.files);
+    for (const file of files) {
+      const filePath = (file as unknown as { path?: string }).path || file.name;
+      const name = file.name;
+      // Skip duplicates by name
+      if (documents.some(d => d.name === name)) continue;
+      const doc: ContextDocument = { type: 'file', name, path: filePath };
+      await dataBridge.addContextDocument(doc);
+      setDocuments(prev => [...prev, doc]);
+    }
+  }, [documents]);
+
+  return (
+    <div className="mt-8">
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-[15px] font-medium text-zinc-900 dark:text-zinc-100">
+          Context Documents
+        </h3>
+        <div className="relative" ref={dropdownRef}>
+          <button
+            onClick={() => setDropdownOpen(!dropdownOpen)}
+            className="w-8 h-8 rounded-lg border-2 border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-400 dark:text-zinc-500 text-lg flex items-center justify-center transition-all duration-200 hover:border-[#819D9F] hover:text-zinc-900 dark:hover:text-zinc-100 active:scale-95"
+          >
+            +
+          </button>
+          {dropdownOpen && (
+            <>
+              <div className="fixed inset-0 z-10" onClick={() => setDropdownOpen(false)} />
+              <div className="absolute top-[calc(100%+6px)] right-0 z-20 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl p-1.5 min-w-[220px] shadow-lg">
+                <button
+                  onClick={handleAddFile}
+                  className="flex items-center gap-2.5 px-3 py-2.5 rounded-lg w-full text-left text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors"
+                >
+                  <svg className="w-[18px] h-[18px] text-zinc-400" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+                    <path d="M10 4v12M15 9.5c0 2.5-2.5 4.5-5 4.5S5 12 5 9.5V6a3 3 0 016 0v4a1.5 1.5 0 01-3 0V6.5" />
+                  </svg>
+                  Upload from device
+                </button>
+                <button
+                  onClick={handleAddText}
+                  className="flex items-center gap-2.5 px-3 py-2.5 rounded-lg w-full text-left text-sm text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors"
+                >
+                  <svg className="w-[18px] h-[18px] text-zinc-400" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M4 5h12M4 10h8M4 15h5" />
+                    <path d="M15 12v6M12 15h6" />
+                  </svg>
+                  Add text content
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div
+        ref={containerRef}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={`bg-zinc-50 dark:bg-zinc-800/50 rounded-xl border-2 transition-all duration-200 overflow-hidden ${
+          dragOver
+            ? 'border-[#819D9F] shadow-[0_0_0_3px_rgba(129,157,159,0.15)]'
+            : 'border-zinc-200 dark:border-zinc-700'
+        }`}
+      >
+        {documents.length === 0 && !isAdding ? (
+          <div className="py-10 text-center text-zinc-400 dark:text-zinc-500 text-sm">
+            Drop files here or use + to add context
+          </div>
+        ) : (
+          <>
+            {documents.map((doc, index) => (
+              editingIndex === index ? (
+                <div key={index} className="bg-zinc-100 dark:bg-zinc-900/50 border-b border-zinc-200/50 dark:border-zinc-700/40">
+                  <div className="flex items-center gap-2.5 px-3.5 pt-3">
+                    <Grip />
+                    <TypeIcon type={doc.type} />
+                    <input
+                      type="text"
+                      value={editingDoc.name}
+                      onChange={e => setEditingDoc(prev => ({ ...prev, name: e.target.value }))}
+                      placeholder="Name this snippet..."
+                      className="flex-1 bg-transparent border-none text-[13px] font-medium text-zinc-900 dark:text-zinc-100 outline-none"
+                    />
+                  </div>
+                  <div className="px-3.5 mt-2">
+                    <textarea
+                      value={editingDoc.content}
+                      onChange={e => setEditingDoc(prev => ({ ...prev, content: e.target.value }))}
+                      placeholder="Type or paste your context text here..."
+                      className="w-full bg-white dark:bg-zinc-800 border-2 border-zinc-200 dark:border-zinc-700 rounded-lg px-3 py-2.5 text-[13px] text-zinc-700 dark:text-zinc-200 leading-relaxed resize-y min-h-[72px] focus:outline-none focus:border-[#819D9F] focus:shadow-[0_0_0_3px_rgba(129,157,159,0.15)] transition-all"
+                      rows={3}
+                    />
+                  </div>
+                  <div className="flex items-center justify-end gap-2 px-3.5 py-2">
+                    {validationError && (
+                      <span className="text-[12px] text-red-500 dark:text-red-400 mr-auto">{validationError}</span>
+                    )}
+                    <button onClick={handleCancelEdit} className="px-3.5 py-1.5 rounded-lg border-2 border-zinc-200 dark:border-zinc-700 bg-transparent text-zinc-500 text-[13px] font-medium hover:border-zinc-300 dark:hover:border-zinc-600 hover:text-zinc-700 dark:hover:text-zinc-300 transition-all">Cancel</button>
+                    <button onClick={handleSaveEdit} className="px-3.5 py-1.5 rounded-lg border-none bg-[#819D9F] text-zinc-900 text-[13px] font-medium hover:brightness-105 transition-all active:scale-[0.98]">Save</button>
+                  </div>
+                </div>
+              ) : (
+                <div
+                  key={index}
+                  className="group flex items-center px-3.5 py-2.5 border-b border-zinc-200/50 dark:border-zinc-700/40 last:border-b-0 hover:bg-white/50 dark:hover:bg-white/[0.02] transition-colors"
+                >
+                  <Grip />
+                  <TypeIcon type={doc.type} />
+                  <div className="flex-1 min-w-0 ml-2.5">
+                    <div className="text-[13px] font-medium text-zinc-900 dark:text-zinc-100 truncate">{doc.name}</div>
+                    <div className="text-[11px] text-zinc-400 dark:text-zinc-500 truncate font-mono mt-0.5">
+                      {doc.type === 'file' ? doc.path : (doc.content || '').slice(0, 80) + ((doc.content || '').length > 80 ? '...' : '')}
+                    </div>
+                  </div>
+                  <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                    {doc.type === 'text' && (
+                      <button onClick={() => handleEdit(index)} className="w-[26px] h-[26px] rounded-md flex items-center justify-center text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-700 dark:hover:text-zinc-200 transition-all text-[13px]" title="Edit">
+                        ✎
+                      </button>
+                    )}
+                    <button onClick={() => handleRemove(index)} className="w-[26px] h-[26px] rounded-md flex items-center justify-center text-zinc-400 hover:bg-red-100 dark:hover:bg-red-900/20 hover:text-red-600 dark:hover:text-red-400 transition-all text-[13px]" title="Remove">
+                        ×
+                    </button>
+                  </div>
+                </div>
+              )
+            ))}
+
+            {isAdding && (
+              <div className="bg-zinc-100 dark:bg-zinc-900/50 border-b border-zinc-200/50 dark:border-zinc-700/40">
+                <div className="flex items-center gap-2.5 px-3.5 pt-3">
+                  <Grip />
+                  <TypeIcon type="text" />
+                  <input
+                    type="text"
+                    value={editingDoc.name}
+                    onChange={e => setEditingDoc(prev => ({ ...prev, name: e.target.value }))}
+                    placeholder="Name this snippet..."
+                    className="flex-1 bg-transparent border-none text-[13px] font-medium text-zinc-900 dark:text-zinc-100 outline-none"
+                    autoFocus
+                  />
+                </div>
+                <div className="px-3.5 mt-2">
+                  <textarea
+                    value={editingDoc.content}
+                    onChange={e => setEditingDoc(prev => ({ ...prev, content: e.target.value }))}
+                    placeholder="Type or paste your context text here..."
+                    className="w-full bg-white dark:bg-zinc-800 border-2 border-zinc-200 dark:border-zinc-700 rounded-lg px-3 py-2.5 text-[13px] text-zinc-700 dark:text-zinc-200 leading-relaxed resize-y min-h-[72px] focus:outline-none focus:border-[#819D9F] focus:shadow-[0_0_0_3px_rgba(129,157,159,0.15)] transition-all"
+                    rows={3}
+                  />
+                </div>
+                <div className="flex items-center justify-end gap-2 px-3.5 py-2">
+                  {validationError && (
+                    <span className="text-[12px] text-red-500 dark:text-red-400 mr-auto">{validationError}</span>
+                  )}
+                  <button onClick={handleCancelNew} className="px-3.5 py-1.5 rounded-lg border-2 border-zinc-200 dark:border-zinc-700 bg-transparent text-zinc-500 text-[13px] font-medium hover:border-zinc-300 dark:hover:border-zinc-600 hover:text-zinc-700 dark:hover:text-zinc-300 transition-all">Cancel</button>
+                  <button onClick={handleSaveNew} className="px-3.5 py-1.5 rounded-lg border-none bg-[#819D9F] text-zinc-900 text-[13px] font-medium hover:brightness-105 transition-all active:scale-[0.98]">Save</button>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+
+        {dragOver && (
+          <div className="py-5 text-center border-t border-dashed border-zinc-300 dark:border-zinc-600">
+            <span className="text-[13px] font-medium text-[#819D9F]">Drop files to add as context</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Grip() {
+  return (
+    <div className="flex flex-col gap-[1.5px] cursor-grab opacity-20 hover:opacity-60 transition-opacity p-1">
+      <span className="block w-2.5 h-[1.5px] bg-zinc-500 rounded-sm" />
+      <span className="block w-2.5 h-[1.5px] bg-zinc-500 rounded-sm" />
+      <span className="block w-2.5 h-[1.5px] bg-zinc-500 rounded-sm" />
+    </div>
+  );
+}
+
+function TypeIcon({ type }: { type: 'file' | 'text' }) {
+  if (type === 'file') {
+    return (
+      <div className="w-[26px] h-[26px] rounded-md flex items-center justify-center text-[11px] font-bold shrink-0 bg-[#819D9F]/15 text-[#819D9F]">
+        F
+      </div>
+    );
+  }
+  return (
+    <div className="w-[26px] h-[26px] rounded-md flex items-center justify-center text-[11px] font-bold shrink-0 bg-[#e57a44]/12 text-[#e57a44]">
+      T
+    </div>
+  );
+}