frontend for model runtime

web/app/components/app/chat/answer/index.tsx

@@ -275,7 +275,7 @@ const Answer: FC<IAnswerProps> = ({
                     className={cn(s.copyBtn, 'mr-1')}
                   />
                 )}
-                {supportAnnotation && (
+                {(supportAnnotation && !item.isOpeningStatement) && (
                   <AnnotationCtrlBtn
                     appId={appId!}
                     messageId={id}

web/app/components/app/chat/type.ts

@@ -72,7 +72,16 @@ export type IChatItem = {
 
 export type MessageEnd = {
   id: string
-  retriever_resources?: CitationItem[]
+  metadata: {
+    retriever_resources?: CitationItem[]
+    annotation_reply: {
+      id: string
+      account: {
+        id: string
+        name: string
+      }
+    }
+  }
 }
 
 export type MessageReplace = {

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

@@ -7,9 +7,6 @@ import { useBoolean, useClickAway, useGetState } from 'ahooks'
 import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import produce from 'immer'
 import ParamItem from './param-item'
-import ModelIcon from './model-icon'
-import ModelName from './model-name'
-import ModelModeTypeLabel from './model-mode-type-label'
 import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import Radio from '@/app/components/base/radio'
 import Panel from '@/app/components/base/panel'
@@ -24,17 +21,19 @@ import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
 import { Sliders02 } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import { fetchModelParams } from '@/service/debug'
 import Loading from '@/app/components/base/loading'
-import ModelSelector from '@/app/components/header/account-setting/model-page/model-selector'
-import { ModelType, ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations'
-import { useProviderContext } from '@/context/provider-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import type { ModelModeType } from '@/types/app'
+import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
+import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
+import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
+
 export type IConfigModelProps = {
   isAdvancedMode: boolean
   mode: string
   modelId: string
-  provider: ProviderEnum
-  setModel: (model: { id: string; provider: ProviderEnum; mode: ModelModeType; features: string[] }) => void
+  provider: string
+  setModel: (model: { id: string; provider: string; mode: ModelModeType; features: string[] }) => void
   completionParams: CompletionParams
   onCompletionParamsChange: (newParams: CompletionParams) => void
   disabled: boolean
@@ -50,11 +49,16 @@ const ConfigModel: FC<IConfigModelProps> = ({
   disabled,
 }) => {
   const { t } = useTranslation()
-  const { textGenerationModelList } = useProviderContext()
   const [isShowConfig, { setFalse: hideConfig, toggle: toogleShowConfig }] = useBoolean(false)
   const [maxTokenSettingTipVisible, setMaxTokenSettingTipVisible] = useState(false)
   const configContentRef = React.useRef(null)
-  const currModel = textGenerationModelList.find(item => item.model_name === modelId)
+  const {
+    currentProvider,
+    currentModel: currModel,
+    textGenerationModelList,
+  } = useTextGenerationCurrentProviderAndModelAndModelList(
+    { provider, model: modelId },
+  )
 
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
@@ -81,15 +85,15 @@ const ConfigModel: FC<IConfigModelProps> = ({
         setAllParams(newAllParams)
       }
     })()
-  }, [provider, modelId])
+  }, [provider, modelId, allParams, setAllParams])
 
   useClickAway(() => {
     hideConfig()
   }, configContentRef)
 
   const selectedModel = { name: modelId } // options.find(option => option.id === modelId)
 
-  const ensureModelParamLoaded = (provider: ProviderEnum, modelId: string) => {
+  const ensureModelParamLoaded = (provider: string, modelId: string) => {
     return new Promise<void>((resolve) => {
       if (getAllParams()[provider]?.[modelId]) {
         resolve()
@@ -126,13 +130,13 @@ const ConfigModel: FC<IConfigModelProps> = ({
     return adjustedValue
   }
 
-  const handleSelectModel = ({ id, provider: nextProvider, mode, features }: { id: string; provider: ProviderEnum; mode: ModelModeType; features: string[] }) => {
+  const handleSelectModel = ({ id, provider: nextProvider, mode, features }: { id: string; provider: string; mode: ModelModeType; features: string[] }) => {
     return async () => {
       const prevParamsRule = getAllParams()[provider]?.[modelId]
 
       setModel({
         id,
-        provider: nextProvider || ProviderEnum.openai,
+        provider: nextProvider || 'openai',
         mode,
         features,
       })
@@ -269,26 +273,34 @@ const ConfigModel: FC<IConfigModelProps> = ({
 
     const max = currParams.max_tokens.max
     const isSupportMaxToken = currParams.max_tokens.enabled
-    if (isSupportMaxToken && currModel?.model_provider.provider_name !== ProviderEnum.anthropic && completionParams.max_tokens > max * 2 / 3)
+    if (isSupportMaxToken && currentProvider?.provider !== 'anthropic' && completionParams.max_tokens > max * 2 / 3)
       setMaxTokenSettingTipVisible(true)
     else
       setMaxTokenSettingTipVisible(false)
-  }, [currParams, completionParams.max_tokens, setMaxTokenSettingTipVisible])
+  }, [currParams, completionParams.max_tokens, setMaxTokenSettingTipVisible, currentProvider])
   return (
     <div className='relative' ref={configContentRef}>
       <div
         className={cn('flex items-center border h-8 px-2 space-x-2 rounded-lg', disabled ? diabledStyle : ableStyle)}
         onClick={() => !disabled && toogleShowConfig()}
       >
-        <ModelIcon
-          className='!w-5 !h-5'
-          modelId={modelId}
-          providerName={provider}
-        />
-        <div className='text-[13px] text-gray-900 font-medium'>
-          <ModelName modelId={selectedModel.name} modelDisplayName={currModel?.model_display_name} />
-        </div>
-        {isAdvancedMode && <ModelModeTypeLabel type={currModel?.model_mode as ModelModeType} isHighlight />}
+        {
+          currentProvider && (
+            <ModelIcon
+              className='!w-5 !h-5'
+              provider={currentProvider}
+            />
+          )
+        }
+        {
+          currModel && (
+            <ModelName
+              className='text-gray-900'
+              modelItem={currModel}
+              showMode={isAdvancedMode}
+            />
+          )
+        }
         {disabled ? <InformationCircleIcon className='w-4 h-4 text-[#F79009]' /> : <SlidersH className='w-4 h-4 text-indigo-600' />}
       </div>
       {isShowConfig && (
@@ -312,21 +324,16 @@ const ConfigModel: FC<IConfigModelProps> = ({
             <div className="flex items-center justify-between my-5 h-9">
               <div>{t('appDebug.modelConfig.model')}</div>
               <ModelSelector
-                isShowModelModeType={isAdvancedMode}
-                isShowAddModel
-                popClassName='right-0'
-                triggerIconSmall
-                value={{
-                  modelName: modelId,
-                  providerName: provider,
-                }}
-                modelType={ModelType.textGeneration}
-                onChange={(model) => {
+                defaultModel={{ model: modelId, provider }}
+                modelList={textGenerationModelList}
+                onSelect={({ provider, model }) => {
+                  const targetProvider = textGenerationModelList.find(modelItem => modelItem.provider === provider)
+                  const targetModelItem = targetProvider?.models.find(modelItem => modelItem.model === model)
                   handleSelectModel({
-                    id: model.model_name,
-                    provider: model.model_provider.provider_name as ProviderEnum,
-                    mode: model.model_mode,
-                    features: model.features,
+                    id: model,
+                    provider,
+                    mode: targetModelItem?.model_properties.mode as ModelModeType,
+                    features: targetModelItem?.features || [],
                   })()
                 }}
               />
@@ -336,7 +343,7 @@ const ConfigModel: FC<IConfigModelProps> = ({
             )}
 
             {/* Tone type */}
-            {[ProviderEnum.openai, ProviderEnum.azure_openai].includes(provider) && (
+            {['openai', 'azure_openai'].includes(provider) && (
               <div className="mt-5 mb-4">
                 <div className="mb-3 text-sm text-gray-900">{t('appDebug.modelConfig.setTone')}</div>
                 <Radio.Group className={cn('!rounded-lg', toneTabBgClassName)} value={toneId} onChange={handleToneChange}>

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

@@ -21,10 +21,10 @@ import ConfigPrompt from '@/app/components/app/configuration/config-prompt'
 import ConfigVar from '@/app/components/app/configuration/config-var'
 import type { CitationConfig, ModelConfig, ModerationConfig, MoreLikeThisConfig, PromptVariable, SpeechToTextConfig, SuggestedQuestionsAfterAnswerConfig } from '@/models/debug'
 import { AppType, ModelModeType } from '@/types/app'
-import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
 import ConfigParamModal from '@/app/components/app/configuration/toolbox/annotation/config-param-modal'
 import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
+import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 
 const Config: FC = () => {
   const {
@@ -55,7 +55,7 @@ const Config: FC = () => {
     setModerationConfig,
   } = useContext(ConfigContext)
   const isChatApp = mode === AppType.chat
-  const { speech2textDefaultModel } = useProviderContext()
+  const { data: speech2textDefaultModel } = useDefaultModel(4)
   const { setShowModerationSettingModal } = useModalContext()
 
   const promptTemplate = modelConfig.configs.prompt_template

web/app/components/app/configuration/dataset-config/params-config/index.tsx

@@ -12,15 +12,14 @@ import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import RadioCard from '@/app/components/base/radio-card/simple'
 import { RETRIEVE_TYPE } from '@/types/app'
-import ModelSelector from '@/app/components/header/account-setting/model-page/model-selector'
-import { useProviderContext } from '@/context/provider-context'
-import { ModelType } from '@/app/components/header/account-setting/model-page/declarations'
 import Toast from '@/app/components/base/toast'
 import { DATASET_DEFAULT } from '@/config'
 import {
   MultiPathRetrieval,
   NTo1Retrieval,
 } from '@/app/components/base/icons/src/public/common'
+import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 
 const ParamsConfig: FC = () => {
   const { t } = useTranslation()
@@ -38,11 +37,11 @@ const ParamsConfig: FC = () => {
       retrieval_model: value,
     })
   }
-
   const {
-    rerankDefaultModel,
-    isRerankDefaultModelVaild,
-  } = useProviderContext()
+    modelList: rerankModelList,
+    defaultModel: rerankDefaultModel,
+    currentModel: isRerankDefaultModelVaild,
+  } = useModelListAndDefaultModelAndCurrentProviderAndModel(3)
 
   const rerankModel = (() => {
     if (tempDataSetConfigs.reranking_model) {
@@ -53,8 +52,8 @@ const ParamsConfig: FC = () => {
     }
     else if (rerankDefaultModel) {
       return {
-        provider_name: rerankDefaultModel.model_provider.provider_name,
-        model_name: rerankDefaultModel.model_name,
+        provider_name: rerankDefaultModel.provider.provider,
+        model_name: rerankDefaultModel.model,
       }
     }
   })()
@@ -104,8 +103,8 @@ const ParamsConfig: FC = () => {
     const config = { ...tempDataSetConfigs }
     if (config.retrieval_model === RETRIEVE_TYPE.multiWay && !config.reranking_model) {
       config.reranking_model = {
-        reranking_provider_name: rerankDefaultModel?.model_provider.provider_name,
-        reranking_model_name: rerankDefaultModel?.model_name,
+        reranking_provider_name: rerankDefaultModel?.provider,
+        reranking_model_name: rerankDefaultModel?.model,
       } as any
     }
     setDatasetConfigs(config)
@@ -163,18 +162,17 @@ const ParamsConfig: FC = () => {
                   <div className='leading-[32px] text-[13px] font-medium text-gray-900'>{t('common.modelProvider.rerankModel.key')}</div>
                   <div>
                     <ModelSelector
-                      popClassName='!max-w-[100%] !w-full'
-                      value={rerankModel && { providerName: rerankModel.provider_name, modelName: rerankModel.model_name } as any}
-                      modelType={ModelType.reranking}
-                      onChange={(v) => {
+                      defaultModel={rerankModel && { provider: rerankModel?.provider_name, model: rerankModel?.model_name }}
+                      onSelect={(v) => {
                         setTempDataSetConfigs({
                           ...tempDataSetConfigs,
                           reranking_model: {
-                            reranking_provider_name: v.model_provider.provider_name,
-                            reranking_model_name: v.model_name,
+                            reranking_provider_name: v.provider,
+                            reranking_model_name: v.model,
                           },
                         })
                       }}
+                      modelList={rerankModelList}
                     />
                   </div>
                 </div>