improve ui consistency with immer; implement addConversation

pages/chat/@id/+Page.tsx

@@ -15,7 +15,9 @@ import type { ConversationsId } from "../../../database/generated/public/Convers
 export default function ChatPage() {
   const pageContext = usePageContext();
   const conversationId = Number(pageContext.routeParams.id) as ConversationsId;
-  const conversationTitle = useStore((state) => state.conversationTitle);
+  const conversationTitle = useStore(
+    (state) => state.conversations.find((c) => c.id === conversationId)?.title,
+  );
   const messages = useStore((state) => state.messages);
   const message = useStore((state) => state.message);
   const systemPrompt = useStore((state) => state.systemPrompt);
@@ -53,7 +55,7 @@ export default function ChatPage() {
         <span>Conversation #{conversationId} - </span>
         <input
           type="text"
-          value={conversationTitle}
+          value={conversationTitle || ""}
           onChange={(e) => {
             setConversationTitle(e.target.value);
           }}
@@ -88,7 +90,7 @@ export default function ChatPage() {
                 ];
                 setMessages(messagesWithNewUserMessage);
                 setLoading(true);
-                const response = await trpc.chat.sendMessage.query({
+                const response = await trpc.chat.sendMessage.mutate({
                   messages: messagesWithNewUserMessage,
                   systemPrompt,
                   parameters,