diff --git a/pages/chat/@id/+Page.tsx b/pages/chat/@id/+Page.tsx index 50ccfa5..4ca9ac5 100644 --- a/pages/chat/@id/+Page.tsx +++ b/pages/chat/@id/+Page.tsx @@ -11,7 +11,7 @@ import { useMantineTheme, } from "@mantine/core"; import { trpc } from "../../../trpc/client"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { defaultParameters, defaultSystemPrompt, @@ -22,7 +22,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"; +import { IconTrash, IconEdit, IconCheck, IconX } from "@tabler/icons-react"; export default function ChatPage() { const pageContext = usePageContext(); @@ -49,6 +49,27 @@ export default function ChatPage() { const removeFactTrigger = useStore((state) => state.removeFactTrigger); const setLoading = useStore((state) => state.setLoading); + // State for editing facts + const [editingFactId, setEditingFactId] = useState(null); + const [editingFactContent, setEditingFactContent] = useState(""); + + // Handle clicking outside to cancel editing + useEffect(() => { + function handleClickOutside(event: MouseEvent) { + if (editingFactId && event.target instanceof Element) { + const editingElement = event.target.closest('.editing-fact'); + if (!editingElement) { + setEditingFactId(null); + } + } + } + + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [editingFactId]); + const { conversation, messages: initialMessages, @@ -89,6 +110,16 @@ export default function ChatPage() { await trpc.chat.facts.deleteOne.mutate({ factId }); } + async function handleUpdateFact(factId: string, content: string) { + // Update the local state first + setFacts(facts.map(fact => + fact.id === factId ? { ...fact, content } : fact + )); + + // Then update the database + await trpc.chat.facts.update.mutate({ factId, content }); + } + async function handleDeleteFactTrigger(factTriggerId: string) { removeFactTrigger(factTriggerId); await trpc.chat.factTriggers.deleteOne.mutate({ factTriggerId }); @@ -193,16 +224,59 @@ export default function ChatPage() { {facts.map((fact) => ( - {fact.content}{" "} - { - e.stopPropagation(); - e.preventDefault(); - handleDeleteFact(fact.id); - }} - /> + {editingFactId === fact.id ? ( + +