olegshulyakov · olegshulyakov · Sep 30, 2025 · Sep 30, 2025
diff --git a/src/components/CanvasPyInterpreter.tsx b/src/components/CanvasPyInterpreter.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LuPlay, LuSquare } from 'react-icons/lu';
 import { useChatContext } from '../context/chat';
-import StorageUtils from '../database';
+import LocalStorage from '../database/localStorage';
 import { CanvasType } from '../types';
 import { OpenInNewTab, XCloseButton } from './common';
 
@@ -64,7 +64,7 @@ const startWorker = () => {
   }
 };
 
-if (StorageUtils.getConfig().pyIntepreterEnabled) {
+if (LocalStorage.getConfig().pyIntepreterEnabled) {
   startWorker();
 }
 

diff --git a/src/components/ChatMessage.tsx b/src/components/ChatMessage.tsx
@@ -18,7 +18,7 @@ import {
 import { useAppContext } from '../context/app';
 import { useChatContext } from '../context/chat';
 import { useModals } from '../context/modal';
-import StorageUtils from '../database';
+import IndexedDB from '../database/indexedDB';
 import { useFileUpload } from '../hooks/useFileUpload';
 import {
   Message,
@@ -349,7 +349,7 @@ export default memo(function ChatMessage({
             className="btn btn-ghost w-8 h-8 p-0"
             onClick={async () => {
               if (await showConfirm(t('chatScreen.actions.delete.confirm'))) {
-                await StorageUtils.deleteMessage(msg);
+                await IndexedDB.deleteMessage(msg);
               }
             }}
             disabled={!msg.content}

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -12,7 +12,7 @@ import {
 import { useNavigate } from 'react-router';
 import { useChatContext } from '../context/chat';
 import { useModals } from '../context/modal';
-import StorageUtils from '../database';
+import IndexedDB from '../database/indexedDB';
 import { Conversation } from '../types';
 import { classNames } from '../utils';
 import { downloadAsFile } from './common';
@@ -26,12 +26,12 @@ export default function Sidebar() {
 
   useEffect(() => {
     const handleConversationChange = async () => {
-      setConversations(await StorageUtils.getAllConversations());
+      setConversations(await IndexedDB.getAllConversations());
     };
-    StorageUtils.onConversationChanged(handleConversationChange);
+    IndexedDB.onConversationChanged(handleConversationChange);
     handleConversationChange();
     return () => {
-      StorageUtils.offConversationChanged(handleConversationChange);
+      IndexedDB.offConversationChanged(handleConversationChange);
     };
   }, []);
 
@@ -184,7 +184,7 @@ const ConversationItem = memo(
       }
       const newName = await showPrompt(t('sidebar.actions.newName'), conv.name);
       if (newName && newName.trim().length > 0) {
-        StorageUtils.updateConversationName(conv.id, newName);
+        IndexedDB.updateConversationName(conv.id, newName);
       }
     };
 
@@ -193,7 +193,7 @@ const ConversationItem = memo(
         toast.error(t('sidebar.errors.downloadOnGenerate'));
         return;
       }
-      return StorageUtils.exportDB(conv.id).then((data) =>
+      return IndexedDB.exportDB(conv.id).then((data) =>
         downloadAsFile(
           [JSON.stringify(data, null, 2)],
           `conversation_${conv.id}.json`
@@ -208,7 +208,7 @@ const ConversationItem = memo(
       }
       if (await showConfirm(t('sidebar.actions.deleteConfirm'))) {
         toast.success(t('sidebar.actions.deleteSuccess'));
-        StorageUtils.deleteConversation(conv.id);
+        IndexedDB.deleteConversation(conv.id);
         navigate('/');
       }
     };

diff --git a/src/context/app.tsx b/src/context/app.tsx
@@ -8,7 +8,8 @@ import React, {
 import toast from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import { CONFIG_DEFAULT, SYNTAX_THEMES } from '../config';
-import StorageUtils from '../database';
+import IndexedDB from '../database/indexedDB';
+import LocalStorage from '../database/localStorage';
 import {
   Configuration,
   ConfigurationPreset,
@@ -45,8 +46,8 @@ const initialState: AppState = {
   config: CONFIG_DEFAULT,
   presets: [],
   showSettings: false,
-  currentTheme: StorageUtils.getTheme(),
-  currentSyntaxTheme: StorageUtils.getSyntaxTheme(),
+  currentTheme: LocalStorage.getTheme(),
+  currentSyntaxTheme: LocalStorage.getSyntaxTheme(),
 };
 
 // Reducer function
@@ -97,25 +98,25 @@ export const AppContextProvider = ({
 
   const init = useCallback(async (): Promise<boolean> => {
     console.debug('Load config & presets');
-    const config = StorageUtils.getConfig();
+    const config = LocalStorage.getConfig();
     dispatch({ type: AppActionType.SET_CONFIG, payload: config });
 
-    const presets = await StorageUtils.getPresets();
+    const presets = await IndexedDB.getPresets();
     dispatch({ type: AppActionType.SET_PRESETS, payload: presets });
     return !!config;
   }, []);
 
   const saveConfig = useCallback((config: Configuration) => {
     console.debug('Save config', config);
-    StorageUtils.setConfig(config);
+    LocalStorage.setConfig(config);
     dispatch({ type: AppActionType.SET_CONFIG, payload: config });
   }, []);
 
   const savePreset = useCallback(
     async (name: string, config: Configuration) => {
       console.debug('Save preset', { name, config });
-      await StorageUtils.savePreset(name, config);
-      const presets = await StorageUtils.getPresets();
+      await IndexedDB.savePreset(name, config);
+      const presets = await IndexedDB.getPresets();
       dispatch({ type: AppActionType.SET_PRESETS, payload: presets });
       toast.success(t('state.preset.saved'));
     },
@@ -125,8 +126,8 @@ export const AppContextProvider = ({
   const removePreset = useCallback(
     async (name: string) => {
       console.debug('Remove preset', name);
-      await StorageUtils.removePreset(name);
-      const presets = await StorageUtils.getPresets();
+      await IndexedDB.removePreset(name);
+      const presets = await IndexedDB.getPresets();
       dispatch({ type: AppActionType.SET_PRESETS, payload: presets });
       toast.success(t('state.preset.removed'));
     },
@@ -144,9 +145,9 @@ export const AppContextProvider = ({
   const importDB = useCallback(
     async (data: string) => {
       try {
-        await StorageUtils.importDB(JSON.parse(data));
+        await IndexedDB.importDB(JSON.parse(data));
 
-        const presets = await StorageUtils.getPresets();
+        const presets = await IndexedDB.getPresets();
         dispatch({ type: AppActionType.SET_PRESETS, payload: presets });
       } catch (error) {
         console.error('Error during database import:', error);
@@ -163,7 +164,7 @@ export const AppContextProvider = ({
     async (convId?: string): Promise<ExportJsonStructure> => {
       let data: ExportJsonStructure;
       try {
-        data = await StorageUtils.exportDB(convId);
+        data = await IndexedDB.exportDB(convId);
       } catch (error) {
         console.error('Error during database export:', error);
         toast.error(t('state.database.export.failed'));
@@ -181,7 +182,7 @@ export const AppContextProvider = ({
 
   const switchTheme = useCallback((theme: string) => {
     console.debug('Switch theme', theme);
-    StorageUtils.setTheme(theme);
+    LocalStorage.setTheme(theme);
     dispatch({ type: AppActionType.SET_CURRENT_THEME, payload: theme });
 
     // Update body color scheme
@@ -202,7 +203,7 @@ export const AppContextProvider = ({
 
   const switchSyntaxTheme = useCallback((theme: string) => {
     console.debug('Switch syntax theme', theme);
-    StorageUtils.setSyntaxTheme(theme);
+    LocalStorage.setSyntaxTheme(theme);
     dispatch({ type: AppActionType.SET_CURRENT_SYNTAX_THEME, payload: theme });
 
     // Update body color scheme
@@ -216,8 +217,8 @@ export const AppContextProvider = ({
 
   useEffect(() => {
     init();
-    switchTheme(StorageUtils.getTheme());
-    switchSyntaxTheme(StorageUtils.getSyntaxTheme());
+    switchTheme(LocalStorage.getTheme());
+    switchSyntaxTheme(LocalStorage.getSyntaxTheme());
   }, [init, switchSyntaxTheme, switchTheme]);
 
   return (

diff --git a/src/context/chat.tsx b/src/context/chat.tsx
@@ -12,7 +12,7 @@ import { matchPath, useLocation, useNavigate } from 'react-router';
 import { configToCustomOptions, normalizeMsgsForAPI } from '../api/utils';
 import { isDev } from '../config';
 import { useInferenceContext } from '../context/inference';
-import StorageUtils from '../database';
+import IndexedDB from '../database/indexedDB';
 import {
   CanvasData,
   Conversation,
@@ -172,12 +172,12 @@ interface ChatContextValue {
 export type CallbackGeneratedChunk = (currLeafNodeId?: Message['id']) => void;
 
 const getViewingChat = async (convId: string): Promise<ViewingChat | null> => {
-  const conv = await StorageUtils.getOneConversation(convId);
+  const conv = await IndexedDB.getOneConversation(convId);
   if (!conv) return null;
   return {
     conv: conv,
     // all messages from all branches, not filtered by last node
-    messages: await StorageUtils.getMessages(convId),
+    messages: await IndexedDB.getMessages(convId),
   };
 };
 
@@ -212,15 +212,15 @@ export const ChatContextProvider = ({ children }: { children: ReactNode }) => {
       type: ChatActionType.SET_CANVAS_DATA,
       payload: { canvasData: null },
     });
-    StorageUtils.onConversationChanged(handleConversationChange);
+    IndexedDB.onConversationChanged(handleConversationChange);
     getViewingChat(convId ?? '').then((viewingChat) =>
       dispatch({
         type: ChatActionType.SET_VIEWING_CHAT,
         payload: { viewingChat },
       })
     );
     return () => {
-      StorageUtils.offConversationChanged(handleConversationChange);
+      IndexedDB.offConversationChanged(handleConversationChange);
     };
   }, [convId, handleConversationChange]);
 
@@ -280,13 +280,13 @@ export const ChatContextProvider = ({ children }: { children: ReactNode }) => {
     }) => {
       if (isGenerating(convId) || !provider) return;
 
-      const currConversation = await StorageUtils.getOneConversation(convId);
+      const currConversation = await IndexedDB.getOneConversation(convId);
       if (!currConversation) {
         throw new Error(t('state.chat.errors.conversationNotFound'));
       }
 
-      const currMessages = StorageUtils.filterByLeafNodeId(
-        await StorageUtils.getMessages(convId),
+      const currMessages = IndexedDB.filterByLeafNodeId(
+        await IndexedDB.getMessages(convId),
         leafNodeId,
         false
       ).filter((m) => m.role !== 'system');
@@ -392,7 +392,7 @@ export const ChatContextProvider = ({ children }: { children: ReactNode }) => {
       }
 
       if (pendingMsg.content !== null) {
-        await StorageUtils.appendMsg(pendingMsg as Message, leafNodeId);
+        await IndexedDB.appendMsg(pendingMsg as Message, leafNodeId);
       }
       setPending(convId, null);
       onChunk(pendingId); // trigger scroll to bottom and switch to the last node
@@ -422,7 +422,7 @@ export const ChatContextProvider = ({ children }: { children: ReactNode }) => {
         currMsgId = Date.now();
         try {
           // save user message
-          await StorageUtils.appendMsg(
+          await IndexedDB.appendMsg(
             {
               id: currMsgId,
               convId,
@@ -476,7 +476,7 @@ export const ChatContextProvider = ({ children }: { children: ReactNode }) => {
 
       const now = Date.now();
       const currMsgId = now;
-      await StorageUtils.appendMsg(
+      await IndexedDB.appendMsg(
         {
           ...msg,
           id: currMsgId,
@@ -495,7 +495,7 @@ export const ChatContextProvider = ({ children }: { children: ReactNode }) => {
       if (isGenerating(msg.convId)) return;
 
       try {
-        const conv = await StorageUtils.branchConversation(msg.convId, msg.id);
+        const conv = await IndexedDB.branchConversation(msg.convId, msg.id);
         navigate(`/chat/${conv.id}`);
       } catch (error) {
         console.error('Conversation branch failed:', error);