chore: fix welcome screen and debounce update value input

electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jan",
-  "version": "0.1.3",
+  "version": "0.1.1736316956",
   "main": "./build/main.js",
   "author": "Jan <[email protected]>",
   "license": "MIT",

extensions/yarn.lock

@@ -509,71 +509,71 @@ __metadata:
 
 "@janhq/core@file:../../core/package.tgz::locator=%40janhq%2Fassistant-extension%40workspace%3Aassistant-extension":
   version: 0.1.10
-  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=9e1472&locator=%40janhq%2Fassistant-extension%40workspace%3Aassistant-extension"
+  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=0c5ec1&locator=%40janhq%2Fassistant-extension%40workspace%3Aassistant-extension"
   dependencies:
     rxjs: "npm:^7.8.1"
     ulidx: "npm:^2.3.0"
-  checksum: 10c0/2a1b92c0d0f3922aa61b3c2d15a8aa176ec5aa2a457068c16477d7dfa4910558c5df91661b25252e93c5473b1efe02ddcced008034c96edc5f8330afad2cc389
+  checksum: 10c0/f09696c64255c540b3d07b0bb15edbf7026ea727c560653d653b9c5b37b5550d32adab248fb21a317e11797d605345c471d2ca601f41a5dadaa5df0a9354efca
   languageName: node
   linkType: hard
 
 "@janhq/core@file:../../core/package.tgz::locator=%40janhq%2Fconversational-extension%40workspace%3Aconversational-extension":
   version: 0.1.10
-  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=9e1472&locator=%40janhq%2Fconversational-extension%40workspace%3Aconversational-extension"
+  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=0c5ec1&locator=%40janhq%2Fconversational-extension%40workspace%3Aconversational-extension"
   dependencies:
     rxjs: "npm:^7.8.1"
     ulidx: "npm:^2.3.0"
-  checksum: 10c0/2a1b92c0d0f3922aa61b3c2d15a8aa176ec5aa2a457068c16477d7dfa4910558c5df91661b25252e93c5473b1efe02ddcced008034c96edc5f8330afad2cc389
+  checksum: 10c0/f09696c64255c540b3d07b0bb15edbf7026ea727c560653d653b9c5b37b5550d32adab248fb21a317e11797d605345c471d2ca601f41a5dadaa5df0a9354efca
   languageName: node
   linkType: hard
 
 "@janhq/core@file:../../core/package.tgz::locator=%40janhq%2Fengine-management-extension%40workspace%3Aengine-management-extension":
   version: 0.1.10
-  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=9e1472&locator=%40janhq%2Fengine-management-extension%40workspace%3Aengine-management-extension"
+  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=0c5ec1&locator=%40janhq%2Fengine-management-extension%40workspace%3Aengine-management-extension"
   dependencies:
     rxjs: "npm:^7.8.1"
     ulidx: "npm:^2.3.0"
-  checksum: 10c0/2a1b92c0d0f3922aa61b3c2d15a8aa176ec5aa2a457068c16477d7dfa4910558c5df91661b25252e93c5473b1efe02ddcced008034c96edc5f8330afad2cc389
+  checksum: 10c0/f09696c64255c540b3d07b0bb15edbf7026ea727c560653d653b9c5b37b5550d32adab248fb21a317e11797d605345c471d2ca601f41a5dadaa5df0a9354efca
   languageName: node
   linkType: hard
 
 "@janhq/core@file:../../core/package.tgz::locator=%40janhq%2Finference-cortex-extension%40workspace%3Ainference-cortex-extension":
   version: 0.1.10
-  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=9e1472&locator=%40janhq%2Finference-cortex-extension%40workspace%3Ainference-cortex-extension"
+  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=0c5ec1&locator=%40janhq%2Finference-cortex-extension%40workspace%3Ainference-cortex-extension"
   dependencies:
     rxjs: "npm:^7.8.1"
     ulidx: "npm:^2.3.0"
-  checksum: 10c0/2a1b92c0d0f3922aa61b3c2d15a8aa176ec5aa2a457068c16477d7dfa4910558c5df91661b25252e93c5473b1efe02ddcced008034c96edc5f8330afad2cc389
+  checksum: 10c0/f09696c64255c540b3d07b0bb15edbf7026ea727c560653d653b9c5b37b5550d32adab248fb21a317e11797d605345c471d2ca601f41a5dadaa5df0a9354efca
   languageName: node
   linkType: hard
 
 "@janhq/core@file:../../core/package.tgz::locator=%40janhq%2Fmodel-extension%40workspace%3Amodel-extension":
   version: 0.1.10
-  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=9e1472&locator=%40janhq%2Fmodel-extension%40workspace%3Amodel-extension"
+  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=0c5ec1&locator=%40janhq%2Fmodel-extension%40workspace%3Amodel-extension"
   dependencies:
     rxjs: "npm:^7.8.1"
     ulidx: "npm:^2.3.0"
-  checksum: 10c0/2a1b92c0d0f3922aa61b3c2d15a8aa176ec5aa2a457068c16477d7dfa4910558c5df91661b25252e93c5473b1efe02ddcced008034c96edc5f8330afad2cc389
+  checksum: 10c0/f09696c64255c540b3d07b0bb15edbf7026ea727c560653d653b9c5b37b5550d32adab248fb21a317e11797d605345c471d2ca601f41a5dadaa5df0a9354efca
   languageName: node
   linkType: hard
 
 "@janhq/core@file:../../core/package.tgz::locator=%40janhq%2Fmonitoring-extension%40workspace%3Amonitoring-extension":
   version: 0.1.10
-  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=9e1472&locator=%40janhq%2Fmonitoring-extension%40workspace%3Amonitoring-extension"
+  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=0c5ec1&locator=%40janhq%2Fmonitoring-extension%40workspace%3Amonitoring-extension"
   dependencies:
     rxjs: "npm:^7.8.1"
     ulidx: "npm:^2.3.0"
-  checksum: 10c0/2a1b92c0d0f3922aa61b3c2d15a8aa176ec5aa2a457068c16477d7dfa4910558c5df91661b25252e93c5473b1efe02ddcced008034c96edc5f8330afad2cc389
+  checksum: 10c0/f09696c64255c540b3d07b0bb15edbf7026ea727c560653d653b9c5b37b5550d32adab248fb21a317e11797d605345c471d2ca601f41a5dadaa5df0a9354efca
   languageName: node
   linkType: hard
 
 "@janhq/core@file:../../core/package.tgz::locator=%40janhq%2Ftensorrt-llm-extension%40workspace%3Atensorrt-llm-extension":
   version: 0.1.10
-  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=9e1472&locator=%40janhq%2Ftensorrt-llm-extension%40workspace%3Atensorrt-llm-extension"
+  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=0c5ec1&locator=%40janhq%2Ftensorrt-llm-extension%40workspace%3Atensorrt-llm-extension"
   dependencies:
     rxjs: "npm:^7.8.1"
     ulidx: "npm:^2.3.0"
-  checksum: 10c0/2a1b92c0d0f3922aa61b3c2d15a8aa176ec5aa2a457068c16477d7dfa4910558c5df91661b25252e93c5473b1efe02ddcced008034c96edc5f8330afad2cc389
+  checksum: 10c0/f09696c64255c540b3d07b0bb15edbf7026ea727c560653d653b9c5b37b5550d32adab248fb21a317e11797d605345c471d2ca601f41a5dadaa5df0a9354efca
   languageName: node
   linkType: hard
 

web/hooks/useStarterScreen.ts

@@ -1,79 +1,45 @@
-import { useState, useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { useAtomValue } from 'jotai'
 
 import { isLocalEngine } from '@/utils/modelEngine'
 
-import { extensionManager } from '@/extension'
 import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
 import { threadsAtom } from '@/helpers/atoms/Thread.atom'
+import { InferenceEngine, EngineConfig } from '@janhq/core/.'
+import { useGetEngines } from './useEngineManagement'
 
 export function useStarterScreen() {
   const downloadedModels = useAtomValue(downloadedModelsAtom)
   const threads = useAtomValue(threadsAtom)
 
+  const { engines } = useGetEngines()
+
+  const remoteEngines =
+    engines &&
+    Object.entries(engines)
+      .filter(([key]) => !isLocalEngine(key as InferenceEngine))
+      .flatMap(([_, engineArray]) => engineArray as EngineConfig)
+
   const isDownloadALocalModel = useMemo(
     () => downloadedModels.some((x) => isLocalEngine(x.engine)),
     [downloadedModels]
   )
 
-  const [extensionHasSettings, setExtensionHasSettings] = useState<
-    { name?: string; setting: string; apiKey: string; provider: string }[]
-  >([])
-
-  useEffect(() => {
-    const getAllSettings = async () => {
-      const extensionsMenu: {
-        name?: string
-        setting: string
-        apiKey: string
-        provider: string
-      }[] = []
-      const extensions = extensionManager.getAll()
-
-      for (const extension of extensions) {
-        if (typeof extension.getSettings === 'function') {
-          const settings = await extension.getSettings()
-
-          if (
-            (settings && settings.length > 0) ||
-            (await extension.installationState()) !== 'NotRequired'
-          ) {
-            extensionsMenu.push({
-              name: extension.productName,
-              setting: extension.name,
-              apiKey:
-                'apiKey' in extension && typeof extension.apiKey === 'string'
-                  ? extension.apiKey
-                  : '',
-              provider:
-                'provider' in extension &&
-                typeof extension.provider === 'string'
-                  ? extension.provider
-                  : '',
-            })
-          }
-        }
-      }
-      setExtensionHasSettings(extensionsMenu)
-    }
-    getAllSettings()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
   const isAnyRemoteModelConfigured = useMemo(
-    () => extensionHasSettings.some((x) => x.apiKey.length > 1),
-    [extensionHasSettings]
+    () => (remoteEngines ?? []).some((x) => x.api_key && x.api_key.length > 0),
+    [remoteEngines]
   )
 
+  console.log(isAnyRemoteModelConfigured)
+
   const isShowStarterScreen = useMemo(
     () =>
       !isAnyRemoteModelConfigured && !isDownloadALocalModel && !threads.length,
     [isAnyRemoteModelConfigured, isDownloadALocalModel, threads]
   )
 
   return {
-    extensionHasSettings,
     isShowStarterScreen,
   }
 }

web/screens/Settings/Engines/RemoteEngineSettings.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable  @typescript-eslint/no-explicit-any */
 /* eslint-disable  react/no-unescaped-entities */
 
-import React, { useCallback, useRef, useState } from 'react'
+import React, { useCallback, useRef, useState, useEffect } from 'react'
 
 import {
   EngineConfig as OriginalEngineConfig,
@@ -23,6 +23,9 @@ import { updateEngine, useGetEngines } from '@/hooks/useEngineManagement'
 
 import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
 
+import { set } from 'lodash'
+import { url } from 'inspector'
+
 const RemoteEngineSettings = ({
   engine: name,
 }: {
@@ -46,29 +49,74 @@ const RemoteEngineSettings = ({
     (field: string, value: any) => {
       if (!engine) return
 
+      setData((prevData) => {
+        const updatedData = { ...prevData }
+        set(updatedData, field, value)
+        return updatedData
+      })
+
       if (debounceRef.current) {
         clearTimeout(debounceRef.current)
       }
 
       debounceRef.current = setTimeout(async () => {
         const updatedEngine = { ...engine }
-        const fieldPath = field.split('.')
-        let current = updatedEngine
-
-        for (let i = 0; i < fieldPath.length - 1; i++) {
-          if (fieldPath[i] in current) {
-            current = current[fieldPath[i]] as any
-          }
-        }
-
-        current[fieldPath[fieldPath.length - 1]] = value
+        set(updatedEngine, field, value)
         await updateEngine(name, updatedEngine)
         mutate()
       }, 300)
     },
     [engine, name, mutate]
   )
 
+  const [data, setData] = useState({
+    api_key: '',
+    url: '',
+    metadata: {
+      header_template: '',
+      get_models_url: '',
+      transform_req: {
+        chat_completions: {
+          template: '',
+          url: '',
+        },
+      },
+      transform_resp: {
+        chat_completions: {
+          template: '',
+        },
+      },
+    },
+  })
+
+  useEffect(() => {
+    if (engine) {
+      setData({
+        api_key: engine.api_key || '',
+        url: engine.url || '',
+        metadata: {
+          header_template: engine.metadata?.header_template || '',
+          get_models_url: engine.metadata?.get_models_url || '',
+          transform_req: {
+            chat_completions: {
+              template:
+                engine.metadata?.transform_req?.chat_completions?.template ||
+                '',
+              url: engine.metadata?.transform_req?.chat_completions?.url || '',
+            },
+          },
+          transform_resp: {
+            chat_completions: {
+              template:
+                engine.metadata?.transform_resp?.chat_completions?.template ||
+                '',
+            },
+          },
+        },
+      })
+    }
+  }, [engine])
+
   return (
     <ScrollArea className="h-full w-full">
       <div className="block w-full px-4">
@@ -85,7 +133,7 @@ const RemoteEngineSettings = ({
                 <div className="w-full">
                   <Input
                     placeholder="Enter API Key"
-                    value={engine?.api_key}
+                    value={data?.api_key}
                     onChange={(e) => handleChange('api_key', e.target.value)}
                   />
                 </div>
@@ -95,6 +143,37 @@ const RemoteEngineSettings = ({
         </div>
       </div>
 
+      <div className="block w-full px-4">
+        <div className="mb-3 mt-4 border-b border-[hsla(var(--app-border))] pb-4">
+          <div className="flex w-full flex-col items-start justify-between sm:flex-row">
+            <div className="w-full flex-shrink-0 space-y-1.5">
+              <div className="flex items-start justify-between gap-x-2">
+                <div className="w-full sm:w-3/4">
+                  <h6 className="line-clamp-1 font-semibold">
+                    Chat Completion URL
+                  </h6>
+                  <p className="mt-1 text-[hsla(var(--text-secondary))]">
+                    Enter your chat completion URL.
+                  </p>
+                </div>
+                <div className="w-full">
+                  <Input
+                    placeholder="Enter Chat Completion URL"
+                    value={data?.metadata.transform_req.chat_completions.url}
+                    onChange={(e) =>
+                      handleChange(
+                        'metadata.transform_req.chat_completions.url',
+                        e.target.value
+                      )
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div className="block w-full px-4">
         <div className="mb-3 mt-4 pb-4">
           <div className="flex w-full flex-col items-start justify-between sm:flex-row">
@@ -167,7 +246,7 @@ const RemoteEngineSettings = ({
                     <div className="w-full">
                       <Input
                         placeholder="Enter API URL"
-                        value={engine?.url}
+                        value={data?.url}
                         onChange={(e) => handleChange('url', e.target.value)}
                       />
                     </div>
@@ -192,7 +271,7 @@ const RemoteEngineSettings = ({
                     <div className="w-full">
                       <Input
                         placeholder="Enter model list URL"
-                        value={engine?.metadata?.get_models_url}
+                        value={data?.metadata?.get_models_url}
                         onChange={(e) =>
                           handleChange(
                             'metadata.get_models_url',
@@ -222,7 +301,7 @@ const RemoteEngineSettings = ({
                     <div className="w-full">
                       <TextArea
                         placeholder="Enter headers template"
-                        value={engine?.metadata?.header_template}
+                        value={data?.metadata?.header_template}
                         onChange={(e) =>
                           handleChange(
                             'metadata.header_template',
@@ -254,7 +333,7 @@ const RemoteEngineSettings = ({
                       <TextArea
                         placeholder="Enter conversion function"
                         value={
-                          engine?.metadata?.transform_req?.chat_completions
+                          data?.metadata?.transform_req?.chat_completions
                             ?.template
                         }
                         onChange={(e) =>
@@ -288,7 +367,7 @@ const RemoteEngineSettings = ({
                       <TextArea
                         placeholder="Enter conversion function"
                         value={
-                          engine?.metadata?.transform_resp?.chat_completions
+                          data?.metadata?.transform_resp?.chat_completions
                             ?.template
                         }
                         onChange={(e) =>