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)}
     />
   );
 };