Feat/chat custom disclaimer (#4306)

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

@@ -67,6 +67,7 @@ export type IChatProps = {
   visionConfig?: VisionSettings
   supportAnnotation?: boolean
   allToolIcons?: Record<string, string | Emoji>
+  customDisclaimer?: string
 }
 
 const Chat: FC<IChatProps> = ({
@@ -102,6 +103,7 @@ const Chat: FC<IChatProps> = ({
   supportAnnotation,
   onChatListChange,
   allToolIcons,
+  customDisclaimer,
 }) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
@@ -358,44 +360,46 @@ const Chat: FC<IChatProps> = ({
               </div>
             </div>
           )}
-          <div className={cn('p-[5.5px] max-h-[150px] bg-white border-[1.5px] border-gray-200 rounded-xl overflow-y-auto', isDragActive && 'border-primary-600')}>
-            {visionConfig?.enabled && (
-              <>
-                <div className='absolute bottom-2 left-2 flex items-center'>
-                  <ChatImageUploader
-                    settings={visionConfig}
-                    onUpload={onUpload}
-                    disabled={files.length >= visionConfig.number_limits}
-                  />
-                  <div className='mx-1 w-[1px] h-4 bg-black/5' />
-                </div>
-                <div className='pl-[52px]'>
-                  <ImageList
-                    list={files}
-                    onRemove={onRemove}
-                    onReUpload={onReUpload}
-                    onImageLinkLoadSuccess={onImageLinkLoadSuccess}
-                    onImageLinkLoadError={onImageLinkLoadError}
-                  />
-                </div>
-              </>
-            )}
-            <Textarea
-              className={`
-                block w-full px-2 pr-[118px] py-[7px] leading-5 max-h-none text-sm text-gray-700 outline-none appearance-none resize-none
-                ${visionConfig?.enabled && 'pl-12'}
-              `}
-              value={query}
-              onChange={handleContentChange}
-              onKeyUp={handleKeyUp}
-              onKeyDown={handleKeyDown}
-              onPaste={onPaste}
-              onDragEnter={onDragEnter}
-              onDragLeave={onDragLeave}
-              onDragOver={onDragOver}
-              onDrop={onDrop}
-              autoSize
-            />
+          <div className='relative'>
+            <div className={cn('relative p-[5.5px] max-h-[150px] bg-white border-[1.5px] border-gray-200 rounded-xl overflow-y-auto', isDragActive && 'border-primary-600')}>
+              {visionConfig?.enabled && (
+                <>
+                  <div className='absolute bottom-2 left-2 flex items-center'>
+                    <ChatImageUploader
+                      settings={visionConfig}
+                      onUpload={onUpload}
+                      disabled={files.length >= visionConfig.number_limits}
+                    />
+                    <div className='mx-1 w-[1px] h-4 bg-black/5' />
+                  </div>
+                  <div className='pl-[52px]'>
+                    <ImageList
+                      list={files}
+                      onRemove={onRemove}
+                      onReUpload={onReUpload}
+                      onImageLinkLoadSuccess={onImageLinkLoadSuccess}
+                      onImageLinkLoadError={onImageLinkLoadError}
+                    />
+                  </div>
+                </>
+              )}
+              <Textarea
+                className={`
+                  block w-full px-2 pr-[118px] py-[7px] leading-5 max-h-none text-sm text-gray-700 outline-none appearance-none resize-none
+                  ${visionConfig?.enabled && 'pl-12'}
+                `}
+                value={query}
+                onChange={handleContentChange}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+                onPaste={onPaste}
+                onDragEnter={onDragEnter}
+                onDragLeave={onDragLeave}
+                onDragOver={onDragOver}
+                onDrop={onDrop}
+                autoSize
+              />
+            </div>
             <div className="absolute bottom-2 right-2 flex items-center h-8">
               <div className={`${s.count} mr-4 h-5 leading-5 text-sm bg-gray-50 text-gray-500`}>{query.trim().length}</div>
               {
@@ -440,6 +444,9 @@ const Chat: FC<IChatProps> = ({
               />
             )}
           </div>
+          {customDisclaimer && <div className='text-xs text-gray-500 mt-1 text-center'>
+            {customDisclaimer}
+          </div>}
         </div>
       )}
     </div>

web/app/components/app/overview/settings/index.tsx

@@ -31,6 +31,7 @@ export type ConfigParams = {
   prompt_public: boolean
   copyright: string
   privacy_policy: string
+  custom_disclaimer: string
   icon: string
   icon_background: string
 }
@@ -46,8 +47,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
   const { notify } = useToastContext()
   const [isShowMore, setIsShowMore] = useState(false)
   const { icon, icon_background } = appInfo
-  const { title, description, copyright, privacy_policy, default_language } = appInfo.site
-  const [inputInfo, setInputInfo] = useState({ title, desc: description, copyright, privacyPolicy: privacy_policy })
+  const { title, description, copyright, privacy_policy, custom_disclaimer, default_language } = appInfo.site
+  const [inputInfo, setInputInfo] = useState({ title, desc: description, copyright, privacyPolicy: privacy_policy, customDisclaimer: custom_disclaimer })
   const [language, setLanguage] = useState(default_language)
   const [saveLoading, setSaveLoading] = useState(false)
   const { t } = useTranslation()
@@ -56,7 +57,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
   const [emoji, setEmoji] = useState({ icon, icon_background })
 
   useEffect(() => {
-    setInputInfo({ title, desc: description, copyright, privacyPolicy: privacy_policy })
+    setInputInfo({ title, desc: description, copyright, privacyPolicy: privacy_policy, customDisclaimer: custom_disclaimer })
     setLanguage(default_language)
     setEmoji({ icon, icon_background })
   }, [appInfo])
@@ -81,6 +82,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
       prompt_public: false,
       copyright: inputInfo.copyright,
       privacy_policy: inputInfo.privacyPolicy,
+      custom_disclaimer: inputInfo.customDisclaimer,
       icon: emoji.icon,
       icon_background: emoji.icon_background,
     }
@@ -161,6 +163,13 @@ const SettingsModal: FC<ISettingsModalProps> = ({
             onChange={onChange('privacyPolicy')}
             placeholder={t(`${prefixSettings}.more.privacyPolicyPlaceholder`) as string}
           />
+          <div className={`mt-8 font-medium ${s.settingTitle} text-gray-900`}>{t(`${prefixSettings}.more.customDisclaimer`)}</div>
+          <p className={`mt-1 ${s.settingsTip} text-gray-500`}>{t(`${prefixSettings}.more.customDisclaimerTip`)}</p>
+          <input className={`w-full mt-2 rounded-lg h-10 box-border px-3 ${s.projectName} bg-gray-100`}
+            value={inputInfo.customDisclaimer}
+            onChange={onChange('customDisclaimer')}
+            placeholder={t(`${prefixSettings}.more.customDisclaimerPlaceholder`) as string}
+          />
         </>}
         <div className='mt-10 flex justify-end'>
           <Button className='mr-2 flex-shrink-0 !text-sm' onClick={onHide}>{t('common.operation.cancel')}</Button>

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

@@ -14,6 +14,7 @@ import type {
   VisionConfig,
 } from '../types'
 import { TransferMethod } from '../types'
+import { useChatWithHistoryContext } from '../chat-with-history/context'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import { ToastContext } from '@/app/components/base/toast'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -40,6 +41,7 @@ const ChatInput: FC<ChatInputProps> = ({
   speechToTextConfig,
   onSend,
 }) => {
+  const { appData } = useChatWithHistoryContext()
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
   const [voiceInputShow, setVoiceInputShow] = useState(false)
@@ -127,101 +129,106 @@ const ChatInput: FC<ChatInputProps> = ({
   )
 
   return (
-    <div className='relative'>
-      <div
-        className={`
-          p-[5.5px] max-h-[150px] bg-white border-[1.5px] border-gray-200 rounded-xl overflow-y-auto
-          ${isDragActive && 'border-primary-600'}
-        `}
-      >
-        {
-          visionConfig?.enabled && (
-            <>
-              <div className='absolute bottom-2 left-2 flex items-center'>
-                <ChatImageUploader
-                  settings={visionConfig}
-                  onUpload={onUpload}
-                  disabled={files.length >= visionConfig.number_limits}
-                />
-                <div className='mx-1 w-[1px] h-4 bg-black/5' />
-              </div>
-              <div className='pl-[52px]'>
-                <ImageList
-                  list={files}
-                  onRemove={onRemove}
-                  onReUpload={onReUpload}
-                  onImageLinkLoadSuccess={onImageLinkLoadSuccess}
-                  onImageLinkLoadError={onImageLinkLoadError}
-                />
-              </div>
-            </>
-          )
-        }
-        <Textarea
+    <>
+      <div className='relative'>
+        <div
           className={`
-            block w-full px-2 pr-[118px] py-[7px] leading-5 max-h-none text-sm text-gray-700 outline-none appearance-none resize-none
-            ${visionConfig?.enabled && 'pl-12'}
+            p-[5.5px] max-h-[150px] bg-white border-[1.5px] border-gray-200 rounded-xl overflow-y-auto
+            ${isDragActive && 'border-primary-600'} mb-2
           `}
-          value={query}
-          onChange={handleContentChange}
-          onKeyUp={handleKeyUp}
-          onKeyDown={handleKeyDown}
-          onPaste={onPaste}
-          onDragEnter={onDragEnter}
-          onDragLeave={onDragLeave}
-          onDragOver={onDragOver}
-          onDrop={onDrop}
-          autoSize
-        />
-        <div className='absolute bottom-[7px] right-2 flex items-center h-8'>
-          <div className='flex items-center px-1 h-5 rounded-md bg-gray-100 text-xs font-medium text-gray-500'>
-            {query.trim().length}
-          </div>
+        >
           {
-            query
-              ? (
-                <div className='flex justify-center items-center ml-2 w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg' onClick={() => setQuery('')}>
-                  <XCircle className='w-4 h-4 text-[#98A2B3]' />
+            visionConfig?.enabled && (
+              <>
+                <div className='absolute bottom-2 left-2 flex items-center'>
+                  <ChatImageUploader
+                    settings={visionConfig}
+                    onUpload={onUpload}
+                    disabled={files.length >= visionConfig.number_limits}
+                  />
+                  <div className='mx-1 w-[1px] h-4 bg-black/5' />
                 </div>
-              )
-              : speechToTextConfig?.enabled
+                <div className='pl-[52px]'>
+                  <ImageList
+                    list={files}
+                    onRemove={onRemove}
+                    onReUpload={onReUpload}
+                    onImageLinkLoadSuccess={onImageLinkLoadSuccess}
+                    onImageLinkLoadError={onImageLinkLoadError}
+                  />
+                </div>
+              </>
+            )
+          }
+          <Textarea
+            className={`
+              block w-full px-2 pr-[118px] py-[7px] leading-5 max-h-none text-sm text-gray-700 outline-none appearance-none resize-none
+              ${visionConfig?.enabled && 'pl-12'}
+            `}
+            value={query}
+            onChange={handleContentChange}
+            onKeyUp={handleKeyUp}
+            onKeyDown={handleKeyDown}
+            onPaste={onPaste}
+            onDragEnter={onDragEnter}
+            onDragLeave={onDragLeave}
+            onDragOver={onDragOver}
+            onDrop={onDrop}
+            autoSize
+          />
+          <div className='absolute bottom-[7px] right-2 flex items-center h-8'>
+            <div className='flex items-center px-1 h-5 rounded-md bg-gray-100 text-xs font-medium text-gray-500'>
+              {query.trim().length}
+            </div>
+            {
+              query
                 ? (
-                  <div
-                    className='group flex justify-center items-center ml-2 w-8 h-8 hover:bg-primary-50 rounded-lg cursor-pointer'
-                    onClick={handleVoiceInputShow}
-                  >
-                    <Microphone01 className='block w-4 h-4 text-gray-500 group-hover:hidden' />
-                    <Microphone01Solid className='hidden w-4 h-4 text-primary-600 group-hover:block' />
+                  <div className='flex justify-center items-center ml-2 w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg' onClick={() => setQuery('')}>
+                    <XCircle className='w-4 h-4 text-[#98A2B3]' />
                   </div>
                 )
-                : null
+                : speechToTextConfig?.enabled
+                  ? (
+                    <div
+                      className='group flex justify-center items-center ml-2 w-8 h-8 hover:bg-primary-50 rounded-lg cursor-pointer'
+                      onClick={handleVoiceInputShow}
+                    >
+                      <Microphone01 className='block w-4 h-4 text-gray-500 group-hover:hidden' />
+                      <Microphone01Solid className='hidden w-4 h-4 text-primary-600 group-hover:block' />
+                    </div>
+                  )
+                  : null
+            }
+            <div className='mx-2 w-[1px] h-4 bg-black opacity-5' />
+            {isMobile
+              ? sendBtn
+              : (
+                <TooltipPlus
+                  popupContent={
+                    <div>
+                      <div>{t('common.operation.send')} Enter</div>
+                      <div>{t('common.operation.lineBreak')} Shift Enter</div>
+                    </div>
+                  }
+                >
+                  {sendBtn}
+                </TooltipPlus>
+              )}
+          </div>
+          {
+            voiceInputShow && (
+              <VoiceInput
+                onCancel={() => setVoiceInputShow(false)}
+                onConverted={text => setQuery(text)}
+              />
+            )
           }
-          <div className='mx-2 w-[1px] h-4 bg-black opacity-5' />
-          {isMobile
-            ? sendBtn
-            : (
-              <TooltipPlus
-                popupContent={
-                  <div>
-                    <div>{t('common.operation.send')} Enter</div>
-                    <div>{t('common.operation.lineBreak')} Shift Enter</div>
-                  </div>
-                }
-              >
-                {sendBtn}
-              </TooltipPlus>
-            )}
         </div>
-        {
-          voiceInputShow && (
-            <VoiceInput
-              onCancel={() => setVoiceInputShow(false)}
-              onConverted={text => setQuery(text)}
-            />
-          )
-        }
       </div>
-    </div>
+      {appData?.site?.custom_disclaimer && <div className='text-xs text-gray-500 mt-1 text-center'>
+        {appData.site.custom_disclaimer}
+      </div>}
+    </>
   )
 }
 

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

@@ -929,6 +929,7 @@ const Main: FC<IMainProps> = ({
                       image_file_size_limit: fileUploadConfigResponse ? fileUploadConfigResponse.image_file_size_limit : visionConfig.image_file_size_limit,
                     }}
                     allToolIcons={appMeta?.tool_icons || {}}
+                    customDisclaimer={siteInfo.custom_disclaimer}
                   />
                 </div>
               </div>)

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

@@ -800,6 +800,7 @@ const Main: FC<IMainProps> = ({
                     answerIcon={<LogoAvatar className='relative shrink-0' />}
                     visionConfig={visionConfig}
                     allToolIcons={appMeta?.tool_icons || {}}
+                    customDisclaimer={siteInfo.custom_disclaimer}
                   />
                 </div>
               </div>)

web/app/components/tools/edit-custom-collection-modal/index.tsx

@@ -267,6 +267,19 @@ const EditCustomCollectionModal: FC<Props> = ({
                   className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
               </div>
 
+              <div>
+                <div className={fieldNameClassNames}>{t('tools.createTool.customDisclaimer')}</div>
+                <input
+                  value={customCollection.custom_disclaimer}
+                  onChange={(e) => {
+                    const newCollection = produce(customCollection, (draft) => {
+                      draft.custom_disclaimer = e.target.value
+                    })
+                    setCustomCollection(newCollection)
+                  }}
+                  className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' placeholder={t('tools.createTool.customDisclaimerPlaceholder') || ''} />
+              </div>
+
             </div>
             <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-gray-50 border-t border-black/5')} >
               {

web/app/components/tools/types.ts

@@ -89,6 +89,7 @@ export type CustomCollectionBackend = {
   schema_type: string
   schema: string
   privacy_policy: string
+  custom_disclaimer: string
   tools?: ParamItem[]
 }