feat: change deck edit style and add agent

plugins/flex.js

@@ -19,6 +19,7 @@ const flexCenter = plugin(function ({ addUtilities }) {
     '.card-subtitle': {},
     '.card-body': {},
     '.card-footer': {},
+    '.card-key': {},
   });
 });
 

src/App.tsx

@@ -6,7 +6,7 @@ import { App as PublishApp } from './pages/publish';
 import { App as CodeEditorApp } from './pages/code-editor';
 import { App as MapApp } from './pages/map';
 import { App as PromptApp } from './pages/prompt';
-
+import { App as AiAgentApp } from './pages/ai-agent';
 import '@abearxiong/container/dist/container.css';
 
 export const App = () => {
@@ -25,6 +25,7 @@ export const App = () => {
             <Route path='/code-editor' element={<CodeEditorApp />} />
             <Route path='/map/*' element={<MapApp />} />
             <Route path='/prompt/*' element={<PromptApp />} />
+            <Route path='/agent/*' element={<AiAgentApp />} />
             <Route path='/404' element={<div>404</div>} />
             <Route path='*' element={<div>404</div>} />
           </Routes>

src/globals.css

@@ -42,6 +42,9 @@
     .card-body {
       @apply text-gray-700;
     }
+    .card-key {
+      @apply text-xs text-gray-400;
+    }
     .card-footer {
       @apply text-sm text-gray-500;
     }

src/pages/ai-agent/edit/List.tsx

@@ -0,0 +1,156 @@
+import { useShallow } from 'zustand/react/shallow';
+import { useAgentStore } from '../store';
+import { useEffect } from 'react';
+import { CardBlank } from '@/components/card/CardBlank';
+import { Button, Form, Input, message, Modal, Tooltip } from 'antd';
+import copy from 'copy-to-clipboard';
+import { useNavigate } from 'react-router';
+import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, CaretRightOutlined } from '@ant-design/icons';
+import clsx from 'clsx';
+import { isObjectNull } from '@/utils/is-null';
+const FormModal = () => {
+  const [form] = Form.useForm();
+  const containerStore = useAgentStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        updateData: state.updateData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = containerStore.showEdit;
+    if (open) {
+      const isNull = isObjectNull(containerStore.formData);
+      if (isNull) {
+        form.setFieldsValue({});
+      } else form.setFieldsValue(containerStore.formData);
+    }
+  }, [containerStore.showEdit]);
+  const onFinish = async (values: any) => {
+    if (!values.id) {
+      message.error('Cant add data');
+      return;
+    }
+    containerStore.updateData(values);
+  };
+  const onClose = () => {
+    containerStore.setShowEdit(false);
+    form.resetFields();
+  };
+  const isEdit = containerStore.formData.id;
+  return (
+    <Modal
+      title={isEdit ? 'Edit' : 'Add'}
+      open={containerStore.showEdit}
+      onClose={() => containerStore.setShowEdit(false)}
+      destroyOnClose
+      footer={false}
+      width={800}
+      onCancel={onClose}>
+      <Form
+        form={form}
+        onFinish={onFinish}
+        labelCol={{
+          span: 4,
+        }}
+        wrapperCol={{
+          span: 20,
+        }}>
+        <Form.Item name='id' hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item name='key' label='key'>
+          <Input />
+        </Form.Item>
+        <Form.Item name='description' label='description'>
+          <Input.TextArea rows={4} />
+        </Form.Item>
+        <Form.Item label=' ' colon={false}>
+          <Button type='primary' htmlType='submit'>
+            Submit
+          </Button>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
+            Cancel
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export const List = () => {
+  const agentStore = useAgentStore(
+    useShallow((state) => {
+      return {
+        setFormData: state.setFormData,
+        setShowEdit: state.setShowEdit,
+        list: state.list,
+        deleteData: state.deleteData,
+        getList: state.getList,
+        loading: state.loading,
+        publishData: state.publishData,
+        updateData: state.updateData,
+        formData: state.formData,
+      };
+    }),
+  );
+  useEffect(() => {
+    agentStore.getList();
+  }, []);
+  return (
+    <div className='w-full h-full bg-gray-200 p-4 '>
+      <div className='h-full bg-white p-4 rounded-md'>
+        <div className='flex gap-2 flex-wrap'>
+          {agentStore.list.map((item) => {
+            return (
+              <div className='card w-[300px]' key={item.id}>
+                <div className='card-title flex flex-col justify-between '>
+                  {item.model} <div className='card-key'>{item.key}</div>
+                </div>
+                <div>
+                  <div className='flex mt-2 '>
+                    <Button.Group>
+                      <Tooltip title='Edit'>
+                        <Button
+                          onClick={(e) => {
+                            agentStore.setFormData(item);
+                            agentStore.setShowEdit(true);
+                            e.stopPropagation();
+                          }}
+                          icon={<EditOutlined />}></Button>
+                      </Tooltip>
+                      <Tooltip title='Run Chat'>
+                        <Button
+                          icon={<CaretRightOutlined />}
+                          onClick={() => {
+                            // aiStore.setData(item);
+                            // aiStore.setOpen(true);
+                            message.error('Not implemented');
+                          }}
+                        />
+                      </Tooltip>
+                      <Tooltip title='Delete'>
+                        <Button
+                          onClick={(e) => {
+                            // agentStore.deleteData(item.id);
+                            message.error('Not implemented');
+                            e.stopPropagation();
+                          }}
+                          icon={<DeleteOutlined />}></Button>
+                      </Tooltip>
+                    </Button.Group>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+          {agentStore.list.length === 0 && <div className='text-center w-full'>No data</div>}
+          <CardBlank className='w-[300px]' />
+        </div>
+      </div>
+      <FormModal />
+    </div>
+  );
+};

src/pages/ai-agent/index.tsx

@@ -0,0 +1,14 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { List } from './edit/List';
+import { Main } from './layouts';
+export const App = () => {
+  return (
+    <Routes>
+      <Route element={<Main />}>
+        <Route path='/' element={<Navigate to='/agent/edit/list' />}></Route>
+        <Route path='edit/list' element={<List />} />
+        <Route path='*' element={'Not Found'}></Route>
+      </Route>
+    </Routes>
+  );
+};

src/pages/ai-agent/layouts/index.tsx

@@ -0,0 +1,14 @@
+import { Outlet } from 'react-router';
+
+export const Main = () => {
+  return (
+    <div className='flex w-full h-full flex-col bg-gray-200'>
+      <div className='layout-menu'>Agent</div>
+      <div className='flex-grow w-full'>
+        <div className='w-full h-full overflow-hidden'>
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/ai-agent/store/index.ts

@@ -0,0 +1,94 @@
+import { create } from 'zustand';
+import { query } from '@/modules';
+import { message } from 'antd';
+type AgentStore = {
+  showEdit: boolean;
+  setShowEdit: (showEdit: boolean) => void;
+  formData: any;
+  setFormData: (formData: any) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  list: any[];
+  getList: () => Promise<void>;
+  updateData: (data: any) => Promise<void>;
+  deleteData: (id: string) => Promise<void>;
+  publishData: (data: any) => Promise<void>;
+};
+export const useAgentStore = create<AgentStore>((set, get) => {
+  return {
+    showEdit: false,
+    setShowEdit: (showEdit) => set({ showEdit }),
+    formData: {},
+    setFormData: (formData) => set({ formData }),
+    loading: false,
+    setLoading: (loading) => set({ loading }),
+    list: [],
+    getList: async () => {
+      set({ loading: true });
+
+      const res = await query.post({
+        path: 'agent',
+        key: 'list',
+      });
+      set({ loading: false });
+      if (res.code === 200) {
+        set({ list: res.data });
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
+    updateData: async (data) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'agent',
+        key: 'update',
+        data,
+      });
+      if (res.code === 200) {
+        message.success('Success');
+        set({ showEdit: false, formData: [] });
+        getList();
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
+    deleteData: async (id) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'agent',
+        key: 'delete',
+        id,
+      });
+      if (res.code === 200) {
+        getList();
+        message.success('Success');
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
+    publishData: async (data) => {
+      const hasPublish = !!data.publish?.name;
+      const publish = {
+        name: 'test-import',
+      };
+      if (!hasPublish) {
+        console.error('need publish.name');
+        return;
+      }
+      const res = await query.post({
+        path: 'agent',
+        key: 'publish',
+        data: {
+          id: data.id,
+          publish: publish,
+          type: 'patch',
+        },
+      });
+      if (res.code === 200) {
+        message.success('Success');
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
+  };
+});

src/pages/code-editor/store.ts

@@ -1,6 +1,7 @@
 import { create } from 'zustand';
 import { produce } from 'immer';
 import { query } from '@/modules';
+import { message } from 'antd';
 
 type QueryPath = {
   key?: string;
@@ -50,8 +51,12 @@ export const useCodeEditorStore = create<CodeEditorStore>((set, get) => ({
       _newData = data;
     }
     if (path && key) {
+      const load = message.loading('loading...', 0);
+
       const res = await query.post({ path, key, data: _newData });
+      load();
       if (res.code === 200) {
+        message.success('success');
         set(
           produce((state) => {
             state.data = res.data;

src/pages/container/edit/List.tsx

@@ -8,6 +8,7 @@ import copy from 'copy-to-clipboard';
 import { useNavigate } from 'react-router';
 import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined } from '@ant-design/icons';
 import clsx from 'clsx';
+import { isObjectNull } from '@/utils/is-null';
 const FormModal = () => {
   const [form] = Form.useForm();
   const containerStore = useContainerStore(
@@ -23,7 +24,12 @@ const FormModal = () => {
   useEffect(() => {
     const open = containerStore.showEdit;
     if (open) {
-      form.setFieldsValue(containerStore.formData || {});
+      if (open) {
+        const isNull = isObjectNull(containerStore.formData);
+        if (isNull) {
+          form.setFieldsValue({});
+        } else form.setFieldsValue(containerStore.formData);
+      }
     }
   }, [containerStore.showEdit]);
   const onFinish = async (values: any) => {

src/pages/map/index.tsx

@@ -19,9 +19,13 @@ const serverPath = [
     links: ['/'],
   },
   {
-    path: 'ai-chat',
+    path: 'prompt',
     links: ['/'],
   },
+  {
+    path: 'agent',
+    links: ['edit/list'],
+  },
 ];
 const ServerPath = () => {
   const navigate = useNavigate();
@@ -41,6 +45,11 @@ const ServerPath = () => {
                   if (hasId) {
                     return;
                   }
+                  console.log('link', link);
+                  if (link === '/') {
+                    navigate(`/${item.path}`);
+                    return;
+                  }
                   if (link) {
                     navigate(`/${item.path}/${link}`);
                   } else {

src/pages/panel/deck/Model.tsx

@@ -0,0 +1,127 @@
+import { isObjectNull } from '@/utils/is-null';
+import { Button, Form, Input, message, Modal, Select } from 'antd';
+import { useEffect, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { useDeckPageStore } from './deck-store';
+export const FormModal = () => {
+  const [form] = Form.useForm();
+  const [options, setOptions] = useState<{ label: string; value: any }[]>([]);
+  const deckPageStore = useDeckPageStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        pageData: state.pageData,
+        getPageData: state.getPageData,
+        formData: state.formData,
+        setFormData: state.setFormData,
+        id: state.id,
+        setSelected: state.setSelected,
+        getSeleted: state.getSeleted,
+      };
+    }),
+  );
+  useEffect(() => {
+    if (!deckPageStore.showEdit) return;
+    const pageData = deckPageStore.getPageData() || [];
+    const data = pageData.map((item) => {
+      const { container } = item?.data || {};
+      const label = container?.title;
+      return {
+        label: label || item.id,
+        value: item.id,
+      };
+    });
+    setOptions(data);
+    const selected = deckPageStore.getSeleted();
+    const { cid } = selected?.data || {};
+    if (cid) {
+      form.setFieldsValue({ cid });
+      return;
+    }
+    const isNull = isObjectNull(deckPageStore.formData);
+    if (isNull) {
+      form.setFieldsValue({});
+      form.resetFields();
+    } else {
+      form.setFieldsValue(deckPageStore.formData);
+    }
+  }, [deckPageStore.showEdit, deckPageStore.pageData]);
+  const onFinish = async (values: any) => {
+    const pageData = deckPageStore.getPageData() || [];
+    const page = pageData.find((item) => item.id === values.cid);
+    if (!page) {
+      message.error('Page not found');
+      return;
+    }
+    const cid = values.cid;
+    if (!cid) {
+      return;
+    }
+    const el = document.querySelector(`[data-cid="${values.cid}"]`);
+    if (el) {
+      const data = (el as HTMLDivElement).dataset;
+      const { cid, pid } = data;
+      document.querySelectorAll('.active').forEach((item) => {
+        item.classList.remove('active');
+      });
+      el.classList.add('active');
+      // el.scrollIntoView({ behavior: 'smooth', });
+      deckPageStore.setSelected({ type: 'active', data: { cid, pid, rid: deckPageStore.id } });
+    }
+    onClose();
+  };
+  const onClose = () => {
+    deckPageStore.setShowEdit(false);
+    deckPageStore.setFormData({});
+    form.setFieldsValue({});
+  };
+  return (
+    <Modal
+      title={'Select a element'}
+      open={deckPageStore.showEdit}
+      onClose={() => deckPageStore.setShowEdit(false)}
+      destroyOnClose
+      footer={false}
+      width={800}
+      onCancel={onClose}>
+      <Form
+        className='mt-4'
+        form={form}
+        onFinish={onFinish}
+        labelCol={{
+          span: 4,
+        }}
+        wrapperCol={{
+          span: 20,
+        }}>
+        <Form.Item name='id' hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item name='cid' label='cid'>
+          <Select
+            options={options.map((item) => {
+              return {
+                label: (
+                  <div className='flex justify-between text-black'>
+                    {item.label}
+                    <div>{item.value}</div>
+                  </div>
+                ),
+                value: item.value,
+              };
+            })}
+          />
+        </Form.Item>
+        <Form.Item label=' ' colon={false}>
+          <Button type='primary' htmlType='submit'>
+            Choose
+          </Button>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
+            Cancel
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};

src/pages/panel/deck/deck-store.ts

@@ -0,0 +1,60 @@
+import { create } from 'zustand';
+
+type DeckPageStore = {
+  id: string;
+  setId: (id: string) => void;
+  showEdit: boolean;
+  setShowEdit: (showEdit: boolean) => void;
+  formData: any;
+  setFormData: (formData: any) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  pageData: any[];
+  setPageData: (data: any[]) => void;
+  getPageData: () => any[];
+  selected: any;
+  setSelected: (data: any) => void;
+  getSeleted: () => any;
+  code: string;
+  setCode: (data: string) => void;
+  getCode: () => string;
+};
+export const useDeckPageStore = create<DeckPageStore>((set, get) => ({
+  id: '',
+  setId: (id) => {
+    set({ id });
+  },
+  showEdit: false,
+  setShowEdit: (showEdit) => {
+    set({ showEdit });
+  },
+  formData: {},
+  setFormData: (formData) => {
+    set({ formData });
+  },
+  loading: false,
+  setLoading: (loading) => {
+    set({ loading });
+  },
+  pageData: [],
+  setPageData: (data) => {
+    set({ pageData: data });
+  },
+  getPageData: () => {
+    return get().pageData;
+  },
+  selected: null,
+  setSelected: (data) => {
+    set({ selected: data });
+  },
+  getSeleted: () => {
+    return get().selected;
+  },
+  code: '',
+  setCode: (data) => {
+    set({ code: data });
+  },
+  getCode: () => {
+    return get().code;
+  },
+}));

src/pages/panel/deck/index.tsx

@@ -1,11 +1,15 @@
 import { Container, ContainerEdit } from '@abearxiong/container';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router';
 import { query, useStore, ws } from '@/modules';
-import { message } from 'antd';
+import { Button, message, Tooltip } from 'antd';
 import { getContainerData } from '@/modules/deck-to-flow/deck';
 import { usePanelStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
+import { TextArea } from '@/pages/container/components/TextArea';
+import { CloseOutlined, SaveOutlined, SelectOutlined } from '@ant-design/icons';
+import { useDeckPageStore } from './deck-store';
+import { FormModal } from './Model.tsx';
 export const useListener = (id?: string, opts?: any) => {
   const { refresh } = opts || {};
   const connected = useStore((state) => state.connected);
@@ -62,13 +66,15 @@ const getParent = (data: { children?: string[]; [key: string]: any }[], id: stri
   }
   return;
 };
+
 export const Deck = () => {
   const params = useParams<{ id: string }>();
   const id = params.id;
   const ref = useRef<HTMLDivElement>(null);
   const containerRef = useRef<ContainerEdit | null>(null);
-  const [pageData, setPageData] = useState<any>({});
-  const [selected, setSelected] = useState<any>(null);
+  const deckPageStore = useDeckPageStore();
+  const { code, setCode } = deckPageStore;
+  const { selected, setSelected } = deckPageStore;
   const panelStore = usePanelStore(
     useShallow((state) => {
       return {
@@ -78,12 +84,17 @@ export const Deck = () => {
   );
   useEffect(() => {
     if (!id) return;
+    deckPageStore.setId(id);
     fetch();
   }, []);
   useEffect(() => {
     ref.current?.addEventListener('onContainer', onContainer);
     return () => {
       ref.current?.removeEventListener('onContainer', onContainer);
+      if (ref.current) {
+        const children = ref.current;
+        children.innerHTML = '';
+      }
     };
   }, []);
   const fetch = async () => {
@@ -97,23 +108,9 @@ export const Deck = () => {
       console.log('data', data);
       const { page, containerList } = data;
       const result = getContainerData({ page, containerList });
-      setPageData(result);
+      deckPageStore.setPageData(result);
       init(result);
     }
-    // if (res.code === 200) {
-    //   const data = res.data;
-    //   // setData([data]);
-    //   console.log('data', data);
-    //   const code = {
-    //     id: data.id,
-    //     title: data.title,
-    //     code: data.code,
-    //     data: data.data,
-    //   };
-    //   init([code]);
-    // } else {
-    //   message.error(res.msg || 'Failed to fetch data');
-    // }
   };
   const refresh = async (data: any) => {
     console.log('refresh', data);
@@ -144,8 +141,6 @@ export const Deck = () => {
     const types = ['position', 'resize'];
     if (types.includes(data.type)) {
       const { type, data: containerData } = data;
-      console.log('containerData', containerData);
-
       if (type === 'position') {
         const { cid, left, top, rid } = containerData;
         const newData = {
@@ -154,6 +149,7 @@ export const Deck = () => {
             id: cid,
             data: {
               style: {
+                // position: 'absolute',
                 left,
                 top,
               },
@@ -163,6 +159,10 @@ export const Deck = () => {
         if (left && top) {
           panelStore.updateNodeDataStyle(newData);
         }
+        updateStyle(cid, { left, top });
+        setTimeout(() => {
+          setCodeStyle(cid);
+        }, 1000);
       } else if (type === 'resize') {
         const { cid, rid, width, height } = containerData;
         const newData = {
@@ -180,19 +180,85 @@ export const Deck = () => {
         if (width && height) {
           panelStore.updateNodeDataStyle(newData);
         }
+        updateStyle(cid, { width, height });
+        setTimeout(() => {
+          setCodeStyle(cid);
+        }, 1000);
       }
     } else if (data.type === 'active') {
       if (!data?.data?.cid) {
         setSelected(null);
         return;
       }
-      const { cid, rid } = data;
-      console.log('getParent', cid, pageData);
+      const { cid, rid } = data?.data || {};
       setSelected(data);
+      setCodeStyle(cid);
     } else {
       console.log('onContainer', data);
     }
   };
+  const onSave = () => {
+    const { cid, rid } = selected?.data || {};
+    let data: any;
+    try {
+      data = JSON.parse(code);
+    } catch (error) {
+      message.error('JSON format error');
+      return;
+    }
+    const newData = {
+      id: rid,
+      nodeData: {
+        id: cid,
+        data: {
+          style: data,
+        },
+      },
+    };
+    panelStore.updateNodeDataStyle(newData);
+  };
+  const setCodeStyle = (cid: string) => {
+    const pageData = deckPageStore.getPageData();
+    const selected = deckPageStore.getSeleted();
+    const _data = pageData.find((item) => item.id === cid);
+    const node = _data?.data?.node || {};
+    if (selected?.data?.cid === cid) {
+      setCode('');
+      setCode(JSON.stringify(node?.data?.style || {}, null, 2));
+    }
+  };
+  useEffect(() => {
+    if (selected) {
+      const { cid } = selected?.data || {};
+      cid && setCodeStyle(cid);
+    }
+  }, [deckPageStore.selected]);
+
+  const updateStyle = (rid: string, style: any) => {
+    const pageData = deckPageStore.getPageData();
+    const _pageData = pageData.map((item) => {
+      if (item.id === rid) {
+        return {
+          ...item,
+          data: {
+            ...item.data,
+            node: {
+              ...item.data.node,
+              data: {
+                ...item.data.node.data,
+                style: {
+                  ...item.data.node.data.style,
+                  ...style,
+                },
+              },
+            },
+          },
+        };
+      }
+      return item;
+    });
+    deckPageStore.setPageData([..._pageData]);
+  };
   const init = async (data: any[]) => {
     console.log(
       'init',
@@ -215,22 +281,54 @@ export const Deck = () => {
   return (
     <div className='w-full h-full relative'>
       <div className='w-full h-full bg-gray-200 '>
-        <div className='text-center mb-10 font-bold text-4xl mt-4 '>Deck</div>
+        <div className='text-center mb-10 font-bold text-4xl mt-4 flex items-center justify-center group'>
+          Deck
+          <Tooltip>
+            <Button
+              className='ml-4 hidden group-hover:block'
+              icon={<SelectOutlined />}
+              onClick={() => {
+                deckPageStore.setShowEdit(true);
+              }}></Button>
+          </Tooltip>
+        </div>
         <div
           className='flex '
           style={{
             height: 'calc(100% - 32px)',
           }}>
-          <div className='mx-auto border bg-white  w-[80%] h-[80%] scrollbar overflow-scroll relative' ref={ref}></div>
+          <div className='mx-auto border  rounded-md bg-white  w-[80%] h-[80%] scrollbar overflow-scroll relative' ref={ref}></div>
         </div>
       </div>
       {selected && (
         <div className='absolute bottom-5 z-50 w-full h-[200px]'>
-          <div className=' p-2 card w-[80%]  mx-auto border bg-red-50 overflow-scroll scrollbar'>
-            <pre>{JSON.stringify(selected, null, 2)}</pre>
+          <div className=' p-2 card w-[80%]  mx-auto border bg-slate-200 rounded-md overflow-scroll scrollbar'>
+            {/* <pre>{JSON.stringify(selected, null, 2)}</pre> */}
+            <div>
+              <Button.Group>
+                <Tooltip title='Close'>
+                  <Button
+                    onClick={() => {
+                      setSelected(null);
+                    }}
+                    icon={<CloseOutlined />}></Button>
+                </Tooltip>
+                <Tooltip title='Save'>
+                  <Button
+                    onClick={() => {
+                      onSave();
+                    }}
+                    icon={<SaveOutlined />}></Button>
+                </Tooltip>
+              </Button.Group>
+            </div>
+            <div className='h-[200px]'>
+              <TextArea className='h-[100px] rounded-md' value={code} />
+            </div>
           </div>
         </div>
       )}
+      <FormModal />
     </div>
   );
 };

src/pages/prompt/edit/List.tsx

@@ -12,6 +12,7 @@ import { TextArea } from '@/pages/container/components/TextArea';
 import { marked } from 'marked';
 import { extractKeysFromBraces } from '@/utils/extra';
 import { useAiStore } from '@/pages/ai-chat';
+import { CardBlank } from '@/components/card/CardBlank';
 
 const FormModal = () => {
   const [form] = Form.useForm();
@@ -256,9 +257,7 @@ export const List = () => {
                   </Fragment>
                 );
               })}
-            {new Array(4).fill(0).map((_, index) => {
-              return <div key={index} className='w-[600px]'></div>;
-            })}
+            <CardBlank  className='w-[600px]' />
             {promptStore.list.length == 0 && (
               <div className='text-center' key={'no-data'}>
                 No Data