frontend for model runtime (#1861)

Co-authored-by: Joel <iamjoel007@gmail.com>

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

                     className={cn(s.copyBtn, 'mr-1')}
                   />
                 )}
-                {supportAnnotation && (
+                {(supportAnnotation && !item.isOpeningStatement) && (
                   <AnnotationCtrlBtn
                     appId={appId!}
                     messageId={id}

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

         }
       },
       onMessageEnd: (messageEnd) => {
-        // TODO
         if (messageEnd.metadata?.annotation_reply) {
           responseItem.id = messageEnd.id
           responseItem.annotation = ({
       onMessageReplace: (messageReplace) => {
         responseItem.content = messageReplace.answer
       },
-      onAnnotationReply: (annotationReply) => {
-        // TODO: temp debug
-        responseItem.id = annotationReply.id
-        responseItem.content = annotationReply.answer
-        responseItem.annotation = ({
-          id: annotationReply.annotation_id,
-          authorName: annotationReply.annotation_author_name,
-        } as AnnotationType)
-        const newListWithAnswer = produce(
-          getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
-          (draft) => {
-            if (!draft.find(item => item.id === questionId))
-              draft.push({ ...questionItem })
-
-            draft.push({
-              ...responseItem,
-              id: annotationReply.id,
-            })
-          })
-        setChatList(newListWithAnswer)
-      },
       onError() {
         setResponsingFalse()
         // role back placeholder answer

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

       ...visionConfig,
       enabled: supportVision,
     }, true)
+    setCompletionParams({})
   }
 
   const isShowVisionConfig = !!currModel?.features?.includes(ModelFeatureEnum.vision)
                 onCompletionParamsChange={(newParams: FormValue) => {
                   setCompletionParams(newParams)
                 }}
-                disabled={!hasSettedApiKey}
               />
               <div className='w-[1px] h-[14px] bg-gray-200'></div>
               <Button onClick={() => setShowConfirm(true)} className='shrink-0 mr-2 w-[70px] !h-8 !text-[13px] font-medium'>{t('appDebug.operation.resetConfig')}</Button>

web/app/components/datasets/create/step-two/index.tsx

                     </div>
                   </div>
                   <div className={s.formFooter}>
-                    <Button type="primary" className={cn(s.button, '!h-8 text-primary-600')} onClick={confirmChangeCustomConfig}>{t('datasetCreation.stepTwo.preview')}</Button>
+                    <Button type="primary" className={cn(s.button, '!h-8')} onClick={confirmChangeCustomConfig}>{t('datasetCreation.stepTwo.preview')}</Button>
                     <Button className={cn(s.button, 'ml-2 !h-8')} onClick={resetRules}>{t('datasetCreation.stepTwo.reset')}</Button>
                   </div>
                 </div>

web/app/components/header/account-setting/model-provider-page/declarations.ts

   noPermission = 'no-permission',
 }
 
-export const MODEL_STATUS_TEXT = {
-  [ModelStatusEnum.noConfigure]: {
+export const MODEL_STATUS_TEXT: { [k: string]: TypeWithI18N } = {
+  'no-configure': {
     en_US: 'No Configure',
     zh_Hans: '未配置凭据',
   },
-  [ModelStatusEnum.quotaExceeded]: {
+  'quota-exceeded': {
     en_US: 'Quota Exceeded',
     zh_Hans: '额度不足',
   },
-  [ModelStatusEnum.noPermission]: {
+  'no-permission': {
     en_US: 'No Permission',
     zh_Hans: '无使用权限',
   },

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

 import ProviderAddedCard, { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
 import ProviderCard from './provider-card'
 import type {
-  ConfigurateMethodEnum,
   CustomConfigrationModelFixedFields,
   ModelProvider,
 } from './declarations'
-import { CustomConfigurationStatusEnum } from './declarations'
+import {
+  ConfigurateMethodEnum,
+  CustomConfigurationStatusEnum,
+} from './declarations'
 import {
   useDefaultModel,
   useUpdateModelProvidersAndModelList,
       onSaveCallback: () => {
         updateModelProvidersAndModelList()
 
-        if (customConfigrationModelFixedFields && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
+        if (configurateMethod === ConfigurateMethodEnum.customizableModel && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
           eventEmitter?.emit({
             type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
             payload: provider.provider,

web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx

   validating: boolean
   validatedSuccess?: boolean
   showOnVariableMap: Record<string, string[]>
+  isEditMode: boolean
 }
 
 const Form: FC<FormProps> = ({
   validating,
   validatedSuccess,
   showOnVariableMap,
+  isEditMode,
 }) => {
   const language = useLanguage()
   const [changeKey, setChangeKey] = useState('')
 
   const handleFormChange = (key: string, val: string) => {
+    if (isEditMode && (key === '__model_type' || key === '__model_name'))
+      return
+
     setChangeKey(key)
     const shouldClearVariable: Record<string, string | undefined> = {}
     if (showOnVariableMap[key]?.length) {
       if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
         return null
 
+      const disabed = isEditMode && (variable === '__model_type' || variable === '__model_name')
+
       return (
         <div key={variable} className='py-3'>
           <div className='py-2 text-sm text-gray-900'>
             }
           </div>
           <Input
+            className={`${disabed && 'cursor-not-allowed opacity-60'}`}
             value={value[variable] as string}
             onChange={val => handleFormChange(variable, val)}
             validated={validatedSuccess}
             placeholder={placeholder?.[language]}
+            disabled={disabed}
           />
           {validating && changeKey === variable && <ValidatingTip />}
         </div>
       if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
         return null
 
+      const disabed = isEditMode && (variable === '__model_type' || variable === '__model_name')
+
       return (
         <div key={variable} className='py-3'>
           <div className='py-2 text-sm text-gray-900'>
                   className={`
                     flex items-center px-3 py-2 rounded-lg border border-gray-100 bg-gray-25 cursor-pointer
                     ${value[variable] === option.value && 'bg-white border-[1.5px] border-primary-400 shadow-sm'}
+                    ${disabed && '!cursor-not-allowed opacity-60'}
                   `}
                   onClick={() => handleFormChange(variable, option.value)}
                   key={`${variable}-${option.value}`}

web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx

   onFocus?: () => void
   placeholder?: string
   validated?: boolean
+  className?: string
+  disabled?: boolean
 }
 const Input: FC<InputProps> = ({
   value,
   onFocus,
   placeholder,
   validated,
+  className,
+  disabled,
 }) => {
   return (
     <div className='relative'>
           focus:bg-white focus:border-gray-300 focus:shadow-xs
           placeholder:text-sm placeholder:text-gray-400
           ${validated && 'pr-[30px]'}
+          ${className}
         `}
         placeholder={placeholder || ''}
         onChange={e => onChange(e.target.value)}
         onFocus={onFocus}
         value={value || ''}
+        disabled={disabled}
       />
       {
         validated && (

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

                 validating={validating}
                 validatedSuccess={validatedStatusState.status === ValidatedStatus.Success}
                 showOnVariableMap={showOnVariableMap}
+                isEditMode={isEditMode}
               />
               <div className='sticky bottom-0 flex justify-between items-center py-6 flex-wrap gap-y-2 bg-white'>
                 {
           {
             showConfirm && (
               <ConfirmCommon
-                title='Are you sure?'
+                title={t('common.modelProvider.confirmDelete')}
                 isShow={showConfirm}
                 onCancel={() => setShowConfirm(false)}
                 onConfirm={handleRemove}

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

       `}
     >
       <div
-        className='mr-2 truncate'
+        className='mr-1 truncate'
         title={modelItem.label[language]}
       >
         {modelItem.label[language]}
       </div>
       {
-        showModelType && (
+        showModelType && modelItem.model_type && (
           <ModelBadge className={`mr-0.5 ${modelTypeClassName}`}>
             {modelTypeFormat(modelItem.model_type)}
           </ModelBadge>

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

 import type { FC } from 'react'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import type {
   FormValue,
   ModelParameterRule,
 } from '../declarations'
+import {
+  MODEL_STATUS_TEXT,
+  ModelStatusEnum,
+} from '../declarations'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
 import ModelSelector from '../model-selector'
-import { useTextGenerationCurrentProviderAndModelAndModelList } from '../hooks'
+import {
+  useLanguage,
+  useTextGenerationCurrentProviderAndModelAndModelList,
+} from '../hooks'
 import ParameterItem from './parameter-item'
 import type { ParameterValue } from './parameter-item'
 import {
 import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
 import { fetchModelParameterRules } from '@/service/common'
 import Loading from '@/app/components/base/loading'
+import { useProviderContext } from '@/context/provider-context'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type ModelParameterModalProps = {
   isAdvancedMode: boolean
   setModel: (model: { modelId: string; provider: string; mode?: string; features: string[] }) => void
   completionParams: FormValue
   onCompletionParamsChange: (newParams: FormValue) => void
-  disabled: boolean
 }
 const stopParameerRule: ModelParameterRule = {
   default: [],
   },
   label: {
     en_US: 'Stop sequences',
-    zh_Hans: '停止序列 stop_sequences',
+    zh_Hans: '停止序列',
   },
   name: 'stop',
   required: false,
   setModel,
   completionParams,
   onCompletionParamsChange,
-  disabled,
 }) => {
   const { t } = useTranslation()
+  const language = useLanguage()
+  const { hasSettedApiKey, modelProviders } = useProviderContext()
   const [open, setOpen] = useState(false)
   const { data: parameterRulesData, isLoading } = useSWR(`/workspaces/current/model-providers/${provider}/models/parameter-rules?model=${modelId}`, fetchModelParameterRules)
   const {
     { provider, model: modelId },
   )
 
-  const parameterRules = parameterRulesData?.data || []
+  const hasDeprecated = !currentProvider || !currentModel
+  const modelDisabled = currentModel?.status !== ModelStatusEnum.active
+  const disabled = !hasSettedApiKey || hasDeprecated || modelDisabled
+
+  const parameterRules = useMemo(() => {
+    return parameterRulesData?.data || []
+  }, [parameterRulesData])
 
   const handleParamChange = (key: string, value: ParameterValue) => {
     onCompletionParamsChange({
     })
   }
 
-  const handleChangeParams = () => {
-    const newCompletionParams = parameterRules.reduce((acc, parameter) => {
-      if (parameter.default !== undefined)
-        acc[parameter.name] = parameter.default
-
-      return acc
-    }, {} as Record<string, any>)
-
-    onCompletionParamsChange(newCompletionParams)
-  }
-
-  useEffect(() => {
-    handleChangeParams()
-  }, [parameterRules])
-
   const handleSwitch = (key: string, value: boolean, assignValue: ParameterValue) => {
     if (!value) {
       const newCompletionParams = { ...completionParams }
     }
   }
 
+  const handleInitialParams = () => {
+    if (parameterRules.length) {
+      const newCompletionParams = { ...completionParams }
+      Object.keys(newCompletionParams).forEach((key) => {
+        if (!parameterRules.find(item => item.name === key))
+          delete newCompletionParams[key]
+      })
+
+      onCompletionParamsChange(newCompletionParams)
+    }
+  }
+
+  useEffect(() => {
+    handleInitialParams()
+  }, [parameterRules])
+
   return (
     <PortalToFollowElem
       open={open}
                 />
               )
             }
+            {
+              !currentProvider && (
+                <ModelIcon
+                  className='mr-1.5 !w-5 !h-5'
+                  provider={modelProviders.find(item => item.provider === provider)}
+                  modelName={modelId}
+                />
+              )
+            }
             {
               currentModel && (
                 <ModelName
                   className='mr-1.5 text-gray-900'
                   modelItem={currentModel}
-                  showMode={isAdvancedMode}
+                  showMode
                   modeClassName='!text-[#444CE7] !border-[#A4BCFD]'
-                  showFeatures={isAdvancedMode}
+                  showFeatures
                   featuresClassName='!text-[#444CE7] !border-[#A4BCFD]'
                 />
               )
             }
+            {
+              !currentModel && (
+                <div className='mr-1 text-[13px] font-medium text-gray-900 truncate'>
+                  {modelId}
+                </div>
+              )
+            }
             {
               disabled
                 ? (
-                  <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+                  <TooltipPlus
+                    popupContent={
+                      hasDeprecated
+                        ? t('common.modelProvider.deprecated')
+                        : (modelDisabled && currentModel)
+                          ? MODEL_STATUS_TEXT[currentModel.status as string][language]
+                          : ''
+                    }
+                  >
+                    <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+                  </TooltipPlus>
                 )
                 : (
                   <SlidersH className='w-4 h-4 text-indigo-600' />
               <CubeOutline className='mr-2 w-4 h-4 text-primary-600' />
               {t('common.modelProvider.modelAndParameters')}
             </div>
-            <div className='px-10 pt-4 pb-8'>
+            <div className='max-h-[480px] px-10 pt-4 pb-8 overflow-y-auto'>
               <div className='flex items-center justify-between h-8'>
                 <div className='text-sm font-medium text-gray-900'>
                   {t('common.modelProvider.model')}
                   onSelect={handleChangeModel}
                 />
               </div>
-              <div className='my-5 h-[1px] bg-gray-100' />
+              {
+                !!parameterRules.length && (
+                  <div className='my-5 h-[1px] bg-gray-100' />
+                )
+              }
               {
                 isLoading && (
-                  <Loading />
+                  <div className='mt-5'><Loading /></div>
                 )
               }
               {
-                !isLoading && (
+                !isLoading && !!parameterRules.length && (
                   [
                     ...parameterRules,
                     ...(isAdvancedMode ? [stopParameerRule] : []),

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx

   const language = useLanguage()
   const [localValue, setLocalValue] = useState(value)
   const mergedValue = isNullOrUndefined(value) ? localValue : value
-  const renderValue = mergedValue === undefined ? parameterRule.default : mergedValue
+
+  const getDefaultValue = () => {
+    let defaultValue: ParameterValue
+
+    if (parameterRule.type === 'int' || parameterRule.type === 'float') {
+      if (isNullOrUndefined(parameterRule.default)) {
+        if (parameterRule.min)
+          defaultValue = parameterRule.min
+        else
+          defaultValue = 0
+      }
+      else {
+        defaultValue = parameterRule.default
+      }
+    }
+
+    if (parameterRule.type === 'string' && !parameterRule.options?.length)
+      defaultValue = parameterRule.default || ''
+
+    if (parameterRule.type === 'string' && parameterRule.options?.length)
+      defaultValue = parameterRule.default || ''
+
+    if (parameterRule.type === 'boolean')
+      defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : false
+
+    if (parameterRule.type === 'tag')
+      defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : []
+
+    return defaultValue
+  }
+  const renderValue = isNullOrUndefined(mergedValue) ? getDefaultValue() : mergedValue
 
   const handleChange = (v: ParameterValue) => {
     setLocalValue(v)
     if (onSwitch) {
       let assignValue: ParameterValue = localValue
 
-      if (isNullOrUndefined(localValue)) {
-        if (parameterRule.type === 'int' || parameterRule.type === 'float')
-          assignValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : 0
-
-        if (parameterRule.type === 'string' && !parameterRule.options?.length)
-          assignValue = parameterRule.default || ''
-
-        if (parameterRule.type === 'string' && parameterRule.options?.length)
-          assignValue = parameterRule.options[0]
-
-        if (parameterRule.type === 'boolean')
-          assignValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : false
-
-        if (parameterRule.type === 'tag')
-          assignValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : []
-      }
+      if (isNullOrUndefined(localValue))
+        assignValue = getDefaultValue()
 
       onSwitch(checked, assignValue)
     }
           <div className='flex items-center'>
             <Slider
               className='w-[120px]'
-              value={isNullOrUndefined(renderValue) ? 0 : +renderValue!}
+              value={renderValue as number}
               min={parameterRule.min}
               max={parameterRule.max}
               step={+`0.${parameterRule.precision || 0}`}
               max={parameterRule.max}
               min={parameterRule.min}
               step={+`0.${parameterRule.precision || 0}`}
-              value={isNullOrUndefined(renderValue) ? 0 : +renderValue!}
+              value={renderValue as string}
               onChange={handleNumberInputChange}
             />
           </div>
         parameterRule.type === 'boolean' && (
           <Radio.Group
             className='w-[200px] flex items-center'
-            value={isNullOrUndefined(renderValue) ? 1 : 0}
+            value={renderValue ? 1 : 0}
             onChange={handleRadioChange}
           >
             <Radio value={1} className='!mr-1 w-[94px]'>True</Radio>
           <input
             type='number'
             className='flex items-center px-3 w-[200px] h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
-            value={(isNullOrUndefined(renderValue) ? '' : renderValue) as string}
+            value={renderValue as string}
             onChange={handleNumberInputChange}
           />
         )
         parameterRule.type === 'string' && !parameterRule.options?.length && (
           <input
             className='flex items-center px-3 w-[200px] h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
-            value={(isNullOrUndefined(renderValue) ? '' : renderValue) as string}
+            value={renderValue as string}
             onChange={handleStringInputChange}
           />
         )
       }
       {
-        parameterRule.type === 'string' && parameterRule?.options?.length && (
+        parameterRule.type === 'string' && !!parameterRule?.options?.length && (
           <SimpleSelect
             className='!py-0'
             wrapperClassName='!w-[200px] !h-8'
         parameterRule.type === 'tag' && (
           <div className='w-[200px]'>
             <TagInput
-              items={isNullOrUndefined(renderValue) ? [] : (renderValue as string[])}
+              items={renderValue as string[]}
               onChange={handleTagChange}
               customizedConfirmKey='Tab'
             />

web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx

+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import ModelIcon from '../model-icon'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import { useProviderContext } from '@/context/provider-context'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
+
+type ModelTriggerProps = {
+  modelName: string
+  providerName: string
+  className?: string
+}
+const ModelTrigger: FC<ModelTriggerProps> = ({
+  modelName,
+  providerName,
+  className,
+}) => {
+  const { t } = useTranslation()
+  const { modelProviders } = useProviderContext()
+  const currentProvider = modelProviders.find(provider => provider.provider === providerName)
+
+  return (
+    <div
+      className={`
+        group flex items-center px-2 h-8 rounded-lg bg-[#FFFAEB] cursor-pointer
+        ${className}
+      `}
+    >
+      <ModelIcon
+        className='shrink-0 mr-1.5'
+        provider={currentProvider}
+        modelName={modelName}
+      />
+      <div className='mr-1 text-[13px] font-medium text-gray-800 truncate'>
+        {modelName}
+      </div>
+      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
+        <TooltipPlus popupContent={t('common.modelProvider.deprecated')}>
+          <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+        </TooltipPlus>
+      </div>
+    </div>
+  )
+}
+
+export default ModelTrigger

web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx

   ModelFeatureTextEnum,
 } from '../declarations'
 import {
-  MagicBox,
+  // MagicBox,
   MagicEyes,
-  MagicWand,
-  Robot,
+  // MagicWand,
+  // Robot,
 } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 }) => {
   const { t } = useTranslation()
 
-  if (feature === ModelFeatureEnum.agentThought) {
-    return (
-      <TooltipPlus
-        popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.agentThought })}
-      >
-        <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
-          <Robot className='w-3 h-3' />
-        </ModelBadge>
-      </TooltipPlus>
-    )
-  }
+  // if (feature === ModelFeatureEnum.agentThought) {
+  //   return (
+  //     <TooltipPlus
+  //       popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.agentThought })}
+  //     >
+  //       <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
+  //         <Robot className='w-3 h-3' />
+  //       </ModelBadge>
+  //     </TooltipPlus>
+  //   )
+  // }
 
-  if (feature === ModelFeatureEnum.toolCall) {
-    return (
-      <TooltipPlus
-        popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.toolCall })}
-      >
-        <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
-          <MagicWand className='w-3 h-3' />
-        </ModelBadge>
-      </TooltipPlus>
-    )
-  }
+  // if (feature === ModelFeatureEnum.toolCall) {
+  //   return (
+  //     <TooltipPlus
+  //       popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.toolCall })}
+  //     >
+  //       <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
+  //         <MagicWand className='w-3 h-3' />
+  //       </ModelBadge>
+  //     </TooltipPlus>
+  //   )
+  // }
 
-  if (feature === ModelFeatureEnum.multiToolCall) {
-    return (
-      <TooltipPlus
-        popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.multiToolCall })}
-      >
-        <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
-          <MagicBox className='w-3 h-3' />
-        </ModelBadge>
-      </TooltipPlus>
-    )
-  }
+  // if (feature === ModelFeatureEnum.multiToolCall) {
+  //   return (
+  //     <TooltipPlus
+  //       popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.multiToolCall })}
+  //     >
+  //       <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
+  //         <MagicBox className='w-3 h-3' />
+  //       </ModelBadge>
+  //     </TooltipPlus>
+  //   )
+  // }
 
   if (feature === ModelFeatureEnum.vision) {
     return (

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

 import { useCurrentProviderAndModel } from '../hooks'
 import ModelTrigger from './model-trigger'
 import EmptyTrigger from './empty-trigger'
+import DeprecatedModelTrigger from './deprecated-model-trigger'
 import Popup from './popup'
 import {
   PortalToFollowElem,
             )
           }
           {
-            !currentModel && (
+            !currentModel && defaultModel && (
+              <DeprecatedModelTrigger
+                modelName={defaultModel?.model || ''}
+                providerName={defaultModel?.provider || ''}
+                className={triggerClassName}
+              />
+            )
+          }
+          {
+            !defaultModel && (
               <EmptyTrigger
                 open={open}
                 className={triggerClassName}

web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx

   Model,
   ModelItem,
 } from '../declarations'
+import {
+  MODEL_STATUS_TEXT,
+  ModelStatusEnum,
+} from '../declarations'
+import { useLanguage } from '../hooks'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
-// import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type ModelTriggerProps = {
   open: boolean
   model,
   className,
 }) => {
+  const language = useLanguage()
+
   return (
     <div
       className={`
         group flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer
         ${className}
         ${open && '!bg-gray-200'}
+        ${model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
       `}
     >
       <ModelIcon
         showFeatures
       />
       <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-        <ChevronDown
-          className='w-3.5 h-3.5 text-gray-500'
-        />
+        {
+          model.status !== ModelStatusEnum.active
+            ? (
+              <TooltipPlus popupContent={MODEL_STATUS_TEXT[model.status][language]}>
+                <AlertTriangle className='w-4 h-4 text-[#F79009]' />
+              </TooltipPlus>
+            )
+            : (
+              <ChevronDown
+                className='w-3.5 h-3.5 text-gray-500'
+              />
+            )
+        }
       </div>
     </div>
   )

web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx

                 showFeatures
               />
               {
-                defaultModel?.model === modelItem.model && (
+                defaultModel?.model === modelItem.model && defaultModel.provider === currentProvider.provider && (
                   <Check className='shrink-0 w-4 h-4 text-primary-600' />
                 )
               }

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

 import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
 import { fetchModelProviderModelList } from '@/service/common'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { IS_CE_EDITION } from '@/config'
 
 export const UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST = 'UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST'
 type ProviderAddedCardProps = {
   const configurateMethods = provider.configurate_methods.filter(method => method !== ConfigurateMethodEnum.fetchFromRemote)
   const systemConfig = provider.system_configuration
   const hasModelList = fetched && !!modelList.length
-  const showQuota = systemConfig.enabled || ['minimax', 'spark', 'zhipuai', 'anthropic'].includes(provider.provider)
+  const showQuota = systemConfig.enabled && ['minimax', 'spark', 'zhipuai', 'anthropic', 'openai'].includes(provider.provider) && !IS_CE_EDITION
 
   const getModelList = async (providerName: string) => {
     if (loading)

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx

               className={`
                 group flex items-center pl-2 pr-2.5 h-8 rounded-lg
                 ${canCustomConfig && 'hover:bg-gray-50'}
+                ${model.deprecated && 'opacity-60'}
               `}
             >
-              <div className='shrink-0 mr-2' style={{ background: provider.icon_small[language] }} />
               <ModelIcon
                 className='shrink-0 mr-2'
                 provider={provider}

web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx

 import PriorityUseTip from './priority-use-tip'
 import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Button from '@/app/components/base/button'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type QuotaPanelProps = {
   provider: ModelProvider
   const priorityUseType = provider.preferred_provider_type
   const systemConfig = provider.system_configuration
   const currentQuota = systemConfig.enabled && systemConfig.quota_configurations.find(item => item.quota_type === systemConfig.current_quota_type)
+  const openaiOrAnthropic = ['openai', 'anthropic'].includes(provider.provider)
 
   return (
     <div className='group relative shrink-0 min-w-[112px] px-3 py-2 rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'>
       <div className='flex items-center mb-2 h-4 text-xs font-medium text-gray-500'>
         {t('common.modelProvider.quota')}
-        <InfoCircle className='ml-0.5 w-3 h-3 text-gray-400' />
+        <TooltipPlus popupContent={
+          openaiOrAnthropic
+            ? t('common.modelProvider.card.tip')
+            : t('common.modelProvider.quotaTip')
+        }>
+          <InfoCircle className='ml-0.5 w-3 h-3 text-gray-400' />
+        </TooltipPlus>
       </div>
       {
         currentQuota && (

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

 import { Plus, Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import { CoinsStacked01 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import Button from '@/app/components/base/button'
+import { IS_CE_EDITION } from '@/config'
 
 type ProviderCardProps = {
   provider: ModelProvider
   }
   const handleFreeQuota = useFreeQuota(handleFreeQuotaSuccess)
   const configurateMethods = provider.configurate_methods.filter(method => method !== ConfigurateMethodEnum.fetchFromRemote)
-  const canGetFreeQuota = ['mininmax', 'spark', 'zhipuai'].includes(provider.provider)
+  const canGetFreeQuota = ['mininmax', 'spark', 'zhipuai'].includes(provider.provider) && !IS_CE_EDITION
 
   return (
     <div
             })
           }
           {
-            provider.provider === 'anthropic' && (
+            provider.provider === 'anthropic' && !IS_CE_EDITION && (
               <Button
                 className='h-7 text-xs text-gray-700'
                 onClick={handlePay}

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

 import type { VisionFile, VisionSettings } from '@/types/app'
 import { Resolution, TransferMethod } from '@/types/app'
 import { fetchFileUploadConfig } from '@/service/common'
+import type { Annotation as AnnotationType } from '@/models/log'
 
 export type IMainProps = {
   isInstalledApp?: boolean
         }
         setResponsingFalse()
       },
-      onMessageEnd: isInstalledApp
-        ? (messageEnd) => {
-          if (!isInstalledApp)
-            return
-          responseItem.citation = messageEnd.retriever_resources
-
+      onMessageEnd: (messageEnd) => {
+        if (messageEnd.metadata?.annotation_reply) {
+          responseItem.id = messageEnd.id
+          responseItem.annotation = ({
+            id: messageEnd.metadata.annotation_reply.id,
+            authorName: messageEnd.metadata.annotation_reply.account.name,
+          } as AnnotationType)
           const newListWithAnswer = produce(
             getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
             (draft) => {
               if (!draft.find(item => item.id === questionId))
                 draft.push({ ...questionItem })
 
-              draft.push({ ...responseItem })
+              draft.push({
+                ...responseItem,
+              })
             })
           setChatList(newListWithAnswer)
+          return
         }
-        : undefined,
+        // not support show citation
+        // responseItem.citation = messageEnd.retriever_resources
+        if (!isInstalledApp)
+          return
+        const newListWithAnswer = produce(
+          getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
+          (draft) => {
+            if (!draft.find(item => item.id === questionId))
+              draft.push({ ...questionItem })
+
+            draft.push({ ...responseItem })
+          })
+        setChatList(newListWithAnswer)
+      },
       onMessageReplace: (messageReplace) => {
         if (isInstalledApp) {
           responseItem.content = messageReplace.answer
           ))
         }
       },
-      onAnnotationReply: (annotationReply) => {
-        responseItem.content = annotationReply.answer
-        const newListWithAnswer = produce(
-          getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
-          (draft) => {
-            if (!draft.find(item => item.id === questionId))
-              draft.push({ ...questionItem })
-
-            draft.push({
-              ...responseItem,
-              id: annotationReply.id,
-            })
-          })
-        setChatList(newListWithAnswer)
-        tempNewConversationId = annotationReply.conversation_id
-      },
       onError() {
         setResponsingFalse()
         // role back placeholder answer

web/i18n/lang/common.en.ts

     buyQuota: 'Buy Quota',
     getFreeTokens: 'Get free Tokens',
     priorityUsing: 'Prioritize using',
+    deprecated: 'Deprecated',
+    confirmDelete: 'confirm deletion?',
+    quotaTip: 'Remaining available free tokens',
   },
   dataSource: {
     add: 'Add a data source',

web/i18n/lang/common.zh.ts

     buyQuota: '购买额度',
     getFreeTokens: '获得免费 Tokens',
     priorityUsing: '优先使用',
+    deprecated: '已弃用',
+    confirmDelete: '确认删除?',
+    quotaTip: '剩余免费额度',
   },
   dataSource: {
     add: '添加数据源',

web/service/base.ts

   onThought?: IOnThought
   onMessageEnd?: IOnMessageEnd
   onMessageReplace?: IOnMessageReplace
-  onAnnotationReply?: IOnAnnotationReply
   onError?: IOnError
   onCompleted?: IOnCompleted // for stream
   getAbortController?: (abortController: AbortController) => void
   return res.replaceAll('\n', '<br/>').replaceAll('```', '')
 }
 
-const handleStream = (response: Response, onData: IOnData, onCompleted?: IOnCompleted, onThought?: IOnThought, onMessageEnd?: IOnMessageEnd, onMessageReplace?: IOnMessageReplace, onAnnotationReply?: IOnAnnotationReply) => {
+const handleStream = (response: Response, onData: IOnData, onCompleted?: IOnCompleted, onThought?: IOnThought, onMessageEnd?: IOnMessageEnd, onMessageReplace?: IOnMessageReplace) => {
   if (!response.ok)
     throw new Error('Network response was not ok')
 
               onThought?.(bufferObj as ThoughtItem)
             }
             else if (bufferObj.event === 'message_end') {
+              console.log(bufferObj)
               onMessageEnd?.(bufferObj as MessageEnd)
             }
             else if (bufferObj.event === 'message_replace') {
               onMessageReplace?.(bufferObj as MessageReplace)
             }
-            else if (bufferObj.event === 'annotation') {
-              onAnnotationReply?.(bufferObj as AnnotationReply)
-            }
           }
         })
         buffer = lines[lines.length - 1]
   })
 }
 
-export const ssePost = (url: string, fetchOptions: FetchOptionType, { isPublicAPI = false, onData, onCompleted, onThought, onMessageEnd, onMessageReplace, onAnnotationReply, onError, getAbortController }: IOtherOptions) => {
+export const ssePost = (url: string, fetchOptions: FetchOptionType, { isPublicAPI = false, onData, onCompleted, onThought, onMessageEnd, onMessageReplace, onError, getAbortController }: IOtherOptions) => {
   const abortController = new AbortController()
 
   const options = Object.assign({}, baseOptions, {
       }
       return handleStream(res, (str: string, isFirstMessage: boolean, moreInfo: IOnDataMoreInfo) => {
         if (moreInfo.errorMessage) {
-          // debugger
           onError?.(moreInfo.errorMessage, moreInfo.errorCode)
           if (moreInfo.errorMessage !== 'AbortError: The user aborted a request.')
             Toast.notify({ type: 'error', message: moreInfo.errorMessage })
           return
         }
         onData?.(str, isFirstMessage, moreInfo)
-      }, onCompleted, onThought, onMessageEnd, onMessageReplace, onAnnotationReply)
+      }, onCompleted, onThought, onMessageEnd, onMessageReplace)
     }).catch((e) => {
       if (e.toString() !== 'AbortError: The user aborted a request.')
         Toast.notify({ type: 'error', message: e })

web/service/debug.ts

-import type { IOnAnnotationReply, IOnCompleted, IOnData, IOnError, IOnMessageEnd, IOnMessageReplace } from './base'
+import type { IOnCompleted, IOnData, IOnError, IOnMessageEnd, IOnMessageReplace } from './base'
 import { get, post, ssePost } from './base'
 import type { ChatPromptConfig, CompletionPromptConfig } from '@/models/debug'
 import type { ModelModeType } from '@/types/app'
   opening_statement: string
 }
 
-export const sendChatMessage = async (appId: string, body: Record<string, any>, { onData, onCompleted, onError, getAbortController, onMessageEnd, onMessageReplace, onAnnotationReply }: {
+export const sendChatMessage = async (appId: string, body: Record<string, any>, { onData, onCompleted, onError, getAbortController, onMessageEnd, onMessageReplace }: {
   onData: IOnData
   onCompleted: IOnCompleted
   onMessageEnd: IOnMessageEnd
   onMessageReplace: IOnMessageReplace
-  onAnnotationReply: IOnAnnotationReply
   onError: IOnError
   getAbortController?: (abortController: AbortController) => void
 }) => {
       ...body,
       response_mode: 'streaming',
     },
-  }, { onData, onCompleted, onError, getAbortController, onMessageEnd, onMessageReplace, onAnnotationReply })
+  }, { onData, onCompleted, onError, getAbortController, onMessageEnd, onMessageReplace })
 }
 
 export const stopChatMessageResponding = async (appId: string, taskId: string) => {

web/service/share.ts

-import type { IOnAnnotationReply, IOnCompleted, IOnData, IOnError, IOnMessageEnd, IOnMessageReplace } from './base'
+import type { IOnCompleted, IOnData, IOnError, IOnMessageEnd, IOnMessageReplace } from './base'
 import {
   del as consoleDel, get as consoleGet, patch as consolePatch, post as consolePost,
   delPublic as del, getPublic as get, patchPublic as patch, postPublic as post, ssePost,
   return isInstalledApp ? `installed-apps/${installedAppId}/${url.startsWith('/') ? url.slice(1) : url}` : url
 }
 
-export const sendChatMessage = async (body: Record<string, any>, { onData, onCompleted, onError, getAbortController, onMessageEnd, onMessageReplace, onAnnotationReply }: {
+export const sendChatMessage = async (body: Record<string, any>, { onData, onCompleted, onError, getAbortController, onMessageEnd, onMessageReplace }: {
   onData: IOnData
   onCompleted: IOnCompleted
   onError: IOnError
   onMessageEnd?: IOnMessageEnd
   onMessageReplace?: IOnMessageReplace
-  onAnnotationReply: IOnAnnotationReply
   getAbortController?: (abortController: AbortController) => void
 }, isInstalledApp: boolean, installedAppId = '') => {
   return ssePost(getUrl('chat-messages', isInstalledApp, installedAppId), {
       ...body,
       response_mode: 'streaming',
     },
-  }, { onData, onCompleted, isPublicAPI: !isInstalledApp, onError, getAbortController, onMessageEnd, onMessageReplace, onAnnotationReply })
+  }, { onData, onCompleted, isPublicAPI: !isInstalledApp, onError, getAbortController, onMessageEnd, onMessageReplace })
 }
 
 export const stopChatMessageResponding = async (appId: string, taskId: string, isInstalledApp: boolean, installedAppId = '') => {