feat: add chat history and edit

src/App.tsx

@@ -8,6 +8,8 @@ import { App as MapApp } from './pages/map';
 import { App as PromptApp } from './pages/prompt';
 import { App as AiAgentApp } from './pages/ai-agent';
 import { App as UserApp } from './pages/user';
+import { App as ChatApp } from './pages/chat-manager';
+
 import '@abearxiong/container/dist/container.css';
 
 export const App = () => {
@@ -28,6 +30,7 @@ export const App = () => {
             <Route path='/prompt/*' element={<PromptApp />} />
             <Route path='/agent/*' element={<AiAgentApp />} />
             <Route path='/user/*' element={<UserApp />} />
+            <Route path='/chat/*' element={<ChatApp />} />
             <Route path='/404' element={<div>404</div>} />
             <Route path='*' element={<div>404</div>} />
           </Routes>

src/modules/layout/index.tsx

@@ -0,0 +1,26 @@
+import { AiMoudle } from '@/pages/ai-chat';
+import { Outlet } from 'react-router-dom';
+
+type LayoutMainProps = {
+  title?: React.ReactNode;
+  children?: React.ReactNode;
+};
+export const LayoutMain = (props: LayoutMainProps) => {
+  return (
+    <div className='flex w-full h-full flex-col'>
+      <div className='layout-menu'>{props.title}</div>
+      <div
+        className='flex'
+        style={{
+          height: 'calc(100vh - 3rem)',
+        }}>
+        <div className='flex-grow overflow-hidden'>
+          <div className='w-full h-full rounded-lg'>
+            <Outlet />
+          </div>
+        </div>
+        <AiMoudle />
+      </div>
+    </div>
+  );
+};

src/pages/ai-chat/AiModule.tsx

@@ -1,7 +1,7 @@
 import { useShallow } from 'zustand/react/shallow';
 import { useAiStore } from './store/ai-store';
 import { CloseOutlined, HistoryOutlined } from '@ant-design/icons';
-import { Button, Form, Input } from 'antd';
+import { Button, Form, Input, Tooltip } from 'antd';
 import { useEffect } from 'react';
 import { TextArea } from '../container/components/TextArea';
 import clsx from 'clsx';
@@ -48,9 +48,11 @@ export const AiMoudle = () => {
     <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>
+        <h1 className='ml-4'>Ai Moudle</h1>
-        <div>
+        <div className='ml-4'>
-          <HistoryOutlined />
+          <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'>

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

@@ -0,0 +1,24 @@
+import { useShallow } from 'zustand/react/shallow';
+import { useHistoryStore } from '../store/history';
+import { useEffect } from 'react';
+
+export const List = () => {
+  const historyStore = useHistoryStore(
+    useShallow((state) => {
+      return {
+        list: state.list,
+        getList: state.getList,
+      };
+    }),
+  );
+  useEffect(() => {
+    historyStore.getList();
+  }, []);
+  return (
+    <div>
+      {historyStore.list.map((item) => {
+        return <div key={item.id}>{item.id}</div>;
+      })}
+    </div>
+  );
+};

src/pages/chat-manager/index.tsx

@@ -0,0 +1,15 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { Main } from './layouts';
+import {List as HistoryList } from './history/List'
+
+export const App = () => {
+  return (
+    <Routes>
+      <Route element={<Main />}>
+        <Route path='/' element={<Navigate to='/chat/history/list' />}></Route>
+        <Route path='history/list' element={<HistoryList />} />
+      </Route>
+    </Routes>
+  );
+};
+

src/pages/chat-manager/layouts/index.tsx

@@ -0,0 +1,25 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { Outlet, useLocation } from 'react-router';
+import { useEffect } from 'react';
+import { LayoutMain } from '@/modules/layout';
+
+export const Main = () => {
+  const location = useLocation();
+  const isEdit = location.pathname.includes('edit/list');
+  return (
+    <LayoutMain
+      title={
+        <>
+          Chat
+          <Button
+            className={!isEdit ? 'hidden' : ''}
+            icon={<PlusOutlined />}
+            onClick={() => {
+              console.log('add');
+            }}
+          />
+        </>
+      }></LayoutMain>
+  );
+};

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

@@ -0,0 +1,69 @@
+import { create } from 'zustand';
+import { query } from '@/modules';
+import { message } from 'antd';
+type HistoryStore = {
+  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 useHistoryStore = create<HistoryStore>((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-history',
+        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-history',
+        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-history',
+        key: 'delete',
+        id,
+      });
+      if (res.code === 200) {
+        getList();
+        message.success('Success');
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+  };
+});

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

@@ -0,0 +1,68 @@
+import { create } from 'zustand';
+import { query } from '@/modules';
+import { message } from 'antd';
+type SessionStore = {
+  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 useSessionStore = create<SessionStore>((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-session',
+        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-session',
+        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-session',
+        key: 'delete',
+        id,
+      });
+      if (res.code === 200) {
+        getList();
+        message.success('Success');
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+  };
+});

src/pages/container/edit/List.tsx

@@ -10,6 +10,7 @@ import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlin
 import clsx from 'clsx';
 import { isObjectNull } from '@/utils/is-null';
 import { CardBlank } from '@/components/card/CardBlank';
+import { useAiStore } from '@/pages/ai-chat';
 const FormModal = () => {
   const [form] = Form.useForm();
   const containerStore = useContainerStore(
@@ -103,6 +104,15 @@ export const ContainerList = () => {
       };
     }),
   );
+  const aiStore = useAiStore(
+    useShallow((state) => {
+      return {
+        open: state.open,
+        setOpen: state.setOpen,
+        setData: state.setData,
+      };
+    }),
+  );
   const [codeEdit, setCodeEdit] = useState(false);
   const [code, setCode] = useState('');
   useEffect(() => {
@@ -212,7 +222,12 @@ export const ContainerList = () => {
                   icon={<LinkOutlined />}></Button>
               </Tooltip>
               <Tooltip title='ai编程'>
-                <Button onClick={(e) => {}} icon={<MessageOutlined />}></Button>
+                <Button
+                  onClick={(e) => {
+                    aiStore.setOpen(true);
+                    // aiStore.setData({ ...containerStore.formData });
+                  }}
+                  icon={<MessageOutlined />}></Button>
               </Tooltip>
             </div>
           </div>

src/pages/container/layouts/index.tsx

@@ -4,6 +4,8 @@ import { Outlet, useLocation } from 'react-router';
 import { useContainerStore } from '../store';
 import { useEffect } from 'react';
 import { useShallow } from 'zustand/react/shallow';
+import { AiMoudle } from '@/pages/ai-chat';
+import { LayoutMain } from '@/modules/layout';
 
 export const Main = () => {
   const containerStore = useContainerStore(
@@ -17,8 +19,9 @@ export const Main = () => {
   const location = useLocation();
   const isEdit = location.pathname.includes('edit/list');
   return (
-    <div className='flex w-full h-full flex-col'>
+    <LayoutMain
-      <div className='layout-menu'>
+      title={
+        <>
           Container
           <Button
             className={!isEdit ? 'hidden' : ''}
@@ -29,18 +32,7 @@ export const Main = () => {
               containerStore.setShowEdit(true);
             }}
           />
-      </div>
+        </>
-      <div
+      }></LayoutMain>
-        className='flex'
-        style={{
-          height: 'calc(100vh - 3rem)',
-        }}>
-        <div className='flex-grow overflow-hidden'>
-          <div className='w-full h-full rounded-lg'>
-            <Outlet />
-          </div>
-        </div>
-      </div>
-    </div>
   );
 };