feat: finish the modal of add knowledge space

datacenter/app/datastores/page.tsx

@@ -0,0 +1,201 @@
+'use client'
+
+import type { ProFormInstance } from '@ant-design/pro-components';
+import React, { useState, useRef } from 'react'
+import {
+  ProCard,
+  ProForm,
+  ProFormCheckbox,
+  ProFormDatePicker,
+  ProFormDateRangePicker,
+  ProFormSelect,
+  ProFormText,
+  ProFormTextArea,
+  StepsForm
+} from '@ant-design/pro-components'
+import { Button, Modal, message } from 'antd'
+
+const Index = () => {
+  const formRef = useRef<ProFormInstance>();
+  const [isAddKnowledgeSpaceModalShow, setIsAddKnowledgeSpaceModalShow] =
+    useState<boolean>(false);
+  const [knowledgeSpaceName, setKnowledgeSpaceName] = useState<string>('');
+  const [webUrlName, setWebUrlName] = useState<string>('');
+  const [webPageUrl, setWebPageUrl] = useState<string>('');
+  return (
+    <>
+      <div className="header">
+        <div>Knowledge Spaces</div>
+        <Button onClick={() => setIsAddKnowledgeSpaceModalShow(true)} type='primary'>
+          + New Knowledge Space
+        </Button>
+      </div>
+      <Modal
+        title="Add Knowledge Space"
+        footer={null}
+        width={900}
+        open={isAddKnowledgeSpaceModalShow}
+        onOk={() => console.log('ok')}
+        onCancel={() => setIsAddKnowledgeSpaceModalShow(false)}
+      >
+        <ProCard>
+          <StepsForm<{
+            name: string
+          }>
+            formRef={formRef}
+            onFinish={async () => {
+              message.success('success')
+            }}
+            formProps={{
+              validateMessages: {
+                required: 'This is required'
+              }
+            }}
+            submitter={{
+              render: (props) => {
+                if (props.step === 0) {
+                  return (
+                    <Button type="primary" onClick={async () => {
+                      if (knowledgeSpaceName === '') {
+                        props.onSubmit?.()
+                      } else {
+                        props.onSubmit?.();
+                        const res = await fetch('/knowledge/space/add', {
+                          method: 'POST',
+                          headers: {
+                          'Content-Type': 'application/json',
+                          },
+                          body: JSON.stringify({
+                            name: knowledgeSpaceName,
+                            vector_type: "Chroma",
+                            owner: "keting",
+                            desc: "test1"
+                          }),
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                          props.onSubmit?.();
+                          message.success('success');
+                        } else {
+                          message.error(data.err_msg || 'failed');
+                        }
+                      }
+                    }}>
+                      Next {'>'}
+                    </Button>
+                  );
+                } else if (props.step === 1) {
+                  return (
+                    <Button type="primary" onClick={() => props.onSubmit?.()}>
+                      Web Page {'>'}
+                    </Button>
+                  );
+                }
+                
+                return [
+                  <Button key="gotoTwo" onClick={() => props.onPre?.()}>
+                    Previous {'<'} 
+                  </Button>,
+                  <Button
+                    type="primary"
+                    key="goToTree"
+                    onClick={async () => {
+                      props.onSubmit?.();
+                      const res = await fetch(`/knowledge/${knowledgeSpaceName}/document/add`, {
+                        method: 'POST',
+                        headers: {
+                        'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                          doc_name: webUrlName,
+                          doc_type: webPageUrl
+                        }),
+                      });
+                      const data = await res.json();
+                      if (data.success) {
+                        props.onSubmit?.();
+                        message.success('success');
+                      } else {
+                        message.error(data.err_msg || 'failed');
+                      }
+                    }}
+                  >
+                    Finish
+                  </Button>,
+                ];
+              },
+            }}
+          >
+            <StepsForm.StepForm<{
+              name: string
+            }>
+              name="base"
+              title="Knowledge Space Configuration"
+              onFinish={async () => {
+                console.log(formRef.current?.getFieldsValue())
+                return true
+              }}
+            >
+              <ProFormText
+                name="name"
+                label="Knowledge Space Name"
+                width="lg"
+                placeholder="Please input the name"
+                rules={[{ required: true }]}
+                onChange={(e: any) => setKnowledgeSpaceName(e.target.value)}
+              />
+            </StepsForm.StepForm>
+            <StepsForm.StepForm<{
+              checkbox: string
+            }>
+              name="checkbox"
+              title="Choose a Datasource type"
+              onFinish={async () => {
+                console.log(formRef.current?.getFieldsValue())
+                return true
+              }}
+            >
+            </StepsForm.StepForm>
+            <StepsForm.StepForm
+              name="time"
+              title="Setup the Datasource"
+            >
+              <ProFormText
+                name="webUrlName"
+                label="Name"
+                width="lg"
+                placeholder="Please input the name"
+                rules={[{ required: true }]}
+                onChange={(e: any) => setWebUrlName(e.target.value)}
+              />
+              <ProFormText
+                name="webPageUrl"
+                label="Web Page URL"
+                width="lg"
+                placeholder="Please input the name"
+                rules={[{ required: true }]}
+                onChange={(e: any) => setWebPageUrl(e.target.value)}
+              />
+            </StepsForm.StepForm>
+          </StepsForm>
+        </ProCard>
+      </Modal>
+      <style jsx>{`
+        .header {
+          display: flex;
+          justify-content: space-between;
+        }
+        .datasource-type-wrap {
+          height: 100px;
+          line-height: 100px;
+          border: 1px solid black;
+          border-radius: 20px;
+          margin-bottom: 20px;
+          cursor: pointer;
+        }
+      `}</style>
+    </>
+  )
+}
+
+export default Index

datacenter/package.json

@@ -9,9 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ant-design/pro-components": "^2.6.2",
     "@types/node": "20.3.1",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
+    "antd": "^5.6.2",
     "autoprefixer": "10.4.14",
     "eslint": "8.43.0",
     "eslint-config-next": "13.4.7",