Chat and mermaid bug fix

Author: ajha-dev

frontend/src/components/Editor.tsx

@@ -62,7 +62,6 @@ const insertChatBlockItem = (editor: BlockNoteEditor<any, any, any>) => ({
         props: {
           chatId: nanoid(),
           title: "Chat Discussion",
-          minimized: false,
           height: 400,
           width: 600,
         }
@@ -88,7 +87,6 @@ const insertMermaidBlockItem = (editor: BlockNoteEditor<any, any, any>) => ({
         props: {
           diagramId: nanoid(),
           title: "Mermaid Diagram",
-          minimized: false,
           height: 400,
           width: 600,
         }

frontend/src/components/chat/ChatBlock.tsx

@@ -20,6 +20,8 @@ import {
   saveFloatingState,
   clearFloatingState,
   getDefaultFloatingPosition,
+  loadMinimizedState,
+  saveMinimizedState,
 } from "../../lib/floatingChats";
 
 // Context for sharing editor-level data with chat blocks
@@ -42,7 +44,6 @@ interface ChatBlockProps {
     props: {
       chatId: string;
       title: string;
-      minimized: boolean;
       height: number;
       width: number;
     };
@@ -52,7 +53,10 @@ interface ChatBlockProps {
 export function ChatBlock({ block }: ChatBlockProps) {
   const context = useContext(EditorContext);
   const editor = useBlockNoteEditor();
-  const [isMinimized, setIsMinimized] = useState(block.props.minimized);
+  const chatId = block.props.chatId;
+  
+  // Load minimized state from localStorage (local to each user)
+  const [isMinimized, setIsMinimized] = useState(() => loadMinimizedState(chatId));
   const [height, setHeight] = useState(block.props.height || 400);
   const [width, setWidth] = useState(block.props.width || 600);
   const [isResizing, setIsResizing] = useState(false);
@@ -89,7 +93,6 @@ export function ChatBlock({ block }: ChatBlockProps) {
   }
 
   const { doc, channel, userId, userName, userColor, presenceUsers } = context;
-  const chatId = block.props.chatId;
 
   // Use all chat hooks
   const { messages, sendMessage, addReaction } = useChat(
@@ -124,11 +127,6 @@ export function ChatBlock({ block }: ChatBlockProps) {
     }
   }, [chatId]);
 
-  // Sync minimized state from block props
-  useEffect(() => {
-    setIsMinimized(block.props.minimized);
-  }, [block.props.minimized]);
-
   // Toggle floating handler
   const handleToggleFloating = useCallback(() => {
     if (isFloating) {
@@ -524,12 +522,8 @@ export function ChatBlock({ block }: ChatBlockProps) {
               const newMinimizedState = !isMinimized;
               setIsMinimized(newMinimizedState);
 
-              // Persist minimized state to block props
-              if (editor) {
-                editor.updateBlock(block.id, {
-                  props: { ...block.props, minimized: newMinimizedState },
-                });
-              }
+              // Persist minimized state to localStorage (local, not synced)
+              saveMinimizedState(chatId, newMinimizedState);
             }}
             style={{
               width: "24px",

frontend/src/components/mermaid/MermaidBlock.tsx

@@ -15,6 +15,7 @@ import { useBlockNoteEditor } from '@blocknote/react';
 import { useMermaid } from '../../hooks/useMermaid';
 import { MermaidCanvas } from './MermaidCanvas';
 import { MermaidCodeEditor } from './MermaidCodeEditor';
+import { loadMinimizedState, saveMinimizedState } from '../../lib/floatingChats';
 
 interface MermaidBlockProps {
   block: {
@@ -23,7 +24,6 @@ interface MermaidBlockProps {
     props: {
       diagramId: string;
       title: string;
-      minimized: boolean;
       height: number;
       width: number;
     };
@@ -33,8 +33,10 @@ interface MermaidBlockProps {
 export function MermaidBlock({ block }: MermaidBlockProps) {
   const context = useContext(EditorContext);
   const editor = useBlockNoteEditor();
+  const diagramId = block.props.diagramId;
 
-  const [isMinimized, setIsMinimized] = useState(block.props.minimized);
+  // Load minimized state from localStorage (local to each user)
+  const [isMinimized, setIsMinimized] = useState(() => loadMinimizedState(diagramId));
   const [isEditMode, setIsEditMode] = useState(true); // Start in edit mode for new blocks
   const [height, setHeight] = useState(block.props.height || 400);
   const [width, setWidth] = useState(block.props.width || 600);
@@ -65,7 +67,6 @@ export function MermaidBlock({ block }: MermaidBlockProps) {
   }
 
   const { doc } = context;
-  const diagramId = block.props.diagramId;
 
   const { yCode, isInitialized } = useMermaid(doc, diagramId);
 
@@ -91,11 +92,6 @@ export function MermaidBlock({ block }: MermaidBlockProps) {
     };
   }, [yCode]);
 
-  // Sync minimized state from block props
-  useEffect(() => {
-    setIsMinimized(block.props.minimized);
-  }, [block.props.minimized]);
-
 
   // Prevent BlockNote from handling keyboard events in the textarea
   const handleTextareaKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -316,12 +312,8 @@ export function MermaidBlock({ block }: MermaidBlockProps) {
               const newMinimizedState = !isMinimized;
               setIsMinimized(newMinimizedState);
 
-              // Persist minimized state to block props
-              if (editor) {
-                editor.updateBlock(block.id, {
-                  props: { ...block.props, minimized: newMinimizedState },
-                });
-              }
+              // Persist minimized state to localStorage (local, not synced)
+              saveMinimizedState(diagramId, newMinimizedState);
             }}
             style={{
               width: '24px',

frontend/src/lib/floatingChats.ts

@@ -3,6 +3,7 @@
  *
  * Utilities for persisting floating chat window state in localStorage.
  * Handles position validation, off-screen detection, and state persistence.
+ * Also stores minimized state per-user (local, not synced).
  */
 
 export interface FloatingChatState {
@@ -12,9 +13,11 @@ export interface FloatingChatState {
   width: number;
   height: number;
   zIndex?: number;
+  isMinimized?: boolean; // Local minimized state (not synced)
 }
 
 const STORAGE_KEY = "markdoc-floating-chats";
+const MINIMIZED_STORAGE_KEY = "markdoc-minimized-blocks";
 
 /**
  * Load floating state for a specific chat from localStorage
@@ -93,3 +96,57 @@ export function getDefaultFloatingPosition(width: number, height: number): { x:
     y: Math.max(0, (window.innerHeight - height) / 2),
   };
 }
+
+/**
+ * Load minimized state for a specific block from localStorage
+ * This is stored separately and locally per-user (not synced)
+ */
+export function loadMinimizedState(blockId: string): boolean {
+  try {
+    const stored = localStorage.getItem(MINIMIZED_STORAGE_KEY);
+    if (!stored) return false;
+
+    const allStates: Record<string, boolean> = JSON.parse(stored);
+    return allStates[blockId] || false;
+  } catch (error) {
+    console.error("Error loading minimized state:", error);
+    return false;
+  }
+}
+
+/**
+ * Save minimized state for a specific block to localStorage
+ * This is stored separately and locally per-user (not synced)
+ */
+export function saveMinimizedState(blockId: string, isMinimized: boolean): void {
+  try {
+    const stored = localStorage.getItem(MINIMIZED_STORAGE_KEY);
+    const allStates: Record<string, boolean> = stored ? JSON.parse(stored) : {};
+
+    if (isMinimized) {
+      allStates[blockId] = true;
+    } else {
+      delete allStates[blockId]; // Remove entry when expanded
+    }
+
+    localStorage.setItem(MINIMIZED_STORAGE_KEY, JSON.stringify(allStates));
+  } catch (error) {
+    console.error("Error saving minimized state:", error);
+  }
+}
+
+/**
+ * Clear minimized state for a specific block from localStorage
+ */
+export function clearMinimizedState(blockId: string): void {
+  try {
+    const stored = localStorage.getItem(MINIMIZED_STORAGE_KEY);
+    if (!stored) return;
+
+    const allStates: Record<string, boolean> = JSON.parse(stored);
+    delete allStates[blockId];
+    localStorage.setItem(MINIMIZED_STORAGE_KEY, JSON.stringify(allStates));
+  } catch (error) {
+    console.error("Error clearing minimized state:", error);
+  }
+}