fluxy-bot 0.1.16 → 0.1.17

package/client/src/App.tsx

@@ -29,15 +29,28 @@ function DashboardError() {
 export default function App() {
   const [chatOpen, setChatOpen] = useState(false);
   const [showOnboard, setShowOnboard] = useState(false);
+  const [botName, setBotName] = useState('Fluxy');
   const { ws, connected } = useWebSocket();
 
   useEffect(() => {
     fetch('/api/settings')
       .then((r) => r.json())
-      .then((s) => { if (s.onboard_complete !== 'true') setShowOnboard(true); })
+      .then((s) => {
+        if (s.onboard_complete !== 'true') setShowOnboard(true);
+        if (s.agent_name) setBotName(s.agent_name);
+      })
       .catch(() => setShowOnboard(true));
   }, []);
 
+  // Refresh bot name after onboarding completes
+  const handleOnboardComplete = () => {
+    setShowOnboard(false);
+    fetch('/api/settings')
+      .then((r) => r.json())
+      .then((s) => { if (s.agent_name) setBotName(s.agent_name); })
+      .catch(() => {});
+  };
+
   return (
     <>
       <ErrorBoundary fallback={<DashboardError />}>
@@ -55,13 +68,13 @@ export default function App() {
         >
           {/* 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="Fluxy" className="h-5 w-auto" />
-            <SheetTitle className="text-sm font-semibold">Fluxy</SheetTitle>
+            <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'}`}
             />
             <SheetDescription className="sr-only">
-              Chat with your Fluxy AI assistant
+              Chat with your {botName} AI assistant
             </SheetDescription>
           </div>
 
@@ -75,7 +88,7 @@ export default function App() {
       <FluxyFab onClick={() => setChatOpen((o) => !o)} />
 
       {/* Onboarding wizard overlay */}
-      {showOnboard && <OnboardWizard onComplete={() => setShowOnboard(false)} />}
+      {showOnboard && <OnboardWizard onComplete={handleOnboardComplete} />}
     </>
   );
 }

package/client/src/components/Chat/InputBar.tsx

@@ -1,9 +1,10 @@
-import { useState, useRef, useCallback, useEffect, type KeyboardEvent, type PointerEvent as RPointerEvent } from 'react';
-import { SendHorizontal, Mic, Square, Trash2, Paperclip, Camera } from 'lucide-react';
+import { useState, useRef, useCallback, useEffect, type KeyboardEvent, type PointerEvent as RPointerEvent, type ChangeEvent } from 'react';
+import { SendHorizontal, Mic, Square, Trash2, Paperclip, Camera, X } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
+import type { Attachment } from '../../hooks/useChat';
 
 interface Props {
-  onSend: (msg: string) => void;
+  onSend: (msg: string, attachments?: Attachment[]) => void;
   onStop: () => void;
   streaming: boolean;
 }
@@ -16,9 +17,11 @@ function formatTime(s: number) {
 
 export default function InputBar({ onSend, onStop, streaming }: Props) {
   const [text, setText] = useState('');
+  const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [isRecording, setIsRecording] = useState(false);
   const [recordingTime, setRecordingTime] = useState(0);
   const hasText = text.trim().length > 0;
+  const hasContent = hasText || attachments.length > 0;
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileRef = useRef<HTMLInputElement>(null);
@@ -51,11 +54,61 @@ export default function InputBar({ onSend, onStop, streaming }: Props) {
     dragRef.current = 0;
   }, []);
 
+  // ── File handling ──
+
+  const addFile = useCallback((file: File) => {
+    const isImage = file.type.startsWith('image/');
+    const isPdf = file.type === 'application/pdf';
+    if (!isImage && !isPdf) return; // Only images and PDFs allowed
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const preview = e.target?.result as string;
+      setAttachments((prev) => [
+        ...prev,
+        {
+          id: Math.random().toString(36).slice(2),
+          type: isImage ? 'image' : 'file',
+          name: file.name,
+          preview,
+        },
+      ]);
+    };
+    reader.readAsDataURL(file);
+  }, []);
+
+  const handleFileChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) return;
+    for (let i = 0; i < files.length; i++) addFile(files[i]);
+    e.target.value = ''; // Reset so same file can be re-selected
+  }, [addFile]);
+
+  const removeAttachment = useCallback((id: string) => {
+    setAttachments((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  // Handle paste for images
+  useEffect(() => {
+    const handlePaste = (e: ClipboardEvent) => {
+      if (!e.clipboardData?.items) return;
+      for (const item of e.clipboardData.items) {
+        if (item.type.startsWith('image/')) {
+          e.preventDefault();
+          const file = item.getAsFile();
+          if (file) addFile(file);
+        }
+      }
+    };
+    document.addEventListener('paste', handlePaste);
+    return () => document.removeEventListener('paste', handlePaste);
+  }, [addFile]);
+
   const handleSend = () => {
-    if (!hasText) return;
-    onSend(text);
+    if (!hasContent) return;
+    onSend(text, attachments.length > 0 ? attachments : undefined);
     setText('');
-    // Keep keyboard open after sending
+    setAttachments([]);
     requestAnimationFrame(() => textareaRef.current?.focus());
   };
 
@@ -66,14 +119,13 @@ export default function InputBar({ onSend, onStop, streaming }: Props) {
     }
   };
 
-  // ── Mic pointer handlers ──────────────────────────
+  // ── Mic pointer handlers ──
   const handleMicDown = useCallback((e: RPointerEvent) => {
-    e.preventDefault(); // prevent textarea blur → keeps keyboard up
+    e.preventDefault();
     startXRef.current = e.clientX;
     dragRef.current = 0;
     (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
 
-    // Hold delay — 200ms to distinguish click vs hold
     holdTimerRef.current = setTimeout(() => {
       isHolding.current = true;
       setIsRecording(true);
@@ -83,12 +135,10 @@ export default function InputBar({ onSend, onStop, streaming }: Props) {
 
   const handleMicMove = useCallback((e: RPointerEvent) => {
     if (!isHolding.current) return;
-    // Only track horizontal movement
     const dx = Math.min(0, e.clientX - startXRef.current);
     dragRef.current = dx;
     if (micRef.current) micRef.current.style.transform = `translateX(${dx}px)`;
 
-    // Auto-cancel when pointer nears trash icon
     if (trashRef.current) {
       const trashRect = trashRef.current.getBoundingClientRect();
       const trashCenterX = trashRect.left + trashRect.width / 2;
@@ -100,8 +150,8 @@ export default function InputBar({ onSend, onStop, streaming }: Props) {
 
   const handleMicUp = useCallback(() => {
     if (holdTimerRef.current) { clearTimeout(holdTimerRef.current); holdTimerRef.current = null; }
-    if (!isHolding.current) return; // was just a click — do nothing
-    stopRecording(false); // send audio
+    if (!isHolding.current) return;
+    stopRecording(false);
   }, [stopRecording]);
 
   const handleMicCancel = useCallback(() => {
@@ -113,63 +163,105 @@ export default function InputBar({ onSend, onStop, streaming }: Props) {
     <div className="shrink-0 p-3 relative">
       {/* ── Normal input (always mounted to keep keyboard alive) ── */}
       <div
-        className={`flex items-center gap-2 transition-opacity duration-100 ${
+        className={`flex flex-col transition-opacity duration-100 ${
           isRecording ? 'opacity-0 pointer-events-none' : 'opacity-100'
         }`}
       >
-        <div className="flex-1 flex items-center bg-white rounded-full px-4">
-          <textarea
-            ref={textareaRef}
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Type a message..."
-            rows={1}
-            className="flex-1 resize-none bg-transparent text-gray-900 py-3 text-sm outline-none placeholder:text-gray-400"
-          />
-          {/* Hidden file inputs for native PWA pickers */}
-          <input ref={fileRef} type="file" className="hidden" accept="*/*" />
-          <input ref={cameraRef} type="file" className="hidden" accept="image/*" capture="environment" />
-          <button
-            type="button"
-            onClick={() => fileRef.current?.click()}
-            className="shrink-0 p-1.5 text-gray-400 hover:text-gray-600 transition-colors"
-          >
-            <Paperclip className="h-4 w-4" />
-          </button>
-          <button
-            type="button"
-            onClick={() => cameraRef.current?.click()}
-            className="shrink-0 p-1.5 text-gray-400 hover:text-gray-600 transition-colors"
-          >
-            <Camera className="h-4 w-4" />
-          </button>
-        </div>
-        {streaming ? (
-          <button
-            onClick={onStop}
-            className="flex items-center justify-center h-12 w-12 shrink-0 rounded-full bg-destructive text-destructive-foreground transition-colors"
-          >
-            <Square className="h-4 w-4" />
-          </button>
-        ) : hasText ? (
-          <button
-            onClick={handleSend}
-            className="flex items-center justify-center h-12 w-12 shrink-0 rounded-full bg-white text-gray-900 transition-colors hover:bg-gray-100"
-          >
-            <SendHorizontal className="h-4 w-4" />
-          </button>
-        ) : (
-          <div
-            className="flex items-center justify-center h-12 w-12 shrink-0 rounded-full bg-white text-gray-900 transition-colors hover:bg-gray-100 cursor-pointer touch-none select-none"
-            onPointerDown={handleMicDown}
-            onPointerMove={handleMicMove}
-            onPointerUp={handleMicUp}
-            onPointerCancel={handleMicCancel}
-          >
-            <Mic className="h-4 w-4" />
+        {/* ── Attachment previews ── */}
+        <AnimatePresence>
+          {attachments.length > 0 && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.15 }}
+              className="overflow-hidden"
+            >
+              <div className="flex gap-2 px-4 pt-2 pb-1.5 flex-wrap">
+                {attachments.map((att) => (
+                  <div key={att.id} className="relative group flex-shrink-0">
+                    {att.type === 'image' ? (
+                      <img
+                        src={att.preview}
+                        alt={att.name}
+                        className="w-14 h-14 rounded-lg object-cover border border-white/10"
+                      />
+                    ) : (
+                      <div className="w-14 h-14 rounded-lg bg-white/5 border border-white/10 flex flex-col items-center justify-center gap-0.5 px-1">
+                        <svg className="w-5 h-5 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+                        </svg>
+                        <span className="text-[8px] text-muted-foreground truncate w-full text-center">{att.name.split('.').pop()}</span>
+                      </div>
+                    )}
+                    <button
+                      onClick={() => removeAttachment(att.id)}
+                      className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-black/80 border border-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                    >
+                      <X className="w-2.5 h-2.5 text-white" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <div className="flex items-center gap-2">
+          <div className="flex-1 flex items-center bg-white rounded-full px-4">
+            <textarea
+              ref={textareaRef}
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Type a message..."
+              rows={1}
+              className="flex-1 resize-none bg-transparent text-gray-900 py-3 text-sm outline-none placeholder:text-gray-400"
+            />
+            {/* Hidden file inputs for native PWA pickers */}
+            <input ref={fileRef} type="file" className="hidden" accept="image/*,.pdf" multiple onChange={handleFileChange} />
+            <input ref={cameraRef} type="file" className="hidden" accept="image/*" capture="environment" onChange={handleFileChange} />
+            <button
+              type="button"
+              onClick={() => fileRef.current?.click()}
+              className="shrink-0 p-1.5 text-gray-400 hover:text-gray-600 transition-colors"
+            >
+              <Paperclip className="h-4 w-4" />
+            </button>
+            <button
+              type="button"
+              onClick={() => cameraRef.current?.click()}
+              className="shrink-0 p-1.5 text-gray-400 hover:text-gray-600 transition-colors"
+            >
+              <Camera className="h-4 w-4" />
+            </button>
           </div>
-        )}
+          {streaming ? (
+            <button
+              onClick={onStop}
+              className="flex items-center justify-center h-12 w-12 shrink-0 rounded-full bg-destructive text-destructive-foreground transition-colors"
+            >
+              <Square className="h-4 w-4" />
+            </button>
+          ) : hasContent ? (
+            <button
+              onClick={handleSend}
+              className="flex items-center justify-center h-12 w-12 shrink-0 rounded-full bg-white text-gray-900 transition-colors hover:bg-gray-100"
+            >
+              <SendHorizontal className="h-4 w-4" />
+            </button>
+          ) : (
+            <div
+              className="flex items-center justify-center h-12 w-12 shrink-0 rounded-full bg-white text-gray-900 transition-colors hover:bg-gray-100 cursor-pointer touch-none select-none"
+              onPointerDown={handleMicDown}
+              onPointerMove={handleMicMove}
+              onPointerUp={handleMicUp}
+              onPointerCancel={handleMicCancel}
+            >
+              <Mic className="h-4 w-4" />
+            </div>
+          )}
+        </div>
       </div>
 
       {/* ── Recording overlay (absolute so no layout shift) ── */}

package/client/src/components/Chat/MessageBubble.tsx

@@ -6,23 +6,35 @@ import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 interface Props {
   role: 'user' | 'assistant';
   content: string;
+  timestamp?: string;
 }
 
-export default function MessageBubble({ role, content }: Props) {
+function formatTime(iso: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return '';
+  }
+}
+
+export default function MessageBubble({ role, content, timestamp }: Props) {
   const isUser = role === 'user';
+  const time = timestamp ? formatTime(timestamp) : '';
 
   if (isUser) {
     return (
-      <div className="flex justify-end">
+      <div className="flex flex-col items-end gap-0.5">
         <div className="max-w-[75%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap bg-primary text-primary-foreground">
           {content}
         </div>
+        {time && <span className="text-[10px] text-muted-foreground/50 px-1">{time}</span>}
       </div>
     );
   }
 
   return (
-    <div className="flex justify-start">
+    <div className="flex flex-col items-start gap-0.5">
       <div className="max-w-[75%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-muted text-foreground prose prose-sm prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
         <ReactMarkdown
           remarkPlugins={[remarkGfm]}
@@ -75,6 +87,7 @@ export default function MessageBubble({ role, content }: Props) {
           {content}
         </ReactMarkdown>
       </div>
+      {time && <span className="text-[10px] text-muted-foreground/50 px-1">{time}</span>}
     </div>
   );
 }

package/client/src/components/Chat/MessageList.tsx

@@ -46,7 +46,7 @@ export default function MessageList({ messages, streaming, streamBuffer, tools }
 
       <div className="space-y-3">
         {messages.map((msg) => (
-          <MessageBubble key={msg.id} role={msg.role} content={msg.content} />
+          <MessageBubble key={msg.id} role={msg.role} content={msg.content} timestamp={msg.timestamp} />
         ))}
 
         {/* Tool activity indicators */}

package/client/src/hooks/useChat.ts

@@ -1,10 +1,11 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, useRef } from 'react';
 import type { WsClient } from '../lib/ws-client';
 
 export interface ChatMessage {
   id: string;
   role: 'user' | 'assistant';
   content: string;
+  timestamp: string; // ISO string
 }
 
 export interface ToolActivity {
@@ -12,12 +13,59 @@ export interface ToolActivity {
   status: 'running' | 'done';
 }
 
+export interface Attachment {
+  id: string;
+  type: 'image' | 'file';
+  name: string;
+  preview: string; // base64 data URL
+}
+
+const CONV_KEY = 'fluxy_conversation_id';
+
 export function useChat(ws: WsClient | null) {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [conversationId, setConversationId] = useState<string | null>(null);
+  const [conversationId, setConversationId] = useState<string | null>(
+    () => localStorage.getItem(CONV_KEY),
+  );
   const [streaming, setStreaming] = useState(false);
   const [streamBuffer, setStreamBuffer] = useState('');
   const [tools, setTools] = useState<ToolActivity[]>([]);
+  const loaded = useRef(false);
+
+  // Load existing conversation messages on mount
+  useEffect(() => {
+    if (loaded.current || !conversationId) return;
+    loaded.current = true;
+    fetch(`/api/conversations/${conversationId}`)
+      .then((r) => {
+        if (!r.ok) throw new Error('not found');
+        return r.json();
+      })
+      .then((data) => {
+        if (data.messages?.length) {
+          setMessages(
+            data.messages
+              .filter((m: any) => m.role === 'user' || m.role === 'assistant')
+              .map((m: any) => ({
+                id: m.id,
+                role: m.role,
+                content: m.content,
+                timestamp: m.created_at,
+              })),
+          );
+        }
+      })
+      .catch(() => {
+        // Conversation gone — clear stale ID
+        localStorage.removeItem(CONV_KEY);
+        setConversationId(null);
+      });
+  }, [conversationId]);
+
+  // Persist conversationId to localStorage
+  useEffect(() => {
+    if (conversationId) localStorage.setItem(CONV_KEY, conversationId);
+  }, [conversationId]);
 
   useEffect(() => {
     if (!ws) return;
@@ -39,7 +87,15 @@ export function useChat(ws: WsClient | null) {
       }),
       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 }]);
+        setMessages((msgs) => [
+          ...msgs,
+          {
+            id: data.messageId || Date.now().toString(),
+            role: 'assistant',
+            content: data.content,
+            timestamp: new Date().toISOString(),
+          },
+        ]);
         setStreamBuffer('');
         setStreaming(false);
         setTools([]);
@@ -50,7 +106,12 @@ export function useChat(ws: WsClient | null) {
         setTools([]);
         setMessages((msgs) => [
           ...msgs,
-          { id: Date.now().toString(), role: 'assistant', content: `Error: ${data.error}` },
+          {
+            id: Date.now().toString(),
+            role: 'assistant',
+            content: `Error: ${data.error}`,
+            timestamp: new Date().toISOString(),
+          },
         ]);
       }),
     ];
@@ -59,12 +120,31 @@ export function useChat(ws: WsClient | null) {
   }, [ws]);
 
   const sendMessage = useCallback(
-    (content: string) => {
-      if (!ws || !content.trim()) return;
+    (content: string, attachments?: Attachment[]) => {
+      if (!ws || (!content.trim() && (!attachments || attachments.length === 0))) return;
 
-      const userMsg: ChatMessage = { id: Date.now().toString(), role: 'user', content };
+      const userMsg: ChatMessage = {
+        id: Date.now().toString(),
+        role: 'user',
+        content,
+        timestamp: new Date().toISOString(),
+      };
       setMessages((msgs) => [...msgs, userMsg]);
-      ws.send('user:message', { conversationId, content });
+
+      // Build WS payload
+      const payload: any = { conversationId, content };
+      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],
   );
@@ -83,6 +163,8 @@ export function useChat(ws: WsClient | null) {
     setStreamBuffer('');
     setStreaming(false);
     setTools([]);
+    localStorage.removeItem(CONV_KEY);
+    loaded.current = false;
   }, []);
 
   return { messages, streaming, streamBuffer, conversationId, tools, sendMessage, stopStreaming, newChat };