@swarmclawai/swarmclaw 0.3.1 → 0.4.5

package/src/components/input/chat-input.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useRef, useState } from 'react'
-import { useChatStore } from '@/stores/use-chat-store'
+import { useChatStore, type PendingFile } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
 import { uploadImage } from '@/lib/upload'
 import { useAutoResize } from '@/hooks/use-auto-resize'
@@ -13,23 +13,56 @@ interface Props {
   onStop: () => void
 }
 
+function FilePreview({ file, onRemove }: { file: PendingFile; onRemove: () => void }) {
+  const isImage = file.file.type.startsWith('image/')
+  return (
+    <div className="relative">
+      {isImage ? (
+        <img
+          src={URL.createObjectURL(file.file)}
+          alt="Preview"
+          className="h-16 rounded-[10px] object-cover border border-white/[0.06]"
+        />
+      ) : (
+        <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-[10px] border border-white/[0.06] bg-white/[0.03]">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3 shrink-0">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <polyline points="14 2 14 8 20 8" />
+          </svg>
+          <span className="text-[13px] text-text-2 font-500 truncate max-w-[180px]">{file.file.name}</span>
+        </div>
+      )}
+      <button
+        onClick={onRemove}
+        className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full border border-white/10 bg-raised
+          text-text-2 text-[10px] cursor-pointer flex items-center justify-center
+          hover:bg-danger-soft hover:text-danger hover:border-danger/20 transition-colors"
+      >
+        &times;
+      </button>
+    </div>
+  )
+}
+
 export function ChatInput({ streaming, onSend, onStop }: Props) {
   const [value, setValue] = useState('')
   const { ref: textareaRef, resize } = useAutoResize()
   const fileInputRef = useRef<HTMLInputElement>(null)
-  const pendingImage = useChatStore((s) => s.pendingImage)
-  const setPendingImage = useChatStore((s) => s.setPendingImage)
+  const imageInputRef = useRef<HTMLInputElement>(null)
+  const pendingFiles = useChatStore((s) => s.pendingFiles)
+  const addPendingFile = useChatStore((s) => s.addPendingFile)
+  const removePendingFile = useChatStore((s) => s.removePendingFile)
   const speechRecognitionLang = useAppStore((s) => s.appSettings.speechRecognitionLang)
 
   const handleSend = useCallback(() => {
     const text = value.trim()
-    if (!text || streaming) return
-    onSend(text)
+    if ((!text && !pendingFiles.length) || streaming) return
+    onSend(text || 'See attached file(s).')
     setValue('')
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto'
     }
-  }, [value, streaming, onSend])
+  }, [value, streaming, onSend, pendingFiles.length])
 
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -47,6 +80,15 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
     { lang: speechRecognitionLang || undefined },
   )
 
+  const uploadAndAdd = useCallback(async (file: File) => {
+    try {
+      const result = await uploadImage(file)
+      addPendingFile({ file, path: result.path, url: result.url })
+    } catch {
+      // ignore upload errors
+    }
+  }, [addPendingFile])
+
   const handlePaste = useCallback(async (e: React.ClipboardEvent) => {
     const items = e.clipboardData?.items
     if (!items) return
@@ -54,35 +96,22 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
       if (item.type.startsWith('image/')) {
         e.preventDefault()
         const file = item.getAsFile()
-        if (!file) return
-        try {
-          const result = await uploadImage(file)
-          setPendingImage({ file, path: result.path, url: result.url })
-        } catch {
-          // ignore
-        }
+        if (file) await uploadAndAdd(file)
         return
       }
     }
-  }, [])
+  }, [uploadAndAdd])
 
   const handleFileChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (!file) return
-    try {
-      const result = await uploadImage(file)
-      setPendingImage({
-        file,
-        path: result.path,
-        url: result.url,
-      })
-    } catch {
-      // ignore
+    const files = e.target.files
+    if (!files?.length) return
+    for (const file of Array.from(files)) {
+      await uploadAndAdd(file)
     }
     e.target.value = ''
-  }, [])
+  }, [uploadAndAdd])
 
-  const hasContent = value.trim().length > 0 || !!pendingImage
+  const hasContent = value.trim().length > 0 || pendingFiles.length > 0
 
   return (
     <div className="shrink-0 px-6 md:px-12 lg:px-16 pb-4 pt-2"
@@ -105,33 +134,11 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
         <div className="glass rounded-[20px] overflow-hidden
           shadow-[0_4px_32px_rgba(0,0,0,0.3)] focus-within:border-border-focus focus-within:shadow-[0_4px_32px_rgba(99,102,241,0.08)] transition-all duration-300">
 
-          {pendingImage && (
-            <div className="flex items-center gap-2 px-5 pt-4">
-              <div className="relative">
-                {pendingImage.file.type.startsWith('image/') ? (
-                  <img
-                    src={URL.createObjectURL(pendingImage.file)}
-                    alt="Preview"
-                    className="h-16 rounded-[10px] object-cover border border-white/[0.06]"
-                  />
-                ) : (
-                  <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-[10px] border border-white/[0.06] bg-white/[0.03]">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3 shrink-0">
-                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                      <polyline points="14 2 14 8 20 8" />
-                    </svg>
-                    <span className="text-[13px] text-text-2 font-500 truncate max-w-[180px]">{pendingImage.file.name}</span>
-                  </div>
-                )}
-                <button
-                  onClick={() => setPendingImage(null)}
-                  className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full border border-white/10 bg-raised
-                    text-text-2 text-[10px] cursor-pointer flex items-center justify-center
-                    hover:bg-danger-soft hover:text-danger hover:border-danger/20 transition-colors"
-                >
-                  &times;
-                </button>
-              </div>
+          {pendingFiles.length > 0 && (
+            <div className="flex items-center gap-2 px-5 pt-4 flex-wrap">
+              {pendingFiles.map((f, i) => (
+                <FilePreview key={`${f.path}-${i}`} file={f} onRemove={() => removePendingFile(i)} />
+              ))}
             </div>
           )}
 
@@ -162,7 +169,7 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
             </button>
 
             <button
-              onClick={() => fileInputRef.current?.click()}
+              onClick={() => imageInputRef.current?.click()}
               className="flex items-center gap-1.5 px-3 py-2 rounded-[10px] border-none bg-transparent
                 text-text-3 text-[13px] cursor-pointer hover:text-text-2 hover:bg-white/[0.05] transition-all duration-200"
               style={{ fontFamily: 'inherit' }}
@@ -217,7 +224,16 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
         <input
           ref={fileInputRef}
           type="file"
-          accept="image/*,.pdf,.txt,.md,.csv,.json,.xml,.html,.js,.ts,.tsx,.jsx,.py,.go,.rs,.java,.c,.cpp,.h,.yml,.yaml,.toml,.env,.log,.sh,.sql"
+          multiple
+          accept="image/*,.pdf,.txt,.md,.csv,.json,.xml,.html,.js,.ts,.tsx,.jsx,.py,.go,.rs,.java,.c,.cpp,.h,.yml,.yaml,.toml,.env,.log,.sh,.sql,.css,.scss"
+          onChange={handleFileChange}
+          className="hidden"
+        />
+        <input
+          ref={imageInputRef}
+          type="file"
+          multiple
+          accept="image/*"
           onChange={handleFileChange}
           className="hidden"
         />

package/src/components/knowledge/knowledge-list.tsx

@@ -12,7 +12,6 @@ export function KnowledgeList() {
   const [loaded, setLoaded] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [activeTag, setActiveTag] = useState<string | null>(null)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
   const searchRef = useRef(search)
   const setKnowledgeSheetOpen = useAppStore((s) => s.setKnowledgeSheetOpen)
   const setEditingKnowledgeId = useAppStore((s) => s.setEditingKnowledgeId)
@@ -64,7 +63,6 @@ export function KnowledgeList() {
     try {
       await api('DELETE', `/knowledge/${id}`)
       setEntries((prev) => prev.filter((e) => e.id !== id))
-      if (selectedId === id) setSelectedId(null)
     } catch {
       // silent
     }
@@ -78,7 +76,7 @@ export function KnowledgeList() {
     <div className="flex-1 flex flex-col overflow-y-auto">
       {/* Search — only show when there are entries */}
       {entries.length > 0 && (
-        <div className="px-3 py-2 shrink-0">
+        <div className="px-5 py-2 shrink-0">
           <input
             type="text"
             value={search}
@@ -93,7 +91,7 @@ export function KnowledgeList() {
 
       {/* Tag filters */}
       {uniqueTags.length > 0 && (
-        <div className="px-3 pb-1.5 shrink-0">
+        <div className="px-5 pb-1.5 shrink-0">
           <div className="flex gap-1 flex-wrap">
             <button
               onClick={() => setActiveTag(null)}
@@ -120,52 +118,50 @@ export function KnowledgeList() {
 
       {/* Entries */}
       {entries.length > 0 ? (
-        <div className="flex flex-col gap-0.5 px-2 pb-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 px-5 pb-6">
           {entries.map((entry) => {
             const meta = entry.metadata as { tags?: string[] } | undefined
             const tags = meta?.tags || []
             return (
               <div
                 key={entry.id}
-                onClick={() => setSelectedId(selectedId === entry.id ? null : entry.id)}
-                className={`p-3 rounded-[12px] border cursor-pointer transition-all
-                  ${selectedId === entry.id
-                    ? 'border-accent-bright/30 bg-accent-soft/30'
-                    : 'border-white/[0.04] bg-transparent hover:bg-surface-2'
-                  }`}
+                className="p-3 rounded-[12px] border border-white/[0.04] bg-transparent hover:bg-surface-2 transition-all relative group"
               >
                 <div className="flex items-start justify-between gap-2 mb-1">
                   <span className="font-display text-[13px] font-600 text-text truncate">{entry.title}</span>
-                  <span className="text-[10px] text-text-3/50 shrink-0">{formatDate(entry.createdAt)}</span>
+                  <div className="flex items-center gap-1.5 shrink-0">
+                    <button
+                      onClick={() => openSheet(entry.id)}
+                      className="text-text-3/40 hover:text-accent-bright transition-colors p-0.5 cursor-pointer"
+                      title="Edit"
+                    >
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                      </svg>
+                    </button>
+                    <button
+                      onClick={() => void handleDelete(entry.id)}
+                      className="text-text-3/40 hover:text-red-400 transition-colors p-0.5 cursor-pointer"
+                      title="Delete"
+                    >
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                        <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                      </svg>
+                    </button>
+                    <span className="text-[10px] text-text-3/50">{formatDate(entry.createdAt)}</span>
+                  </div>
                 </div>
                 <p className="text-[11px] text-text-3/60 line-clamp-2 mb-2">
                   {entry.content.slice(0, 200)}
                 </p>
                 {tags.length > 0 && (
-                  <div className="flex gap-1 flex-wrap mb-2">
+                  <div className="flex gap-1 flex-wrap">
                     {tags.map((t) => (
                       <Badge key={t} variant="secondary" className="text-[9px] px-1.5 py-0">{t}</Badge>
                     ))}
                   </div>
                 )}
-                {selectedId === entry.id && (
-                  <div className="flex gap-2 pt-2 border-t border-white/[0.04]">
-                    <button
-                      onClick={(e) => { e.stopPropagation(); openSheet(entry.id) }}
-                      className="px-2.5 py-1 rounded-[7px] text-[10px] font-600 text-accent-bright bg-accent-soft cursor-pointer border-none hover:brightness-110 transition-all"
-                      style={{ fontFamily: 'inherit' }}
-                    >
-                      Edit
-                    </button>
-                    <button
-                      onClick={(e) => { e.stopPropagation(); void handleDelete(entry.id) }}
-                      className="px-2.5 py-1 rounded-[7px] text-[10px] font-600 text-red-400 bg-red-400/10 cursor-pointer border-none hover:bg-red-400/20 transition-all"
-                      style={{ fontFamily: 'inherit' }}
-                    >
-                      Delete
-                    </button>
-                  </div>
-                )}
               </div>
             )
           })}