feat: Messages import/export

public/demo-conversation.json

@@ -1,33 +1,83 @@
-{
-  "demo": true,
-  "id": "conv-1734086746930",
-  "lastModified": 1734087548943,
-  "messages": [
-    {
-      "id": 1734086764521,
-      "role": "user",
-      "content": "this is a demo conversation, used in dev mode"
-    },
-    {
-      "id": 1734087548327,
-      "role": "assistant",
-      "content": "This is the formula:\n\n$\\frac{e^{x_i}}{\\sum_{j=1}^{n}e^{x_j}}$\n\nGiven an input vector \\(\\mathbf{x} = [x_1, x_2, \\ldots, x_n]\\)\n\n\\[\ny_i = \\frac{e^{x_i}}{\\sum_{j=1}^n e^{x_j}}\n\\]\n\n$2x + y = z$\n\nCode block latex:\n```latex\n\\frac{e^{x_i}}{\\sum_{j=1}^{n}e^{x_j}}\n```\n\nTest dollar sign: $1234 $4567\n\nInvalid latex syntax: $E = mc^$ and $$E = mc^$$",
-      "timings": {
-        "prompt_n": 1,
-        "prompt_ms": 28.923,
-        "predicted_n": 25,
-        "predicted_ms": 573.016
+[
+  {
+    "table": "conversations",
+    "rows": [
+      {
+        "id": "conv-1734086746930",
+        "lastModified": 1734087548943,
+        "currNode": 1755372088111,
+        "name": "Technical Demo"
       }
-    },
-    {
-      "id": 1734087548328,
-      "role": "user",
-      "content": "this is a demo conversation, used in dev mode"
-    },
-    {
-      "id": 1734087548329,
-      "role": "assistant",
-      "content": "Code block:\n```js\nconsole.log('hello world')\n```\n```sh\nls -la /dev\n```"
-    }
-  ]
-}
+    ]
+  },
+  {
+    "table": "messages",
+    "rows": [
+      {
+        "id": 1734086746930,
+        "convId": "conv-1734086746930",
+        "type": "root",
+        "timestamp": 1734086746930,
+        "role": "system",
+        "content": "",
+        "parent": -1,
+        "children": [
+          1734086764521,
+          1734087548328
+        ]
+      },
+      {
+        "id": 1734086764521,
+        "timestamp": 1734086764521,
+        "type": "text",
+        "convId": "conv-1734086746930",
+        "role": "user",
+        "content": "A LaTeX block demo conversation",
+        "parent": 1734086746930,
+        "children": [
+          1734087548327
+        ]
+      },
+      {
+        "id": 1734087548327,
+        "timestamp": 1734087548327,
+        "type": "text",
+        "convId": "conv-1734086746930",
+        "model": "gpt-3.5-turbo",
+        "role": "assistant",
+        "content": "This is the formula:\n\n$\\frac{e^{x_i}}{\\sum_{j=1}^{n}e^{x_j}}$\n\nGiven an input vector \\(\\mathbf{x} = [x_1, x_2, \\ldots, x_n]\\)\n\n\\[\ny_i = \\frac{e^{x_i}}{\\sum_{j=1}^n e^{x_j}}\n\\]\n\n$2x + y = z$\n\nCode block latex:\n```latex\n\\frac{e^{x_i}}{\\sum_{j=1}^{n}e^{x_j}}\n```\n\nTest dollar sign: $1234 $4567\n\nInvalid latex syntax: $E = mc^$ and $$E = mc^$$",
+        "parent": 1734086764521,
+        "children": [],
+        "timings": {
+          "prompt_n": 1,
+          "prompt_ms": 28.923,
+          "predicted_n": 25,
+          "predicted_ms": 573.016
+        }
+      },
+      {
+        "id": 1734087548328,
+        "timestamp": 1734087548328,
+        "type": "text",
+        "convId": "conv-1734086746930",
+        "role": "user",
+        "content": "A code block demo conversation",
+        "parent": 1734086746930,
+        "children": [
+          1734087548329
+        ]
+      },
+      {
+        "id": 1734087548329,
+        "timestamp": 1734087548329,
+        "type": "text",
+        "convId": "conv-1734086746930",
+        "model": "gpt-3.5-turbo",
+        "role": "assistant",
+        "content": "Code block:\n```js\nconsole.log('hello world')\n```\n```sh\nls -la /dev\n```",
+        "parent": 1734087548328,
+        "children": []
+      }
+    ]
+  }
+]

src/components/SettingDialog.tsx

@@ -1,4 +1,6 @@
 import {
+  ArrowDownTrayIcon,
+  ArrowUpTrayIcon,
   BeakerIcon,
   ChatBubbleLeftEllipsisIcon,
   ChatBubbleLeftRightIcon,
@@ -7,6 +9,7 @@
   Cog6ToothIcon,
   CogIcon,
   CpuChipIcon,
+  EyeIcon,
   FunnelIcon,
   HandRaisedIcon,
   RocketLaunchIcon,
@@ -104,7 +107,10 @@
 
 // --- Setting Tabs Configuration ---
 
-const getSettingTabsConfiguration = (config: Configuration): SettingTab[] => [
+const getSettingTabsConfiguration = (
+  config: Configuration,
+  onClose: () => void
+): SettingTab[] => [
   /* General */
   {
     title: (
@@ -184,6 +190,32 @@
       </>
     ),
     fields: [
+      {
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <ChatBubbleOvalLeftEllipsisIcon className={ICON_CLASSNAME} />
+            Chats
+          </>
+        ),
+      },
+      {
+        type: SettingInputType.CUSTOM,
+        key: 'custom', // dummy key, won't be used
+        component: () => <ImportExportComponent onClose={onClose} />,
+      },
+      {
+        type: SettingInputType.DELIMETER,
+      },
+      {
+        type: SettingInputType.SECTION,
+        label: (
+          <>
+            <EyeIcon className={ICON_CLASSNAME} />
+            Technical Demo
+          </>
+        ),
+      },
       {
         type: SettingInputType.CUSTOM,
         key: 'custom', // dummy key, won't be used
@@ -193,17 +225,15 @@
               const res = await fetch('/demo-conversation.json');
               if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
               const demoConv = await res.json();
-              StorageUtils.remove(demoConv.id);
-              for (const msg of demoConv.messages) {
-                StorageUtils.appendMsg(demoConv.id, msg);
-              }
+              StorageUtils.importDB(demoConv);
+              onClose();
             } catch (error) {
               console.error('Failed to import demo conversation:', error);
             }
           };
           return (
             <button className="btn" onClick={debugImportDemoConv}>
-              (debug) Import demo conversation
+              Import demo conversation
             </button>
           );
         },
@@ -396,8 +426,8 @@
     JSON.parse(JSON.stringify(config))
   );
   const settingTabs = useMemo<SettingTab[]>(
-    () => getSettingTabsConfiguration(localConfig),
+    () => getSettingTabsConfiguration(localConfig, onClose),
     [localConfig]
   );
 
   const { showConfirm, showAlert } = useModals();
@@ -684,3 +714,61 @@
     </>
   );
 };
+const ImportExportComponent: React.FC<{ onClose: () => void }> = ({
+  onClose,
+}) => {
+  const onExport = async () => {
+    const data = await StorageUtils.exportDB();
+    const conversationJson = JSON.stringify(data, null, 2);
+    const blob = new Blob([conversationJson], {
+      type: 'application/json',
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `database.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const onImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    try {
+      const files = e.target.files;
+      if (!files || files.length != 1) return false;
+      const data = await files[0].text();
+      await StorageUtils.importDB(JSON.parse(data));
+      onClose();
+    } catch (error) {
+      console.error('Failed to import file:', error);
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-[min-content_min-content] gap-2">
+      <button className="btn" onClick={onExport}>
+        <ArrowDownTrayIcon className={ICON_CLASSNAME} />
+        Export
+      </button>
+
+      <input
+        id="file-import"
+        type="file"
+        accept=".json"
+        onInput={onImport}
+        hidden
+      />
+      <label
+        htmlFor="file-import"
+        className="btn"
+        aria-label="Import file"
+        tabIndex={0}
+        role="button"
+      >
+        <ArrowUpTrayIcon className={ICON_CLASSNAME} />
+        Import
+      </label>
+    </div>
+  );
+};