initial commit
This commit is contained in:
0
backend/__init__.py
Normal file
0
backend/__init__.py
Normal file
14
backend/database.py
Normal file
14
backend/database.py
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
|
||||||
|
from sqlalchemy import create_engine
|
||||||
|
from sqlalchemy.orm import sessionmaker, DeclarativeBase
|
||||||
|
|
||||||
|
DATABASE_URL = "sqlite:///./backend/app.db"
|
||||||
|
|
||||||
|
engine = create_engine(
|
||||||
|
DATABASE_URL, connect_args={"check_same_thread": False}
|
||||||
|
)
|
||||||
|
|
||||||
|
SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
|
||||||
|
|
||||||
|
class Base(DeclarativeBase):
|
||||||
|
pass
|
||||||
137
backend/main.py
Normal file
137
backend/main.py
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
from fastapi import FastAPI, Depends, HTTPException
|
||||||
|
from fastapi.middleware.cors import CORSMiddleware
|
||||||
|
from sqlalchemy.orm import Session
|
||||||
|
from typing import List
|
||||||
|
from . import models, schemas
|
||||||
|
from .database import Base, engine, SessionLocal
|
||||||
|
from .ollama_client import list_models as ollama_list, chat as ollama_chat
|
||||||
|
|
||||||
|
# Create tables
|
||||||
|
Base.metadata.create_all(bind=engine)
|
||||||
|
|
||||||
|
app = FastAPI(title="LLM Desktop Backend", version="0.1.0" )
|
||||||
|
|
||||||
|
# CORS (dev-friendly; tighten later)
|
||||||
|
app.add_middleware(
|
||||||
|
CORSMiddleware,
|
||||||
|
allow_origins=["*"],
|
||||||
|
allow_credentials=True,
|
||||||
|
allow_methods=["*"],
|
||||||
|
allow_headers=["*"],
|
||||||
|
)
|
||||||
|
|
||||||
|
def get_db():
|
||||||
|
db = SessionLocal()
|
||||||
|
try:
|
||||||
|
yield db
|
||||||
|
finally:
|
||||||
|
db.close()
|
||||||
|
|
||||||
|
@app.get("/health")
|
||||||
|
def health():
|
||||||
|
return {"ok": True}
|
||||||
|
|
||||||
|
@app.get("/models")
|
||||||
|
async def get_models():
|
||||||
|
try:
|
||||||
|
data = await ollama_list()
|
||||||
|
return {"models": [{"name": n} for n in data.get("models", [])]}
|
||||||
|
except Exception as e:
|
||||||
|
raise HTTPException(status_code=502, detail=f"Ollama not available: {e}")
|
||||||
|
|
||||||
|
@app.get("/sessions", response_model=schemas.SessionsResponse)
|
||||||
|
def get_sessions(db: Session = Depends(get_db)):
|
||||||
|
sessions = db.query(models.ChatSession).order_by(models.ChatSession.created_at.desc()).all()
|
||||||
|
return {"sessions": sessions}
|
||||||
|
|
||||||
|
@app.post("/sessions", response_model=schemas.ChatSession)
|
||||||
|
def create_session(req: schemas.CreateSessionRequest, db: Session = Depends(get_db)):
|
||||||
|
new_session = models.ChatSession(session_id=req.session_id)
|
||||||
|
db.add(new_session)
|
||||||
|
db.commit()
|
||||||
|
db.refresh(new_session)
|
||||||
|
return new_session
|
||||||
|
|
||||||
|
@app.get("/history", response_model=schemas.HistoryResponse)
|
||||||
|
def history(session_id: str, db: Session = Depends(get_db)):
|
||||||
|
session = db.query(models.ChatSession).filter(models.ChatSession.session_id == session_id).first()
|
||||||
|
if not session:
|
||||||
|
return {"messages": []}
|
||||||
|
rows = db.query(models.ChatMessage) .filter(models.ChatMessage.session_pk == session.id) .order_by(models.ChatMessage.created_at.asc()) .all()
|
||||||
|
msgs = [{"role": r.role, "content": r.content} for r in rows]
|
||||||
|
return {"messages": msgs}
|
||||||
|
|
||||||
|
@app.post("/chat", response_model=schemas.ChatResponse)
|
||||||
|
async def chat(req: schemas.ChatRequest, db: Session = Depends(get_db)):
|
||||||
|
# Find or create session
|
||||||
|
session = db.query(models.ChatSession).filter(models.ChatSession.session_id == req.session_id).first()
|
||||||
|
if not session:
|
||||||
|
session = models.ChatSession(session_id=req.session_id)
|
||||||
|
db.add(session)
|
||||||
|
db.commit()
|
||||||
|
db.refresh(session)
|
||||||
|
|
||||||
|
# Save user message
|
||||||
|
user_row = models.ChatMessage(session_pk=session.id, role='user', content=req.message)
|
||||||
|
db.add(user_row)
|
||||||
|
db.commit()
|
||||||
|
|
||||||
|
# Build minimal conversation context (last 20 messages)
|
||||||
|
last_msgs = db.query(models.ChatMessage) .filter(models.ChatMessage.session_pk == session.id) .order_by(models.ChatMessage.created_at.asc()) .all()[-20:]
|
||||||
|
|
||||||
|
messages = [{"role": m.role, "content": m.content} for m in last_msgs]
|
||||||
|
|
||||||
|
try:
|
||||||
|
reply = await ollama_chat(req.model, messages)
|
||||||
|
except Exception as e:
|
||||||
|
raise HTTPException(status_code=502, detail=f"Ollama error: {e}")
|
||||||
|
|
||||||
|
# Save assistant reply
|
||||||
|
as_row = models.ChatMessage(session_pk=session.id, role='assistant', content=reply)
|
||||||
|
db.add(as_row)
|
||||||
|
db.commit()
|
||||||
|
|
||||||
|
return {"reply": reply}
|
||||||
|
|
||||||
|
@app.post("/generate-title", response_model=schemas.GenerateTitleResponse)
|
||||||
|
async def generate_title(req: schemas.GenerateTitleRequest, db: Session = Depends(get_db)):
|
||||||
|
session = db.query(models.ChatSession).filter(models.ChatSession.session_id == req.session_id).first()
|
||||||
|
if not session:
|
||||||
|
raise HTTPException(status_code=404, detail="Session not found")
|
||||||
|
|
||||||
|
prompt = f"Generate a very short, concise title (5 words or less) for a chat conversation that begins with this user message: \"{req.message}\". Do not use quotation marks in the title."
|
||||||
|
|
||||||
|
try:
|
||||||
|
title = await ollama_chat("llama3", [{"role": "user", "content": prompt}])
|
||||||
|
except Exception as e:
|
||||||
|
raise HTTPException(status_code=502, detail=f"Ollama error: {e}")
|
||||||
|
|
||||||
|
session.name = title
|
||||||
|
db.commit()
|
||||||
|
|
||||||
|
return {"title": title}
|
||||||
|
|
||||||
|
@app.delete("/sessions/{session_id}")
|
||||||
|
def delete_session(session_id: str, db: Session = Depends(get_db)):
|
||||||
|
session = db.query(models.ChatSession).filter(models.ChatSession.session_id == session_id).first()
|
||||||
|
if not session:
|
||||||
|
raise HTTPException(status_code=404, detail="Session not found")
|
||||||
|
|
||||||
|
# Delete associated messages
|
||||||
|
db.query(models.ChatMessage).filter(models.ChatMessage.session_pk == session.id).delete()
|
||||||
|
|
||||||
|
db.delete(session)
|
||||||
|
db.commit()
|
||||||
|
return {"ok": True}
|
||||||
|
|
||||||
|
@app.put("/sessions/{session_id}/rename")
|
||||||
|
def rename_session(session_id: str, req: schemas.GenerateTitleResponse, db: Session = Depends(get_db)):
|
||||||
|
session = db.query(models.ChatSession).filter(models.ChatSession.session_id == session_id).first()
|
||||||
|
if not session:
|
||||||
|
raise HTTPException(status_code=404, detail="Session not found")
|
||||||
|
|
||||||
|
session.name = req.title
|
||||||
|
db.commit()
|
||||||
|
return {"ok": True}
|
||||||
|
|
||||||
|
# To run standalone: python -m uvicorn backend.main:app --host 127.0.0.1 --port 8000
|
||||||
25
backend/models.py
Normal file
25
backend/models.py
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
from sqlalchemy import Column, Integer, String, Text, DateTime, ForeignKey
|
||||||
|
from sqlalchemy.orm import relationship
|
||||||
|
from datetime import datetime
|
||||||
|
from .database import Base
|
||||||
|
|
||||||
|
class ChatSession(Base):
|
||||||
|
__tablename__ = 'chat_sessions'
|
||||||
|
|
||||||
|
id = Column(Integer, primary_key=True, index=True)
|
||||||
|
session_id = Column(String(64), unique=True, index=True, nullable=False)
|
||||||
|
name = Column(String(100), default="New Chat", nullable=False)
|
||||||
|
created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
|
||||||
|
|
||||||
|
messages = relationship("ChatMessage", back_populates="session")
|
||||||
|
|
||||||
|
class ChatMessage(Base):
|
||||||
|
__tablename__ = 'chat_messages'
|
||||||
|
|
||||||
|
id = Column(Integer, primary_key=True, index=True)
|
||||||
|
session_pk = Column(Integer, ForeignKey('chat_sessions.id'), nullable=False)
|
||||||
|
role = Column(String(16), nullable=False) # 'user' | 'assistant'
|
||||||
|
content = Column(Text, nullable=False)
|
||||||
|
created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
|
||||||
|
|
||||||
|
session = relationship("ChatSession", back_populates="messages")
|
||||||
34
backend/ollama_client.py
Normal file
34
backend/ollama_client.py
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
|
||||||
|
import httpx
|
||||||
|
from typing import Dict, Any, List
|
||||||
|
|
||||||
|
OLLAMA_URL = "http://127.0.0.1:11434"
|
||||||
|
|
||||||
|
async def list_models() -> Dict[str, Any]:
|
||||||
|
async with httpx.AsyncClient(timeout=30.0) as client:
|
||||||
|
r = await client.get(f"{OLLAMA_URL}/api/tags")
|
||||||
|
r.raise_for_status()
|
||||||
|
data = r.json()
|
||||||
|
# Normalize to a simple list of names
|
||||||
|
models = [m.get('name') for m in data.get('models', [])]
|
||||||
|
return {"models": models}
|
||||||
|
|
||||||
|
async def chat(model: str, messages: List[Dict[str, str]]) -> str:
|
||||||
|
payload = {
|
||||||
|
"model": model,
|
||||||
|
"messages": messages,
|
||||||
|
"stream": False
|
||||||
|
}
|
||||||
|
async with httpx.AsyncClient(timeout=600.0) as client:
|
||||||
|
r = await client.post(f"{OLLAMA_URL}/api/chat", json=payload)
|
||||||
|
r.raise_for_status()
|
||||||
|
data = r.json()
|
||||||
|
# Ollama returns full conversation; pick last message content
|
||||||
|
try:
|
||||||
|
return data["message"]["content"]
|
||||||
|
except Exception:
|
||||||
|
# Newer Ollama formats may return messages list
|
||||||
|
msgs = data.get("messages") or []
|
||||||
|
if msgs:
|
||||||
|
return msgs[-1].get("content", "")
|
||||||
|
return data.get("content", "")
|
||||||
6
backend/requirements.txt
Normal file
6
backend/requirements.txt
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
|
||||||
|
fastapi==0.111.0
|
||||||
|
uvicorn[standard]==0.30.1
|
||||||
|
SQLAlchemy==2.0.32
|
||||||
|
httpx==0.27.0
|
||||||
|
pydantic==2.7.4
|
||||||
40
backend/schemas.py
Normal file
40
backend/schemas.py
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
from pydantic import BaseModel
|
||||||
|
from typing import List, Optional
|
||||||
|
from datetime import datetime
|
||||||
|
|
||||||
|
class Message(BaseModel):
|
||||||
|
role: str
|
||||||
|
content: str
|
||||||
|
|
||||||
|
class ChatRequest(BaseModel):
|
||||||
|
session_id: str
|
||||||
|
model: str
|
||||||
|
message: str
|
||||||
|
|
||||||
|
class ChatResponse(BaseModel):
|
||||||
|
reply: str
|
||||||
|
|
||||||
|
class HistoryResponse(BaseModel):
|
||||||
|
messages: List[Message]
|
||||||
|
|
||||||
|
class GenerateTitleRequest(BaseModel):
|
||||||
|
session_id: str
|
||||||
|
message: str
|
||||||
|
|
||||||
|
class GenerateTitleResponse(BaseModel):
|
||||||
|
title: str
|
||||||
|
|
||||||
|
class CreateSessionRequest(BaseModel):
|
||||||
|
session_id: str
|
||||||
|
|
||||||
|
class ChatSession(BaseModel):
|
||||||
|
id: int
|
||||||
|
session_id: str
|
||||||
|
name: str
|
||||||
|
created_at: datetime
|
||||||
|
|
||||||
|
class Config:
|
||||||
|
orm_mode = True
|
||||||
|
|
||||||
|
class SessionsResponse(BaseModel):
|
||||||
|
sessions: List[ChatSession]
|
||||||
171
electron/main.cjs
Normal file
171
electron/main.cjs
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
|
||||||
|
const { app, BrowserWindow, Menu, ipcMain } = require('electron')
|
||||||
|
const path = require('path')
|
||||||
|
const { is } = require('@electron-toolkit/utils')
|
||||||
|
const fs = require('fs')
|
||||||
|
|
||||||
|
let mainWindow
|
||||||
|
let settingsWindow = null
|
||||||
|
|
||||||
|
const settingsFilePath = path.join(app.getPath('userData'), 'settings.json')
|
||||||
|
let appSettings = {}
|
||||||
|
|
||||||
|
// Default settings
|
||||||
|
const defaultSettings = {
|
||||||
|
ollamaApiUrl: 'http://127.0.0.1:8000',
|
||||||
|
colorScheme: 'Default',
|
||||||
|
chatModel: 'llama3' // Set a default model here
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadSettings() {
|
||||||
|
try {
|
||||||
|
if (fs.existsSync(settingsFilePath)) {
|
||||||
|
const data = fs.readFileSync(settingsFilePath, 'utf8')
|
||||||
|
appSettings = { ...defaultSettings, ...JSON.parse(data) }
|
||||||
|
} else {
|
||||||
|
appSettings = { ...defaultSettings }
|
||||||
|
saveSettings() // Create the file with default settings
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load settings:', error)
|
||||||
|
appSettings = { ...defaultSettings }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveSettings() {
|
||||||
|
try {
|
||||||
|
fs.writeFileSync(settingsFilePath, JSON.stringify(appSettings, null, 2), 'utf8')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to save settings:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function createMainWindow () {
|
||||||
|
mainWindow = new BrowserWindow({
|
||||||
|
width: 1000,
|
||||||
|
height: 720,
|
||||||
|
show: false,
|
||||||
|
webPreferences: {
|
||||||
|
preload: path.join(__dirname, 'preload.cjs'),
|
||||||
|
contextIsolation: true,
|
||||||
|
nodeIntegration: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
mainWindow.on('ready-to-show', () => {
|
||||||
|
mainWindow.show()
|
||||||
|
})
|
||||||
|
|
||||||
|
if (is.dev && process.env.VITE_DEV_SERVER_URL) {
|
||||||
|
await mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL)
|
||||||
|
mainWindow.webContents.openDevTools({ mode: 'detach' })
|
||||||
|
} else {
|
||||||
|
await mainWindow.loadFile(path.join(__dirname, '../dist/index.html'))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function createSettingsWindow () {
|
||||||
|
if (settingsWindow) {
|
||||||
|
settingsWindow.focus()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
settingsWindow = new BrowserWindow({
|
||||||
|
width: 800,
|
||||||
|
height: 600,
|
||||||
|
title: 'Settings',
|
||||||
|
parent: mainWindow,
|
||||||
|
modal: true,
|
||||||
|
show: false,
|
||||||
|
webPreferences: {
|
||||||
|
preload: path.join(__dirname, 'preload.cjs'),
|
||||||
|
contextIsolation: true,
|
||||||
|
nodeIntegration: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
settingsWindow.on('ready-to-show', () => {
|
||||||
|
settingsWindow.show()
|
||||||
|
})
|
||||||
|
|
||||||
|
settingsWindow.on('closed', () => {
|
||||||
|
settingsWindow = null
|
||||||
|
})
|
||||||
|
|
||||||
|
if (is.dev && process.env.VITE_DEV_SERVER_URL) {
|
||||||
|
await settingsWindow.loadURL(`${process.env.VITE_DEV_SERVER_URL}#/settings`)
|
||||||
|
settingsWindow.webContents.openDevTools({ mode: 'detach' })
|
||||||
|
} else {
|
||||||
|
await settingsWindow.loadFile(path.join(__dirname, '../dist/index.html'), { hash: '/settings' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
app.whenReady().then(() => {
|
||||||
|
loadSettings() // Load settings when the app is ready
|
||||||
|
createMainWindow()
|
||||||
|
|
||||||
|
const menuTemplate = [
|
||||||
|
{
|
||||||
|
label: 'File',
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: 'Settings',
|
||||||
|
accelerator: 'CmdOrCtrl+,',
|
||||||
|
click: createSettingsWindow
|
||||||
|
},
|
||||||
|
{ type: 'separator' },
|
||||||
|
{ role: 'quit' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Edit',
|
||||||
|
submenu: [
|
||||||
|
{ role: 'undo' },
|
||||||
|
{ role: 'redo' },
|
||||||
|
{ type: 'separator' },
|
||||||
|
{ role: 'cut' },
|
||||||
|
{ role: 'copy' },
|
||||||
|
{ role: 'paste' },
|
||||||
|
{ role: 'delete' },
|
||||||
|
{ type: 'separator' },
|
||||||
|
{ role: 'selectAll' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'View',
|
||||||
|
submenu: [
|
||||||
|
{ role: 'reload' },
|
||||||
|
{ role: 'forcereload' },
|
||||||
|
{ role: 'toggledevtools' },
|
||||||
|
{ type: 'separator' },
|
||||||
|
{ role: 'resetzoom' },
|
||||||
|
{ role: 'zoomin' },
|
||||||
|
{ role: 'zoomout' },
|
||||||
|
{ type: 'separator' },
|
||||||
|
{ role: 'togglefullscreen' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const menu = Menu.buildFromTemplate(menuTemplate)
|
||||||
|
Menu.setApplicationMenu(menu)
|
||||||
|
|
||||||
|
app.on('activate', () => {
|
||||||
|
if (BrowserWindow.getAllWindows().length === 0) createMainWindow()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// IPC handlers for settings
|
||||||
|
ipcMain.handle('get-settings', () => {
|
||||||
|
return appSettings
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.handle('set-setting', (event, key, value) => {
|
||||||
|
appSettings[key] = value
|
||||||
|
saveSettings()
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
|
||||||
|
app.on('window-all-closed', () => {
|
||||||
|
if (process.platform !== 'darwin') app.quit()
|
||||||
|
})
|
||||||
8
electron/preload.cjs
Normal file
8
electron/preload.cjs
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
|
||||||
|
const { contextBridge, ipcRenderer } = require('electron')
|
||||||
|
|
||||||
|
// Expose a secure API to the renderer process
|
||||||
|
contextBridge.exposeInMainWorld('electronAPI', {
|
||||||
|
getSettings: () => ipcRenderer.invoke('get-settings'),
|
||||||
|
setSetting: (key, value) => ipcRenderer.invoke('set-setting', key, value)
|
||||||
|
})
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>LLM Desktop</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
package.json
Normal file
30
package.json
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"name": "Heimgeist",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"main": "electron/main.cjs",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "concurrently -k \"npm:dev:backend\" \"npm:dev:renderer\" \"npm:dev:electron\"",
|
||||||
|
"dev:backend": "python3 -m uvicorn backend.main:app --host 127.0.0.1 --port 8000 --reload",
|
||||||
|
"dev:renderer": "vite --port 5173 --strictPort",
|
||||||
|
"dev:electron": "wait-on http://localhost:5173 tcp:8000 && cross-env VITE_DEV_SERVER_URL=http://localhost:5173 electron .",
|
||||||
|
"build": "vite build",
|
||||||
|
"start": "electron ."
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@electron-toolkit/utils": "^4.0.0",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^7.8.1",
|
||||||
|
"react-textarea-autosize": "^8.5.9"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-react": "^4.3.1",
|
||||||
|
"concurrently": "^9.0.1",
|
||||||
|
"cross-env": "^7.0.3",
|
||||||
|
"electron": "^31.2.0",
|
||||||
|
"vite": "^5.4.2",
|
||||||
|
"wait-on": "^7.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
run.sh
Executable file
6
run.sh
Executable file
@@ -0,0 +1,6 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
python -m venv backend/.venv
|
||||||
|
source backend/.venv/bin/activate
|
||||||
|
pip install -r backend/requirements.txt
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
483
src/App.jsx
Normal file
483
src/App.jsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
74
src/GeneralSettings.jsx
Normal file
74
src/GeneralSettings.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
88
src/InterfaceSettings.jsx
Normal file
88
src/InterfaceSettings.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
17
src/main.jsx
Normal file
17
src/main.jsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
67
src/markdown.js
Normal file
67
src/markdown.js
Normal file
@@ -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;
|
||||||
|
}
|
||||||
424
src/styles.css
Normal file
424
src/styles.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
13
vite.config.js
Normal file
13
vite.config.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
port: 5173,
|
||||||
|
strictPort: true
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
outDir: 'dist'
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user