From c7bc2eff6205511f37952031596cba757b04fd58 Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Fri, 17 Jan 2025 23:12:40 +0700
Subject: [PATCH 1/2] chore: engines data cache - improve ux

---
 .../SystemMonitor/TableActiveModel/index.tsx  |  4 +-
 .../Providers/SWRConfigProvider.tsx           | 30 ++++++++++++++
 web/containers/Providers/index.tsx            | 39 +++++++++++--------
 3 files changed, 53 insertions(+), 20 deletions(-)
 create mode 100644 web/containers/Providers/SWRConfigProvider.tsx

diff --git a/web/containers/Layout/BottomPanel/SystemMonitor/TableActiveModel/index.tsx b/web/containers/Layout/BottomPanel/SystemMonitor/TableActiveModel/index.tsx
index 36cdd317fa..7a7dd1e241 100644
--- a/web/containers/Layout/BottomPanel/SystemMonitor/TableActiveModel/index.tsx
+++ b/web/containers/Layout/BottomPanel/SystemMonitor/TableActiveModel/index.tsx
@@ -22,9 +22,7 @@ const TableActiveModel = () => {
     <div className="w-1/2">
       <div className="overflow-hidden border-b border-[hsla(var(--app-border))]">
         <table className="w-full px-8">
-          {activeModel &&
-          engines &&
-          isLocalEngine(engines, activeModel.engine) ? (
+          {activeModel && isLocalEngine(engines, activeModel.engine) ? (
             <tbody>
               <tr>
                 <td
diff --git a/web/containers/Providers/SWRConfigProvider.tsx b/web/containers/Providers/SWRConfigProvider.tsx
new file mode 100644
index 0000000000..3463853439
--- /dev/null
+++ b/web/containers/Providers/SWRConfigProvider.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import * as React from 'react'
+
+import { SWRConfig } from 'swr'
+
+function SWRConfigProvider({ children }: { children: React.ReactNode }) {
+  // https://swr.vercel.app/docs/advanced/cache#localstorage-based-persistent-cache
+  // When initializing, we restore the data from `localStorage` into a map.
+
+  const map = React.useMemo(() => new Map<string, object>(), [])
+  React.useEffect(() => {
+    const savedCache = JSON.parse(
+      window.localStorage.getItem('app-cache') || '[]'
+    )
+    savedCache.forEach(([key, value]: [string, object]) => {
+      map.set(key, value)
+    })
+
+    // Before unloading the app, we write back all the data into `localStorage`.
+    window.addEventListener('beforeunload', () => {
+      const appCache = JSON.stringify(Array.from(map.entries()))
+      window.localStorage.setItem('app-cache', appCache)
+    })
+  }, [map])
+
+  return <SWRConfig value={{ provider: () => map }}>{children}</SWRConfig>
+}
+
+export default SWRConfigProvider
diff --git a/web/containers/Providers/index.tsx b/web/containers/Providers/index.tsx
index 67778e30c4..bed0f07ecf 100644
--- a/web/containers/Providers/index.tsx
+++ b/web/containers/Providers/index.tsx
@@ -4,6 +4,8 @@ import { PropsWithChildren } from 'react'
 
 import { Toaster } from 'react-hot-toast'
 
+import { SWRConfig } from 'swr'
+
 import EventListener from '@/containers/Providers/EventListener'
 import JotaiWrapper from '@/containers/Providers/Jotai'
 
@@ -18,27 +20,30 @@ import DeepLinkListener from './DeepLinkListener'
 import KeyListener from './KeyListener'
 import Responsive from './Responsive'
 
+import SWRConfigProvider from './SWRConfigProvider'
 import SettingsHandler from './SettingsHandler'
 
 const Providers = ({ children }: PropsWithChildren) => {
   return (
-    <ThemeWrapper>
-      <JotaiWrapper>
-        <Umami />
-        <CoreConfigurator>
-          <>
-            <Responsive />
-            <KeyListener />
-            <EventListener />
-            <DataLoader />
-            <SettingsHandler />
-            <DeepLinkListener />
-            <Toaster />
-            {children}
-          </>
-        </CoreConfigurator>
-      </JotaiWrapper>
-    </ThemeWrapper>
+    <SWRConfigProvider>
+      <ThemeWrapper>
+        <JotaiWrapper>
+          <Umami />
+          <CoreConfigurator>
+            <>
+              <Responsive />
+              <KeyListener />
+              <EventListener />
+              <DataLoader />
+              <SettingsHandler />
+              <DeepLinkListener />
+              <Toaster />
+              {children}
+            </>
+          </CoreConfigurator>
+        </JotaiWrapper>
+      </ThemeWrapper>
+    </SWRConfigProvider>
   )
 }
 

From 9cf63f87cc6fe50f7dbc861b790198f98e3cad76 Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Sat, 18 Jan 2025 09:16:32 +0700
Subject: [PATCH 2/2] chore: fix type access

---
 web/containers/ModelDropdown/index.tsx              | 4 ++--
 web/screens/Settings/MyModels/MyModelList/index.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/containers/ModelDropdown/index.tsx b/web/containers/ModelDropdown/index.tsx
index c774a0813c..40c6fc931e 100644
--- a/web/containers/ModelDropdown/index.tsx
+++ b/web/containers/ModelDropdown/index.tsx
@@ -196,8 +196,8 @@ const ModelDropdown = ({
     const model = downloadedModels.find((model) => model.id === modelId)
     if (model) {
       if (
-        engines?.[model.engine]?.[0].type === 'local' ||
-        (engines?.[model.engine]?.[0].api_key?.length ?? 0) > 0
+        engines?.[model.engine]?.[0]?.type === 'local' ||
+        (engines?.[model.engine]?.[0]?.api_key?.length ?? 0) > 0
       )
         setSelectedModel(model)
     } else {
diff --git a/web/screens/Settings/MyModels/MyModelList/index.tsx b/web/screens/Settings/MyModels/MyModelList/index.tsx
index ba21d79bd9..6824d1471f 100644
--- a/web/screens/Settings/MyModels/MyModelList/index.tsx
+++ b/web/screens/Settings/MyModels/MyModelList/index.tsx
@@ -2,7 +2,7 @@ import { memo, useState } from 'react'
 
 import { Model } from '@janhq/core'
 import { Badge, Button, Tooltip, useClickOutside } from '@janhq/joi'
-import { useAtom, useAtomValue } from 'jotai'
+import { useAtom } from 'jotai'
 import {
   MoreVerticalIcon,
   PlayIcon,