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 };
 };

pages/chat/trpc.ts

@@ -395,6 +395,34 @@ export const chat = router({
         };
       },
     ),
+  fetchFacts: publicProcedure
+    .input((x) => x as { conversationId: string })
+    .query(async ({ input: { conversationId } }) => {
+      const conversationMessageIds = db.data.messages
+        .filter((m) => m.conversationId === conversationId)
+        .map((m) => m.id);
+      const rows = await db.data.facts.filter((f) =>
+        conversationMessageIds.includes(f.sourceMessageId),
+      );
+      return rows as Array<Fact>;
+    }),
+  deleteFact: publicProcedure
+    .input(
+      (x) =>
+        x as {
+          factId: string;
+        },
+    )
+    .mutation(async ({ input: { factId } }) => {
+      const deletedFact = db.data.facts.find((fact) => fact.id === factId);
+      if (!deletedFact) throw new Error("Fact not found");
+      db.data.facts.splice(
+        db.data.facts.findIndex((fact) => fact.id === factId),
+        1,
+      );
+      db.write();
+      return { ok: true };
+    }),
 });
 
 export const createCaller = createCallerFactory(chat);

state.ts

@@ -69,6 +69,13 @@ export const useStore = create<Store>()(
       set((stateDraft) => {
         stateDraft.facts = facts;
       }),
+    removeFact: (factId) =>
+      set((stateDraft) => {
+        stateDraft.facts.splice(
+          stateDraft.facts.findIndex((fact) => fact.id === factId),
+          1,
+        );
+      }),
     setLoading: (loading) =>
       set((stateDraft) => {
         stateDraft.loading = loading;

types.ts

@@ -30,6 +30,7 @@ export type Store = {
   setSystemPrompt: (systemPrompt: string) => void;
   setParameters: (parameters: OtherParameters) => void;
   setFacts: (facts: Array<Fact>) => void;
+  removeFact: (factId: string) => void;
   setLoading: (loading: boolean) => void;
 };