Fix/speech to text button (#947)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx

@@ -16,7 +16,6 @@ const Overview = async ({
   const { t } = await useTranslation(locale, 'app-overview')
   return (
     <div className="h-full px-16 py-6 overflow-scroll">
-      {/* <WelcomeBanner /> */}
       <ApikeyInfoPanel />
       <div className='flex flex-row items-center justify-between mb-4 text-xl text-gray-900'>
         {t('overview.title')}

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/welcome-banner.tsx

-'use client'
-import type { FC } from 'react'
-import React, { useState } from 'react'
-import { useContext } from 'use-context-selector'
-import { useTranslation } from 'react-i18next'
-import Link from 'next/link'
-import useSWR, { useSWRConfig } from 'swr'
-import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
-import { ExclamationCircleIcon } from '@heroicons/react/24/solid'
-import { debounce } from 'lodash-es'
-import Popover from '@/app/components/base/popover'
-import Button from '@/app/components/base/button'
-import Tag from '@/app/components/base/tag'
-import { ToastContext } from '@/app/components/base/toast'
-import { updateOpenAIKey, validateOpenAIKey } from '@/service/apps'
-import { fetchTenantInfo } from '@/service/common'
-import I18n from '@/context/i18n'
-
-type IStatusType = 'normal' | 'verified' | 'error' | 'error-api-key-exceed-bill'
-
-const STATUS_COLOR_MAP = {
-  'normal': { color: '', bgColor: 'bg-primary-50', borderColor: 'border-primary-100' },
-  'error': { color: 'text-red-600', bgColor: 'bg-red-50', borderColor: 'border-red-100' },
-  'verified': { color: '', bgColor: 'bg-green-50', borderColor: 'border-green-100' },
-  'error-api-key-exceed-bill': { color: 'text-red-600', bgColor: 'bg-red-50', borderColor: 'border-red-100' },
-}
-
-const CheckCircleIcon: FC<{ className?: string }> = ({ className }) => {
-  return <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
-    <rect width="20" height="20" rx="10" fill="#DEF7EC" />
-    <path fillRule="evenodd" clipRule="evenodd" d="M14.6947 6.70495C14.8259 6.83622 14.8996 7.01424 14.8996 7.19985C14.8996 7.38547 14.8259 7.56348 14.6947 7.69475L9.0947 13.2948C8.96343 13.426 8.78541 13.4997 8.5998 13.4997C8.41418 13.4997 8.23617 13.426 8.1049 13.2948L5.3049 10.4948C5.17739 10.3627 5.10683 10.1859 5.10842 10.0024C5.11002 9.81883 5.18364 9.64326 5.31342 9.51348C5.44321 9.38369 5.61878 9.31007 5.80232 9.30848C5.98585 9.30688 6.16268 9.37744 6.2947 9.50495L8.5998 11.8101L13.7049 6.70495C13.8362 6.57372 14.0142 6.5 14.1998 6.5C14.3854 6.5 14.5634 6.57372 14.6947 6.70495Z" fill="#046C4E" />
-  </svg>
-}
-
-type IEditKeyDiv = {
-  className?: string
-  showInPopover?: boolean
-  onClose?: () => void
-  getTenantInfo?: () => void
-}
-
-const EditKeyDiv: FC<IEditKeyDiv> = ({ className = '', showInPopover = false, onClose, getTenantInfo }) => {
-  const [inputValue, setInputValue] = useState<string | undefined>()
-  const [editStatus, setEditStatus] = useState<IStatusType>('normal')
-  const [loading, setLoading] = useState(false)
-  const [validating, setValidating] = useState(false)
-  const { notify } = useContext(ToastContext)
-  const { t } = useTranslation()
-  const { locale } = useContext(I18n)
-
-  // Hide the pop-up window and need to get the latest key again
-  // If the key is valid, the edit button will be hidden later
-  const onClosePanel = () => {
-    getTenantInfo && getTenantInfo()
-    onClose && onClose()
-  }
-
-  const onSaveKey = async () => {
-    if (editStatus === 'verified') {
-      setLoading(true)
-      try {
-        await updateOpenAIKey({ url: '/providers/openai/token', body: { token: inputValue ?? '' } })
-        notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
-        onClosePanel()
-      }
-      catch (err) {
-        notify({ type: 'error', message: t('common.actionMsg.modificationFailed') })
-      }
-      finally {
-        setLoading(false)
-      }
-    }
-  }
-
-  const validateKey = async (value: string) => {
-    try {
-      setValidating(true)
-      const res = await validateOpenAIKey({ url: '/providers/openai/token-validate', body: { token: value ?? '' } })
-      setEditStatus(res.result === 'success' ? 'verified' : 'error')
-    }
-    catch (err: any) {
-      if (err.status === 400) {
-        err.json().then(({ code }: any) => {
-          if (code === 'provider_request_failed')
-            setEditStatus('error-api-key-exceed-bill')
-        })
-      }
-      else {
-        setEditStatus('error')
-      }
-    }
-    finally {
-      setValidating(false)
-    }
-  }
-  const renderErrorMessage = () => {
-    if (validating) {
-      return (
-        <div className={'text-primary-600 mt-2 text-xs'}>
-          {t('common.provider.validating')}
-        </div>
-      )
-    }
-    if (editStatus === 'error-api-key-exceed-bill') {
-      return (
-        <div className={'text-[#D92D20] mt-2 text-xs'}>
-          {t('common.provider.apiKeyExceedBill')}
-          {locale === 'en' ? ' ' : ''}
-          <Link
-            className='underline'
-            href="https://platform.openai.com/account/api-keys"
-            target={'_blank'}>
-            {locale === 'en' ? 'this link' : '这篇文档'}
-          </Link>
-        </div>
-      )
-    }
-    if (editStatus === 'error') {
-      return (
-        <div className={'text-[#D92D20] mt-2 text-xs'}>
-          {t('common.provider.invalidKey')}
-        </div>
-      )
-    }
-    return null
-  }
-
-  return (
-    <div className={`flex flex-col w-full rounded-lg px-8 py-6 border-solid border-[0.5px] ${className} ${Object.values(STATUS_COLOR_MAP[editStatus]).join(' ')}`}>
-      {!showInPopover && <p className='text-xl font-medium text-gray-800'>{t('appOverview.welcome.firstStepTip')}</p>}
-      <p className={`${showInPopover ? 'text-sm' : 'text-xl'} font-medium text-gray-800`}>{t('appOverview.welcome.enterKeyTip')} {showInPopover ? '' : '👇'}</p>
-      <div className='relative mt-2'>
-        <input type="text"
-          className={`h-9 w-96 max-w-full py-2 pl-2 text-gray-900 rounded-lg bg-white sm:text-xs focus:ring-blue-500 focus:border-blue-500 shadow-sm ${editStatus === 'normal' ? 'pr-2' : 'pr-8'}`}
-          placeholder={t('appOverview.welcome.placeholder') || ''}
-          onChange={debounce((e) => {
-            setInputValue(e.target.value)
-            if (!e.target.value) {
-              setEditStatus('normal')
-              return
-            }
-            validateKey(e.target.value)
-          }, 300)}
-        />
-        {editStatus === 'verified' && <div className="absolute inset-y-0 right-0 flex flex-row-reverse items-center pr-6 pointer-events-none">
-          <CheckCircleIcon className="rounded-lg" />
-        </div>}
-        {(editStatus === 'error' || editStatus === 'error-api-key-exceed-bill') && <div className="absolute inset-y-0 right-0 flex flex-row-reverse items-center pr-6 pointer-events-none">
-          <ExclamationCircleIcon className="w-5 h-5 text-red-800" />
-        </div>}
-        {showInPopover ? null : <Button type='primary' onClick={onSaveKey} className='!h-9 !inline-block ml-2' loading={loading} disabled={editStatus !== 'verified'}>{t('common.operation.save')}</Button>}
-      </div>
-      {renderErrorMessage()}
-      <Link className="inline-flex items-center mt-2 text-xs font-normal cursor-pointer text-primary-600 w-fit" href="https://platform.openai.com/account/api-keys" target={'_blank'}>
-        {t('appOverview.welcome.getKeyTip')}
-        <ArrowTopRightOnSquareIcon className='w-3 h-3 ml-1 text-primary-600' aria-hidden="true" />
-      </Link>
-      {showInPopover && <div className='flex justify-end mt-6'>
-        <Button className='flex-shrink-0 mr-2' onClick={onClosePanel}>{t('common.operation.cancel')}</Button>
-        <Button type='primary' className='flex-shrink-0' onClick={onSaveKey} loading={loading} disabled={editStatus !== 'verified'}>{t('common.operation.save')}</Button>
-      </div>}
-    </div>
-  )
-}
-
-const WelcomeBanner: FC = () => {
-  const { data: userInfo } = useSWR({ url: '/info' }, fetchTenantInfo)
-  if (!userInfo)
-    return null
-  return userInfo?.providers?.find(({ token_is_set }) => token_is_set) ? null : <EditKeyDiv className='mb-8' />
-}
-
-export const EditKeyPopover: FC = () => {
-  const { data: userInfo } = useSWR({ url: '/info' }, fetchTenantInfo)
-  const { mutate } = useSWRConfig()
-  if (!userInfo)
-    return null
-
-  const getTenantInfo = () => {
-    mutate({ url: '/info' })
-  }
-  // In this case, the edit button is displayed
-  const targetProvider = userInfo?.providers?.some(({ token_is_set, is_valid }) => token_is_set && is_valid)
-  return (
-    !targetProvider
-      ? <div className='flex items-center'>
-        <Tag className='mr-2 h-fit' color='red'><ExclamationCircleIcon className='h-3.5 w-3.5 mr-2' />OpenAI API key invalid</Tag>
-        <Popover
-          htmlContent={<EditKeyDiv className='!border-0' showInPopover={true} getTenantInfo={getTenantInfo} />}
-          trigger='click'
-          position='br'
-          btnElement='Edit'
-          btnClassName='text-primary-600 !text-xs px-3 py-1.5'
-          className='!p-0 !w-[464px] h-[200px]'
-        />
-      </div>
-      : null)
-}
-
-export default WelcomeBanner

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

@@ -38,7 +38,7 @@ const Config: FC = () => {
     setSpeechToTextConfig,
   } = useContext(ConfigContext)
   const isChatApp = mode === AppType.chat
-  const { currentProvider } = useProviderContext()
+  const { speech2textDefaultModel } = useProviderContext()
 
   const promptTemplate = modelConfig.configs.prompt_template
   const promptVariables = modelConfig.configs.prompt_variables
@@ -90,7 +90,7 @@ const Config: FC = () => {
     },
   })
 
-  const hasChatConfig = isChatApp && (featureConfig.openingStatement || featureConfig.suggestedQuestionsAfterAnswer || (featureConfig.speechToText && currentProvider?.provider_name === 'openai'))
+  const hasChatConfig = isChatApp && (featureConfig.openingStatement || featureConfig.suggestedQuestionsAfterAnswer || (featureConfig.speechToText && !!speech2textDefaultModel))
   const hasToolbox = false
 
   const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false)
@@ -120,7 +120,7 @@ const Config: FC = () => {
             isChatApp={isChatApp}
             config={featureConfig}
             onChange={handleFeatureChange}
-            showSpeechToTextItem={currentProvider?.provider_name === 'openai'}
+            showSpeechToTextItem={!!speech2textDefaultModel}
           />
         )}
         {showAutomatic && (
@@ -160,7 +160,7 @@ const Config: FC = () => {
                 }
               }
               isShowSuggestedQuestionsAfterAnswer={featureConfig.suggestedQuestionsAfterAnswer}
-              isShowSpeechText={featureConfig.speechToText && currentProvider?.provider_name === 'openai'}
+              isShowSpeechText={featureConfig.speechToText && !!speech2textDefaultModel}
             />
           )
         }

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

@@ -52,7 +52,7 @@ const Debug: FC<IDebug> = ({
     modelConfig,
     completionParams,
   } = useContext(ConfigContext)
-  const { currentProvider } = useProviderContext()
+  const { speech2textDefaultModel } = useProviderContext()
   const [chatList, setChatList, getChatList] = useGetState<IChatItem[]>([])
   const chatListDomRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
@@ -390,7 +390,7 @@ const Debug: FC<IDebug> = ({
                   }}
                   isShowSuggestion={doShowSuggestion}
                   suggestionList={suggestQuestions}
-                  isShowSpeechToText={speechToTextConfig.enabled && currentProvider?.provider_name === 'openai'}
+                  isShowSpeechToText={speechToTextConfig.enabled && !!speech2textDefaultModel}
                 />
               </div>
             </div>

web/app/components/datasets/create/index.tsx

@@ -9,9 +9,10 @@ import StepTwo from './step-two'
 import StepThree from './step-three'
 import { DataSourceType } from '@/models/datasets'
 import type { DataSet, FileItem, createDocumentResponse } from '@/models/datasets'
-import { fetchDataSource, fetchTenantInfo } from '@/service/common'
+import { fetchDataSource } from '@/service/common'
 import { fetchDataDetail } from '@/service/datasets'
 import type { DataSourceNotionPage } from '@/models/common'
+import { useProviderContext } from '@/context/provider-context'
 
 import AccountSetting from '@/app/components/header/account-setting'
 
@@ -23,7 +24,6 @@ type DatasetUpdateFormProps = {
 
 const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
   const { t } = useTranslation()
-  const [hasSetAPIKEY, setHasSetAPIKEY] = useState(true)
   const [isShowSetAPIKey, { setTrue: showSetAPIKey, setFalse: hideSetAPIkey }] = useBoolean()
   const [hasConnection, setHasConnection] = useState(true)
   const [isShowDataSourceSetting, { setTrue: showDataSourceSetting, setFalse: hideDataSourceSetting }] = useBoolean()
@@ -33,6 +33,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
   const [fileList, setFiles] = useState<FileItem[]>([])
   const [result, setResult] = useState<createDocumentResponse | undefined>()
   const [hasError, setHasError] = useState(false)
+  const { embeddingsDefaultModel } = useProviderContext()
 
   const [notionPages, setNotionPages] = useState<Page[]>([])
   const updateNotionPages = (value: Page[]) => {
@@ -77,11 +78,6 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
     setStep(step + delta)
   }, [step, setStep])
 
-  const checkAPIKey = async () => {
-    const data = await fetchTenantInfo({ url: '/info' })
-    const hasSetKey = data.providers.some(({ is_valid }) => is_valid)
-    setHasSetAPIKEY(hasSetKey)
-  }
   const checkNotionConnection = async () => {
     const { data } = await fetchDataSource({ url: '/data-source/integrates' })
     const hasConnection = data.filter(item => item.provider === 'notion') || []
@@ -89,7 +85,6 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
   }
 
   useEffect(() => {
-    checkAPIKey()
     checkNotionConnection()
   }, [])
 
@@ -132,7 +127,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
           onStepChange={nextStep}
         />}
         {(step === 2 && (!datasetId || (datasetId && !!detail))) && <StepTwo
-          hasSetAPIKEY={hasSetAPIKEY}
+          hasSetAPIKEY={!!embeddingsDefaultModel}
           onSetting={showSetAPIKey}
           indexingType={detail?.indexing_technique || ''}
           datasetId={datasetId}
@@ -151,7 +146,6 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
         />}
       </div>
       {isShowSetAPIKey && <AccountSetting activeTab="provider" onCancel={async () => {
-        await checkAPIKey()
         hideSetAPIkey()
       }} />}
       {isShowDataSourceSetting && <AccountSetting activeTab="data-source" onCancel={hideDataSourceSetting}/>}

web/app/components/datasets/documents/detail/settings/index.tsx

@@ -6,7 +6,6 @@ import { useContext } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
 import DatasetDetailContext from '@/context/dataset-detail'
 import type { FullDocumentDetail } from '@/models/datasets'
-import { fetchTenantInfo } from '@/service/common'
 import type { MetadataType } from '@/service/datasets'
 import { fetchDocumentDetail } from '@/service/datasets'
 
@@ -14,6 +13,7 @@ import Loading from '@/app/components/base/loading'
 import StepTwo from '@/app/components/datasets/create/step-two'
 import AccountSetting from '@/app/components/header/account-setting'
 import AppUnavailable from '@/app/components/base/app-unavailable'
+import { useProviderContext } from '@/context/provider-context'
 
 type DocumentSettingsProps = {
   datasetId: string
@@ -23,25 +23,15 @@ type DocumentSettingsProps = {
 const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
   const { t } = useTranslation()
   const router = useRouter()
-  const [hasSetAPIKEY, setHasSetAPIKEY] = useState(true)
   const [isShowSetAPIKey, { setTrue: showSetAPIKey, setFalse: hideSetAPIkey }] = useBoolean()
   const [hasError, setHasError] = useState(false)
   const { indexingTechnique, dataset } = useContext(DatasetDetailContext)
+  const { embeddingsDefaultModel } = useProviderContext()
 
   const saveHandler = () => router.push(`/datasets/${datasetId}/documents/${documentId}`)
 
   const cancelHandler = () => router.back()
 
-  const checkAPIKey = async () => {
-    const data = await fetchTenantInfo({ url: '/info' })
-    const hasSetKey = data.providers.some(({ is_valid }) => is_valid)
-    setHasSetAPIKEY(hasSetKey)
-  }
-
-  useEffect(() => {
-    checkAPIKey()
-  }, [])
-
   const [documentDetail, setDocumentDetail] = useState<FullDocumentDetail | null>(null)
   const currentPage = useMemo(() => {
     return {
@@ -77,7 +67,7 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
         {!documentDetail && <Loading type='app' />}
         {dataset && documentDetail && (
           <StepTwo
-            hasSetAPIKEY={hasSetAPIKEY}
+            hasSetAPIKEY={!!embeddingsDefaultModel}
             onSetting={showSetAPIKey}
             datasetId={datasetId}
             dataSourceType={documentDetail.data_source_type}
@@ -92,7 +82,6 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
         )}
       </div>
       {isShowSetAPIKey && <AccountSetting activeTab="provider" onCancel={async () => {
-        await checkAPIKey()
         hideSetAPIkey()
       }} />}
     </div>

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

@@ -61,11 +61,15 @@ type DeleteModel = {
 
 const ModelPage = () => {
   const { t } = useTranslation()
-  const { updateModelList } = useProviderContext()
+  const {
+    updateModelList,
+    embeddingsDefaultModel,
+    mutateEmbeddingsDefaultModel,
+    speech2textDefaultModel,
+    mutateSpeech2textDefaultModel,
+  } = useProviderContext()
   const { data: providers, mutate: mutateProviders } = useSWR('/workspaces/current/model-providers', fetchModelProviders)
   const { data: textGenerationDefaultModel, mutate: mutateTextGenerationDefaultModel } = useSWR('/workspaces/current/default-model?model_type=text-generation', fetchDefaultModal)
-  const { data: embeddingsDefaultModel, mutate: mutateEmbeddingsDefaultModel } = useSWR('/workspaces/current/default-model?model_type=embeddings', fetchDefaultModal)
-  const { data: speech2textDefaultModel, mutate: mutateSpeech2textDefaultModel } = useSWR('/workspaces/current/default-model?model_type=speech2text', fetchDefaultModal)
   const [showMoreModel, setShowMoreModel] = useState(false)
   const [showModal, setShowModal] = useState(false)
   const { notify } = useToastContext()

web/context/provider-context.tsx

@@ -2,29 +2,29 @@
 
 import { createContext, useContext } from 'use-context-selector'
 import useSWR from 'swr'
-import { fetchModelList, fetchTenantInfo } from '@/service/common'
+import { fetchDefaultModal, fetchModelList } from '@/service/common'
 import { ModelFeature, ModelType } from '@/app/components/header/account-setting/model-page/declarations'
 import type { BackendModel } from '@/app/components/header/account-setting/model-page/declarations'
 const ProviderContext = createContext<{
-  currentProvider: {
-    provider: string
-    provider_name: string
-    token_is_set: boolean
-    is_valid: boolean
-    token_is_valid: boolean
-  } | null | undefined
   textGenerationModelList: BackendModel[]
   embeddingsModelList: BackendModel[]
   speech2textModelList: BackendModel[]
   agentThoughtModelList: BackendModel[]
   updateModelList: (type: ModelType) => void
+  embeddingsDefaultModel?: BackendModel
+  mutateEmbeddingsDefaultModel: () => void
+  speech2textDefaultModel?: BackendModel
+  mutateSpeech2textDefaultModel: () => void
 }>({
-      currentProvider: null,
       textGenerationModelList: [],
       embeddingsModelList: [],
       speech2textModelList: [],
       agentThoughtModelList: [],
       updateModelList: () => {},
+      speech2textDefaultModel: undefined,
+      mutateSpeech2textDefaultModel: () => {},
+      embeddingsDefaultModel: undefined,
+      mutateEmbeddingsDefaultModel: () => {},
     })
 
 export const useProviderContext = () => useContext(ProviderContext)
@@ -35,8 +35,8 @@ type ProviderContextProviderProps = {
 export const ProviderContextProvider = ({
   children,
 }: ProviderContextProviderProps) => {
-  const { data: userInfo } = useSWR({ url: '/info' }, fetchTenantInfo)
-  const currentProvider = userInfo?.providers?.find(({ token_is_set, is_valid, provider_name }) => token_is_set && is_valid && (provider_name === 'openai' || provider_name === 'azure_openai'))
+  const { data: embeddingsDefaultModel, mutate: mutateEmbeddingsDefaultModel } = useSWR('/workspaces/current/default-model?model_type=embeddings', fetchDefaultModal)
+  const { data: speech2textDefaultModel, mutate: mutateSpeech2textDefaultModel } = useSWR('/workspaces/current/default-model?model_type=speech2text', fetchDefaultModal)
   const fetchModelListUrlPrefix = '/workspaces/current/models/model-type/'
   const { data: textGenerationModelList, mutate: mutateTextGenerationModelList } = useSWR(`${fetchModelListUrlPrefix}${ModelType.textGeneration}`, fetchModelList)
   const { data: embeddingsModelList, mutate: mutateEmbeddingsModelList } = useSWR(`${fetchModelListUrlPrefix}${ModelType.embeddings}`, fetchModelList)
@@ -54,12 +54,15 @@ export const ProviderContextProvider = ({
 
   return (
     <ProviderContext.Provider value={{
-      currentProvider,
       textGenerationModelList: textGenerationModelList || [],
       embeddingsModelList: embeddingsModelList || [],
       speech2textModelList: speech2textModelList || [],
       agentThoughtModelList: agentThoughtModelList || [],
       updateModelList,
+      embeddingsDefaultModel,
+      mutateEmbeddingsDefaultModel,
+      speech2textDefaultModel,
+      mutateSpeech2textDefaultModel,
     }}>
       {children}
     </ProviderContext.Provider>