Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -26,7 +26,7 @@ const mockTasks: Task[] = [
 
 const Refinity: React.FC = () => {
   const [stage, setStage] = React.useState<Stage>('task');
-  const [tasks] = React.useState<Task[]>(mockTasks);
+  const [tasks, setTasks] = React.useState<Task[]>(mockTasks);
   const [selectedTaskId, setSelectedTaskId] = React.useState<string>(mockTasks[0]?.id || '');
   const [versions, setVersions] = React.useState<Version[]>([]);
   const [currentVersionId, setCurrentVersionId] = React.useState<string | null>(null);
@@ -42,6 +42,14 @@ const Refinity: React.FC = () => {
 
   // File upload (.docx placeholder)
   const [uploading, setUploading] = React.useState(false);
+  const fileInputRef = React.useRef<HTMLInputElement | null>(null);
+
+  // Add Task UI state
+  const [showAddTask, setShowAddTask] = React.useState<boolean>(false);
+  const [newTaskTitle, setNewTaskTitle] = React.useState<string>('');
+  const [newTaskSource, setNewTaskSource] = React.useState<string>('');
+  const addTaskFileRef = React.useRef<HTMLInputElement | null>(null);
+  const [addingSourceUploading, setAddingSourceUploading] = React.useState<boolean>(false);
 
   const task = React.useMemo(() => tasks.find(t => t.id === selectedTaskId) || tasks[0], [tasks, selectedTaskId]);
   const taskVersions = React.useMemo(() => versions.filter(v => v.taskId === (task?.id || '')), [versions, task?.id]);
@@ -78,6 +86,34 @@ const Refinity: React.FC = () => {
     }
   };
 
+  const uploadSourceDoc = async (file: File) => {
+    setAddingSourceUploading(true);
+    try {
+      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
+      const form = new FormData();
+      form.append('file', file);
+      const resp = await fetch(`${base}/api/refinity/parse`, { method: 'POST', body: form });
+      const data = await resp.json().catch(()=>({}));
+      if (!resp.ok) throw new Error(data?.error || 'Failed to parse document');
+      setNewTaskSource(String(data?.text || ''));
+    } finally {
+      setAddingSourceUploading(false);
+    }
+  };
+
+  const saveNewTask = () => {
+    const title = newTaskTitle.trim();
+    const src = newTaskSource.trim();
+    if (!title || !src) return;
+    const id = `t_${Date.now()}`;
+    const t: Task = { id, title, sourceText: src };
+    setTasks(prev => [...prev, t]);
+    setSelectedTaskId(id);
+    setShowAddTask(false);
+    setNewTaskTitle('');
+    setNewTaskSource('');
+  };
+
   const assignRandom = () => {
     const pool = taskVersions.filter(v => (v.originalAuthor !== username && v.revisedBy !== username));
     if (!pool.length) return;
@@ -135,7 +171,15 @@ const Refinity: React.FC = () => {
             </div>
             <div className="md:col-span-2">
               <label className="block text-sm text-gray-700 mb-1">Upload .doc or .docx translation</label>
-              <input type="file" accept=".doc,.docx" onChange={(e)=>{ const f=e.target.files?.[0]; if(f) uploadDocx(f); }} className="block w-full text-gray-800 file:px-4 file:py-2 file:rounded-2xl file:ring-1 file:ring-inset file:ring-white/50 file:backdrop-blur-md file:backdrop-brightness-110 file:backdrop-saturate-150 file:bg-indigo-600/70 file:text-white hover:file:opacity-95 disabled:file:bg-gray-400" disabled={uploading} />
+              <div className="flex items-center gap-3">
+                <input ref={fileInputRef} type="file" accept=".doc,.docx" onChange={(e)=>{ const f=e.target.files?.[0]; if(f) uploadDocx(f); if(fileInputRef.current) fileInputRef.current.value=''; }} className="hidden" />
+                <button type="button" onClick={()=>fileInputRef.current?.click()} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-1.5 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-indigo-600/70 active:translate-y-0.5 transition-all duration-200">
+                  <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-60 [background:linear-gradient(to_bottom,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
+                  <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
+                  <span className="relative z-10">Choose file</span>
+                </button>
+                {uploading && <span className="text-sm text-gray-600">Uploading…</span>}
+              </div>
             </div>
           </div>
 
@@ -150,7 +194,45 @@ const Refinity: React.FC = () => {
               <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
               <span className="relative z-10">Choose Manually</span>
             </button>
+            <button onClick={()=>setShowAddTask(v=>!v)} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200">
+              <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-60 [background:linear-gradient(to_bottom,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
+              <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
+              <span className="relative z-10">New Task</span>
+            </button>
           </div>
+
+          {showAddTask && (
+            <div className="mt-6 relative rounded-xl">
+              <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-indigo-200/45 via-indigo-100/40 to-indigo-300/45" />
+              <div className="relative rounded-xl bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)] p-4">
+                <div className="pointer-events-none absolute inset-0 rounded-xl opacity-50 [background:linear-gradient(to_bottom,rgba(255,255,255,0.3),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.28),rgba(255,255,255,0)_28%)]" />
+                <div className="pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-45" />
+                <div className="relative grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
+                  <div>
+                    <label className="block text-sm text-gray-700 mb-1">Title</label>
+                    <input value={newTaskTitle} onChange={(e)=>setNewTaskTitle(e.target.value)} className="w-full px-3 py-2 rounded-lg bg-white/50 backdrop-blur border border-ui-border text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" />
+                  </div>
+                  <div className="md:col-span-2">
+                    <label className="block text-sm text-gray-700 mb-1">Source Text</label>
+                    <textarea value={newTaskSource} onChange={(e)=>setNewTaskSource(e.target.value)} rows={4} className="w-full px-4 py-3 border border-ui-border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white" placeholder="Paste source text here…" />
+                    <div className="mt-2 flex items-center gap-3">
+                      <input ref={addTaskFileRef} type="file" accept=".doc,.docx" onChange={(e)=>{ const f=e.target.files?.[0]; if(f) uploadSourceDoc(f); if(addTaskFileRef.current) addTaskFileRef.current.value=''; }} className="hidden" />
+                      <button type="button" onClick={()=>addTaskFileRef.current?.click()} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-1.5 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-indigo-600/70 active:translate-y-0.5 transition-all duration-200">
+                        <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-60 [background:linear-gradient(to_bottom,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
+                        <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
+                        <span className="relative z-10">Choose source file</span>
+                      </button>
+                      {addingSourceUploading && <span className="text-sm text-gray-600">Parsing…</span>}
+                    </div>
+                  </div>
+                </div>
+                <div className="relative mt-4 flex gap-3">
+                  <button onClick={saveNewTask} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-indigo-600/70 active:translate-y-0.5 transition-all duration-200">Save Task</button>
+                  <button onClick={()=>{ setShowAddTask(false); setNewTaskTitle(''); setNewTaskSource(''); }} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200">Cancel</button>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
       )}