Feat: Support re-segmentation (#114)

Co-authored-by: John Wang <takatost@gmail.com> Co-authored-by: Jyong <718720800@qq.com> Co-authored-by: 金伟强 <iamjoel007@gmail.com>
2025-12-15 13:56:53 +08:00 · 2023-06-01 23:19:36 +08:00
parent f65a3ad1cc
commit c67f626b66
61 changed files with 1166 additions and 759 deletions
--- a/web/app/components/header/account-setting/provider-page/azure-provider/index.tsx
+++ b/web/app/components/header/account-setting/provider-page/azure-provider/index.tsx
@@ -1,92 +1,90 @@
-import type { Provider, ProviderAzureToken } from '@/models/common'
-import { ProviderName } from '@/models/common'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import ProviderInput from '../provider-input'
-import useValidateToken, { ValidatedStatus, ValidatedStatusState } from '../provider-input/useValidateToken'
-import { 
-  ValidatedErrorIcon, 
+import type { ValidatedStatusState } from '../provider-input/useValidateToken'
+import useValidateToken, { ValidatedStatus } from '../provider-input/useValidateToken'
+import {
+  ValidatedErrorIcon,
+  ValidatedErrorOnAzureOpenaiTip,
  ValidatedSuccessIcon,
  ValidatingTip,
-  ValidatedErrorOnAzureOpenaiTip
 } from '../provider-input/Validate'
+import { ProviderName } from '@/models/common'
+import type { Provider, ProviderAzureToken } from '@/models/common'

-interface IAzureProviderProps {
+type IAzureProviderProps = {
  provider: Provider
  onValidatedStatus: (status?: ValidatedStatusState) => void
  onTokenChange: (token: ProviderAzureToken) => void
 }
 const AzureProvider = ({
-  provider, 
+  provider,
  onTokenChange,
-  onValidatedStatus
+  onValidatedStatus,
 }: IAzureProviderProps) => {
  const { t } = useTranslation()
-  const [token, setToken] = useState<ProviderAzureToken>(provider.provider_name === ProviderName.AZURE_OPENAI ? {...provider.token}: {})
-  const [ validating, validatedStatus, setValidatedStatus, validate ] = useValidateToken(provider.provider_name)
+  const [token, setToken] = useState<ProviderAzureToken>(provider.provider_name === ProviderName.AZURE_OPENAI ? { ...provider.token } : {})
+  const [validating, validatedStatus, setValidatedStatus, validate] = useValidateToken(provider.provider_name)
  const handleFocus = (type: keyof ProviderAzureToken) => {
    if (token[type] === (provider?.token as ProviderAzureToken)[type]) {
      token[type] = ''
-      setToken({...token})
-      onTokenChange({...token})
+      setToken({ ...token })
+      onTokenChange({ ...token })
      setValidatedStatus({})
    }
  }
  const handleChange = (type: keyof ProviderAzureToken, v: string, validate: any) => {
    token[type] = v
-    setToken({...token})
-    onTokenChange({...token})
-    validate({...token}, {
+    setToken({ ...token })
+    onTokenChange({ ...token })
+    validate({ ...token }, {
      beforeValidating: () => {
        if (!token.openai_api_base || !token.openai_api_key) {
          setValidatedStatus({})
          return false
        }
        return true
-      }
+      },
    })
  }
  const getValidatedIcon = () => {
-    if (validatedStatus.status === ValidatedStatus.Error || validatedStatus.status === ValidatedStatus.Exceed) {
+    if (validatedStatus.status === ValidatedStatus.Error || validatedStatus.status === ValidatedStatus.Exceed)
      return <ValidatedErrorIcon />
-    }
-    if (validatedStatus.status === ValidatedStatus.Success) {
+
+    if (validatedStatus.status === ValidatedStatus.Success)
      return <ValidatedSuccessIcon />
-    }
  }
  const getValidatedTip = () => {
-    if (validating) {
+    if (validating)
      return <ValidatingTip />
-    }
-    if (validatedStatus.status === ValidatedStatus.Error) {
+
+    if (validatedStatus.status === ValidatedStatus.Error)
      return <ValidatedErrorOnAzureOpenaiTip errorMessage={validatedStatus.message ?? ''} />
-    }
  }
  useEffect(() => {
-    if (typeof onValidatedStatus === 'function') {
+    if (typeof onValidatedStatus === 'function')
      onValidatedStatus(validatedStatus)
-    }
  }, [validatedStatus])

  return (
    <div className='px-4 py-3'>
-      <ProviderInput 
+      <ProviderInput
        className='mb-4'
        name={t('common.provider.azure.apiBase')}
        placeholder={t('common.provider.azure.apiBasePlaceholder')}
        value={token.openai_api_base}
-        onChange={(v) => handleChange('openai_api_base', v, validate)}
+        onChange={v => handleChange('openai_api_base', v, validate)}
        onFocus={() => handleFocus('openai_api_base')}
        validatedIcon={getValidatedIcon()}
      />
-      <ProviderInput 
+      <ProviderInput
        className='mb-4'
        name={t('common.provider.azure.apiKey')}
        placeholder={t('common.provider.azure.apiKeyPlaceholder')}
        value={token.openai_api_key}
-        onChange={(v) => handleChange('openai_api_key', v, validate)}
+        onChange={v => handleChange('openai_api_key', v, validate)}
        onFocus={() => handleFocus('openai_api_key')}
        validatedIcon={getValidatedIcon()}
        validatedTip={getValidatedTip()}
--- a/web/app/components/header/account-setting/provider-page/index.tsx
+++ b/web/app/components/header/account-setting/provider-page/index.tsx
@@ -1,15 +1,15 @@
 import { useState } from 'react'
 import useSWR from 'swr'
-import { fetchProviders } from '@/service/common'
-import ProviderItem from './provider-item'
-import OpenaiHostedProvider from './openai-hosted-provider'
-import type { ProviderHosted } from '@/models/common'
 import { LockClosedIcon } from '@heroicons/react/24/solid'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
+import ProviderItem from './provider-item'
+import OpenaiHostedProvider from './openai-hosted-provider'
+import type { ProviderHosted } from '@/models/common'
+import { fetchProviders } from '@/service/common'
 import { IS_CE_EDITION } from '@/config'

-const providersMap: {[k: string]: any} = {
+const providersMap: { [k: string]: any } = {
  'openai-custom': {
    icon: 'openai',
    name: 'OpenAI',
@@ -17,7 +17,7 @@ const providersMap: {[k: string]: any} = {
  'azure_openai-custom': {
    icon: 'azure',
    name: 'Azure OpenAI Service',
-  }
+  },
 }

 // const providersList = [
@@ -56,7 +56,7 @@ const ProviderPage = () => {
  const { t } = useTranslation()
  const [activeProviderId, setActiveProviderId] = useState('')
  const { data, mutate } = useSWR({ url: '/workspaces/current/providers' }, fetchProviders)
-  const providers = data?.filter(provider => providersMap[`${provider.provider_name}-${provider.provider_type}`])?.map(provider => {
+  const providers = data?.filter(provider => providersMap[`${provider.provider_name}-${provider.provider_type}`])?.map((provider) => {
    const providerKey = `${provider.provider_name}-${provider.provider_type}`
    return {
      provider,
--- a/web/app/components/header/account-setting/provider-page/openai-provider/index.tsx
+++ b/web/app/components/header/account-setting/provider-page/openai-provider/index.tsx
@@ -1,19 +1,19 @@
-import type { Provider } from '@/models/common'
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import ProviderInput from '../provider-input'
 import Link from 'next/link'
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
-import useValidateToken, { ValidatedStatus, ValidatedStatusState } from '../provider-input/useValidateToken'
-import { 
-  ValidatedErrorIcon, 
+import ProviderInput from '../provider-input'
+import type { ValidatedStatusState } from '../provider-input/useValidateToken'
+import useValidateToken, { ValidatedStatus } from '../provider-input/useValidateToken'
+import {
+  ValidatedErrorIcon,
+  ValidatedErrorOnOpenaiTip,
  ValidatedSuccessIcon,
  ValidatingTip,
-  ValidatedExceedOnOpenaiTip,
-  ValidatedErrorOnOpenaiTip
 } from '../provider-input/Validate'
+import type { Provider } from '@/models/common'

-interface IOpenaiProviderProps {
+type IOpenaiProviderProps = {
  provider: Provider
  onValidatedStatus: (status?: ValidatedStatusState) => void
  onTokenChange: (token: string) => void
@@ -22,11 +22,11 @@ interface IOpenaiProviderProps {
 const OpenaiProvider = ({
  provider,
  onValidatedStatus,
-  onTokenChange
+  onTokenChange,
 }: IOpenaiProviderProps) => {
  const { t } = useTranslation()
  const [token, setToken] = useState(provider.token as string || '')
-  const [ validating, validatedStatus, setValidatedStatus, validate ] = useValidateToken(provider.provider_name)
+  const [validating, validatedStatus, setValidatedStatus, validate] = useValidateToken(provider.provider_name)
  const handleFocus = () => {
    if (token === provider.token) {
      setToken('')
@@ -44,35 +44,32 @@ const OpenaiProvider = ({
          return false
        }
        return true
-      }
+      },
    })
  }
  useEffect(() => {
-    if (typeof onValidatedStatus === 'function') {
+    if (typeof onValidatedStatus === 'function')
      onValidatedStatus(validatedStatus)
-    }
  }, [validatedStatus])

  const getValidatedIcon = () => {
-    if (validatedStatus?.status === ValidatedStatus.Error || validatedStatus.status === ValidatedStatus.Exceed) {
+    if (validatedStatus?.status === ValidatedStatus.Error || validatedStatus.status === ValidatedStatus.Exceed)
      return <ValidatedErrorIcon />
-    }
-    if (validatedStatus.status === ValidatedStatus.Success) {
+
+    if (validatedStatus.status === ValidatedStatus.Success)
      return <ValidatedSuccessIcon />
-    }
  }
  const getValidatedTip = () => {
-    if (validating) {
+    if (validating)
      return <ValidatingTip />
-    }
-    if (validatedStatus?.status === ValidatedStatus.Error) {
+
+    if (validatedStatus?.status === ValidatedStatus.Error)
      return <ValidatedErrorOnOpenaiTip errorMessage={validatedStatus.message ?? ''} />
-    }
  }

  return (
    <div className='px-4 pt-3 pb-4'>
-      <ProviderInput 
+      <ProviderInput
        value={token}
        name={t('common.provider.apiKey')}
        placeholder={t('common.provider.enterYourKey')}
@@ -89,4 +86,4 @@ const OpenaiProvider = ({
  )
 }

-export default OpenaiProvider
+export default OpenaiProvider
--- a/web/app/components/header/account-setting/provider-page/provider-input/Validate.tsx
+++ b/web/app/components/header/account-setting/provider-page/provider-input/Validate.tsx
@@ -15,7 +15,7 @@ export const ValidatedSuccessIcon = () => {
 export const ValidatingTip = () => {
  const { t } = useTranslation()
  return (
-    <div className={`mt-2 text-primary-600 text-xs font-normal`}>
+    <div className={'mt-2 text-primary-600 text-xs font-normal'}>
      {t('common.provider.validating')}
    </div>
  )
@@ -26,11 +26,11 @@ export const ValidatedExceedOnOpenaiTip = () => {
  const { locale } = useContext(I18n)

  return (
-    <div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
+    <div className={'mt-2 text-[#D92D20] text-xs font-normal'}>
      {t('common.provider.apiKeyExceedBill')}&nbsp;
-      <Link 
+      <Link
        className='underline'
-        href="https://platform.openai.com/account/api-keys" 
+        href="https://platform.openai.com/account/api-keys"
        target={'_blank'}>
        {locale === 'en' ? 'this link' : '这篇文档'}
      </Link>
@@ -42,7 +42,7 @@ export const ValidatedErrorOnOpenaiTip = ({ errorMessage }: { errorMessage: stri
  const { t } = useTranslation()

  return (
-    <div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
+    <div className={'mt-2 text-[#D92D20] text-xs font-normal'}>
      {t('common.provider.validatedError')}{errorMessage}
    </div>
  )
@@ -52,8 +52,8 @@ export const ValidatedErrorOnAzureOpenaiTip = ({ errorMessage }: { errorMessage:
  const { t } = useTranslation()

  return (
-    <div className={`mt-2 text-[#D92D20] text-xs font-normal`}>
+    <div className={'mt-2 text-[#D92D20] text-xs font-normal'}>
      {t('common.provider.validatedError')}{errorMessage}
    </div>
  )
-}
+}
--- a/web/app/components/header/account-setting/provider-page/provider-input/index.tsx
+++ b/web/app/components/header/account-setting/provider-page/provider-input/index.tsx
@@ -1,7 +1,7 @@
-import { ChangeEvent } from 'react'
-import { ReactElement } from 'react-markdown/lib/react-markdown'
+import type { ChangeEvent } from 'react'
+import type { ReactElement } from 'react-markdown/lib/react-markdown'

-interface IProviderInputProps {
+type IProviderInputProps = {
  value?: string
  name: string
  placeholder: string
@@ -20,9 +20,8 @@ const ProviderInput = ({
  onChange,
  onFocus,
  validatedIcon,
-  validatedTip
+  validatedTip,
 }: IProviderInputProps) => {
-
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const inputValue = e.target.value
    onChange(inputValue)
@@ -35,12 +34,12 @@ const ProviderInput = ({
        flex items-center px-3 bg-white rounded-lg
        shadow-[0_1px_2px_rgba(16,24,40,0.05)]
      '>
-        <input 
+        <input
          className='
            w-full py-[9px]
            text-xs font-medium text-gray-700 leading-[18px]
-            appearance-none outline-none bg-transparent 
-          ' 
+            appearance-none outline-none bg-transparent
+          '
          value={value}
          placeholder={placeholder}
          onChange={handleChange}
@@ -53,4 +52,4 @@ const ProviderInput = ({
  )
 }

-export default ProviderInput
+export default ProviderInput
--- a/web/app/components/header/account-setting/provider-page/provider-input/useValidateToken.ts
+++ b/web/app/components/header/account-setting/provider-page/provider-input/useValidateToken.ts
@@ -1,25 +1,26 @@
-import { useState, useCallback, SetStateAction, Dispatch } from 'react'
+import type { Dispatch, SetStateAction } from 'react'
+import { useCallback, useState } from 'react'
 import debounce from 'lodash-es/debounce'
-import { DebouncedFunc } from 'lodash-es'
+import type { DebouncedFunc } from 'lodash-es'
 import { validateProviderKey } from '@/service/common'

 export enum ValidatedStatus {
  Success = 'success',
  Error = 'error',
-  Exceed = 'exceed'
+  Exceed = 'exceed',
 }
 export type ValidatedStatusState = {
-  status?: ValidatedStatus,
+  status?: ValidatedStatus
  message?: string
 }
 // export type ValidatedStatusState = ValidatedStatus | undefined | ValidatedError
 export type SetValidatedStatus = Dispatch<SetStateAction<ValidatedStatusState>>
 export type ValidateFn = DebouncedFunc<(token: any, config: ValidateFnConfig) => void>
 type ValidateTokenReturn = [
-  boolean, 
-  ValidatedStatusState, 
+  boolean,
+  ValidatedStatusState,
  SetValidatedStatus,
-  ValidateFn
+  ValidateFn,
 ]
 export type ValidateFnConfig = {
  beforeValidating: (token: any) => boolean
@@ -29,19 +30,21 @@ const useValidateToken = (providerName: string): ValidateTokenReturn => {
  const [validating, setValidating] = useState(false)
  const [validatedStatus, setValidatedStatus] = useState<ValidatedStatusState>({})
  const validate = useCallback(debounce(async (token: string, config: ValidateFnConfig) => {
-    if (!config.beforeValidating(token)) {
+    if (!config.beforeValidating(token))
      return false
-    }
+
    setValidating(true)
    try {
      const res = await validateProviderKey({ url: `/workspaces/current/providers/${providerName}/token-validate`, body: { token } })
      setValidatedStatus(
-        res.result === 'success' 
-          ? { status: ValidatedStatus.Success } 
+        res.result === 'success'
+          ? { status: ValidatedStatus.Success }
          : { status: ValidatedStatus.Error, message: res.error })
-    } catch (e: any) {
+    }
+    catch (e: any) {
      setValidatedStatus({ status: ValidatedStatus.Error, message: e.message })
-    } finally {
+    }
+    finally {
      setValidating(false)
    }
  }, 500), [])
@@ -50,8 +53,8 @@ const useValidateToken = (providerName: string): ValidateTokenReturn => {
    validating,
    validatedStatus,
    setValidatedStatus,
-    validate
+    validate,
  ]
 }

-export default useValidateToken
+export default useValidateToken
--- a/web/app/components/header/account-setting/provider-page/provider-item/index.tsx
+++ b/web/app/components/header/account-setting/provider-page/provider-item/index.tsx
@@ -1,18 +1,19 @@
 import { useState } from 'react'
 import cn from 'classnames'
-import s from './index.module.css'
 import { useContext } from 'use-context-selector'
-import Indicator from '../../../indicator'
 import { useTranslation } from 'react-i18next'
-import type { Provider, ProviderAzureToken } from '@/models/common'
-import { ProviderName } from '@/models/common'
+import Indicator from '../../../indicator'
 import OpenaiProvider from '../openai-provider'
 import AzureProvider from '../azure-provider'
-import { ValidatedStatus, ValidatedStatusState } from '../provider-input/useValidateToken'
+import type { ValidatedStatusState } from '../provider-input/useValidateToken'
+import { ValidatedStatus } from '../provider-input/useValidateToken'
+import s from './index.module.css'
+import type { Provider, ProviderAzureToken } from '@/models/common'
+import { ProviderName } from '@/models/common'
 import { updateProviderAIKey } from '@/service/common'
 import { ToastContext } from '@/app/components/base/toast'

-interface IProviderItemProps {
+type IProviderItemProps = {
  icon: string
  name: string
  provider: Provider
@@ -26,17 +27,17 @@ const ProviderItem = ({
  name,
  provider,
  onActive,
-  onSave
+  onSave,
 }: IProviderItemProps) => {
  const { t } = useTranslation()
  const [validatedStatus, setValidatedStatus] = useState<ValidatedStatusState>()
  const [loading, setLoading] = useState(false)
  const { notify } = useContext(ToastContext)
  const [token, setToken] = useState<ProviderAzureToken | string>(
-    provider.provider_name === 'azure_openai' 
+    provider.provider_name === 'azure_openai'
      ? { openai_api_base: '', openai_api_key: '' }
-      : ''
-    )
+      : '',
+  )
  const id = `${provider.provider_name}-${provider.provider_type}`
  const isOpen = id === activeId
  const comingSoon = false
@@ -44,26 +45,30 @@ const ProviderItem = ({

  const providerTokenHasSetted = () => {
    if (provider.provider_name === ProviderName.AZURE_OPENAI) {
-      return provider.token && provider.token.openai_api_base && provider.token.openai_api_key ? {
-        openai_api_base: provider.token.openai_api_base,
-        openai_api_key: provider.token.openai_api_key
-      }: undefined
+      return (provider.token && provider.token.openai_api_base && provider.token.openai_api_key)
+        ? {
+          openai_api_base: provider.token.openai_api_base,
+          openai_api_key: provider.token.openai_api_key,
+        }
+        : undefined
    }
-    if (provider.provider_name === ProviderName.OPENAI) {
+    if (provider.provider_name === ProviderName.OPENAI)
      return provider.token
-    }
  }
  const handleUpdateToken = async () => {
-    if (loading) return
+    if (loading)
+      return
    if (validatedStatus?.status === ValidatedStatus.Success) {
      try {
        setLoading(true)
        await updateProviderAIKey({ url: `/workspaces/current/providers/${provider.provider_name}/token`, body: { token } })
        notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
        onActive('')
-      } catch (e) {
+      }
+      catch (e) {
        notify({ type: 'error', message: t('common.provider.saveFailed') })
-      } finally {
+      }
+      finally {
        setLoading(false)
        onSave()
      }
@@ -126,18 +131,18 @@ const ProviderItem = ({
      </div>
      {
        provider.provider_name === ProviderName.OPENAI && isOpen && (
-          <OpenaiProvider 
-            provider={provider} 
-            onValidatedStatus={v => setValidatedStatus(v)} 
+          <OpenaiProvider
+            provider={provider}
+            onValidatedStatus={v => setValidatedStatus(v)}
            onTokenChange={v => setToken(v)}
          />
        )
      }
      {
        provider.provider_name === ProviderName.AZURE_OPENAI && isOpen && (
-          <AzureProvider 
-            provider={provider} 
-            onValidatedStatus={v => setValidatedStatus(v)} 
+          <AzureProvider
+            provider={provider}
+            onValidatedStatus={v => setValidatedStatus(v)}
            onTokenChange={v => setToken(v)}
          />
        )