fix: onboarding screen should show persisted cloud providers (#4738)

electron/.eslintrc.js

@@ -35,5 +35,12 @@ module.exports = {
       { name: 'Link', linkAttribute: 'to' },
     ],
   },
-  ignorePatterns: ['build', 'renderer', 'node_modules', '@global', 'playwright-report'],
+  ignorePatterns: [
+    'build',
+    'renderer',
+    'node_modules',
+    '@global',
+    'playwright-report',
+    'test-data',
+  ],
 }

electron/tsconfig.json

@@ -19,5 +19,5 @@
     "esm": true
   },
   "include": ["./**/*.ts"],
-  "exclude": ["core", "build", "dist", "tests", "node_modules"]
+  "exclude": ["core", "build", "dist", "tests", "node_modules", "test-data"]
 }

extensions/engine-management-extension/src/index.ts

@@ -266,7 +266,9 @@ export default class JanEngineManagementExtension extends EngineManagementExtens
       .get(`${API_URL}/healthz`, {
         retry: { limit: 20, delay: () => 500, methods: ['get'] },
       })
-      .then(() => {})
+      .then(() => {
+        this.queue.concurrency = Infinity
+      })
   }
 
   /**

extensions/inference-cortex-extension/bin/version.txt

@@ -1 +1 @@
-1.0.11-rc2
+1.0.11-rc3

web/screens/Thread/ThreadCenterPanel/ChatBody/OnboardingScreen/index.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { Provider } from 'jotai'
-import OnDeviceStarterScreen from './index'
+import OnboardingScreen from './index'
 import * as jotai from 'jotai'
 import '@testing-library/jest-dom'
 
@@ -74,7 +74,7 @@ describe('OnDeviceStarterScreen', () => {
     })
     render(
       <Provider>
-        <OnDeviceStarterScreen isShowStarterScreen={true} />
+        <OnboardingScreen isShowStarterScreen={true} />
       </Provider>
     )
 
@@ -90,7 +90,7 @@ describe('OnDeviceStarterScreen', () => {
     })
     render(
       <Provider>
-        <OnDeviceStarterScreen isShowStarterScreen={true} />
+        <OnboardingScreen isShowStarterScreen={true} />
       </Provider>
     )
 
@@ -110,7 +110,7 @@ describe('OnDeviceStarterScreen', () => {
     })
     render(
       <Provider>
-        <OnDeviceStarterScreen isShowStarterScreen={true} />
+        <OnboardingScreen isShowStarterScreen={true} />
       </Provider>
     )
 
@@ -164,7 +164,7 @@ describe('OnDeviceStarterScreen', () => {
 
     render(
       <Provider>
-        <OnDeviceStarterScreen isShowStarterScreen={true} />
+        <OnboardingScreen isShowStarterScreen={true} />
       </Provider>
     )
 
@@ -191,7 +191,7 @@ describe('OnDeviceStarterScreen', () => {
 
     render(
       <Provider>
-        <OnDeviceStarterScreen isShowStarterScreen={true} />
+        <OnboardingScreen isShowStarterScreen={true} />
       </Provider>
     )
 

web/screens/Thread/ThreadCenterPanel/ChatBody/OnboardingScreen/index.tsx

@@ -52,7 +52,7 @@ type Props = {
   isShowStarterScreen?: boolean
 }
 
-const OnDeviceStarterScreen = ({ isShowStarterScreen }: Props) => {
+function OnboardingScreen({ isShowStarterScreen }: Props) {
   const [searchValue, setSearchValue] = useState('')
   const [isOpen, setIsOpen] = useState(Boolean(searchValue.length))
   const downloadingModels = useAtomValue(getDownloadingModelAtom)
@@ -62,7 +62,6 @@ const OnDeviceStarterScreen = ({ isShowStarterScreen }: Props) => {
   const { engines } = useGetEngines()
   const showScrollBar = useAtomValue(showScrollBarAtom)
 
-  const configuredModels = useAtomValue(configuredModelsAtom)
   const { sources } = useGetModelSources()
   const setMainViewState = useSetAtom(mainViewStateAtom)
 
@@ -78,16 +77,6 @@ const OnDeviceStarterScreen = ({ isShowStarterScreen }: Props) => {
     [sources, searchValue]
   )
 
-  const remoteModel = configuredModels.filter(
-    (x) => !isLocalEngine(engines, x.engine)
-  )
-
-  const remoteModelEngine = remoteModel.map((x) => x.engine)
-
-  const groupByEngine = remoteModelEngine.filter(function (item, index) {
-    if (remoteModelEngine.indexOf(item) === index) return item
-  })
-
   const itemsPerRow = 5
 
   const getRows = (array: string[], itemsPerRow: number) => {
@@ -98,8 +87,10 @@ const OnDeviceStarterScreen = ({ isShowStarterScreen }: Props) => {
     return rows
   }
 
-  const rows = getRows(
+  const cloudProviders = getRows(
-    groupByEngine.sort((a, b) => a.localeCompare(b)),
+    Object.keys(engines ?? {})
+      .filter((e) => engines?.[e as InferenceEngine]?.[0]?.type === 'remote')
+      .sort((a, b) => a.localeCompare(b)),
     itemsPerRow
   )
 
@@ -297,57 +288,51 @@ const OnDeviceStarterScreen = ({ isShowStarterScreen }: Props) => {
                 </div>
 
                 <div className="flex flex-col justify-center gap-6">
-                  {rows.slice(0, visibleRows).map((row, rowIndex) => {
+                  {cloudProviders.slice(0, visibleRows).map((row, rowIndex) => {
                     return (
                       <div
                         key={rowIndex}
                         className="my-2 flex items-center gap-4 md:gap-10"
                       >
-                        {row
+                        {row.map((remoteEngine) => {
-                          .filter(
+                          const engineLogo = getLogoEngine(
-                            (e) =>
+                            remoteEngine as InferenceEngine
-                              engines?.[e as InferenceEngine]?.[0]?.type ===
-                              'remote'
                           )
-                          .map((remoteEngine) => {
-                            const engineLogo = getLogoEngine(
-                              remoteEngine as InferenceEngine
-                            )
 
-                            return (
+                          return (
-                              <div
+                            <div
-                                className="flex cursor-pointer flex-col items-center justify-center gap-4"
+                              className="flex cursor-pointer flex-col items-center justify-center gap-4"
-                                key={remoteEngine}
+                              key={remoteEngine}
-                                onClick={() => {
+                              onClick={() => {
-                                  setMainViewState(MainViewState.Settings)
+                                setMainViewState(MainViewState.Settings)
-                                  setSelectedSetting(
+                                setSelectedSetting(
-                                    remoteEngine as InferenceEngine
+                                  remoteEngine as InferenceEngine
-                                  )
+                                )
-                                }}
+                              }}
-                              >
+                            >
-                                {engineLogo && (
+                              {engineLogo && (
-                                  <Image
+                                <Image
-                                    width={48}
+                                  width={48}
-                                    height={48}
+                                  height={48}
-                                    src={engineLogo}
+                                  src={engineLogo}
-                                    alt="Engine logo"
+                                  alt="Engine logo"
-                                    className="h-10 w-10 flex-shrink-0"
+                                  className="h-10 w-10 flex-shrink-0"
-                                  />
+                                />
+                              )}
+
+                              <p className="font-medium">
+                                {getTitleByEngine(
+                                  remoteEngine as InferenceEngine
                                 )}
-
+                              </p>
-                                <p className="font-medium">
+                            </div>
-                                  {getTitleByEngine(
+                          )
-                                    remoteEngine as InferenceEngine
+                        })}
-                                  )}
-                                </p>
-                              </div>
-                            )
-                          })}
                       </div>
                     )
                   })}
                 </div>
-                {visibleRows < rows.length && (
+                {visibleRows < cloudProviders.length && (
                   <button
                     onClick={() => setVisibleRows(visibleRows + 1)}
                     className="mt-4 text-[hsla(var(--text-secondary))]"
@@ -364,4 +349,4 @@ const OnDeviceStarterScreen = ({ isShowStarterScreen }: Props) => {
   )
 }
 
-export default OnDeviceStarterScreen
+export default OnboardingScreen

web/screens/Thread/index.tsx

@@ -5,7 +5,7 @@ import { useStarterScreen } from '@/hooks/useStarterScreen'
 import ThreadLeftPanel from '@/screens/Thread/ThreadLeftPanel'
 
 import ThreadCenterPanel from './ThreadCenterPanel'
-import OnDeviceStarterScreen from './ThreadCenterPanel/ChatBody/OnDeviceStarterScreen'
+import OnboardingScreen from './ThreadCenterPanel/ChatBody/OnboardingScreen'
 import ModalCleanThread from './ThreadLeftPanel/ModalCleanThread'
 import ModalDeleteThread from './ThreadLeftPanel/ModalDeleteThread'
 import ModalEditTitleThread from './ThreadLeftPanel/ModalEditTitleThread'
@@ -17,7 +17,7 @@ type Props = {
 
 const ThreadPanels = memo(({ isShowStarterScreen }: Props) => {
   return isShowStarterScreen ? (
-    <OnDeviceStarterScreen isShowStarterScreen={isShowStarterScreen} />
+    <OnboardingScreen isShowStarterScreen={isShowStarterScreen} />
   ) : (
     <>
       <ThreadLeftPanel />