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,

pages/chat/trpc.ts

@@ -84,7 +84,7 @@ export const chat = router({
           parameters: OtherParameters;
         },
     )
-    .query(async ({ input: { messages, systemPrompt, parameters } }) => {
+    .mutation(async ({ input: { messages, systemPrompt, parameters } }) => {
       const response = await generateText({
         model: openrouter("mistralai/mistral-nemo"),
         messages: [