From ee5ce669d5a8693a249de4aba4d74aa04c596ba2 Mon Sep 17 00:00:00 2001
From: losfair <zhy20000919@hotmail.com>
Date: Wed, 14 Feb 2024 15:59:27 +0800
Subject: [PATCH] squash

---
 .github/workflows/ci.yml                      |  33 ++
 .gitignore                                    |  11 +
 .vscode/extensions.json                       |   6 +
 .vscode/settings.json                         |  20 +
 .vscode/tailwind.json                         |  60 +++
 README.md                                     |   4 +-
 components/Button.tsx                         |  12 +
 deno.json                                     |  40 ++
 dev.ts                                        |   8 +
 fresh.config.ts                               |   6 +
 fresh.gen.ts                                  |  42 ++
 islands/ChatContent.tsx                       | 361 ++++++++++++++++++
 islands/ChatUI.tsx                            |  60 +++
 islands/Counter.tsx                           |  16 +
 islands/Sidebar.tsx                           | 104 +++++
 lib/fetch.ts                                  |  24 ++
 lib/kv.ts                                     |   1 +
 lib/markdown.ts                               |   9 +
 lib/oai.ts                                    |  96 +++++
 lib/workspace.ts                              |  75 ++++
 main.ts                                       |  14 +
 routes/_404.tsx                               |  27 ++
 routes/_app.tsx                               |  17 +
 routes/api/workspace/[workspaceId]/chat.ts    |  25 ++
 .../workspace/[workspaceId]/chats/[chatId].ts | 266 +++++++++++++
 .../[workspaceId]/messages/[messageId].ts     |  43 +++
 routes/index.tsx                              |  25 ++
 routes/workspace/[workspaceId].tsx            |  42 ++
 routes/workspace/index.tsx                    |  44 +++
 static/favicon.ico                            | Bin 0 -> 22382 bytes
 static/logo.svg                               |   6 +
 static/styles.css                             |   3 +
 tailwind.config.ts                            |  11 +
 33 files changed, 1510 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/ci.yml
 create mode 100644 .gitignore
 create mode 100644 .vscode/extensions.json
 create mode 100644 .vscode/settings.json
 create mode 100644 .vscode/tailwind.json
 create mode 100644 components/Button.tsx
 create mode 100644 deno.json
 create mode 100755 dev.ts
 create mode 100644 fresh.config.ts
 create mode 100644 fresh.gen.ts
 create mode 100644 islands/ChatContent.tsx
 create mode 100644 islands/ChatUI.tsx
 create mode 100644 islands/Counter.tsx
 create mode 100644 islands/Sidebar.tsx
 create mode 100644 lib/fetch.ts
 create mode 100644 lib/kv.ts
 create mode 100644 lib/markdown.ts
 create mode 100644 lib/oai.ts
 create mode 100644 lib/workspace.ts
 create mode 100644 main.ts
 create mode 100644 routes/_404.tsx
 create mode 100644 routes/_app.tsx
 create mode 100644 routes/api/workspace/[workspaceId]/chat.ts
 create mode 100644 routes/api/workspace/[workspaceId]/chats/[chatId].ts
 create mode 100644 routes/api/workspace/[workspaceId]/messages/[messageId].ts
 create mode 100644 routes/index.tsx
 create mode 100644 routes/workspace/[workspaceId].tsx
 create mode 100644 routes/workspace/index.tsx
 create mode 100644 static/favicon.ico
 create mode 100644 static/logo.svg
 create mode 100644 static/styles.css
 create mode 100644 tailwind.config.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..afd4c0d
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,33 @@
+name: Deploy
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: main
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+
+    permissions:
+      id-token: write
+      contents: read
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v3
+
+      - name: Install Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
+      - name: Build step
+        run: "OPENAI_API_KEY=dummy deno task build"
+
+      - name: Upload to Deno Deploy
+        uses: denoland/deployctl@v1
+        with:
+          project: "chatspace"
+          entrypoint: "./main.ts"
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5b4bdef
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,11 @@
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# Fresh build directory
+_fresh/
+# npm dependencies
+node_modules/
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..455f9fc
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "denoland.vscode-deno",
+    "bradlc.vscode-tailwindcss"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..bedf1ce
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,20 @@
+{
+  "deno.enable": true,
+  "deno.lint": true,
+  "editor.defaultFormatter": "denoland.vscode-deno",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "css.customData": [
+    ".vscode/tailwind.json"
+  ]
+}
diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json
new file mode 100644
index 0000000..af7991c
--- /dev/null
+++ b/.vscode/tailwind.json
@@ -0,0 +1,60 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css
+@responsive {\n  .alert {
+    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css
+@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css
+@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css
+@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}
diff --git a/README.md b/README.md
index 9f83154..b4ad959 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,3 @@
-# chatspace
\ No newline at end of file
+# Chatspace
+
+Real-time, collaborative GPT frontend built with Deno KV.
diff --git a/components/Button.tsx b/components/Button.tsx
new file mode 100644
index 0000000..f1b80a0
--- /dev/null
+++ b/components/Button.tsx
@@ -0,0 +1,12 @@
+import { JSX } from "preact";
+import { IS_BROWSER } from "$fresh/runtime.ts";
+
+export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      disabled={!IS_BROWSER || props.disabled}
+      class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
+    />
+  );
+}
diff --git a/deno.json b/deno.json
new file mode 100644
index 0000000..b016fda
--- /dev/null
+++ b/deno.json
@@ -0,0 +1,40 @@
+{
+  "lock": false,
+  "tasks": {
+    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
+    "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
+    "manifest": "deno task cli manifest $(pwd)",
+    "start": "deno run -A --watch=static/,routes/ --unstable dev.ts",
+    "build": "deno run -A --unstable dev.ts build",
+    "preview": "deno run -A main.ts",
+    "update": "deno run -A -r https://fresh.deno.dev/update ."
+  },
+  "lint": {
+    "rules": {
+      "tags": [
+        "fresh",
+        "recommended"
+      ]
+    }
+  },
+  "exclude": [
+    "**/_fresh/*"
+  ],
+  "imports": {
+    "$fresh/": "https://deno.land/x/fresh@1.6.1/",
+    "preact": "https://esm.sh/preact@10.19.2",
+    "preact/": "https://esm.sh/preact@10.19.2/",
+    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
+    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
+    "tailwindcss": "npm:tailwindcss@3.3.5",
+    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
+    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
+    "@tailwindcss/typography": "npm:@tailwindcss/typography@0.5.10",
+    "$std/": "https://deno.land/std@0.208.0/"
+  },
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "nodeModulesDir": true
+}
diff --git a/dev.ts b/dev.ts
new file mode 100755
index 0000000..ae73946
--- /dev/null
+++ b/dev.ts
@@ -0,0 +1,8 @@
+#!/usr/bin/env -S deno run -A --watch=static/,routes/
+
+import dev from "$fresh/dev.ts";
+import config from "./fresh.config.ts";
+
+import "$std/dotenv/load.ts";
+
+await dev(import.meta.url, "./main.ts", config);
diff --git a/fresh.config.ts b/fresh.config.ts
new file mode 100644
index 0000000..f50b17a
--- /dev/null
+++ b/fresh.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "$fresh/server.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
+
+export default defineConfig({
+  plugins: [tailwind()],
+});
diff --git a/fresh.gen.ts b/fresh.gen.ts
new file mode 100644
index 0000000..8b58d5f
--- /dev/null
+++ b/fresh.gen.ts
@@ -0,0 +1,42 @@
+// DO NOT EDIT. This file is generated by Fresh.
+// This file SHOULD be checked into source version control.
+// This file is automatically updated during development when running `dev.ts`.
+
+import * as $_404 from "./routes/_404.tsx";
+import * as $_app from "./routes/_app.tsx";
+import * as $api_workspace_workspaceId_chat from "./routes/api/workspace/[workspaceId]/chat.ts";
+import * as $api_workspace_workspaceId_chats_chatId_ from "./routes/api/workspace/[workspaceId]/chats/[chatId].ts";
+import * as $api_workspace_workspaceId_messages_messageId_ from "./routes/api/workspace/[workspaceId]/messages/[messageId].ts";
+import * as $index from "./routes/index.tsx";
+import * as $workspace_workspaceId_ from "./routes/workspace/[workspaceId].tsx";
+import * as $workspace_index from "./routes/workspace/index.tsx";
+import * as $ChatContent from "./islands/ChatContent.tsx";
+import * as $ChatUI from "./islands/ChatUI.tsx";
+import * as $Counter from "./islands/Counter.tsx";
+import * as $Sidebar from "./islands/Sidebar.tsx";
+import { type Manifest } from "$fresh/server.ts";
+
+const manifest = {
+  routes: {
+    "./routes/_404.tsx": $_404,
+    "./routes/_app.tsx": $_app,
+    "./routes/api/workspace/[workspaceId]/chat.ts":
+      $api_workspace_workspaceId_chat,
+    "./routes/api/workspace/[workspaceId]/chats/[chatId].ts":
+      $api_workspace_workspaceId_chats_chatId_,
+    "./routes/api/workspace/[workspaceId]/messages/[messageId].ts":
+      $api_workspace_workspaceId_messages_messageId_,
+    "./routes/index.tsx": $index,
+    "./routes/workspace/[workspaceId].tsx": $workspace_workspaceId_,
+    "./routes/workspace/index.tsx": $workspace_index,
+  },
+  islands: {
+    "./islands/ChatContent.tsx": $ChatContent,
+    "./islands/ChatUI.tsx": $ChatUI,
+    "./islands/Counter.tsx": $Counter,
+    "./islands/Sidebar.tsx": $Sidebar,
+  },
+  baseUrl: import.meta.url,
+} satisfies Manifest;
+
+export default manifest;
diff --git a/islands/ChatContent.tsx b/islands/ChatContent.tsx
new file mode 100644
index 0000000..18651b1
--- /dev/null
+++ b/islands/ChatContent.tsx
@@ -0,0 +1,361 @@
+import {
+  MutableRef,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "preact/hooks";
+import {
+  ChatHead,
+  ChatMessage,
+  WorkspaceStateContext,
+} from "../lib/workspace.ts";
+import { fetchOrError } from "../lib/fetch.ts";
+
+export function ChatContent() {
+  const state = useContext(WorkspaceStateContext)!;
+  const currentHead = state.currentHead.value;
+  if (!currentHead) {
+    return (
+      <div class="flex flex-col p-4 text-center text-gray-600">
+        Select a chat
+      </div>
+    );
+  }
+  return (
+    <div class="flex flex-col h-full">
+      <ChatContentForId key={currentHead} chatId={currentHead} />
+    </div>
+  );
+}
+
+function ChatContentForId({ chatId }: { chatId: string }) {
+  const state = useContext(WorkspaceStateContext)!;
+  const [head, setHead] = useState(null as ChatHead | null);
+  const messageCache: MutableRef<Map<string, ChatMessage>> = useRef(new Map());
+  const inputRef = useRef(null as HTMLTextAreaElement | null);
+  const boundaryCheckboxRef = useRef(null as HTMLInputElement | null);
+  const [availableBackends, setAvailableBackends] = useState([] as string[]);
+
+  useEffect(() => {
+    const sse = new EventSource(`/api/workspace/${state.id}/chats/${chatId}`);
+    sse.onerror = (err) => {
+      console.log("Connection Error");
+      sse.close();
+    };
+
+    sse.onmessage = (event) => {
+      const body: {
+        head: ChatHead;
+        messages: ChatMessage[];
+        availableBackends: string[];
+      } = JSON.parse(
+        event.data,
+      );
+      for (const m of body.messages) {
+        messageCache.current.set(m.id, m);
+      }
+      if (!body.head.backend) {
+        body.head.backend = availableBackends[0];
+      }
+      setHead(body.head);
+      setAvailableBackends(body.availableBackends);
+    };
+
+    return () => {
+      sse.close();
+    };
+  }, [state.id, chatId]);
+
+  const [editingTitle, setEditingTitle] = useState(null as string | null);
+  const [editingSystemPrompt, setEditingSystemPrompt] = useState(
+    null as
+      | string
+      | null,
+  );
+  const bottomRef = useRef(null as HTMLDivElement | null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "instant" });
+  }, [head?.messages ? head.messages[head.messages.length - 1] : ""]);
+
+  const backendSelector = useRef(null as HTMLSelectElement | null);
+
+  const sendInput = async () => {
+    const content = inputRef.current?.value?.trim() ?? "";
+    if (!content) return;
+
+    await fetchOrError(
+      `/api/workspace/${state.id}/chats/${chatId}`,
+      {
+        method: "POST",
+        body: {
+          text: content,
+          boundary: !!boundaryCheckboxRef.current?.checked,
+        },
+      },
+    );
+
+    if (inputRef.current) inputRef.current.value = "";
+    if (boundaryCheckboxRef.current) {
+      boundaryCheckboxRef.current.checked = false;
+    }
+  };
+
+  if (!head) return <div></div>;
+  return (
+    <div class="h-full">
+      <div
+        class="flex flex-col p-4 pb-0 bg-white"
+        style={{ height: "calc(100% - 5rem)" }}
+      >
+        <div class="flex flex-col items-start mb-4">
+          <div class="font-bold text-lg">
+            {editingTitle !== null
+              ? (
+                <input
+                  type="text"
+                  class="p-2 border border-gray-300 rounded"
+                  value={editingTitle}
+                  onChange={(e) => {
+                    setEditingTitle((e.target as HTMLInputElement).value);
+                  }}
+                  onBlur={async () => {
+                    await fetchOrError(
+                      `/api/workspace/${state.id}/chats/${chatId}`,
+                      {
+                        method: "PATCH",
+                        body: {
+                          title: editingTitle,
+                        },
+                      },
+                    );
+                    setEditingTitle(null);
+                  }}
+                />
+              )
+              : (
+                <span
+                  class="cursor-pointer"
+                  onClick={() => {
+                    setEditingTitle(head.title);
+                  }}
+                >
+                  {head.title}
+                </span>
+              )}
+          </div>
+          <div class="flex flex-row items-center gap-4">
+            <div class="text-sm text-gray-400">
+              {new Date(head.timestamp).toLocaleString()}
+            </div>
+
+            <div class="text-sm">
+              <select
+                class="bg-gray-50 disabled:bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                ref={backendSelector}
+                value={head.backend}
+                onChange={async (e) => {
+                  const newBackend = (e.target as HTMLSelectElement).value;
+                  if (backendSelector.current) {
+                    backendSelector.current.disabled = true;
+                  }
+                  await fetchOrError(
+                    `/api/workspace/${state.id}/chats/${chatId}`,
+                    {
+                      method: "PATCH",
+                      body: {
+                        backend: newBackend,
+                      },
+                    },
+                  );
+                  if (backendSelector.current) {
+                    backendSelector.current.disabled = false;
+                  }
+                }}
+              >
+                {availableBackends.map((b) => <option value={b}>{b}</option>)}
+              </select>
+            </div>
+          </div>
+          <div class="text-sm text-gray-500 w-full">
+            {editingSystemPrompt !== null
+              ? (
+                <input
+                  type="text"
+                  class="p-2 border border-gray-300 rounded w-full"
+                  value={editingSystemPrompt}
+                  onChange={(e) => {
+                    setEditingSystemPrompt(
+                      (e.target as HTMLInputElement).value,
+                    );
+                  }}
+                  onBlur={async () => {
+                    await fetchOrError(
+                      `/api/workspace/${state.id}/chats/${chatId}`,
+                      {
+                        method: "PATCH",
+                        body: {
+                          systemPrompt: editingSystemPrompt,
+                        },
+                      },
+                    );
+                    setEditingSystemPrompt(null);
+                  }}
+                />
+              )
+              : (
+                <span
+                  class="cursor-pointer"
+                  onClick={() => {
+                    setEditingSystemPrompt(head.systemPrompt);
+                  }}
+                >
+                  {head.systemPrompt}
+                </span>
+              )}
+          </div>
+        </div>
+
+        <div class="flex flex-col space-y-2 overflow-y-auto">
+          {head.messages?.map((id, i) => {
+            if (!id) {
+              // boundary
+              return (
+                <div class="text-gray-400 border-gray-400 text-sm border-b">
+                  New conversation
+                </div>
+              );
+            }
+            const message = messageCache.current.get(id);
+            if (!message) return null;
+            return (
+              <MessageView
+                key={id}
+                chatId={head.id}
+                message={message}
+                forceCompleted={i !== head.messages!.length - 1}
+              />
+            );
+          })}
+          <div ref={bottomRef}></div>
+        </div>
+      </div>
+      <div class="h-20 overflow-y-auto px-2">
+        <div class="flex flex-row mt-2">
+          <textarea
+            ref={inputRef}
+            class="flex-grow p-2 border border-gray-300 outline-none mr-2 rounded"
+            rows={1}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                sendInput();
+              }
+            }}
+          />
+          <button
+            class="bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded"
+            onClick={sendInput}
+          >
+            Send
+          </button>
+        </div>
+
+        <div class="flex flex-row mt-2 text-xs gap-2">
+          <input type="checkbox" ref={boundaryCheckboxRef} />
+          <p>Start a new conversation</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function MessageView(
+  { chatId, message: initMessage, forceCompleted }: {
+    chatId: string;
+    message: ChatMessage;
+    forceCompleted: boolean;
+  },
+) {
+  const state = useContext(WorkspaceStateContext)!;
+  const [message, setMessage] = useState(initMessage);
+
+  useEffect(() => {
+    if (initMessage.completed || forceCompleted) return;
+
+    console.log(`connecting to message ${initMessage.id}`);
+
+    const sse = new EventSource(
+      `/api/workspace/${state.id}/messages/${initMessage.id}`,
+    );
+    sse.onerror = (err) => {
+      console.log("Connection Error");
+      sse.close();
+    };
+
+    sse.onmessage = (event) => {
+      const body: ChatMessage | null = JSON.parse(
+        event.data,
+      );
+      if (!body) return;
+      setMessage(body);
+      if (body.completed) {
+        console.log(`message completed: ${body.id}`);
+        sse.close();
+        return;
+      }
+    };
+
+    return () => {
+      sse.close();
+    };
+  }, [state.id, initMessage.id, forceCompleted]);
+
+  return (
+    <div class="flex flex-col items-start p-2 bg-gray-100 rounded">
+      <div class="flex flex-row gap-2 text-sm">
+        <div class="font-bold">
+          {message.role}
+          {message.backend ? ` (${message.backend})` : ""}
+        </div>
+        <div class="text-gray-400">
+          {new Date(message.timestamp).toLocaleString()}
+        </div>
+        <div>
+          <button
+            onClick={async () => {
+              const yes = confirm(
+                "Are you sure you want to delete this message?",
+              );
+              if (!yes) return;
+
+              await fetchOrError(
+                `/api/workspace/${state.id}/chats/${chatId}`,
+                {
+                  method: "PATCH",
+                  body: {
+                    "deletedMessages": [message.id],
+                  },
+                },
+              );
+            }}
+            class="underline"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+      {(message.interrupted ||
+          (!message.completed && Date.now() - message.timestamp > 30000))
+        ? <div class="text-red-500">Interrupted</div>
+        : null}
+      <div
+        class="flex-grow prose max-w-full overflow-x-auto"
+        dangerouslySetInnerHTML={{ __html: message.html ?? "" }}
+      >
+      </div>
+    </div>
+  );
+}
diff --git a/islands/ChatUI.tsx b/islands/ChatUI.tsx
new file mode 100644
index 0000000..d56b5b1
--- /dev/null
+++ b/islands/ChatUI.tsx
@@ -0,0 +1,60 @@
+import { useEffect, useMemo, useState } from "preact/hooks";
+import {
+  createWorkspaceState,
+  WorkspaceInfo,
+  WorkspaceStateContext,
+} from "../lib/workspace.ts";
+import { NewChat, SidebarContent } from "./Sidebar.tsx";
+import { ChatContent } from "./ChatContent.tsx";
+
+export function ChatUI(
+  { workspaceId, workspaceInfo }: {
+    workspaceId: string;
+    workspaceInfo: WorkspaceInfo;
+  },
+) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+
+  const state = useMemo(
+    () => createWorkspaceState(workspaceId, workspaceInfo),
+    [],
+  );
+
+  useEffect(() => {
+    const callback = () => {
+      state.currentHead.value = location.hash.slice(1);
+      setIsSidebarOpen(false);
+    };
+    callback();
+    globalThis.addEventListener("hashchange", callback);
+    return () => globalThis.removeEventListener("hashchange", callback);
+  }, []);
+
+  return (
+    <WorkspaceStateContext.Provider value={state}>
+      <div class="flex flex-col sm:flex-row">
+        <div class="flex flex-row items-start sm:hidden p-3 h-16">
+          <button
+            class="w-4 text-xl leading-10"
+            onClick={toggleSidebar}
+          >
+            ☰
+          </button>
+          <div class="flex-grow"></div>
+          <NewChat white />
+        </div>
+        <div
+          class={`sm:w-1/4 bg-gray-200 sm:max-w-xs h-screen ${
+            isSidebarOpen ? "block" : "hidden"
+          } sm:block`}
+        >
+          <SidebarContent />
+        </div>
+        <div class="w-full sm:w-3/4 bg-gray-100 flex-grow h-screen">
+          <ChatContent />
+        </div>
+      </div>
+    </WorkspaceStateContext.Provider>
+  );
+}
diff --git a/islands/Counter.tsx b/islands/Counter.tsx
new file mode 100644
index 0000000..f3ea080
--- /dev/null
+++ b/islands/Counter.tsx
@@ -0,0 +1,16 @@
+import type { Signal } from "@preact/signals";
+import { Button } from "../components/Button.tsx";
+
+interface CounterProps {
+  count: Signal<number>;
+}
+
+export default function Counter(props: CounterProps) {
+  return (
+    <div class="flex gap-8 py-6">
+      <Button onClick={() => props.count.value -= 1}>-1</Button>
+      <p class="text-3xl tabular-nums">{props.count}</p>
+      <Button onClick={() => props.count.value += 1}>+1</Button>
+    </div>
+  );
+}
diff --git a/islands/Sidebar.tsx b/islands/Sidebar.tsx
new file mode 100644
index 0000000..722db34
--- /dev/null
+++ b/islands/Sidebar.tsx
@@ -0,0 +1,104 @@
+import { useContext } from "preact/hooks";
+import { fetchOrError } from "../lib/fetch.ts";
+import {
+  ChatHead,
+  WorkspaceInfo,
+  WorkspaceStateContext,
+} from "../lib/workspace.ts";
+
+// A list of conversation titles. Clicking on one will open it in the content
+// area.
+export function SidebarContent() {
+  const state = useContext(WorkspaceStateContext)!;
+  const currentHead = state.currentHead.value;
+  return (
+    <div class="flex flex-col h-full">
+      <div class="p-2 hidden sm:block">
+        <NewChat />
+      </div>
+
+      <div class="flex flex-col overflow-y-auto">
+        {[...state.heads.value.values()].reverse().map((head) => (
+          <div
+            key={head.id}
+            class={`flex flex-col p-2 border-b border-gray-200 hover:bg-gray-400${
+              head.id === currentHead ? " bg-gray-300" : ""
+            }`}
+            onClick={() => {
+              location.hash = `#${head.id}`;
+            }}
+          >
+            <div class="font-bold">{head.title}</div>
+            <div class="flex flex-row gap-2">
+              <div class="text-gray-500">
+                {new Date(head.timestamp).toLocaleDateString()}
+              </div>
+              <button
+                onClick={async () => {
+                  const yes = confirm(
+                    "Are you sure you want to delete this chat?",
+                  );
+                  if (!yes) return;
+
+                  await fetchOrError(
+                    `/api/workspace/${state.id}/chats/${head.id}`,
+                    {
+                      method: "DELETE",
+                    },
+                  );
+                  state.heads.value = new Map(state.heads.value);
+                  state.heads.value.delete(head.id);
+                  location.hash = "";
+                }}
+                class="underline"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function NewChat({ white }: { white?: boolean }) {
+  const state = useContext(WorkspaceStateContext)!;
+  return (
+    <button
+      class={`flex flex-row ${
+        white ? "bg-white" : "bg-black"
+      } rounded-lg shadow text-${white ? "black" : "white"} py-2 px-4 gap-2`}
+      onClick={async () => {
+        const head = await fetchOrError<ChatHead>(
+          `/api/workspace/${state.id}/chat`,
+          {
+            method: "POST",
+            body: {},
+          },
+        );
+        state.heads.value = new Map(state.heads.value);
+        state.heads.value.set(head.id, head);
+        location.hash = `#${head.id}`;
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        data-slot="icon"
+        class="w-6 h-6"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M12 4.5v15m7.5-7.5h-15"
+        />
+      </svg>
+
+      <span>New chat</span>
+    </button>
+  );
+}
diff --git a/lib/fetch.ts b/lib/fetch.ts
new file mode 100644
index 0000000..f074a12
--- /dev/null
+++ b/lib/fetch.ts
@@ -0,0 +1,24 @@
+export async function fetchOrError<T>(
+  url: string,
+  init?: { method: "POST" | "PATCH"; body: unknown } | { method: "DELETE" },
+): Promise<T> {
+  const res = await fetch(
+    url,
+    init
+      ? {
+        method: init.method,
+        body: "body" in init ? JSON.stringify(init.body) : undefined,
+        headers: {
+          "content-type": "application/json",
+          "accept": "application/json",
+        },
+      }
+      : undefined,
+  );
+  if (!res.ok) {
+    throw new Error(
+      `Fetch failed: ${res.status} ${res.statusText}: ${await res.text()}`,
+    );
+  }
+  return await res.json();
+}
diff --git a/lib/kv.ts b/lib/kv.ts
new file mode 100644
index 0000000..2ba8393
--- /dev/null
+++ b/lib/kv.ts
@@ -0,0 +1 @@
+export const kv = await Deno.openKv(Deno.env.get("KV_PATH") || undefined);
diff --git a/lib/markdown.ts b/lib/markdown.ts
new file mode 100644
index 0000000..875104c
--- /dev/null
+++ b/lib/markdown.ts
@@ -0,0 +1,9 @@
+import * as ammonia from "https://deno.land/x/ammonia@0.3.1/mod.ts";
+import { marked } from "npm:marked@11.1.0";
+
+const ammoniaInit = ammonia.init();
+
+export async function safelyRenderMarkdown(input: string): Promise<string> {
+  await ammoniaInit;
+  return ammonia.clean(await marked(input));
+}
diff --git a/lib/oai.ts b/lib/oai.ts
new file mode 100644
index 0000000..eb406b0
--- /dev/null
+++ b/lib/oai.ts
@@ -0,0 +1,96 @@
+import OpenAI from "https://deno.land/x/openai@v4.23.0/mod.ts";
+import { batchLoadMessages, ChatHead } from "./workspace.ts";
+import {
+  ChatCompletionChunk,
+  ChatCompletionMessageParam,
+} from "https://deno.land/x/openai@v4.23.0/resources/mod.ts";
+import { Stream } from "https://deno.land/x/openai@v4.23.0/streaming.ts";
+
+interface Backend {
+  oai: OpenAI;
+  model: string;
+}
+
+const backends: Map<string, Backend> = new Map();
+const defaultBackendName = Deno.env.get("CHATSPACE_DEFAULT_BACKEND");
+
+for (const [envName, envValue] of Object.entries(Deno.env.toObject())) {
+  const prefix = "CHATSPACE_BACKEND_";
+
+  if (!envName.startsWith(prefix)) continue;
+  const backendName = envName.slice(prefix.length).toLowerCase();
+  const [backendUrl, backendKey, model] = envValue.split(",");
+  if (!backendUrl || !backendKey || !model) {
+    console.warn(`Invalid backend "${backendName}"`);
+  }
+
+  const oai = new OpenAI({
+    baseURL: backendUrl,
+    apiKey: backendKey,
+  });
+  backends.set(backendName, {
+    oai,
+    model,
+  });
+}
+
+export async function generateChatCompletions(
+  kv: Deno.Kv,
+  workspaceId: string,
+  head: ChatHead,
+): Promise<
+  { stream: Stream<ChatCompletionChunk>; backendName: string } | null
+> {
+  const messages: ChatCompletionMessageParam[] = [];
+
+  messages.push({ role: "system", content: head.systemPrompt });
+
+  const messageIds = head.messages ?? [];
+  const boundary = messageIds.findLastIndex((x) => x === "") + 1;
+  for (
+    const msg of await batchLoadMessages(
+      kv,
+      workspaceId,
+      messageIds.slice(boundary),
+    )
+  ) {
+    if (msg.role === "user") {
+      messages.push({ role: "user", content: msg.text });
+    } else if (msg.role === "assistant") {
+      messages.push({ role: "assistant", content: msg.text });
+    } else {
+      // ignore
+    }
+  }
+
+  const backendName = head.backend ?? defaultBackendName;
+  if (!backendName) return null;
+  const backend = backends.get(backendName);
+  if (!backend) return null;
+
+  const stream = await backend.oai.chat.completions.create({
+    model: backend.model,
+    messages,
+    stream: true,
+  });
+  return { stream, backendName };
+}
+
+export function getAllBackendNames(): string[] {
+  const res = Array.from(backends.keys());
+
+  // promote default backend to start of array
+  if (defaultBackendName) {
+    const idx = res.indexOf(defaultBackendName);
+    if (idx !== -1) {
+      res.splice(idx, 1);
+      res.unshift(defaultBackendName);
+    }
+  }
+
+  return res;
+}
+
+export function isValidBackendName(name: string): boolean {
+  return backends.has(name);
+}
diff --git a/lib/workspace.ts b/lib/workspace.ts
new file mode 100644
index 0000000..7df1af2
--- /dev/null
+++ b/lib/workspace.ts
@@ -0,0 +1,75 @@
+import { Signal, signal } from "@preact/signals";
+import { createContext } from "preact";
+
+export interface WorkspaceState {
+  id: string;
+  heads: Signal<Map<string, ChatHead>>;
+  currentHead: Signal<string>;
+}
+
+export interface WorkspaceInfo {
+  heads: ChatHead[];
+  createdAt: number;
+}
+
+export interface ChatHead {
+  id: string;
+  backend?: string;
+  title: string;
+  systemPrompt: string;
+  timestamp: number;
+  messages?: string[];
+}
+
+export interface ChatMessage {
+  id: string;
+  role: "user" | "assistant";
+  backend?: string;
+  text: string;
+  html?: string;
+  timestamp: number;
+  completed: boolean;
+  interrupted?: boolean;
+}
+
+export const WorkspaceStateContext = createContext<WorkspaceState | null>(null);
+
+export function createWorkspaceState(
+  id: string,
+  info: WorkspaceInfo,
+): WorkspaceState {
+  const state: WorkspaceState = {
+    id,
+    heads: signal(new Map(info.heads.map((head) => [head.id, head]))),
+    currentHead: signal(""),
+  };
+
+  return state;
+}
+
+export async function batchLoadMessages(
+  kv: Deno.Kv,
+  workspaceId: string,
+  messageIds: string[],
+): Promise<ChatMessage[]> {
+  messageIds = messageIds.filter((x) => x);
+
+  const batchSize = 10;
+
+  const messages: ChatMessage[] = [];
+  for (let i = 0; i < messageIds.length; i += batchSize) {
+    const batch = messageIds.slice(i, i + batchSize);
+    const batchMessages = await kv.getMany<ChatMessage[]>(
+      batch.map((x) => ["messages", workspaceId, x]),
+    );
+    messages.push(...batchMessages.map((m) => {
+      if (m.value !== null) {
+        return m.value;
+      } else {
+        throw new Error("Message not found");
+      }
+    }));
+  }
+
+  return messages;
+}
diff --git a/main.ts b/main.ts
new file mode 100644
index 0000000..02ea409
--- /dev/null
+++ b/main.ts
@@ -0,0 +1,14 @@
+/// <reference no-default-lib="true" />
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/// <reference lib="dom.asynciterable" />
+/// <reference lib="deno.ns" />
+/// <reference lib="deno.unstable" />
+
+import "$std/dotenv/load.ts";
+
+import { start } from "$fresh/server.ts";
+import manifest from "./fresh.gen.ts";
+import config from "./fresh.config.ts";
+
+await start(manifest, config);
diff --git a/routes/_404.tsx b/routes/_404.tsx
new file mode 100644
index 0000000..c63ae2e
--- /dev/null
+++ b/routes/_404.tsx
@@ -0,0 +1,27 @@
+import { Head } from "$fresh/runtime.ts";
+
+export default function Error404() {
+  return (
+    <>
+      <Head>
+        <title>404 - Page not found</title>
+      </Head>
+      <div class="px-4 py-8 mx-auto bg-[#86efac]">
+        <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
+          <img
+            class="my-6"
+            src="/logo.svg"
+            width="128"
+            height="128"
+            alt="the Fresh logo: a sliced lemon dripping with juice"
+          />
+          <h1 class="text-4xl font-bold">404 - Page not found</h1>
+          <p class="my-4">
+            The page you were looking for doesn't exist.
+          </p>
+          <a href="/" class="underline">Go back home</a>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/routes/_app.tsx b/routes/_app.tsx
new file mode 100644
index 0000000..62e25b1
--- /dev/null
+++ b/routes/_app.tsx
@@ -0,0 +1,17 @@
+import { type PageProps } from "$fresh/server.ts";
+
+export default function App({ Component }: PageProps) {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>chatspace</title>
+        <link rel="stylesheet" href="/styles.css" />
+      </head>
+      <body>
+        <Component />
+      </body>
+    </html>
+  );
+}
diff --git a/routes/api/workspace/[workspaceId]/chat.ts b/routes/api/workspace/[workspaceId]/chat.ts
new file mode 100644
index 0000000..834be6d
--- /dev/null
+++ b/routes/api/workspace/[workspaceId]/chat.ts
@@ -0,0 +1,25 @@
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import { ulid } from "https://deno.land/x/ulid@v0.3.0/mod.ts";
+import { kv } from "../../../../lib/kv.ts";
+import { ChatHead, WorkspaceInfo } from "../../../../lib/workspace.ts";
+
+export const handler: Handlers = {
+  async POST(_req: Request, ctx: FreshContext) {
+    // create a new conversation
+    const info = await kv.get<WorkspaceInfo>([
+      "workspaces",
+      ctx.params.workspaceId,
+    ]);
+    if (!info.value) return ctx.renderNotFound();
+
+    const head: ChatHead = {
+      id: ulid(),
+      title: "New Chat",
+      systemPrompt: "You are a helpful assistant.",
+      timestamp: Date.now(),
+    };
+    await kv.set(["heads", ctx.params.workspaceId, head.id], head);
+
+    return Response.json(head, { status: 201 });
+  },
+};
diff --git a/routes/api/workspace/[workspaceId]/chats/[chatId].ts b/routes/api/workspace/[workspaceId]/chats/[chatId].ts
new file mode 100644
index 0000000..f1b7a4d
--- /dev/null
+++ b/routes/api/workspace/[workspaceId]/chats/[chatId].ts
@@ -0,0 +1,266 @@
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import { ulid } from "https://deno.land/x/ulid@v0.3.0/mod.ts";
+import { kv } from "../../../../../lib/kv.ts";
+import {
+  batchLoadMessages,
+  ChatHead,
+  ChatMessage,
+} from "../../../../../lib/workspace.ts";
+import {
+  generateChatCompletions,
+  getAllBackendNames,
+  isValidBackendName,
+} from "../../../../../lib/oai.ts";
+import { safelyRenderMarkdown } from "../../../../../lib/markdown.ts";
+
+export const handler: Handlers = {
+  async GET(req: Request, ctx: FreshContext) {
+    const key = [
+      "heads",
+      ctx.params.workspaceId,
+      ctx.params.chatId,
+    ];
+    const availableBackends = getAllBackendNames();
+
+    if (req.headers.get("accept") === "text/event-stream") {
+      const seenMessages: Set<string> = new Set();
+      const encoder = new TextEncoder();
+      const encoderStream = new TransformStream({
+        transform: async (
+          [head]: [Deno.KvEntryMaybe<ChatHead>],
+          controller,
+        ) => {
+          const messages = await batchLoadMessages(
+            kv,
+            ctx.params.workspaceId,
+            head.value?.messages?.filter((x) => !seenMessages.has(x)) ?? [],
+          );
+          for (const m of messages) {
+            seenMessages.add(m.id);
+            m.html = await safelyRenderMarkdown(m.text);
+          }
+          controller.enqueue(
+            encoder.encode(`data: ${
+              JSON.stringify({
+                head: head.value,
+                messages,
+                availableBackends,
+              })
+            }\n\n`),
+          );
+        },
+      });
+      kv.watch([key]).pipeTo(encoderStream.writable).catch((e) => {
+        if ("" + e === "resource closed") {
+          return;
+        }
+        console.log(`Error watching ${key}: ${e}`);
+      });
+      return new Response(encoderStream.readable, {
+        headers: {
+          "content-type": "text/event-stream",
+        },
+      });
+    }
+
+    const head = await kv.get<ChatHead>(key);
+    if (!head.value) return ctx.renderNotFound();
+
+    const messages = await batchLoadMessages(
+      kv,
+      ctx.params.workspaceId,
+      head.value.messages ?? [],
+    );
+
+    return Response.json({ head: head.value, messages, availableBackends });
+  },
+
+  async POST(req: Request, ctx: FreshContext) {
+    const { text, boundary } = await req.json();
+    if (typeof text !== "string" || text.length === 0 || text.length > 16384) {
+      return Response.json({ error: "invalid text" }, { status: 400 });
+    }
+    if (boundary !== undefined && typeof boundary !== "boolean") {
+      return Response.json({ error: "invalid boundary" }, { status: 400 });
+    }
+
+    const userMessageId = ulid();
+    const assistantMessageId = ulid();
+    const headKey = [
+      "heads",
+      ctx.params.workspaceId,
+      ctx.params.chatId,
+    ];
+    const head = await kv.get<ChatHead>(headKey);
+    if (!head.value) return ctx.renderNotFound();
+
+    if (!head.value.messages) head.value.messages = [];
+
+    if (
+      boundary && head.value.messages[head.value.messages.length - 1] !== ""
+    ) head.value.messages.push("");
+    head.value.messages.push(userMessageId, assistantMessageId);
+
+    const userMessage: ChatMessage = {
+      id: userMessageId,
+      role: "user",
+      text,
+      timestamp: Date.now(),
+      completed: true,
+    };
+    const assistantMessage: ChatMessage = {
+      id: assistantMessageId,
+      role: "assistant",
+      text: "",
+      timestamp: Date.now(),
+      completed: false,
+    };
+
+    const assistantMessageKey = [
+      "messages",
+      ctx.params.workspaceId,
+      assistantMessageId,
+    ];
+
+    const { ok } = await kv.atomic().check(head).set(head.key, head.value).set([
+      "messages",
+      ctx.params.workspaceId,
+      userMessageId,
+    ], userMessage).set(assistantMessageKey, assistantMessage).commit();
+    if (!ok) return Response.json({ error: "conflict" }, { status: 409 });
+
+    (async () => {
+      head.value.messages?.pop(); // remove the incomplete assistant reply
+
+      const streamWithInfo = await generateChatCompletions(
+        kv,
+        ctx.params.workspaceId,
+        head.value,
+      );
+      if (!streamWithInfo) {
+        assistantMessage.interrupted = true;
+        assistantMessage.completed = true;
+        await kv.set(assistantMessageKey, assistantMessage);
+        return;
+      }
+      const { stream, backendName } = streamWithInfo;
+      assistantMessage.backend = backendName;
+
+      let ongoingSet: Promise<void> | null = null;
+      let stop = false;
+
+      for await (const chunk of stream) {
+        if (stop) {
+          stream.controller.abort();
+          break;
+        }
+        const content = chunk.choices[0]?.delta.content ?? "";
+        assistantMessage.text += content;
+        assistantMessage.timestamp = Date.now();
+        assistantMessage.completed = !!chunk.choices[0]?.finish_reason;
+        if (!ongoingSet) {
+          ongoingSet = Promise.all([
+            kv.set(assistantMessageKey, assistantMessage),
+            kv.get<ChatHead>(headKey),
+          ]).then(([_setRes, head]) => {
+            ongoingSet = null;
+            stop = !head.value?.messages?.find((x) => x === assistantMessageId);
+          });
+        }
+      }
+      await ongoingSet;
+
+      if (!assistantMessage.completed) {
+        assistantMessage.interrupted = true;
+        assistantMessage.completed = true;
+      }
+      await kv.set(assistantMessageKey, assistantMessage);
+    })().catch((e) => {
+      console.log(`generation failed (chat ${ctx.params.chatId}): ${e}`);
+    });
+
+    return Response.json({ ok: true });
+  },
+
+  async DELETE(_req: Request, ctx: FreshContext) {
+    const headKey = [
+      "heads",
+      ctx.params.workspaceId,
+      ctx.params.chatId,
+    ];
+
+    await kv.delete(headKey);
+    return Response.json({ ok: true });
+  },
+
+  async PATCH(req: Request, ctx: FreshContext) {
+    const { title, systemPrompt, deletedMessages, backend } = await req.json();
+    if (
+      title !== undefined && (typeof title !== "string" || title.length === 0)
+    ) {
+      return Response.json({ error: "invalid title" }, { status: 400 });
+    }
+    if (
+      systemPrompt !== undefined &&
+      (typeof systemPrompt !== "string" || systemPrompt.length === 0)
+    ) {
+      return Response.json({ error: "invalid systemPrompt" }, { status: 400 });
+    }
+    if (
+      deletedMessages !== undefined &&
+      (!Array.isArray(deletedMessages) ||
+        deletedMessages.findIndex((x) =>
+            typeof x !== "string" || x.length === 0
+          ) !== -1)
+    ) {
+      return Response.json({ error: "invalid deletedMessages" }, {
+        status: 400,
+      });
+    }
+    if (
+      backend !== undefined &&
+      (typeof backend !== "string" || !isValidBackendName(backend))
+    ) {
+      return Response.json({ error: "invalid backend" }, { status: 400 });
+    }
+
+    const headKey = [
+      "heads",
+      ctx.params.workspaceId,
+      ctx.params.chatId,
+    ];
+    const head = await kv.get<ChatHead>(headKey);
+    if (!head.value) return ctx.renderNotFound();
+
+    if (title !== undefined) head.value.title = title;
+    if (systemPrompt !== undefined) head.value.systemPrompt = systemPrompt;
+    if (deletedMessages !== undefined) {
+      const deletedMessagesSet = new Set(deletedMessages);
+      head.value.messages = head.value.messages?.filter((x) =>
+        !deletedMessagesSet.has(x)
+      );
+
+      // 1. All consecutive empty messages (`""`) should be reduced to one
+      let lastMessage = "";
+      head.value.messages = head.value.messages?.filter((x) => {
+        const keep = x !== "" || lastMessage !== "";
+        lastMessage = x;
+        return keep;
+      });
+      // 2. Trailing empty messages must be removed
+      while (
+        head.value.messages &&
+        head.value.messages[head.value.messages.length - 1] === ""
+      ) {
+        head.value.messages.pop();
+      }
+    }
+    if (backend !== undefined) head.value.backend = backend;
+
+    const { ok } = await kv.atomic().check(head).set(headKey, head.value)
+      .commit();
+    if (!ok) return Response.json({ error: "conflict" }, { status: 409 });
+
+    return Response.json({ ok: true });
+  },
+};
diff --git a/routes/api/workspace/[workspaceId]/messages/[messageId].ts b/routes/api/workspace/[workspaceId]/messages/[messageId].ts
new file mode 100644
index 0000000..c13355a
--- /dev/null
+++ b/routes/api/workspace/[workspaceId]/messages/[messageId].ts
@@ -0,0 +1,43 @@
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import { kv } from "../../../../../lib/kv.ts";
+import { safelyRenderMarkdown } from "../../../../../lib/markdown.ts";
+import { ChatMessage } from "../../../../../lib/workspace.ts";
+
+export const handler: Handlers = {
+  async GET(req: Request, ctx: FreshContext) {
+    const key = [
+      "messages",
+      ctx.params.workspaceId,
+      ctx.params.messageId,
+    ];
+    if (req.headers.get("accept") === "text/event-stream") {
+      const encoder = new TextEncoder();
+      const encoderStream = new TransformStream({
+        transform: async (
+          [message]: [Deno.KvEntryMaybe<ChatMessage>],
+          controller,
+        ) => {
+          if (message.value) {
+            message.value.html = await safelyRenderMarkdown(message.value.text);
+          }
+          controller.enqueue(
+            encoder.encode(`data: ${JSON.stringify(message.value)}\n\n`),
+          );
+        },
+      });
+      kv.watch([key]).pipeTo(encoderStream.writable).catch((e) => {
+        if ("" + e === "resource closed") {
+          return;
+        }
+        console.log(`Error watching ${key}: ${e}`);
+      });
+      return new Response(encoderStream.readable, {
+        headers: {
+          "content-type": "text/event-stream",
+        },
+      });
+    }
+
+    return Response.json((await kv.get<ChatMessage>(key)).value);
+  },
+};
diff --git a/routes/index.tsx b/routes/index.tsx
new file mode 100644
index 0000000..fc8061e
--- /dev/null
+++ b/routes/index.tsx
@@ -0,0 +1,25 @@
+import { useSignal } from "@preact/signals";
+import Counter from "../islands/Counter.tsx";
+
+export default function Home() {
+  const count = useSignal(3);
+  return (
+    <div class="px-4 py-8 mx-auto bg-[#86efac]">
+      <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
+        <img
+          class="my-6"
+          src="/logo.svg"
+          width="128"
+          height="128"
+          alt="the Fresh logo: a sliced lemon dripping with juice"
+        />
+        <h1 class="text-4xl font-bold">Welcome to Fresh</h1>
+        <p class="my-4">
+          Try updating this message in the
+          <code class="mx-2">./routes/index.tsx</code> file, and refresh.
+        </p>
+        <Counter count={count} />
+      </div>
+    </div>
+  );
+}
diff --git a/routes/workspace/[workspaceId].tsx b/routes/workspace/[workspaceId].tsx
new file mode 100644
index 0000000..5ba926c
--- /dev/null
+++ b/routes/workspace/[workspaceId].tsx
@@ -0,0 +1,42 @@
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import { ChatUI } from "../../islands/ChatUI.tsx";
+import { kv } from "../../lib/kv.ts";
+import { ChatHead, WorkspaceInfo } from "../../lib/workspace.ts";
+
+export const handler: Handlers = {
+  async GET(_req: Request, ctx: FreshContext) {
+    const info = await kv.get<WorkspaceInfo>([
+      "workspaces",
+      ctx.params.workspaceId,
+    ]);
+    if (!info.value) return ctx.renderNotFound();
+
+    const heads = await Array.fromAsync(
+      kv.list<ChatHead>({ prefix: ["heads", ctx.params.workspaceId] }),
+    );
+    info.value.heads = heads.map((x) => {
+      delete x.value.messages;
+      return x.value;
+    });
+
+    return ctx.render({
+      workspaceId: ctx.params.workspaceId,
+      workspaceInfo: info.value,
+    });
+  },
+};
+
+export default function Workspace(
+  { data }: {
+    data: { workspaceId: string; workspaceInfo: WorkspaceInfo };
+  },
+) {
+  return (
+    <div>
+      <ChatUI
+        workspaceId={data.workspaceId}
+        workspaceInfo={data.workspaceInfo}
+      />
+    </div>
+  );
+}
diff --git a/routes/workspace/index.tsx b/routes/workspace/index.tsx
new file mode 100644
index 0000000..cbc547b
--- /dev/null
+++ b/routes/workspace/index.tsx
@@ -0,0 +1,44 @@
+import { useSignal } from "@preact/signals";
+import { FreshContext, Handlers } from "$fresh/server.ts";
+import { ChatUI } from "../../islands/ChatUI.tsx";
+import { kv } from "../../lib/kv.ts";
+import {
+  createWorkspaceState,
+  WorkspaceInfo,
+  WorkspaceStateContext,
+} from "../../lib/workspace.ts";
+import { useMemo, useState } from "preact/hooks";
+import { ulid } from "https://deno.land/x/ulid@v0.3.0/mod.ts";
+
+export const handler: Handlers = {
+  GET(_req: Request, ctx: FreshContext) {
+    return ctx.render({});
+  },
+
+  async POST(req: Request, ctx: FreshContext) {
+    const workspaceId = ulid();
+    const info: WorkspaceInfo = {
+      heads: [],
+      createdAt: Date.now(),
+    };
+    await kv.set([
+      "workspaces",
+      workspaceId,
+    ], info);
+
+    return Response.redirect(
+      new URL(req.url).origin + `/workspace/${workspaceId}`,
+      302,
+    );
+  },
+};
+
+export default function WorkspaceInit() {
+  return (
+    <div>
+      <form method="POST">
+        <button type="submit">Create new workspace</button>
+      </form>
+    </div>
+  );
+}
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..1cfaaa2193b0f210107a559f7421569f57a25388
GIT binary patch
literal 22382
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
bck@HGWY%2idMme??%p8ZW3z(%VE+9-Ofn0d

literal 0
HcmV?d00001

diff --git a/static/logo.svg b/static/logo.svg
new file mode 100644
index 0000000..ef2fbe4
--- /dev/null
+++ b/static/logo.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M34.092 8.845C38.929 20.652 34.092 27 30 30.5c1 3.5-2.986 4.222-4.5 2.5-4.457 1.537-13.512 1.487-20-5C2 24.5 4.73 16.714 14 11.5c8-4.5 16-7 20.092-2.655Z" fill="#FFDB1E"/>
+  <path d="M14 11.5c6.848-4.497 15.025-6.38 18.368-3.47C37.5 12.5 21.5 22.612 15.5 25c-6.5 2.587-3 8.5-6.5 8.5-3 0-2.5-4-5.183-7.75C2.232 23.535 6.16 16.648 14 11.5Z" fill="#fff" stroke="#FFDB1E"/>
+  <path d="M28.535 8.772c4.645 1.25-.365 5.695-4.303 8.536-3.732 2.692-6.606 4.21-7.923 4.83-.366.173-1.617-2.252-1.617-1 0 .417-.7 2.238-.934 2.326-1.365.512-4.223 1.29-5.835 1.29-3.491 0-1.923-4.754 3.014-9.122.892-.789 1.478-.645 2.283-.645-.537-.773-.534-.917.403-1.546C17.79 10.64 23 8.77 25.212 8.42c.366.014.82.35.82.629.41-.14 2.095-.388 2.503-.278Z" fill="#FFE600"/>
+  <path d="M14.297 16.49c.985-.747 1.644-1.01 2.099-2.526.566.121.841-.08 1.29-.701.324.466 1.657.608 2.453.701-.715.451-1.057.852-1.452 2.106-1.464-.611-3.167-.302-4.39.42Z" fill="#fff"/>
+</svg>
\ No newline at end of file
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..ca59a9d
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,11 @@
+import { type Config } from "tailwindcss";
+import typography from "@tailwindcss/typography";
+
+export default {
+  content: [
+    "{routes,islands,components}/**/*.{ts,tsx}",
+  ],
+  plugins: [
+    typography,
+  ],
+} satisfies Config;