Fix: The embedded website floating component on the agent page does not display citations. (#15767)

### What problem does this PR solve?

Fix: The embedded website floating component on the agent page does not
display citations.
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/floating-chat-widget-markdown.tsx

@@ -1,6 +1,7 @@
 import Image from '@/components/image';
 import SvgIcon from '@/components/svg-icon';
 
+import { MarkdownRemarkPlugins } from '@/constants/markdown-remark-plugins';
 import {
   useFetchDocumentThumbnailsByIds,
   useGetDocumentUrl,
@@ -36,12 +37,11 @@ import {
 } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
-import { MarkdownRemarkPlugins } from '@/constants/markdown-remark-plugins';
 import { visitParents } from 'unist-util-visit-parents';
 import styles from './floating-chat-widget-markdown.module.less';
 import { useIsDarkTheme } from './theme-provider';
 import { Button } from './ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from './ui/hover-card';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
 
 const getChunkIndex = (match: string) =>
@@ -66,7 +66,11 @@ const FloatingChatWidgetMarkdown = ({
   const contentWithCursor = useMemo(() => {
     const text = content === '' ? t('chat.searching') : content;
     const nextText = replaceTextByOldReg(text);
-    return pipe(replaceThinkToSection, replaceRetrievingToSection, preprocessLaTeX)(nextText);
+    return pipe(
+      replaceThinkToSection,
+      replaceRetrievingToSection,
+      preprocessLaTeX,
+    )(nextText);
   }, [content, t]);
 
   useEffect(() => {
@@ -168,7 +172,7 @@ const FloatingChatWidgetMarkdown = ({
           className="flex gap-2 widget-citation-content"
         >
           {imageId && (
-            <Popover>
+            <Tooltip>
               <TooltipTrigger asChild>
                 <Image
                   id={imageId}
@@ -181,7 +185,7 @@ const FloatingChatWidgetMarkdown = ({
                   className="max-w-[80vw] max-h-[60vh] rounded"
                 />
               </TooltipContent>
-            </Popover>
+            </Tooltip>
           )}
           <div className="space-y-2 flex-1 min-w-0">
             <div
@@ -273,12 +277,12 @@ const FloatingChatWidgetMarkdown = ({
         }
 
         return (
-          <Popover key={`popover-${i}`}>
-            <PopoverTrigger asChild>
+          <HoverCard key={`hovercard-${i}`}>
+            <HoverCardTrigger asChild>
               <InfoCircleOutlined className={styles.referenceIcon} />
-            </PopoverTrigger>
-            <PopoverContent>{getPopoverContent(chunkIndex)}</PopoverContent>
-          </Popover>
+            </HoverCardTrigger>
+            <HoverCardContent>{getPopoverContent(chunkIndex)}</HoverCardContent>
+          </HoverCard>
         );
       });
     },

web/src/components/floating-chat-widget.tsx

@@ -135,6 +135,9 @@ const FloatingChatWidget = () => {
     '#111827',
   );
 
+  const hookResult = (
+    isFromAgent ? useSendNextSharedMessage : useSendSharedMessage
+  )(() => {});
   const {
     handlePressEnter,
     handleInputChange,
@@ -142,7 +145,8 @@ const FloatingChatWidget = () => {
     sendLoading,
     derivedMessages,
     hasError,
-  } = (isFromAgent ? useSendNextSharedMessage : useSendSharedMessage)(() => {});
+  } = hookResult;
+  const findReferenceByMessageId = (hookResult as any).findReferenceByMessageId;
 
   // Sync our local input with the hook's value when needed
   useEffect(() => {
@@ -628,6 +632,7 @@ const FloatingChatWidget = () => {
                           loading={false}
                           content={message.content}
                           reference={
+                            findReferenceByMessageId?.(message.id) ||
                             message.reference || {
                               doc_aggs: [],
                               chunks: [],
@@ -842,6 +847,7 @@ const FloatingChatWidget = () => {
                             loading={false}
                             content={message.content}
                             reference={
+                              findReferenceByMessageId?.(message.id) ||
                               message.reference || {
                                 doc_aggs: [],
                                 chunks: [],