feat: enhance MemoryContent and TeamMemoryManager components with improved memory display and user prompts for empty memory states

surfsense_web/app/dashboard/[search_space_id]/user-settings/components/MemoryContent.tsx

@@ -85,6 +85,7 @@ export function MemoryContent() {
 		}
 	};
 
+	const displayMemory = memory.replace(/\(\d{4}-\d{2}-\d{2}\)\s*/g, "");
 	const charCount = memory.length;
 
 	const getCounterColor = () => {
@@ -102,6 +103,19 @@ export function MemoryContent() {
 		);
 	}
 
+	if (!memory) {
+		return (
+			<div className="flex flex-col items-center justify-center py-16 text-center">
+				<h3 className="text-base font-medium text-foreground">
+					What does SurfSense remember?
+				</h3>
+				<p className="mt-2 max-w-sm text-sm text-muted-foreground">
+					Nothing yet. SurfSense picks up on your preferences and context as you chat.
+				</p>
+			</div>
+		);
+	}
+
 	return (
 		<div className="space-y-4">
 			<Alert className="bg-muted/50 py-3 md:py-4">
@@ -116,7 +130,7 @@ export function MemoryContent() {
 
 			<div className="h-[340px] overflow-y-auto rounded-md border">
 				<PlateEditor
-					markdown={memory}
+					markdown={displayMemory}
 					readOnly
 					preset="readonly"
 					variant="default"
@@ -139,7 +153,7 @@ export function MemoryContent() {
 					value={editQuery}
 					onChange={(e) => setEditQuery(e.target.value)}
 					onKeyDown={handleKeyDown}
-					placeholder="e.g. &quot;I prefer TypeScript over JavaScript&quot; or &quot;Remove the entry about Tokyo&quot;"
+					placeholder="Tell SurfSense what to remember or forget"
 					disabled={editing}
 					rows={2}
 					className="pr-12 resize-none text-sm"

surfsense_web/components/editor/plate-editor.tsx

@@ -3,7 +3,7 @@
 import { MarkdownPlugin, remarkMdx } from "@platejs/markdown";
 import { slateToHtml } from "@slate-serializers/html";
 import type { AnyPluginConfig, Descendant, Value } from "platejs";
-import { createPlatePlugin, Key, Plate, usePlateEditor } from "platejs/react";
+import { createPlatePlugin, Key, Plate, useEditorReadOnly, usePlateEditor } from "platejs/react";
 import { useEffect, useMemo, useRef } from "react";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
@@ -60,6 +60,24 @@ export interface PlateEditorProps {
 	extraPlugins?: AnyPluginConfig[];
 }
 
+function PlateEditorContent({
+	editorVariant,
+	placeholder,
+}: {
+	editorVariant: PlateEditorProps["editorVariant"];
+	placeholder?: string;
+}) {
+	const isReadOnly = useEditorReadOnly();
+
+	return (
+		<Editor
+			variant={editorVariant}
+			placeholder={isReadOnly ? undefined : placeholder}
+			className="min-h-full"
+		/>
+	);
+}
+
 export function PlateEditor({
 	markdown,
 	html,
@@ -188,7 +206,7 @@ export function PlateEditor({
 				}}
 			>
 				<EditorContainer variant={variant} className={className}>
-					<Editor variant={editorVariant} placeholder={placeholder} className="min-h-full" />
+					<PlateEditorContent editorVariant={editorVariant} placeholder={placeholder} />
 				</EditorContainer>
 			</Plate>
 		</EditorSaveContext.Provider>

surfsense_web/components/settings/team-memory-manager.tsx

@@ -88,6 +88,7 @@ export function TeamMemoryManager({ searchSpaceId }: TeamMemoryManagerProps) {
 		}
 	};
 
+	const displayMemory = memory.replace(/\(\d{4}-\d{2}-\d{2}\)\s*/g, "");
 	const charCount = memory.length;
 
 	const getCounterColor = () => {
@@ -105,6 +106,19 @@ export function TeamMemoryManager({ searchSpaceId }: TeamMemoryManagerProps) {
 		);
 	}
 
+	if (!memory) {
+		return (
+			<div className="flex flex-col items-center justify-center py-16 text-center">
+				<h3 className="text-base font-medium text-foreground">
+					What does SurfSense remember about your team?
+				</h3>
+				<p className="mt-2 max-w-sm text-sm text-muted-foreground">
+					Nothing yet. SurfSense picks up on team decisions and conventions as your team chats.
+				</p>
+			</div>
+		);
+	}
+
 	return (
 		<div className="space-y-4">
 			<Alert className="bg-muted/50 py-3 md:py-4">
@@ -119,7 +133,7 @@ export function TeamMemoryManager({ searchSpaceId }: TeamMemoryManagerProps) {
 
 			<div className="h-[340px] overflow-y-auto rounded-md border">
 				<PlateEditor
-					markdown={memory}
+					markdown={displayMemory}
 					readOnly
 					preset="readonly"
 					variant="default"
@@ -142,7 +156,7 @@ export function TeamMemoryManager({ searchSpaceId }: TeamMemoryManagerProps) {
 					value={editQuery}
 					onChange={(e) => setEditQuery(e.target.value)}
 					onKeyDown={handleKeyDown}
-					placeholder="e.g. &quot;We decided to use PostgreSQL&quot; or &quot;Remove the standup entry&quot;"
+					placeholder="Tell SurfSense what to remember or forget about your team"
 					disabled={editing}
 					rows={2}
 					className="pr-12 resize-none text-sm"