feat: 优化界面显示，对deck添加编辑功能

src/pages/ai-chat/AiModule.tsx

@@ -1,36 +1,110 @@
 import { useShallow } from 'zustand/react/shallow';
 import { useAiStore } from './store/ai-store';
 import { CloseOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { Button, Form, Input } from 'antd';
+import { useEffect } from 'react';
+import { TextArea } from '../container/components/TextArea';
+import clsx from 'clsx';
+import { marked } from 'marked';
 
 export const AiMoudle = () => {
+  const [form] = Form.useForm();
   const aiStore = useAiStore(
     useShallow((state) => {
       return {
         open: state.open,
         setOpen: state.setOpen,
         runAi: state.runAi,
+        formData: state.formData,
+        setFormData: state.setFormData,
+        messages: state.messages,
+        setMessages: state.setMessage,
       };
     }),
   );
-  if (!aiStore.open) {
-    return null;
-  }
+
+  useEffect(() => {
+    if (!aiStore.open) {
+      return;
+    }
+    const isNull = JSON.stringify(aiStore.formData) === '{}';
+    if (!isNull) {
+      form.setFieldsValue(aiStore.formData);
+    } else {
+      form.setFieldsValue({ inputs: [] });
+    }
+  }, [aiStore.open, aiStore.formData]);
+  useEffect(() => {
+    if (!aiStore.open) {
+      aiStore.setMessages([]);
+    }
+  }, [aiStore.open]);
+  const onSend = () => {
+    const data = form.getFieldsValue();
+    aiStore.setFormData(data);
+    aiStore.runAi();
+  };
   return (
-    <div className='w-96 flex-shrink-0 bg-gray-100 border-l-2 shadow-lg flex flex-col'>
+    <div className={clsx('w-[600px] flex-shrink-0 bg-gray-100 border-l-2 shadow-lg flex flex-col', !aiStore?.open && 'hidden')}>
       <div className='flex gap-4 bg-slate-400 p-2'>
         <Button className='position ml-4 !bg-slate-400 !border-black' onClick={() => aiStore.setOpen(false)} icon={<CloseOutlined />}></Button>
         <h1 className='ml-10'>Ai Moudle</h1>
       </div>
-      <div className='flex-grow p-2'>
-        <div> chat message</div>
-        <div>
-          <Button
-            onClick={() => {
-              aiStore.runAi();
-            }}>
-            Send
-          </Button>
+      <div className='flex-grow p-2 overflow-hidden h-full flex flex-col'>
+        <div className='flex flex-col'>
+          <div className='mb-3'> chat message</div>
+          {aiStore?.messages?.map((message, index) => {
+            const html = marked.parse(message?.content);
+            return (
+              <div key={index} className=' justify-between px-4 w-full'>
+                <div className='h3 font-bold'>{message?.role}</div>
+                <div className='p-4 text-xs border shadow-sm rounded-sm scrollbar max-h-[200px] w-full overflow-scroll' dangerouslySetInnerHTML={{ __html: html }}>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <div className='mt-4'>
+          <Form form={form}>
+            <Form.Item hidden name='id'>
+              <Input placeholder='message' />
+            </Form.Item>
+            <Form.Item name='messages' hidden>
+              <Input placeholder='message' />
+            </Form.Item>
+            <Form.Item name='key' hidden>
+              <Input placeholder='key' />
+            </Form.Item>
+            <Form.List name={'inputs'} initialValue={[]}>
+              {(fields, { add, remove }) => {
+                return (
+                  <>
+                    {fields.map((field, index) => {
+                      const key = form.getFieldValue(['inputs', index, 'key']);
+                      console.log('key', key);
+                      const isTitle = key === 'title';
+
+                      return (
+                        <div key={field.name + '-' + index} className=''>
+                          <Form.Item name={[field.name, 'key']} rules={[{ required: true, message: 'Missing name' }]} hidden noStyle>
+                            <Input placeholder='name' />
+                          </Form.Item>
+                          <Form.Item className='!mb-0' name={[field.name, 'value']} rules={[{ required: true, message: 'Missing value' }]}>
+                            <TextArea className='scrollbar' style={{ minHeight: isTitle ? 40 : 300 }} placeholder={key} />
+                          </Form.Item>
+                        </div>
+                      );
+                    })}
+                  </>
+                );
+              }}
+            </Form.List>
+          </Form>
+          <div className='p-4'>
+            <Button className='mt-4' onClick={onSend}>
+              Send
+            </Button>
+          </div>
         </div>
       </div>
     </div>