From 089e311bfd846fddcd1600e86d0f344652541f25 Mon Sep 17 00:00:00 2001
From: GenkaOk <2690324+GenkaOk@users.noreply.github.com>
Date: Thu, 4 Apr 2024 15:45:45 +0300
Subject: [PATCH] Add API prefix settings (#2528)

Co-authored-by: Van Pham <64197333+Van-QA@users.noreply.github.com>
---
 core/src/node/api/processors/app.ts |  1 +
 server/index.ts                     |  3 +-
 web/helpers/atoms/ApiServer.atom.ts |  1 +
 web/screens/LocalServer/index.tsx   | 48 ++++++++++++++++++++++++++++-
 4 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/core/src/node/api/processors/app.ts b/core/src/node/api/processors/app.ts
index c62b5011d..28c5b7f58 100644
--- a/core/src/node/api/processors/app.ts
+++ b/core/src/node/api/processors/app.ts
@@ -83,6 +83,7 @@ export class App implements Processor {
       isVerboseEnabled: args?.isVerboseEnabled,
       schemaPath: join(await appResourcePath(), 'docs', 'openapi', 'jan.yaml'),
       baseDir: join(await appResourcePath(), 'docs', 'openapi'),
+      prefix: args?.prefix,
     })
   }
 
diff --git a/server/index.ts b/server/index.ts
index 7e02847f2..1afd73419 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -39,6 +39,7 @@ export interface ServerConfig {
   isVerboseEnabled?: boolean
   schemaPath?: string
   baseDir?: string
+  prefix?: string
   storageAdataper?: any
 }
 
@@ -119,7 +120,7 @@ export const startServer = async (configs?: ServerConfig): Promise<boolean> => {
       server.addHook('preHandler', configs.storageAdataper)
 
     // Register API routes
-    await server.register(v1Router, { prefix: '/v1' })
+    await server.register(v1Router, { prefix: configs?.prefix ?? '/v1' })
     // Start listening for requests
     await server
       .listen({
diff --git a/web/helpers/atoms/ApiServer.atom.ts b/web/helpers/atoms/ApiServer.atom.ts
index 2ccd2de23..3759af90e 100644
--- a/web/helpers/atoms/ApiServer.atom.ts
+++ b/web/helpers/atoms/ApiServer.atom.ts
@@ -4,6 +4,7 @@ export const hostOptions = ['127.0.0.1', '0.0.0.0']
 
 export const apiServerPortAtom = atomWithStorage('apiServerPort', '1337')
 export const apiServerHostAtom = atomWithStorage('apiServerHost', '127.0.0.1')
+export const apiServerPrefix = atomWithStorage('apiServerPrefix', '/v1')
 
 export const apiServerCorsEnabledAtom = atomWithStorage(
   'apiServerCorsEnabled',
diff --git a/web/screens/LocalServer/index.tsx b/web/screens/LocalServer/index.tsx
index 0ee28d4b7..420979d71 100644
--- a/web/screens/LocalServer/index.tsx
+++ b/web/screens/LocalServer/index.tsx
@@ -56,6 +56,7 @@ import {
   apiServerCorsEnabledAtom,
   apiServerHostAtom,
   apiServerPortAtom,
+  apiServerPrefix,
   apiServerVerboseLogEnabledAtom,
   hostOptions,
 } from '@/helpers/atoms/ApiServer.atom'
@@ -63,6 +64,7 @@ import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
 
 const LocalServerScreen = () => {
   const [errorRangePort, setErrorRangePort] = useState(false)
+  const [errorPrefix, setErrorPrefix] = useState(false)
   const [serverEnabled, setServerEnabled] = useAtom(serverEnabledAtom)
   const showRightSideBar = useAtomValue(showRightSideBarAtom)
   const setModalTroubleShooting = useSetAtom(modalTroubleShootingAtom)
@@ -80,6 +82,7 @@ const LocalServerScreen = () => {
   )
   const [host, setHost] = useAtom(apiServerHostAtom)
   const [port, setPort] = useAtom(apiServerPortAtom)
+  const [prefix, setPrefix] = useAtom(apiServerPrefix)
   const [loadModelError, setLoadModelError] = useAtom(loadModelErrorAtom)
 
   const FIRST_TIME_VISIT_API_SERVER = 'firstTimeVisitAPIServer'
@@ -95,6 +98,14 @@ const LocalServerScreen = () => {
     [setPort]
   )
 
+  const handleChangePrefix = useCallback(
+    (value: string) => {
+      setErrorPrefix(!value.length || !value.startsWith('/'))
+      setPrefix(value)
+    },
+    [setPrefix]
+  )
+
   useEffect(() => {
     if (localStorage.getItem(FIRST_TIME_VISIT_API_SERVER) == null) {
       setFirstTimeVisitAPIServer(true)
@@ -105,12 +116,17 @@ const LocalServerScreen = () => {
     handleChangePort(port)
   }, [handleChangePort, port])
 
+  useEffect(() => {
+    handleChangePrefix(prefix)
+  }, [handleChangePrefix, prefix])
+
   const onStartServerClick = async () => {
     if (selectedModel == null) return
     try {
       const isStarted = await window.core?.api?.startServer({
         host,
         port,
+        prefix,
         isCorsEnabled,
         isVerboseEnabled,
       })
@@ -159,7 +175,12 @@ const LocalServerScreen = () => {
             <Button
               block
               themes={serverEnabled ? 'danger' : 'primary'}
-              disabled={stateModel.loading || errorRangePort || !selectedModel}
+              disabled={
+                stateModel.loading ||
+                errorRangePort ||
+                errorPrefix ||
+                !selectedModel
+              }
               onClick={onToggleServer}
             >
               {serverEnabled ? 'Stop' : 'Start'} Server
@@ -225,6 +246,31 @@ const LocalServerScreen = () => {
                   <p className="mt-2 text-xs text-danger">{`The port range should be from 0 to 65536`}</p>
                 )}
               </div>
+              <div>
+                <label
+                  id="prefix"
+                  className="mb-2 inline-flex items-start gap-x-2 font-bold text-zinc-500 dark:text-gray-300"
+                >
+                  API Prefix
+                </label>
+                <div className="flex items-center justify-between">
+                  <Input
+                    className={twMerge(
+                      'w-full flex-shrink-0',
+                      errorPrefix && 'border-danger'
+                    )}
+                    type="text"
+                    value={prefix}
+                    onChange={(e) => {
+                      handleChangePrefix(e.target.value)
+                    }}
+                    disabled={serverEnabled}
+                  />
+                </div>
+                {errorPrefix && (
+                  <p className="mt-2 text-xs text-danger">{`Prefix should start with /`}</p>
+                )}
+              </div>
               <div>
                 <label
                   id="cors"