@wener/mcps 1.0.1

package/lib/web/ChatPage.js

@@ -0,0 +1,827 @@
+'use client';
+import { Combobox } from '@base-ui/react/combobox';
+import { cjk } from '@streamdown/cjk';
+import { code } from '@streamdown/code';
+import { math } from '@streamdown/math';
+import { Brain, Check, ChevronDown, ChevronUp, Clock, Copy, Edit2, ImagePlus, Menu, MessageSquarePlus, RefreshCw, Send, Settings, Square, Trash2, Wrench, X, XCircle, Zap } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState, memo } from 'react';
+import { Streamdown } from 'streamdown';
+// Streamdown Markdown component
+const MarkdownContent = /*#__PURE__*/ memo(({ children, className })=>/*#__PURE__*/ React.createElement(Streamdown, {
+        className: className,
+        plugins: {
+            code,
+            math,
+            cjk
+        }
+    }, children), (prev, next)=>prev.children === next.children);
+MarkdownContent.displayName = 'MarkdownContent';
+// Tool Call Display
+function ToolCallDisplay({ toolCall }) {
+    const [isOpen, setIsOpen] = useState(false);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "border border-base-300 rounded-lg my-2 overflow-hidden bg-base-100"
+    }, /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        className: "w-full flex items-center justify-between p-2 hover:bg-base-200",
+        onClick: ()=>setIsOpen(!isOpen)
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "flex items-center gap-2"
+    }, toolCall.status === 'completed' ? /*#__PURE__*/ React.createElement(Check, {
+        className: "w-3.5 h-3.5 text-success"
+    }) : toolCall.status === 'error' ? /*#__PURE__*/ React.createElement(XCircle, {
+        className: "w-3.5 h-3.5 text-error"
+    }) : /*#__PURE__*/ React.createElement(Clock, {
+        className: "w-3.5 h-3.5 text-warning animate-pulse"
+    }), /*#__PURE__*/ React.createElement(Wrench, {
+        className: "w-3.5 h-3.5 text-base-content/60"
+    }), /*#__PURE__*/ React.createElement("span", {
+        className: "font-mono text-sm"
+    }, toolCall.name)), isOpen ? /*#__PURE__*/ React.createElement(ChevronUp, {
+        className: "w-4 h-4"
+    }) : /*#__PURE__*/ React.createElement(ChevronDown, {
+        className: "w-4 h-4"
+    })), isOpen && /*#__PURE__*/ React.createElement("div", {
+        className: "p-2 space-y-2 text-xs border-t border-base-300"
+    }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
+        className: "font-semibold text-base-content/70 mb-1"
+    }, "Arguments:"), /*#__PURE__*/ React.createElement("pre", {
+        className: "bg-base-200 p-2 rounded overflow-auto max-h-32"
+    }, JSON.stringify(toolCall.arguments, null, 2))), toolCall.result !== undefined && /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
+        className: "font-semibold text-base-content/70 mb-1"
+    }, "Result:"), /*#__PURE__*/ React.createElement("pre", {
+        className: "bg-base-200 p-2 rounded overflow-auto max-h-32"
+    }, typeof toolCall.result === 'string' ? toolCall.result : JSON.stringify(toolCall.result, null, 2))), toolCall.error && /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
+        className: "font-semibold text-error mb-1"
+    }, "Error:"), /*#__PURE__*/ React.createElement("pre", {
+        className: "bg-error/10 text-error p-2 rounded"
+    }, toolCall.error))));
+}
+// Reasoning/Thinking Display
+function ReasoningDisplay({ content, isStreaming }) {
+    const [isOpen, setIsOpen] = useState(true);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "border border-base-300 rounded-lg my-2 overflow-hidden bg-base-100"
+    }, /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        className: "w-full flex items-center justify-between p-2 hover:bg-base-200",
+        onClick: ()=>setIsOpen(!isOpen)
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "flex items-center gap-2 text-base-content/70"
+    }, /*#__PURE__*/ React.createElement(Brain, {
+        className: `w-4 h-4 ${isStreaming ? 'animate-pulse' : ''}`
+    }), /*#__PURE__*/ React.createElement("span", {
+        className: "text-sm"
+    }, isStreaming ? 'Thinking...' : 'Reasoning')), isOpen ? /*#__PURE__*/ React.createElement(ChevronUp, {
+        className: "w-4 h-4"
+    }) : /*#__PURE__*/ React.createElement(ChevronDown, {
+        className: "w-4 h-4"
+    })), isOpen && /*#__PURE__*/ React.createElement("div", {
+        className: "p-3 text-sm text-base-content/80 prose prose-sm max-w-none border-t border-base-300"
+    }, /*#__PURE__*/ React.createElement(MarkdownContent, null, content || '...')));
+}
+// Helper functions
+function generateSessionId() {
+    return `chat-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function generateTitle(messages) {
+    const firstUserMessage = messages.find((m)=>m.role === 'user');
+    if (firstUserMessage) {
+        const content = firstUserMessage.content.slice(0, 50);
+        return content.length < firstUserMessage.content.length ? `${content}...` : content;
+    }
+    return 'New Chat';
+}
+function loadSessions() {
+    try {
+        const data = localStorage.getItem('mcps-chat-sessions');
+        if (data) return JSON.parse(data);
+    } catch (e) {
+        console.error('Failed to load sessions:', e);
+    }
+    return [];
+}
+function saveSessions(sessions) {
+    try {
+        localStorage.setItem('mcps-chat-sessions', JSON.stringify(sessions));
+    } catch (e) {
+        console.error('Failed to save sessions:', e);
+    }
+}
+function loadSettings() {
+    try {
+        const data = localStorage.getItem('mcps-chat-settings');
+        if (data) return {
+            ...defaultSettings,
+            ...JSON.parse(data)
+        };
+    } catch (e) {
+        console.error('Failed to load settings:', e);
+    }
+    return defaultSettings;
+}
+function saveSettings(settings) {
+    try {
+        localStorage.setItem('mcps-chat-settings', JSON.stringify(settings));
+    } catch (e) {
+        console.error('Failed to save settings:', e);
+    }
+}
+const defaultSettings = {
+    temperature: 0.7,
+    topP: 1.0,
+    topK: 40,
+    maxTokens: 4096,
+    mcpServers: []
+};
+export function ChatPage() {
+    const [models, setModels] = useState([]);
+    const [selectedModel, setSelectedModel] = useState('');
+    const [input, setInput] = useState('');
+    const [images, setImages] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [sessions, setSessions] = useState(()=>loadSessions());
+    const [currentSessionId, setCurrentSessionId] = useState(null);
+    const [showSidebar, setShowSidebar] = useState(true);
+    const [showSettings, setShowSettings] = useState(false);
+    const [editingMessageId, setEditingMessageId] = useState(null);
+    const [editContent, setEditContent] = useState('');
+    const [mcpServers, setMcpServers] = useState([]);
+    const [settings, setSettings] = useState(()=>loadSettings());
+    const [inputHistory, setInputHistory] = useState([]);
+    const [historyIndex, setHistoryIndex] = useState(-1);
+    const messagesEndRef = useRef(null);
+    const abortControllerRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const inputRef = useRef(null);
+    const currentSession = sessions.find((s)=>s.id === currentSessionId);
+    const messages = currentSession?.messages || [];
+    useEffect(()=>{
+        saveSessions(sessions);
+    }, [
+        sessions
+    ]);
+    useEffect(()=>{
+        saveSettings(settings);
+    }, [
+        settings
+    ]);
+    useEffect(()=>{
+        messagesEndRef.current?.scrollIntoView({
+            behavior: 'smooth'
+        });
+    }, [
+        messages
+    ]);
+    useEffect(()=>{
+        fetch('/api/mcps/models').then((res)=>res.json()).then((data)=>{
+            const modelList = data.models || [];
+            const validModels = modelList.filter((m)=>!m.name.includes('*')).map((m)=>({
+                    id: m.name,
+                    value: m.name,
+                    adapter: m.adapter || undefined,
+                    baseUrl: m.baseUrl || undefined
+                }));
+            setModels(validModels);
+            if (validModels.length > 0 && !selectedModel) {
+                setSelectedModel(validModels[0].value);
+            }
+        }).catch(console.error);
+        fetch('/api/mcps/servers').then((res)=>res.json()).then((data)=>{
+            setMcpServers(data.servers || []);
+        }).catch(console.error);
+    }, []);
+    const updateSession = useCallback((sessionId, updater)=>{
+        setSessions((prev)=>prev.map((s)=>s.id === sessionId ? updater(s) : s));
+    }, []);
+    const sendMessage = async (content, sessionId, existingMessages, msgImages)=>{
+        const startTime = Date.now();
+        const userMessage = {
+            id: `user-${Date.now()}`,
+            role: 'user',
+            content,
+            images: msgImages,
+            createdAt: new Date()
+        };
+        const assistantMessage = {
+            id: `assistant-${Date.now()}`,
+            role: 'assistant',
+            content: '',
+            createdAt: new Date()
+        };
+        updateSession(sessionId, (s)=>({
+                ...s,
+                messages: [
+                    ...existingMessages,
+                    userMessage,
+                    assistantMessage
+                ],
+                title: generateTitle([
+                    ...existingMessages,
+                    userMessage
+                ]),
+                updatedAt: new Date()
+            }));
+        setIsLoading(true);
+        abortControllerRef.current = new AbortController();
+        try {
+            // Build messages with image support
+            const apiMessages = [
+                ...existingMessages,
+                userMessage
+            ].map((m)=>{
+                if (m.images && m.images.length > 0) {
+                    // Multi-modal message
+                    return {
+                        role: m.role,
+                        content: [
+                            {
+                                type: 'text',
+                                text: m.content
+                            },
+                            ...m.images.map((img)=>({
+                                    type: 'image_url',
+                                    image_url: {
+                                        url: img.base64 || img.url
+                                    }
+                                }))
+                        ]
+                    };
+                }
+                return {
+                    role: m.role,
+                    content: m.content
+                };
+            });
+            // Always use agent endpoint for tool support
+            const requestBody = {
+                model: selectedModel,
+                messages: apiMessages,
+                stream: true,
+                temperature: settings.temperature,
+                top_p: settings.topP,
+                max_tokens: settings.maxTokens
+            };
+            if (settings.mcpServers.length > 0) {
+                requestBody.mcpServers = settings.mcpServers;
+            }
+            const response = await fetch('/v1/agent/chat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(requestBody),
+                signal: abortControllerRef.current.signal
+            });
+            if (!response.ok) {
+                const errorData = await response.json().catch(()=>({}));
+                throw new Error(errorData.error?.message || `HTTP ${response.status}`);
+            }
+            const reader = response.body?.getReader();
+            if (!reader) throw new Error('No response body');
+            const decoder = new TextDecoder();
+            let buffer = '';
+            let fullContent = '';
+            let reasoning = '';
+            let usage;
+            while(true){
+                const { done, value } = await reader.read();
+                if (done) break;
+                buffer += decoder.decode(value, {
+                    stream: true
+                });
+                const lines = buffer.split('\n');
+                buffer = lines.pop() || '';
+                for (const line of lines){
+                    if (!line.trim() || !line.startsWith('data: ')) continue;
+                    const data = line.slice(6);
+                    if (data === '[DONE]') continue;
+                    try {
+                        const parsed = JSON.parse(data);
+                        // Handle agent streaming format
+                        if (parsed.type === 'text') {
+                            fullContent += parsed.content || '';
+                        } else if (parsed.type === 'usage') {
+                            usage = {
+                                promptTokens: parsed.usage?.promptTokens,
+                                completionTokens: parsed.usage?.completionTokens,
+                                totalTokens: parsed.usage?.totalTokens
+                            };
+                        } else if (parsed.type === 'step') {
+                            // Handle step with reasoning
+                            if (parsed.text) fullContent = parsed.text;
+                        }
+                        // Handle OpenAI format
+                        const delta = parsed.choices?.[0]?.delta;
+                        if (delta?.content) {
+                            fullContent += delta.content;
+                        }
+                        if (delta?.reasoning_content) {
+                            reasoning += delta.reasoning_content;
+                        }
+                        if (parsed.usage) {
+                            usage = {
+                                promptTokens: parsed.usage.prompt_tokens,
+                                completionTokens: parsed.usage.completion_tokens,
+                                totalTokens: parsed.usage.total_tokens
+                            };
+                        }
+                        updateSession(sessionId, (s)=>({
+                                ...s,
+                                messages: s.messages.map((m)=>m.id === assistantMessage.id ? {
+                                        ...m,
+                                        content: fullContent,
+                                        reasoning: reasoning || undefined,
+                                        usage,
+                                        durationMs: Date.now() - startTime
+                                    } : m)
+                            }));
+                    } catch  {
+                    // Skip invalid JSON
+                    }
+                }
+            }
+            updateSession(sessionId, (s)=>({
+                    ...s,
+                    messages: s.messages.map((m)=>m.id === assistantMessage.id ? {
+                            ...m,
+                            durationMs: Date.now() - startTime
+                        } : m)
+                }));
+        } catch (err) {
+            if (err.name === 'AbortError') return;
+            const errorMsg = err instanceof Error ? err.message : 'Failed to send message';
+            updateSession(sessionId, (s)=>({
+                    ...s,
+                    messages: s.messages.map((m)=>m.id === assistantMessage.id ? {
+                            ...m,
+                            content: '',
+                            error: errorMsg
+                        } : m)
+                }));
+        } finally{
+            setIsLoading(false);
+            abortControllerRef.current = null;
+        }
+    };
+    const handleSubmit = async (e)=>{
+        e.preventDefault();
+        if (!input.trim() || !selectedModel || isLoading) return;
+        // Add to history
+        setInputHistory((prev)=>[
+                input.trim(),
+                ...prev.slice(0, 49)
+            ]);
+        setHistoryIndex(-1);
+        let sessionId = currentSessionId;
+        let existingMessages = messages;
+        if (!sessionId) {
+            const newSession = {
+                id: generateSessionId(),
+                title: 'New Chat',
+                model: selectedModel,
+                messages: [],
+                createdAt: new Date(),
+                updatedAt: new Date()
+            };
+            setSessions((prev)=>[
+                    newSession,
+                    ...prev
+                ]);
+            setCurrentSessionId(newSession.id);
+            sessionId = newSession.id;
+            existingMessages = [];
+        }
+        const content = input.trim();
+        const msgImages = images.length > 0 ? [
+            ...images
+        ] : undefined;
+        setInput('');
+        setImages([]);
+        await sendMessage(content, sessionId, existingMessages, msgImages);
+    };
+    const handleKeyDown = (e)=>{
+        if (e.key === 'ArrowUp' && !input && inputHistory.length > 0) {
+            e.preventDefault();
+            const newIndex = Math.min(historyIndex + 1, inputHistory.length - 1);
+            setHistoryIndex(newIndex);
+            setInput(inputHistory[newIndex]);
+        } else if (e.key === 'ArrowDown' && historyIndex >= 0) {
+            e.preventDefault();
+            const newIndex = historyIndex - 1;
+            setHistoryIndex(newIndex);
+            setInput(newIndex >= 0 ? inputHistory[newIndex] : '');
+        }
+    };
+    const handleRetry = async (messageId)=>{
+        if (!currentSessionId || isLoading) return;
+        const msgIndex = messages.findIndex((m)=>m.id === messageId);
+        if (msgIndex === -1) return;
+        const message = messages[msgIndex];
+        if (message.role !== 'assistant') return;
+        const userMsgIndex = msgIndex - 1;
+        if (userMsgIndex < 0) return;
+        const userMessage = messages[userMsgIndex];
+        if (userMessage.role !== 'user') return;
+        const existingMessages = messages.slice(0, userMsgIndex);
+        updateSession(currentSessionId, (s)=>({
+                ...s,
+                messages: existingMessages
+            }));
+        await sendMessage(userMessage.content, currentSessionId, existingMessages, userMessage.images);
+    };
+    const handleEditMessage = (messageId)=>{
+        const message = messages.find((m)=>m.id === messageId);
+        if (!message || message.role !== 'user') return;
+        setEditingMessageId(messageId);
+        setEditContent(message.content);
+    };
+    const handleSaveEdit = async ()=>{
+        if (!editingMessageId || !currentSessionId || !editContent.trim() || isLoading) return;
+        const msgIndex = messages.findIndex((m)=>m.id === editingMessageId);
+        if (msgIndex === -1) return;
+        const existingMessages = messages.slice(0, msgIndex);
+        setEditingMessageId(null);
+        setEditContent('');
+        updateSession(currentSessionId, (s)=>({
+                ...s,
+                messages: existingMessages
+            }));
+        await sendMessage(editContent.trim(), currentSessionId, existingMessages);
+    };
+    const handleCancelEdit = ()=>{
+        setEditingMessageId(null);
+        setEditContent('');
+    };
+    const handleStop = ()=>{
+        abortControllerRef.current?.abort();
+    };
+    const handleImageUpload = (e)=>{
+        const files = e.target.files;
+        if (!files) return;
+        for (const file of files){
+            const reader = new FileReader();
+            reader.onload = (ev)=>{
+                const base64 = ev.target?.result;
+                setImages((prev)=>[
+                        ...prev,
+                        {
+                            type: 'image',
+                            url: file.name,
+                            base64
+                        }
+                    ]);
+            };
+            reader.readAsDataURL(file);
+        }
+        if (fileInputRef.current) fileInputRef.current.value = '';
+    };
+    const removeImage = (index)=>{
+        setImages((prev)=>prev.filter((_, i)=>i !== index));
+    };
+    const copyToClipboard = (text)=>{
+        navigator.clipboard.writeText(text);
+    };
+    const createSession = useCallback(()=>{
+        const newSession = {
+            id: generateSessionId(),
+            title: 'New Chat',
+            model: selectedModel,
+            messages: [],
+            createdAt: new Date(),
+            updatedAt: new Date()
+        };
+        setSessions((prev)=>[
+                newSession,
+                ...prev
+            ]);
+        setCurrentSessionId(newSession.id);
+    }, [
+        selectedModel
+    ]);
+    const deleteSession = useCallback((sessionId)=>{
+        setSessions((prev)=>prev.filter((s)=>s.id !== sessionId));
+        if (currentSessionId === sessionId) setCurrentSessionId(null);
+    }, [
+        currentSessionId
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "flex h-full min-h-[600px]"
+    }, showSidebar && /*#__PURE__*/ React.createElement("div", {
+        className: "w-56 border-r border-base-300 bg-base-100 flex flex-col flex-shrink-0"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "p-2 border-b border-base-300"
+    }, /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        className: "btn btn-primary btn-sm w-full gap-1",
+        onClick: createSession
+    }, /*#__PURE__*/ React.createElement(MessageSquarePlus, {
+        className: "w-4 h-4"
+    }), " New Chat")), /*#__PURE__*/ React.createElement("div", {
+        className: "flex-1 overflow-y-auto"
+    }, sessions.length === 0 ? /*#__PURE__*/ React.createElement("div", {
+        className: "p-4 text-center text-base-content/50 text-sm"
+    }, "No chat history") : /*#__PURE__*/ React.createElement("ul", {
+        className: "menu p-1 gap-0.5"
+    }, sessions.map((session)=>/*#__PURE__*/ React.createElement("li", {
+            key: session.id
+        }, /*#__PURE__*/ React.createElement("button", {
+            type: "button",
+            className: `flex justify-between items-center w-full text-left py-2 px-2 ${currentSessionId === session.id ? 'active' : ''}`,
+            onClick: ()=>setCurrentSessionId(session.id)
+        }, /*#__PURE__*/ React.createElement("span", {
+            className: "flex-1 truncate text-xs"
+        }, session.title), /*#__PURE__*/ React.createElement("button", {
+            type: "button",
+            className: "btn btn-ghost btn-xs opacity-50 hover:opacity-100",
+            onClick: (e)=>{
+                e.stopPropagation();
+                deleteSession(session.id);
+            }
+        }, /*#__PURE__*/ React.createElement(Trash2, {
+            className: "w-3 h-3"
+        })))))))), /*#__PURE__*/ React.createElement("div", {
+        className: "flex-1 flex flex-col min-w-0"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "h-12 px-3 border-b border-base-300 bg-base-100 flex items-center gap-2 flex-shrink-0"
+    }, /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        className: "btn btn-ghost btn-sm btn-square",
+        onClick: ()=>setShowSidebar(!showSidebar)
+    }, /*#__PURE__*/ React.createElement(Menu, {
+        className: "w-4 h-4"
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: "flex-1 max-w-xs"
+    }, /*#__PURE__*/ React.createElement(Combobox.Root, {
+        items: models,
+        itemToStringValue: (item)=>item.value,
+        value: models.find((m)=>m.value === selectedModel) || null,
+        onValueChange: (item)=>{
+            if (item) setSelectedModel(item.value);
+        },
+        onInputValueChange: (value)=>{
+            if (value) setSelectedModel(value);
+        }
+    }, /*#__PURE__*/ React.createElement(Combobox.Input, {
+        placeholder: "Select model...",
+        className: "input input-bordered input-sm w-full"
+    }), /*#__PURE__*/ React.createElement(Combobox.Portal, null, /*#__PURE__*/ React.createElement(Combobox.Positioner, {
+        sideOffset: 4
+    }, /*#__PURE__*/ React.createElement(Combobox.Popup, {
+        className: "bg-base-100 rounded-box shadow-lg border border-base-300 max-h-60 overflow-auto z-50"
+    }, /*#__PURE__*/ React.createElement(Combobox.Empty, {
+        className: "p-2 text-sm text-base-content/50"
+    }, "No models"), /*#__PURE__*/ React.createElement(Combobox.List, {
+        className: "p-1"
+    }, (item)=>/*#__PURE__*/ React.createElement(Combobox.Item, {
+            key: item.id,
+            value: item,
+            className: "p-2 rounded cursor-pointer hover:bg-base-200 data-[highlighted]:bg-base-200 text-sm"
+        }, item.value))))))), /*#__PURE__*/ React.createElement("div", {
+        className: "flex-1"
+    }), /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        className: `btn btn-ghost btn-sm btn-square ${showSettings ? 'btn-active' : ''}`,
+        onClick: ()=>setShowSettings(!showSettings)
+    }, /*#__PURE__*/ React.createElement(Settings, {
+        className: "w-4 h-4"
+    }))), /*#__PURE__*/ React.createElement("div", {
+        className: "flex-1 flex overflow-hidden"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "flex-1 overflow-y-auto p-4"
+    }, messages.length === 0 && /*#__PURE__*/ React.createElement("div", {
+        className: "text-center text-base-content/50 py-8"
+    }, /*#__PURE__*/ React.createElement("p", null, "Start a conversation by sending a message."), selectedModel && /*#__PURE__*/ React.createElement("p", {
+        className: "text-sm mt-2 opacity-70"
+    }, "Model: ", selectedModel)), /*#__PURE__*/ React.createElement("div", {
+        className: "space-y-6 max-w-3xl mx-auto"
+    }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", {
+            key: message.id
+        }, message.role === 'user' ? // User message
+        /*#__PURE__*/ React.createElement("div", {
+            className: "flex justify-end"
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: "max-w-[80%]"
+        }, editingMessageId === message.id ? /*#__PURE__*/ React.createElement("div", {
+            className: "bg-base-200 rounded-lg p-3"
+        }, /*#__PURE__*/ React.createElement("textarea", {
+            className: "textarea textarea-bordered w-full min-w-64",
+            value: editContent,
+            onChange: (e)=>setEditContent(e.target.value),
+            rows: 3
+        }), /*#__PURE__*/ React.createElement("div", {
+            className: "flex gap-2 mt-2"
+        }, /*#__PURE__*/ React.createElement("button", {
+            type: "button",
+            className: "btn btn-primary btn-xs",
+            onClick: handleSaveEdit
+        }, "Save & Send"), /*#__PURE__*/ React.createElement("button", {
+            type: "button",
+            className: "btn btn-ghost btn-xs",
+            onClick: handleCancelEdit
+        }, "Cancel"))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+            className: "bg-primary text-primary-content rounded-2xl rounded-br-md px-4 py-2"
+        }, message.images && message.images.length > 0 && /*#__PURE__*/ React.createElement("div", {
+            className: "flex flex-wrap gap-2 mb-2"
+        }, message.images.map((img, i)=>/*#__PURE__*/ React.createElement("img", {
+                key: i,
+                src: img.base64 || img.url,
+                alt: "uploaded",
+                className: "max-h-32 rounded"
+            }))), /*#__PURE__*/ React.createElement("p", {
+            className: "whitespace-pre-wrap"
+        }, message.content)), /*#__PURE__*/ React.createElement("div", {
+            className: "flex justify-end gap-1 mt-1"
+        }, /*#__PURE__*/ React.createElement("button", {
+            type: "button",
+            className: "btn btn-ghost btn-xs opacity-50 hover:opacity-100",
+            onClick: ()=>handleEditMessage(message.id)
+        }, /*#__PURE__*/ React.createElement(Edit2, {
+            className: "w-3 h-3"
+        })))))) : // Assistant message - flat display
+        /*#__PURE__*/ React.createElement("div", null, message.error ? /*#__PURE__*/ React.createElement("div", {
+            className: "text-error flex items-center gap-2"
+        }, /*#__PURE__*/ React.createElement(XCircle, {
+            className: "w-4 h-4"
+        }), /*#__PURE__*/ React.createElement("span", null, "Error: ", message.error), /*#__PURE__*/ React.createElement("button", {
+            type: "button",
+            className: "btn btn-ghost btn-xs",
+            onClick: ()=>handleRetry(message.id)
+        }, /*#__PURE__*/ React.createElement(RefreshCw, {
+            className: "w-3 h-3"
+        }))) : /*#__PURE__*/ React.createElement(React.Fragment, null, message.reasoning && /*#__PURE__*/ React.createElement(ReasoningDisplay, {
+            content: message.reasoning,
+            isStreaming: isLoading
+        }), message.toolCalls?.map((tc)=>/*#__PURE__*/ React.createElement(ToolCallDisplay, {
+                key: tc.id,
+                toolCall: tc
+            })), /*#__PURE__*/ React.createElement("div", {
+            className: "prose prose-sm max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+        }, /*#__PURE__*/ React.createElement(MarkdownContent, null, message.content || (isLoading ? '...' : ''))), /*#__PURE__*/ React.createElement("div", {
+            className: "flex items-center gap-3 mt-2 text-xs text-base-content/50"
+        }, message.usage && /*#__PURE__*/ React.createElement("span", {
+            className: "flex items-center gap-1"
+        }, /*#__PURE__*/ React.createElement(Zap, {
+            className: "w-3 h-3"
+        }), message.usage.totalTokens, " tokens", message.usage.promptTokens != null && /*#__PURE__*/ React.createElement("span", {
+            className: "opacity-70"
+        }, "(", message.usage.promptTokens, "/", message.usage.completionTokens, ")")), message.durationMs && /*#__PURE__*/ React.createElement("span", {
+            className: "flex items-center gap-1"
+        }, /*#__PURE__*/ React.createElement(Clock, {
+            className: "w-3 h-3"
+        }), (message.durationMs / 1000).toFixed(1), "s"), message.usage?.completionTokens && message.durationMs && /*#__PURE__*/ React.createElement("span", null, Math.round(message.usage.completionTokens / message.durationMs * 1000), " tok/s"), /*#__PURE__*/ React.createElement("button", {
+            type: "button",
+            className: "btn btn-ghost btn-xs opacity-50 hover:opacity-100",
+            onClick: ()=>copyToClipboard(message.content)
+        }, /*#__PURE__*/ React.createElement(Copy, {
+            className: "w-3 h-3"
+        })), /*#__PURE__*/ React.createElement("button", {
+            type: "button",
+            className: "btn btn-ghost btn-xs opacity-50 hover:opacity-100",
+            onClick: ()=>handleRetry(message.id)
+        }, /*#__PURE__*/ React.createElement(RefreshCw, {
+            className: "w-3 h-3"
+        })))))))), /*#__PURE__*/ React.createElement("div", {
+        ref: messagesEndRef
+    })), showSettings && /*#__PURE__*/ React.createElement("div", {
+        className: "w-64 border-l border-base-300 bg-base-100 p-4 overflow-y-auto flex-shrink-0"
+    }, /*#__PURE__*/ React.createElement("h3", {
+        className: "font-semibold mb-4"
+    }, "Settings"), /*#__PURE__*/ React.createElement("div", {
+        className: "space-y-4"
+    }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("label", {
+        className: "text-xs font-medium"
+    }, "Temperature: ", settings.temperature), /*#__PURE__*/ React.createElement("input", {
+        type: "range",
+        min: "0",
+        max: "2",
+        step: "0.1",
+        value: settings.temperature,
+        onChange: (e)=>setSettings((s)=>({
+                    ...s,
+                    temperature: parseFloat(e.target.value)
+                })),
+        className: "range range-xs range-primary w-full"
+    })), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("label", {
+        className: "text-xs font-medium"
+    }, "Top P: ", settings.topP), /*#__PURE__*/ React.createElement("input", {
+        type: "range",
+        min: "0",
+        max: "1",
+        step: "0.05",
+        value: settings.topP,
+        onChange: (e)=>setSettings((s)=>({
+                    ...s,
+                    topP: parseFloat(e.target.value)
+                })),
+        className: "range range-xs range-primary w-full"
+    })), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("label", {
+        className: "text-xs font-medium"
+    }, "Top K: ", settings.topK), /*#__PURE__*/ React.createElement("input", {
+        type: "range",
+        min: "1",
+        max: "100",
+        step: "1",
+        value: settings.topK,
+        onChange: (e)=>setSettings((s)=>({
+                    ...s,
+                    topK: parseInt(e.target.value, 10)
+                })),
+        className: "range range-xs range-primary w-full"
+    })), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("label", {
+        className: "text-xs font-medium"
+    }, "Max Tokens: ", settings.maxTokens), /*#__PURE__*/ React.createElement("input", {
+        type: "range",
+        min: "256",
+        max: "16384",
+        step: "256",
+        value: settings.maxTokens,
+        onChange: (e)=>setSettings((s)=>({
+                    ...s,
+                    maxTokens: parseInt(e.target.value, 10)
+                })),
+        className: "range range-xs range-primary w-full"
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: "divider text-xs"
+    }, "MCP Servers"), mcpServers.length === 0 ? /*#__PURE__*/ React.createElement("p", {
+        className: "text-xs text-base-content/50"
+    }, "No servers configured") : /*#__PURE__*/ React.createElement("div", {
+        className: "space-y-2"
+    }, mcpServers.map((server)=>/*#__PURE__*/ React.createElement("label", {
+            key: server.name,
+            className: "flex items-center gap-2 cursor-pointer"
+        }, /*#__PURE__*/ React.createElement("input", {
+            type: "checkbox",
+            className: "checkbox checkbox-xs checkbox-primary",
+            checked: settings.mcpServers.includes(server.name),
+            onChange: (e)=>{
+                setSettings((s)=>({
+                        ...s,
+                        mcpServers: e.target.checked ? [
+                            ...s.mcpServers,
+                            server.name
+                        ] : s.mcpServers.filter((n)=>n !== server.name)
+                    }));
+            }
+        }), /*#__PURE__*/ React.createElement("span", {
+            className: "text-xs"
+        }, server.name), /*#__PURE__*/ React.createElement("span", {
+            className: "text-xs text-base-content/50"
+        }, "(", server.type, ")"))))))), /*#__PURE__*/ React.createElement("div", {
+        className: "p-3 border-t border-base-300 bg-base-100 flex-shrink-0"
+    }, images.length > 0 && /*#__PURE__*/ React.createElement("div", {
+        className: "flex flex-wrap gap-2 mb-2"
+    }, images.map((img, i)=>/*#__PURE__*/ React.createElement("div", {
+            key: i,
+            className: "relative"
+        }, /*#__PURE__*/ React.createElement("img", {
+            src: img.base64 || img.url,
+            alt: "preview",
+            className: "h-16 rounded"
+        }), /*#__PURE__*/ React.createElement("button", {
+            type: "button",
+            className: "btn btn-circle btn-xs absolute -top-1 -right-1 btn-error",
+            onClick: ()=>removeImage(i)
+        }, /*#__PURE__*/ React.createElement(X, {
+            className: "w-3 h-3"
+        }))))), /*#__PURE__*/ React.createElement("form", {
+        onSubmit: handleSubmit,
+        className: "flex gap-2"
+    }, /*#__PURE__*/ React.createElement("input", {
+        type: "file",
+        ref: fileInputRef,
+        accept: "image/*",
+        multiple: true,
+        className: "hidden",
+        onChange: handleImageUpload
+    }), /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        className: "btn btn-ghost btn-sm btn-square",
+        onClick: ()=>fileInputRef.current?.click()
+    }, /*#__PURE__*/ React.createElement(ImagePlus, {
+        className: "w-4 h-4"
+    })), /*#__PURE__*/ React.createElement("input", {
+        ref: inputRef,
+        type: "text",
+        className: "input input-bordered flex-1 input-sm",
+        value: input,
+        onChange: (e)=>setInput(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder: selectedModel ? 'Type a message... (Up arrow for history)' : 'Select a model first',
+        disabled: !selectedModel || isLoading
+    }), isLoading ? /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        className: "btn btn-error btn-sm",
+        onClick: handleStop
+    }, /*#__PURE__*/ React.createElement(Square, {
+        className: "w-4 h-4"
+    })) : /*#__PURE__*/ React.createElement("button", {
+        type: "submit",
+        className: "btn btn-primary btn-sm",
+        disabled: !input.trim() || !selectedModel
+    }, /*#__PURE__*/ React.createElement(Send, {
+        className: "w-4 h-4"
+    }))))));
+}
+
+//# sourceMappingURL=ChatPage.js.map