chore: add chat completion field form add remote engine

janhq · Jan 15, 2025 · dac93e0 · dac93e0
1 parent 58bb1b4
commit dac93e0
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 4 deletions.
diff --git a/web/screens/Settings/Engines/ModalAddRemoteEngine.tsx b/web/screens/Settings/Engines/ModalAddRemoteEngine.tsx
@@ -11,8 +11,15 @@ import { addRemoteEngine, useGetEngines } from '@/hooks/useEngineManagement'
 
 const engineSchema = z.object({
   engineName: z.string().min(1, 'Engine name is required'),
-  modelListUrl: z.string().url('Enter a valid Model List URL'),
+  modelListUrl: z
+    .string()
+    .url('Enter a valid Model List URL')
+    .or(z.literal('')),
   headerTemplate: z.string().optional(),
+  chatCmpletionsUrl: z
+    .string()
+    .url('Enter a valid Model List URL')
+    .or(z.literal('')),
   apiKey: z.string().optional(),
   requestFormat: z.string().optional(),
   responseFormat: z.string().optional(),
@@ -29,7 +36,7 @@ const ModalAddRemoteEngine = () => {
     resolver: zodResolver(engineSchema),
     defaultValues: {
       engineName: '',
-      apiUrl: '',
+      chatCmpletionsUrl: '',
       modelListUrl: '',
       headerTemplate: '',
       apiKey: '',
@@ -49,6 +56,7 @@ const ModalAddRemoteEngine = () => {
         transform_req: {
           chat_completions: {
             template: data.requestFormat,
+            url: data.chatCmpletionsUrl,
           },
         },
         transform_resp: {
@@ -112,6 +120,21 @@ const ModalAddRemoteEngine = () => {
               )}
             </div>
 
+            <div className="space-y-2">
+              <label htmlFor="chatCmpletionsUrl" className="font-semibold">
+                {renderLabel('Chat Completion URL', false)}
+              </label>
+              <Input
+                placeholder="Enter your chat completion URL."
+                {...register('chatCmpletionsUrl')}
+              />
+              {errors.chatCmpletionsUrl && (
+                <p className="text-sm text-red-500">
+                  {errors.chatCmpletionsUrl.message}
+                </p>
+              )}
+            </div>
+
             <div className="space-y-2">
               <label htmlFor="modelListUrl" className="font-semibold">
                 {renderLabel(

diff --git a/web/screens/Settings/Engines/RemoteEngineSettings.tsx b/web/screens/Settings/Engines/RemoteEngineSettings.tsx
@@ -17,12 +17,13 @@ import { ScrollArea, Input, TextArea } from '@janhq/joi'
 import { useAtomValue } from 'jotai'
 
 import { set } from 'lodash'
-import { ChevronRight } from 'lucide-react'
+import { ChevronDown, ChevronRight } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 
 import { updateEngine, useGetEngines } from '@/hooks/useEngineManagement'
 
 import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
+import { getAPIKeyInstructionURL, getTitleByEngine } from '@/utils/modelEngine'
 
 const RemoteEngineSettings = ({
   engine: name,
@@ -124,6 +125,19 @@ const RemoteEngineSettings = ({
                   <h6 className="line-clamp-1 font-semibold">API Key</h6>
                   <p className="mt-1 text-[hsla(var(--text-secondary))]">
                     Enter your authentication key to activate this engine.
+                    {engine.engine &&
+                      getAPIKeyInstructionURL(engine.engine) && (
+                        <span>
+                          Get your API key from{' '}
+                          <a
+                            target="_blank"
+                            href={getAPIKeyInstructionURL(engine.engine)}
+                            className="text-[hsla(var(--app-link))]"
+                          >
+                            {getTitleByEngine(engine.engine)} API Dashboard.
+                          </a>
+                        </span>
+                      )}
                   </p>
                 </div>
                 <div className="w-full">
@@ -221,7 +235,11 @@ const RemoteEngineSettings = ({
         >
           <span>Advance Settings</span>
           <span>
-            <ChevronRight size={14} className="ml-1" />
+            {isActiveAdvanceSetting ? (
+              <ChevronDown size={14} className="ml-1" />
+            ) : (
+              <ChevronRight size={14} className="ml-1" />
+            )}
           </span>
         </p>
       </div>

diff --git a/web/utils/modelEngine.ts b/web/utils/modelEngine.ts
@@ -33,6 +33,29 @@ export const getLogoEngine = (engine: InferenceEngine) => {
   }
 }
 
+export const getAPIKeyInstructionURL = (engine: InferenceEngine) => {
+  switch (engine) {
+    case InferenceEngine.anthropic:
+      return 'https://console.anthropic.com/settings/keys'
+    case InferenceEngine.cohere:
+      return 'https://dashboard.cohere.com/api-keys'
+    case InferenceEngine.groq:
+      return 'https://console.groq.com/keys'
+    case InferenceEngine.martian:
+      return 'https://withmartian.com/dashboard'
+    case InferenceEngine.mistral:
+      return 'https://console.mistral.ai/api-keys'
+    case InferenceEngine.nvidia:
+      return 'https://org.ngc.nvidia.com/setup/personal-keys'
+    case InferenceEngine.openai:
+      return 'https://platform.openai.com/account/api-keys'
+    case InferenceEngine.openrouter:
+      return 'https://openrouter.ai/keys'
+    default:
+      return undefined
+  }
+}
+
 /**
  * Check whether the engine is conform to LocalOAIEngine
  * @param engine