diff --git a/pages/chat/@id/+Page.tsx b/pages/chat/@id/+Page.tsx index 4ca9ac5..2f91893 100644 --- a/pages/chat/@id/+Page.tsx +++ b/pages/chat/@id/+Page.tsx @@ -53,6 +53,10 @@ export default function ChatPage() { const [editingFactId, setEditingFactId] = useState(null); const [editingFactContent, setEditingFactContent] = useState(""); + // State for editing fact triggers + const [editingFactTriggerId, setEditingFactTriggerId] = useState(null); + const [editingFactTriggerContent, setEditingFactTriggerContent] = useState(""); + // Handle clicking outside to cancel editing useEffect(() => { function handleClickOutside(event: MouseEvent) { @@ -62,13 +66,20 @@ export default function ChatPage() { setEditingFactId(null); } } + + if (editingFactTriggerId && event.target instanceof Element) { + const editingElement = event.target.closest('.editing-fact-trigger'); + if (!editingElement) { + setEditingFactTriggerId(null); + } + } } document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; - }, [editingFactId]); + }, [editingFactId, editingFactTriggerId]); const { conversation, @@ -125,6 +136,16 @@ export default function ChatPage() { await trpc.chat.factTriggers.deleteOne.mutate({ factTriggerId }); } + async function handleUpdateFactTrigger(factTriggerId: string, content: string) { + // Update the local state first + setFactTriggers(factTriggers.map(factTrigger => + factTrigger.id === factTriggerId ? { ...factTrigger, content } : factTrigger + )); + + // Then update the database + await trpc.chat.factTriggers.update.mutate({ factTriggerId, content }); + } + return ( <>
@@ -285,16 +306,59 @@ export default function ChatPage() { {factTriggers.map((factTrigger) => ( - {factTrigger.content}{" "} - { - e.stopPropagation(); - e.preventDefault(); - handleDeleteFactTrigger(factTrigger.id); - }} - /> + {editingFactTriggerId === factTrigger.id ? ( + +