diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index cd0237ab6f..22b0860139 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -487,8 +487,10 @@ const StepTwo = ({
                       <input
                         type="number"
                         className={s.input}
-                        placeholder={t('datasetCreation.stepTwo.separatorPlaceholder') || ''} value={max}
-                        onChange={e => setMax(Number(e.target.value))}
+                        placeholder={t('datasetCreation.stepTwo.separatorPlaceholder') || ''}
+                        value={max}
+                        min={1}
+                        onChange={e => setMax(parseInt(e.target.value.replace(/^0+/, ''), 10))}
                       />
                     </div>
                   </div>
@@ -497,7 +499,7 @@ const StepTwo = ({
                       <div className={s.label}>{t('datasetCreation.stepTwo.rules')}</div>
                       {rules.map(rule => (
                         <div key={rule.id} className={s.ruleItem}>
-                          <input id={rule.id} type="checkbox" defaultChecked={rule.enabled} onChange={() => ruleChangeHandle(rule.id)} className="w-4 h-4 rounded border-gray-300 text-blue-700 focus:ring-blue-700" />
+                          <input id={rule.id} type="checkbox" checked={rule.enabled} onChange={() => ruleChangeHandle(rule.id)} className="w-4 h-4 rounded border-gray-300 text-blue-700 focus:ring-blue-700" />
                           <label htmlFor={rule.id} className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
                         </div>
                       ))}
diff --git a/web/hooks/use-breakpoints.ts b/web/hooks/use-breakpoints.ts
index 1aab56a9fd..99c2b75d67 100644
--- a/web/hooks/use-breakpoints.ts
+++ b/web/hooks/use-breakpoints.ts
@@ -8,20 +8,22 @@ export enum MediaType {
 }
 
 const useBreakpoints = () => {
-  const [width, setWidth] = React.useState(globalThis.innerWidth);
+  const [width, setWidth] = React.useState(globalThis.innerWidth)
   const media = (() => {
-    if (width <= 640) return MediaType.mobile;
-    if (width <= 768) return MediaType.tablet;
-    return MediaType.pc;
-  })();
+    if (width <= 640)
+      return MediaType.mobile
+    if (width <= 768)
+      return MediaType.tablet
+    return MediaType.pc
+  })()
 
   React.useEffect(() => {
-    const handleWindowResize = () => setWidth(window.innerWidth);
-    window.addEventListener("resize", handleWindowResize);
-    return () => window.removeEventListener("resize", handleWindowResize);
-  }, []);
+    const handleWindowResize = () => setWidth(window.innerWidth)
+    window.addEventListener('resize', handleWindowResize)
+    return () => window.removeEventListener('resize', handleWindowResize)
+  }, [])
 
-  return media;
+  return media
 }
 
-export default useBreakpoints
\ No newline at end of file
+export default useBreakpoints
diff --git a/web/service/apps.ts b/web/service/apps.ts
index e881a1e78b..a7d9f9817b 100644
--- a/web/service/apps.ts
+++ b/web/service/apps.ts
@@ -5,91 +5,91 @@ import type { CommonResponse } from '@/models/common'
 import type { AppMode, ModelConfig } from '@/types/app'
 
 export const fetchAppList: Fetcher<AppListResponse, { url: string; params?: Record<string, any> }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<AppListResponse>
+  return get<AppListResponse>(url, { params })
 }
 
 export const fetchAppDetail: Fetcher<AppDetailResponse, { url: string; id: string }> = ({ url, id }) => {
-  return get(`${url}/${id}`) as Promise<AppDetailResponse>
+  return get<AppDetailResponse>(`${url}/${id}`)
 }
 
 export const fetchAppTemplates: Fetcher<AppTemplatesResponse, { url: string }> = ({ url }) => {
-  return get(url) as Promise<AppTemplatesResponse>
+  return get<AppTemplatesResponse>(url)
 }
 
 export const createApp: Fetcher<AppDetailResponse, { name: string; icon: string; icon_background: string; mode: AppMode; config?: ModelConfig }> = ({ name, icon, icon_background, mode, config }) => {
-  return post('apps', { body: { name, icon, icon_background, mode, model_config: config } }) as Promise<AppDetailResponse>
+  return post<AppDetailResponse>('apps', { body: { name, icon, icon_background, mode, model_config: config } })
 }
 
 export const deleteApp: Fetcher<CommonResponse, string> = (appID) => {
-  return del(`apps/${appID}`) as Promise<CommonResponse>
+  return del<CommonResponse>(`apps/${appID}`)
 }
 
 export const updateAppSiteStatus: Fetcher<AppDetailResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<AppDetailResponse>
+  return post<AppDetailResponse>(url, { body })
 }
 
 export const updateAppApiStatus: Fetcher<AppDetailResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<AppDetailResponse>
+  return post<AppDetailResponse>(url, { body })
 }
 
 // path: /apps/{appId}/rate-limit
 export const updateAppRateLimit: Fetcher<AppDetailResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<AppDetailResponse>
+  return post<AppDetailResponse>(url, { body })
 }
 
 export const updateAppSiteAccessToken: Fetcher<UpdateAppSiteCodeResponse, { url: string }> = ({ url }) => {
-  return post(url) as Promise<UpdateAppSiteCodeResponse>
+  return post<UpdateAppSiteCodeResponse>(url)
 }
 
 export const updateAppSiteConfig: Fetcher<AppDetailResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<AppDetailResponse>
+  return post<AppDetailResponse>(url, { body })
 }
 
 export const getAppDailyConversations: Fetcher<AppDailyConversationsResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<AppDailyConversationsResponse>
+  return get<AppDailyConversationsResponse>(url, { params })
 }
 
 export const getAppStatistics: Fetcher<AppStatisticsResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<AppStatisticsResponse>
+  return get<AppStatisticsResponse>(url, { params })
 }
 
 export const getAppDailyEndUsers: Fetcher<AppDailyEndUsersResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<AppDailyEndUsersResponse>
+  return get<AppDailyEndUsersResponse>(url, { params })
 }
 
 export const getAppTokenCosts: Fetcher<AppTokenCostsResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<AppTokenCostsResponse>
+  return get<AppTokenCostsResponse>(url, { params })
 }
 
 export const updateAppModelConfig: Fetcher<UpdateAppModelConfigResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<UpdateAppModelConfigResponse>
+  return post<UpdateAppModelConfigResponse>(url, { body })
 }
 
 // For temp testing
 export const fetchAppListNoMock: Fetcher<AppListResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, params) as Promise<AppListResponse>
+  return get<AppListResponse>(url, params)
 }
 
 export const fetchApiKeysList: Fetcher<ApikeysListResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, params) as Promise<ApikeysListResponse>
+  return get<ApikeysListResponse>(url, params)
 }
 
 export const delApikey: Fetcher<CommonResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return del(url, params) as Promise<CommonResponse>
+  return del<CommonResponse>(url, params)
 }
 
 export const createApikey: Fetcher<CreateApiKeyResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return post(url, body) as Promise<CreateApiKeyResponse>
+  return post<CreateApiKeyResponse>(url, body)
 }
 
 export const validateOpenAIKey: Fetcher<ValidateOpenAIKeyResponse, { url: string; body: { token: string } }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<ValidateOpenAIKeyResponse>
+  return post<ValidateOpenAIKeyResponse>(url, { body })
 }
 
 export const updateOpenAIKey: Fetcher<UpdateOpenAIKeyResponse, { url: string; body: { token: string } }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<UpdateOpenAIKeyResponse>
+  return post<UpdateOpenAIKeyResponse>(url, { body })
 }
 
 export const generationIntroduction: Fetcher<GenerationIntroductionResponse, { url: string; body: { prompt_template: string } }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<GenerationIntroductionResponse>
+  return post<GenerationIntroductionResponse>(url, { body })
 }
diff --git a/web/service/base.ts b/web/service/base.ts
index 9f461dba1c..00ce140d69 100644
--- a/web/service/base.ts
+++ b/web/service/base.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-new, prefer-promise-reject-errors */
 import { API_PREFIX, IS_CE_EDITION, PUBLIC_API_PREFIX } from '@/config'
 import Toast from '@/app/components/base/toast'
 import type { MessageEnd, ThoughtItem } from '@/app/components/app/chat/type'
@@ -50,6 +49,17 @@ type IOtherOptions = {
   getAbortController?: (abortController: AbortController) => void
 }
 
+type ResponseError = {
+  code: string
+  message: string
+  status: number
+}
+
+type FetchOptionType = Omit<RequestInit, 'body'> & {
+  params?: Record<string, any>
+  body?: BodyInit | Record<string, any> | null
+}
+
 function unicodeToChar(text: string) {
   if (!text)
     return ''
@@ -146,17 +156,17 @@ const handleStream = (response: any, onData: IOnData, onCompleted?: IOnCompleted
   read()
 }
 
-const baseFetch = (
+const baseFetch = <T>(
   url: string,
-  fetchOptions: any,
+  fetchOptions: FetchOptionType,
   {
     isPublicAPI = false,
     bodyStringify = true,
     needAllResponseContent,
     deleteContentType,
   }: IOtherOptions,
-) => {
-  const options = Object.assign({}, baseOptions, fetchOptions)
+): Promise<T> => {
+  const options: typeof baseOptions & FetchOptionType = Object.assign({}, baseOptions, fetchOptions)
   if (isPublicAPI) {
     const sharedToken = globalThis.location.pathname.split('/').slice(-1)[0]
     const accessToken = localStorage.getItem('token') || JSON.stringify({ [sharedToken]: '' })
@@ -209,27 +219,27 @@ const baseFetch = (
       }, TIME_OUT)
     }),
     new Promise((resolve, reject) => {
-      globalThis.fetch(urlWithPrefix, options)
-        .then((res: any) => {
+      globalThis.fetch(urlWithPrefix, options as RequestInit)
+        .then((res) => {
           const resClone = res.clone()
           // Error handler
-          if (!/^(2|3)\d{2}$/.test(res.status)) {
+          if (!/^(2|3)\d{2}$/.test(String(res.status))) {
             const bodyJson = res.json()
             switch (res.status) {
               case 401: {
                 if (isPublicAPI) {
                   Toast.notify({ type: 'error', message: 'Invalid token' })
-                  return bodyJson.then((data: any) => Promise.reject(data))
+                  return bodyJson.then((data: T) => Promise.reject(data))
                 }
                 const loginUrl = `${globalThis.location.origin}/signin`
                 if (IS_CE_EDITION) {
-                  bodyJson.then((data: any) => {
+                  bodyJson.then((data: ResponseError) => {
                     if (data.code === 'not_setup') {
                       globalThis.location.href = `${globalThis.location.origin}/install`
                     }
                     else {
                       if (location.pathname === '/signin') {
-                        bodyJson.then((data: any) => {
+                        bodyJson.then((data: ResponseError) => {
                           Toast.notify({ type: 'error', message: data.message })
                         })
                       }
@@ -238,26 +248,22 @@ const baseFetch = (
                       }
                     }
                   })
-                  return Promise.reject()
+                  return Promise.reject(Error('Unauthorized'))
                 }
                 globalThis.location.href = loginUrl
                 break
               }
               case 403:
-                new Promise(() => {
-                  bodyJson.then((data: any) => {
-                    Toast.notify({ type: 'error', message: data.message })
-                    if (data.code === 'already_setup')
-                      globalThis.location.href = `${globalThis.location.origin}/signin`
-                  })
+                bodyJson.then((data: ResponseError) => {
+                  Toast.notify({ type: 'error', message: data.message })
+                  if (data.code === 'already_setup')
+                    globalThis.location.href = `${globalThis.location.origin}/signin`
                 })
                 break
               // fall through
               default:
-                new Promise(() => {
-                  bodyJson.then((data: any) => {
-                    Toast.notify({ type: 'error', message: data.message })
-                  })
+                bodyJson.then((data: ResponseError) => {
+                  Toast.notify({ type: 'error', message: data.message })
                 })
             }
             return Promise.reject(resClone)
@@ -270,7 +276,7 @@ const baseFetch = (
           }
 
           // return data
-          const data = options.headers.get('Content-type') === ContentType.download ? res.blob() : res.json()
+          const data: Promise<T> = options.headers.get('Content-type') === ContentType.download ? res.blob() : res.json()
 
           resolve(needAllResponseContent ? resClone : data)
         })
@@ -279,7 +285,7 @@ const baseFetch = (
           reject(err)
         })
     }),
-  ])
+  ]) as Promise<T>
 }
 
 export const upload = (options: any): Promise<any> => {
@@ -315,7 +321,7 @@ export const upload = (options: any): Promise<any> => {
   })
 }
 
-export const ssePost = (url: string, fetchOptions: any, { isPublicAPI = false, onData, onCompleted, onThought, onMessageEnd, onError, getAbortController }: IOtherOptions) => {
+export const ssePost = (url: string, fetchOptions: FetchOptionType, { isPublicAPI = false, onData, onCompleted, onThought, onMessageEnd, onError, getAbortController }: IOtherOptions) => {
   const abortController = new AbortController()
 
   const options = Object.assign({}, baseOptions, {
@@ -336,14 +342,11 @@ export const ssePost = (url: string, fetchOptions: any, { isPublicAPI = false, o
   if (body)
     options.body = JSON.stringify(body)
 
-  globalThis.fetch(urlWithPrefix, options)
-    .then((res: any) => {
-      // debugger
-      if (!/^(2|3)\d{2}$/.test(res.status)) {
-        new Promise(() => {
-          res.json().then((data: any) => {
-            Toast.notify({ type: 'error', message: data.message || 'Server Error' })
-          })
+  globalThis.fetch(urlWithPrefix, options as RequestInit)
+    .then((res) => {
+      if (!/^(2|3)\d{2}$/.test(String(res.status))) {
+        res.json().then((data: any) => {
+          Toast.notify({ type: 'error', message: data.message || 'Server Error' })
         })
         onError?.('Server Error')
         return
@@ -365,47 +368,49 @@ export const ssePost = (url: string, fetchOptions: any, { isPublicAPI = false, o
     })
 }
 
-export const request = (url: string, options = {}, otherOptions?: IOtherOptions) => {
-  return baseFetch(url, options, otherOptions || {})
+// base request
+export const request = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return baseFetch<T>(url, options, otherOptions || {})
 }
 
-export const get = (url: string, options = {}, otherOptions?: IOtherOptions) => {
-  return request(url, Object.assign({}, options, { method: 'GET' }), otherOptions)
+// request methods
+export const get = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return request<T>(url, Object.assign({}, options, { method: 'GET' }), otherOptions)
 }
 
 // For public API
-export const getPublic = (url: string, options = {}, otherOptions?: IOtherOptions) => {
-  return get(url, options, { ...otherOptions, isPublicAPI: true })
+export const getPublic = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return get<T>(url, options, { ...otherOptions, isPublicAPI: true })
 }
 
-export const post = (url: string, options = {}, otherOptions?: IOtherOptions) => {
-  return request(url, Object.assign({}, options, { method: 'POST' }), otherOptions)
+export const post = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return request<T>(url, Object.assign({}, options, { method: 'POST' }), otherOptions)
 }
 
-export const postPublic = (url: string, options = {}, otherOptions?: IOtherOptions) => {
-  return post(url, options, { ...otherOptions, isPublicAPI: true })
+export const postPublic = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return post<T>(url, options, { ...otherOptions, isPublicAPI: true })
 }
 
-export const put = (url: string, options = {}, otherOptions?: IOtherOptions) => {
-  return request(url, Object.assign({}, options, { method: 'PUT' }), otherOptions)
+export const put = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return request<T>(url, Object.assign({}, options, { method: 'PUT' }), otherOptions)
 }
 
-export const putPublic = (url: string, options = {}, otherOptions?: IOtherOptions) => {
-  return put(url, options, { ...otherOptions, isPublicAPI: true })
+export const putPublic = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return put<T>(url, options, { ...otherOptions, isPublicAPI: true })
 }
 
-export const del = (url: string, options = {}, otherOptions?: IOtherOptions) => {
-  return request(url, Object.assign({}, options, { method: 'DELETE' }), otherOptions)
+export const del = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return request<T>(url, Object.assign({}, options, { method: 'DELETE' }), otherOptions)
 }
 
-export const delPublic = (url: string, options = {}, otherOptions?: IOtherOptions) => {
-  return del(url, options, { ...otherOptions, isPublicAPI: true })
+export const delPublic = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return del<T>(url, options, { ...otherOptions, isPublicAPI: true })
 }
 
-export const patch = (url: string, options = {}, otherOptions?: IOtherOptions) => {
-  return request(url, Object.assign({}, options, { method: 'PATCH' }), otherOptions)
+export const patch = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return request<T>(url, Object.assign({}, options, { method: 'PATCH' }), otherOptions)
 }
 
-export const patchPublic = (url: string, options = {}, otherOptions?: IOtherOptions) => {
-  return patch(url, options, { ...otherOptions, isPublicAPI: true })
+export const patchPublic = <T>(url: string, options = {}, otherOptions?: IOtherOptions) => {
+  return patch<T>(url, options, { ...otherOptions, isPublicAPI: true })
 }
diff --git a/web/service/common.ts b/web/service/common.ts
index 18bbc99167..49609657c3 100644
--- a/web/service/common.ts
+++ b/web/service/common.ts
@@ -16,173 +16,173 @@ import type {
 import type { BackendModel, ProviderMap } from '@/app/components/header/account-setting/model-page/declarations'
 
 export const login: Fetcher<CommonResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<CommonResponse>
+  return post<CommonResponse>(url, { body })
 }
 
 export const setup: Fetcher<CommonResponse, { body: Record<string, any> }> = ({ body }) => {
-  return post('/setup', { body }) as Promise<CommonResponse>
+  return post<CommonResponse>('/setup', { body })
 }
 
 export const fetchSetupStatus = () => {
-  return get('/setup') as Promise<SetupStatusResponse>
+  return get<SetupStatusResponse>('/setup')
 }
 
 export const fetchUserProfile: Fetcher<UserProfileOriginResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, params, { needAllResponseContent: true }) as Promise<UserProfileOriginResponse>
+  return get<UserProfileOriginResponse>(url, params, { needAllResponseContent: true })
 }
 
 export const updateUserProfile: Fetcher<CommonResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<CommonResponse>
+  return post<CommonResponse>(url, { body })
 }
 
 export const logout: Fetcher<CommonResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, params) as Promise<CommonResponse>
+  return get<CommonResponse>(url, params)
 }
 
 export const fetchLanggeniusVersion: Fetcher<LangGeniusVersionResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<LangGeniusVersionResponse>
+  return get<LangGeniusVersionResponse>(url, { params })
 }
 
 export const oauth: Fetcher<OauthResponse, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<OauthResponse>
+  return get<OauthResponse>(url, { params })
 }
 
 export const oneMoreStep: Fetcher<CommonResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<CommonResponse>
+  return post<CommonResponse>(url, { body })
 }
 
 export const fetchMembers: Fetcher<{ accounts: Member[] | null }, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<{ accounts: Member[] | null }>
+  return get<{ accounts: Member[] | null }>(url, { params })
 }
 
 export const fetchProviders: Fetcher<Provider[] | null, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<Provider[] | null>
+  return get<Provider[] | null>(url, { params })
 }
 
 export const validateProviderKey: Fetcher<ValidateOpenAIKeyResponse, { url: string; body: { token: string } }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<ValidateOpenAIKeyResponse>
+  return post<ValidateOpenAIKeyResponse>(url, { body })
 }
 export const updateProviderAIKey: Fetcher<UpdateOpenAIKeyResponse, { url: string; body: { token: string | ProviderAzureToken | ProviderAnthropicToken } }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<UpdateOpenAIKeyResponse>
+  return post<UpdateOpenAIKeyResponse>(url, { body })
 }
 
 export const fetchAccountIntegrates: Fetcher<{ data: AccountIntegrate[] | null }, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<{ data: AccountIntegrate[] | null }>
+  return get<{ data: AccountIntegrate[] | null }>(url, { params })
 }
 
 export const inviteMember: Fetcher<InvitationResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<InvitationResponse>
+  return post<InvitationResponse>(url, { body })
 }
 
 export const updateMemberRole: Fetcher<CommonResponse, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return put(url, { body }) as Promise<CommonResponse>
+  return put<CommonResponse>(url, { body })
 }
 
 export const deleteMemberOrCancelInvitation: Fetcher<CommonResponse, { url: string }> = ({ url }) => {
-  return del(url) as Promise<CommonResponse>
+  return del<CommonResponse>(url)
 }
 
 export const fetchFilePreview: Fetcher<{ content: string }, { fileID: string }> = ({ fileID }) => {
-  return get(`/files/${fileID}/preview`) as Promise<{ content: string }>
+  return get<{ content: string }>(`/files/${fileID}/preview`)
 }
 
 export const fetchCurrentWorkspace: Fetcher<ICurrentWorkspace, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<ICurrentWorkspace>
+  return get<ICurrentWorkspace>(url, { params })
 }
 
 export const fetchWorkspaces: Fetcher<{ workspaces: IWorkspace[] }, { url: string; params: Record<string, any> }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<{ workspaces: IWorkspace[] }>
+  return get<{ workspaces: IWorkspace[] }>(url, { params })
 }
 
 export const switchWorkspace: Fetcher<CommonResponse & { new_tenant: IWorkspace }, { url: string; body: Record<string, any> }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<CommonResponse & { new_tenant: IWorkspace }>
+  return post<CommonResponse & { new_tenant: IWorkspace }>(url, { body })
 }
 
 export const fetchDataSource: Fetcher<{ data: DataSourceNotion[] }, { url: string }> = ({ url }) => {
-  return get(url) as Promise<{ data: DataSourceNotion[] }>
+  return get<{ data: DataSourceNotion[] }>(url)
 }
 
 export const syncDataSourceNotion: Fetcher<CommonResponse, { url: string }> = ({ url }) => {
-  return get(url) as Promise<CommonResponse>
+  return get<CommonResponse>(url)
 }
 
 export const updateDataSourceNotionAction: Fetcher<CommonResponse, { url: string }> = ({ url }) => {
-  return patch(url) as Promise<CommonResponse>
+  return patch<CommonResponse>(url)
 }
 
 export const fetchPluginProviders: Fetcher<PluginProvider[] | null, string> = (url) => {
-  return get(url) as Promise<PluginProvider[] | null>
+  return get<PluginProvider[] | null>(url)
 }
 
 export const validatePluginProviderKey: Fetcher<ValidateOpenAIKeyResponse, { url: string; body: { credentials: any } }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<ValidateOpenAIKeyResponse>
+  return post<ValidateOpenAIKeyResponse>(url, { body })
 }
 export const updatePluginProviderAIKey: Fetcher<UpdateOpenAIKeyResponse, { url: string; body: { credentials: any } }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<UpdateOpenAIKeyResponse>
+  return post<UpdateOpenAIKeyResponse>(url, { body })
 }
 
 export const invitationCheck: Fetcher<CommonResponse & { is_valid: boolean; workspace_name: string }, { url: string; params: { workspace_id: string; email: string; token: string } }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<CommonResponse & { is_valid: boolean; workspace_name: string }>
+  return get<CommonResponse & { is_valid: boolean; workspace_name: string }>(url, { params })
 }
 
 export const activateMember: Fetcher<CommonResponse, { url: string; body: any }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<CommonResponse>
+  return post<CommonResponse>(url, { body })
 }
 
 export const fetchModelProviders: Fetcher<ProviderMap, string> = (url) => {
-  return get(url) as Promise<ProviderMap>
+  return get<ProviderMap>(url)
 }
 
 export const fetchModelList: Fetcher<BackendModel[], string> = (url) => {
-  return get(url) as Promise<BackendModel[]>
+  return get<BackendModel[]>(url)
 }
 
 export const validateModelProvider: Fetcher<ValidateOpenAIKeyResponse, { url: string; body: any }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<ValidateOpenAIKeyResponse>
+  return post<ValidateOpenAIKeyResponse>(url, { body })
 }
 
 export const setModelProvider: Fetcher<CommonResponse, { url: string; body: any }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<CommonResponse>
+  return post<CommonResponse>(url, { body })
 }
 
 export const deleteModelProvider: Fetcher<CommonResponse, { url: string }> = ({ url }) => {
-  return del(url) as Promise<CommonResponse>
+  return del<CommonResponse>(url)
 }
 
 export const changeModelProviderPriority: Fetcher<CommonResponse, { url: string; body: any }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<CommonResponse>
+  return post<CommonResponse>(url, { body })
 }
 
 export const setModelProviderModel: Fetcher<CommonResponse, { url: string; body: any }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<CommonResponse>
+  return post<CommonResponse>(url, { body })
 }
 
 export const deleteModelProviderModel: Fetcher<CommonResponse, { url: string }> = ({ url }) => {
-  return del(url) as Promise<CommonResponse>
+  return del<CommonResponse>(url)
 }
 
 export const getPayUrl: Fetcher<{ url: string }, string> = (url) => {
-  return get(url) as Promise<{ url: string }>
+  return get<{ url: string }>(url)
 }
 
 export const fetchDefaultModal: Fetcher<BackendModel, string> = (url) => {
-  return get(url) as Promise<BackendModel>
+  return get<BackendModel>(url)
 }
 
 export const updateDefaultModel: Fetcher<CommonResponse, { url: string; body: any }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<CommonResponse>
+  return post<CommonResponse>(url, { body })
 }
 
 export const submitFreeQuota: Fetcher<{ type: string; redirect_url?: string; result?: string }, string> = (url) => {
-  return post(url) as Promise<{ type: string; redirect_url?: string; result?: string }>
+  return post<{ type: string; redirect_url?: string; result?: string }>(url)
 }
 
 export const fetchFileUploadConfig: Fetcher<FileUploadConfigResponse, { url: string }> = ({ url }) => {
-  return get(url) as Promise<FileUploadConfigResponse>
+  return get<FileUploadConfigResponse>(url)
 }
 
 export const fetchDocumentsLimit: Fetcher<DocumentsLimitResponse, string> = (url) => {
-  return get(url) as Promise<DocumentsLimitResponse>
+  return get<DocumentsLimitResponse>(url)
 }
 
 export const fetchSparkFreeQuotaVerify: Fetcher<{ result: string; flag: boolean; reason: string }, string> = (url) => {
diff --git a/web/service/datasets.ts b/web/service/datasets.ts
index d2178db0d5..5fd45c1daa 100644
--- a/web/service/datasets.ts
+++ b/web/service/datasets.ts
@@ -40,155 +40,155 @@ export type SortType = 'created_at' | 'hit_count' | '-created_at' | '-hit_count'
 export type MetadataType = 'all' | 'only' | 'without'
 
 export const fetchDataDetail: Fetcher<DataSet, string> = (datasetId: string) => {
-  return get(`/datasets/${datasetId}`) as Promise<DataSet>
+  return get<DataSet>(`/datasets/${datasetId}`)
 }
 
 export const updateDatasetSetting: Fetcher<DataSet, { datasetId: string; body: Partial<Pick<DataSet, 'name' | 'description' | 'permission' | 'indexing_technique'>> }> = ({ datasetId, body }) => {
-  return patch(`/datasets/${datasetId}`, { body }) as Promise<DataSet>
+  return patch<DataSet>(`/datasets/${datasetId}`, { body })
 }
 
 export const fetchDatasetRelatedApps: Fetcher<RelatedAppResponse, string> = (datasetId: string) => {
-  return get(`/datasets/${datasetId}/related-apps`) as Promise<RelatedAppResponse>
+  return get<RelatedAppResponse>(`/datasets/${datasetId}/related-apps`)
 }
 
 export const fetchDatasets: Fetcher<DataSetListResponse, { url: string; params: { page: number; ids?: string[]; limit?: number } }> = ({ url, params }) => {
   const urlParams = qs.stringify(params, { indices: false })
-  return get(`${url}?${urlParams}`) as Promise<DataSetListResponse>
+  return get<DataSetListResponse>(`${url}?${urlParams}`)
 }
 
 export const createEmptyDataset: Fetcher<DataSet, { name: string }> = ({ name }) => {
-  return post('/datasets', { body: { name } }) as Promise<DataSet>
+  return post<DataSet>('/datasets', { body: { name } })
 }
 
 export const deleteDataset: Fetcher<DataSet, string> = (datasetID) => {
-  return del(`/datasets/${datasetID}`) as Promise<DataSet>
+  return del<DataSet>(`/datasets/${datasetID}`)
 }
 
 export const fetchDefaultProcessRule: Fetcher<ProcessRuleResponse, { url: string }> = ({ url }) => {
-  return get(url) as Promise<ProcessRuleResponse>
+  return get<ProcessRuleResponse>(url)
 }
 export const fetchProcessRule: Fetcher<ProcessRuleResponse, { params: { documentId: string } }> = ({ params: { documentId } }) => {
-  return get('/datasets/process-rule', { params: { document_id: documentId } }) as Promise<ProcessRuleResponse>
+  return get<ProcessRuleResponse>('/datasets/process-rule', { params: { document_id: documentId } })
 }
 
 export const fetchDocuments: Fetcher<DocumentListResponse, { datasetId: string; params: { keyword: string; page: number; limit: number; sort?: SortType } }> = ({ datasetId, params }) => {
-  return get(`/datasets/${datasetId}/documents`, { params }) as Promise<DocumentListResponse>
+  return get<DocumentListResponse>(`/datasets/${datasetId}/documents`, { params })
 }
 
 export const createFirstDocument: Fetcher<createDocumentResponse, { body: CreateDocumentReq }> = ({ body }) => {
-  return post('/datasets/init', { body }) as Promise<createDocumentResponse>
+  return post<createDocumentResponse>('/datasets/init', { body })
 }
 
 export const createDocument: Fetcher<createDocumentResponse, { datasetId: string; body: CreateDocumentReq }> = ({ datasetId, body }) => {
-  return post(`/datasets/${datasetId}/documents`, { body }) as Promise<createDocumentResponse>
+  return post<createDocumentResponse>(`/datasets/${datasetId}/documents`, { body })
 }
 
 export const fetchIndexingEstimate: Fetcher<IndexingEstimateResponse, CommonDocReq> = ({ datasetId, documentId }) => {
-  return get(`/datasets/${datasetId}/documents/${documentId}/indexing-estimate`, {}) as Promise<IndexingEstimateResponse>
+  return get<IndexingEstimateResponse>(`/datasets/${datasetId}/documents/${documentId}/indexing-estimate`, {})
 }
 export const fetchIndexingEstimateBatch: Fetcher<IndexingEstimateResponse, BatchReq> = ({ datasetId, batchId }) => {
-  return get(`/datasets/${datasetId}/batch/${batchId}/indexing-estimate`, {}) as Promise<IndexingEstimateResponse>
+  return get<IndexingEstimateResponse>(`/datasets/${datasetId}/batch/${batchId}/indexing-estimate`, {})
 }
 
 export const fetchIndexingStatus: Fetcher<IndexingStatusResponse, CommonDocReq> = ({ datasetId, documentId }) => {
-  return get(`/datasets/${datasetId}/documents/${documentId}/indexing-status`, {}) as Promise<IndexingStatusResponse>
+  return get<IndexingStatusResponse>(`/datasets/${datasetId}/documents/${documentId}/indexing-status`, {})
 }
 
 export const fetchIndexingStatusBatch: Fetcher<IndexingStatusBatchResponse, BatchReq> = ({ datasetId, batchId }) => {
-  return get(`/datasets/${datasetId}/batch/${batchId}/indexing-status`, {}) as Promise<IndexingStatusBatchResponse>
+  return get<IndexingStatusBatchResponse>(`/datasets/${datasetId}/batch/${batchId}/indexing-status`, {})
 }
 
 export const fetchDocumentDetail: Fetcher<DocumentDetailResponse, CommonDocReq & { params: { metadata?: MetadataType } }> = ({ datasetId, documentId, params }) => {
-  return get(`/datasets/${datasetId}/documents/${documentId}`, { params }) as Promise<DocumentDetailResponse>
+  return get<DocumentDetailResponse>(`/datasets/${datasetId}/documents/${documentId}`, { params })
 }
 
 export const pauseDocIndexing: Fetcher<CommonResponse, CommonDocReq> = ({ datasetId, documentId }) => {
-  return patch(`/datasets/${datasetId}/documents/${documentId}/processing/pause`) as Promise<CommonResponse>
+  return patch<CommonResponse>(`/datasets/${datasetId}/documents/${documentId}/processing/pause`)
 }
 
 export const resumeDocIndexing: Fetcher<CommonResponse, CommonDocReq> = ({ datasetId, documentId }) => {
-  return patch(`/datasets/${datasetId}/documents/${documentId}/processing/resume`) as Promise<CommonResponse>
+  return patch<CommonResponse>(`/datasets/${datasetId}/documents/${documentId}/processing/resume`)
 }
 
 export const deleteDocument: Fetcher<CommonResponse, CommonDocReq> = ({ datasetId, documentId }) => {
-  return del(`/datasets/${datasetId}/documents/${documentId}`) as Promise<CommonResponse>
+  return del<CommonResponse>(`/datasets/${datasetId}/documents/${documentId}`)
 }
 
 export const archiveDocument: Fetcher<CommonResponse, CommonDocReq> = ({ datasetId, documentId }) => {
-  return patch(`/datasets/${datasetId}/documents/${documentId}/status/archive`) as Promise<CommonResponse>
+  return patch<CommonResponse>(`/datasets/${datasetId}/documents/${documentId}/status/archive`)
 }
 
 export const unArchiveDocument: Fetcher<CommonResponse, CommonDocReq> = ({ datasetId, documentId }) => {
-  return patch(`/datasets/${datasetId}/documents/${documentId}/status/un_archive`) as Promise<CommonResponse>
+  return patch<CommonResponse>(`/datasets/${datasetId}/documents/${documentId}/status/un_archive`)
 }
 
 export const enableDocument: Fetcher<CommonResponse, CommonDocReq> = ({ datasetId, documentId }) => {
-  return patch(`/datasets/${datasetId}/documents/${documentId}/status/enable`) as Promise<CommonResponse>
+  return patch<CommonResponse>(`/datasets/${datasetId}/documents/${documentId}/status/enable`)
 }
 
 export const disableDocument: Fetcher<CommonResponse, CommonDocReq> = ({ datasetId, documentId }) => {
-  return patch(`/datasets/${datasetId}/documents/${documentId}/status/disable`) as Promise<CommonResponse>
+  return patch<CommonResponse>(`/datasets/${datasetId}/documents/${documentId}/status/disable`)
 }
 
 export const syncDocument: Fetcher<CommonResponse, CommonDocReq> = ({ datasetId, documentId }) => {
-  return get(`/datasets/${datasetId}/documents/${documentId}/notion/sync`) as Promise<CommonResponse>
+  return get<CommonResponse>(`/datasets/${datasetId}/documents/${documentId}/notion/sync`)
 }
 
 export const preImportNotionPages: Fetcher<{ notion_info: DataSourceNotionWorkspace[] }, { url: string; datasetId?: string }> = ({ url, datasetId }) => {
-  return get(url, { params: { dataset_id: datasetId } }) as Promise<{ notion_info: DataSourceNotionWorkspace[] }>
+  return get<{ notion_info: DataSourceNotionWorkspace[] }>(url, { params: { dataset_id: datasetId } })
 }
 
 export const modifyDocMetadata: Fetcher<CommonResponse, CommonDocReq & { body: { doc_type: string; doc_metadata: Record<string, any> } }> = ({ datasetId, documentId, body }) => {
-  return put(`/datasets/${datasetId}/documents/${documentId}/metadata`, { body }) as Promise<CommonResponse>
+  return put<CommonResponse>(`/datasets/${datasetId}/documents/${documentId}/metadata`, { body })
 }
 
 // apis for segments in a document
 
 export const fetchSegments: Fetcher<SegmentsResponse, CommonDocReq & { params: SegmentsQuery }> = ({ datasetId, documentId, params }) => {
-  return get(`/datasets/${datasetId}/documents/${documentId}/segments`, { params }) as Promise<SegmentsResponse>
+  return get<SegmentsResponse>(`/datasets/${datasetId}/documents/${documentId}/segments`, { params })
 }
 
 export const enableSegment: Fetcher<CommonResponse, { datasetId: string; segmentId: string }> = ({ datasetId, segmentId }) => {
-  return patch(`/datasets/${datasetId}/segments/${segmentId}/enable`) as Promise<CommonResponse>
+  return patch<CommonResponse>(`/datasets/${datasetId}/segments/${segmentId}/enable`)
 }
 
 export const disableSegment: Fetcher<CommonResponse, { datasetId: string; segmentId: string }> = ({ datasetId, segmentId }) => {
-  return patch(`/datasets/${datasetId}/segments/${segmentId}/disable`) as Promise<CommonResponse>
+  return patch<CommonResponse>(`/datasets/${datasetId}/segments/${segmentId}/disable`)
 }
 
 export const updateSegment: Fetcher<{ data: SegmentDetailModel; doc_form: string }, { datasetId: string; documentId: string; segmentId: string; body: SegmentUpdator }> = ({ datasetId, documentId, segmentId, body }) => {
-  return patch(`/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}`, { body }) as Promise<{ data: SegmentDetailModel; doc_form: string }>
+  return patch<{ data: SegmentDetailModel; doc_form: string }>(`/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}`, { body })
 }
 
 export const addSegment: Fetcher<{ data: SegmentDetailModel; doc_form: string }, { datasetId: string; documentId: string; body: SegmentUpdator }> = ({ datasetId, documentId, body }) => {
-  return post(`/datasets/${datasetId}/documents/${documentId}/segment`, { body }) as Promise<{ data: SegmentDetailModel; doc_form: string }>
+  return post<{ data: SegmentDetailModel; doc_form: string }>(`/datasets/${datasetId}/documents/${documentId}/segment`, { body })
 }
 
 export const deleteSegment: Fetcher<CommonResponse, { datasetId: string; documentId: string; segmentId: string }> = ({ datasetId, documentId, segmentId }) => {
-  return del(`/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}`) as Promise<CommonResponse>
+  return del<CommonResponse>(`/datasets/${datasetId}/documents/${documentId}/segments/${segmentId}`)
 }
 
 export const segmentBatchImport: Fetcher<{ job_id: string; job_status: string }, { url: string; body: FormData }> = ({ url, body }) => {
-  return post(url, { body }, { bodyStringify: false, deleteContentType: true }) as Promise<{ job_id: string; job_status: string }>
+  return post<{ job_id: string; job_status: string }>(url, { body }, { bodyStringify: false, deleteContentType: true })
 }
 
 export const checkSegmentBatchImportProgress: Fetcher<{ job_id: string; job_status: string }, { jobID: string }> = ({ jobID }) => {
-  return get(`/datasets/batch_import_status/${jobID}`) as Promise<{ job_id: string; job_status: string }>
+  return get<{ job_id: string; job_status: string }>(`/datasets/batch_import_status/${jobID}`)
 }
 
 // hit testing
 export const hitTesting: Fetcher<HitTestingResponse, { datasetId: string; queryText: string }> = ({ datasetId, queryText }) => {
-  return post(`/datasets/${datasetId}/hit-testing`, { body: { query: queryText } }) as Promise<HitTestingResponse>
+  return post<HitTestingResponse>(`/datasets/${datasetId}/hit-testing`, { body: { query: queryText } })
 }
 
 export const fetchTestingRecords: Fetcher<HitTestingRecordsResponse, { datasetId: string; params: { page: number; limit: number } }> = ({ datasetId, params }) => {
-  return get(`/datasets/${datasetId}/queries`, { params }) as Promise<HitTestingRecordsResponse>
+  return get<HitTestingRecordsResponse>(`/datasets/${datasetId}/queries`, { params })
 }
 
 export const fetchFileIndexingEstimate: Fetcher<FileIndexingEstimateResponse, any> = (body: any) => {
-  return post('/datasets/indexing-estimate', { body }) as Promise<FileIndexingEstimateResponse>
+  return post<FileIndexingEstimateResponse>('/datasets/indexing-estimate', { body })
 }
 
 export const fetchNotionPagePreview: Fetcher<{ content: string }, { workspaceID: string; pageID: string; pageType: string }> = ({ workspaceID, pageID, pageType }) => {
-  return get(`notion/workspaces/${workspaceID}/pages/${pageID}/${pageType}/preview`) as Promise<{ content: string }>
+  return get<{ content: string }>(`notion/workspaces/${workspaceID}/pages/${pageID}/${pageType}/preview`)
 }
diff --git a/web/service/log.ts b/web/service/log.ts
index 76ebd3adcd..0280874c67 100644
--- a/web/service/log.ts
+++ b/web/service/log.ts
@@ -18,42 +18,42 @@ import type {
 } from '@/models/log'
 
 export const fetchConversationList: Fetcher<ConversationListResponse, { name: string; appId: string; params?: Record<string, any> }> = ({ appId, params }) => {
-  return get(`/console/api/apps/${appId}/messages`, params) as Promise<ConversationListResponse>
+  return get<ConversationListResponse>(`/console/api/apps/${appId}/messages`, params)
 }
 
 // (Text Generation Application) Session List
 export const fetchCompletionConversations: Fetcher<CompletionConversationsResponse, { url: string; params?: CompletionConversationsRequest }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<CompletionConversationsResponse>
+  return get<CompletionConversationsResponse>(url, { params })
 }
 
 // (Text Generation Application) Session Detail
 export const fetchCompletionConversationDetail: Fetcher<CompletionConversationFullDetailResponse, { url: string }> = ({ url }) => {
-  return get(url, {}) as Promise<CompletionConversationFullDetailResponse>
+  return get<CompletionConversationFullDetailResponse>(url, {})
 }
 
 // (Chat Application) Session List
 export const fetchChatConversations: Fetcher<ChatConversationsResponse, { url: string; params?: ChatConversationsRequest }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<ChatConversationsResponse>
+  return get<ChatConversationsResponse>(url, { params })
 }
 
 // (Chat Application) Session Detail
 export const fetchChatConversationDetail: Fetcher<ChatConversationFullDetailResponse, { url: string }> = ({ url }) => {
-  return get(url, {}) as Promise<ChatConversationFullDetailResponse>
+  return get<ChatConversationFullDetailResponse>(url, {})
 }
 
 // (Chat Application) Message list in one session
 export const fetchChatMessages: Fetcher<ChatMessagesResponse, { url: string; params: ChatMessagesRequest }> = ({ url, params }) => {
-  return get(url, { params }) as Promise<ChatMessagesResponse>
+  return get<ChatMessagesResponse>(url, { params })
 }
 
 export const updateLogMessageFeedbacks: Fetcher<LogMessageFeedbacksResponse, { url: string; body: LogMessageFeedbacksRequest }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<LogMessageFeedbacksResponse>
+  return post<LogMessageFeedbacksResponse>(url, { body })
 }
 
 export const updateLogMessageAnnotations: Fetcher<LogMessageAnnotationsResponse, { url: string; body: LogMessageAnnotationsRequest }> = ({ url, body }) => {
-  return post(url, { body }) as Promise<LogMessageAnnotationsResponse>
+  return post<LogMessageAnnotationsResponse>(url, { body })
 }
 
 export const fetchAnnotationsCount: Fetcher<AnnotationsCountResponse, { url: string }> = ({ url }) => {
-  return get(url) as Promise<AnnotationsCountResponse>
+  return get<AnnotationsCountResponse>(url)
 }