diff --git a/web/app/components/app/chat/type.ts b/web/app/components/app/chat/type.ts
index 972b9424a8d5f0..fe34aced3f3e76 100644
--- a/web/app/components/app/chat/type.ts
+++ b/web/app/components/app/chat/type.ts
@@ -72,7 +72,16 @@ export type IChatItem = {
 
 export type MessageEnd = {
   id: string
-  retriever_resources?: CitationItem[]
+  metadata: {
+    retriever_resources?: CitationItem[]
+    annotation_reply: {
+      id: string
+      account: {
+        id: string
+        name: string
+      }
+    }
+  }
 }
 
 export type MessageReplace = {
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index 14b20de64171d1..e2a3455caa76d2 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -347,7 +347,27 @@ const Debug: FC<IDebug> = ({
         }
       },
       onMessageEnd: (messageEnd) => {
-        responseItem.citation = messageEnd.retriever_resources
+        // TODO
+        if (messageEnd.metadata?.annotation_reply) {
+          responseItem.id = messageEnd.id
+          responseItem.annotation = ({
+            id: messageEnd.metadata.annotation_reply.id,
+            authorName: messageEnd.metadata.annotation_reply.account.name,
+          } as AnnotationType)
+          const newListWithAnswer = produce(
+            getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
+            (draft) => {
+              if (!draft.find(item => item.id === questionId))
+                draft.push({ ...questionItem })
+
+              draft.push({
+                ...responseItem,
+              })
+            })
+          setChatList(newListWithAnswer)
+          return
+        }
+        responseItem.citation = messageEnd.metadata?.retriever_resources || []
 
         const newListWithAnswer = produce(
           getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
@@ -363,6 +383,7 @@ const Debug: FC<IDebug> = ({
         responseItem.content = messageReplace.answer
       },
       onAnnotationReply: (annotationReply) => {
+        // TODO: temp debug
         responseItem.id = annotationReply.id
         responseItem.content = annotationReply.answer
         responseItem.annotation = ({
diff --git a/web/app/components/explore/universal-chat/index.tsx b/web/app/components/explore/universal-chat/index.tsx
index acef77b938df0e..8e3044c3a694ed 100644
--- a/web/app/components/explore/universal-chat/index.tsx
+++ b/web/app/components/explore/universal-chat/index.tsx
@@ -608,7 +608,7 @@ const Main: FC<IMainProps> = () => {
         setChatList(newListWithAnswer)
       },
       onMessageEnd: (messageEnd) => {
-        responseItem.citation = messageEnd.retriever_resources
+        responseItem.citation = messageEnd.metadata?.retriever_resources
 
         const newListWithAnswer = produce(
           getChatList().filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
diff --git a/web/app/components/share/chat/sidebar/index.tsx b/web/app/components/share/chat/sidebar/index.tsx
index 51b564ace1b340..8d3fffdfc65ff3 100644
--- a/web/app/components/share/chat/sidebar/index.tsx
+++ b/web/app/components/share/chat/sidebar/index.tsx
@@ -107,7 +107,7 @@ const Sidebar: FC<ISidebarProps> = ({
       <div className="flex flex-shrink-0 p-4 !pb-0">
         <Button
           onClick={() => onStartChat({})}
-          className="group block w-full flex-shrink-0 !justify-start !h-9 text-primary-600 items-center text-sm">
+          className="flex group w-full flex-shrink-0 !justify-start !h-9 text-primary-600 items-center text-sm">
           <PencilSquareIcon className="mr-2 h-4 w-4" /> {t('share.chat.newChat')}
         </Button>
       </div>
diff --git a/web/app/components/share/chatbot/sidebar/index.tsx b/web/app/components/share/chatbot/sidebar/index.tsx
index cfb8e86fbfe583..a38e2f9c745c54 100644
--- a/web/app/components/share/chatbot/sidebar/index.tsx
+++ b/web/app/components/share/chatbot/sidebar/index.tsx
@@ -92,7 +92,7 @@ const Sidebar: FC<ISidebarProps> = ({
       <div className="flex flex-shrink-0 p-4 !pb-0">
         <Button
           onClick={() => { onCurrentIdChange('-1') }}
-          className="group block w-full flex-shrink-0 !justify-start !h-9 text-primary-600 items-center text-sm">
+          className="group flex w-full flex-shrink-0 !justify-start !h-9 text-primary-600 items-center text-sm">
           <PencilSquareIcon className="mr-2 h-4 w-4" /> {t('share.chat.newChat')}
         </Button>
       </div>