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

2025-10-15 17:20:20 +08:00 · 2025-10-15 17:20:20 +08:00 · cbc55c577b
parent 8e962d15d1 b07c766551
commit cbc55c577b
16 changed files with 141 additions and 72 deletions
--- a/web/app/components/app/configuration/config-vision/index.tsx
+++ b/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'>
-          <div className='text-text-tertiary system-xs-medium-uppercase'>{t('appDebug.vision.visionSettings.resolution')}</div>
-          <Tooltip
-            popupContent={
-              <div className='w-[180px]' >
-                {t('appDebug.vision.visionSettings.resolutionTooltip').split('\n').map(item => (
-                  <div key={item}>{item}</div>
-                ))}
-              </div>
-            }
+        {readonly ? (<>
+          <div className='mr-2 flex items-center gap-0.5'>
+            <div className='system-xs-medium-uppercase text-text-tertiary'>{t('appDebug.vision.visionSettings.resolution')}</div>
+            <Tooltip
+              popupContent={
+                <div className='w-[180px]' >
+                  {t('appDebug.vision.visionSettings.resolutionTooltip').split('\n').map(item => (
+                    <div key={item}>{item}</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>
  )
--- a/web/app/components/app/configuration/config/config-audio.tsx
+++ b/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'>
-        <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-subtle'></div>
-        <Switch
-          defaultValue={isAudioEnabled}
-          onChange={handleChange}
-          size='md'
-        />
-      </div>
+      {!readonly && (
+        <div className='flex shrink-0 items-center'>
+          <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-subtle'></div>
+          <Switch
+            defaultValue={isAudioEnabled}
+            onChange={handleChange}
+            size='md'
+          />
+        </div>
+      )}
    </div>
  )
 }
--- a/web/app/components/app/configuration/config/config-document.tsx
+++ b/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'>
-        <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-subtle'></div>
-        <Switch
-          defaultValue={isDocumentEnabled}
-          onChange={handleChange}
-          size='md'
-        />
-      </div>
+      {!readonly && (
+        <div className='flex shrink-0 items-center'>
+          <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-subtle'></div>
+          <Switch
+            defaultValue={isDocumentEnabled}
+            onChange={handleChange}
+            size='md'
+          />
+        </div>
+      )}
    </div>
  )
 }
--- a/web/app/components/app/configuration/debug/debug-with-single-model/index.tsx
+++ b/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}
--- a/web/app/components/app/configuration/preview.tsx
+++ b/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 currModel: {
-    features: ModelFeatureEnum[]
-  } = {
-    features: [],
-  }
+  const {
+    currentModel: currModel,
+  } = useTextGenerationCurrentProviderAndModelAndModelList(
+    {
+      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'],
--- a/web/app/components/base/action-button/index.tsx
+++ b/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}
--- a/web/app/components/base/chat/chat/chat-input-area/index.tsx
+++ b/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}
+      />}
    </>
  )
 }
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/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
              ? {
--- a/web/app/components/base/chat/chat/context.tsx
+++ b/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,
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/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}
                />
              )
            }
--- a/web/app/components/base/features/new-feature-panel/feature-bar.tsx
+++ b/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>
-            <RiArrowRightLine className='h-3.5 w-3.5 text-text-accent' />
-          </Button>
+          {
+            !hideEditEntrance && (
+              <Button className='shrink-0' variant='ghost-accent' size='small' onClick={() => onFeatureBarClick?.(true)}>
+                <div className='mx-1'>{t('appDebug.feature.bar.manage')}</div>
+                <RiArrowRightLine className='h-3.5 w-3.5 text-text-accent' />
+              </Button>
+            )
+          }
        </div>
      )}
    </div>
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
+++ b/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}
--- a/web/i18n/en-US/common.ts
+++ b/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',
--- a/web/i18n/ja-JP/common.ts
+++ b/web/i18n/ja-JP/common.ts
@ -654,6 +654,7 @@ const translation = {
      hitScore: '検索スコア：',
    },
    inputPlaceholder: '{{botName}} と話す',
+    inputDisabledPlaceholder: 'プレビューのみ',
    thought: '思考',
    thinking: '考え中...',
    resend: '再送信してください',
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@ -657,6 +657,7 @@ const translation = {
      hitScore: '召回得分：',
    },
    inputPlaceholder: '和 {{botName}} 聊天',
+    inputDisabledPlaceholder: '仅供试用',
    thinking: '深度思考中...',
    thought: '已深度思考',
    resend: '重新发送',
--- a/web/models/debug.ts
+++ b/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