chore: chat input and feature readonly

2025-10-15 14:45:54 +08:00 · 2025-10-15 14:45:54 +08:00 · 738d3001be
parent df4e32aaa0
commit 738d3001be
10 changed files with 52 additions and 11 deletions
--- 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/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/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@ -657,6 +657,7 @@ const translation = {
      hitScore: '召回得分：',
    },
    inputPlaceholder: '和 {{botName}} 聊天',
+    inputDisabledPlaceholder: '仅供试用',
    thinking: '深度思考中...',
    thought: '已深度思考',
    resend: '重新发送',