Feat/chat custom disclaimer (#4306)

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>}
+    </>
   )
 }