@swarmclawai/swarmclaw 0.5.2 → 0.6.0

package/src/components/chatrooms/reaction-picker.tsx

@@ -0,0 +1,273 @@
+'use client'
+
+import { useState, useEffect, useRef, useMemo } from 'react'
+
+const CATEGORIES: Array<{ id: string; label: string; icon: string; emojis: string[] }> = [
+  {
+    id: 'frequent',
+    label: 'Frequently Used',
+    icon: '🕐',
+    emojis: ['👍', '❤️', '😂', '🔥', '🎉', '👀', '🚀', '✅', '💯', '🤔'],
+  },
+  {
+    id: 'smileys',
+    label: 'Smileys & People',
+    icon: '😀',
+    emojis: [
+      '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '😊',
+      '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😙', '🥲', '😋',
+      '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🫢', '🤫', '🤔',
+      '🫡', '🤐', '🤨', '😐', '😑', '😶', '🫥', '😏', '😒', '🙄',
+      '😬', '🤥', '🫨', '😌', '😔', '😪', '🤤', '😴', '😷', '🤒',
+      '🤕', '🤢', '🤮', '🥴', '😵', '🤯', '🥳', '🥸', '😎', '🤓',
+      '🧐', '😕', '🫤', '😟', '🙁', '😮', '😯', '😲', '😳', '🥺',
+      '🥹', '😦', '😧', '😨', '😰', '😥', '😢', '😭', '😱', '😖',
+      '😣', '😞', '😓', '😩', '😫', '🥱', '😤', '😡', '😠', '🤬',
+      '😈', '👿', '💀', '☠️', '💩', '🤡', '👹', '👺', '👻', '👽',
+      '🤖', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾',
+      '🙈', '🙉', '🙊', '👋', '🤚', '🖐️', '✋', '🖖', '🫱', '🫲',
+      '🫳', '🫴', '👌', '🤌', '🤏', '✌️', '🤞', '🫰', '🤟', '🤘',
+      '🤙', '👈', '👉', '👆', '🖕', '👇', '☝️', '🫵', '👍', '👎',
+      '✊', '👊', '🤛', '🤜', '👏', '🙌', '🫶', '👐', '🤲', '🤝',
+      '🙏', '✍️', '💪', '🦾', '🧠', '👀', '👁️', '👅', '👄', '🫦',
+    ],
+  },
+  {
+    id: 'nature',
+    label: 'Animals & Nature',
+    icon: '🐶',
+    emojis: [
+      '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐻‍❄️', '🐨',
+      '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🐔', '🐧', '🐦', '🐤',
+      '🦆', '🦅', '🦉', '🦇', '🐺', '🐗', '🐴', '🦄', '🐝', '🪱',
+      '🐛', '🦋', '🐌', '🐞', '🐜', '🪲', '🪳', '🕷️', '🦂', '🐢',
+      '🐍', '🦎', '🐙', '🦑', '🦐', '🦞', '🦀', '🐡', '🐠', '🐟',
+      '🐬', '🐳', '🐋', '🦈', '🪸', '🐊', '🐅', '🐆', '🦓', '🦍',
+      '🐘', '🦛', '🦏', '🐪', '🐫', '🦒', '🦘', '🦬', '🐃', '🐂',
+      '🐄', '🐎', '🐖', '🐏', '🐑', '🦙', '🐐', '🦌', '🐕', '🐩',
+      '🌵', '🎄', '🌲', '🌳', '🌴', '🪵', '🌱', '🌿', '☘️', '🍀',
+      '🍁', '🍂', '🍃', '🪹', '🪺', '🌺', '🌻', '🌹', '🥀', '🌷',
+      '🌼', '🌸', '💐', '🍄', '🌰', '🎃', '🌍', '🌙', '⭐', '🌟',
+      '💫', '✨', '⚡', '☀️', '🌤️', '🌈', '☁️', '🌧️', '❄️', '🔥',
+    ],
+  },
+  {
+    id: 'food',
+    label: 'Food & Drink',
+    icon: '🍕',
+    emojis: [
+      '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🫐', '🍈',
+      '🍒', '🍑', '🥭', '🍍', '🥥', '🥝', '🍅', '🥑', '🍆', '🥦',
+      '🥬', '🥒', '🌶️', '🫑', '🌽', '🥕', '🧄', '🧅', '🥔', '🍠',
+      '🥐', '🍞', '🥖', '🥨', '🧀', '🥚', '🍳', '🥞', '🧇', '🥓',
+      '🥩', '🍗', '🍖', '🌭', '🍔', '🍟', '🍕', '🫓', '🥪', '🥙',
+      '🧆', '🌮', '🌯', '🫔', '🥗', '🍝', '🍜', '🍲', '🍛', '🍣',
+      '🍱', '🥟', '🍤', '🍙', '🍚', '🍘', '🍥', '🥠', '🥮', '🍡',
+      '🍧', '🍨', '🍦', '🥧', '🧁', '🍰', '🎂', '🍮', '🍭', '🍬',
+      '🍫', '🍿', '🧈', '🥤', '☕', '🍵', '🧃', '🧉', '🍶', '🍺',
+      '🍻', '🥂', '🍷', '🍸', '🍹', '🍾', '🧊', '🥄', '🍴', '🥢',
+    ],
+  },
+  {
+    id: 'activity',
+    label: 'Activities',
+    icon: '⚽',
+    emojis: [
+      '⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉', '🥏', '🎱',
+      '🏓', '🏸', '🏒', '🥊', '🥋', '🥅', '⛳', '⛸️', '🎣', '🤿',
+      '🎿', '🛷', '🥌', '🎯', '🪀', '🪁', '🎮', '🕹️', '🎰', '🧩',
+      '♟️', '🎲', '🎭', '🎨', '🎬', '🎤', '🎧', '🎼', '🎹', '🥁',
+      '🎷', '🎺', '🪗', '🎸', '🎻', '🎪', '🎫', '🎟️', '🏆', '🥇',
+      '🥈', '🥉', '🏅', '🎖️', '🏵️', '🎗️', '🎁', '🎀', '🎈', '🎊',
+    ],
+  },
+  {
+    id: 'travel',
+    label: 'Travel & Places',
+    icon: '✈️',
+    emojis: [
+      '🚗', '🚕', '🚙', '🚌', '🚎', '🏎️', '🚓', '🚑', '🚒', '🚐',
+      '🛻', '🚚', '🚛', '🚜', '🏍️', '🛵', '🚲', '🛴', '🛺', '🚔',
+      '🚍', '🚘', '🚖', '✈️', '🚀', '🛸', '🚁', '🛶', '⛵', '🚢',
+      '🏠', '🏡', '🏘️', '🏢', '🏣', '🏥', '🏦', '🏪', '🏫', '🏩',
+      '💒', '🏛️', '⛪', '🕌', '🛕', '🕍', '⛩️', '🏰', '🏯', '🗼',
+      '🗽', '🗿', '🏟️', '🎡', '🎢', '🎠', '⛲', '⛱️', '🏖️', '🏝️',
+      '🏔️', '🗻', '🌋', '🏕️', '🛤️', '🛣️', '🌅', '🌄', '🌃', '🌉',
+    ],
+  },
+  {
+    id: 'objects',
+    label: 'Objects',
+    icon: '💡',
+    emojis: [
+      '⌚', '📱', '💻', '⌨️', '🖥️', '🖨️', '🖱️', '🖲️', '💽', '💾',
+      '💿', '📀', '🎥', '📷', '📸', '📹', '📼', '🔍', '🔎', '🕯️',
+      '💡', '🔦', '🏮', '🪔', '📔', '📕', '📖', '📗', '📘', '📙',
+      '📚', '📓', '📒', '📃', '📜', '📄', '📰', '📑', '🔖', '💰',
+      '🪙', '💴', '💵', '💶', '💷', '💸', '💳', '✉️', '📧', '📨',
+      '📩', '📤', '📥', '📦', '📫', '📪', '📬', '📭', '📮', '🗳️',
+      '✏️', '✒️', '🖋️', '🖊️', '🖌️', '🖍️', '📝', '📁', '📂', '🗂️',
+      '📅', '📆', '📇', '📈', '📉', '📊', '📋', '📌', '📍', '📎',
+      '🔐', '🔑', '🗝️', '🔨', '🪓', '⛏️', '⚒️', '🛠️', '🗡️', '⚔️',
+      '🔧', '🪛', '🔩', '⚙️', '🗜️', '⚖️', '🦯', '🔗', '⛓️', '🪝',
+    ],
+  },
+  {
+    id: 'symbols',
+    label: 'Symbols',
+    icon: '❤️',
+    emojis: [
+      '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔',
+      '❤️‍🔥', '❤️‍🩹', '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝',
+      '💟', '☮️', '✝️', '☪️', '🕉️', '☸️', '✡️', '🔯', '🕎', '☯️',
+      '♈', '♉', '♊', '♋', '♌', '♍', '♎', '♏', '♐', '♑',
+      '♒', '♓', '⛎', '🔀', '🔁', '🔂', '▶️', '⏩', '⏭️', '⏯️',
+      '◀️', '⏪', '⏮️', '🔼', '⏫', '🔽', '⏬', '⏸️', '⏹️', '⏺️',
+      '⏏️', '🎦', '🔅', '🔆', '📶', '🛜', '📳', '📴', '♀️', '♂️',
+      '⚧️', '✖️', '➕', '➖', '➗', '🟰', '♾️', '‼️', '⁉️', '❓',
+      '❔', '❕', '❗', '〰️', '💱', '💲', '⚕️', '♻️', '⚜️', '🔱',
+      '✔️', '☑️', '✅', '❌', '❎', '➰', '➿', '〽️', '✳️', '✴️',
+      '❇️', '©️', '®️', '™️', '#️⃣', '*️⃣', '0️⃣', '1️⃣', '2️⃣', '3️⃣',
+      '🔴', '🟠', '🟡', '🟢', '🔵', '🟣', '⚫', '⚪', '🟤', '🔶',
+      '🔷', '🔸', '🔹', '🔺', '🔻', '💠', '🔘', '🔳', '🔲', '🏁',
+      '🚩', '🎌', '🏴', '🏳️', '🏳️‍🌈', '🏳️‍⚧️', '🏴‍☠️', '🇺🇸', '🇬🇧', '🇯🇵',
+    ],
+  },
+]
+
+interface Props {
+  onSelect: (emoji: string) => void
+  onClose: () => void
+}
+
+export function ReactionPicker({ onSelect, onClose }: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+  const searchRef = useRef<HTMLInputElement>(null)
+  const [search, setSearch] = useState('')
+  const [activeCategory, setActiveCategory] = useState('frequent')
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [onClose])
+
+  // Auto-focus search on open
+  useEffect(() => {
+    setTimeout(() => searchRef.current?.focus(), 50)
+  }, [])
+
+  const filteredEmojis = useMemo(() => {
+    if (!search.trim()) return null
+    const q = search.toLowerCase()
+    // Simple search: match against category names or just return all emojis that are visible
+    const results: string[] = []
+    const seen = new Set<string>()
+    for (const cat of CATEGORIES) {
+      if (cat.id === 'frequent') continue
+      for (const emoji of cat.emojis) {
+        if (!seen.has(emoji)) {
+          seen.add(emoji)
+          results.push(emoji)
+        }
+      }
+    }
+    // For basic emoji search, filter by category label matching
+    // Since emoji don't have text names in this simple implementation,
+    // we filter categories that match and show all their emojis
+    const matchingCats = CATEGORIES.filter(
+      (c) => c.id !== 'frequent' && c.label.toLowerCase().includes(q)
+    )
+    if (matchingCats.length > 0) {
+      const catResults: string[] = []
+      const catSeen = new Set<string>()
+      for (const cat of matchingCats) {
+        for (const emoji of cat.emojis) {
+          if (!catSeen.has(emoji)) {
+            catSeen.add(emoji)
+            catResults.push(emoji)
+          }
+        }
+      }
+      return catResults
+    }
+    // If no category match, just return all emojis (user can visually scan)
+    return results
+  }, [search])
+
+  return (
+    <div
+      ref={ref}
+      className="absolute right-0 bottom-8 z-50 bg-[#13131e] border border-white/[0.1] rounded-[12px] shadow-[0_8px_40px_rgba(0,0,0,0.6)] w-[320px] flex flex-col overflow-hidden"
+      style={{ animation: 'msg-in 0.15s ease-out both' }}
+    >
+      {/* Search */}
+      <div className="px-3 pt-3 pb-2">
+        <input
+          ref={searchRef}
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search emoji..."
+          className="w-full px-2.5 py-1.5 rounded-[8px] bg-white/[0.06] border border-white/[0.08] text-[12px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40"
+        />
+      </div>
+
+      {/* Category tabs */}
+      {!search.trim() && (
+        <div className="flex px-2 gap-0.5 pb-1">
+          {CATEGORIES.map((cat) => (
+            <button
+              key={cat.id}
+              onClick={() => setActiveCategory(cat.id)}
+              title={cat.label}
+              className={`flex-1 py-1 flex items-center justify-center rounded-[6px] text-[14px] cursor-pointer transition-all ${
+                activeCategory === cat.id ? 'bg-white/[0.08]' : 'hover:bg-white/[0.04]'
+              }`}
+            >
+              {cat.icon}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Emoji grid */}
+      <div className="px-2 pb-2 max-h-[220px] overflow-y-auto">
+        {search.trim() ? (
+          <div className="grid grid-cols-8 gap-0.5">
+            {filteredEmojis?.map((emoji, i) => (
+              <button
+                key={`${emoji}-${i}`}
+                onClick={() => onSelect(emoji)}
+                className="w-[34px] h-[34px] flex items-center justify-center rounded-[6px] hover:bg-white/[0.08] transition-all cursor-pointer text-[18px]"
+              >
+                {emoji}
+              </button>
+            ))}
+          </div>
+        ) : (
+          CATEGORIES.filter((c) => c.id === activeCategory).map((cat) => (
+            <div key={cat.id}>
+              <div className="text-[10px] font-600 text-text-3 uppercase tracking-wider px-1 py-1.5">{cat.label}</div>
+              <div className="grid grid-cols-8 gap-0.5">
+                {cat.emojis.map((emoji, i) => (
+                  <button
+                    key={`${emoji}-${i}`}
+                    onClick={() => onSelect(emoji)}
+                    className="w-[34px] h-[34px] flex items-center justify-center rounded-[6px] hover:bg-white/[0.08] transition-all cursor-pointer text-[18px]"
+                  >
+                    {emoji}
+                  </button>
+                ))}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/connectors/connector-sheet.tsx

@@ -8,6 +8,9 @@ import { useWs } from '@/hooks/use-ws'
 import { toast } from 'sonner'
 import type { Connector, ConnectorPlatform } from '@/types'
 import { ConnectorPlatformBadge } from '@/components/shared/connector-platform-icon'
+import { AgentPickerList } from '@/components/shared/agent-picker-list'
+import { SheetFooter } from '@/components/shared/sheet-footer'
+import { SectionLabel } from '@/components/shared/section-label'
 
 /** Auto-detect URLs in text and make them clickable links that open in a new tab */
 function linkify(text: string) {
@@ -283,10 +286,10 @@ export function ConnectorSheet() {
   const pollWaStatus = useCallback(async () => {
     if (!editing) return
     try {
-      const data = await api<any>('GET', `/connectors/${editing.id}`)
-      setQrDataUrl(data.qrDataUrl || null)
-      setWaAuthenticated(data.authenticated ?? false)
-      setWaHasCreds(data.hasCredentials ?? false)
+      const data = await api<Record<string, unknown>>('GET', `/connectors/${editing.id}`)
+      setQrDataUrl((data.qrDataUrl as string | null) || null)
+      setWaAuthenticated((data.authenticated as boolean) ?? false)
+      setWaHasCreds((data.hasCredentials as boolean) ?? false)
       if (data.status === 'running' && editing.status !== 'running') {
         const store = useAppStore.getState()
         const updated = { ...store.connectors }
@@ -316,8 +319,8 @@ export function ConnectorSheet() {
       await loadConnectors()
       setOpen(false)
       setEditingId(null)
-    } catch (err: any) {
-      toast.error(err.message)
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : String(err))
     } finally {
       setSaving(false)
     }
@@ -340,9 +343,9 @@ export function ConnectorSheet() {
         setQrDataUrl(null)
       }
       await loadConnectors()
-    } catch (err: any) {
+    } catch (err: unknown) {
       setWaConnecting(false)
-      toast.error(`Failed to ${action}: ${err.message}`)
+      toast.error(`Failed to ${action}: ${err instanceof Error ? err.message : String(err)}`)
     } finally {
       setActionLoading(false)
     }
@@ -357,7 +360,7 @@ export function ConnectorSheet() {
   }
 
   const platformConfig = PLATFORMS.find((p) => p.id === platform)!
-  const agentList = Object.values(agents)
+  const agentList = Object.values(agents).sort((a, b) => a.name.localeCompare(b.name))
   const credList = Object.values(credentials)
 
   const inputClass = "w-full px-4 py-3 rounded-[12px] border border-white/[0.08] bg-surface text-text text-[14px] outline-none transition-all placeholder:text-text-3/50 focus:border-white/[0.15]"
@@ -374,7 +377,7 @@ export function ConnectorSheet() {
       {/* Platform selector (only for new) */}
       {!editing && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Platform</label>
+          <SectionLabel>Platform</SectionLabel>
           <div className="grid grid-cols-2 gap-3">
             {PLATFORMS.map((p) => (
               <button
@@ -460,17 +463,12 @@ export function ConnectorSheet() {
       <div className="mb-6">
         <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Route to Agent</label>
         <p className="text-[12px] text-text-3/60 mb-2">Incoming messages will be handled by this agent</p>
-        <select
-          value={agentId || ''}
-          onChange={(e) => setAgentId(e.target.value)}
-          className={`${inputClass} appearance-none cursor-pointer`}
-          style={{ fontFamily: 'inherit' }}
-        >
-          <option value="">Select a agent...</option>
-          {agentList.map((p: any) => (
-            <option key={p.id} value={p.id}>{p.name}{p.isOrchestrator ? ' (Orchestrator)' : ''}</option>
-          ))}
-        </select>
+        <AgentPickerList
+          agents={agentList}
+          selected={agentId}
+          onSelect={(id) => setAgentId(id)}
+          showOrchBadge={true}
+        />
       </div>
 
       {/* Bot token credential */}
@@ -495,7 +493,7 @@ export function ConnectorSheet() {
               style={{ fontFamily: 'inherit' }}
             >
               <option value="">Select credential...</option>
-              {credList.map((c: any) => (
+              {credList.map((c) => (
                 <option key={c.id} value={c.id}>{c.name} ({c.provider})</option>
               ))}
               <option value="__new__">+ Add new key...</option>
@@ -547,7 +545,7 @@ export function ConnectorSheet() {
                   onClick={async () => {
                     setSavingCred(true)
                     try {
-                      const cred = await api<any>('POST', '/credentials', {
+                      const cred = await api<{ id: string }>('POST', '/credentials', {
                         provider: platform,
                         name: newCredName.trim() || `${platformConfig.label} Bot Token`,
                         apiKey: newCredValue.trim(),
@@ -557,8 +555,8 @@ export function ConnectorSheet() {
                       setShowNewCred(false)
                       setNewCredName('')
                       setNewCredValue('')
-                    } catch (err: any) {
-                      toast.error(`Failed to save: ${err.message}`)
+                    } catch (err: unknown) {
+                      toast.error(`Failed to save: ${err instanceof Error ? err.message : String(err)}`)
                     } finally {
                       setSavingCred(false)
                     }
@@ -730,8 +728,8 @@ export function ConnectorSheet() {
                 setQrDataUrl(null)
                 setWaConnecting(true)
                 await loadConnectors()
-              } catch (err: any) {
-                toast.error(`Failed to unlink: ${err.message}`)
+              } catch (err: unknown) {
+                toast.error(`Failed to unlink: ${err instanceof Error ? err.message : String(err)}`)
               } finally {
                 setActionLoading(false)
               }
@@ -771,8 +769,8 @@ export function ConnectorSheet() {
                   setQrDataUrl(null)
                   setWaConnecting(true)
                   await loadConnectors()
-                } catch (err: any) {
-                  toast.error(`Failed to re-pair: ${err.message}`)
+                } catch (err: unknown) {
+                  toast.error(`Failed to re-pair: ${err instanceof Error ? err.message : String(err)}`)
                 } finally {
                   setActionLoading(false)
                 }
@@ -796,28 +794,17 @@ export function ConnectorSheet() {
       )}
 
       {/* Actions */}
-      <div className="flex gap-3 pt-4 border-t border-white/[0.04]">
-        {editing && (
+      <SheetFooter
+        onCancel={() => { setOpen(false); setEditingId(null) }}
+        onSave={handleSave}
+        saveLabel={saving ? 'Saving...' : editing ? 'Save' : 'Create Connector'}
+        saveDisabled={saving || !agentId}
+        left={editing && (
           <button onClick={handleDelete} className="py-3.5 px-6 rounded-[14px] border border-red-500/20 bg-transparent text-red-400 text-[15px] font-600 cursor-pointer hover:bg-red-500/10 transition-all" style={{ fontFamily: 'inherit' }}>
             Delete
           </button>
         )}
-        <button
-          onClick={() => { setOpen(false); setEditingId(null) }}
-          className="flex-1 py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all"
-          style={{ fontFamily: 'inherit' }}
-        >
-          Cancel
-        </button>
-        <button
-          onClick={handleSave}
-          disabled={saving || !agentId}
-          className="flex-1 py-3.5 rounded-[14px] border-none bg-[#6366F1] text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110"
-          style={{ fontFamily: 'inherit' }}
-        >
-          {saving ? 'Saving...' : editing ? 'Save' : 'Create Connector'}
-        </button>
-      </div>
+      />
     </BottomSheet>
   )
 }