fetch facts on load, facts are deletable

pages/chat/@id/+Page.tsx

@@ -20,6 +20,7 @@ import { useData } from "vike-react/useData";
 import type { Data } from "./+data";
 import type { CommittedMessage, DraftMessage } from "../../../types";
 import Markdown from "react-markdown";
+import { IconTrash } from "@tabler/icons-react";
 
 export default function ChatPage() {
   const pageContext = usePageContext();
@@ -40,6 +41,7 @@ export default function ChatPage() {
   const setSystemPrompt = useStore((state) => state.setSystemPrompt);
   const setParameters = useStore((state) => state.setParameters);
   const setFacts = useStore((state) => state.setFacts);
+  const removeFact = useStore((state) => state.removeFact);
   const setLoading = useStore((state) => state.setLoading);
 
   const {
@@ -72,6 +74,11 @@ export default function ChatPage() {
     setFacts(initialFacts);
   }, [initialFacts, setFacts]);
 
+  async function handleDeleteFact(factId: string) {
+    removeFact(factId);
+    await trpc.chat.deleteFact.mutate({ factId });
+  }
+
   return (
     <>
       <div>
@@ -169,7 +176,18 @@ export default function ChatPage() {
         <Tabs.Panel value="facts">
           <List>
             {facts.map((fact) => (
-              <List.Item key={fact.id}>{fact.content}</List.Item>
+              <List.Item key={fact.id}>
+                {fact.content}{" "}
+                <IconTrash
+                  size={16}
+                  stroke={1.5}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    handleDeleteFact(fact.id);
+                  }}
+                />
+              </List.Item>
             ))}
           </List>
         </Tabs.Panel>

pages/chat/@id/+data.ts

@@ -12,5 +12,8 @@ export const data = async (pageContext: PageContextServer) => {
   const messages = await caller.fetchMessages({
     conversationId: id,
   });
-  return { conversation, messages, facts: [] };
+  const facts = await caller.fetchFacts({
+    conversationId: id,
+  });
+  return { conversation, messages, facts };
 };