display system prompt

client/main.tsx

@@ -11,25 +11,17 @@ async function nav() {
 
   const conversations = await fetch("/api/conversation").then(r => r.json());
   for (const conversation of conversations) {
-    const button = <button type="button">{conversation.name}</button>;
-    button.addEventListener("click", e => {
-      e.preventDefault();
-      route.set(conversation.id);
-    });
+    const button = (
+      <button type="button" _onclick={e => (e.preventDefault(), route.set(conversation.id))}>
+        {conversation.name}
+      </button>
+    );
 
     nav.append(button);
   }
 
   nav.append(
-    <button
-      type="button"
-      _tap={b =>
-        b.addEventListener("click", e => {
-          e.preventDefault();
-          route.set("new");
-        })
-      }
-    >
+    <button type="button" _onclick={e => (e.preventDefault(), route.set("new"))}>
       new
     </button>,
   );
@@ -105,6 +97,14 @@ function conversationUI(id: string) {
       inFlightMessages.delete(message.d);
     } else if ("n" in message) {
       name.set(message.n);
+    } else if ("sys" in message) {
+      chatlog.append(<article className="system">{message.sys}</article>);
+    } else if ("err" in message) {
+      chatlog.append(<article className="system error">{message.err}</article>);
+      if ("r" in message) {
+        inFlightMessages.get(message.r)?.element?.remove();
+        inFlightMessages.delete(message.r);
+      }
     }
 
     if (scrolledToBottom) chatlog.scrollTop = chatlog.scrollHeight - chatlog.clientHeight;
@@ -115,6 +115,7 @@ function conversationUI(id: string) {
       <input type="text" placeholder="Enter a prompt…" required />
     </form>
   );
+  // TODO: support multiline input via shift + enter
   const input = form.querySelector("input")!;
   form.addEventListener("submit", e => {
     e.preventDefault();

client/web/css/styles.css

@@ -6,6 +6,7 @@
   --alpha-text: 1;
 
   line-height: 1.25;
+  font-size: 1.25rem;
 }
 
 ::selection {
@@ -86,6 +87,17 @@ main,
     color: rgb(var(--color-text) / 0.5);
   }
 
+  article.system:not(.error) {
+    font-size: 0.5em;
+    font-family: var(--font-mono);
+    color: rgb(var(--color-fg) / 0.5);
+  }
+
+  article.system.error {
+    font-family: var(--font-mono);
+    background-color: rgb(127 0 0 / 0.5);
+  }
+
   summary {
     margin-bottom: 0;
     color: rgb(var(--color-accent) / 1);

deno.json

@@ -8,7 +8,7 @@
     "run": "deno task client:build --watch & deno task server:run"
   },
   "imports": {
-    "@char/aftercare": "jsr:@char/aftercare@^0.2.0"
+    "@char/aftercare": "jsr:@char/aftercare@^0.3.0"
   },
   "compilerOptions": {
     "lib": ["deno.window", "deno.unstable", "dom"],

server/inference.py

@@ -45,22 +45,32 @@ async def connect_to_conversation(ws: WebSocket):
       if not response._done: continue
       if response.prompt.system:
         system_prompt = None
+        await ws.send_text(json({"sys": response.prompt.system}))
       await ws.send_text(json({"u": response.prompt.prompt})) # user
       await ws.send_text(json({"f": response.text_or_raise()})) # full
 
-  await ws.send_text(json({"n": conversation.name}))
+  if conversation.name:
+    await ws.send_text(json({"n": conversation.name}))
 
   if conversation_id == "new":
     await ws.send_text(json({"i": conversation.id}))
 
   async for message in ws.iter_text():
+    if system_prompt:
+      await ws.send_text(json({"sys": system_prompt}))
     response = conversation.prompt(message, system=system_prompt, stream=True)
     system_prompt = None
 
     response_tid = tid_now()
     await ws.send_text(json({"u": message}))
     await ws.send_text(json({"s": response_tid})) # start
-    async for chunk in response:
-      await ws.send_text(json({"r": response_tid, "c": chunk}))
+    try:
+      async for chunk in response:
+        await ws.send_text(json({"r": response_tid, "c": chunk}))
+    except BaseException as e:
+      await ws.send_text(json({"err": str(e), "r": response_tid}))
     await ws.send_text(json({"d": response_tid})) # done
     (await response.to_sync_response()).log_to_db(db)
+
+    if conversation.name:
+      await ws.send_text(json({"n": conversation.name}))