diff --git a/src/components/ai/AIChat.tsx b/src/components/ai/AIChat.tsx
new file mode 100644
index 0000000..389d843
--- /dev/null
+++ b/src/components/ai/AIChat.tsx
@@ -0,0 +1,337 @@
+/**
+ * AIChat - Conversation view with message timeline and input
+ */
+
+import { useState, useEffect, useRef, useCallback, memo } from "react";
+import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
+import { Loader2, User, Bot, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { aiService } from "@/services/ai-service";
+import type { AIConversation, AIMessage } from "@/services/db";
+import { AIMessageContent } from "./AIMessageContent";
+
+interface AIChatProps {
+ conversation: AIConversation;
+ onConversationUpdate?: (conversation: AIConversation) => void;
+}
+
+/**
+ * Format timestamp for display
+ */
+function formatTime(timestamp: number): string {
+ return new Date(timestamp).toLocaleTimeString(undefined, {
+ hour: "numeric",
+ minute: "2-digit",
+ });
+}
+
+/**
+ * Format date for day markers
+ */
+function formatDayMarker(timestamp: number): string {
+ const date = new Date(timestamp);
+ const today = new Date();
+ const yesterday = new Date(today);
+ yesterday.setDate(yesterday.getDate() - 1);
+
+ const dateOnly = new Date(
+ date.getFullYear(),
+ date.getMonth(),
+ date.getDate(),
+ );
+ const todayOnly = new Date(
+ today.getFullYear(),
+ today.getMonth(),
+ today.getDate(),
+ );
+ const yesterdayOnly = new Date(
+ yesterday.getFullYear(),
+ yesterday.getMonth(),
+ yesterday.getDate(),
+ );
+
+ if (dateOnly.getTime() === todayOnly.getTime()) return "Today";
+ if (dateOnly.getTime() === yesterdayOnly.getTime()) return "Yesterday";
+
+ return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+
+/**
+ * Check if two timestamps are on different days
+ */
+function isDifferentDay(t1: number, t2: number): boolean {
+ const d1 = new Date(t1);
+ const d2 = new Date(t2);
+ return (
+ d1.getFullYear() !== d2.getFullYear() ||
+ d1.getMonth() !== d2.getMonth() ||
+ d1.getDate() !== d2.getDate()
+ );
+}
+
+/**
+ * Single message component
+ */
+const MessageItem = memo(function MessageItem({
+ message,
+}: {
+ message: AIMessage;
+}) {
+ const isUser = message.role === "user";
+
+ return (
+
+
+ {isUser ? : }
+
+
+
+
+ {isUser ? "You" : "Assistant"}
+
+
+ {formatTime(message.timestamp)}
+
+ {message.isStreaming && (
+
+ )}
+
+
+
+
+ );
+});
+
+export function AIChat({ conversation, onConversationUpdate }: AIChatProps) {
+ const [messages, setMessages] = useState
([]);
+ const [input, setInput] = useState("");
+ const [isSending, setIsSending] = useState(false);
+ const [error, setError] = useState(null);
+ const virtuosoRef = useRef(null);
+ const inputRef = useRef(null);
+
+ // Load messages on conversation change
+ useEffect(() => {
+ loadMessages();
+ }, [conversation.id]);
+
+ const loadMessages = useCallback(async () => {
+ const loaded = await aiService.getMessages(conversation.id);
+ setMessages(loaded);
+ }, [conversation.id]);
+
+ // Poll for updates when streaming
+ useEffect(() => {
+ const hasStreaming = messages.some((m) => m.isStreaming);
+ if (!hasStreaming) return;
+
+ const interval = setInterval(async () => {
+ const loaded = await aiService.getMessages(conversation.id);
+ setMessages(loaded);
+
+ // Check if still streaming
+ const stillStreaming = loaded.some((m) => m.isStreaming);
+ if (!stillStreaming) {
+ clearInterval(interval);
+ }
+ }, 100);
+
+ return () => clearInterval(interval);
+ }, [messages, conversation.id]);
+
+ // Process messages for day markers
+ const messagesWithMarkers = messages.reduce<
+ Array<
+ | { type: "message"; data: AIMessage }
+ | { type: "day-marker"; data: string; timestamp: number }
+ >
+ >((acc, message, index) => {
+ if (index === 0) {
+ acc.push({
+ type: "day-marker",
+ data: formatDayMarker(message.timestamp),
+ timestamp: message.timestamp,
+ });
+ } else {
+ const prev = messages[index - 1];
+ if (isDifferentDay(prev.timestamp, message.timestamp)) {
+ acc.push({
+ type: "day-marker",
+ data: formatDayMarker(message.timestamp),
+ timestamp: message.timestamp,
+ });
+ }
+ }
+ acc.push({ type: "message", data: message });
+ return acc;
+ }, []);
+
+ const handleSend = useCallback(async () => {
+ if (!input.trim() || isSending) return;
+
+ const content = input.trim();
+ setInput("");
+ setError(null);
+ setIsSending(true);
+
+ // Optimistically add user message
+ const userMessage: AIMessage = {
+ id: crypto.randomUUID(),
+ conversationId: conversation.id,
+ role: "user",
+ content,
+ timestamp: Date.now(),
+ };
+ setMessages((prev) => [...prev, userMessage]);
+
+ try {
+ await aiService.sendMessage(
+ conversation.id,
+ content,
+ (_chunk, fullContent) => {
+ // Update messages as chunks arrive
+ setMessages((prev) => {
+ const last = prev[prev.length - 1];
+ if (last?.role === "assistant" && last.isStreaming) {
+ return [...prev.slice(0, -1), { ...last, content: fullContent }];
+ }
+ // Create new assistant message
+ return [
+ ...prev,
+ {
+ id: crypto.randomUUID(),
+ conversationId: conversation.id,
+ role: "assistant",
+ content: fullContent,
+ timestamp: Date.now(),
+ isStreaming: true,
+ },
+ ];
+ });
+ },
+ );
+
+ // Reload messages to get final state
+ await loadMessages();
+
+ // Notify parent of update (for title changes)
+ const updatedConv = await aiService.getConversation(conversation.id);
+ if (updatedConv && onConversationUpdate) {
+ onConversationUpdate(updatedConv);
+ }
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "Failed to send message");
+ // Reload messages to get actual state
+ await loadMessages();
+ } finally {
+ setIsSending(false);
+ }
+ }, [input, isSending, conversation.id, loadMessages, onConversationUpdate]);
+
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ handleSend();
+ }
+ },
+ [handleSend],
+ );
+
+ // Auto-resize textarea
+ const handleInputChange = useCallback(
+ (e: React.ChangeEvent) => {
+ setInput(e.target.value);
+ // Auto-resize
+ const textarea = e.target;
+ textarea.style.height = "auto";
+ textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+ },
+ [],
+ );
+
+ return (
+
+ {/* Message Timeline */}
+
+ {messagesWithMarkers.length > 0 ? (
+
{
+ if (item.type === "day-marker") {
+ return (
+
+
+ {item.data}
+
+
+ );
+ }
+ return ;
+ }}
+ style={{ height: "100%" }}
+ />
+ ) : (
+
+
Start a conversation...
+
+
+ {/* Error Message */}
+ {error && (
+
+
+
{error}
+
+
+ )}
+
+ {/* Input */}
+
+
+
+
+
+
+ Press Enter to send, Shift+Enter for new line
+
+
+
+
+
No conversations yet
+
+
(
+
+ {children}
+
+ ),
+ code: ({ className, children, ...props }) => {
+ const isInline = !className;
+ if (isInline) {
+ return (
+
+ {children}
+
+ );
+ }
+ return (
+
+ {children}
+
+ );
+ },
+ // Links
+ a: ({ href, children }) => (
+
+ {children}
+
+ ),
+ // Lists
+ ul: ({ children }) => (
+
+ ),
+ ol: ({ children }) => (
+ {children}
+ ),
+ // Paragraphs
+ p: ({ children }) => {children}
,
+ // Headings
+ h1: ({ children }) => (
+ {children}
+ ),
+ h2: ({ children }) => (
+ {children}
+ ),
+ h3: ({ children }) => (
+ {children}
+ ),
+ // Blockquotes
+ blockquote: ({ children }) => (
+
+ {children}
+
+ ),
+ // Tables
+ table: ({ children }) => (
+
+ ),
+ th: ({ children }) => (
+
+ {children}
+ |
+ ),
+ td: ({ children }) => (
+ {children} |
+ ),
+ }}
+ >
+ {content}
+
+
+
+
+
+ {provider ? "Edit Provider" : "Add AI Provider"}
+
+
+ Configure an OpenAI-compatible AI provider like PPQ.ai
+
+
+
+ {/* Error message */}
+ {error && (
+
+ {error}
+
+ )}
+
+ {/* Name */}
+
+
+ setName(e.target.value)}
+ placeholder="PPQ.ai"
+ />
+
+
+ {/* Base URL */}
+
+
+
setBaseUrl(e.target.value)}
+ placeholder="https://api.ppq.ai"
+ />
+
+ Base URL for the OpenAI-compatible API
+
+
+
+ {/* API Key */}
+
+
+ setApiKey(e.target.value)}
+ placeholder="sk-..."
+ />
+
+
+ {/* Test Connection */}
+
+
+
+
+
+ {/* Models */}
+ {models.length > 0 && (
+
+
+
+
+ {models.length} models available
+
+
+ )}
+
+ {/* Actions */}
+
+
+ {onCancel && (
+
+ )}
+ {provider && (
+
+ )}
+
+
+
+ {/* Sidebar */}
+
setView("settings")}
+ />
+
+ {/* Main Content */}
+
+ {/* Header */}
+
setView("settings")}
+ />
+
+ {/* Content */}
+
+ {view === "settings" ? (
+
setView("list")}
+ />
+ ) : view === "chat" && activeConversation ? (
+
+ ) : (
+
+
+
+
+ Select a conversation or start a new chat
+
+
+
+
+
+
+ {activeProvider && (
+ <>
+
+ {activeProvider.name}
+
+
+
+ )}
+
+
+