From 69f73b86c4c93d3078d1cf8271140963dacc292f Mon Sep 17 00:00:00 2001
From: NamH <NamNh0122@gmail.com>
Date: Wed, 10 Apr 2024 18:13:32 +0700
Subject: [PATCH] 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    |  6 ++++-
 web/screens/LocalServer/index.tsx | 40 ++++++++++++++++++-------------
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/core/src/node/helper/config.ts b/core/src/node/helper/config.ts
index 40462abf1..ee9a1f856 100644
--- a/core/src/node/helper/config.ts
+++ b/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,
   }
 }
diff --git a/web/screens/LocalServer/index.tsx b/web/screens/LocalServer/index.tsx
index 420979d71..609de8b31 100644
--- a/web/screens/LocalServer/index.tsx
+++ b/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')
-            .length !== 0 && (
+          {modelSettings.length !== 0 && (
             <div className="mt-4">
               <CardSidebar title="Model Parameters" asChild>
                 <div className="px-2 py-4">
-                  <ModelSetting componentProps={componentDataEngineSetting} />
-                  {/* <SettingComponentBuilder
-                    enabled={!serverEnabled}
-                    componentProps={componentDataEngineSetting}
-                    onValueUpdated={function (
-                      key: string,
-                      value: string | number | boolean
-                    ): void {
-                      throw new Error('Function not implemented.')
-                    }}
-                  /> */}
+                  <ModelSetting componentProps={modelSettings} />
                 </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>