| |
| |
| |
| |
| |
| |
| |
| |
|
|
| import React, { useEffect, useRef, useState } from 'react' |
| import { motion, AnimatePresence } from 'framer-motion' |
| import { Bot, User, Mic, Image, Wrench, Brain, Zap } from 'lucide-react' |
| import clsx from 'clsx' |
| import useAppStore from '../../stores/appStore' |
| import MessageBubble from './MessageBubble' |
| import { useStreamingChat } from '../../hooks/useStreamingChat' |
|
|
| export default function StreamingMessageFeed() { |
| const { getActiveMessages, activeSessionId, isLoading } = useAppStore() |
| const messages = getActiveMessages() |
| const bottomRef = useRef(null) |
|
|
| |
| const { |
| sendMessage: wsSend, |
| isStreaming, |
| currentTokens, |
| toolEvents, |
| error: wsError, |
| } = useStreamingChat(activeSessionId) |
|
|
| |
| useEffect(() => { |
| bottomRef.current?.scrollIntoView({ behavior: 'smooth' }) |
| }, [messages.length, currentTokens, isLoading]) |
|
|
| if (messages.length === 0 && !isStreaming) { |
| return <StreamingEmptyState /> |
| } |
|
|
| return ( |
| <div className="h-full overflow-y-auto py-6 px-4 space-y-4"> |
| <AnimatePresence initial={false}> |
| {messages.map((msg) => ( |
| <motion.div |
| key={msg.id} |
| layout |
| initial={{ opacity: 0, y: 12 }} |
| animate={{ opacity: 1, y: 0 }} |
| transition={{ duration: 0.2 }} |
| > |
| <MessageRow message={msg} isUser={msg.role === 'user'} /> |
| </motion.div> |
| ))} |
| </AnimatePresence> |
| |
| {/* Live streaming bubble */} |
| <AnimatePresence> |
| {(isStreaming || isLoading) && ( |
| <motion.div |
| key="streaming" |
| initial={{ opacity: 0, y: 12 }} |
| animate={{ opacity: 1, y: 0 }} |
| exit={{ opacity: 0 }} |
| > |
| <StreamingBubble |
| tokens={currentTokens} |
| toolEvents={toolEvents} |
| isLoading={isLoading && !isStreaming} |
| /> |
| </motion.div> |
| )} |
| </AnimatePresence> |
| |
| <div ref={bottomRef} className="h-1" /> |
| </div> |
| ) |
| } |
|
|
| |
| function MessageRow({ message, isUser }) { |
| if (message.content === '__typing__') return <TypingBubble /> |
| return ( |
| <div className={clsx('flex gap-3', isUser ? 'flex-row-reverse' : 'flex-row')}> |
| <Avatar isUser={isUser} modality={message.modality} /> |
| <div className={clsx('max-w-[72%] flex flex-col gap-1', isUser ? 'items-end' : 'items-start')}> |
| <MessageBubble message={message} isUser={isUser} /> |
| {message.used_tools?.length > 0 && ( |
| <div className="flex gap-1 flex-wrap mt-1"> |
| {message.used_tools.map((tool) => ( |
| <ToolBadge key={tool} name={tool} /> |
| ))} |
| </div> |
| )} |
| </div> |
| </div> |
| ) |
| } |
|
|
| |
| function StreamingBubble({ tokens, toolEvents, isLoading }) { |
| return ( |
| <div className="flex gap-3 flex-row"> |
| <Avatar isUser={false} /> |
| <div className="max-w-[72%] flex flex-col gap-2"> |
| {/* Tool use events */} |
| <AnimatePresence> |
| {toolEvents.map((evt, i) => ( |
| <motion.div |
| key={i} |
| initial={{ opacity: 0, x: -4 }} |
| animate={{ opacity: 1, x: 0 }} |
| className="flex items-center gap-2 text-[11px] font-mono |
| text-jarvis-accent bg-jarvis-accent/8 |
| border border-jarvis-accent/20 rounded-lg px-3 py-1.5" |
| > |
| <Zap size={10} className="animate-pulse" /> |
| {evt} |
| </motion.div> |
| ))} |
| </AnimatePresence> |
| |
| {/* Token stream or typing indicator */} |
| <div className="msg-assistant"> |
| {isLoading ? ( |
| <TypingDots /> |
| ) : tokens && tokens !== '...' ? ( |
| <div className="prose-jarvis text-sm whitespace-pre-wrap break-words"> |
| {tokens} |
| <span className="inline-block w-0.5 h-4 bg-jarvis-accent ml-0.5 animate-pulse align-text-bottom" /> |
| </div> |
| ) : ( |
| <div className="flex items-center gap-2 text-jarvis-dim text-xs font-mono"> |
| <Brain size={12} className="animate-pulse text-jarvis-accent" /> |
| Reasoning… |
| </div> |
| )} |
| </div> |
| </div> |
| </div> |
| ) |
| } |
|
|
| |
| function Avatar({ isUser, modality }) { |
| const Icon = isUser ? User : Bot |
| return ( |
| <div className={clsx( |
| 'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5', |
| isUser |
| ? 'bg-jarvis-accent2/20 border border-jarvis-accent2/30' |
| : 'bg-jarvis-accent/10 border border-jarvis-accent/30', |
| )}> |
| <Icon size={14} className={isUser ? 'text-jarvis-accent2' : 'text-jarvis-accent'} /> |
| </div> |
| ) |
| } |
|
|
| function ToolBadge({ name }) { |
| return ( |
| <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] |
| bg-jarvis-accent/10 border border-jarvis-accent/20 |
| text-jarvis-accent font-mono"> |
| <Wrench size={8} /> |
| {name} |
| </span> |
| ) |
| } |
|
|
| function TypingDots() { |
| return ( |
| <div className="flex items-center gap-1 py-1"> |
| <span className="typing-dot" /> |
| <span className="typing-dot" /> |
| <span className="typing-dot" /> |
| </div> |
| ) |
| } |
|
|
| function TypingBubble() { |
| return ( |
| <div className="flex gap-3"> |
| <div className="w-8 h-8 rounded-lg bg-jarvis-accent/10 border border-jarvis-accent/30 |
| flex items-center justify-center flex-shrink-0"> |
| <Bot size={14} className="text-jarvis-accent" /> |
| </div> |
| <div className="msg-assistant"> |
| <TypingDots /> |
| </div> |
| </div> |
| ) |
| } |
|
|
| function StreamingEmptyState() { |
| return ( |
| <div className="h-full flex flex-col items-center justify-center gap-6 px-8 text-center"> |
| <div className="relative"> |
| <div className="w-20 h-20 rounded-2xl bg-jarvis-accent/10 border border-jarvis-accent/30 |
| flex items-center justify-center animate-glow"> |
| <Bot size={36} className="text-jarvis-accent" /> |
| </div> |
| <div className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-jarvis-success |
| border-2 border-jarvis-bg animate-pulse-slow" /> |
| </div> |
| <div> |
| <h2 className="font-display text-2xl font-bold text-jarvis-accent tracking-wider mb-2"> |
| JARVIS ONLINE |
| </h2> |
| <p className="text-jarvis-muted text-sm max-w-xs"> |
| Multi-modal AI assistant with real-time streaming. Speak, upload, or type. |
| </p> |
| </div> |
| <div className="grid grid-cols-3 gap-3 w-full max-w-sm"> |
| {[ |
| { icon: '💬', label: 'Text Chat', hint: 'Streaming responses' }, |
| { icon: '🖼️', label: 'Vision', hint: 'BLIP + CLIP analysis' }, |
| { icon: '🎤', label: 'Voice', hint: 'Whisper + TTS' }, |
| ].map(({ icon, label, hint }) => ( |
| <div key={label} |
| className="panel p-3 text-center hover:border-jarvis-accent/30 transition-colors"> |
| <div className="text-2xl mb-1">{icon}</div> |
| <p className="text-xs font-medium text-jarvis-text">{label}</p> |
| <p className="text-[10px] text-jarvis-dim">{hint}</p> |
| </div> |
| ))} |
| </div> |
| </div> |
| ) |
| } |
|
|
