feat: send question with retrieval api #2247 (#2272)

### What problem does this PR solve?
feat: send question with retrieval api #2247

### Type of change


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

web/src/components/image.tsx

@@ -1,19 +0,0 @@
-import { api_host } from '@/utils/api';
-
-interface IImage {
-  id: string;
-  className: string;
-}
-
-const Image = ({ id, className, ...props }: IImage) => {
-  return (
-    <img
-      {...props}
-      src={`${api_host}/document/image/${id}`}
-      alt=""
-      className={className}
-    />
-  );
-};
-
-export default Image;

web/src/components/image/index.less

@@ -0,0 +1,10 @@
+.image {
+  width: 100px;
+  object-fit: contain;
+}
+
+.imagePreview {
+  display: block;
+  max-width: 45vw;
+  max-height: 40vh;
+}

web/src/components/image/index.tsx

@@ -0,0 +1,33 @@
+import { api_host } from '@/utils/api';
+import { Popover } from 'antd';
+
+import styles from './index.less';
+
+interface IImage {
+  id: string;
+  className: string;
+}
+
+const Image = ({ id, className, ...props }: IImage) => {
+  return (
+    <img
+      {...props}
+      src={`${api_host}/document/image/${id}`}
+      alt=""
+      className={className}
+    />
+  );
+};
+
+export default Image;
+
+export const ImageWithPopover = ({ id }: { id: string }) => {
+  return (
+    <Popover
+      placement="left"
+      content={<Image id={id} className={styles.imagePreview}></Image>}
+    >
+      <Image id={id} className={styles.image}></Image>
+    </Popover>
+  );
+};