Use editor event to update content instead of bind

src/database/seed.ts

@@ -1,15 +1,6 @@
-import { chatTable } from "@/database/schema";
-import { useDb } from "@/database/client";
-import { nanoid } from "nanoid";
+import { newChat } from "../routes/(app)/$data";
 
 export function seed() {
   // create first chat
-  return useDb().transaction(async (tx) => {
-    await tx.insert(chatTable).values({
-      id: nanoid(10),
-      name: "Untitled",
-      prompt: "",
-      createdAt: new Date().toISOString(),
-    });
-  });
+  return newChat();
 }

src/routes/(app)/$data.ts

@@ -18,7 +18,6 @@ export async function newChat() {
       chatId: id,
     });
   });
-  await invalidate("view:chats");
   return id;
 }
 

src/routes/(app)/+layout.ts

@@ -9,27 +9,30 @@ let migrated = false;
 
 export async function load({ depends }) {
   exposeDb();
-  try {
-    // only run migrations once
-    if (!migrated) {
-      const { runMigrations } = await import("@/database/migrator");
-      console.log("Migrating database");
-      await runMigrations();
-      await useDb().run(sql.raw("PRAGMA foreign_keys=on;"));
-      console.log("Migration complete");
-      migrated = true;
-    }
-  } catch (err) {
-    console.error(err);
-  }
+  await runMigrations();
   const chats = await useDb().query.chatTable.findMany({
     // limit: 10,
     orderBy: [desc(chatTable.createdAt)],
   });
-  console.log("chats", chats);
   registerModel(chatTable, chats, depends);
   depends("view:chats");
   return {
     chats,
   };
 }
+
+async function runMigrations() {
+  if (migrated) {
+    return;
+  }
+  try {
+    const { runMigrations } = await import("@/database/migrator");
+    console.log("Migrating database");
+    await runMigrations();
+    await useDb().run(sql.raw("PRAGMA foreign_keys=on;"));
+    console.log("Migration complete");
+    migrated = true;
+  } catch (err) {
+    console.error(err);
+  }
+}

src/routes/(app)/Menu.svelte

@@ -5,7 +5,7 @@
   import * as Dialog from "@/components/ui/dialog/index";
   import { page } from "$app/stores";
   import { cn } from "$lib/cn";
-  import { goto } from "$app/navigation";
+  import { goto, invalidate } from "$app/navigation";
   import DeleteDialog from "@/components/DeleteDialog.svelte";
   import PersistenceAlert from "@/components/PersistenceAlert.svelte";
   import { type Chat } from "@/database";
@@ -36,6 +36,7 @@
     variant="outline"
     onclick={async () => {
       const id = await newChat();
+      await invalidate("view:chats");
       await goto(route(`/chat/[id]`, { id }));
     }}
   >

src/routes/(app)/chat/[id]/+layout.ts

@@ -47,20 +47,12 @@ export async function load({ route, url, params, depends }) {
   const services = await loadServices();
   registerModel(serviceTable, services, depends);
 
-  const version = url.searchParams.get("version");
-  let revision: RevisionView | undefined;
-  if (version) {
-    const result = await getRevision(params.id, parseInt(version));
-    if (!result) {
-      return error(404, `Revision ${version} not found`);
-    }
-    revision = result;
-  } else {
-    revision = await getLatestRevision(params.id);
-  }
-  if (revision) {
-    registerModel(revisionTable, revision, depends);
+  const version = url.searchParams.get("version") || "1";
+  const revision = await getRevision(params.id, parseInt(version));
+  if (!revision) {
+    return error(404, `Revision ${version} not found`);
   }
+  registerModel(revisionTable, revision, depends);
   depends("view:messages");
   depends("view:chat");
   return { chat, services, tab, revision, version };

src/routes/(app)/chat/[id]/ChatPage.svelte

@@ -24,6 +24,7 @@
     revision: RevisionView;
   };
   let { chat, revision }: Props = $props();
+  console.log("ChatPage", chat, revision);
   let autoScroller = new AutoScroller();
   let saveLength = $state(revision.messages.length);
 

src/routes/(app)/chat/[id]/MessageCard.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
   import { cn } from "$lib/cn.js";
   import MessageMarkdown from "./revise/MessageMarkdown.svelte";
-  import { Card, CardContent, CardHeader } from "@/components/ui/card/index.js";
+  import { Card, CardContent } from "@/components/ui/card/index.js";
   import Attachment from "./Attachment.svelte";
   import type { ChatMessage } from "$lib/chat-service.svelte";
   import MessageEditor from "./MessageEditor.svelte";
   import { Button } from "@/components/ui/button";
-  import { FilePlus2Icon, PlusIcon, Trash, Trash2Icon, TrashIcon, UploadIcon } from "lucide-svelte";
-  import { toast } from "svelte-french-toast";
+  import { FilePlus2Icon, Trash2Icon } from "lucide-svelte";
   import AttachmentControls from "./AttachmentControls.svelte";
-  import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 
   type Props = {
     index: number;
@@ -103,7 +101,12 @@
   {/if}
   <CardContent class={cn("p-4", editable && "pt-0")}>
     {#if editable}
-      <MessageEditor id={message.id} bind:content={message.content} onKeyPress={handleKeyPress} />
+      <MessageEditor
+        id={message.id}
+        content={message.content}
+        onChange={(content) => (message.content = content)}
+        onKeyPress={handleKeyPress}
+      />
     {:else if format === "markdown"}
       <MessageMarkdown content={message.content} />
     {:else}

src/routes/(app)/chat/[id]/MessageEditor.svelte

@@ -18,15 +18,11 @@
   type Props = {
     id: string;
     content: string;
+    onChange: (content: string) => void;
     onKeyPress?: (event: KeyboardEvent) => boolean;
     placeholder?: string;
   };
-  let {
-    id,
-    content = $bindable(""),
-    onKeyPress,
-    placeholder = "Enter your message",
-  }: Props = $props();
+  let { id, content, onChange, onKeyPress, placeholder = "Enter your message" }: Props = $props();
   let showPlaceholder = $state(content === "");
 
   const config: CreateEditorArgs = {
@@ -62,7 +58,8 @@
     editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
         const root = getRoot();
-        content = root.getTextContent();
+        const content = root.getTextContent();
+        onChange && onChange(content);
         showPlaceholder = content === "";
       });
     });

src/routes/(app)/chat/[id]/revise/RevisePage.svelte

@@ -222,7 +222,10 @@
             {:else}
               <MessageEditor
                 id={chatService.messages[chatService.messages.length - 1].id}
-                bind:content={chatService.messages[chatService.messages.length - 1].content}
+                content={chatService.messages[chatService.messages.length - 1].content}
+                onChange={(content) => {
+                  chatService.messages[chatService.messages.length - 1].content = content;
+                }}
               />
             {/if}
           </div>