Merge branch 'feat/support-free-try-app' of github.com:langgenius/dify into feat/support-free-try-app

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

@@ -13,10 +13,14 @@ import ConfigContext from '@/context/debug-configuration'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import Switch from '@/app/components/base/switch'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
+import { Resolution } from '@/types/app'
+import { noop } from 'lodash'
+import cn from '@/utils/classnames'
 
 const ConfigVision: FC = () => {
   const { t } = useTranslation()
-  const { isShowVisionConfig, isAllowVideoUpload } = useContext(ConfigContext)
+  const { isShowVisionConfig, isAllowVideoUpload, readonly } = useContext(ConfigContext)
   const file = useFeatures(s => s.features.file)
   const featuresStore = useFeaturesStore()
 
@@ -53,7 +57,7 @@ const ConfigVision: FC = () => {
     setFeatures(newFeatures)
   }, [featuresStore, isAllowVideoUpload])
 
-  if (!isShowVisionConfig)
+  if (!isShowVisionConfig || (readonly && !isImageEnabled))
     return null
 
   return (
@@ -74,37 +78,49 @@ const ConfigVision: FC = () => {
         />
       </div>
       <div className='flex shrink-0 items-center'>
-        {/* <div className='mr-2 flex items-center gap-0.5'>
+        {readonly ? (<>
-          <div className='text-text-tertiary system-xs-medium-uppercase'>{t('appDebug.vision.visionSettings.resolution')}</div>
+          <div className='mr-2 flex items-center gap-0.5'>
-          <Tooltip
+            <div className='system-xs-medium-uppercase text-text-tertiary'>{t('appDebug.vision.visionSettings.resolution')}</div>
-            popupContent={
+            <Tooltip
-              <div className='w-[180px]' >
+              popupContent={
-                {t('appDebug.vision.visionSettings.resolutionTooltip').split('\n').map(item => (
+                <div className='w-[180px]' >
-                  <div key={item}>{item}</div>
+                  {t('appDebug.vision.visionSettings.resolutionTooltip').split('\n').map(item => (
-                ))}
+                    <div key={item}>{item}</div>
-              </div>
+                  ))}
-            }
+                </div>
+              }
+            />
+          </div>
+          <div className='flex items-center gap-1'>
+            <OptionCard
+              title={t('appDebug.vision.visionSettings.high')}
+              selected={file?.image?.detail === Resolution.high}
+              onSelect={noop}
+              className={cn(
+                'cursor-not-allowed rounded-lg px-3  hover:shadow-none',
+                file?.image?.detail !== Resolution.high && 'hover:border-components-option-card-option-border',
+              )}
+            />
+            <OptionCard
+              title={t('appDebug.vision.visionSettings.low')}
+              selected={file?.image?.detail === Resolution.low}
+              onSelect={noop}
+              className={cn(
+                'cursor-not-allowed rounded-lg px-3  hover:shadow-none',
+                file?.image?.detail !== Resolution.low && 'hover:border-components-option-card-option-border',
+              )}
+            />
+          </div>
+        </>) : <>
+          <ParamConfig />
+          <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-regular'></div>
+          <Switch
+            defaultValue={isImageEnabled}
+            onChange={handleChange}
+            size='md'
           />
-        </div> */}
+        </>}
-        {/* <div className='flex items-center gap-1'>
+
-          <OptionCard
-            title={t('appDebug.vision.visionSettings.high')}
-            selected={file?.image?.detail === Resolution.high}
-            onSelect={() => handleChange(Resolution.high)}
-          />
-          <OptionCard
-            title={t('appDebug.vision.visionSettings.low')}
-            selected={file?.image?.detail === Resolution.low}
-            onSelect={() => handleChange(Resolution.low)}
-          />
-        </div> */}
-        <ParamConfig />
-        <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-regular'></div>
-        <Switch
-          defaultValue={isImageEnabled}
-          onChange={handleChange}
-          size='md'
-        />
       </div>
     </div>
   )

web/app/components/app/configuration/config/config-audio.tsx

@@ -16,7 +16,7 @@ const ConfigAudio: FC = () => {
   const { t } = useTranslation()
   const file = useFeatures(s => s.features.file)
   const featuresStore = useFeaturesStore()
-  const { isShowAudioConfig } = useContext(ConfigContext)
+  const { isShowAudioConfig, readonly } = useContext(ConfigContext)
 
   const isAudioEnabled = file?.allowed_file_types?.includes(SupportUploadFileTypes.audio) ?? false
 
@@ -44,7 +44,7 @@ const ConfigAudio: FC = () => {
     setFeatures(newFeatures)
   }, [featuresStore])
 
-  if (!isShowAudioConfig)
+  if (!isShowAudioConfig || (readonly && !isAudioEnabled))
     return null
 
   return (
@@ -64,14 +64,16 @@ const ConfigAudio: FC = () => {
           }
         />
       </div>
-      <div className='flex shrink-0 items-center'>
+      {!readonly && (
-        <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-subtle'></div>
+        <div className='flex shrink-0 items-center'>
-        <Switch
+          <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-subtle'></div>
-          defaultValue={isAudioEnabled}
+          <Switch
-          onChange={handleChange}
+            defaultValue={isAudioEnabled}
-          size='md'
+            onChange={handleChange}
-        />
+            size='md'
-      </div>
+          />
+        </div>
+      )}
     </div>
   )
 }

web/app/components/app/configuration/config/config-document.tsx

@@ -16,7 +16,7 @@ const ConfigDocument: FC = () => {
   const { t } = useTranslation()
   const file = useFeatures(s => s.features.file)
   const featuresStore = useFeaturesStore()
-  const { isShowDocumentConfig } = useContext(ConfigContext)
+  const { isShowDocumentConfig, readonly } = useContext(ConfigContext)
 
   const isDocumentEnabled = file?.allowed_file_types?.includes(SupportUploadFileTypes.document) ?? false
 
@@ -44,7 +44,7 @@ const ConfigDocument: FC = () => {
     setFeatures(newFeatures)
   }, [featuresStore])
 
-  if (!isShowDocumentConfig)
+  if (!isShowDocumentConfig || (readonly && !isDocumentEnabled))
     return null
 
   return (
@@ -64,14 +64,16 @@ const ConfigDocument: FC = () => {
           }
         />
       </div>
-      <div className='flex shrink-0 items-center'>
+      {!readonly && (
-        <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-subtle'></div>
+        <div className='flex shrink-0 items-center'>
-        <Switch
+          <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-subtle'></div>
-          defaultValue={isDocumentEnabled}
+          <Switch
-          onChange={handleChange}
+            defaultValue={isDocumentEnabled}
-          size='md'
+            onChange={handleChange}
-        />
+            size='md'
-      </div>
+          />
+        </div>
+      )}
     </div>
   )
 }

web/app/components/app/configuration/debug/debug-with-single-model/index.tsx

@@ -39,6 +39,7 @@ const DebugWithSingleModel = (
 ) => {
   const { userProfile } = useAppContext()
   const {
+    readonly,
     modelConfig,
     appId,
     inputs,
@@ -154,6 +155,7 @@ const DebugWithSingleModel = (
 
   return (
     <Chat
+      readonly={readonly}
       config={config}
       chatList={chatList}
       isResponding={isResponding}

web/app/components/app/configuration/preview.tsx

@@ -11,6 +11,7 @@ import Config from '@/app/components/app/configuration/config'
 import Debug from '@/app/components/app/configuration/debug'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { ModelModeType, Resolution, TransferMethod } from '@/types/app'
+import type { ModelConfig } from '@/models/debug'
 import { PromptMode } from '@/models/debug'
 import { ANNOTATION_DEFAULT, DEFAULT_AGENT_SETTING, DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -25,6 +26,7 @@ import { useGetTryAppDataSets, useGetTryAppInfo } from '@/service/use-try-app'
 import { noop } from 'lodash'
 import { correctModelProvider } from '@/utils'
 import { userInputsFormToPromptVariables } from '@/utils/model-config'
+import { useTextGenerationCurrentProviderAndModelAndModelList } from '../../header/account-setting/model-provider-page/hooks'
 
 type Props = {
   appId: string
@@ -81,7 +83,7 @@ const Configuration: FC<Props> = ({
   const dataSets = dataSetData?.data || []
   const isLoading = isLoadingAppDetail || isLoadingDatasets
 
-  const modelConfig = ((modelConfig?: BackendModelConfig) => {
+  const modelConfig: ModelConfig = ((modelConfig?: BackendModelConfig) => {
     if(isLoading || !modelConfig)
       return defaultModelConfig
 
@@ -138,7 +140,7 @@ const Configuration: FC<Props> = ({
         tools: [],
       } : DEFAULT_AGENT_SETTING,
     }
-    return newModelConfig
+    return (newModelConfig as any)
   })(appDetail?.model_config)
   const mode = appDetail?.mode
   // const isChatApp = ['chat', 'advanced-chat', 'agent-chat'].includes(mode!)
@@ -172,12 +174,14 @@ const Configuration: FC<Props> = ({
   const query = ''
   const completionParams = useState<FormValue>({})
 
-  // todo
+  const {
-  const currModel: {
+    currentModel: currModel,
-    features: ModelFeatureEnum[]
+  } = useTextGenerationCurrentProviderAndModelAndModelList(
-  } = {
+    {
-    features: [],
+      provider: modelConfig.provider,
-  }
+      model: modelConfig.model_id,
+    },
+  )
 
   const isShowVisionConfig = !!currModel?.features?.includes(ModelFeatureEnum.vision)
   const isShowDocumentConfig = !!currModel?.features?.includes(ModelFeatureEnum.document)
@@ -208,7 +212,7 @@ const Configuration: FC<Props> = ({
           number_limits: modelConfig.file_upload?.image?.number_limits || 3,
           transfer_methods: modelConfig.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
         },
-        enabled: true,
+        enabled: !!(modelConfig.file_upload?.enabled || modelConfig.file_upload?.image?.enabled),
         allowed_file_types: modelConfig.file_upload?.allowed_file_types || [],
         allowed_file_extensions: modelConfig.file_upload?.allowed_file_extensions || [...FILE_EXTS[SupportUploadFileTypes.image], ...FILE_EXTS[SupportUploadFileTypes.video]].map(ext => `.${ext}`),
         allowed_file_upload_methods: modelConfig.file_upload?.allowed_file_upload_methods || modelConfig.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],

web/app/components/base/action-button/index.tsx

@@ -50,13 +50,14 @@ function getActionButtonState(state: ActionButtonState) {
   }
 }
 
-const ActionButton = ({ className, size, state = ActionButtonState.Default, styleCss, children, ref, ...props }: ActionButtonProps) => {
+const ActionButton = ({ className, size, state = ActionButtonState.Default, styleCss, children, ref, disabled, ...props }: ActionButtonProps) => {
   return (
     <button
       type='button'
       className={classNames(
         actionButtonVariants({ className, size }),
         getActionButtonState(state),
+        disabled && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
       )}
       ref={ref}
       style={styleCss}

web/app/components/base/chat/chat/chat-input-area/index.tsx

@@ -27,8 +27,10 @@ import { useToastContext } from '@/app/components/base/toast'
 import FeatureBar from '@/app/components/base/features/new-feature-panel/feature-bar'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { TransferMethod } from '@/types/app'
+import { noop } from 'lodash-es'
 
 type ChatInputAreaProps = {
+  readonly?: boolean
   botName?: string
   showFeatureBar?: boolean
   showFileUpload?: boolean
@@ -44,6 +46,7 @@ type ChatInputAreaProps = {
   disabled?: boolean
 }
 const ChatInputArea = ({
+  readonly,
   botName,
   showFeatureBar,
   showFileUpload,
@@ -159,6 +162,7 @@ const ChatInputArea = ({
   const operation = (
     <Operation
       ref={holdSpaceRef}
+      readonly={readonly}
       fileConfig={visionConfig}
       speechToTextConfig={speechToTextConfig}
       onShowVoiceInput={handleShowVoiceInput}
@@ -194,7 +198,7 @@ const ChatInputArea = ({
                 className={cn(
                   'body-lg-regular w-full resize-none bg-transparent p-1 leading-6 text-text-primary outline-none',
                 )}
-                placeholder={t('common.chat.inputPlaceholder', { botName }) || ''}
+                placeholder={readonly ? t('common.chat.inputDisabledPlaceholder') : t('common.chat.inputPlaceholder', { botName }) || ''}
                 autoFocus
                 minRows={1}
                 onResize={handleTextareaResize}
@@ -211,6 +215,7 @@ const ChatInputArea = ({
                 onDragLeave={handleDragFileLeave}
                 onDragOver={handleDragFileOver}
                 onDrop={handleDropFile}
+                readOnly={readonly}
               />
             </div>
             {
@@ -232,7 +237,12 @@ const ChatInputArea = ({
           )
         }
       </div>
-      {showFeatureBar && <FeatureBar showFileUpload={showFileUpload} disabled={featureBarDisabled} onFeatureBarClick={onFeatureBarClick} />}
+      {showFeatureBar && <FeatureBar
+        showFileUpload={showFileUpload}
+        disabled={featureBarDisabled}
+        onFeatureBarClick={readonly ? noop : onFeatureBarClick}
+        hideEditEntrance={readonly}
+      />}
     </>
   )
 }

web/app/components/base/chat/chat/chat-input-area/operation.tsx

@@ -12,8 +12,10 @@ import ActionButton from '@/app/components/base/action-button'
 import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
 import type { FileUpload } from '@/app/components/base/features/types'
 import cn from '@/utils/classnames'
+import { noop } from 'lodash'
 
 type OperationProps = {
+  readonly?: boolean
   fileConfig?: FileUpload
   speechToTextConfig?: EnableType
   onShowVoiceInput?: () => void
@@ -22,6 +24,7 @@ type OperationProps = {
 }
 const Operation = (
   {
+    readonly,
     ref,
     fileConfig,
     speechToTextConfig,
@@ -43,12 +46,13 @@ const Operation = (
         ref={ref}
       >
         <div className='flex items-center space-x-1'>
-          {fileConfig?.enabled && <FileUploaderInChatInput fileConfig={fileConfig} />}
+          {fileConfig?.enabled && <FileUploaderInChatInput readonly={readonly} fileConfig={fileConfig} />}
           {
             speechToTextConfig?.enabled && (
               <ActionButton
                 size='l'
-                onClick={onShowVoiceInput}
+                disabled={readonly}
+                onClick={readonly ? noop : onShowVoiceInput}
               >
                 <RiMicLine className='h-5 w-5' />
               </ActionButton>
@@ -58,7 +62,8 @@ const Operation = (
         <Button
           className='ml-3 w-8 px-0'
           variant='primary'
-          onClick={onSend}
+          onClick={readonly ? noop : onSend}
+          disabled={readonly}
           style={
             theme
               ? {

web/app/components/base/chat/chat/context.tsx

@@ -17,10 +17,13 @@ export type ChatContextValue = Pick<ChatProps, 'config'
   | 'onAnnotationRemoved'
   | 'disableFeedback'
   | 'onFeedback'
->
+> & {
+  readonly?: boolean
+}
 
 const ChatContext = createContext<ChatContextValue>({
   chatList: [],
+  readonly: false,
 })
 
 type ChatContextProviderProps = {
@@ -29,6 +32,7 @@ type ChatContextProviderProps = {
 
 export const ChatContextProvider = ({
   children,
+  readonly = false,
   config,
   isResponding,
   chatList,
@@ -46,6 +50,7 @@ export const ChatContextProvider = ({
   return (
     <ChatContext.Provider value={{
       config,
+      readonly,
       isResponding,
       chatList: chatList || [],
       showPromptLog,

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

@@ -36,6 +36,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import type { AppData } from '@/models/share'
 
 export type ChatProps = {
+  readonly?: boolean
   appData?: AppData
   chatList: ChatItem[]
   config?: ChatConfig
@@ -77,6 +78,7 @@ export type ChatProps = {
 }
 
 const Chat: FC<ChatProps> = ({
+  readonly = false,
   appData,
   config,
   onSend,
@@ -221,6 +223,7 @@ const Chat: FC<ChatProps> = ({
 
   return (
     <ChatContextProvider
+      readonly={readonly}
       config={config}
       chatList={chatList}
       isResponding={isResponding}
@@ -324,6 +327,7 @@ const Chat: FC<ChatProps> = ({
                   inputsForm={inputsForm}
                   theme={themeBuilder?.theme}
                   isResponding={isResponding}
+                  readonly={readonly}
                 />
               )
             }

web/app/components/base/features/new-feature-panel/feature-bar.tsx

@@ -13,6 +13,7 @@ type Props = {
   showFileUpload?: boolean
   disabled?: boolean
   onFeatureBarClick?: (state: boolean) => void
+  hideEditEntrance?: boolean
 }
 
 const FeatureBar = ({
@@ -20,6 +21,7 @@ const FeatureBar = ({
   showFileUpload = true,
   disabled,
   onFeatureBarClick,
+  hideEditEntrance = false,
 }: Props) => {
   const { t } = useTranslation()
   const features = useFeatures(s => s.features)
@@ -132,10 +134,14 @@ const FeatureBar = ({
             )}
           </div>
           <div className='body-xs-regular grow text-text-tertiary'>{t('appDebug.feature.bar.enableText')}</div>
-          <Button className='shrink-0' variant='ghost-accent' size='small' onClick={() => onFeatureBarClick?.(true)}>
+          {
-            <div className='mx-1'>{t('appDebug.feature.bar.manage')}</div>
+            !hideEditEntrance && (
-            <RiArrowRightLine className='h-3.5 w-3.5 text-text-accent' />
+              <Button className='shrink-0' variant='ghost-accent' size='small' onClick={() => onFeatureBarClick?.(true)}>
-          </Button>
+                <div className='mx-1'>{t('appDebug.feature.bar.manage')}</div>
+                <RiArrowRightLine className='h-3.5 w-3.5 text-text-accent' />
+              </Button>
+            )
+          }
         </div>
       )}
     </div>

web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx

@@ -13,21 +13,27 @@ import { TransferMethod } from '@/types/app'
 
 type FileUploaderInChatInputProps = {
   fileConfig: FileUpload
+  readonly?: boolean
 }
 const FileUploaderInChatInput = ({
   fileConfig,
+  readonly,
 }: FileUploaderInChatInputProps) => {
   const renderTrigger = useCallback((open: boolean) => {
     return (
       <ActionButton
         size='l'
         className={cn(open && 'bg-state-base-hover')}
+        disabled={readonly}
       >
         <RiAttachmentLine className='h-5 w-5' />
       </ActionButton>
     )
   }, [])
 
+  if(readonly)
+    return renderTrigger(false)
+
   return (
     <FileFromLinkOrLocal
       trigger={renderTrigger}

web/i18n/en-US/common.ts

@@ -663,6 +663,7 @@ const translation = {
       hitScore: 'Retrieval Score:',
     },
     inputPlaceholder: 'Talk to {{botName}}',
+    inputDisabledPlaceholder: 'Preview Only',
     thinking: 'Thinking...',
     thought: 'Thought',
     resend: 'Resend',

web/i18n/ja-JP/common.ts

@@ -654,6 +654,7 @@ const translation = {
       hitScore: '検索スコア：',
     },
     inputPlaceholder: '{{botName}} と話す',
+    inputDisabledPlaceholder: 'プレビューのみ',
     thought: '思考',
     thinking: '考え中...',
     resend: '再送信してください',

web/i18n/zh-Hans/common.ts

@@ -657,6 +657,7 @@ const translation = {
       hitScore: '召回得分：',
     },
     inputPlaceholder: '和 {{botName}} 聊天',
+    inputDisabledPlaceholder: '仅供试用',
     thinking: '深度思考中...',
     thought: '已深度思考',
     resend: '重新发送',

web/models/debug.ts

@@ -132,6 +132,9 @@ export type ModelConfig = {
   provider: string // LLM Provider: for example "OPENAI"
   model_id: string
   mode: ModelModeType
+  prompt_type?: PromptMode
+  chat_prompt_config?: ChatPromptConfig | null
+  completion_prompt_config?: CompletionPromptConfig | null
   configs: PromptConfig
   opening_statement: string | null
   more_like_this: MoreLikeThisConfig | null