chore: replace chat in web app (#2373)

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

@@ -82,7 +82,7 @@ const Answer: FC<AnswerProps> = ({
               )
             }
             {
-              hasAgentThoughts && !content && (
+              hasAgentThoughts && (
                 <AgentContent item={item} />
               )
             }

web/app/components/base/chat/chat/answer/operation.tsx

@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import type { ChatItem } from '../../types'
 import { useCurrentAnswerIsResponsing } from '../hooks'
 import { useChatContext } from '../context'
@@ -8,6 +9,11 @@ import { MessageFast } from '@/app/components/base/icons/src/vender/solid/commun
 import AudioBtn from '@/app/components/base/audio-btn'
 import AnnotationCtrlBtn from '@/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn'
 import EditReplyModal from '@/app/components/app/annotation/edit-annotation-modal'
+import {
+  ThumbsDown,
+  ThumbsUp,
+} from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type OperationProps = {
   item: ChatItem
@@ -19,11 +25,13 @@ const Operation: FC<OperationProps> = ({
   question,
   index,
 }) => {
+  const { t } = useTranslation()
   const {
     config,
     onAnnotationAdded,
     onAnnotationEdited,
     onAnnotationRemoved,
+    onFeedback,
   } = useChatContext()
   const [isShowReplyModal, setIsShowReplyModal] = useState(false)
   const responsing = useCurrentAnswerIsResponsing(item.id)
@@ -32,8 +40,18 @@ const Operation: FC<OperationProps> = ({
     isOpeningStatement,
     content,
     annotation,
+    feedback,
   } = item
   const hasAnnotation = !!annotation?.id
+  const [localFeedback, setLocalFeedback] = useState(feedback)
+
+  const handleFeedback = async (rating: 'like' | 'dislike' | null) => {
+    if (!config?.supportFeedback || !onFeedback)
+      return
+
+    await onFeedback?.(id, { rating })
+    setLocalFeedback({ rating })
+  }
 
   return (
     <div className='absolute top-[-14px] right-[-14px] flex justify-end gap-1'>
@@ -90,6 +108,53 @@ const Operation: FC<OperationProps> = ({
           </div>
         )
       }
+      {
+        config?.supportFeedback && !localFeedback?.rating && onFeedback && !isOpeningStatement && (
+          <div className='hidden group-hover:flex ml-1 shrink-0 items-center px-0.5 bg-white border-[0.5px] border-gray-100 shadow-md text-gray-500 rounded-lg'>
+            <TooltipPlus popupContent={t('appDebug.operation.agree')}>
+              <div
+                className='flex items-center justify-center mr-0.5 w-6 h-6 rounded-md hover:bg-black/5 hover:text-gray-800 cursor-pointer'
+                onClick={() => handleFeedback('like')}
+              >
+                <ThumbsUp className='w-4 h-4' />
+              </div>
+            </TooltipPlus>
+            <TooltipPlus popupContent={t('appDebug.operation.disagree')}>
+              <div
+                className='flex items-center justify-center w-6 h-6 rounded-md hover:bg-black/5 hover:text-gray-800 cursor-pointer'
+                onClick={() => handleFeedback('dislike')}
+              >
+                <ThumbsDown className='w-4 h-4' />
+              </div>
+            </TooltipPlus>
+          </div>
+        )
+      }
+      {
+        config?.supportFeedback && localFeedback?.rating && onFeedback && !isOpeningStatement && (
+          <TooltipPlus popupContent={localFeedback.rating === 'like' ? t('appDebug.operation.cancelAgree') : t('appDebug.operation.cancelDisagree')}>
+            <div
+              className={`
+                flex items-center justify-center w-7 h-7 rounded-[10px] border-[2px] border-white cursor-pointer
+                ${localFeedback.rating === 'like' && 'bg-blue-50 text-blue-600'}
+                ${localFeedback.rating === 'dislike' && 'bg-red-100 text-red-600'}
+              `}
+              onClick={() => handleFeedback(null)}
+            >
+              {
+                localFeedback.rating === 'like' && (
+                  <ThumbsUp className='w-4 h-4' />
+                )
+              }
+              {
+                localFeedback.rating === 'dislike' && (
+                  <ThumbsDown className='w-4 h-4' />
+                )
+              }
+            </div>
+          </TooltipPlus>
+        )
+      }
     </div>
   )
 }

web/app/components/base/chat/chat/answer/suggested-questions.tsx

@@ -19,7 +19,7 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
 
   return (
     <div className='flex flex-wrap'>
-      {suggestedQuestions.map((question, index) => (
+      {suggestedQuestions.filter(q => !!q && q.trim()).map((question, index) => (
         <div
           key={index}
           className='mt-1 mr-1 max-w-full last:mr-0 shrink-0 py-[5px] leading-[18px] items-center px-4 rounded-lg border border-gray-200 shadow-xs bg-white text-xs font-medium text-primary-600 cursor-pointer'