npm - fluxy-bot - Versions diffs - 0.2.0 → 0.2.2 - Mend

fluxy-bot 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/client/fluxy-main.tsx +75 -0
package/client/fluxy.html +12 -0
package/client/index.html +1 -0
package/client/src/App.tsx +2 -80
package/client/src/hooks/useFluxyChat.ts +119 -0
package/dist/assets/index-BxQ8et35.js +64 -0
package/dist/assets/index-D2PQx64r.css +1 -0
package/dist/index.html +3 -2
package/dist/sw.js +1 -1
package/dist-fluxy/assets/fluxy-B49yi-07.js +53 -0
package/dist-fluxy/assets/fluxy-D2PQx64r.css +1 -0
package/dist-fluxy/fluxy.html +13 -0
package/dist-fluxy/fluxy.png +0 -0
package/dist-fluxy/fluxy_frame1.png +0 -0
package/dist-fluxy/fluxy_say_hi.webm +0 -0
package/dist-fluxy/fluxy_tilts.webm +0 -0
package/dist-fluxy/icons/claude.png +0 -0
package/dist-fluxy/icons/codex.png +0 -0
package/dist-fluxy/icons/openai.svg +15 -0
package/package.json +5 -2
package/shared/paths.ts +2 -1
package/supervisor/fluxy-agent.ts +169 -0
package/supervisor/index.ts +91 -21
package/supervisor/widget.js +75 -0
package/vite.fluxy.config.ts +19 -0
package/client/src/components/FluxyFab.tsx +0 -29
package/client/src/hooks/useWebSocket.ts +0 -22
package/dist/assets/index-D8wa5QyC.js +0 -100
package/dist/assets/index-Dpj8titN.css +0 -1
package/supervisor/fluxy.html +0 -94

package/client/fluxy-main.tsx ADDED Viewed

@@ -0,0 +1,75 @@
+import React, { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { Trash2 } from 'lucide-react';
+import { WsClient } from './src/lib/ws-client';
+import { useFluxyChat } from './src/hooks/useFluxyChat';
+import MessageList from './src/components/Chat/MessageList';
+import InputBar from './src/components/Chat/InputBar';
+import './src/styles/globals.css';
+function FluxyApp() {
+  const clientRef = useRef<WsClient | null>(null);
+  const [connected, setConnected] = useState(false);
+  const [botName, setBotName] = useState('Fluxy');
+  const [whisperEnabled, setWhisperEnabled] = useState(false);
+  useEffect(() => {
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = location.host;
+    const client = new WsClient(`${proto}//${host}/fluxy/ws`);
+    clientRef.current = client;
+    const unsub = client.onStatus(setConnected);
+    client.connect();
+    return () => {
+      unsub();
+      client.disconnect();
+    };
+  }, []);
+  // Try to load settings (will work when worker is up, fail silently when down)
+  useEffect(() => {
+    fetch('/api/settings')
+      .then((r) => r.json())
+      .then((s) => {
+        if (s.agent_name) setBotName(s.agent_name);
+        if (s.whisper_enabled === 'true') setWhisperEnabled(true);
+      })
+      .catch(() => {});
+  }, []);
+  const { messages, streaming, streamBuffer, tools, sendMessage, stopStreaming, clearContext } =
+    useFluxyChat(clientRef.current);
+  return (
+    <div className="flex flex-col h-dvh overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
+        <img src="/fluxy.png" alt={botName} className="h-5 w-auto" />
+        <span className="text-sm font-semibold">{botName}</span>
+        <div className={`h-2 w-2 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`} />
+        <div className="flex-1" />
+        <button
+          onClick={clearContext}
+          className="flex items-center justify-center h-7 w-7 rounded-full text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
+          title="Clear context"
+        >
+          <Trash2 className="h-4 w-4" />
+        </button>
+      </div>
+      {/* Chat body */}
+      <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+        <MessageList messages={messages} streaming={streaming} streamBuffer={streamBuffer} tools={tools} />
+        <InputBar onSend={sendMessage} onStop={stopStreaming} streaming={streaming} whisperEnabled={whisperEnabled} />
+      </div>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <FluxyApp />
+  </React.StrictMode>,
+);

package/client/fluxy.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content" />
+    <title>Fluxy Chat</title>
+  </head>
+  <body class="bg-background text-foreground">
+    <div id="root"></div>
+    <script type="module" src="/fluxy-main.tsx"></script>
+  </body>
+</html>

package/client/index.html CHANGED Viewed

@@ -9,5 +9,6 @@
   <body class="bg-background text-foreground">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
+    <script src="/fluxy/widget.js"></script>
   </body>
 </html>

package/client/src/App.tsx CHANGED Viewed

@@ -1,24 +1,8 @@
-import { useState, useEffect, useRef } from 'react';
-import { useWebSocket } from './hooks/useWebSocket';
-import { EllipsisVertical, Trash2 } from 'lucide-react';
+import { useState, useEffect } from 'react';
 import ErrorBoundary from './components/ErrorBoundary';
 import DashboardLayout from './components/Layout/DashboardLayout';
 import DashboardPage from './components/Dashboard/DashboardPage';
-import ChatView from './components/Chat/ChatView';
-import FluxyFab from './components/FluxyFab';
 import OnboardWizard from './components/Onboard/OnboardWizard';
-import {
-  Sheet,
-  SheetContent,
-  SheetTitle,
-  SheetDescription,
-} from './components/ui/sheet';
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from './components/ui/dropdown-menu';
 function DashboardError() {
   return (
@@ -34,36 +18,19 @@ function DashboardError() {
 }
 export default function App() {
-  const [chatOpen, setChatOpen] = useState(false);
   const [showOnboard, setShowOnboard] = useState(false);
-  const [botName, setBotName] = useState('Fluxy');
-  const [whisperEnabled, setWhisperEnabled] = useState(false);
-  const { ws, connected } = useWebSocket();
-  const clearContextRef = useRef<(() => void) | null>(null);
   useEffect(() => {
     fetch('/api/settings')
       .then((r) => r.json())
       .then((s) => {
         if (s.onboard_complete !== 'true') setShowOnboard(true);
-        if (s.agent_name) setBotName(s.agent_name);
-        if (s.whisper_enabled === 'true') setWhisperEnabled(true);
       })
-      .catch(() => {
-        // Network error — bot is unreachable, don't assume not onboarded
-      });
+      .catch(() => {});
   }, []);
-  // Refresh bot name + whisper after onboarding completes
   const handleOnboardComplete = () => {
     setShowOnboard(false);
-    fetch('/api/settings')
-      .then((r) => r.json())
-      .then((s) => {
-        if (s.agent_name) setBotName(s.agent_name);
-        setWhisperEnabled(s.whisper_enabled === 'true');
-      })
-      .catch(() => {});
   };
   return (
@@ -74,51 +41,6 @@ export default function App() {
         </DashboardLayout>
       </ErrorBoundary>
-      {/* Chat sheet — slides from right */}
-      <Sheet open={chatOpen} onOpenChange={setChatOpen}>
-        <SheetContent
-          side="right"
-          className="w-full sm:max-w-md !gap-0 !p-0 !border-l-0 !h-dvh overflow-hidden"
-          onOpenAutoFocus={(e) => e.preventDefault()}
-        >
-          {/* Header — pr-12 to avoid overlap with built-in X button */}
-          <div className="flex items-center gap-3 px-4 pr-12 py-3 border-b border-border shrink-0">
-            <img src="/fluxy.png" alt={botName} className="h-5 w-auto" />
-            <SheetTitle className="text-sm font-semibold">{botName}</SheetTitle>
-            <div
-              className={`h-2 w-2 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`}
-            />
-            <div className="flex-1" />
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <button
-                  className="flex items-center justify-center h-7 w-7 rounded-full text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
-                >
-                  <EllipsisVertical className="h-4 w-4" />
-                </button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" sideOffset={8}>
-                <DropdownMenuItem onClick={() => clearContextRef.current?.()}>
-                  <Trash2 className="h-3.5 w-3.5" />
-                  Clear Context
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <SheetDescription className="sr-only">
-              Chat with your {botName} AI assistant
-            </SheetDescription>
-          </div>
-          {/* Chat body — fills remaining height */}
-          <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
-            <ChatView ws={ws} clearContextRef={clearContextRef} whisperEnabled={whisperEnabled} />
-          </div>
-        </SheetContent>
-      </Sheet>
-      <FluxyFab onClick={() => setChatOpen((o) => !o)} />
-      {/* Onboarding wizard overlay */}
       {showOnboard && <OnboardWizard onComplete={handleOnboardComplete} />}
     </>
   );

package/client/src/hooks/useFluxyChat.ts ADDED Viewed

@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { WsClient } from '../lib/ws-client';
+import type { ChatMessage, ToolActivity, Attachment } from './useChat';
+/**
+ * Simplified chat hook for the standalone Fluxy chat app.
+ * In-memory only — no persistence API calls.
+ */
+export function useFluxyChat(ws: WsClient | null) {
+  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[]>([]);
+  useEffect(() => {
+    if (!ws) 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(),
+          },
+        ]);
+      }),
+    ];
+    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(() => {
+    setMessages([]);
+    setConversationId(null);
+    setStreamBuffer('');
+    setStreaming(false);
+    setTools([]);
+  }, []);
+  return { messages, streaming, streamBuffer, conversationId, tools, sendMessage, stopStreaming, clearContext };
+}