fix: suggestion is not rendered

app/components/chat/answer/index.tsx

@@ -13,6 +13,7 @@ import type { ChatItem, MessageRating, VisionFile } from '@/types/app'
 import Tooltip from '@/app/components/base/tooltip'
 import WorkflowProcess from '@/app/components/workflow/workflow-process'
 import { Markdown } from '@/app/components/base/markdown'
+import Button from '@/app/components/base/button'
 import type { Emoji } from '@/types/tools'
 
 const OperationBtn = ({ innerContent, onClick, className }: { innerContent: React.ReactNode; onClick?: () => void; className?: string }) => (
@@ -60,6 +61,7 @@ type IAnswerProps = {
   onFeedback?: FeedbackFunc
   isResponding?: boolean
   allToolIcons?: Record<string, string | Emoji>
+  suggestionClick?: (suggestion: string) => void
 }
 
 // The component needs to maintain its own state to control whether to display input component
@@ -69,8 +71,9 @@ const Answer: FC<IAnswerProps> = ({
   onFeedback,
   isResponding,
   allToolIcons,
+  suggestionClick = () => { },
 }) => {
-  const { id, content, feedback, agent_thoughts, workflowProcess } = item
+  const { id, content, feedback, agent_thoughts, workflowProcess, suggestedQuestions = [] } = item
   const isAgentMode = !!agent_thoughts && agent_thoughts.length > 0
 
   const { t } = useTranslation()
@@ -192,6 +195,17 @@ const Answer: FC<IAnswerProps> = ({
                   : (
                     <Markdown content={content} />
                   ))}
+              {suggestedQuestions.length > 0 && (
+                <div className='mt-3'>
+                  <div className='flex gap-1 mt-1 flex-wrap'>
+                    {suggestedQuestions.map((suggestion, index) => (
+                      <div key={index} className='flex items-center gap-1'>
+                        <Button className='text-sm' type='link' onClick={() => suggestionClick(suggestion)}>{suggestion}</Button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
             </div>
             <div className='absolute top-[-14px] right-[-14px] flex flex-row justify-end gap-1'>
               {!feedbackDisabled && !item.feedbackDisabled && renderItemOperation()}

app/components/chat/index.tsx

@@ -52,9 +52,12 @@ const Chat: FC<IChatProps> = ({
   const isUseInputMethod = useRef(false)
 
   const [query, setQuery] = React.useState('')
+  const queryRef = useRef('')
+
   const handleContentChange = (e: any) => {
     const value = e.target.value
     setQuery(value)
+    queryRef.current = value
   }
 
   const logError = (message: string) => {
@@ -62,16 +65,19 @@ const Chat: FC<IChatProps> = ({
   }
 
   const valid = () => {
+    const query = queryRef.current
     if (!query || query.trim() === '') {
-      logError('Message cannot be empty')
+      logError(t('app.errorMessage.valueOfVarRequired'))
       return false
     }
     return true
   }
 
   useEffect(() => {
-    if (controlClearQuery)
+    if (controlClearQuery) {
       setQuery('')
+      queryRef.current = ''
+    }
   }, [controlClearQuery])
   const {
     files,
@@ -86,7 +92,7 @@ const Chat: FC<IChatProps> = ({
   const handleSend = () => {
     if (!valid() || (checkCanSend && !checkCanSend()))
       return
-    onSend(query, files.filter(file => file.progress !== -1).map(fileItem => ({
+    onSend(queryRef.current, files.filter(file => file.progress !== -1).map(fileItem => ({
       type: 'image',
       transfer_method: fileItem.type,
       url: fileItem.url,
@@ -95,8 +101,10 @@ const Chat: FC<IChatProps> = ({
     if (!files.find(item => item.type === TransferMethod.local_file && !item.fileId)) {
       if (files.length)
         onClear()
-      if (!isResponding)
+      if (!isResponding) {
         setQuery('')
+        queryRef.current = ''
+      }
     }
   }
 
@@ -112,11 +120,19 @@ const Chat: FC<IChatProps> = ({
   const handleKeyDown = (e: any) => {
     isUseInputMethod.current = e.nativeEvent.isComposing
     if (e.code === 'Enter' && !e.shiftKey) {
-      setQuery(query.replace(/\n$/, ''))
+      const result = query.replace(/\n$/, '')
+      setQuery(result)
+      queryRef.current = result
       e.preventDefault()
     }
   }
 
+  const suggestionClick = (suggestion: string) => {
+    setQuery(suggestion)
+    queryRef.current = suggestion
+    handleSend()
+  }
+
   return (
     <div className={cn(!feedbackDisabled && 'px-3.5', 'h-full')}>
       {/* Chat List */}
@@ -130,6 +146,7 @@ const Chat: FC<IChatProps> = ({
               feedbackDisabled={feedbackDisabled}
               onFeedback={onFeedback}
               isResponding={isResponding && isLast}
+              suggestionClick={suggestionClick}
             />
           }
           return (