feat: chat shell page rendering
This commit is contained in:
Joseph Doherty
@@ -15,6 +15,7 @@ import chat.state.memory # noqa: F401
|
||||
import chat.state.world # noqa: F401
|
||||
|
||||
from chat.web.bots import router as bots_router
|
||||
from chat.web.chat import router as chat_router
|
||||
from chat.web.kickoff import router as kickoff_router
|
||||
from chat.web.nav import router as nav_router
|
||||
from chat.web.settings import router as settings_router
|
||||
@@ -38,6 +39,7 @@ app.include_router(bots_router)
|
||||
app.include_router(kickoff_router)
|
||||
app.include_router(settings_router)
|
||||
app.include_router(nav_router)
|
||||
app.include_router(chat_router)
|
||||
|
||||
|
||||
@app.get("/health")
|
||||
|
||||
@@ -68,3 +68,14 @@ h1 { margin-top: 0; }
|
||||
color: #1f5c2a; border-radius: 3px;
|
||||
}
|
||||
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
|
||||
.chat-shell { display: flex; flex-direction: column; height: 100%; max-width: 760px; margin: 0 auto; }
|
||||
.chat-header { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #e5e5e5; padding-bottom: 8px; margin-bottom: 16px; }
|
||||
.chat-header h1 { margin: 0; flex: 1; }
|
||||
.chat-meta { font-size: 13px; }
|
||||
.drawer-toggle { padding: 4px 10px; border: 1px solid #ccc; background: #fff; color: #1c1c1c; border-radius: 3px; cursor: pointer; }
|
||||
.timeline { flex: 1; overflow-y: auto; min-height: 200px; padding: 8px 0; }
|
||||
.turn { margin: 12px 0; }
|
||||
.turn-input { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid #e5e5e5; }
|
||||
.turn-input textarea { padding: 8px; font: inherit; border: 1px solid #ccc; border-radius: 3px; resize: vertical; }
|
||||
.drawer { position: fixed; top: 0; right: 0; width: 360px; height: 100vh; background: #fff; border-left: 1px solid #e5e5e5; padding: 16px; overflow-y: auto; z-index: 10; }
|
||||
.drawer[hidden] { display: none; }
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
{% extends "layout.html" %}
|
||||
{% block title %}{{ host_bot.name }} - chat{% endblock %}
|
||||
{% block content %}
|
||||
<div class="chat-shell" data-chat-id="{{ chat.id }}">
|
||||
<header class="chat-header">
|
||||
<h1>{{ host_bot.name }}</h1>
|
||||
<div class="chat-meta muted">{{ chat.time }}</div>
|
||||
<button class="drawer-toggle" type="button" aria-controls="drawer" aria-expanded="false">Drawer</button>
|
||||
</header>
|
||||
|
||||
<section class="timeline" id="timeline">
|
||||
{% if not turns %}
|
||||
<p class="muted">No turns yet. Start typing below.</p>
|
||||
{% else %}
|
||||
{% for turn in turns %}
|
||||
<div class="turn turn-{{ turn.role }}">
|
||||
<strong>{{ turn.speaker }}</strong>
|
||||
<p>{{ turn.text }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<form class="turn-input" method="post" action="/chats/{{ chat.id }}/turns">
|
||||
<textarea name="prose" rows="3" placeholder="What do you say or do?"></textarea>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
|
||||
<aside class="drawer" id="drawer" hidden>
|
||||
<p class="muted">Drawer (read-only). T24 fills this in.</p>
|
||||
</aside>
|
||||
</div>
|
||||
<script>
|
||||
document.querySelector('.drawer-toggle')?.addEventListener('click', (e) => {
|
||||
const drawer = document.getElementById('drawer');
|
||||
const isHidden = drawer.hasAttribute('hidden');
|
||||
if (isHidden) drawer.removeAttribute('hidden');
|
||||
else drawer.setAttribute('hidden', '');
|
||||
e.target.setAttribute('aria-expanded', String(isHidden));
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,54 @@
|
||||
"""Chat detail (shell) page.
|
||||
|
||||
Renders ``/chats/<id>``: the title (host bot's name), a timeline placeholder,
|
||||
the user-input form, and the drawer toggle. Turn handling lives in T19; this
|
||||
module only sets up the structural shell.
|
||||
"""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
from pathlib import Path
|
||||
|
||||
from fastapi import APIRouter, Depends, HTTPException, Request
|
||||
from fastapi.responses import HTMLResponse
|
||||
from fastapi.templating import Jinja2Templates
|
||||
|
||||
from chat.state.entities import get_bot
|
||||
from chat.state.world import get_chat
|
||||
from chat.web.bots import get_conn
|
||||
|
||||
TEMPLATES = Jinja2Templates(
|
||||
directory=str(Path(__file__).resolve().parent.parent / "templates")
|
||||
)
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
|
||||
@router.get("/chats/{chat_id}", response_class=HTMLResponse)
|
||||
async def chat_detail(chat_id: str, request: Request, conn=Depends(get_conn)):
|
||||
chat = get_chat(conn, chat_id)
|
||||
if chat is None:
|
||||
raise HTTPException(status_code=404, detail=f"chat not found: {chat_id}")
|
||||
|
||||
host_bot = get_bot(conn, chat["host_bot_id"])
|
||||
if host_bot is None:
|
||||
# Defensive: chat row references a bot that doesn't exist. Treat as 404
|
||||
# rather than crashing the template render.
|
||||
raise HTTPException(
|
||||
status_code=404, detail=f"host bot not found: {chat['host_bot_id']}"
|
||||
)
|
||||
|
||||
# Phase 1, T15: timeline starts empty. T19 will populate from event_log
|
||||
# by reading user_turn / assistant_turn events for this chat.
|
||||
turns: list[dict] = []
|
||||
|
||||
return TEMPLATES.TemplateResponse(
|
||||
request,
|
||||
"chat.html",
|
||||
{
|
||||
"chat": chat,
|
||||
"host_bot": host_bot,
|
||||
"turns": turns,
|
||||
"active_nav": "chats",
|
||||
},
|
||||
)
|
||||
@@ -0,0 +1,83 @@
|
||||
from __future__ import annotations
|
||||
|
||||
from pathlib import Path
|
||||
|
||||
import pytest
|
||||
from fastapi.testclient import TestClient
|
||||
|
||||
from chat.app import app
|
||||
from chat.db.connection import open_db
|
||||
from chat.eventlog.log import append_event
|
||||
from chat.eventlog.projector import project
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def client(tmp_path, monkeypatch):
|
||||
cfg = tmp_path / "config.toml"
|
||||
cfg.write_text('featherless_api_key = "test"\n')
|
||||
monkeypatch.setenv("CHAT_CONFIG_PATH", str(cfg))
|
||||
db = tmp_path / "test.db"
|
||||
monkeypatch.setenv("CHAT_DB_PATH", str(db))
|
||||
with TestClient(app) as c:
|
||||
yield c
|
||||
|
||||
|
||||
def _seed_chat(db_path: Path, bot_id: str = "bot_a", chat_id: str = "chat_bot_a") -> None:
|
||||
"""Author a bot, create a chat with default state."""
|
||||
with open_db(db_path) as conn:
|
||||
append_event(
|
||||
conn,
|
||||
kind="bot_authored",
|
||||
payload={
|
||||
"id": bot_id,
|
||||
"name": "BotA",
|
||||
"persona": "...",
|
||||
"voice_samples": [],
|
||||
"traits": [],
|
||||
"backstory": "",
|
||||
"initial_relationship_to_you": "",
|
||||
"kickoff_prose": "...",
|
||||
},
|
||||
)
|
||||
append_event(
|
||||
conn,
|
||||
kind="chat_created",
|
||||
payload={
|
||||
"id": chat_id,
|
||||
"host_bot_id": bot_id,
|
||||
"initial_time": "2026-04-26T20:00:00+00:00",
|
||||
"narrative_anchor": "Day 1",
|
||||
"weather": "",
|
||||
},
|
||||
)
|
||||
project(conn)
|
||||
|
||||
|
||||
def test_get_chat_404_when_missing(client):
|
||||
response = client.get("/chats/no_such_chat")
|
||||
assert response.status_code == 404
|
||||
|
||||
|
||||
def test_get_chat_renders_shell_with_host_bot_name(client, tmp_path):
|
||||
_seed_chat(tmp_path / "test.db")
|
||||
response = client.get("/chats/chat_bot_a")
|
||||
assert response.status_code == 200
|
||||
body = response.text
|
||||
assert "BotA" in body
|
||||
assert "<form" in body # turn input form
|
||||
assert "drawer" in body.lower() # drawer present
|
||||
assert "no turns yet" in body.lower() # empty timeline placeholder
|
||||
|
||||
|
||||
def test_get_chat_includes_turn_post_action(client, tmp_path):
|
||||
_seed_chat(tmp_path / "test.db")
|
||||
response = client.get("/chats/chat_bot_a")
|
||||
assert response.status_code == 200
|
||||
assert 'action="/chats/chat_bot_a/turns"' in response.text
|
||||
|
||||
|
||||
def test_get_chat_shows_chat_clock_time(client, tmp_path):
|
||||
_seed_chat(tmp_path / "test.db")
|
||||
response = client.get("/chats/chat_bot_a")
|
||||
assert response.status_code == 200
|
||||
assert "2026-04-26" in response.text
|
||||
Reference in New Issue
Block a user