From 48cbcaafafc86a38ce2483d3843023572e0bc895 Mon Sep 17 00:00:00 2001 From: Loki Date: Mon, 29 Jun 2026 18:46:51 +0000 Subject: [PATCH] Phase 3 : chat streaming SSE et persistance des sessions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Backend : - db.py : SQLite (sessions + messages), schéma et CRUD - routes/sessions.py : créer/lister/ouvrir/renommer/supprimer une session - routes/chat.py : POST /api/chat, relais token par token depuis Ollama (SSE), persistance des messages, titrage auto de la session au 1er message - main.py : lifespan -> init_db, montage des nouvelles routes Frontend : - api/client.ts : APIs sessions + streamChat (parsing SSE event/data) - store : sessions, messages, état de streaming, envoi optimiste - ChatPanel : fil de conversation réel, bulles user/agent, curseur de frappe - LeftPanel : historique réel (ouvrir/supprimer, horodatage relatif) Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01SVay7z3y7q2gEe54ByAE6N --- README.md | 6 +- backend/app/db.py | 135 ++++++++++++++++++++++++++ backend/app/main.py | 17 +++- backend/app/routes/chat.py | 84 ++++++++++++++++ backend/app/routes/sessions.py | 50 ++++++++++ frontend/src/api/client.ts | 93 ++++++++++++++++++ frontend/src/panels/ChatPanel.tsx | 153 +++++++++++++++++++++++++----- frontend/src/panels/LeftPanel.tsx | 96 ++++++++++++++----- frontend/src/store/useStore.ts | 104 ++++++++++++++++++++ 9 files changed, 688 insertions(+), 50 deletions(-) create mode 100644 backend/app/db.py create mode 100644 backend/app/routes/chat.py create mode 100644 backend/app/routes/sessions.py diff --git a/README.md b/README.md index 9a7db6c..9189c4a 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,9 @@ Frontend (React + Vite + TS + Tailwind) │ HTTP + SSE Backend (FastAPI, Python) ├── /api/status, /api/models, /api/models/pull (Ollama) - │ (chat agentique & outils : phases suivantes) + ├── /api/sessions (CRUD sessions) + ├── /api/chat (conversation streaming, SSE) + │ (outils agentiques : phases suivantes) │ httpx │ volume Ollama (:11434) /workspace + /data (SQLite) ``` @@ -67,7 +69,7 @@ npm run dev # http://localhost:5173 - [x] **Phase 1** — Socle + design system fidèle au thème, layout 3 panneaux - [x] **Phase 2** — Connexion Ollama : statut, liste des modèles, pull avec progression, sélecteur -- [ ] **Phase 3** — Chat streaming (SSE) + persistance des sessions (SQLite) +- [x] **Phase 3** — Chat streaming (SSE) + persistance des sessions (SQLite) - [ ] **Phase 4** — Boucle agentique & outils fichiers (read/write/list) - [ ] **Phase 5** — Aperçu HTML live + onglets Code/Logs + arborescence - [ ] **Phase 6** — Configuration complète (génération, toggles d'outils, invite système) diff --git a/backend/app/db.py b/backend/app/db.py new file mode 100644 index 0000000..4a6b859 --- /dev/null +++ b/backend/app/db.py @@ -0,0 +1,135 @@ +"""Persistance SQLite : sessions et messages. + +On utilise sqlite3 de la bibliothèque standard (zéro dépendance). Les écritures +sont rapides ; un verrou protège l'accès concurrent depuis les routes async. +""" +from __future__ import annotations + +import os +import sqlite3 +import threading +import time +import uuid + +from .config import settings + +_LOCK = threading.Lock() +_DB_PATH = os.path.join(settings.data_dir, "loki.db") + + +def _connect() -> sqlite3.Connection: + os.makedirs(settings.data_dir, exist_ok=True) + conn = sqlite3.connect(_DB_PATH, check_same_thread=False) + conn.row_factory = sqlite3.Row + return conn + + +def init_db() -> None: + """Crée les tables si elles n'existent pas.""" + with _LOCK, _connect() as conn: + conn.executescript( + """ + CREATE TABLE IF NOT EXISTS sessions ( + id TEXT PRIMARY KEY, + title TEXT NOT NULL, + model TEXT, + created_at REAL NOT NULL, + updated_at REAL NOT NULL + ); + CREATE TABLE IF NOT EXISTS messages ( + id TEXT PRIMARY KEY, + session_id TEXT NOT NULL REFERENCES sessions(id) ON DELETE CASCADE, + role TEXT NOT NULL, + content TEXT NOT NULL, + model TEXT, + created_at REAL NOT NULL + ); + CREATE INDEX IF NOT EXISTS idx_messages_session + ON messages(session_id, created_at); + """ + ) + + +def _now() -> float: + return time.time() + + +# ── Sessions ───────────────────────────────────────────────────────────── +def create_session(title: str, model: str | None) -> dict: + sid = uuid.uuid4().hex + now = _now() + with _LOCK, _connect() as conn: + conn.execute( + "INSERT INTO sessions (id, title, model, created_at, updated_at)" + " VALUES (?, ?, ?, ?, ?)", + (sid, title, model, now, now), + ) + return {"id": sid, "title": title, "model": model, + "created_at": now, "updated_at": now, "message_count": 0} + + +def list_sessions() -> list[dict]: + with _LOCK, _connect() as conn: + rows = conn.execute( + """ + SELECT s.*, COUNT(m.id) AS message_count + FROM sessions s + LEFT JOIN messages m ON m.session_id = s.id + GROUP BY s.id + ORDER BY s.updated_at DESC + """ + ).fetchall() + return [dict(r) for r in rows] + + +def get_session(sid: str) -> dict | None: + with _LOCK, _connect() as conn: + row = conn.execute("SELECT * FROM sessions WHERE id = ?", (sid,)).fetchone() + return dict(row) if row else None + + +def rename_session(sid: str, title: str) -> None: + with _LOCK, _connect() as conn: + conn.execute( + "UPDATE sessions SET title = ?, updated_at = ? WHERE id = ?", + (title, _now(), sid), + ) + + +def delete_session(sid: str) -> None: + with _LOCK, _connect() as conn: + conn.execute("DELETE FROM messages WHERE session_id = ?", (sid,)) + conn.execute("DELETE FROM sessions WHERE id = ?", (sid,)) + + +def touch_session(sid: str) -> None: + with _LOCK, _connect() as conn: + conn.execute( + "UPDATE sessions SET updated_at = ? WHERE id = ?", (_now(), sid) + ) + + +# ── Messages ───────────────────────────────────────────────────────────── +def add_message(sid: str, role: str, content: str, model: str | None) -> dict: + mid = uuid.uuid4().hex + now = _now() + with _LOCK, _connect() as conn: + conn.execute( + "INSERT INTO messages (id, session_id, role, content, model, created_at)" + " VALUES (?, ?, ?, ?, ?, ?)", + (mid, sid, role, content, model, now), + ) + conn.execute( + "UPDATE sessions SET updated_at = ? WHERE id = ?", (now, sid) + ) + return {"id": mid, "session_id": sid, "role": role, "content": content, + "model": model, "created_at": now} + + +def list_messages(sid: str) -> list[dict]: + with _LOCK, _connect() as conn: + rows = conn.execute( + "SELECT * FROM messages WHERE session_id = ? ORDER BY created_at", + (sid,), + ).fetchall() + return [dict(r) for r in rows] diff --git a/backend/app/main.py b/backend/app/main.py index 0b855ea..353e62f 100644 --- a/backend/app/main.py +++ b/backend/app/main.py @@ -5,16 +5,27 @@ Sert l'API (/api/*) et, en production, le frontend React compilé (static/). from __future__ import annotations import os +from contextlib import asynccontextmanager from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware from fastapi.responses import FileResponse from fastapi.staticfiles import StaticFiles +from . import db from .config import settings -from .routes import models +from .routes import chat, models, sessions -app = FastAPI(title="Loki", description="Agent IA local sur Ollama") + +@asynccontextmanager +async def lifespan(_: FastAPI): + db.init_db() + yield + + +app = FastAPI( + title="Loki", description="Agent IA local sur Ollama", lifespan=lifespan +) # En dev, le front tourne sur Vite (5173). On autorise le CORS large ; # en prod le front est servi par le même origin, donc sans impact. @@ -26,6 +37,8 @@ app.add_middleware( ) app.include_router(models.router) +app.include_router(sessions.router) +app.include_router(chat.router) @app.get("/api/health") diff --git a/backend/app/routes/chat.py b/backend/app/routes/chat.py new file mode 100644 index 0000000..2e13b21 --- /dev/null +++ b/backend/app/routes/chat.py @@ -0,0 +1,84 @@ +"""Route de conversation : streaming token par token depuis Ollama (SSE). + +Flux : + 1. on enregistre le message utilisateur ; + 2. on rejoue l'historique de la session vers Ollama en streaming ; + 3. on relaie chaque token au client (SSE) ; + 4. on enregistre la réponse complète de l'assistant. +""" +from __future__ import annotations + +import json + +import httpx +from fastapi import APIRouter, HTTPException +from fastapi.responses import StreamingResponse +from pydantic import BaseModel + +from .. import db +from ..config import settings +from ..ollama_client import ollama + +router = APIRouter(prefix="/api", tags=["chat"]) + +SYSTEM_PROMPT = ( + "Tu es Loki, un assistant de développement local. Tu écris du code clair, " + "commenté en français, et tu réponds de façon concise et utile." +) + + +class ChatRequest(BaseModel): + session_id: str + content: str + model: str | None = None + options: dict | None = None + + +def _sse(event: str, data: dict) -> str: + return f"event: {event}\ndata: {json.dumps(data, ensure_ascii=False)}\n\n" + + +@router.post("/chat") +async def chat(req: ChatRequest) -> StreamingResponse: + session = db.get_session(req.session_id) + if not session: + raise HTTPException(404, "session introuvable") + + model = req.model or session.get("model") or settings.default_model + + # Premier message : on titre la session avec un extrait. + history = db.list_messages(req.session_id) + if not history: + title = req.content.strip().split("\n")[0][:60] or "Nouvelle session" + db.rename_session(req.session_id, title) + + db.add_message(req.session_id, "user", req.content, None) + + # Contexte envoyé à Ollama : invite système + historique complet. + convo = [{"role": "system", "content": SYSTEM_PROMPT}] + convo += [ + {"role": m["role"], "content": m["content"]} + for m in db.list_messages(req.session_id) + ] + + async def event_stream(): + yield _sse("start", {"model": model}) + full = "" + try: + async for chunk in ollama.chat( + model, convo, options=req.options, stream=True + ): + token = chunk.get("message", {}).get("content", "") + if token: + full += token + yield _sse("token", {"content": token}) + if chunk.get("done"): + break + except (httpx.HTTPError, OSError) as exc: + yield _sse("error", {"message": str(exc)}) + + if full: + db.add_message(req.session_id, "assistant", full, model) + yield _sse("done", {"content": full, "model": model}) + + return StreamingResponse(event_stream(), media_type="text/event-stream") diff --git a/backend/app/routes/sessions.py b/backend/app/routes/sessions.py new file mode 100644 index 0000000..ba3d1fe --- /dev/null +++ b/backend/app/routes/sessions.py @@ -0,0 +1,50 @@ +"""Routes de gestion des sessions de conversation.""" +from __future__ import annotations + +from fastapi import APIRouter, HTTPException +from pydantic import BaseModel + +from .. import db + +router = APIRouter(prefix="/api/sessions", tags=["sessions"]) + + +class CreateSession(BaseModel): + title: str = "Nouvelle session" + model: str | None = None + + +class RenameSession(BaseModel): + title: str + + +@router.get("") +async def get_sessions() -> dict: + return {"sessions": db.list_sessions()} + + +@router.post("") +async def post_session(req: CreateSession) -> dict: + return db.create_session(req.title, req.model) + + +@router.get("/{sid}") +async def get_one(sid: str) -> dict: + session = db.get_session(sid) + if not session: + raise HTTPException(404, "session introuvable") + return {"session": session, "messages": db.list_messages(sid)} + + +@router.patch("/{sid}") +async def patch_session(sid: str, req: RenameSession) -> dict: + if not db.get_session(sid): + raise HTTPException(404, "session introuvable") + db.rename_session(sid, req.title) + return {"ok": True} + + +@router.delete("/{sid}") +async def remove_session(sid: str) -> dict: + db.delete_session(sid) + return {"ok": True} diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts index 18ba172..75ec6df 100644 --- a/frontend/src/api/client.ts +++ b/frontend/src/api/client.ts @@ -29,6 +29,99 @@ export async function getModels(): Promise<{ return res.json(); } +export interface Session { + id: string; + title: string; + model?: string; + created_at: number; + updated_at: number; + message_count?: number; +} + +export interface Message { + id: string; + session_id: string; + role: "user" | "assistant"; + content: string; + model?: string; + created_at: number; +} + +export async function listSessions(): Promise { + const res = await fetch("/api/sessions"); + return (await res.json()).sessions; +} + +export async function createSession(model?: string): Promise { + const res = await fetch("/api/sessions", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ title: "Nouvelle session", model }), + }); + return res.json(); +} + +export async function getSession( + id: string +): Promise<{ session: Session; messages: Message[] }> { + const res = await fetch(`/api/sessions/${id}`); + return res.json(); +} + +export async function deleteSession(id: string): Promise { + await fetch(`/api/sessions/${id}`, { method: "DELETE" }); +} + +/** Envoie un message et streame la réponse de l'agent via SSE. */ +export async function streamChat( + body: { session_id: string; content: string; model?: string }, + handlers: { + onToken: (t: string) => void; + onDone: (full: string) => void; + onError: (msg: string) => void; + } +): Promise { + const res = await fetch("/api/chat", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(body), + }); + if (!res.body) { + handlers.onError("pas de flux de réponse"); + return; + } + + const reader = res.body.getReader(); + const decoder = new TextDecoder(); + let buffer = ""; + + while (true) { + const { done, value } = await reader.read(); + if (done) break; + buffer += decoder.decode(value, { stream: true }); + const events = buffer.split("\n\n"); + buffer = events.pop() ?? ""; + + for (const block of events) { + let event = "message"; + let data = ""; + for (const line of block.split("\n")) { + if (line.startsWith("event: ")) event = line.slice(7).trim(); + else if (line.startsWith("data: ")) data += line.slice(6); + } + if (!data) continue; + try { + const payload = JSON.parse(data); + if (event === "token") handlers.onToken(payload.content); + else if (event === "done") handlers.onDone(payload.content); + else if (event === "error") handlers.onError(payload.message); + } catch { + /* bloc partiel */ + } + } + } +} + /** Télécharge un modèle en streamant la progression via SSE. */ export async function pullModel( name: string, diff --git a/frontend/src/panels/ChatPanel.tsx b/frontend/src/panels/ChatPanel.tsx index 793c3ac..f5f0a7a 100644 --- a/frontend/src/panels/ChatPanel.tsx +++ b/frontend/src/panels/ChatPanel.tsx @@ -1,9 +1,41 @@ +import { useEffect, useRef, useState } from "react"; import { useStore } from "../store/useStore"; import { ClipIcon, LokiMark, SendIcon } from "../components/Icon"; +import type { Message } from "../api/client"; /** Panneau central : barre de contexte, fil de conversation, composer. */ export function ChatPanel() { - const selectedModel = useStore((s) => s.selectedModel); + const { + selectedModel, + messages, + streaming, + streamContent, + sendMessage, + currentSessionId, + } = useStore(); + + const [draft, setDraft] = useState(""); + const scrollRef = useRef(null); + + // Auto-scroll vers le bas à chaque token / message. + useEffect(() => { + scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight }); + }, [messages, streamContent]); + + const submit = () => { + if (!draft.trim() || streaming) return; + sendMessage(draft); + setDraft(""); + }; + + const onKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter" && !e.shiftKey) { + e.preventDefault(); + submit(); + } + }; + + const empty = messages.length === 0 && !streaming; return (
@@ -16,29 +48,47 @@ export function ChatPanel() { Température 0.7 - - Contexte - - - - 0/128K -
- ≈ 0 jeton + + {currentSessionId + ? `${messages.length} message${messages.length > 1 ? "s" : ""}` + : "aucune session"} +
- {/* Messages (vide pour l'instant — phase 3) */} -
-
- -
- Prêt à travailler. + {/* Messages */} +
+ {empty ? ( +
+ +
+ Prêt à travailler. +
+
+ Décris une tâche à l'agent. Les outils fichiers et l'aperçu en + direct arrivent à la prochaine étape. +
-
- Décris une tâche à l'agent. Il pourra lire et écrire des fichiers - dans le workspace, et te montrer un aperçu en direct. + ) : ( +
+ {messages.map((m) => ( + + ))} + {streaming && ( + + )}
-
+ )}
{/* Composer */} @@ -47,6 +97,9 @@ export function ChatPanel() {