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>

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>
   )
-}
+}

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

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