fluxy-bot 0.2.30 → 0.2.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluxy-bot",
-  "version": "0.2.30",
+  "version": "0.2.32",
   "description": "Self-hosted AI bot — run your own AI assistant from anywhere",
   "type": "module",
   "license": "MIT",

package/supervisor/chat/fluxy-main.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom/client';
-import { MoreVertical, Trash2 } from 'lucide-react';
+import { ChevronRight, MoreVertical, Trash2, Wand2 } from 'lucide-react';
 import { WsClient } from './src/lib/ws-client';
 import { useFluxyChat } from './src/hooks/useFluxyChat';
+import OnboardWizard from './OnboardWizard';
 import MessageList from './src/components/Chat/MessageList';
 import InputBar from './src/components/Chat/InputBar';
 import './src/styles/globals.css';
@@ -13,6 +14,7 @@ function FluxyApp() {
   const [botName, setBotName] = useState('Fluxy');
   const [whisperEnabled, setWhisperEnabled] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  const [showWizard, setShowWizard] = useState(false);
   const [reloadTrigger, setReloadTrigger] = useState(0);
   const menuRef = useRef<HTMLDivElement>(null);
   const wasConnected = useRef(false);
@@ -90,6 +92,13 @@ function FluxyApp() {
     <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">
+        <button
+          onClick={() => window.parent?.postMessage({ type: 'fluxy:close' }, '*')}
+          className="flex items-center justify-center h-7 w-7 -ml-1 rounded-full text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
+          aria-label="Close chat"
+        >
+          <ChevronRight className="h-5 w-5" />
+        </button>
         <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'}`} />
@@ -103,6 +112,13 @@ function FluxyApp() {
           </button>
           {menuOpen && (
             <div className="absolute right-0 top-full mt-1 min-w-[160px] rounded-md border border-border bg-popover py-1 shadow-lg z-50">
+              <button
+                onClick={() => { setShowWizard(true); setMenuOpen(false); }}
+                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
+              >
+                <Wand2 className="h-4 w-4" />
+                Setup Wizard
+              </button>
               <button
                 onClick={() => { clearContext(); setMenuOpen(false); }}
                 className="flex w-full items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-white/[0.06] transition-colors"
@@ -120,6 +136,25 @@ function FluxyApp() {
         <MessageList messages={messages} streaming={streaming} streamBuffer={streamBuffer} tools={tools} />
         <InputBar onSend={sendMessage} onStop={stopStreaming} streaming={streaming} whisperEnabled={whisperEnabled} />
       </div>
+
+      {/* Setup Wizard overlay */}
+      {showWizard && (
+        <OnboardWizard
+          onComplete={() => {
+            setShowWizard(false);
+            // Reload settings (bot name, whisper, etc.)
+            fetch('/api/settings')
+              .then((r) => r.json())
+              .then((s) => {
+                if (s.agent_name) setBotName(s.agent_name);
+                setWhisperEnabled(s.whisper_enabled === 'true');
+              })
+              .catch(() => {});
+            // Notify dashboard so it can refresh
+            window.parent?.postMessage({ type: 'fluxy:onboard-complete' }, '*');
+          }}
+        />
+      )}
     </div>
   );
 }

package/supervisor/chat/src/components/Chat/InputBar.tsx

@@ -334,6 +334,15 @@ export default function InputBar({ onSend, onStop, streaming, whisperEnabled }:
               ref={textareaRef}
               value={text}
               onChange={(e) => setText(e.target.value)}
+              onKeyDown={(e) => {
+                // Desktop: Enter sends, Shift+Enter inserts newline
+                // Mobile: Enter always inserts newline (no hardware keyboard)
+                const isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+                if (e.key === 'Enter' && !e.shiftKey && !isMobile) {
+                  e.preventDefault();
+                  if (hasContent) handleSend();
+                }
+              }}
               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 overflow-y-auto"

package/supervisor/chat/src/components/Chat/MessageBubble.tsx

@@ -43,7 +43,7 @@ export default function MessageBubble({ role, content, timestamp, hasAttachments
     if (audioData) {
       return (
         <div className="flex flex-col items-end gap-0.5">
-          <div className="max-w-[85%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-primary text-primary-foreground">
+          <div className="max-w-[92%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-primary text-primary-foreground">
             <AudioBubble audioData={audioData} />
           </div>
           {time && <span className="text-[10px] text-muted-foreground/50 px-1">{time}</span>}
@@ -53,7 +53,7 @@ export default function MessageBubble({ role, content, timestamp, hasAttachments
 
     return (
       <div className="flex flex-col items-end gap-0.5">
-        <div className="max-w-[85%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap bg-primary text-primary-foreground break-words overflow-hidden" style={{ overflowWrap: 'anywhere' }}>
+        <div className="max-w-[92%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap bg-primary text-primary-foreground break-words overflow-hidden" style={{ overflowWrap: 'anywhere' }}>
           {/* Image thumbnails */}
           {imageUrls.length > 0 && (
             <div className="flex gap-1.5 flex-wrap mb-2">
@@ -90,7 +90,7 @@ export default function MessageBubble({ role, content, timestamp, hasAttachments
 
   return (
     <div className="flex flex-col items-start gap-0.5">
-      <div className="min-w-0 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 break-words overflow-hidden" style={{ maxWidth: '85%', overflowWrap: 'anywhere' }}>
+      <div className="min-w-0 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 break-words overflow-hidden" style={{ maxWidth: '92%', overflowWrap: 'anywhere' }}>
         <ReactMarkdown
           remarkPlugins={[remarkGfm]}
           components={{

package/supervisor/widget.js

@@ -1,15 +1,15 @@
 (function () {
   if (document.getElementById('fluxy-widget')) return;
 
-  var PANEL_WIDTH = '400px';
+  var PANEL_WIDTH = '480px';
 
   // ── Styles ──
   var style = document.createElement('style');
   style.textContent = [
-    '#fluxy-widget-bubble{position:fixed;bottom:24px;right:24px;z-index:99998;cursor:pointer;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .15s ease;-webkit-tap-highlight-color:transparent}',
+    '#fluxy-widget-bubble{position:fixed;bottom:24px;right:24px;z-index:99998;cursor:pointer;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .15s ease;-webkit-tap-highlight-color:transparent}',
     '#fluxy-widget-bubble:hover{transform:scale(1.1)}',
     '#fluxy-widget-bubble:active{transform:scale(0.95)}',
-    '#fluxy-widget-bubble video,#fluxy-widget-bubble img{height:44px;width:auto;pointer-events:none;-webkit-user-drag:none}',
+    '#fluxy-widget-bubble video,#fluxy-widget-bubble img{height:60px;width:auto;pointer-events:none;-webkit-user-drag:none}',
     '#fluxy-widget-backdrop{position:fixed;inset:0;z-index:99998;background:rgba(0,0,0,0.4);opacity:0;transition:opacity .2s ease;pointer-events:none}',
     '#fluxy-widget-backdrop.open{opacity:1;pointer-events:auto}',
     '#fluxy-widget-panel{position:fixed;top:0;right:0;bottom:0;z-index:99999;width:' + PANEL_WIDTH + ';max-width:100vw;transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 24px rgba(0,0,0,0.3);border-left:1px solid #3a3a3a;overflow:hidden}',
@@ -73,6 +73,11 @@
     if (e.key === 'Escape' && isOpen) toggle();
   });
 
+  // Close from iframe (e.g. close button inside chat)
+  window.addEventListener('message', function (e) {
+    if (e.data && e.data.type === 'fluxy:close' && isOpen) toggle();
+  });
+
   // Restore open state after HMR reload (so chat isn't disrupted)
   try {
     if (sessionStorage.getItem('fluxy_widget_open') === '1') {

package/workspace/client/src/App.tsx

@@ -77,7 +77,7 @@ export default function App() {
   return (
     <>
       <ErrorBoundary fallback={<DashboardError />}>
-        <DashboardLayout onOpenOnboard={() => setShowOnboard(true)}>
+        <DashboardLayout>
           <DashboardPage />
         </DashboardLayout>
       </ErrorBoundary>

package/workspace/client/src/components/Layout/DashboardHeader.tsx

@@ -1,26 +1,9 @@
-import { useState, useRef, useEffect } from 'react';
-import { Settings, Bell, Wand2 } from 'lucide-react';
+import { Bell } from 'lucide-react';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import MobileNav from './MobileNav';
 
-interface Props {
-  onOpenOnboard?: () => void;
-}
-
-export default function DashboardHeader({ onOpenOnboard }: Props) {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!menuOpen) return;
-    const handler = (e: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setMenuOpen(false);
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [menuOpen]);
-
+export default function DashboardHeader() {
   return (
     <header className="flex items-center justify-between px-4 md:px-6 py-3 md:py-4">
       {/* Left: hamburger (mobile) + logo */}
@@ -53,26 +36,6 @@ export default function DashboardHeader({ onOpenOnboard }: Props) {
 
       {/* Right: actions */}
       <div className="flex items-center gap-2">
-        {/* Settings with dropdown */}
-        <div className="relative" ref={menuRef}>
-          <button
-            onClick={() => setMenuOpen((o) => !o)}
-            className="flex items-center justify-center h-10 w-10 rounded-full bg-card border border-border text-muted-foreground hover:text-foreground transition-colors"
-          >
-            <Settings className="h-4 w-4" />
-          </button>
-          {menuOpen && (
-            <div className="absolute right-0 top-full mt-2 w-52 bg-card border border-border rounded-xl shadow-xl py-1.5 z-50">
-              <button
-                onClick={() => { onOpenOnboard?.(); setMenuOpen(false); }}
-                className="w-full flex items-center gap-3 px-4 py-2.5 text-[13px] text-foreground hover:bg-white/[0.04] transition-colors text-left"
-              >
-                <Wand2 className="h-4 w-4 text-muted-foreground" />
-                Setup Wizard
-              </button>
-            </div>
-          )}
-        </div>
         <button className="relative flex items-center justify-center h-10 w-10 rounded-full bg-card border border-border text-muted-foreground hover:text-foreground transition-colors">
           <Bell className="h-4 w-4" />
           <span className="absolute -top-0.5 -right-0.5 flex items-center justify-center h-4 w-4 rounded-full bg-destructive text-[10px] font-medium text-white">

package/workspace/client/src/components/Layout/DashboardLayout.tsx

@@ -4,13 +4,12 @@ import DashboardHeader from './DashboardHeader';
 
 interface Props {
   children: ReactNode;
-  onOpenOnboard?: () => void;
 }
 
-export default function DashboardLayout({ children, onOpenOnboard }: Props) {
+export default function DashboardLayout({ children }: Props) {
   return (
     <div className="flex h-dvh flex-col overflow-x-hidden">
-      <DashboardHeader onOpenOnboard={onOpenOnboard} />
+      <DashboardHeader />
       <div className="flex flex-1 overflow-hidden">
         {/* Desktop sidebar */}
         <div className="hidden md:flex shrink-0">