begin migration to trpc/react-query integration

pages/chat/@id/+Page.tsx

@@ -10,7 +10,6 @@ import {
   Textarea,
   useMantineTheme,
 } from "@mantine/core";
-import { trpc } from "../../../trpc/client";
 import { useEffect, useState } from "react";
 import {
   defaultParameters,
@@ -23,13 +22,20 @@ import type { Data } from "./+data";
 import type { CommittedMessage, DraftMessage } from "../../../types";
 import Markdown from "react-markdown";
 import { IconTrash, IconEdit, IconCheck, IconX } from "@tabler/icons-react";
+import { useTRPCClient } from "../../../trpc/client";
 
 export default function ChatPage() {
   const pageContext = usePageContext();
   const conversationId = pageContext.routeParams.id;
-  const conversationTitle = useStore(
-    (state) => state.conversations.find((c) => c.id === conversationId)?.title
-  );
+
+  const {
+    conversation,
+    messages: initialMessages,
+    facts: initialFacts,
+    factTriggers: initialFactTriggers,
+  } = useData<Data>();
+  const conversationTitle = conversation?.title;
+
   const messages = useStore((state) => state.messages);
   const message = useStore((state) => state.message);
   const systemPrompt = useStore((state) => state.systemPrompt);
@@ -48,6 +54,7 @@ export default function ChatPage() {
   const removeFact = useStore((state) => state.removeFact);
   const removeFactTrigger = useStore((state) => state.removeFactTrigger);
   const setLoading = useStore((state) => state.setLoading);
+  const trpc = useTRPCClient();
 
   // State for editing facts
   const [editingFactId, setEditingFactId] = useState<string | null>(null);
@@ -84,13 +91,6 @@ export default function ChatPage() {
     };
   }, [editingFactId, editingFactTriggerId]);
 
-  const {
-    conversation,
-    messages: initialMessages,
-    facts: initialFacts,
-    factTriggers: initialFactTriggers,
-  } = useData<Data>();
-
   useEffect(() => {
     setConversationId(conversationId);
   }, [conversationId, setConversationId]);
@@ -162,7 +162,7 @@ export default function ChatPage() {
         <span>Conversation #{conversationId} - </span>
         <input
           type="text"
-          value={conversationTitle || ""}
+          defaultValue={conversationTitle || ""}
           onChange={(e) => {
             setConversationTitle(e.target.value);
           }}