fix: recover IDB on closing and restore diagram

This reverts commit e7c29fb410.

The PR introduced an IndexedDB error: 'Failed to execute transaction on IDBDatabase: The database connection is closing.'

components/chat-panel.tsx

@@ -585,7 +585,7 @@ export default function ChatPanel({
 
         try {
             const currentSession = sessionManager.currentSession
-            if (currentSession && currentSession.messages.length > 0) {
+            if (currentSession) {
                 // Restore from session manager (IndexedDB)
                 justLoadedSessionRef.current = true
                 syncUIWithSession(currentSession)
@@ -622,7 +622,7 @@ export default function ChatPanel({
         lastSyncedSessionIdRef.current = newSessionId
 
         // Sync UI with new session
-        if (newSession && newSession.messages.length > 0) {
+        if (newSession) {
             justLoadedSessionRef.current = true
             syncUIWithSession(newSession)
         } else if (!newSession) {

lib/session-storage.ts

@@ -47,6 +47,33 @@ interface ChatSessionDB extends DBSchema {
 
 // Database singleton
 let dbPromise: Promise<IDBPDatabase<ChatSessionDB>> | null = null
+const resetDBPromise = () => {
+    dbPromise = null
+}
+
+const isClosingError = (error: unknown): boolean => {
+    return (
+        error instanceof DOMException &&
+        error.name === "InvalidStateError" &&
+        /closing/i.test(error.message)
+    )
+}
+
+const withDB = async <T>(
+    action: (db: IDBPDatabase<ChatSessionDB>) => Promise<T>,
+): Promise<T> => {
+    try {
+        const db = await getDB()
+        return await action(db)
+    } catch (error) {
+        if (isClosingError(error)) {
+            resetDBPromise()
+            const db = await getDB()
+            return await action(db)
+        }
+        throw error
+    }
+}
 
 async function getDB(): Promise<IDBPDatabase<ChatSessionDB>> {
     if (!dbPromise) {
@@ -60,7 +87,23 @@ async function getDB(): Promise<IDBPDatabase<ChatSessionDB>> {
                 }
                 // Future migrations: if (oldVersion < 2) { ... }
             },
+            terminated() {
+                resetDBPromise()
+            },
         })
+        dbPromise
+            .then((db) => {
+                db.onversionchange = () => {
+                    db.close()
+                    resetDBPromise()
+                }
+                db.onclose = () => {
+                    resetDBPromise()
+                }
+            })
+            .catch(() => {
+                resetDBPromise()
+            })
     }
     return dbPromise
 }
@@ -79,27 +122,29 @@ export function isIndexedDBAvailable(): boolean {
 export async function getAllSessionMetadata(): Promise<SessionMetadata[]> {
     if (!isIndexedDBAvailable()) return []
     try {
-        const db = await getDB()
-        const tx = db.transaction(STORE_NAME, "readonly")
-        const index = tx.store.index("by-updated")
-        const metadata: SessionMetadata[] = []
+        return await withDB(async (db) => {
+            const tx = db.transaction(STORE_NAME, "readonly")
+            const index = tx.store.index("by-updated")
+            const metadata: SessionMetadata[] = []
 
-        // Use cursor to read only metadata fields (avoids loading full messages/XML)
-        let cursor = await index.openCursor(null, "prev") // newest first
-        while (cursor) {
-            const s = cursor.value
-            metadata.push({
-                id: s.id,
-                title: s.title,
-                createdAt: s.createdAt,
-                updatedAt: s.updatedAt,
-                messageCount: s.messages.length,
-                hasDiagram: !!s.diagramXml && s.diagramXml.trim().length > 0,
-                thumbnailDataUrl: s.thumbnailDataUrl,
-            })
-            cursor = await cursor.continue()
-        }
-        return metadata
+            // Use cursor to read only metadata fields (avoids loading full messages/XML)
+            let cursor = await index.openCursor(null, "prev") // newest first
+            while (cursor) {
+                const s = cursor.value
+                metadata.push({
+                    id: s.id,
+                    title: s.title,
+                    createdAt: s.createdAt,
+                    updatedAt: s.updatedAt,
+                    messageCount: s.messages.length,
+                    hasDiagram:
+                        !!s.diagramXml && s.diagramXml.trim().length > 0,
+                    thumbnailDataUrl: s.thumbnailDataUrl,
+                })
+                cursor = await cursor.continue()
+            }
+            return metadata
+        })
     } catch (error) {
         console.error("Failed to get session metadata:", error)
         return []
@@ -109,8 +154,9 @@ export async function getAllSessionMetadata(): Promise<SessionMetadata[]> {
 export async function getSession(id: string): Promise<ChatSession | null> {
     if (!isIndexedDBAvailable()) return null
     try {
-        const db = await getDB()
-        return (await db.get(STORE_NAME, id)) || null
+        return await withDB(async (db) => {
+            return (await db.get(STORE_NAME, id)) || null
+        })
     } catch (error) {
         console.error("Failed to get session:", error)
         return null
@@ -120,8 +166,9 @@ export async function getSession(id: string): Promise<ChatSession | null> {
 export async function saveSession(session: ChatSession): Promise<boolean> {
     if (!isIndexedDBAvailable()) return false
     try {
-        const db = await getDB()
-        await db.put(STORE_NAME, session)
+        await withDB(async (db) => {
+            await db.put(STORE_NAME, session)
+        })
         return true
     } catch (error) {
         // Handle quota exceeded
@@ -133,8 +180,9 @@ export async function saveSession(session: ChatSession): Promise<boolean> {
             await deleteOldestSession()
             // Retry once
             try {
-                const db = await getDB()
-                await db.put(STORE_NAME, session)
+                await withDB(async (db) => {
+                    await db.put(STORE_NAME, session)
+                })
                 return true
             } catch (retryError) {
                 console.error(
@@ -153,8 +201,9 @@ export async function saveSession(session: ChatSession): Promise<boolean> {
 export async function deleteSession(id: string): Promise<void> {
     if (!isIndexedDBAvailable()) return
     try {
-        const db = await getDB()
-        await db.delete(STORE_NAME, id)
+        await withDB(async (db) => {
+            await db.delete(STORE_NAME, id)
+        })
     } catch (error) {
         console.error("Failed to delete session:", error)
     }
@@ -163,8 +212,9 @@ export async function deleteSession(id: string): Promise<void> {
 export async function getSessionCount(): Promise<number> {
     if (!isIndexedDBAvailable()) return 0
     try {
-        const db = await getDB()
-        return await db.count(STORE_NAME)
+        return await withDB(async (db) => {
+            return await db.count(STORE_NAME)
+        })
     } catch (error) {
         console.error("Failed to get session count:", error)
         return 0
@@ -174,14 +224,15 @@ export async function getSessionCount(): Promise<number> {
 export async function deleteOldestSession(): Promise<void> {
     if (!isIndexedDBAvailable()) return
     try {
-        const db = await getDB()
-        const tx = db.transaction(STORE_NAME, "readwrite")
-        const index = tx.store.index("by-updated")
-        const cursor = await index.openCursor()
-        if (cursor) {
-            await cursor.delete()
-        }
-        await tx.done
+        await withDB(async (db) => {
+            const tx = db.transaction(STORE_NAME, "readwrite")
+            const index = tx.store.index("by-updated")
+            const cursor = await index.openCursor()
+            if (cursor) {
+                await cursor.delete()
+            }
+            await tx.done
+        })
     } catch (error) {
         console.error("Failed to delete oldest session:", error)
     }

lib/system-prompts.ts

@@ -11,6 +11,7 @@ export const DEFAULT_SYSTEM_PROMPT = `
 You are an expert diagram creation assistant specializing in draw.io XML generation.
 Your primary function is chat with user and crafting clear, well-organized visual diagrams through precise XML specifications.
 You can see images that users upload, and you can read the text content extracted from PDF documents they upload.
+ALWAYS respond in the same language as the user's last message.
 
 When you are asked to create a diagram, briefly describe your plan about the layout and structure to avoid object overlapping or edge cross the objects. (2-3 sentences max), then use display_diagram tool to generate the XML.
 After generating or editing a diagram, you don't need to say anything. The user can see the diagram - no need to describe it.