feat: Wrap the searched chunk with a Popover #2247 (#2398)

### What problem does this PR solve?

feat: Wrap the searched chunk with a Popover #2247

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/components/highlight-markdown/index.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import Markdown from 'react-markdown';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import rehypeRaw from 'rehype-raw';
@@ -7,14 +8,16 @@ import styles from './index.less';
 
 const HightLightMarkdown = ({
   children,
+  className,
 }: {
   children: string | null | undefined;
+  className?: string;
 }) => {
   return (
     <Markdown
       remarkPlugins={[remarkGfm]}
       rehypePlugins={[rehypeRaw]}
-      className={styles.text}
+      className={classNames(styles.text, className)}
       components={
         {
           code(props: any) {

web/src/components/image/index.less

@@ -1,5 +1,10 @@
+.primitiveImg {
+  display: inline-block;
+  max-height: 100px;
+}
+
 .image {
-  width: 100px;
+  max-width: 100px;
   object-fit: contain;
 }
 

web/src/components/image/index.tsx

@@ -1,5 +1,6 @@
 import { api_host } from '@/utils/api';
 import { Popover } from 'antd';
+import classNames from 'classnames';
 
 import styles from './index.less';
 
@@ -14,7 +15,7 @@ const Image = ({ id, className, ...props }: IImage) => {
       {...props}
       src={`${api_host}/document/image/${id}`}
       alt=""
-      className={className}
+      className={classNames(styles.primitiveImg, className)}
     />
   );
 };

web/src/locales/en.ts

@@ -431,6 +431,7 @@ The above is the content you need to summarize.`,
       tts: 'Text to speech',
       ttsTip:
         'To play the voice using voice conversion, please select TTS (speech conversion model) in the settings first.',
+      relatedQuestion: 'Related question',
     },
     setting: {
       profile: 'Profile',

web/src/locales/zh-traditional.ts

@@ -400,6 +400,7 @@ export default {
       read: '朗讀內容',
       tts: '文字轉語音',
       ttsTip: '是否用語音轉換播放語音，請先在設定裡面選擇TTS（語音轉換模型）。',
+      relatedQuestion: '相關問題',
     },
     setting: {
       profile: '概述',
@@ -832,7 +833,7 @@ export default {
       wenCai: '問財',
       queryType: '查詢類型',
       wenCaiDescription:
-        '該組件可用於獲取廣泛的金融領域的信息，包括但不限於股票、基金等...',
+        '該組件可用於獲取廣泛的金融領域的o息，包括但不限於股票、基金等...',
       wenCaiQueryTypeOptions: {
         stock: '股票',
         zhishu: '指數',

web/src/locales/zh.ts

@@ -417,6 +417,7 @@ export default {
       read: '朗读内容',
       tts: '文本转语音',
       ttsTip: '是否用语音转换播放语音，请先在设置里面选择TTS（语音转换模型）。',
+      relatedQuestion: '相关问题',
     },
     setting: {
       profile: '概要',

web/src/pages/search/index.less

@@ -168,3 +168,9 @@
     background-position: 200% center;
   }
 }
+
+.popupMarkdown {
+  width: 60vw;
+  max-height: 40vh;
+  overflow: auto;
+}

web/src/pages/search/index.tsx

@@ -19,6 +19,7 @@ import {
   List,
   Pagination,
   PaginationProps,
+  Popover,
   Skeleton,
   Space,
   Tag,
@@ -150,9 +151,21 @@ const SearchPage = () => {
                               <ImageWithPopover
                                 id={item.img_id}
                               ></ImageWithPopover>
-                              <HightLightMarkdown>
+                              <Popover
-                                {item.highlight}
+                                content={
-                              </HightLightMarkdown>
+                                  <div className={styles.popupMarkdown}>
+                                    <HightLightMarkdown>
+                                      {item.content_with_weight}
+                                    </HightLightMarkdown>
+                                  </div>
+                                }
+                              >
+                                <div>
+                                  <HightLightMarkdown>
+                                    {item.highlight}
+                                  </HightLightMarkdown>
+                                </div>
+                              </Popover>
                             </Space>
                           </Card>
                         </List.Item>
@@ -160,7 +173,7 @@ const SearchPage = () => {
                     />
                   )}
                   {relatedQuestions?.length > 0 && (
-                    <Card>
+                    <Card title={t('chat.relatedQuestion')}>
                       <Flex wrap="wrap" gap={'10px 0'}>
                         {relatedQuestions?.map((x, idx) => (
                           <Tag