fluxy-bot 0.8.9 → 0.9.0

package/supervisor/chat/src/hooks/useFluxyChat.ts

@@ -1,11 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { WsClient } from '../lib/ws-client';
-import type {
-    ChatMessage,
-    ToolActivity,
-    Attachment,
-    StoredAttachment
-} from './useChat';
+import type { ChatMessage, ToolActivity, Attachment, StoredAttachment } from './useChat';
 import { authFetch } from '../lib/auth';
 
 /**
@@ -13,344 +8,259 @@ import { authFetch } from '../lib/auth';
  * Loads/persists messages via the DB (worker API).
  * Supports cross-device sync via chat:sync WS events.
  */
-export function useFluxyChat(
-    ws: WsClient | null,
-    triggerReload?: number,
-    enabled = true
-) {
-    const [messages, setMessages] = useState<ChatMessage[]>([]);
-    const [conversationId, setConversationId] = useState<string | null>(null);
-    const [streaming, setStreaming] = useState(false);
-    const [streamBuffer, setStreamBuffer] = useState('');
-    const [tools, setTools] = useState<ToolActivity[]>([]);
-    const [hasMore, setHasMore] = useState(false);
-    const loaded = useRef(false);
-    const conversationIdRef = useRef<string | null>(null);
-    const streamingRef = useRef(false);
-    const loadingOlder = useRef(false);
+export function useFluxyChat(ws: WsClient | null, triggerReload?: number, enabled = true) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [conversationId, setConversationId] = useState<string | null>(null);
+  const [streaming, setStreaming] = useState(false);
+  const [streamBuffer, setStreamBuffer] = useState('');
+  const [tools, setTools] = useState<ToolActivity[]>([]);
+  const [hasMore, setHasMore] = useState(false);
+  const loaded = useRef(false);
+  const conversationIdRef = useRef<string | null>(null);
+  const streamingRef = useRef(false);
+  const loadingOlder = useRef(false);
 
-    // Keep refs in sync with state
-    useEffect(() => {
-        conversationIdRef.current = conversationId;
-    }, [conversationId]);
-    useEffect(() => {
-        streamingRef.current = streaming;
-    }, [streaming]);
+  // Keep refs in sync with state
+  useEffect(() => { conversationIdRef.current = conversationId; }, [conversationId]);
+  useEffect(() => { streamingRef.current = streaming; }, [streaming]);
 
-    // Parse a raw DB message into a ChatMessage
-    const parseMessage = useCallback((m: any): ChatMessage => {
-        let audioData: string | undefined;
-        if (m.audio_data) {
-            if (m.audio_data.startsWith('data:')) {
-                audioData = m.audio_data;
-            } else if (m.audio_data.includes('/')) {
-                audioData = `/api/files/${m.audio_data}`;
-            } else {
-                audioData = `data:audio/webm;base64,${m.audio_data}`;
-            }
-        }
-
-        let attachments: StoredAttachment[] | undefined;
-        if (m.attachments) {
-            try {
-                attachments = JSON.parse(m.attachments);
-            } catch {
-                /* ignore */
-            }
-        }
-
-        return {
-            id: m.id,
-            role: m.role,
-            content: m.content,
-            timestamp: m.created_at,
-            audioData,
-            hasAttachments: !!(attachments && attachments.length > 0),
-            attachments
-        };
-    }, []);
+  // Parse a raw DB message into a ChatMessage
+  const parseMessage = useCallback((m: any): ChatMessage => {
+    let audioData: string | undefined;
+    if (m.audio_data) {
+      if (m.audio_data.startsWith('data:')) {
+        audioData = m.audio_data;
+      } else if (m.audio_data.includes('/')) {
+        audioData = `/api/files/${m.audio_data}`;
+      } else {
+        audioData = `data:audio/webm;base64,${m.audio_data}`;
+      }
+    }
 
-    // Load current conversation from DB (last 20 messages)
-    const loadFromDb = useCallback(async () => {
-        try {
-            const ctx = await authFetch('/api/context/current').then(r =>
-                r.json()
-            );
-            if (!ctx.conversationId) return;
-            setConversationId(ctx.conversationId);
-
-            const limit = 20;
-            const res = await authFetch(
-                `/api/conversations/${ctx.conversationId}/messages?limit=${limit}`
-            );
-            if (!res.ok) return;
-            const data = await res.json();
-            if (!data?.length) return;
-
-            const filtered = data.filter(
-                (m: any) => m.role === 'user' || m.role === 'assistant'
-            );
-            setMessages(filtered.map(parseMessage));
-            setHasMore(data.length >= limit);
-        } catch {
-            /* worker not ready yet */
-        }
-    }, [parseMessage]);
+    let attachments: StoredAttachment[] | undefined;
+    if (m.attachments) {
+      try { attachments = JSON.parse(m.attachments); } catch { /* ignore */ }
+    }
 
-    // Load older messages (cursor-based pagination)
-    const loadOlder = useCallback(async () => {
-        if (loadingOlder.current || !conversationIdRef.current) return;
-        loadingOlder.current = true;
-        try {
-            const oldestId = messages[0]?.id;
-            if (!oldestId) return;
-            const limit = 20;
-            const res = await authFetch(
-                `/api/conversations/${conversationIdRef.current}/messages?before=${oldestId}&limit=${limit}`
-            );
-            if (!res.ok) return;
-            const data = await res.json();
-            if (!data?.length) {
-                setHasMore(false);
-                return;
-            }
-
-            const filtered = data
-                .filter((m: any) => m.role === 'user' || m.role === 'assistant')
-                .map(parseMessage);
-            setMessages(prev => [...filtered, ...prev]);
-            if (data.length < limit) setHasMore(false);
-        } catch {
-            /* ignore */
-        } finally {
-            loadingOlder.current = false;
-        }
-    }, [messages, parseMessage]);
+    return {
+      id: m.id,
+      role: m.role,
+      content: m.content,
+      timestamp: m.created_at,
+      audioData,
+      hasAttachments: !!(attachments && attachments.length > 0),
+      attachments,
+    };
+  }, []);
 
-    // Load on mount (only when enabled/authenticated)
-    useEffect(() => {
-        if (!enabled || loaded.current) return;
-        loaded.current = true;
-        loadFromDb();
-    }, [enabled, loadFromDb]);
+  // Load current conversation from DB (last 20 messages)
+  const loadFromDb = useCallback(async () => {
+    try {
+      const ctx = await authFetch('/api/context/current').then((r) => r.json());
+      if (!ctx.conversationId) return;
+      setConversationId(ctx.conversationId);
 
-    // Reload on reconnect (triggerReload changes)
-    useEffect(() => {
-        if (enabled && triggerReload && triggerReload > 0) {
-            loadFromDb();
-        }
-    }, [enabled, triggerReload, loadFromDb]);
+      const limit = 20;
+      const res = await authFetch(`/api/conversations/${ctx.conversationId}/messages?limit=${limit}`);
+      if (!res.ok) return;
+      const data = await res.json();
+      if (!data?.length) return;
 
-    // Periodic DB sync after reconnect while streaming — catches the final bot:response
-    useEffect(() => {
-        if (!enabled || !triggerReload || triggerReload === 0 || !streaming)
-            return;
-        const interval = setInterval(() => {
-            if (!streamingRef.current) {
-                clearInterval(interval);
-                return;
-            }
-            loadFromDb();
-        }, 3000);
-        return () => clearInterval(interval);
-    }, [enabled, triggerReload, streaming, loadFromDb]);
+      const filtered = data.filter((m: any) => m.role === 'user' || m.role === 'assistant');
+      setMessages(filtered.map(parseMessage));
+      setHasMore(data.length >= limit);
+    } catch { /* worker not ready yet */ }
+  }, [parseMessage]);
 
-    useEffect(() => {
-        if (!ws) return;
+  // Load older messages (cursor-based pagination)
+  const loadOlder = useCallback(async () => {
+    if (loadingOlder.current || !conversationIdRef.current) return;
+    loadingOlder.current = true;
+    try {
+      const oldestId = messages[0]?.id;
+      if (!oldestId) return;
+      const limit = 20;
+      const res = await authFetch(`/api/conversations/${conversationIdRef.current}/messages?before=${oldestId}&limit=${limit}`);
+      if (!res.ok) return;
+      const data = await res.json();
+      if (!data?.length) { setHasMore(false); return; }
 
-        const unsubs = [
-            ws.on('bot:typing', () => {
-                setStreaming(true);
-                setTools([]);
-            }),
-            ws.on('bot:token', (data: { token: string }) => {
-                setStreamBuffer(buf => buf + data.token);
-            }),
-            ws.on('bot:tool', (data: { name: string; status?: string }) => {
-                setTools(prev => {
-                    const existing = prev.find(
-                        t => t.name === data.name && t.status === 'running'
-                    );
-                    if (existing) return prev;
-                    return [...prev, { name: data.name, status: 'running' }];
-                });
-            }),
-            ws.on(
-                'bot:response',
-                (data: {
-                    conversationId: string;
-                    messageId?: string;
-                    content: string;
-                }) => {
-                    setConversationId(data.conversationId);
-                    setMessages(msgs => [
-                        ...msgs,
-                        {
-                            id: data.messageId || Date.now().toString(),
-                            role: 'assistant',
-                            content: data.content,
-                            timestamp: new Date().toISOString()
-                        }
-                    ]);
-                    setStreamBuffer('');
-                    setStreaming(false);
-                    setTools([]);
-                }
-            ),
-            ws.on('bot:error', (data: { error: string }) => {
-                setStreamBuffer('');
-                setStreaming(false);
-                setTools([]);
-                setMessages(msgs => [
-                    ...msgs,
-                    {
-                        id: Date.now().toString(),
-                        role: 'assistant',
-                        content: `Error: ${data.error}`,
-                        timestamp: new Date().toISOString()
-                    }
-                ]);
-            }),
-            // Cross-device sync: append message from another client
-            ws.on(
-                'chat:sync',
-                (data: {
-                    conversationId: string;
-                    message: {
-                        role: string;
-                        content: string;
-                        timestamp: string;
-                    };
-                }) => {
-                    if (
-                        conversationIdRef.current &&
-                        data.conversationId !== conversationIdRef.current
-                    )
-                        return;
-                    setMessages(msgs => [
-                        ...msgs,
-                        {
-                            id: Date.now().toString(),
-                            role: data.message.role as 'user' | 'assistant',
-                            content: data.message.content,
-                            timestamp: data.message.timestamp
-                        }
-                    ]);
-                }
-            ),
-            // Server created a new conversation
-            ws.on(
-                'chat:conversation-created',
-                (data: { conversationId: string }) => {
-                    setConversationId(data.conversationId);
-                }
-            ),
-            // Server sends current streaming state on (re)connect
-            ws.on(
-                'chat:state',
-                (data: {
-                    streaming: boolean;
-                    conversationId?: string;
-                    buffer?: string;
-                }) => {
-                    if (data.streaming) {
-                        setStreaming(true);
-                        if (data.conversationId)
-                            setConversationId(data.conversationId);
-                        if (data.buffer) setStreamBuffer(data.buffer);
-                    }
-                }
-            ),
-            // Context cleared (from any client)
-            ws.on('chat:cleared', () => {
-                setMessages([]);
-                setConversationId(null);
-                setStreamBuffer('');
-                setStreaming(false);
-                setTools([]);
-                loaded.current = false;
-            })
-        ];
+      const filtered = data
+        .filter((m: any) => m.role === 'user' || m.role === 'assistant')
+        .map(parseMessage);
+      setMessages((prev) => [...filtered, ...prev]);
+      if (data.length < limit) setHasMore(false);
+    } catch { /* ignore */ } finally {
+      loadingOlder.current = false;
+    }
+  }, [messages, parseMessage]);
 
-        return () => unsubs.forEach(u => u());
-    }, [ws]);
+  // Load on mount (only when enabled/authenticated)
+  useEffect(() => {
+    if (!enabled || loaded.current) return;
+    loaded.current = true;
+    loadFromDb();
+  }, [enabled, loadFromDb]);
 
-    const sendMessage = useCallback(
-        (content: string, attachments?: Attachment[], audioData?: string) => {
-            if (
-                !ws ||
-                (!content.trim() && (!attachments || attachments.length === 0))
-            )
-                return;
+  // Reload on reconnect (triggerReload changes)
+  useEffect(() => {
+    if (enabled && triggerReload && triggerReload > 0) {
+      loadFromDb();
+    }
+  }, [enabled, triggerReload, loadFromDb]);
 
-            const userMsg: ChatMessage = {
-                id: Date.now().toString(),
-                role: 'user',
-                content,
-                timestamp: new Date().toISOString(),
-                hasAttachments: !!(attachments && attachments.length > 0),
-                audioData: audioData
-                    ? audioData.startsWith('data:')
-                        ? audioData
-                        : `data:audio/webm;base64,${audioData}`
-                    : undefined
-            };
-            setMessages(msgs => [...msgs, userMsg]);
+  // Periodic DB sync after reconnect while streaming — catches the final bot:response
+  useEffect(() => {
+    if (!enabled || !triggerReload || triggerReload === 0 || !streaming) return;
+    const interval = setInterval(() => {
+      if (!streamingRef.current) {
+        clearInterval(interval);
+        return;
+      }
+      loadFromDb();
+    }, 3000);
+    return () => clearInterval(interval);
+  }, [enabled, triggerReload, streaming, loadFromDb]);
 
-            const payload: any = { conversationId, content };
-            if (audioData) {
-                payload.audioData = audioData.includes(',')
-                    ? audioData.split(',')[1]
-                    : audioData;
-            }
-            if (attachments?.length) {
-                payload.attachments = attachments.map(att => {
-                    const match = att.preview.match(
-                        /^data:([^;]+);base64,(.+)$/
-                    );
-                    return {
-                        type: att.type,
-                        name: att.name,
-                        mediaType: match?.[1] || 'application/octet-stream',
-                        data: match?.[2] || ''
-                    };
-                });
-            }
-            ws.send('user:message', payload);
-        },
-        [ws, conversationId]
-    );
+  useEffect(() => {
+    if (!ws) return;
 
-    const stopStreaming = useCallback(() => {
-        if (!ws) return;
-        ws.send('user:stop', { conversationId });
+    const unsubs = [
+      ws.on('bot:typing', () => {
+        setStreaming(true);
+        setTools([]);
+      }),
+      ws.on('bot:token', (data: { token: string }) => {
+        setStreamBuffer((buf) => buf + data.token);
+      }),
+      ws.on('bot:tool', (data: { name: string; status?: string }) => {
+        setTools((prev) => {
+          const existing = prev.find((t) => t.name === data.name && t.status === 'running');
+          if (existing) return prev;
+          return [...prev, { name: data.name, status: 'running' }];
+        });
+      }),
+      ws.on('bot:response', (data: { conversationId: string; messageId?: string; content: string }) => {
+        setConversationId(data.conversationId);
+        setMessages((msgs) => [
+          ...msgs,
+          {
+            id: data.messageId || Date.now().toString(),
+            role: 'assistant',
+            content: data.content,
+            timestamp: new Date().toISOString(),
+          },
+        ]);
+        setStreamBuffer('');
         setStreaming(false);
+        setTools([]);
+      }),
+      ws.on('bot:error', (data: { error: string }) => {
         setStreamBuffer('');
+        setStreaming(false);
         setTools([]);
-    }, [ws, conversationId]);
-
-    const clearContext = useCallback(() => {
-        // Send clear to server (which broadcasts to all clients + clears Agent SDK session)
-        if (ws) ws.send('user:clear-context', {});
-        // Optimistic local clear
+        setMessages((msgs) => [
+          ...msgs,
+          {
+            id: Date.now().toString(),
+            role: 'assistant',
+            content: `Error: ${data.error}`,
+            timestamp: new Date().toISOString(),
+          },
+        ]);
+      }),
+      // Cross-device sync: append message from another client
+      ws.on('chat:sync', (data: { conversationId: string; message: { role: string; content: string; timestamp: string } }) => {
+        if (conversationIdRef.current && data.conversationId !== conversationIdRef.current) return;
+        setMessages((msgs) => [
+          ...msgs,
+          {
+            id: Date.now().toString(),
+            role: data.message.role as 'user' | 'assistant',
+            content: data.message.content,
+            timestamp: data.message.timestamp,
+          },
+        ]);
+      }),
+      // Server created a new conversation
+      ws.on('chat:conversation-created', (data: { conversationId: string }) => {
+        setConversationId(data.conversationId);
+      }),
+      // Server sends current streaming state on (re)connect
+      ws.on('chat:state', (data: { streaming: boolean; conversationId?: string; buffer?: string }) => {
+        if (data.streaming) {
+          setStreaming(true);
+          if (data.conversationId) setConversationId(data.conversationId);
+          if (data.buffer) setStreamBuffer(data.buffer);
+        }
+      }),
+      // Context cleared (from any client)
+      ws.on('chat:cleared', () => {
         setMessages([]);
         setConversationId(null);
         setStreamBuffer('');
         setStreaming(false);
         setTools([]);
         loaded.current = false;
-    }, [ws]);
+      }),
+    ];
 
-    return {
-        messages,
-        streaming,
-        streamBuffer,
-        conversationId,
-        tools,
-        hasMore,
-        loadOlder,
-        sendMessage,
-        stopStreaming,
-        clearContext
-    };
+    return () => unsubs.forEach((u) => u());
+  }, [ws]);
+
+  const sendMessage = useCallback(
+    (content: string, attachments?: Attachment[], audioData?: string) => {
+      if (!ws || (!content.trim() && (!attachments || attachments.length === 0))) return;
+
+      const userMsg: ChatMessage = {
+        id: Date.now().toString(),
+        role: 'user',
+        content,
+        timestamp: new Date().toISOString(),
+        hasAttachments: !!(attachments && attachments.length > 0),
+        audioData: audioData ? (audioData.startsWith('data:') ? audioData : `data:audio/webm;base64,${audioData}`) : undefined,
+      };
+      setMessages((msgs) => [...msgs, userMsg]);
+
+      const payload: any = { conversationId, content };
+      if (audioData) {
+        payload.audioData = audioData.includes(',') ? audioData.split(',')[1] : audioData;
+      }
+      if (attachments?.length) {
+        payload.attachments = attachments.map((att) => {
+          const match = att.preview.match(/^data:([^;]+);base64,(.+)$/);
+          return {
+            type: att.type,
+            name: att.name,
+            mediaType: match?.[1] || 'application/octet-stream',
+            data: match?.[2] || '',
+          };
+        });
+      }
+      ws.send('user:message', payload);
+    },
+    [ws, conversationId],
+  );
+
+  const stopStreaming = useCallback(() => {
+    if (!ws) return;
+    ws.send('user:stop', { conversationId });
+    setStreaming(false);
+    setStreamBuffer('');
+    setTools([]);
+  }, [ws, conversationId]);
+
+  const clearContext = useCallback(() => {
+    // Send clear to server (which broadcasts to all clients + clears Agent SDK session)
+    if (ws) ws.send('user:clear-context', {});
+    // Optimistic local clear
+    setMessages([]);
+    setConversationId(null);
+    setStreamBuffer('');
+    setStreaming(false);
+    setTools([]);
+    loaded.current = false;
+  }, [ws]);
+
+  return { messages, streaming, streamBuffer, conversationId, tools, hasMore, loadOlder, sendMessage, stopStreaming, clearContext };
 }