diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/MemoryContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/MemoryContent.tsx index 9fa4fc382..ed0e6095c 100644 --- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/MemoryContent.tsx +++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/MemoryContent.tsx @@ -34,6 +34,7 @@ export function MemoryContent() { const [editing, setEditing] = useState(false); const [showInput, setShowInput] = useState(false); const textareaRef = useRef(null); + const inputContainerRef = useRef(null); const fetchMemory = useCallback(async () => { try { @@ -51,6 +52,26 @@ export function MemoryContent() { fetchMemory(); }, [fetchMemory]); + useEffect(() => { + if (!showInput) return; + + const handlePointerDownOutside = (event: MouseEvent | TouchEvent) => { + const target = event.target; + if (!(target instanceof Node)) return; + if (inputContainerRef.current?.contains(target)) return; + + setShowInput(false); + }; + + document.addEventListener("mousedown", handlePointerDownOutside); + document.addEventListener("touchstart", handlePointerDownOutside, { passive: true }); + + return () => { + document.removeEventListener("mousedown", handlePointerDownOutside); + document.removeEventListener("touchstart", handlePointerDownOutside); + }; + }, [showInput]); + const handleClear = async () => { try { setSaving(true); @@ -122,9 +143,6 @@ export function MemoryContent() { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleEdit(); - } else if (e.key === "Escape") { - setShowInput(false); - setEditQuery(""); } }; @@ -183,7 +201,10 @@ export function MemoryContent() { {showInput ? (
-
+
- {editing ? : } + {editing ? ( + + ) : ( + + )}
diff --git a/surfsense_web/components/settings/team-memory-manager.tsx b/surfsense_web/components/settings/team-memory-manager.tsx index c89463250..872b3da1c 100644 --- a/surfsense_web/components/settings/team-memory-manager.tsx +++ b/surfsense_web/components/settings/team-memory-manager.tsx @@ -3,7 +3,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useAtomValue } from "jotai"; import { ArrowUp, ChevronDown, ClipboardCopy, Download, Info, Pen } from "lucide-react"; -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { toast } from "sonner"; import { z } from "zod"; import { updateSearchSpaceMutationAtom } from "@/atoms/search-spaces/search-space-mutation.atoms"; @@ -48,9 +48,30 @@ export function TeamMemoryManager({ searchSpaceId }: TeamMemoryManagerProps) { const [editing, setEditing] = useState(false); const [showInput, setShowInput] = useState(false); const textareaRef = useRef(null); + const inputContainerRef = useRef(null); const memory = searchSpace?.shared_memory_md || ""; + useEffect(() => { + if (!showInput) return; + + const handlePointerDownOutside = (event: MouseEvent | TouchEvent) => { + const target = event.target; + if (!(target instanceof Node)) return; + if (inputContainerRef.current?.contains(target)) return; + + setShowInput(false); + }; + + document.addEventListener("mousedown", handlePointerDownOutside); + document.addEventListener("touchstart", handlePointerDownOutside, { passive: true }); + + return () => { + document.removeEventListener("mousedown", handlePointerDownOutside); + document.removeEventListener("touchstart", handlePointerDownOutside); + }; + }, [showInput]); + const handleClear = async () => { try { setSaving(true); @@ -126,9 +147,6 @@ export function TeamMemoryManager({ searchSpaceId }: TeamMemoryManagerProps) { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleEdit(); - } else if (e.key === "Escape") { - setShowInput(false); - setEditQuery(""); } }; @@ -189,7 +207,10 @@ export function TeamMemoryManager({ searchSpaceId }: TeamMemoryManagerProps) { {showInput ? (
-
+
- {editing ? : } + {editing ? ( + + ) : ( + + )}