initial commit

2025-08-22 23:42:34 +02:00
commit 191fe98ac0
19 changed files with 1650 additions and 0 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,483 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import TextareaAutosize from 'react-textarea-autosize';
+import GeneralSettings from './GeneralSettings'
+import InterfaceSettings from './InterfaceSettings'
+import { markdownToHTML } from './markdown';
+
+const API_URL_KEY = 'ollamaApiUrl';
+const COLOR_SCHEME_KEY = 'colorScheme';
+
+// Initial API value will be set by useEffect after settings are loaded
+let API = import.meta.env.VITE_API_URL ?? 'http://127.0.0.1:8000';
+
+export default function App() {
+  const [chatSessions, setChatSessions] = useState([])
+  const [activeSessionId, setActiveSessionId] = useState(null)
+  const [activeSidebarMode, setActiveSidebarMode] = useState('chats') // 'chats', 'dbs', 'settings'
+  const [activeSettingsSubmenu, setActiveSettingsSubmenu] = useState('General'); // 'General', 'Interface'
+  const [editingSessionId, setEditingSessionId] = useState(null); // ID of the session being edited
+
+  // Use currentSessionId for the actual chat operations
+  const [model, setModel] = useState('')
+  const [input, setInput] = useState('')
+  const chatRef = useRef(null)
+  const textareaRef = useRef(null); // Ref for the textarea
+  const [ollamaApiUrl, setOllamaApiUrl] = useState(API); // State for Ollama API URL
+  const [colorScheme, setColorScheme] = useState('Default'); // State for color scheme
+  const [loading, setLoading] = useState(true); // Loading state for initial session fetch
+  const [unreadSessions, setUnreadSessions] = useState([]); // Track unread messages
+  const activeRequestSessionId = useRef(null); // Ref to track the session ID of the active request
+  const activeSessionIdRef = useRef(activeSessionId);
+  useEffect(() => {
+    activeSessionIdRef.current = activeSessionId;
+  }, [activeSessionId]);
+
+  // Sidebar resizing state
+  const [sidebarWidth, setSidebarWidth] = useState(280); // Initial sidebar width
+  const [isResizing, setIsResizing] = useState(false);
+
+  const startResizing = React.useCallback((mouseDownEvent) => {
+    setIsResizing(true);
+  }, []);
+
+  const stopResizing = React.useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  const resizeSidebar = React.useCallback((mouseMoveEvent) => {
+    if (isResizing) {
+      const newWidth = Math.max(230, Math.min(500, mouseMoveEvent.clientX));
+      setSidebarWidth(newWidth);
+    }
+  }, [isResizing]);
+
+  React.useEffect(() => {
+    window.addEventListener('mousemove', resizeSidebar);
+    window.addEventListener('mouseup', stopResizing);
+    return () => {
+      window.removeEventListener('mousemove', resizeSidebar);
+      window.removeEventListener('mouseup', stopResizing);
+    };
+  }, [resizeSidebar, stopResizing]);
+
+  React.useEffect(() => {
+    if (isResizing) {
+      document.body.classList.add('no-select');
+    } else {
+      document.body.classList.remove('no-select');
+    }
+  }, [isResizing]);
+
+  // Load settings on startup
+  useEffect(() => {
+    window.electronAPI.getSettings().then(settings => {
+      setOllamaApiUrl(settings.ollamaApiUrl);
+      setColorScheme(settings.colorScheme);
+      setModel(settings.chatModel || ''); // Load the selected model, with a fallback
+      applyColorScheme(settings.colorScheme); // Apply initial scheme
+    });
+  }, []);
+
+  // Apply color scheme whenever it changes
+  useEffect(() => {
+    applyColorScheme(colorScheme);
+  }, [colorScheme]);
+
+  // Function to apply color scheme
+  const colorSchemes = {
+    'Default': {
+      '--bg': '#0b1020',
+      '--panel': '#141b34',
+      '--text': '#e6e8ef',
+      '--muted': '#9aa3b2',
+      '--accent': '#6ea8fe',
+      '--border': '#24304f',
+      '--input-bg': '#0e1530',
+      '--user-msg-bg': '#111933',
+      '--assistant-msg-bg': '#101927',
+    },
+    'Grayscale': {
+      '--bg': '#1a1a1a',
+      '--panel': '#2a2a2a',
+      '--text': '#f0f0f0',
+      '--muted': '#aaaaaa',
+      '--accent': '#888888',
+      '--border': '#4a4a4a',
+      '--input-bg': '#202020',
+      '--user-msg-bg': '#333333',
+      '--assistant-msg-bg': '#252525',
+    },
+    'Rose': {
+      '--bg': '#200a10',
+      '--panel': '#301a20',
+      '--text': '#ffe0e0',
+      '--muted': '#a09090',
+      '--accent': '#E91E63',
+      '--border': '#402025',
+      '--input-bg': '#2a1015',
+      '--user-msg-bg': '#331119',
+      '--assistant-msg-bg': '#271019',
+    },
+  };
+
+  function applyColorScheme(schemeName) {
+    const scheme = colorSchemes[schemeName];
+    if (scheme) {
+      for (const [key, value] of Object.entries(scheme)) {
+        document.documentElement.style.setProperty(key, value);
+      }
+    }
+  }
+
+  const fetchHistory = (sessionId) => {
+    if (!sessionId || !ollamaApiUrl) return;
+    fetch(`${ollamaApiUrl}/history?session_id=${encodeURIComponent(sessionId)}`)
+      .then(r => r.json())
+      .then(data => {
+        setChatSessions(prevSessions =>
+          prevSessions.map(session =>
+            session.session_id === sessionId
+              ? { ...session, messages: data.messages || [] }
+              : session
+          )
+        );
+      })
+      .catch(() => {});
+  };
+
+  // Load chat sessions from backend on initial render
+  useEffect(() => {
+    if (!ollamaApiUrl) return;
+    setLoading(true);
+    fetch(`${ollamaApiUrl}/sessions`)
+      .then(r => r.json())
+      .then(data => {
+        const sessionsWithMessages = data.sessions.map(s => ({ ...s, messages: [] }));
+        setChatSessions(sessionsWithMessages);
+        if (sessionsWithMessages.length > 0) {
+          setActiveSessionId(sessionsWithMessages[0].session_id);
+        } else {
+          setActiveSessionId(null);
+        }
+        setLoading(false);
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  }, [ollamaApiUrl]);
+
+  // Load messages for the active session
+  useEffect(() => {
+    fetchHistory(activeSessionId);
+  }, [activeSessionId]);
+
+  const messages = useMemo(() => {
+    return chatSessions.find(s => s.session_id === activeSessionId)?.messages || [];
+  }, [activeSessionId, chatSessions]);
+
+  useEffect(() => {
+    chatRef.current?.scrollTo({ top: chatRef.current.scrollHeight, behavior: 'smooth' });
+  }, [messages]);
+
+  async function sendMessage() {
+    let targetSessionId = activeSessionId;
+    let isNewChat = false;
+
+    if (!input.trim() || !model) return;
+
+    if (!targetSessionId) {
+      const newSession = await createNewChat();
+      targetSessionId = newSession.session_id;
+      isNewChat = true;
+    } else {
+      // Check if it's an existing "New Chat" receiving its first message
+      const currentSession = chatSessions.find(s => s.session_id === targetSessionId);
+      if (currentSession && currentSession.name === "New Chat" && currentSession.messages.length === 0) {
+        isNewChat = true;
+      }
+    }
+    const currentActiveSessionAtSend = activeSessionId; // Capture activeSessionId at send time
+
+    const userMsg = { role: 'user', content: input.trim() };
+    
+    // Optimistically add user message
+    setChatSessions(prevSessions =>
+      prevSessions.map(session =>
+        session.session_id === targetSessionId
+          ? { ...session, messages: [...(session.messages || []), userMsg] }
+          : session
+      )
+    );
+    setInput('');
+
+    try {
+      const res = await fetch(`${ollamaApiUrl}/chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          session_id: targetSessionId,
+          model,
+          message: userMsg.content
+        })
+      });
+      const data = await res.json();
+      const assistantMsg = { role: 'assistant', content: data.reply };
+
+      // Update messages with assistant's reply
+      setChatSessions(prevSessions =>
+        prevSessions.map(session =>
+          session.session_id === targetSessionId
+            ? { ...session, messages: [...(session.messages || []), assistantMsg] }
+            : session
+        )
+      );
+
+      // Handle unread status: only set if the chat was NOT active when the message was sent
+      if (activeSessionIdRef.current !== targetSessionId) {
+        setUnreadSessions(prev => [...new Set([...prev, targetSessionId])]);
+      }
+
+      // Generate title if new chat
+      if (isNewChat) {
+        fetch(`${ollamaApiUrl}/generate-title`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            session_id: targetSessionId,
+            message: userMsg.content
+          })
+        })
+        .then(r => r.json())
+        .then(data => {
+          setChatSessions(prevSessions =>
+            prevSessions.map(session =>
+              session.session_id === targetSessionId ? { ...session, name: data.title } : session
+            )
+          );
+        });
+      }
+    } catch (e) {
+      console.error("Failed to send message:", e);
+      // Add error message to chat
+      const errorMsg = { role: 'assistant', content: 'Error: ' + e.message };
+      setChatSessions(prevSessions =>
+        prevSessions.map(session =>
+          session.session_id === targetSessionId
+            ? { ...session, messages: [...(session.messages || []), errorMsg] }
+            : session
+        )
+      );
+    }
+  }
+
+  async function createNewChat() {
+    const newSessionId = 'sess-' + Math.random().toString(36).slice(2) + Date.now().toString(36);
+    const res = await fetch(`${ollamaApiUrl}/sessions`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ session_id: newSessionId })
+    });
+    const newSession = await res.json();
+    const sessionWithMessages = { ...newSession, messages: [] };
+    setChatSessions(prevSessions => [sessionWithMessages, ...prevSessions]);
+    setActiveSessionId(newSession.session_id);
+    return newSession;
+  }
+
+  function selectChat(sessionId) {
+    setActiveSessionId(sessionId);
+    setUnreadSessions(prev => prev.filter(id => id !== sessionId));
+  }
+
+  function handleRename(sessionId, newName) {
+    fetch(`${ollamaApiUrl}/sessions/${sessionId}/rename`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ title: newName })
+    })
+    .then(() => {
+      setChatSessions(prevSessions =>
+        prevSessions.map(session =>
+          session.session_id === sessionId ? { ...session, name: newName } : session
+        )
+      );
+      setEditingSessionId(null);
+    });
+  }
+
+  function handleDelete(sessionId) {
+    fetch(`${ollamaApiUrl}/sessions/${sessionId}`, { method: 'DELETE' })
+    .then(() => {
+      const newSessions = chatSessions.filter(s => s.session_id !== sessionId);
+      setChatSessions(newSessions);
+      if (activeSessionId === sessionId) {
+        setActiveSessionId(newSessions.length > 0 ? newSessions[0].session_id : null);
+      }
+    });
+  }
+
+  // Auto-delete empty "New Chat" sessions
+  useEffect(() => {
+    const emptyNewChats = chatSessions.filter(
+      s => s.name === "New Chat" && s.session_id !== activeSessionId && s.messages.length === 0
+    );
+    if (emptyNewChats.length > 0) {
+      emptyNewChats.forEach(chat => {
+        handleDelete(chat.session_id);
+      });
+    }
+  }, [activeSessionId, chatSessions, ollamaApiUrl]);
+
+  return (
+    <div className="app" style={{ gridTemplateColumns: `${sidebarWidth}px 1fr` }}>
+      <div className="sidebar">
+        <div className="sidebar-header">
+          <div
+            className={`sidebar-tab ${activeSidebarMode === 'chats' ? 'active' : ''}`}
+            onClick={() => setActiveSidebarMode('chats')}
+          >
+            Chats
+          </div>
+          <div
+            className={`sidebar-tab ${activeSidebarMode === 'dbs' ? 'active' : ''}`}
+            onClick={() => setActiveSidebarMode('dbs')}
+          >
+            DBs
+          </div>
+          <div
+            className={`sidebar-tab ${activeSidebarMode === 'settings' ? 'active' : ''}`}
+            onClick={() => setActiveSidebarMode('settings')}
+          >
+            Settings
+          </div>
+        </div>
+        <div className="sidebar-content">
+          {activeSidebarMode === 'chats' && (
+            <div className="chat-list">
+              {chatSessions.map(session => (
+                <div
+                  key={session.session_id}
+                  className={`chat-item ${session.session_id === activeSessionId ? 'active' : ''}`}
+                  onClick={() => selectChat(session.session_id)}
+                >
+                  {editingSessionId === session.session_id ? (
+                    <input
+                      type="text"
+                      className="rename-input"
+                      defaultValue={session.name}
+                      onBlur={() => setEditingSessionId(null)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          handleRename(session.session_id, e.target.value);
+                        } else if (e.key === 'Escape') {
+                          setEditingSessionId(null);
+                        }
+                      }}
+                      autoFocus
+                    />
+                  ) : (
+                    <>
+                      <span>{session.name}</span>
+                      <div className="chat-item-buttons">
+                        {unreadSessions.includes(session.session_id) && <div className="unread-dot"></div>}
+                        <button className="icon-button" onClick={(e) => { e.stopPropagation(); setEditingSessionId(session.session_id); }}>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
+                        </button>
+                        <button className="icon-button" onClick={(e) => { e.stopPropagation(); handleDelete(session.session_id); }}>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                        </button>
+                      </div>
+                    </>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+          {activeSidebarMode === 'dbs' && (
+            <div className="db-list">
+              <div className="empty-list-message">No databases yet.</div>
+            </div>
+          )}
+          {activeSidebarMode === 'settings' && (
+            <div className="settings-list">
+              <div
+                className={`settings-item ${activeSettingsSubmenu === 'General' ? 'active' : ''}`}
+                onClick={() => setActiveSettingsSubmenu('General')}
+              >
+                General
+              </div>
+              <div
+                className={`settings-item ${activeSettingsSubmenu === 'Interface' ? 'active' : ''}`}
+                onClick={() => setActiveSettingsSubmenu('Interface')}
+              >
+                Interface
+              </div>
+            </div>
+          )}
+        </div>
+        {activeSidebarMode !== 'settings' && (
+          <div className="sidebar-footer">
+            {activeSidebarMode === 'chats' && (
+              <button className="button new-chat-button" onClick={createNewChat}>New Chat</button>
+            )}
+            {activeSidebarMode === 'dbs' && (
+              <button className="button new-db-button" onClick={() => {}}>New Database</button>
+            )}
+          </div>
+        )}
+        <div className="resizer" onMouseDown={startResizing}></div>
+      </div>
+      <div className="main-content">
+        {activeSidebarMode === 'chats' && (
+          <>
+            <div className="header">
+              <strong>Chat - {chatSessions.find(s => s.session_id === activeSessionId)?.name || 'New Chat'}</strong>
+            </div>
+
+            <div className="chat" ref={chatRef}>
+              {messages.map((m, i) => (
+                <div key={i} className={'msg ' + (m.role === 'user' ? 'user' : 'assistant')}>
+                  <div dangerouslySetInnerHTML={{ __html: markdownToHTML(m.content) }} />
+                </div>
+              ))}
+            </div>
+
+            <div className="footer">
+              <div className="footer-content-wrapper">
+                <TextareaAutosize
+                  className="input"
+                  value={input}
+                  onChange={e => setInput(e.target.value)}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                      e.preventDefault();
+                      sendMessage();
+                    }
+                  }}
+                  placeholder="Ask any question..."
+                  maxRows={13}
+                />
+                <button className="button" onClick={sendMessage}>Send</button>
+              </div>
+            </div>
+          </>
+        )}
+        {activeSidebarMode === 'dbs' && (
+          <div className="placeholder-view">
+            <h1>Databases</h1>
+            <p>This is a placeholder for the database management view.</p>
+          </div>
+        )}
+        {activeSidebarMode === 'settings' && (
+          <>
+            <div className="header">
+              <strong>{activeSettingsSubmenu} Settings</strong>
+            </div>
+            {activeSettingsSubmenu === 'General' && <GeneralSettings />}
+            {activeSettingsSubmenu === 'Interface' && <InterfaceSettings />}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/src/GeneralSettings.jsx
+++ b/src/GeneralSettings.jsx
@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+
+const API_URL_KEY = 'ollamaApiUrl';
+const MODEL_KEY = 'chatModel';
+
+export default function GeneralSettings() {
+  const [ollamaApiUrl, setOllamaApiUrl] = useState('');
+  const [models, setModels] = useState([]);
+  const [selectedModel, setSelectedModel] = useState('');
+
+  useEffect(() => {
+    window.electronAPI.getSettings().then(settings => {
+      setOllamaApiUrl(settings.ollamaApiUrl);
+      // Set selectedModel from settings, or fallback to an empty string if not found
+      setSelectedModel(settings.chatModel || '');
+    });
+  }, []);
+
+  useEffect(() => {
+    if (ollamaApiUrl) {
+      fetch(ollamaApiUrl + '/models')
+        .then(r => r.json())
+        .then(data => {
+          const names = data.models?.map(m => m.name) || [];
+          setModels(names);
+          // If no model is selected or the selected model is no longer available, select the first one
+          if (!selectedModel || !names.includes(selectedModel)) {
+            const defaultModel = names[0] || '';
+            setSelectedModel(defaultModel);
+            window.electronAPI.setSetting(MODEL_KEY, defaultModel);
+          }
+        })
+        .catch(err => console.error('Failed to load models', err));
+    }
+  }, [ollamaApiUrl, selectedModel]); // Depend on selectedModel to re-evaluate default selection
+
+  const handleUrlChange = (e) => {
+    const newUrl = e.target.value;
+    setOllamaApiUrl(newUrl);
+    window.electronAPI.setSetting(API_URL_KEY, newUrl);
+  };
+
+  const handleModelChange = (e) => {
+    const newModel = e.target.value;
+    setSelectedModel(newModel);
+    window.electronAPI.setSetting(MODEL_KEY, newModel);
+  };
+
+  return (
+    <div className="settings-content-panel">
+      <div className="setting-section">
+        <h3>Ollama API URL</h3>
+        <input
+          type="text"
+          className="input"
+          value={ollamaApiUrl}
+          onChange={handleUrlChange}
+          placeholder="e.g., http://localhost:11434"
+        />
+      </div>
+      <div className="setting-section">
+        <h3>Chat Model</h3>
+        <select
+          className="select"
+          value={selectedModel}
+          onChange={handleModelChange}
+        >
+          {models.length === 0 && <option>— No models available —</option>}
+          {models.map(m => <option key={m} value={m}>{m}</option>)}
+        </select>
+      </div>
+    </div>
+  );
+}
--- a/src/InterfaceSettings.jsx
+++ b/src/InterfaceSettings.jsx
@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react';
+
+const COLOR_SCHEME_KEY = 'colorScheme';
+
+const colorSchemes = {
+  'Default': {
+    '--bg': '#0b1020',
+    '--panel': '#141b34',
+    '--text': '#e6e8ef',
+    '--muted': '#9aa3b2',
+    '--accent': '#6ea8fe',
+    '--border': '#24304f',
+    '--input-bg': '#0e1530',
+    '--user-msg-bg': '#111933',
+    '--assistant-msg-bg': '#101927',
+  },
+  'Grayscale': {
+    '--bg': '#1a1a1a',
+    '--panel': '#2a2a2a',
+    '--text': '#f0f0f0',
+    '--muted': '#aaaaaa',
+    '--accent': '#888888',
+    '--border': '#4a4a4a',
+    '--input-bg': '#202020',
+    '--user-msg-bg': '#333333',
+    '--assistant-msg-bg': '#252525',
+  },
+  'Rose': {
+    '--bg': '#200a10',
+    '--panel': '#301a20',
+    '--text': '#ffe0e0',
+    '--muted': '#a09090',
+    '--accent': '#E91E63',
+    '--border': '#402025',
+    '--input-bg': '#2a1015',
+    '--user-msg-bg': '#331119',
+    '--assistant-msg-bg': '#271019',
+  },
+};
+
+function applyColorScheme(schemeName) {
+  const scheme = colorSchemes[schemeName];
+  if (scheme) {
+    for (const [key, value] of Object.entries(scheme)) {
+      document.documentElement.style.setProperty(key, value);
+    }
+  }
+}
+
+export default function InterfaceSettings() {
+  const [selectedColorScheme, setSelectedColorScheme] = useState('Default');
+
+  useEffect(() => {
+    window.electronAPI.getSettings().then(settings => {
+      setSelectedColorScheme(settings.colorScheme);
+      applyColorScheme(settings.colorScheme);
+    });
+  }, []);
+
+  useEffect(() => {
+    applyColorScheme(selectedColorScheme);
+  }, [selectedColorScheme]);
+
+  const handleColorSchemeChange = (e) => {
+    const newScheme = e.target.value;
+    setSelectedColorScheme(newScheme);
+    window.electronAPI.setSetting(COLOR_SCHEME_KEY, newScheme);
+  };
+
+  return (
+    <div className="settings-content-panel">
+      <div className="setting-section">
+        <h3>Color Scheme</h3>
+        <select
+          className="select"
+          value={selectedColorScheme}
+          onChange={handleColorSchemeChange}
+        >
+          {Object.keys(colorSchemes).map((schemeName) => (
+            <option key={schemeName} value={schemeName}>
+              {schemeName}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -0,0 +1,17 @@
+
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { HashRouter as Router, Routes, Route } from 'react-router-dom'
+import App from './App.jsx'
+import './styles.css'
+
+const root = createRoot(document.getElementById('root'))
+root.render(
+  <React.StrictMode>
+    <Router>
+      <Routes>
+        <Route path="/" element={<App />} />
+      </Routes>
+    </Router>
+  </React.StrictMode>
+)
--- a/src/markdown.js
+++ b/src/markdown.js
@@ -0,0 +1,67 @@
+export function markdownToHTML(text) {
+  // 0) Remove <think>...</think>/<thinking>...</thinking> blocks
+  text = text.replace(
+    /(^|\n)\s*<think>[\s\S]*?<\/think(?:ing)?>\s*(\n\s*\n)?/gi,
+    (_, lead) => (lead ? '\n' : '')
+  );
+
+  // 1) Normalize line endings
+  let tmp = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
+  // 2) Extract code blocks and replace with placeholders
+  const codeblocks = [];
+  const placeholder = idx => `@@CODEBLOCK${idx}@@`;
+  tmp = tmp.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
+    codeblocks.push({ lang, code });
+    return placeholder(codeblocks.length - 1);
+  });
+
+  // 3) HTML-escape special characters
+  let escaped = tmp
+    .replace(/&/g, "&")
+    .replace(/</g, "<")
+    .replace(/>/g, ">");
+
+  // 4) Headings
+  escaped = escaped
+    .replace(/^#### (.+)$/gm, "<h4>$1</h4>")
+    .replace(/^### (.+)$/gm, "<h3>$1</h3>")
+    .replace(/^## (.+)$/gm,  "<h2>$1</h2>")
+    .replace(/^# (.+)$/gm,   "<h1>$1</h1>");
+
+  // 4.5) Unordered lists
+  escaped = escaped.replace(
+    /(^|\n)([ \t]*\* .+(?:\n[ \t]*\* .+)*)/g,
+    (_, lead, listBlock) => {
+      const items = listBlock
+        .split(/\n/)
+        .map(line => line.replace(/^[ \t]*\*\s+/, '').trim())
+        .map(item => `<li>${item}</li>`)
+        .join('');
+      return `${lead}<ul>${items}</ul>`;
+    }
+  );
+
+  // 5) Bold, italic, inline code
+  let html = escaped
+    .replace(/\*\*(.+?)\*\*/g, "<b>$1</b>")
+    .replace(/(?<!\*)\*(.+?)\*(?!\*)/g, "<i>$1</i>")
+    .replace(/`(.+?)`/g, "<code>$1</code>");
+
+  // 6) Restore code blocks
+  html = html.replace(/@@CODEBLOCK(\d+)@@/g, (_, idx) => {
+    const { lang, code } = codeblocks[+idx];
+    const escapedCode = code.replace(/</g, "<").replace(/>/g, ">");
+    return `<pre><code class="language-${lang}">${escapedCode}</code></pre>`;
+  });
+
+  // 7) Convert line-breaks to <br>
+  html = html.replace(/\n/g, "<br>");
+
+  // 8) Cleanup stray <br> immediately before/after lists
+  html = html
+    .replace(/<br>\s*(<ul>)/g, "$1")
+    .replace(/(<\/ul>)\s*<br>/g, "$1");
+
+  return html;
+}
--- a/src/styles.css
+++ b/src/styles.css
@@ -0,0 +1,424 @@
+
+:root {
+  --bg: #0b1020;
+  --panel: #141b34;
+  --text: #e6e8ef;
+  --muted: #9aa3b2;
+  --accent: #6ea8fe;
+  --border: #24304f;
+}
+
+* { box-sizing: border-box; }
+html, body, #root { height: 100%; margin: 0; }
+body { background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial; }
+
+.no-select {
+  user-select: none;
+  cursor: ew-resize !important;
+}
+
+.app {
+  display: grid;
+  grid-template-columns: var(--sidebar-width, 280px) 1fr; /* Sidebar width and main content */
+  grid-template-rows: 1fr;
+  height: 100%;
+}
+
+.sidebar {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+  height: 100vh; /* Use viewport height to prevent window scrolling */
+  overflow: hidden; /* Prevent the entire sidebar from scrolling */
+  position: relative; /* For resizer positioning */
+}
+
+.resizer {
+  width: 13px; /* 8px original + 5px to the right */
+  cursor: ew-resize;
+  background: transparent;
+  position: absolute;
+  top: 0;
+  right: -5px; /* Adjust to center the wider resizer */
+  bottom: 0;
+  z-index: 1;
+}
+/* Removed .resizer:hover as per user request */
+
+.sidebar-header {
+  display: flex;
+  justify-content: space-around;
+  padding: 0; /* Remove padding to allow tabs to fill */
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.sidebar-tab {
+  flex-grow: 1;
+  text-align: center;
+  padding: 12px 16px;
+  cursor: pointer;
+  border-bottom: 3px solid transparent; /* For active indicator */
+  transition: background-color 0.2s ease;
+}
+
+.sidebar-tab:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.sidebar-tab.active {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-bottom-color: var(--accent);
+}
+
+.sidebar-content {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.db-list, .settings-list {
+  padding: 8px 0;
+}
+
+.empty-list-message {
+  padding: 10px 16px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.settings-item {
+  padding: 10px 16px;
+  cursor: pointer;
+  border-left: 3px solid transparent; /* For active indicator */
+}
+
+.settings-item.active {
+  background: rgba(255, 255, 255, 0.1);
+  border-left-color: var(--accent);
+}
+
+.settings-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.settings-footer-placeholder {
+  height: 40px; /* Match button height for alignment */
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.new-db-button {
+  width: 100%;
+  padding: 10px;
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--bg);
+  font-weight: bold;
+}
+
+.new-db-button:hover {
+  opacity: 0.9;
+}
+
+.chat-list {
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.chat-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  cursor: pointer;
+  border-left: 3px solid transparent; /* For active indicator */
+  /* For truncating text */
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.chat-item span {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-item-buttons {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.unread-dot {
+  width: 8px;
+  height: 8px;
+  background-color: red;
+  border-radius: 50%;
+  margin-right: 4px;
+}
+
+.icon-button {
+  background: none;
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 16px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-button svg {
+  width: 16px;
+  height: 16px;
+  stroke: var(--muted);
+  transition: stroke 0.2s ease;
+}
+
+.icon-button:hover svg {
+  stroke: var(--accent);
+}
+
+.icon-button:hover {
+  color: var(--accent);
+}
+
+.chat-item.active {
+  background: rgba(255, 255, 255, 0.1);
+  border-left-color: var(--accent);
+}
+
+.chat-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.rename-input {
+  background: var(--input-bg);
+  border: 1px solid var(--accent);
+  color: var(--text);
+  border-radius: 10px;
+  padding: 8px 12px;
+  outline: none;
+  width: 100%;
+}
+
+/* Scrollbar Styles */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--muted);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--accent);
+}
+
+.sidebar-footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.new-chat-button {
+  width: 100%;
+  padding: 10px;
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--bg);
+  font-weight: bold;
+}
+
+.new-chat-button:hover {
+  opacity: 0.9;
+}
+
+.main-content {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  height: 100vh; /* Use viewport height to prevent window scrolling */
+  overflow: hidden; /* Prevent the entire main content from scrolling */
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.select, .input, .button {
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 10px;
+  padding: 8px 12px;
+  outline: none;
+}
+
+.footer-content-wrapper .button {
+  flex-shrink: 0; /* Prevent the button from shrinking */
+}
+
+.select { min-width: 220px; }
+.button { cursor: pointer; }
+.button:hover { border-color: var(--accent); }
+
+.chat {
+  display: grid;
+  grid-template-columns: 1fr minmax(auto, 1000px) 1fr;
+  align-content: start;
+  gap: 8px;
+  padding: 16px;
+  overflow: auto;
+}
+
+.chat > * {
+  grid-column: 2;
+}
+
+.msg {
+  padding: 12px 14px;
+  border-radius: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial; /* Match body font */
+}
+
+textarea.input {
+  resize: none; /* Disable manual resizing */
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial; /* Match body font */
+  overflow-y: auto; /* Add scrollbar when content exceeds max-height */
+  flex-grow: 1; /* Allow textarea to take up available space */
+}
+
+.msg.user {
+  background: var(--user-msg-bg);
+  margin-left: auto; /* Right-align user messages */
+  max-width: 800px;
+  border: 1px solid var(--border);
+}
+.msg.assistant {
+  background: transparent;
+  border: none;
+  max-width: none; /* Remove max-width for assistant messages */
+}
+
+.footer {
+  display: flex; /* Use flexbox for centering content */
+  justify-content: center; /* Center the content horizontally */
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+  align-items: flex-end; /* Align items to the bottom */
+}
+
+.footer-content-wrapper {
+  display: flex; /* Arrange textarea and button side-by-side */
+  gap: 8px; /* Space between textarea and button */
+  width: 100%; /* Take full width of its parent (footer) */
+  max-width: 1000px; /* Max width for the content */
+  align-items: flex-end; /* Align items to the bottom */
+}
+
+/* Settings Page Styles (removed nested sidebar styles) */
+/* The main .app grid and .sidebar will handle settings navigation */
+
+.settings-content-panel {
+  padding: 20px;
+  overflow-y: auto;
+  height: 100%; /* Ensure it takes full height of its parent */
+}
+
+.settings-category {
+  margin-bottom: 30px;
+}
+
+.settings-category h2 {
+  color: var(--accent);
+  margin-bottom: 15px;
+  font-size: 1.3em;
+}
+
+.setting-section {
+  margin-bottom: 20px;
+  padding: 15px; /* Adjusted padding */
+  border-bottom: 1px solid var(--border);
+  background-color: var(--panel); /* Background for setting sections */
+  border-radius: 8px;
+}
+
+.setting-section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.setting-section h3 {
+  color: var(--text);
+  margin-top: 0;
+  margin-bottom: 10px;
+  font-size: 1.1em;
+}
+
+/* Re-apply general input/select styles for settings components */
+.settings-content-panel .input,
+.settings-content-panel .select {
+  width: 100%;
+  max-width: 400px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background-color: var(--input-bg);
+  color: var(--text);
+  font-size: 1em;
+}
+
+.settings-content-panel .select {
+  min-width: unset;
+}
+
+/* Markdown Styles */
+.msg h1, .msg h2, .msg h3, .msg h4 {
+  margin: 10px 0;
+  color: var(--accent);
+}
+
+.msg ul {
+  padding-left: 20px;
+}
+
+.msg li {
+  margin-bottom: 5px;
+}
+
+.msg code {
+  background-color: var(--input-bg);
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.msg pre {
+  background-color: var(--input-bg);
+  padding: 10px;
+  border-radius: 8px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+}
+
+.msg pre code {
+  padding: 0;
+  background-color: transparent;
+}