frontend for model runtime (#1861)

Co-authored-by: Joel <[email protected]>
langgenius · Jan 2, 2024 · d70d61b · d70d61b
1 parent d069c66
commit d70d61b
Show file tree

Hide file tree

Showing 29 changed files with 1,448 additions and 923 deletions.
diff --git a/web/app/components/app/chat/answer/index.tsx b/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}

diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
@@ -347,7 +347,6 @@ const Debug: FC<IDebug> = ({
         }
       },
       onMessageEnd: (messageEnd) => {
-        // TODO
         if (messageEnd.metadata?.annotation_reply) {
           responseItem.id = messageEnd.id
           responseItem.annotation = ({
@@ -382,27 +381,6 @@ const Debug: FC<IDebug> = ({
       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

diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
@@ -318,6 +318,7 @@ const Configuration: FC = () => {
       ...visionConfig,
       enabled: supportVision,
     }, true)
+    setCompletionParams({})
   }
 
   const isShowVisionConfig = !!currModel?.features?.includes(ModelFeatureEnum.vision)
@@ -656,7 +657,6 @@ const Configuration: FC = () => {
                 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>

diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
@@ -587,7 +587,7 @@ const StepTwo = ({
                     </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>

diff --git a/web/app/components/header/account-setting/model-provider-page/declarations.ts b/web/app/components/header/account-setting/model-provider-page/declarations.ts
@@ -61,16 +61,16 @@ export enum ModelStatusEnum {
   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: '无使用权限',
   },

diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx
@@ -4,11 +4,13 @@ import SystemModelSelector from './system-model-selector'
 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,
@@ -57,7 +59,7 @@ const ModelProviderPage = () => {
       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,

diff --git a/web/app/components/header/account-setting/model-provider-page/model-display/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-display/index.tsx
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -21,6 +21,7 @@ type FormProps = {
   validating: boolean
   validatedSuccess?: boolean
   showOnVariableMap: Record<string, string[]>
+  isEditMode: boolean
 }
 
 const Form: FC<FormProps> = ({
@@ -30,11 +31,15 @@ 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) {
@@ -58,6 +63,8 @@ const Form: FC<FormProps> = ({
       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'>
@@ -69,10 +76,12 @@ const Form: FC<FormProps> = ({
             }
           </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>
@@ -91,6 +100,8 @@ const Form: FC<FormProps> = ({
       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'>
@@ -113,6 +124,7 @@ const Form: FC<FormProps> = ({
                   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}`}

diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
@@ -7,13 +7,17 @@ type InputProps = {
   onFocus?: () => void
   placeholder?: string
   validated?: boolean
+  className?: string
+  disabled?: boolean
 }
 const Input: FC<InputProps> = ({
   value,
   onChange,
   onFocus,
   placeholder,
   validated,
+  className,
+  disabled,
 }) => {
   return (
     <div className='relative'>
@@ -26,11 +30,13 @@ const Input: FC<InputProps> = ({
           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 && (

diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -239,6 +239,7 @@ const ModelModal: FC<ModelModalProps> = ({
                 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'>
                 {
@@ -313,7 +314,7 @@ const ModelModal: FC<ModelModalProps> = ({
           {
             showConfirm && (
               <ConfirmCommon
-                title='Are you sure?'
+                title={t('common.modelProvider.confirmDelete')}
                 isShow={showConfirm}
                 onCancel={() => setShowConfirm(false)}
                 onConfirm={handleRemove}

diff --git a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
@@ -43,13 +43,13 @@ const ModelName: FC<ModelNameProps> = ({
       `}
     >
       <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>