feat: set chunk to available state and select all chunk (#57)

* feat: set chunk to available state

* feat: select all chunk

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx

@@ -0,0 +1,88 @@
+import { IChunk } from '@/interfaces/database/knowledge';
+import { api_host } from '@/utils/api';
+import { Card, Checkbox, CheckboxProps, Flex, Popover, Switch } from 'antd';
+import { useDispatch } from 'umi';
+
+import { useState } from 'react';
+import styles from './index.less';
+
+interface IProps {
+  item: IChunk;
+  checked: boolean;
+  handleCheckboxClick: (chunkId: string, checked: boolean) => void;
+}
+
+interface IImage {
+  id: string;
+  className: string;
+}
+// Pass onMouseEnter and onMouseLeave to img tag using props
+const Image = ({ id, className, ...props }: IImage) => {
+  return (
+    <img
+      {...props}
+      src={`${api_host}/document/image/${id}`}
+      alt=""
+      className={className}
+    />
+  );
+};
+
+const ChunkCard = ({ item, checked, handleCheckboxClick }: IProps) => {
+  const dispatch = useDispatch();
+
+  const available = Number(item.available_int);
+  const [enabled, setEnabled] = useState(available === 1);
+
+  const switchChunk = () => {
+    dispatch({
+      type: 'chunkModel/switch_chunk',
+      payload: {
+        chunk_ids: [item.chunk_id],
+        available_int: available === 0 ? 1 : 0,
+        doc_id: item.doc_id,
+      },
+    });
+  };
+
+  const onChange = (checked: boolean) => {
+    setEnabled(checked);
+    switchChunk();
+  };
+
+  const handleCheck: CheckboxProps['onChange'] = (e) => {
+    handleCheckboxClick(item.chunk_id, e.target.checked);
+  };
+
+  return (
+    <div>
+      <Card>
+        <Flex gap={'middle'} justify={'space-between'}>
+          <Checkbox onChange={handleCheck} checked={checked}></Checkbox>
+          {item.img_id && (
+            <Popover
+              placement="topRight"
+              content={
+                <Image id={item.img_id} className={styles.imagePreview}></Image>
+              }
+            >
+              <img
+                src={`${api_host}/document/image/${item.img_id}`}
+                alt=""
+                className={styles.image}
+              />
+              <Image id={item.img_id} className={styles.image}></Image>
+            </Popover>
+          )}
+
+          <section>{item.content_with_weight}</section>
+          <div>
+            <Switch checked={enabled} onChange={onChange} />
+          </div>
+        </Flex>
+      </Card>
+    </div>
+  );
+};
+
+export default ChunkCard;