generate runningSummary on each turn, and include it with the main completion

pages/chat/@id/+Page.tsx

@@ -1,6 +1,13 @@
-import { JsonInput, Tabs, Textarea } from "@mantine/core";
+import {
+  Box,
+  Group,
+  JsonInput,
+  Stack,
+  Tabs,
+  Textarea,
+  useMantineTheme,
+} from "@mantine/core";
 import { trpc } from "../../../trpc/client";
-import type { Message as UIMessage } from "ai";
 import { useEffect } from "react";
 import {
   defaultParameters,
@@ -11,6 +18,8 @@ import { usePageContext } from "vike-react/usePageContext";
 import { useData } from "vike-react/useData";
 import type { Data } from "./+data";
 import type { ConversationsId } from "../../../database/generated/public/Conversations";
+import type { CommittedMessage, DraftMessage } from "../../../types";
+import Markdown from "react-markdown";
 
 export default function ChatPage() {
   const pageContext = usePageContext();
@@ -31,7 +40,7 @@ export default function ChatPage() {
   const setParameters = useStore((state) => state.setParameters);
   const setLoading = useStore((state) => state.setLoading);
 
-  const conversation = useData<Data>();
+  const { conversation, messages: initialMessages } = useData<Data>();
 
   useEffect(() => {
     setConversationId(conversationId);
@@ -49,6 +58,10 @@ export default function ChatPage() {
     setConversationTitle,
   ]);
 
+  useEffect(() => {
+    setMessages(initialMessages);
+  }, [initialMessages, setMessages]);
+
   return (
     <>
       <div>
@@ -86,18 +99,36 @@ export default function ChatPage() {
                 e.preventDefault();
                 const messagesWithNewUserMessage = [
                   ...messages,
-                  { role: "user" as const, content: message } as UIMessage,
+                  { role: "user" as const, content: message } as DraftMessage,
                 ];
                 setMessages(messagesWithNewUserMessage);
                 setLoading(true);
                 const response = await trpc.chat.sendMessage.mutate({
+                  conversationId,
                   messages: messagesWithNewUserMessage,
                   systemPrompt,
                   parameters,
                 });
                 const messagesWithAssistantMessage = [
-                  ...messagesWithNewUserMessage,
-                  { role: "assistant", content: response.text } as UIMessage,
+                  ...messages,
+                  {
+                    id: response.insertedUserMessage?.id,
+                    conversationId,
+                    role: "user" as const,
+                    content: message,
+                    index: response.insertedUserMessage?.index,
+                    runningSummary: undefined,
+                  } as CommittedMessage,
+                  {
+                    id: response.insertedAssistantMessage?.id,
+                    conversationId,
+                    role: "assistant" as const,
+                    content: response.insertedAssistantMessage?.content,
+                    index: response.insertedAssistantMessage?.index,
+                    runningSummary:
+                      response.insertedAssistantMessage?.running_summary ||
+                      undefined,
+                  } as CommittedMessage,
                 ];
                 setMessages(messagesWithAssistantMessage);
                 setMessage("");
@@ -131,14 +162,41 @@ export default function ChatPage() {
 function Messages({
   messages,
 }: {
-  messages: Array<UIMessage>;
+  messages: Array<DraftMessage | CommittedMessage>;
 }) {
+  const theme = useMantineTheme();
+  console.log("messages", messages);
   return (
-    <div>
+    <Stack gap="md" justify="flex-start">
       {messages.map((message, index) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-        <div key={index}>{message.content}</div>
+        <Group
+          // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+          key={index}
+          justify={message.role === "user" ? "flex-end" : "flex-start"}
+        >
+          <Box
+            w="75%"
+            bg={
+              message.role === "user"
+                ? theme.colors.gray[2]
+                : theme.colors.blue[2]
+            }
+            p="md"
+            bdrs="md"
+          >
+            <div>
+              {"index" in message ? message.index : ""}
+              {message.role}
+            </div>
+            <Markdown>{message.content}</Markdown>
+            {"runningSummary" in message && (
+              <div>
+                <strong>Running Summary:</strong> {message.runningSummary}
+              </div>
+            )}
+          </Box>
+        </Group>
       ))}
-    </div>
+    </Stack>
   );
 }

pages/chat/@id/+data.ts

@@ -9,5 +9,8 @@ export const data = async (pageContext: PageContextServer) => {
   const conversation = await caller.fetchConversation({
     id: Number(id),
   });
-  return conversation;
+  const messages = await caller.fetchMessages({
+    conversationId: Number(id),
+  });
+  return { conversation, messages };
 };