feat: add base path to resources (#17655)

Co-authored-by: fhliu4 <fhliu4@iflytek.com>

web/app/components/app/app-publisher/index.tsx

@@ -24,6 +24,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { basePath } from '@/utils/var'
 import { fetchInstalledAppList } from '@/service/explore'
 import EmbeddedModal from '@/app/components/app/overview/embedded'
 import { useStore as useAppStore } from '@/app/components/app/store'
@@ -75,7 +76,7 @@ const AppPublisher = ({
   const appDetail = useAppStore(state => state.appDetail)
   const { app_base_url: appBaseURL = '', access_token: accessToken = '' } = appDetail?.site ?? {}
   const appMode = (appDetail?.mode !== 'completion' && appDetail?.mode !== 'workflow') ? 'chat' : appDetail.mode
-  const appURL = `${appBaseURL}/${appMode}/${accessToken}`
+  const appURL = `${appBaseURL}/${basePath}/${appMode}/${accessToken}`
   const isChatApp = ['chat', 'agent-chat', 'completion'].includes(appDetail?.mode || '')
 
   const language = useGetLanguage()
@@ -120,7 +121,7 @@ const AppPublisher = ({
     try {
       const { installed_apps }: any = await fetchInstalledAppList(appDetail?.id) || {}
       if (installed_apps?.length > 0)
-        window.open(`/explore/installed/${installed_apps[0].id}`, '_blank')
+        window.open(`${basePath}/explore/installed/${installed_apps[0].id}`, '_blank')
       else
         throw new Error('No app found in Explore')
     }

web/app/components/app/configuration/index.tsx

@@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import useSWR from 'swr'
+import { basePath } from '@/utils/var'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { usePathname } from 'next/navigation'
@@ -503,6 +504,12 @@ const Configuration: FC = () => {
   useEffect(() => {
     (async () => {
       const collectionList = await fetchCollectionList()
+      if (basePath) {
+        collectionList.forEach((item) => {
+          if (typeof item.icon == 'string' && !item.icon.includes(basePath))
+            item.icon = `${basePath}${item.icon}`
+        })
+      }
       setCollectionList(collectionList)
       fetchAppDetail({ url: '/apps', id: appId }).then(async (res: any) => {
         setMode(res.mode)

web/app/components/app/create-app-modal/index.tsx

@@ -14,6 +14,7 @@ import type { AppIconSelection } from '../../base/app-icon-picker'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import cn from '@/utils/classnames'
+import { basePath } from '@/utils/var'
 import AppsContext, { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { ToastContext } from '@/app/components/base/toast'
@@ -352,11 +353,11 @@ function AppScreenShot({ mode, show }: { mode: AppMode; show: boolean }) {
     'workflow': 'Workflow',
   }
   return <picture>
-    <source media="(resolution: 1x)" srcSet={`/screenshots/${theme}/${modeToImageMap[mode]}.png`} />
-    <source media="(resolution: 2x)" srcSet={`/screenshots/${theme}/${modeToImageMap[mode]}@2x.png`} />
-    <source media="(resolution: 3x)" srcSet={`/screenshots/${theme}/${modeToImageMap[mode]}@3x.png`} />
+    <source media="(resolution: 1x)" srcSet={`${basePath}/screenshots/${theme}/${modeToImageMap[mode]}.png`} />
+    <source media="(resolution: 2x)" srcSet={`${basePath}/screenshots/${theme}/${modeToImageMap[mode]}@2x.png`} />
+    <source media="(resolution: 3x)" srcSet={`${basePath}/screenshots/${theme}/${modeToImageMap[mode]}@3x.png`} />
     <Image className={show ? '' : 'hidden'}
-      src={`/screenshots/${theme}/${modeToImageMap[mode]}.png`}
+      src={`${basePath}/screenshots/${theme}/${modeToImageMap[mode]}.png`}
       alt='App Screen Shot'
       width={664} height={448} />
   </picture>

web/app/components/app/log/index.tsx

@@ -7,6 +7,7 @@ import { usePathname } from 'next/navigation'
 import { useDebounce } from 'ahooks'
 import { omit } from 'lodash-es'
 import dayjs from 'dayjs'
+import { basePath } from '@/utils/var'
 import { Trans, useTranslation } from 'react-i18next'
 import List from './list'
 import Filter, { TIME_PERIOD_MAPPING } from './filter'
@@ -109,7 +110,7 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
           ? <Loading type='app' />
           : total > 0
             ? <List logs={isChatMode ? chatConversations : completionConversations} appDetail={appDetail} onRefresh={isChatMode ? mutateChatList : mutateCompletionList} />
-            : <EmptyElement appUrl={`${appDetail.site.app_base_url}/${getWebAppType(appDetail.mode)}/${appDetail.site.access_token}`} />
+            : <EmptyElement appUrl={`${appDetail.site.app_base_url}${basePath}/${getWebAppType(appDetail.mode)}/${appDetail.site.access_token}`} />
         }
         {/* Show Pagination only if the total is more than the limit */}
         {(total && total > APP_PAGE_LIMIT)

web/app/components/app/overview/appCard.tsx

@@ -17,6 +17,7 @@ import type { ConfigParams } from './settings'
 import Tooltip from '@/app/components/base/tooltip'
 import AppBasic from '@/app/components/app-sidebar/basic'
 import { asyncRunSafe, randomString } from '@/utils'
+import { basePath } from '@/utils/var'
 import Button from '@/app/components/base/button'
 import Switch from '@/app/components/base/switch'
 import Divider from '@/app/components/base/divider'
@@ -88,7 +89,7 @@ function AppCard({
   const runningStatus = isApp ? appInfo.enable_site : appInfo.enable_api
   const { app_base_url, access_token } = appInfo.site ?? {}
   const appMode = (appInfo.mode !== 'completion' && appInfo.mode !== 'workflow') ? 'chat' : appInfo.mode
-  const appUrl = `${app_base_url}/${appMode}/${access_token}`
+  const appUrl = `${app_base_url}${basePath}/${appMode}/${access_token}`
   const apiUrl = appInfo?.api_base_url
 
   const genClickFuncByName = (opName: string) => {

web/app/components/app/overview/embedded/index.tsx

@@ -13,6 +13,7 @@ import { IS_CE_EDITION } from '@/config'
 import type { SiteInfo } from '@/models/share'
 import { useThemeContext } from '@/app/components/base/chat/embedded-chatbot/theme/theme-context'
 import ActionButton from '@/app/components/base/action-button'
+import { basePath } from '@/utils/var'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -28,7 +29,7 @@ const OPTION_MAP = {
   iframe: {
     getContent: (url: string, token: string) =>
       `<iframe
- src="${url}/chatbot/${token}"
+ src="${url}${basePath}/chatbot/${token}"
  style="width: 100%; height: 100%; min-height: 700px"
  frameborder="0"
  allow="microphone">
@@ -41,17 +42,17 @@ const OPTION_MAP = {
   token: '${token}'${isTestEnv
         ? `,
   isDev: true`
-        : ''}${IS_CE_EDITION
-          ? `,
-  baseUrl: '${url}'`
-          : ''},
+    : ''}${IS_CE_EDITION
+    ? `,
+  baseUrl: '${url}${basePath}'`
+    : ''},
   systemVariables: {
     // user_id: 'YOU CAN DEFINE USER ID HERE',
   },
  }
 </script>
 <script
- src="${url}/embed.min.js"
+ src="${url}${basePath}/embed.min.js"
  id="${token}"
  defer>
 </script>
@@ -66,7 +67,7 @@ const OPTION_MAP = {
 </style>`,
   },
   chromePlugin: {
-    getContent: (url: string, token: string) => `ChatBot URL: ${url}/chatbot/${token}`,
+    getContent: (url: string, token: string) => `ChatBot URL: ${url}${basePath}/chatbot/${token}`,
   },
 }
 const prefixEmbedded = 'appOverview.overview.appInfo.embedded'

web/app/components/app/workflow-log/index.tsx

@@ -11,6 +11,7 @@ import timezone from 'dayjs/plugin/timezone'
 import { Trans, useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import List from './list'
+import { basePath } from '@/utils/var'
 import Filter, { TIME_PERIOD_MAPPING } from './filter'
 import Pagination from '@/app/components/base/pagination'
 import Loading from '@/app/components/base/loading'
@@ -100,7 +101,7 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
           ? <Loading type='app' />
           : total > 0
             ? <List logs={workflowLogs} appDetail={appDetail} onRefresh={mutate} />
-            : <EmptyElement appUrl={`${appDetail.site.app_base_url}/${getWebAppType(appDetail.mode)}/${appDetail.site.access_token}`} />
+            : <EmptyElement appUrl={`${appDetail.site.app_base_url}${basePath}/${getWebAppType(appDetail.mode)}/${appDetail.site.access_token}`} />
         }
         {/* Show Pagination only if the total is more than the limit */}
         {(total && total > APP_PAGE_LIMIT)

web/app/components/base/logo/logo-embedded-chat-header.tsx

@@ -1,5 +1,6 @@
 import classNames from '@/utils/classnames'
 import type { FC } from 'react'
+import { basePath } from '@/utils/var'
 
 type LogoEmbeddedChatHeaderProps = {
   className?: string
@@ -13,7 +14,7 @@ const LogoEmbeddedChatHeader: FC<LogoEmbeddedChatHeaderProps> = ({
     <source media="(resolution: 2x)" srcSet='/logo/logo-embedded-chat-header@2x.png' />
     <source media="(resolution: 3x)" srcSet='/logo/logo-embedded-chat-header@3x.png' />
     <img
-      src='/logo/logo-embedded-chat-header.png'
+      src={`${basePath}/logo/logo-embedded-chat-header.png`}
       alt='logo'
       className={classNames('block h-6 w-auto', className)}
     />

web/app/components/base/logo/logo-site.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { basePath } from '@/utils/var'
 import classNames from '@/utils/classnames'
 
 type LogoSiteProps = {
@@ -11,7 +12,7 @@ const LogoSite: FC<LogoSiteProps> = ({
 }) => {
   return (
     <img
-      src={'/logo/logo.png'}
+      src={`${basePath}/logo/logo.png`}
       className={classNames('block w-[22.651px] h-[24.5px]', className)}
       alt='logo'
     />

web/app/components/header/account-dropdown/workplace-selector/index.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
 import { RiArrowDownSLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
+import { basePath } from '@/utils/var'
 import PlanBadge from '@/app/components/header/plan-badge'
 import { switchWorkspace } from '@/service/common'
 import { useWorkspacesContext } from '@/context/workspace-context'
@@ -22,7 +23,7 @@ const WorkplaceSelector = () => {
         return
       await switchWorkspace({ url: '/workspaces/switch', body: { tenant_id } })
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
-      location.assign(`${location.origin}`)
+      location.assign(`${location.origin}${basePath}`)
     }
     catch {
       notify({ type: 'error', message: t('common.provider.saveFailed') })

web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx

@@ -1,5 +1,6 @@
 'use client'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { basePath } from '@/utils/var'
 import { t } from 'i18next'
 import copy from 'copy-to-clipboard'
 import s from './index.module.css'
@@ -18,7 +19,7 @@ const InvitationLink = ({
   const selector = useRef(`invite-link-${randomString(4)}`)
 
   const copyHandle = useCallback(() => {
-    copy(`${!value.url.startsWith('http') ? window.location.origin : ''}${value.url}`)
+    copy(`${!value.url.startsWith('http') ? window.location.origin : ''}${basePath}${value.url}`)
     setIsCopied(true)
   }, [value])
 
@@ -41,7 +42,7 @@ const InvitationLink = ({
           <Tooltip
             popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
           >
-            <div className='r-0 absolute left-0 top-0 w-full cursor-pointer truncate pl-2 pr-2' onClick={copyHandle}>{value.url}</div>
+            <div className='r-0 absolute left-0 top-0 w-full cursor-pointer truncate pl-2 pr-2' onClick={copyHandle}>{basePath + value.url}</div>
           </Tooltip>
         </div>
         <div className="h-4 shrink-0 border bg-divider-regular" />

web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx

@@ -3,6 +3,7 @@ import type {
   Model,
   ModelProvider,
 } from '../declarations'
+import { basePath } from '@/utils/var'
 import { useLanguage } from '../hooks'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import { OpenaiBlue, OpenaiViolet } from '@/app/components/base/icons/src/public/llm'
@@ -30,7 +31,7 @@ const ModelIcon: FC<ModelIconProps> = ({
   if (provider?.icon_small) {
     return (
       <div className={cn('flex h-5 w-5 items-center justify-center', isDeprecated && 'opacity-50', className)}>
-        <img alt='model-icon' src={renderI18nObject(provider.icon_small, language)}/>
+        <img alt='model-icon' src={basePath + renderI18nObject(provider.icon_small, language)}/>
       </div>
     )
   }

web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx

@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import type { ModelProvider } from '../declarations'
+import { basePath } from '@/utils/var'
 import { useLanguage } from '../hooks'
 import { Openai } from '@/app/components/base/icons/src/vender/other'
 import { AnthropicDark, AnthropicLight } from '@/app/components/base/icons/src/public/llm'
@@ -40,7 +41,7 @@ const ProviderIcon: FC<ProviderIconProps> = ({
     <div className={cn('inline-flex items-center gap-2', className)}>
       <img
         alt='provider-icon'
-        src={renderI18nObject(provider.icon_small, language)}
+        src={basePath + renderI18nObject(provider.icon_small, language)}
         className='h-6 w-6'
       />
       <div className='system-md-semibold text-text-primary'>

web/app/components/tools/add-tool-modal/index.tsx

@@ -14,6 +14,7 @@ import Type from './type'
 import Category from './category'
 import Tools from './tools'
 import cn from '@/utils/classnames'
+import { basePath } from '@/utils/var'
 import I18n from '@/context/i18n'
 import Drawer from '@/app/components/base/drawer'
 import Button from '@/app/components/base/button'
@@ -57,6 +58,12 @@ const AddToolModal: FC<Props> = ({
   const getAllTools = async () => {
     setListLoading(true)
     const buildInTools = await fetchAllBuiltInTools()
+    if (basePath) {
+      buildInTools.forEach((item) => {
+        if (typeof item.icon == 'string' && !item.icon.includes(basePath))
+          item.icon = `${basePath}${item.icon}`
+      })
+    }
     const customTools = await fetchAllCustomTools()
     const workflowTools = await fetchAllWorkflowTools()
     const mergedToolList = [

web/app/components/tools/add-tool-modal/tools.tsx

@@ -2,6 +2,7 @@ import {
   memo,
   useCallback,
 } from 'react'
+import { basePath } from '@/utils/var'
 import { useTranslation } from 'react-i18next'
 import {
   RiAddLine,
@@ -53,7 +54,7 @@ const Blocks = ({
       >
         <div className='flex h-[22px] w-full items-center justify-between pl-3 pr-1 text-xs font-medium text-gray-500'>
           {toolWithProvider.label[language]}
-          <a className='hidden cursor-pointer items-center group-hover:flex' href={`/tools?category=${toolWithProvider.type}`} target='_blank'>{t('tools.addToolModal.manageInTools')}<ArrowUpRight className='ml-0.5 h-3 w-3' /></a>
+          <a className='hidden cursor-pointer items-center group-hover:flex' href={`${basePath}/tools?category=${toolWithProvider.type}`} target='_blank'>{t('tools.addToolModal.manageInTools')}<ArrowUpRight className='ml-0.5 h-3 w-3' /></a>
         </div>
         {list.map((tool) => {
           const labelContent = (() => {

web/app/components/tools/provider/detail.tsx

@@ -6,6 +6,7 @@ import {
   RiCloseLine,
 } from '@remixicon/react'
 import { AuthHeaderPrefix, AuthType, CollectionType } from '../types'
+import { basePath } from '@/utils/var'
 import type { Collection, CustomCollectionBackend, Tool, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '../types'
 import ToolItem from './tool-item'
 import cn from '@/utils/classnames'
@@ -276,7 +277,7 @@ const ProviderDetail = ({
                 variant='primary'
                 className={cn('my-3 w-[183px] shrink-0')}
               >
-                <a className='flex items-center' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
+                <a className='flex items-center' href={`${basePath}/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
                   <div className='system-sm-medium'>{t('tools.openInStudio')}</div>
                   <LinkExternal02 className='ml-1 h-4 w-4' />
                 </a>

web/app/components/workflow/hooks/use-workflow.ts

@@ -59,6 +59,7 @@ import { CollectionType } from '@/app/components/tools/types'
 import { CUSTOM_ITERATION_START_NODE } from '@/app/components/workflow/nodes/iteration-start/constants'
 import { CUSTOM_LOOP_START_NODE } from '@/app/components/workflow/nodes/loop-start/constants'
 import { useWorkflowConfig } from '@/service/use-workflow'
+import { basePath } from '@/utils/var'
 import { canFindTool } from '@/utils'
 
 export const useIsChatMode = () => {
@@ -446,6 +447,12 @@ export const useFetchToolsData = () => {
     if (type === 'builtin') {
       const buildInTools = await fetchAllBuiltInTools()
 
+      if (basePath) {
+        buildInTools.forEach((item) => {
+          if (typeof item.icon == 'string' && !item.icon.includes(basePath))
+            item.icon = `${basePath}${item.icon}`
+        })
+      }
       workflowStore.setState({
         buildInTools: buildInTools || [],
       })