@swarmclawai/swarmclaw 0.5.3 → 0.6.2

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

@@ -8,6 +8,11 @@ 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 { ChatroomPickerList } from '@/components/shared/chatroom-picker-list'
+import { SheetFooter } from '@/components/shared/sheet-footer'
+import { SectionLabel } from '@/components/shared/section-label'
+import { useChatroomStore } from '@/stores/use-chatroom-store'
 
 /** Auto-detect URLs in text and make them clickable links that open in a new tab */
 function linkify(text: string) {
@@ -229,9 +234,14 @@ export function ConnectorSheet() {
   const loadAgents = useAppStore((s) => s.loadAgents)
   const loadCredentials = useAppStore((s) => s.loadCredentials)
 
+  const chatrooms = useChatroomStore((s) => s.chatrooms)
+  const loadChatrooms = useChatroomStore((s) => s.loadChatrooms)
+
   const [name, setName] = useState('')
   const [platform, setPlatform] = useState<ConnectorPlatform>('discord')
   const [agentId, setAgentId] = useState('')
+  const [routeMode, setRouteMode] = useState<'agent' | 'chatroom'>('agent')
+  const [chatroomId, setChatroomId] = useState('')
   const [credentialId, setCredentialId] = useState('')
   const [config, setConfig] = useState<Record<string, string>>({})
   const [saving, setSaving] = useState(false)
@@ -252,8 +262,10 @@ export function ConnectorSheet() {
     if (open) {
       loadAgents()
       loadCredentials()
+      loadChatrooms()
       setShowSetup(false)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 
   // Sync form fields when editing connector changes (by ID, not reference)
@@ -262,13 +274,17 @@ export function ConnectorSheet() {
     if (editing) {
       setName(editing.name)
       setPlatform(editing.platform)
-      setAgentId(editing.agentId)
+      setAgentId(editing.agentId || '')
+      setRouteMode(editing.chatroomId ? 'chatroom' : 'agent')
+      setChatroomId(editing.chatroomId || '')
       setCredentialId(editing.credentialId || '')
       setConfig(editing.config || {})
     } else {
       setName('')
       setPlatform('discord')
       setAgentId('')
+      setRouteMode('agent')
+      setChatroomId('')
       setCredentialId('')
       setConfig({})
     }
@@ -283,10 +299,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 }
@@ -305,19 +321,23 @@ export function ConnectorSheet() {
   useWs('connectors', pollWaStatus, isWaRunning ? 2000 : undefined)
 
   const handleSave = async () => {
-    if (!agentId) return
+    const hasTarget = routeMode === 'agent' ? !!agentId : !!chatroomId
+    if (!hasTarget) return
     setSaving(true)
+    const routePayload = routeMode === 'agent'
+      ? { agentId, chatroomId: null }
+      : { agentId: null, chatroomId }
     try {
       if (editing) {
-        await api('PUT', `/connectors/${editing.id}`, { name, agentId, credentialId: credentialId || null, config })
+        await api('PUT', `/connectors/${editing.id}`, { name, ...routePayload, credentialId: credentialId || null, config })
       } else {
-        await api('POST', '/connectors', { name: name || `${platformConfig?.label} Bot`, platform, agentId, credentialId: credentialId || null, config })
+        await api('POST', '/connectors', { name: name || `${platformConfig?.label} Bot`, platform, ...routePayload, credentialId: credentialId || null, config })
       }
       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 +360,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 +377,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 +394,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
@@ -456,21 +476,51 @@ export function ConnectorSheet() {
         />
       </div>
 
-      {/* Agent selector */}
+      {/* Route mode toggle + target selector */}
       <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>
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Route Messages To</label>
+        <div className="flex gap-1 mb-3 p-1 rounded-[10px] bg-white/[0.04] border border-white/[0.06]">
+          <button
+            type="button"
+            onClick={() => setRouteMode('agent')}
+            className={`flex-1 py-2 px-3 rounded-[8px] text-[13px] font-600 transition-all cursor-pointer border-none ${
+              routeMode === 'agent' ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'
+            }`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            Single Agent
+          </button>
+          <button
+            type="button"
+            onClick={() => setRouteMode('chatroom')}
+            className={`flex-1 py-2 px-3 rounded-[8px] text-[13px] font-600 transition-all cursor-pointer border-none ${
+              routeMode === 'chatroom' ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'
+            }`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            Chat Room
+          </button>
+        </div>
+        {routeMode === 'agent' ? (
+          <>
+            <p className="text-[12px] text-text-3/60 mb-2">Incoming messages will be handled by this agent</p>
+            <AgentPickerList
+              agents={agentList}
+              selected={agentId}
+              onSelect={(id) => setAgentId(id)}
+              showOrchBadge={true}
+            />
+          </>
+        ) : (
+          <>
+            <p className="text-[12px] text-text-3/60 mb-2">Incoming messages will be routed to a chat room with multiple agents</p>
+            <ChatroomPickerList
+              chatrooms={Object.values(chatrooms)}
+              selected={chatroomId}
+              onSelect={(id) => setChatroomId(id)}
+            />
+          </>
+        )}
       </div>
 
       {/* Bot token credential */}
@@ -495,7 +545,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 +597,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 +607,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 +780,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)
               }
@@ -749,8 +799,8 @@ export function ConnectorSheet() {
       {editing && editing.platform === 'whatsapp' && (editing.status === 'running' || waConnecting) && !qrDataUrl && !waAuthenticated && (
         <div className="mb-6 p-5 rounded-[14px] border border-white/[0.06] bg-white/[0.01] text-center">
           <div className="flex items-center justify-center gap-2 mb-1">
-            <span className="w-3 h-3 rounded-full border-2 border-[#3B82F6] border-t-transparent animate-spin" />
-            <span className="text-[13px] font-600 text-[#3B82F6]">
+            <span className="w-3 h-3 rounded-full border-2 border-blue-500 border-t-transparent animate-spin" />
+            <span className="text-[13px] font-600 text-blue-500">
               {waHasCreds ? 'Reconnecting...' : 'Waiting for QR code...'}
             </span>
           </div>
@@ -771,8 +821,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 +846,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 || (routeMode === 'agent' ? !agentId : !chatroomId)}
+        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>
   )
 }