feat: Modify the style of the answer card on the search page #2247 (#2412)

### What problem does this PR solve?

feat: Modify the style of the answer card on the search page #2247

### Type of change

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

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

@@ -8,16 +8,14 @@ import styles from './index.less';
 
 const HightLightMarkdown = ({
   children,
-  className,
 }: {
   children: string | null | undefined;
-  className?: string;
 }) => {
   return (
     <Markdown
       remarkPlugins={[remarkGfm]}
       rehypePlugins={[rehypeRaw]}
-      className={classNames(styles.text, className)}
+      className={classNames(styles.text)}
       components={
         {
           code(props: any) {

web/src/locales/en.ts

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

web/src/locales/zh-traditional.ts

@@ -401,6 +401,7 @@ export default {
       tts: '文字轉語音',
       ttsTip: '是否用語音轉換播放語音，請先在設定裡面選擇TTS（語音轉換模型）。',
       relatedQuestion: '相關問題',
+      answerTitle: '智慧回答',
     },
     setting: {
       profile: '概述',

web/src/locales/zh.ts

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

web/src/pages/search/index.less

@@ -93,13 +93,23 @@
     width: 40%;
     padding: 20px 10px 10px;
   }
+
+  .highlightContent {
+    .multipleLineEllipsis(2);
+    em {
+      color: red;
+      font-style: normal;
+    }
+  }
 }
 .answerWrapper {
-  background-color: #e6f4ff;
-  padding: 14px;
   margin-top: 16px;
-  border-radius: 8px;
+  background: rgb(232 242 251 / 70%);
-  & > p {
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
+  :global(.ant-card-head) {
+    background-color: #e6f4ff;
+  }
+  & p {
     margin: 0;
   }
 }

web/src/pages/search/index.tsx

@@ -25,13 +25,14 @@ import {
   Spin,
   Tag,
 } from 'antd';
+import DOMPurify from 'dompurify';
+import { isEmpty } from 'lodash';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import MarkdownContent from '../chat/markdown-content';
 import { useFetchBackgroundImage, useSendQuestion } from './hooks';
-import SearchSidebar from './sidebar';
-
 import styles from './index.less';
+import SearchSidebar from './sidebar';
 
 const { Content } = Layout;
 const { Search } = Input;
@@ -123,16 +124,28 @@ const SearchPage = () => {
                   className={isMindMapEmpty ? styles.largeMain : styles.main}
                 >
                   {InputSearch}
-                  {answer.answer && (
+                  <Card
-                    <div className={styles.answerWrapper}>
+                    title={
+                      <Flex gap={10}>
+                        <img src="/logo.svg" alt="" width={20} />
+                        {t('chat.answerTitle')}
+                      </Flex>
+                    }
+                    className={styles.answerWrapper}
+                  >
+                    {isEmpty(answer) && sendingLoading ? (
+                      <Skeleton active />
+                    ) : (
+                      answer.answer && (
                         <MarkdownContent
                           loading={sendingLoading}
                           content={answer.answer}
                           reference={answer.reference ?? ({} as IReference)}
                           clickDocumentButton={clickDocumentButton}
                         ></MarkdownContent>
-                    </div>
+                      )
                     )}
+                  </Card>
                   <Divider></Divider>
                   <RetrievalDocuments
                     selectedDocumentIds={selectedDocumentIds}
@@ -166,11 +179,14 @@ const SearchPage = () => {
                                     </div>
                                   }
                                 >
-                                  <div>
+                                  <div
-                                    <HightLightMarkdown>
+                                    dangerouslySetInnerHTML={{
-                                      {item.highlight}
+                                      __html: DOMPurify.sanitize(
-                                    </HightLightMarkdown>
+                                        item.highlight,
-                                  </div>
+                                      ),
+                                    }}
+                                    className={styles.highlightContent}
+                                  ></div>
                                 </Popover>
                               </Space>
                             </Card>