feat: add chat history and session

src/modules/query.ts

@@ -2,7 +2,7 @@ import { Query, QueryClient } from '@kevisual/query';
 import { QueryWs } from '@kevisual/query/ws';
 import { modal } from './redirect-to-login';
 import { create } from 'zustand';
-export const query = new Query();
+export const query = new QueryClient();
 query.beforeRequest = async (config) => {
   if (config.headers) {
     const token = localStorage.getItem('token');

src/pages/ai-agent/index.tsx

@@ -12,3 +12,5 @@ export const App = () => {
     </Routes>
   );
 };
+
+export * from './module/Select';

src/pages/ai-agent/module/Select.tsx

@@ -0,0 +1,39 @@
+import { query } from '@/modules';
+import { Select as AntSelect, message, SelectProps } from 'antd';
+import { useEffect, useState } from 'react';
+
+export const Select = (props: SelectProps) => {
+  const [options, setOptions] = useState<{ value: string; id: string }[]>([]);
+  useEffect(() => {
+    fetch();
+  }, []);
+  const fetch = async () => {
+    const res = await query.post({
+      path: 'agent',
+      key: 'list',
+    });
+    if (res.code !== 200) {
+      message.error(res.message || '获取agent列表失败');
+      return;
+    }
+    const data = res.data || [];
+    setOptions(
+      data.map((item: any) => {
+        return {
+          label: item.key,
+          value: item.id,
+        };
+      }),
+    );
+  };
+  return (
+    <AntSelect
+      {...props}
+      options={options}
+      // onChange={(e) => {
+      //   const labelValue = options.find((item) => item.value === e);
+      //   props.onChange?.(e, options);
+      // }}
+    />
+  );
+};

src/pages/ai-chat/AiModule.tsx

@@ -1,28 +1,180 @@
 import { useShallow } from 'zustand/react/shallow';
 import { useAiStore } from './store/ai-store';
-import { CloseOutlined, HistoryOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Tooltip } from 'antd';
+import { CloseOutlined, HistoryOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Dropdown, Form, Input, message, Modal, Tooltip } from 'antd';
 import { useEffect } from 'react';
 import { TextArea } from '../container/components/TextArea';
 import clsx from 'clsx';
-import { marked } from 'marked';
+import { query } from '@/modules';
+import { nanoid } from 'nanoid';
+import { ChatMessage } from './module/ChatMessage';
+import { isObjectNull } from '@/utils/is-null';
+import { useNavigate } from 'react-router';
+const testId = '60aca66b-4be9-4266-9568-6001032c7e13';
+
+type FormModalProps = {
+  send?: any;
+};
+const FormModal = (props: FormModalProps) => {
+  const [form] = Form.useForm();
+  const aiStore = useAiStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        setMessage: state.setMessage,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = aiStore.showEdit;
+    if (open) {
+      const isNull = isObjectNull(aiStore.formData);
+      if (isNull) {
+        form.setFieldsValue({});
+      } else form.setFieldsValue(aiStore.formData);
+    }
+  }, [aiStore.showEdit]);
+  const onFinish = async (values: any) => {
+    props.send({
+      type: 'changeSession',
+      data: {
+        id: testId,
+      },
+    });
+    aiStore.setMessage([]);
+  };
+  const onClose = () => {
+    aiStore.setShowEdit(false);
+    form.resetFields();
+  };
+  const isEdit = aiStore.formData.id;
+  return (
+    <Modal
+      title={isEdit ? 'Edit' : 'Add'}
+      open={aiStore.showEdit}
+      onClose={() => aiStore.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='sessionId' label='sessionId'>
+          <Input />
+        </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 useListenQuery = () => {
+  const aiStore = useAiStore(
+    useShallow((state) => {
+      return {
+        open: state.open,
+        key: state.key,
+        onMessage: state.onMessage,
+      };
+    }),
+  );
+  // TODO: Implement useEffect
+  useEffect(() => {
+    if (!aiStore.open) {
+      return;
+    }
+    const open = aiStore.open;
+    send({
+      type: 'subscribe',
+      token: query.getToken(),
+      data: {
+        key: aiStore.key,
+      },
+    });
+    const close = query.qws.onMessage(onMessage, {
+      selector: (data) => {
+        const requestId = data.requestId;
+        return {
+          requestId,
+          ...data.data,
+        };
+      },
+    });
+    return () => {
+      send({ type: 'unsubscribe' });
+      close();
+    };
+  }, [aiStore.open, query]);
+  const send = async (data: any) => {
+    query.qws.send(data, {
+      wrapper: (data) => ({
+        requestId: nanoid(16),
+        type: 'chat',
+        data: data,
+      }),
+    });
+  };
+  const onMessage = (data: any) => {
+    type MessageData = {
+      chatId: string;
+      chatPromptId: string;
+      role: string;
+      root: boolean;
+      show: boolean;
+      data: {
+        message: string;
+      };
+    };
+    if (data.code === 200 && data.type === 'messages') {
+      const messageData = data.data as MessageData;
+      aiStore.onMessage(messageData);
+    }
+  };
+  return {
+    send,
+  };
+};
 
 export const AiMoudle = () => {
   const [form] = Form.useForm();
+  const navigate = useNavigate();
   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,
+        key: state.key,
+        root: state.root,
+        setRoot: state.setRoot,
+        title: state.title,
+        setShowEdit: state.setShowEdit,
+        list: state.list,
+        getList: state.getList,
       };
     }),
   );
-
   useEffect(() => {
     if (!aiStore.open) {
       return;
@@ -37,66 +189,36 @@ export const AiMoudle = () => {
   useEffect(() => {
     if (!aiStore.open) {
       aiStore.setMessages([]);
+    } else {
+      aiStore.getList();
     }
   }, [aiStore.open]);
+  const { send } = useListenQuery();
   const onSend = () => {
     const data = form.getFieldsValue();
-    aiStore.setFormData(data);
-    aiStore.runAi();
+    send({ type: 'messages', data: { ...data, root: true } });
   };
-  return (
-    <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-4'>Ai Moudle</h1>
-        <div className='ml-4'>
-          <Tooltip title='历史会话'>
-            <Button className='!bg-slate-400 !border-black' icon={<HistoryOutlined />}></Button>
-          </Tooltip>
-        </div>
-      </div>
-      <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>
+  const inputs = form.getFieldValue('inputs');
+  const isNotShow = inputs?.length === 0 || !inputs;
+  const RootForm = (
+    <div className='flex flex-col relative'>
+      <div className={clsx('flex flex-col', isNotShow && 'invisible')}>
+        <div className='mt-1 ml-2'>在当前页面，我能帮助你什么吗?</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} />
+                            <TextArea className='scrollbar' style={{ minHeight: 180 }} placeholder={key} />
                           </Form.Item>
                         </div>
                       );
@@ -106,13 +228,95 @@ export const AiMoudle = () => {
               }}
             </Form.List>
           </Form>
-          <div className='p-4'>
-            <Button className='mt-4' onClick={onSend}>
-              Send
+          <div className='px-4'>
+            <Button type='primary' className='mt-4' onClick={onSend}>
+              发送
             </Button>
           </div>
         </div>
       </div>
+      {isNotShow && (
+        <div className='mt-2 text-gray-400 flex absolute top-3'>
+          当前页面没有配置，点击
+          <div
+            className='text-blue-500 cursor-pointer'
+            onClick={(e) => {
+              navigate('/chat/chat-prompt/list');
+            }}>
+            去配置
+          </div>
+        </div>
+      )}
+    </div>
+  );
+  const ChatForm = (
+    <ChatMessage
+      messages={aiStore.messages}
+      onSend={(value) => {
+        send({ type: 'messages', data: { message: value } });
+      }}
+    />
+  );
+  const items = aiStore.list.map((item) => {
+    return {
+      key: item.id,
+      label: item.title || item.id,
+      onClick: () => {
+        // aiStore.setKey(item.id);
+        // 选中具体的
+        send({
+          type: 'changeSession',
+          data: {
+            id: item.id,
+          },
+        });
+        aiStore.setMessages([]);
+      },
+    };
+  });
+  return (
+    <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 justify-between  p-2 border bg-white'>
+        <div className='flex gap-4'>
+          <Button className='position ml-4 ' onClick={() => aiStore.setOpen(false)} icon={<CloseOutlined />}></Button>
+          <h1 className=''>{aiStore.title || 'Ai Module'}</h1>
+        </div>
+        <div className='mr-4 flex'>
+          {!aiStore.root && (
+            <Button
+              className='mr-2'
+              onClick={() => {
+                aiStore.setMessages([]);
+                aiStore.setRoot(true);
+                send({
+                  type: 'changeSession',
+                  data: {
+                    id: null,
+                  },
+                });
+              }}
+              icon={<PlusOutlined />}></Button>
+          )}
+          <Dropdown
+            className='mr-2'
+            placement='bottomRight'
+            menu={{
+              items,
+            }}>
+            <Button className='' icon={<HistoryOutlined />}></Button>
+          </Dropdown>
+          {/* <Tooltip title='历史会话'>
+            <Button
+              className=''
+              onClick={() => {
+                aiStore.setShowEdit(true);
+              }}
+              icon={<HistoryOutlined />}></Button>
+          </Tooltip> */}
+        </div>
+      </div>
+      <div className='flex-grow p-2 overflow-hidden h-full flex flex-col'>{aiStore.root ? RootForm : ChatForm}</div>
+      <FormModal send={send} />
     </div>
   );
 };

src/pages/ai-chat/assets/ai-avatar.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
+  <rect x="6" y="11" width="4" height="4"></rect>
+  <rect x="14" y="11" width="4" height="4"></rect>
+  <path d="M6 7V5a2 2 0 012-2h8a2 2 0 012 2v2"></path>
+</svg>

src/pages/ai-chat/assets/user-avatar.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="64"
+  height="64"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="7" r="5"></circle>
+  <path d="M5.5 21h13a2 2 0 002-2v-1a7 7 0 00-14 0v1a2 2 0 002 2z"></path>
+</svg>

src/pages/ai-chat/module/ChatMessage.tsx

@@ -0,0 +1,79 @@
+import { marked } from 'marked';
+import clsx from 'clsx';
+import AIAvatar from '../assets/ai-avatar.svg'; // 替换为您的 AI 头像路径
+import UserAvatar from '../assets/user-avatar.svg'; // 替换为您的用户头像路径
+import { TextArea } from '@/pages/container/components/TextArea';
+import { Button } from 'antd';
+import { SendOutlined } from '@ant-design/icons';
+import { useState } from 'react';
+
+export type MessageType = 'ai' | 'user';
+
+export type Message = {
+  role: string;
+  content: string;
+};
+
+export const ChatMessageOne = (props: { message: Message }) => {
+  const { message } = props;
+  const htmlContent = marked.parse(message.content);
+  const isUser = message.role === 'user';
+
+  const containerClasses = clsx('flex mb-4 items-start', {
+    'justify-start flex-row': !isUser,
+    'flex-row-reverse': isUser,
+  });
+  const messageClasses = clsx('max-w-[76%] p-3 rounded-lg ', {
+    'bg-blue-500 text-white': isUser,
+    'bg-gray-200 text-gray-800': !isUser,
+  });
+
+  const avatarSrc = isUser ? UserAvatar : AIAvatar;
+  const avatarAlt = isUser ? 'User Avatar' : 'AI Avatar';
+
+  return (
+    <div className={containerClasses}>
+      <img src={avatarSrc} alt={avatarAlt} className='w-10 h-10 mx-2 rounded-full border border-gray-300 p-2' />
+      <div className={messageClasses} dangerouslySetInnerHTML={{ __html: htmlContent }} />
+    </div>
+  );
+};
+
+type ChatMessageProps = {
+  messages: Message[];
+  onSend?: (message: string) => void;
+};
+
+export const ChatMessage = (props: ChatMessageProps) => {
+  const { messages } = props;
+  const [inputValue, setInputValue] = useState('');
+  const onSend = () => {
+    if (!inputValue) return;
+    props.onSend?.(inputValue);
+    setInputValue('');
+  };
+  return (
+    <div className='w-full h-full'>
+      <div className='max-h-[80%] overflow-y-auto scrollbar bg-white p-2 mx-1 border shadow-sm pt-5 rounded-lg'>
+        <div className='flex flex-col'>
+          {messages.map((message, index) => (
+            <ChatMessageOne key={index} message={message} />
+          ))}
+        </div>
+      </div>
+      <div className='relative'>
+        <TextArea
+          value={inputValue}
+          onChange={(e) => {
+            setInputValue(e);
+          }}
+          className='max-h-64'
+          style={{ minHeight: 180 }}
+          language='markdown'
+          placeholder='Message AI'
+        />
+        <Button onClick={onSend} className='absolute bottom-4 right-4 cursor-pointer' type='primary' icon={<SendOutlined />}></Button>
+      </div>
+    </div>
+  );
+};

src/pages/ai-chat/store/ai-history.ts

@@ -0,0 +1,25 @@
+import { StateCreator } from 'zustand';
+import { AiStore } from './ai-store';
+import { query } from '@/modules';
+export type AiHistoryStore = {
+  list: any[];
+  getList: () => Promise<any>;
+};
+export const createAiHistoryStore: StateCreator<AiStore, [], [], AiHistoryStore> = (set, get, store) => {
+  return {
+    list: [],
+    getList: async () => {
+      const { key } = get();
+      set({ loading: true });
+      const res = await query.post({
+        path: 'chat-session',
+        key: 'list-history',
+        data: { key },
+      });
+      if (res.success) {
+        set({ list: res.data });
+      }
+      console.log('res', res);
+    },
+  };
+};

src/pages/ai-chat/store/ai-store.ts

@@ -1,6 +1,8 @@
 import { query } from '@/modules';
 import { message } from 'antd';
+import { produce } from 'immer';
 import { create } from 'zustand';
+import { AiHistoryStore, createAiHistoryStore } from './ai-history';
 type ResData = {
   created_at: string;
   done?: boolean;
@@ -14,48 +16,87 @@ type ResData = {
   prompt_eval_duration?: number;
   total_duration?: number;
 };
-
+type MessageData = {
+  chatId: string;
+  chatPromptId: string;
+  role: string;
+  root: boolean;
+  show: boolean;
+  data: {
+    message: string;
+  };
+};
 export type AiStore = {
+  /** 打开侧边栏 */
   open: boolean;
   setOpen: (open: boolean) => void;
+  showEdit: boolean;
+  setShowEdit: (showEdit: boolean) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
   type?: string;
+  /** 当前app执行的key */
   key: string;
   setKey: (key: string) => void;
   setType?: (type: string) => void;
-  sendMsg: (msg: string) => void;
   formData: any;
   setFormData: (data: any) => void;
-  data: any;
-  setData: (data: any) => void;
-  runAi: () => any;
-  title: string;
+  title: string; // AI Module的标题
   setTitle: (title: string) => void;
   messages: { role: string; content: string }[];
   setMessage: (message: { role: string; content: string }[]) => void;
-};
+  getPrompt: (key?: string) => any;
+  // 设置预设数据，只有是root的情况下才成立
+  presetData?: any;
+  setPresetData: (data: any) => void;
+  /** 是否是第一条消息 */
+  root: boolean;
+  setRoot: (root: boolean) => void;
+  onMessage: (data: MessageData) => void;
+} & AiHistoryStore;
 
-export const useAiStore = create<AiStore>((set, get) => {
+export const useAiStore = create<AiStore>((set, get, store) => {
   return {
     open: false,
-    setOpen: (open) => set({ open }),
+    setOpen: (open) => set({ open, root: true }),
+    loading: false,
+    setLoading: (loading) => set({ loading }),
     key: '',
-    setKey: (key) => set({ key }),
-    sendMsg: (msg) => {
-      console.log(msg);
+    setKey: (key) => {
+      const { getPrompt } = get();
+      if (key) {
+        getPrompt(key);
+      }
+      set({ key });
     },
     formData: {},
     setFormData: (data) => set({ formData: data }),
-    data: {},
-    setData: (data) => {
-      const { key, presetData = {} } = data;
-      console.log('key', presetData, data);
-      if (!key) {
-        console.error('key is required');
-        return;
+    title: '',
+    setTitle: (title) => set({ title }),
+    messages: [],
+    setMessage: (messages) => set({ messages }),
+    getPrompt: async (key) => {
+      const state = get();
+      const res = await query.post({
+        path: 'chat-prompt',
+        key: 'getByKey',
+        data: {
+          key: key || state.key,
+        },
+      });
+      if (res.code === 200) {
+        const { prompt } = res.data;
+        const { presetData } = prompt;
+        console.log(res.data);
+        state.setPresetData(presetData);
+        set({ root: true });
       }
-      const { inputs = [] } = presetData.data || {};
+    },
+    presetData: {},
+    setPresetData: (data) => {
+      set({ presetData: data });
+      const { inputs = [] } = data?.data || {};
       const formData = {
-        key,
         inputs: inputs.map((input) => {
           return {
             key: input.key,
@@ -65,40 +106,23 @@ export const useAiStore = create<AiStore>((set, get) => {
         }),
         messages: [],
       };
-      console.log('formData', formData);
-      set({ key, data, formData });
+      set({ formData });
     },
-    runAi: async () => {
-      const { formData, messages } = get();
-      const loading = message.loading('loading');
-      const res = await query.post({
-        path: 'ai',
-        key: 'run',
-        data: {
-          key: formData.key,
-          inputs: [
-            // {
-            //   key: 'title',
-            //   value: '根据描述生成代码',
-            // },
-            // {
-            //   key: 'description',
-            //   value: '我想获取一个card, 包含标题和内容，标题是evision，内容是这是一个测试',
-            // },
-            ...formData.inputs,
-          ],
-        },
-      });
-      loading();
-      if (res.code === 200) {
-        console.log(res.data);
-        message.success('Success');
-        set({ messages: [...messages, res.data.message] });
-      }
+    root: false,
+    setRoot: (root) => set({ root }),
+    onMessage: (data) => {
+      const state = get();
+      if (state.root) set({ root: false });
+      const { message } = data.data;
+      const role = data.role;
+      set(
+        produce((state) => {
+          state.messages.push({ role, content: message });
+        }),
+      );
     },
-    title: '',
-    setTitle: (title) => set({ title }),
-    messages: [],
-    setMessage: (messages) => set({ messages }),
+    showEdit: false,
+    setShowEdit: (showEdit) => set({ showEdit }),
+    ...createAiHistoryStore(set, get, store),
   };
 });

src/pages/chat-manager/chat-prompt/List.tsx

@@ -0,0 +1,170 @@
+import { useShallow } from 'zustand/react/shallow';
+import { useChatPromptStore } from '../store/chat-prompt';
+import { useEffect } from 'react';
+import { Button, Form, Input, message, Modal, Tooltip } from 'antd';
+import { DeleteOutlined, EditOutlined, MessageOutlined, PlusOutlined } from '@ant-design/icons';
+import { isObjectNull } from '@/utils/is-null';
+import { Select as AiAgentSelect } from '../../ai-agent';
+import { Select as PromptSelect } from '../../prompt';
+import { CardBlank } from '@/components/card/CardBlank';
+import { useAiStore } from '@/pages/ai-chat';
+
+const FormModal = () => {
+  const [form] = Form.useForm();
+  const chatPromptStore = useChatPromptStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        updateData: state.updateData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = chatPromptStore.showEdit;
+    if (open) {
+      const isNull = isObjectNull(chatPromptStore.formData);
+      if (isNull) {
+        form.setFieldsValue({});
+      } else form.setFieldsValue(chatPromptStore.formData);
+    }
+  }, [chatPromptStore.showEdit]);
+  const onFinish = async (values: any) => {
+    chatPromptStore.updateData(values);
+  };
+  const onClose = () => {
+    chatPromptStore.setShowEdit(false);
+    form.resetFields();
+  };
+  const isEdit = chatPromptStore.formData.id;
+  return (
+    <Modal
+      title={isEdit ? 'Edit' : 'Add'}
+      open={chatPromptStore.showEdit}
+      onClose={() => chatPromptStore.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='title' label='title'>
+          <Input />
+        </Form.Item>
+        <Form.Item name='description' label='description'>
+          <Input.TextArea rows={4} />
+        </Form.Item>
+        <Form.Item label='key' name='key'>
+          <Input />
+        </Form.Item>
+        <Form.Item label='agent' name={['data', 'aiAgentId']}>
+          <AiAgentSelect />
+        </Form.Item>
+        <Form.Item label='prompt' name={['data', 'promptId']}>
+          <PromptSelect />
+        </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 chatPromptStore = useChatPromptStore(
+    useShallow((state) => {
+      return {
+        list: state.list,
+        getList: state.getList,
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        setFormData: state.setFormData,
+        deleteData: state.deleteData,
+      };
+    }),
+  );
+  const aiStore = useAiStore(
+    useShallow((state) => {
+      return {
+        open: state.open,
+        setOpen: state.setOpen,
+        setKey: state.setKey,
+      };
+    }),
+  );
+  useEffect(() => {
+    chatPromptStore.getList();
+  }, []);
+  return (
+    <div className='flex w-full h-full bg-slate-200'>
+      <div className='h-full bg-white flex-shrink-0 flex justify-center'>
+        <Button className='m-4' onClick={() => chatPromptStore.setShowEdit(true)} icon={<PlusOutlined />}></Button>
+      </div>
+      <div className='p-4'>
+        <div className='flex flex-wrap gap-4'>
+          {chatPromptStore.list.map((item) => {
+            return (
+              <div className='card w-[400px] max-h-[300px] scrollbar' key={item.id}>
+                <div className='card-title flex items-center '>
+                  <div>{item.title} </div>
+                  <div className='card-key ml-4'>{item.key}</div>
+                </div>
+                <div className='font-light mt-2'>{item.description ? item.description : '-'}</div>
+                <div>
+                  <div className='flex mt-2 '>
+                    <Button.Group>
+                      <Tooltip title='Edit'>
+                        <Button
+                          onClick={(e) => {
+                            chatPromptStore.setFormData(item);
+                            chatPromptStore.setShowEdit(true);
+                            e.stopPropagation();
+                          }}
+                          icon={<EditOutlined />}></Button>
+                      </Tooltip>
+                      <Tooltip title='Delete'>
+                        <Button
+                          onClick={(e) => {
+                            chatPromptStore.deleteData(item.id);
+                            e.stopPropagation();
+                          }}
+                          icon={<DeleteOutlined />}></Button>
+                      </Tooltip>
+                      <Tooltip title='Chat'>
+                        <Button
+                          onClick={(e) => {
+                            aiStore.setKey(location.pathname);
+                            aiStore.setOpen(true);
+                          }}
+                          icon={<MessageOutlined />}></Button>
+                      </Tooltip>
+                    </Button.Group>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+          <CardBlank className='w-[300px]' />
+          {!chatPromptStore.list.length && <div className='text-center w-full'>No data</div>}
+        </div>
+      </div>
+      <FormModal />
+    </div>
+  );
+};

src/pages/chat-manager/history/List.tsx

@@ -1,6 +1,9 @@
 import { useShallow } from 'zustand/react/shallow';
 import { useHistoryStore } from '../store/history';
 import { useEffect } from 'react';
+import { CardBlank } from '@/components/card/CardBlank';
+import { Button, Tooltip } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
 
 export const List = () => {
   const historyStore = useHistoryStore(
@@ -8,6 +11,7 @@ export const List = () => {
       return {
         list: state.list,
         getList: state.getList,
+        deleteData: state.deleteData,
       };
     }),
   );
@@ -15,10 +19,30 @@ export const List = () => {
     historyStore.getList();
   }, []);
   return (
-    <div>
-      {historyStore.list.map((item) => {
-        return <div key={item.id}>{item.id}</div>;
-      })}
+    <div className='flex w-full h-full bg-slate-200'>
+      <div className='p-4'>
+        <div className=' flex gap-4 flex-wrap'>
+          {historyStore.list.map((item) => {
+            return (
+              <div key={item.id} className='card'>
+                <div>{item.id}</div>
+                <div>{item.title}</div>
+                <div>{item.chatId}</div>
+                <div>{item.promptId}</div>
+                {/* <div>{item.data.message || '-'}</div> */}
+                <div className='card-footer mt-3'>
+                  <Button.Group>
+                    <Tooltip title='Delete'>
+                      <Button onClick={() => historyStore.deleteData(item.id)} icon={<DeleteOutlined />}></Button>
+                    </Tooltip>
+                  </Button.Group>
+                </div>
+              </div>
+            );
+          })}
+          <CardBlank />
+        </div>
+      </div>
     </div>
   );
 };

src/pages/chat-manager/index.tsx

@@ -1,6 +1,8 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { Main } from './layouts';
-import {List as HistoryList } from './history/List'
+import { List as HistoryList } from './history/List';
+import { List as SessionList } from './session/List';
+import { List as ChatPromptList } from './chat-prompt/List';
 
 export const App = () => {
   return (
@@ -8,8 +10,9 @@ export const App = () => {
       <Route element={<Main />}>
         <Route path='/' element={<Navigate to='/chat/history/list' />}></Route>
         <Route path='history/list' element={<HistoryList />} />
+        <Route path='session/list' element={<SessionList />} />
+        <Route path='chat-prompt/list' element={<ChatPromptList />} />
       </Route>
     </Routes>
   );
 };
-

src/pages/chat-manager/session/List.tsx

@@ -0,0 +1,136 @@
+import { useShallow } from 'zustand/react/shallow';
+import { useSessionStore } from '../store/session';
+import { useEffect } from 'react';
+import { Button, Form, Input, message, Modal, Tooltip } from 'antd';
+import { DeleteOutlined, HistoryOutlined, PlusOutlined } from '@ant-design/icons';
+import { isObjectNull } from '@/utils/is-null';
+import { useAiStore } from '@/pages/ai-chat';
+
+const FormModal = () => {
+  const [form] = Form.useForm();
+  const sessionStore = useSessionStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        updateData: state.updateData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = sessionStore.showEdit;
+    if (open) {
+      const isNull = isObjectNull(sessionStore.formData);
+      if (isNull) {
+        form.setFieldsValue({});
+      } else form.setFieldsValue(sessionStore.formData);
+    }
+  }, [sessionStore.showEdit]);
+  const onFinish = async (values: any) => {
+    sessionStore.updateData(values);
+  };
+  const onClose = () => {
+    sessionStore.setShowEdit(false);
+    form.resetFields();
+  };
+  const isEdit = sessionStore.formData.id;
+  return (
+    <Modal
+      title={isEdit ? 'Edit' : 'Add'}
+      open={sessionStore.showEdit}
+      onClose={() => sessionStore.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='type' label='type'>
+          <Input />
+        </Form.Item>
+        <Form.Item name='chatPromptId' label='chatPromptId'>
+          <Input />
+        </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 sessionStore = useSessionStore(
+    useShallow((state) => {
+      return {
+        list: state.list,
+        getList: state.getList,
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        deleteData: state.deleteData,
+      };
+    }),
+  );
+  const aiStore = useAiStore(
+    useShallow((state) => ({
+      setKey: state.setKey,
+      setOpen: state.setOpen,
+    })),
+  );
+  useEffect(() => {
+    sessionStore.getList();
+  }, []);
+  return (
+    <div className='flex w-full h-full bg-slate-200'>
+      <div className='h-full bg-white flex-shrink-0 flex justify-center'>
+        <Button className='m-4' onClick={() => sessionStore.setShowEdit(true)} icon={<PlusOutlined />}></Button>
+      </div>
+      <div className='p-4'>
+        <div className='flex flex-wrap gap-4'>
+          {sessionStore.list.map((item) => {
+            return (
+              <div key={item.id} className='card'>
+                <div className='card-title'>{item.titel || '-'}</div>
+                <div>{item.id}</div>
+                <div>{item.type}</div>
+                <div>{item.chatPromptId}</div>
+                <div className='card-footer mt-3'>
+                  <Button.Group>
+                    <Tooltip title='历史记录'>
+                      <Button
+                        onClick={() => {
+                          // 继续回话，打开历史
+                          aiStore.setKey(item.key);
+                          aiStore.setOpen(true);
+                        }}
+                        icon={<HistoryOutlined />}></Button>
+                    </Tooltip>
+                    <Tooltip title='Delete'>
+                      <Button onClick={() => sessionStore.deleteData(item.id)} icon={<DeleteOutlined />}></Button>
+                    </Tooltip>
+                  </Button.Group>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <FormModal />
+    </div>
+  );
+};

src/pages/chat-manager/store/chat-prompt.ts

@@ -0,0 +1,68 @@
+import { create } from 'zustand';
+import { query } from '@/modules';
+import { message } from 'antd';
+type ChatPromptStore = {
+  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>;
+};
+export const useChatPromptStore = create<ChatPromptStore>((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: 'chat-prompt',
+        key: 'list',
+      });
+      set({ loading: false });
+      if (res.code === 200) {
+        set({ list: res.data });
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+    updateData: async (data) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'chat-prompt',
+        key: 'update',
+        data,
+      });
+      if (res.code === 200) {
+        message.success('Success');
+        set({ showEdit: false, formData: [] });
+        getList();
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+    deleteData: async (id) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'chat-prompt',
+        key: 'delete',
+        id,
+      });
+      if (res.code === 200) {
+        getList();
+        message.success('Success');
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+  };
+});

src/pages/code-editor/edit/Edit.tsx

@@ -0,0 +1,112 @@
+import { createEditorInstance, editor } from '@kevisual/codemirror/dist/editor.json';
+import { useEffect, useRef, useLayoutEffect, useState, useCallback } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+import { useCodeEditorStore, ParseData } from '../store';
+import { Button, message, Tooltip } from 'antd';
+import { LeftOutlined, MessageOutlined, SaveOutlined } from '@ant-design/icons';
+import { useAiStore } from '@/pages/ai-chat';
+import { useShallow } from 'zustand/react/shallow';
+export const App = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<typeof editor>(null);
+  const location = useLocation();
+  const store = useCodeEditorStore();
+  const [mounted, setMounted] = useState(false);
+  const navigator = useNavigate();
+  const aiStore = useAiStore(
+    useShallow((state) => {
+      return {
+        setOpen: state.setOpen,
+        setKey: state.setKey,
+      };
+    }),
+  );
+  useEffect(() => {
+    initEditor();
+    const state = location.state as ParseData;
+    if (state && state.data) {
+      store.init(state);
+    }
+    setMounted(true);
+    return () => {
+      setMounted(false);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!mounted) return;
+    if (editorRef.current) {
+      setNewValue(store.code);
+    } else {
+      setNewValue('');
+    }
+  }, [store.code, mounted]);
+  const initEditor = () => {
+    const _editor = createEditorInstance(ref.current!);
+    editorRef.current = _editor;
+  };
+  const setNewValue = (value: string) => {
+    const editor = editorRef.current;
+    if (editor) {
+      editor.dispatch({
+        changes: [{ from: 0, to: editor.state.doc.length, insert: value }],
+      });
+    }
+  };
+  const getValue = () => {
+    const editor = editorRef.current;
+    if (editor) {
+      return editor.state.doc.toString();
+    }
+    return '';
+  };
+  const onSave = useCallback(async () => {
+    const value = getValue();
+    // store.onUpdate(value);
+    if (store.dataType === 'object') {
+      try {
+        JSON.parse(value);
+      } catch (error) {
+        console.error(error);
+        message.error('JSON format error');
+        return;
+      }
+    }
+    store.onUpdate(value);
+  }, [store.dataType]);
+
+  return (
+    <div className='w-full h-full bg-gray-400 flex flex-col'>
+      <div className='p-4 flex-grow overflow-hidden'>
+        <div className='h-full w-full overflow-hidden'>
+          <Button.Group className='mb-2'>
+            <Tooltip title='Go Back' placement='bottom'>
+              <Button
+                className=''
+                icon={<LeftOutlined />}
+                onClick={() => {
+                  navigator(-1);
+                }}></Button>
+            </Tooltip>
+            <Tooltip title='Ai Chat'>
+              <Button
+                className=''
+                onClick={() => {
+                  aiStore.setOpen(true);
+                  aiStore.setKey(location.pathname);
+                }}
+                icon={<MessageOutlined />}></Button>
+            </Tooltip>
+            <Tooltip title='Save' placement='bottom'>
+              <Button className='' onClick={onSave} icon={<SaveOutlined />}></Button>
+            </Tooltip>
+          </Button.Group>
+          <div className='w-full p-4 rounded-md bg-white overflow-hidden relative' style={{ height: 'calc(100% - 130px)' }}>
+            <div className='w-full h-full scrollbar'>
+              <div className='w-full h-full' ref={ref}></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/code-editor/index.tsx

@@ -1,92 +1,14 @@
-import { createEditorInstance, editor } from '@kevisual/codemirror/dist/editor.json';
-import { useEffect, useRef, useLayoutEffect, useState, useCallback } from 'react';
-import { useLocation, useNavigate } from 'react-router';
-import { useCodeEditorStore, ParseData } from './store';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { App as EditApp } from './edit/Edit';
+import { Main } from './layouts';
 import { useToCodeEditor } from './hooks/use-to-code-editor';
 export { useToCodeEditor };
-import { Button, message, Tooltip } from 'antd';
-import { LeftOutlined, SaveOutlined } from '@ant-design/icons';
 export const App = () => {
-  const ref = useRef<HTMLDivElement>(null);
-  const editorRef = useRef<typeof editor>(null);
-  const location = useLocation();
-  const store = useCodeEditorStore();
-  const [mounted, setMounted] = useState(false);
-  const navigator = useNavigate();
-  useEffect(() => {
-    initEditor();
-    const state = location.state as ParseData;
-    if (state && state.data) {
-      store.init(state);
-    }
-    setMounted(true);
-    return () => {
-      setMounted(false);
-    };
-  }, []);
-  useLayoutEffect(() => {
-    if (!mounted) return;
-    if (editorRef.current) {
-      setNewValue(store.code);
-    } else {
-      setNewValue('');
-    }
-  }, [store.code, mounted]);
-  const initEditor = () => {
-    const _editor = createEditorInstance(ref.current!);
-    editorRef.current = _editor;
-  };
-  const setNewValue = (value: string) => {
-    const editor = editorRef.current;
-    if (editor) {
-      editor.dispatch({
-        changes: [{ from: 0, to: editor.state.doc.length, insert: value }],
-      });
-    }
-  };
-  const getValue = () => {
-    const editor = editorRef.current;
-    if (editor) {
-      return editor.state.doc.toString();
-    }
-    return '';
-  };
-  const onSave = useCallback(async () => {
-    const value = getValue();
-    // store.onUpdate(value);
-    if (store.dataType === 'object') {
-      try {
-        JSON.parse(value);
-      } catch (error) {
-        console.error(error);
-        message.error('JSON format error');
-        return;
-      }
-    }
-    store.onUpdate(value);
-  }, [store.dataType]);
-
   return (
-    <div className='w-full h-full bg-gray-400 flex flex-col'>
-      <div className='layout-menu'>Code Editor</div>
-      <div className='p-4 flex-grow'>
-        <Button.Group className='mb-2'>
-          <Tooltip title='Go Back' placement='bottom'>
-            <Button
-              className=''
-              icon={<LeftOutlined />}
-              onClick={() => {
-                navigator(-1);
-              }}></Button>
-          </Tooltip>
-          <Tooltip title='Save' placement='bottom'>
-            <Button className='' onClick={onSave} icon={<SaveOutlined />}></Button>
-          </Tooltip>
-        </Button.Group>
-        <div className='w-full p-4 rounded-md bg-white' style={{ height: 'calc(100% - 130px)' }}>
-          <div className='w-full h-full' ref={ref}></div>
-        </div>
-      </div>
-    </div>
+    <Routes>
+      <Route element={<Main />}>
+        <Route path='/' element={<EditApp />}></Route>
+      </Route>
+    </Routes>
   );
 };

src/pages/code-editor/layouts/index.tsx

@@ -0,0 +1,7 @@
+import { useLocation } from 'react-router';
+import { LayoutMain } from '@/modules/layout';
+
+export const Main = () => {
+  const location = useLocation();
+  return <LayoutMain title={<>Edit Source JSON Code</>}></LayoutMain>;
+};

src/pages/container/edit/List.tsx

@@ -109,7 +109,7 @@ export const ContainerList = () => {
       return {
         open: state.open,
         setOpen: state.setOpen,
-        setData: state.setData,
+        setKey: state.setKey,
       };
     }),
   );
@@ -224,8 +224,8 @@ export const ContainerList = () => {
               <Tooltip title='ai编程'>
                 <Button
                   onClick={(e) => {
+                    aiStore.setKey(location.pathname);
                     aiStore.setOpen(true);
-                    // aiStore.setData({ ...containerStore.formData });
                   }}
                   icon={<MessageOutlined />}></Button>
               </Tooltip>

src/pages/map/index.tsx

@@ -26,6 +26,10 @@ const serverPath = [
     path: 'agent',
     links: ['edit/list'],
   },
+  {
+    path: 'chat',
+    links: ['history/list', 'session/list', 'chat-prompt/list'],
+  },
 ];
 const ServerPath = () => {
   const navigate = useNavigate();

src/pages/panel/deck/index.tsx

@@ -7,9 +7,10 @@ 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 { CloseOutlined, MessageOutlined, SaveOutlined, SelectOutlined } from '@ant-design/icons';
 import { useDeckPageStore } from './deck-store';
 import { FormModal } from './Model.tsx';
+import { useAiStore } from '@/pages/ai-chat/index.tsx';
 export const useListener = (id?: string, opts?: any) => {
   const { refresh } = opts || {};
   const connected = useStore((state) => state.connected);
@@ -75,6 +76,14 @@ export const Deck = () => {
   const deckPageStore = useDeckPageStore();
   const { code, setCode } = deckPageStore;
   const { selected, setSelected } = deckPageStore;
+  const aiStore = useAiStore(
+    useShallow((state) => {
+      return {
+        setOpen: state.setOpen,
+        setKey: state.setKey,
+      };
+    }),
+  );
   const panelStore = usePanelStore(
     useShallow((state) => {
       return {
@@ -281,7 +290,7 @@ 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 flex items-center justify-center group'>
+        <div className='text-center mb-10 font-bold text-4xl pt-4 flex items-center justify-center group'>
           Deck
           <Tooltip>
             <Button
@@ -313,6 +322,14 @@ export const Deck = () => {
                     }}
                     icon={<CloseOutlined />}></Button>
                 </Tooltip>
+                <Tooltip title='Ai Chat'>
+                  <Button
+                    onClick={() => {
+                      aiStore.setOpen(true);
+                      aiStore.setKey(location.pathname);
+                    }}
+                    icon={<MessageOutlined />}></Button>
+                </Tooltip>
                 <Tooltip title='Save'>
                   <Button
                     onClick={() => {

src/pages/panel/flow/properties/NodeProperties.tsx

@@ -2,11 +2,13 @@ import { Panel, useReactFlow, useStore, useStoreApi } from '@xyflow/react';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 import { debounce } from 'lodash-es';
-import { Button, Form, Input, message } from 'antd';
+import { Button, Form, Input, message, Tooltip } from 'antd';
 import { Select } from '@/pages/container/module/Select';
-import { SaveOutlined } from '@ant-design/icons';
+import { MessageOutlined, SaveOutlined } from '@ant-design/icons';
 import { emitter } from '@abearxiong/container';
 import { usePanelStore } from '../../store';
+import { useShallow } from 'zustand/react/shallow';
+import { useAiStore } from '@/pages/ai-chat';
 export const NodeProperties = () => {
   const reactflow = useReactFlow();
   const [open, setOpen] = useState(false);
@@ -16,6 +18,14 @@ export const NodeProperties = () => {
       updateNodeData: state.updateNodeData,
     };
   });
+  const aiStore = useAiStore(
+    useShallow((state) => {
+      return {
+        setOpen: state.setOpen,
+        setKey: state.setKey,
+      };
+    }),
+  );
   const store = useStore((state) => {
     const setNode = (node: any) => {
       const newNodes = state.nodes.map((item) => {
@@ -76,7 +86,17 @@ export const NodeProperties = () => {
         <div className='card-title'>
           {nodeData?.data?.label}
           <Button.Group className='ml-2'>
-            <Button onClick={onSave} icon={<SaveOutlined />}></Button>
+            <Tooltip title='Save'>
+              <Button onClick={onSave} icon={<SaveOutlined />}></Button>
+            </Tooltip>
+            <Tooltip title='Ai Chat'>
+              <Button
+                onClick={() => {
+                  aiStore.setKey(location.pathname);
+                  aiStore.setOpen(true);
+                }}
+                icon={<MessageOutlined />}></Button>
+            </Tooltip>
           </Button.Group>
         </div>
         <div className='p-4'>

src/pages/panel/layouts/index.tsx

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

src/pages/prompt/edit/List.tsx

@@ -110,10 +110,8 @@ export const List = () => {
       return {
         open: state.open,
         setOpen: state.setOpen,
-        setData: state.setData,
         key: state.key,
         setKey: state.setKey,
-        sendMsg: state.sendMsg,
       };
     }),
   );
@@ -244,10 +242,7 @@ export const List = () => {
                           <Button
                             icon={<CaretRightOutlined />}
                             onClick={() => {
-                              // navicate(`/prompt/${item.id}`);
-                              // promptStore.setFormData(item);
-                              // promptStore.runAi();
-                              aiStore.setData(item);
+                              aiStore.setKey(location.pathname);
                               aiStore.setOpen(true);
                             }}
                           />
@@ -257,7 +252,7 @@ export const List = () => {
                   </Fragment>
                 );
               })}
-            <CardBlank  className='w-[600px]' />
+            <CardBlank className='w-[600px]' />
             {promptStore.list.length == 0 && (
               <div className='text-center' key={'no-data'}>
                 No Data

src/pages/prompt/index.tsx

@@ -16,3 +16,4 @@ export const App = () => {
     </Routes>
   );
 };
+export * from './module/Select'

src/pages/prompt/module/Select.tsx

@@ -0,0 +1,39 @@
+import { query } from '@/modules';
+import { Select as AntSelect, message, SelectProps } from 'antd';
+import { useEffect, useState } from 'react';
+
+export const Select = (props: SelectProps) => {
+  const [options, setOptions] = useState<{ value: string; id: string }[]>([]);
+  useEffect(() => {
+    fetch();
+  }, []);
+  const fetch = async () => {
+    const res = await query.post({
+      path: 'prompt',
+      key: 'list',
+    });
+    if (res.code !== 200) {
+      message.error(res.message || '获取agent列表失败');
+      return;
+    }
+    const data = res.data || [];
+    setOptions(
+      data.map((item: any) => {
+        return {
+          label: item.key,
+          value: item.id,
+        };
+      }),
+    );
+  };
+  return (
+    <AntSelect
+      {...props}
+      options={options}
+      // onChange={(e) => {
+      //   const labelValue = options.find((item) => item.value === e);
+      //   props.onChange?.(e, options);
+      // }}
+    />
+  );
+};