fluxy-bot 0.8.9 → 0.9.0

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

@@ -5,146 +5,122 @@ import TypingIndicator from './TypingIndicator';
 import ImageLightbox from './ImageLightbox';
 
 interface Props {
-    messages: ChatMessage[];
-    streaming: boolean;
-    streamBuffer: string;
-    tools: ToolActivity[];
-    hasMore?: boolean;
-    onLoadOlder?: () => void;
+  messages: ChatMessage[];
+  streaming: boolean;
+  streamBuffer: string;
+  tools: ToolActivity[];
+  hasMore?: boolean;
+  onLoadOlder?: () => void;
 }
 
-export default function MessageList({
-    messages,
-    streaming,
-    streamBuffer,
-    tools,
-    hasMore,
-    onLoadOlder
-}: Props) {
-    const bottomRef = useRef<HTMLDivElement>(null);
-    const scrollContainerRef = useRef<HTMLDivElement>(null);
-    const sentinelRef = useRef<HTMLDivElement>(null);
-    const isInitialLoad = useRef(true);
-    const [loadingOlder, setLoadingOlder] = useState(false);
-    const [lightbox, setLightbox] = useState<{
-        images: string[];
-        index: number;
-    } | null>(null);
-
-    const handleImageClick = useCallback((images: string[], index: number) => {
-        setLightbox({ images, index });
-    }, []);
-
-    // Scroll to bottom — instant on initial load, smooth afterwards
-    useEffect(() => {
-        if (!bottomRef.current) return;
-        if (isInitialLoad.current && messages.length > 0) {
-            bottomRef.current.scrollIntoView({
-                behavior: 'instant' as ScrollBehavior
-            });
-            isInitialLoad.current = false;
-        } else if (!isInitialLoad.current) {
-            bottomRef.current.scrollIntoView({ behavior: 'smooth' });
+export default function MessageList({ messages, streaming, streamBuffer, tools, hasMore, onLoadOlder }: Props) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const isInitialLoad = useRef(true);
+  const [loadingOlder, setLoadingOlder] = useState(false);
+  const [lightbox, setLightbox] = useState<{ images: string[]; index: number } | null>(null);
+
+  const handleImageClick = useCallback((images: string[], index: number) => {
+    setLightbox({ images, index });
+  }, []);
+
+  // Scroll to bottom — instant on initial load, smooth afterwards
+  useEffect(() => {
+    if (!bottomRef.current) return;
+    if (isInitialLoad.current && messages.length > 0) {
+      bottomRef.current.scrollIntoView({ behavior: 'instant' as ScrollBehavior });
+      isInitialLoad.current = false;
+    } else if (!isInitialLoad.current) {
+      bottomRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [messages, streamBuffer, tools, streaming]);
+
+  // IntersectionObserver for infinite scroll up
+  useEffect(() => {
+    if (!sentinelRef.current || !onLoadOlder) return;
+    const sentinel = sentinelRef.current;
+
+    const observer = new IntersectionObserver(
+      async (entries) => {
+        if (entries[0].isIntersecting && hasMore && !loadingOlder) {
+          const container = scrollContainerRef.current;
+          if (!container) return;
+
+          // Save scroll position before loading
+          const prevScrollHeight = container.scrollHeight;
+
+          setLoadingOlder(true);
+          await onLoadOlder();
+          setLoadingOlder(false);
+
+          // Restore scroll position after DOM update
+          requestAnimationFrame(() => {
+            const newScrollHeight = container.scrollHeight;
+            container.scrollTop += newScrollHeight - prevScrollHeight;
+          });
         }
-    }, [messages, streamBuffer, tools, streaming]);
-
-    // IntersectionObserver for infinite scroll up
-    useEffect(() => {
-        if (!sentinelRef.current || !onLoadOlder) return;
-        const sentinel = sentinelRef.current;
-
-        const observer = new IntersectionObserver(
-            async entries => {
-                if (entries[0].isIntersecting && hasMore && !loadingOlder) {
-                    const container = scrollContainerRef.current;
-                    if (!container) return;
-
-                    // Save scroll position before loading
-                    const prevScrollHeight = container.scrollHeight;
-
-                    setLoadingOlder(true);
-                    await onLoadOlder();
-                    setLoadingOlder(false);
-
-                    // Restore scroll position after DOM update
-                    requestAnimationFrame(() => {
-                        const newScrollHeight = container.scrollHeight;
-                        container.scrollTop +=
-                            newScrollHeight - prevScrollHeight;
-                    });
-                }
-            },
-            { root: scrollContainerRef.current, threshold: 0.1 }
-        );
-
-        observer.observe(sentinel);
-        return () => observer.disconnect();
-    }, [hasMore, loadingOlder, onLoadOlder]);
-
-    // Get the latest running tool name (only the current one)
-    const currentTool = tools.length > 0 ? tools[tools.length - 1] : null;
-    const currentToolName =
-        currentTool?.status === 'running' ? currentTool.name : undefined;
-
-    return (
-        <div
-            ref={scrollContainerRef}
-            className="flex-1 overflow-y-auto overflow-x-hidden p-4 flex flex-col min-h-0"
-        >
-            {/* Spacer pushes messages to the bottom when few */}
-            <div className="flex-1" />
-
-            {/* Sentinel for infinite scroll + loading spinner */}
-            {hasMore && (
-                <div ref={sentinelRef} className="flex justify-center py-2">
-                    {loadingOlder && (
-                        <div className="w-5 h-5 border-2 border-muted-foreground/20 border-t-muted-foreground/60 rounded-full animate-spin" />
-                    )}
-                </div>
-            )}
-
-            {messages.length === 0 && !streaming && (
-                <div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
-                    Start a conversation
-                </div>
-            )}
-
-            <div className="space-y-3">
-                {messages.map(msg => (
-                    <MessageBubble
-                        key={msg.id}
-                        role={msg.role}
-                        content={msg.content}
-                        timestamp={msg.timestamp}
-                        hasAttachments={msg.hasAttachments}
-                        audioData={msg.audioData}
-                        attachments={msg.attachments}
-                        onImageClick={handleImageClick}
-                    />
-                ))}
-
-                {/* Typing / streaming bubble — shown as soon as agent starts */}
-                {streaming && (
-                    <TypingIndicator
-                        text={streamBuffer}
-                        toolName={currentToolName}
-                    />
-                )}
-            </div>
-            <div ref={bottomRef} />
-
-            {lightbox && (
-                <ImageLightbox
-                    images={lightbox.images}
-                    index={lightbox.index}
-                    onClose={() => setLightbox(null)}
-                    onNavigate={i =>
-                        setLightbox(prev =>
-                            prev ? { ...prev, index: i } : null
-                        )
-                    }
-                />
-            )}
-        </div>
+      },
+      { root: scrollContainerRef.current, threshold: 0.1 },
     );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMore, loadingOlder, onLoadOlder]);
+
+  // Get the latest running tool name (only the current one)
+  const currentTool = tools.length > 0 ? tools[tools.length - 1] : null;
+  const currentToolName = currentTool?.status === 'running' ? currentTool.name : undefined;
+
+  return (
+    <div ref={scrollContainerRef} className="flex-1 overflow-y-auto overflow-x-hidden p-4 flex flex-col min-h-0">
+      {/* Spacer pushes messages to the bottom when few */}
+      <div className="flex-1" />
+
+      {/* Sentinel for infinite scroll + loading spinner */}
+      {hasMore && (
+        <div ref={sentinelRef} className="flex justify-center py-2">
+          {loadingOlder && (
+            <div className="w-5 h-5 border-2 border-muted-foreground/20 border-t-muted-foreground/60 rounded-full animate-spin" />
+          )}
+        </div>
+      )}
+
+      {messages.length === 0 && !streaming && (
+        <div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
+          Start a conversation
+        </div>
+      )}
+
+      <div className="space-y-3">
+        {messages.map((msg) => (
+          <MessageBubble
+            key={msg.id}
+            role={msg.role}
+            content={msg.content}
+            timestamp={msg.timestamp}
+            hasAttachments={msg.hasAttachments}
+            audioData={msg.audioData}
+            attachments={msg.attachments}
+            onImageClick={handleImageClick}
+          />
+        ))}
+
+        {/* Typing / streaming bubble — shown as soon as agent starts */}
+        {streaming && (
+          <TypingIndicator text={streamBuffer} toolName={currentToolName} />
+        )}
+      </div>
+      <div ref={bottomRef} />
+
+      {lightbox && (
+        <ImageLightbox
+          images={lightbox.images}
+          index={lightbox.index}
+          onClose={() => setLightbox(null)}
+          onNavigate={(i) => setLightbox((prev) => prev ? { ...prev, index: i } : null)}
+        />
+      )}
+    </div>
+  );
 }

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

@@ -1,59 +1,47 @@
 interface Props {
-    text: string;
-    toolName?: string;
+  text: string;
+  toolName?: string;
 }
 
 /** Friendly label for SDK tool names */
 function toolLabel(name: string): string {
-    const labels: Record<string, string> = {
-        Read: 'Reading file',
-        Write: 'Writing file',
-        Edit: 'Editing file',
-        Bash: 'Running command',
-        Grep: 'Searching code',
-        Glob: 'Finding files',
-        Task: 'Running task',
-        WebFetch: 'Fetching URL',
-        WebSearch: 'Searching web'
-    };
-    return labels[name] || `Using ${name}`;
+  const labels: Record<string, string> = {
+    Read: 'Reading file',
+    Write: 'Writing file',
+    Edit: 'Editing file',
+    Bash: 'Running command',
+    Grep: 'Searching code',
+    Glob: 'Finding files',
+    Task: 'Running task',
+    WebFetch: 'Fetching URL',
+    WebSearch: 'Searching web',
+  };
+  return labels[name] || `Using ${name}`;
 }
 
 export default function TypingIndicator({ text, toolName }: Props) {
-    return (
-        <div className="flex justify-start">
-            <div
-                className="max-w-[75%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-muted text-foreground break-words overflow-hidden"
-                style={{ overflowWrap: 'anywhere' }}
-            >
-                {text ? (
-                    <>
-                        <span className="whitespace-pre-wrap">{text}</span>
-                        <span className="inline-block w-2 h-4 ml-0.5 bg-muted-foreground animate-pulse" />
-                    </>
-                ) : (
-                    <span className="inline-flex items-center gap-1 h-5">
-                        <span
-                            className="w-1.5 h-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
-                            style={{ animationDelay: '0ms' }}
-                        />
-                        <span
-                            className="w-1.5 h-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
-                            style={{ animationDelay: '150ms' }}
-                        />
-                        <span
-                            className="w-1.5 h-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
-                            style={{ animationDelay: '300ms' }}
-                        />
-                    </span>
-                )}
-                {toolName && (
-                    <div className="flex items-center gap-1.5 mt-1 text-xs text-muted-foreground">
-                        <div className="w-2.5 h-2.5 border-[1.5px] border-muted-foreground/30 border-t-primary rounded-full animate-spin" />
-                        <span>{toolLabel(toolName)}...</span>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
+  return (
+    <div className="flex justify-start">
+      <div className="max-w-[75%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-muted text-foreground break-words overflow-hidden" style={{ overflowWrap: 'anywhere' }}>
+        {text ? (
+          <>
+            <span className="whitespace-pre-wrap">{text}</span>
+            <span className="inline-block w-2 h-4 ml-0.5 bg-muted-foreground animate-pulse" />
+          </>
+        ) : (
+          <span className="inline-flex items-center gap-1 h-5">
+            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/60 animate-bounce" style={{ animationDelay: '0ms' }} />
+            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/60 animate-bounce" style={{ animationDelay: '150ms' }} />
+            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/60 animate-bounce" style={{ animationDelay: '300ms' }} />
+          </span>
+        )}
+        {toolName && (
+          <div className="flex items-center gap-1.5 mt-1 text-xs text-muted-foreground">
+            <div className="w-2.5 h-2.5 border-[1.5px] border-muted-foreground/30 border-t-primary rounded-full animate-spin" />
+            <span>{toolLabel(toolName)}...</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }