diff --git a/app/api/conversations/route.ts b/app/api/conversations/route.ts
index 0dd3fe34..ce8a9b6d 100644
--- a/app/api/conversations/route.ts
+++ b/app/api/conversations/route.ts
@@ -1,9 +1,7 @@
-export const dynamic = 'force-dynamic'
-
 import { type NextRequest } from 'next/server'
 import { NextResponse } from 'next/server'
 import { client, getInfo, setSession } from '@/app/api/utils/common'
-
+export const dynamic = 'force-dynamic'
 export async function GET(request: NextRequest) {
   const { sessionId, user } = getInfo(request)
   try {
@@ -11,7 +9,8 @@ export async function GET(request: NextRequest) {
     return NextResponse.json(data, {
       headers: setSession(sessionId),
     })
-  } catch (error) {
-    return NextResponse.json([]);
+  }
+  catch (error) {
+    return NextResponse.json([])
   }
 }
diff --git a/app/components/chat/answer/index.tsx b/app/components/chat/answer/index.tsx
index dd11e36e..2459ae4f 100644
--- a/app/components/chat/answer/index.tsx
+++ b/app/components/chat/answer/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
 import LoadingAnim from '../loading-anim'
@@ -76,6 +76,12 @@ const Answer: FC<IAnswerProps> = ({
   config,
 }) => {
   const { id, content, feedback, agent_thoughts, workflowProcess, suggestedQuestions, citation } = item
+  const [localCitation, setLocalCitation] = useState(citation)
+
+  useEffect(() => {
+    setLocalCitation(citation)
+  }, [citation, id]) // Add id to dependencies to ensure update on new answers
+
   const isAgentMode = !!agent_thoughts && agent_thoughts.length > 0
   const { t } = useTranslation()
 
@@ -177,7 +183,7 @@ const Answer: FC<IAnswerProps> = ({
   )
 
   return (
-    <div key={id}>
+    <div key={`${id}-${content}-${JSON.stringify(citation)}`}>
       <div className='flex items-start'>
         <div className={`${s.answerIcon} w-10 h-10 shrink-0`}>
           {isResponding
@@ -206,11 +212,11 @@ const Answer: FC<IAnswerProps> = ({
                       {suggestedQuestions
                         ? (
                           <SuggestedQuestions
-                            onHandleSend={onHandleSend}
+                            onHandleSend={onHandleSend as (message: string) => void}
                             suggestedQuestions={suggestedQuestions}
                           />
                         )
-                        : null}
+                        : undefined}
                     </>
                   ))}
             </div>
@@ -222,7 +228,13 @@ const Answer: FC<IAnswerProps> = ({
           </div>
         </div>
       </div>
+      {localCitation && localCitation.length > 0 && (
+        <Citation
+          data={localCitation}
+          showHitInfo={config?.supportCitationHitInfo}
+        />
+      )}
     </div>
   )
 }
-export default React.memo(Answer)
+export default Answer // Remove React.memo() here
diff --git a/app/components/chat/citation/index.tsx b/app/components/chat/citation/index.tsx
index d1fd9eb4..bf131960 100644
--- a/app/components/chat/citation/index.tsx
+++ b/app/components/chat/citation/index.tsx
@@ -1,3 +1,4 @@
+// app/components/chat/citation/index.tsx
 import { useEffect, useMemo, useRef, useState } from 'react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/app/components/chat/citation/popup.tsx b/app/components/chat/citation/popup.tsx
index e42afc6d..9b7cb6b8 100644
--- a/app/components/chat/citation/popup.tsx
+++ b/app/components/chat/citation/popup.tsx
@@ -1,3 +1,4 @@
+// app/components/chat/citation/popup.tsx
 import { Fragment, useState } from 'react'
 import type { FC } from 'react'
 import Link from 'next/link'
diff --git a/app/components/chat/citation/progress-tooltip.tsx b/app/components/chat/citation/progress-tooltip.tsx
index 1f24d847..8eda6236 100644
--- a/app/components/chat/citation/progress-tooltip.tsx
+++ b/app/components/chat/citation/progress-tooltip.tsx
@@ -1,3 +1,4 @@
+// app/components/chat/citation/progress-tooltip.tsx
 import { useState } from 'react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/app/components/chat/citation/tooltip.tsx b/app/components/chat/citation/tooltip.tsx
index 794b22be..1199c9f9 100644
--- a/app/components/chat/citation/tooltip.tsx
+++ b/app/components/chat/citation/tooltip.tsx
@@ -1,3 +1,4 @@
+// app/components/chat/citation/tooltip.tsx
 import React, { useState } from 'react'
 import type { FC } from 'react'
 import {
diff --git a/app/components/chat/index.tsx b/app/components/chat/index.tsx
index 4dc08587..df15d96a 100644
--- a/app/components/chat/index.tsx
+++ b/app/components/chat/index.tsx
@@ -12,7 +12,6 @@ import type { FeedbackFunc } from './type'
 import VoiceInput from './answer/voice-input'
 import { Microphone01 } from '@/app/components/base/icons/line/mediaAndDevices'
 import { Microphone01 as Microphone01Solid } from '@/app/components/base/icons/solid/mediaAndDevices'
-
 import type { ChatItem, VisionFile, VisionSettings } from '@/types/app'
 import { TransferMethod } from '@/types/app'
 import Tooltip from '@/app/components/base/tooltip'
@@ -63,6 +62,12 @@ const Chat: FC<IChatProps> = ({
   const isUseInputMethod = useRef(false)
 
   const [query, setQuery] = React.useState('')
+  const [updateCounter, setUpdateCounter] = useState(0)
+
+  useEffect(() => {
+    setUpdateCounter(prev => prev + 1)
+  }, [chatList])
+
   const handleContentChange = (e: any) => {
     const value = e.target.value
     setQuery(value)
@@ -148,14 +153,14 @@ const Chat: FC<IChatProps> = ({
   }
 
   return (
-    <div className={cn(!feedbackDisabled && 'px-3.5', 'h-full')}>
+    <div className={cn(!feedbackDisabled && 'px-3.5', 'h-full')} key={updateCounter}>
       {/* Chat List */}
       <div className="h-full space-y-[30px]">
         {chatList.map((item) => {
           if (item.isAnswer) {
             const isLast = item.id === chatList[chatList.length - 1].id
             return <Answer
-              key={item.id}
+              key={`${item.id}-${item.content}-${JSON.stringify(item.citation)}`}
               item={item}
               onHandleSend={handleSend}
               feedbackDisabled={feedbackDisabled}
@@ -263,4 +268,5 @@ const Chat: FC<IChatProps> = ({
   )
 }
 
-export default React.memo(Chat)
+export default Chat  // Remove React.memo()
+
diff --git a/app/components/chat/type.ts b/app/components/chat/type.ts
index 7bbc72ba..b51a58a1 100644
--- a/app/components/chat/type.ts
+++ b/app/components/chat/type.ts
@@ -104,6 +104,7 @@ export type IChatItem = {
 }
 
 export type MessageEnd = {
+  retriever_resources: any
   id: string
   metadata: {
     retriever_resources?: CitationItem[]
diff --git a/app/components/index.tsx b/app/components/index.tsx
index fd83c58d..24d0158c 100644
--- a/app/components/index.tsx
+++ b/app/components/index.tsx
@@ -139,7 +139,7 @@ const Main: FC = () => {
           })
           newChatList.push({
             id: item.id,
-            content: item.answer + 22,
+            content: item.answer,
             agent_thoughts: addFileInfos(item.agent_thoughts ? sortAgentSorts(item.agent_thoughts) : item.agent_thoughts, item.message_files),
             feedback: item.feedback,
             isAnswer: true,
@@ -500,13 +500,16 @@ const Main: FC = () => {
 
               draft.push({
                 ...responseItem,
+                citations: messageEnd.retriever_resources, // Add citations here
               })
             })
           setChatList(newListWithAnswer)
           return
         }
-        // not support show citation
-        // responseItem.citation = messageEnd.retriever_resources
+        // Handle citations if they exist
+        if (messageEnd.retriever_resources)
+          responseItem.citation = messageEnd.retriever_resources // Store citations
+
         const newListWithAnswer = produce(
           getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
           (draft) => {