feat: add React UI with Vite, chat interface, streaming display

ui/src/App.css

@@ -0,0 +1,75 @@
+/* Obsidian-inspired dark theme */
+:root {
+  --bg-primary: #0d1117;
+  --bg-secondary: #161b22;
+  --bg-tertiary: #21262d;
+  --text-primary: #c9d1d9;
+  --text-secondary: #8b949e;
+  --accent-primary: #58a6ff;
+  --accent-secondary: #79c0ff;
+  --border: #30363d;
+  --user-bg: #1f6feb;
+  --assistant-bg: #21262d;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  height: 100vh;
+  overflow: hidden;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.header {
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-secondary);
+}
+
+.header h1 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.chat-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.input-container {
+  padding: 16px 24px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-secondary);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border);
+}

ui/src/App.tsx

@@ -0,0 +1,83 @@
+import { useState, useRef, useEffect } from 'react'
+import './App.css'
+import MessageList from './components/MessageList'
+import ChatInput from './components/ChatInput'
+import { useChatStream } from './hooks/useChatStream'
+
+export interface Message {
+  role: 'user' | 'assistant'
+  content: string
+}
+
+function App() {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [input, setInput] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const { sendMessage } = useChatStream()
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages])
+
+  const handleSend = async () => {
+    if (!input.trim() || isLoading) return
+
+    const userMessage = input.trim()
+    setInput('')
+    setMessages(prev => [...prev, { role: 'user', content: userMessage }])
+    setIsLoading(true)
+
+    let assistantContent = ''
+    
+    await sendMessage(userMessage, (chunk) => {
+      assistantContent += chunk
+      setMessages(prev => {
+        const newMessages = [...prev]
+        const lastMsg = newMessages[newMessages.length - 1]
+        if (lastMsg?.role === 'assistant') {
+          lastMsg.content = assistantContent
+        } else {
+          newMessages.push({ role: 'assistant', content: assistantContent })
+        }
+        return newMessages
+      })
+    })
+
+    setIsLoading(false)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
+    }
+  }
+
+  return (
+    <div className="app">
+      <header className="header">
+        <h1>Companion</h1>
+      </header>
+      <main className="chat-container">
+        <MessageList messages={messages} isLoading={isLoading} />
+        <div ref={messagesEndRef} />
+      </main>
+      <footer className="input-container">
+        <ChatInput
+          value={input}
+          onChange={setInput}
+          onSend={handleSend}
+          onKeyDown={handleKeyDown}
+          disabled={isLoading}
+        />
+      </footer>
+    </div>
+  )
+}
+
+export default App

ui/src/components/ChatInput.css

@@ -0,0 +1,60 @@
+/* ChatInput.css */
+.chat-input {
+  display: flex;
+  gap: 12px;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+  align-items: flex-end;
+}
+
+.chat-input textarea {
+  flex: 1;
+  padding: 12px 16px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 15px;
+  line-height: 1.5;
+  resize: none;
+  min-height: 48px;
+  max-height: 200px;
+  font-family: inherit;
+}
+
+.chat-input textarea:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+}
+
+.chat-input textarea::placeholder {
+  color: var(--text-secondary);
+}
+
+.chat-input textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.send-button {
+  padding: 12px 24px;
+  background: var(--accent-primary);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  height: 48px;
+}
+
+.send-button:hover:not(:disabled) {
+  background: var(--accent-secondary);
+}
+
+.send-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

ui/src/components/ChatInput.tsx

@@ -0,0 +1,34 @@
+import './ChatInput.css'
+
+interface ChatInputProps {
+  value: string
+  onChange: (value: string) => void
+  onSend: () => void
+  onKeyDown: (e: React.KeyboardEvent) => void
+  disabled: boolean
+}
+
+function ChatInput({ value, onChange, onSend, onKeyDown, disabled }: ChatInputProps) {
+  return (
+    <div className="chat-input">
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={onKeyDown}
+        placeholder="Type your message..."
+        disabled={disabled}
+        rows={1}
+      />
+      <button
+        type="button"
+        onClick={onSend}
+        disabled={disabled || !value.trim()}
+        className="send-button"
+      >
+        Send
+      </button>
+    </div>
+  )
+}
+
+export default ChatInput

ui/src/components/MessageList.css

@@ -0,0 +1,79 @@
+/* MessageList.css */
+.message-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 300px;
+  color: var(--text-secondary);
+  font-size: 16px;
+}
+
+.message {
+  display: flex;
+  width: 100%;
+}
+
+.message.user {
+  justify-content: flex-end;
+}
+
+.message.assistant {
+  justify-content: flex-start;
+}
+
+.message-content {
+  max-width: 80%;
+  padding: 12px 16px;
+  border-radius: 12px;
+  font-size: 15px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.message.user .message-content {
+  background: var(--user-bg);
+  color: white;
+  border-bottom-right-radius: 4px;
+}
+
+.message.assistant .message-content {
+  background: var(--assistant-bg);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+  border-bottom-left-radius: 4px;
+}
+
+.message-content.loading {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  min-width: 60px;
+  justify-content: center;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  background: var(--text-secondary);
+  border-radius: 50%;
+  animation: bounce 1.4s infinite ease-in-out;
+}
+
+.dot:nth-child(1) { animation-delay: -0.32s; }
+.dot:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0.6); }
+  40% { transform: scale(1); }
+}

ui/src/components/MessageList.tsx

@@ -0,0 +1,43 @@
+import { Message } from '../App'
+import './MessageList.css'
+
+interface MessageListProps {
+  messages: Message[]
+  isLoading: boolean
+}
+
+function MessageList({ messages, isLoading }: MessageListProps) {
+  if (messages.length === 0) {
+    return (
+      <div className="empty-state">
+        <p>What would you like to explore?</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="message-list">
+      {messages.map((message, index) => (
+        <div
+          key={index}
+          className={`message ${message.role === 'user' ? 'user' : 'assistant'}`}
+        >
+          <div className="message-content">
+            {message.content}
+          </div>
+        </div>
+      ))}
+      {isLoading && messages[messages.length - 1]?.role === 'user' && (
+        <div className="message assistant">
+          <div className="message-content loading">
+            <span className="dot"></span>
+            <span className="dot"></span>
+            <span className="dot"></span>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default MessageList

ui/src/hooks/useChatStream.ts

@@ -0,0 +1,72 @@
+import { useState } from 'react'
+
+const API_BASE = '/api'
+
+export function useChatStream() {
+  const [sessionId, setSessionId] = useState<string | null>(null)
+
+  const sendMessage = async (
+    message: string,
+    onChunk: (chunk: string) => void
+  ): Promise<void> => {
+    const response = await fetch(`${API_BASE}/chat`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        message,
+        session_id: sessionId,
+        stream: true,
+      }),
+    })
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    // Get session ID from response headers if present
+    const newSessionId = response.headers.get('X-Session-ID')
+    if (newSessionId) {
+      setSessionId(newSessionId)
+    }
+
+    const reader = response.body?.getReader()
+    const decoder = new TextDecoder()
+
+    if (!reader) {
+      throw new Error('No response body')
+    }
+
+    try {
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        const chunk = decoder.decode(value, { stream: true })
+        const lines = chunk.split('\n')
+
+        for (const line of lines) {
+          if (line.startsWith('data: ')) {
+            const data = line.slice(6)
+            if (data === '[DONE]') {
+              return
+            }
+            try {
+              const parsed = JSON.parse(data)
+              if (parsed.content) {
+                onChunk(parsed.content)
+              }
+            } catch {
+              // Ignore parse errors
+            }
+          }
+        }
+      }
+    } finally {
+      reader.releaseLock()
+    }
+  }
+
+  return { sendMessage, sessionId }
+}

ui/src/index.css

@@ -0,0 +1,18 @@
+/* index.css - Global styles */
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: dark;
+  
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  width: 100%;
+  height: 100vh;
+}

ui/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)