fix: api server chat completion error for remote model (#2671)

* fix: api server chat completion error for remote model

Signed-off-by: James <james@jan.ai>

* fix: duplicate setting in local api server

Signed-off-by: James <james@jan.ai>

---------

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>

core/src/node/helper/config.ts

@@ -133,6 +133,7 @@ export const getEngineConfiguration = async (engineId: string) => {
   const settingDirectoryPath = join(
     getJanDataFolderPath(),
     'settings',
+    '@janhq',
     engineId === 'openai' ? 'inference-openai-extension' : 'inference-groq-extension',
     'settings.json'
   )
@@ -141,12 +142,15 @@ export const getEngineConfiguration = async (engineId: string) => {
   const settings: SettingComponentProps[] = JSON.parse(content)
   const apiKeyId = engineId === 'openai' ? 'openai-api-key' : 'groq-api-key'
   const keySetting = settings.find((setting) => setting.key === apiKeyId)
+  let fullUrl = settings.find((setting) => setting.key === 'chat-completions-endpoint')
+    ?.controllerProps.value
 
   let apiKey = keySetting?.controllerProps.value
   if (typeof apiKey !== 'string') apiKey = ''
+  if (typeof fullUrl !== 'string') fullUrl = ''
 
   return {
     api_key: apiKey,
-    full_url: undefined,
+    full_url: fullUrl,
   }
 }

web/screens/LocalServer/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
 import ScrollToBottom from 'react-scroll-to-bottom'
 
@@ -45,7 +45,7 @@ import { loadModelErrorAtom, useActiveModel } from '@/hooks/useActiveModel'
 import { useLogs } from '@/hooks/useLogs'
 
 import { getConfigurationsData } from '@/utils/componentSettings'
-import { toSettingParams } from '@/utils/modelParam'
+import { toRuntimeParams, toSettingParams } from '@/utils/modelParam'
 
 import EngineSetting from '../Chat/EngineSetting'
 
@@ -74,7 +74,13 @@ const LocalServerScreen = () => {
   const selectedModel = useAtomValue(selectedModelAtom)
 
   const modelEngineParams = toSettingParams(selectedModel?.settings)
+  const modelRuntimeParams = toRuntimeParams(selectedModel?.settings)
+
   const componentDataEngineSetting = getConfigurationsData(modelEngineParams)
+  const componentDataRuntimeSetting = getConfigurationsData(
+    modelRuntimeParams,
+    selectedModel
+  )
 
   const [isCorsEnabled, setIsCorsEnabled] = useAtom(apiServerCorsEnabledAtom)
   const [isVerboseEnabled, setIsVerboseEnabled] = useAtom(
@@ -120,6 +126,17 @@ const LocalServerScreen = () => {
     handleChangePrefix(prefix)
   }, [handleChangePrefix, prefix])
 
+  const engineSettings = useMemo(
+    () => componentDataEngineSetting.filter((x) => x.key !== 'prompt_template'),
+    [componentDataEngineSetting]
+  )
+
+  const modelSettings = useMemo(() => {
+    return componentDataRuntimeSetting.filter(
+      (x) => x.key !== 'prompt_template'
+    )
+  }, [componentDataRuntimeSetting])
+
   const onStartServerClick = async () => {
     if (selectedModel == null) return
     try {
@@ -474,32 +491,21 @@ const LocalServerScreen = () => {
             </div>
           )}
 
-          {componentDataEngineSetting.filter((x) => x.key === 'prompt_template')
+          {modelSettings.length !== 0 && (
-            .length !== 0 && (
             <div className="mt-4">
               <CardSidebar title="Model Parameters" asChild>
                 <div className="px-2 py-4">
-                  <ModelSetting componentProps={componentDataEngineSetting} />
+                  <ModelSetting componentProps={modelSettings} />
-                  {/* <SettingComponentBuilder
-                    enabled={!serverEnabled}
-                    componentProps={componentDataEngineSetting}
-                    onValueUpdated={function (
-                      key: string,
-                      value: string | number | boolean
-                    ): void {
-                      throw new Error('Function not implemented.')
-                    }}
-                  /> */}
                 </div>
               </CardSidebar>
             </div>
           )}
 
-          {componentDataEngineSetting.length !== 0 && (
+          {engineSettings.length !== 0 && (
             <div className="my-4">
               <CardSidebar title="Engine Parameters" asChild>
                 <div className="px-2 py-4">
-                  <EngineSetting componentData={componentDataEngineSetting} />
+                  <EngineSetting componentData={engineSettings} />
                 </div>
               </CardSidebar>
             </div>