feat: add chat history and session

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</>} />;
 };