feat: 管理对话记录

src/components/ConversationModal/index.tsx

+import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, getKeyValue } from '@nextui-org/react'
+import React from 'react'
+import { useAppSelector } from '@/store/hook'
+
+interface ConversationModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const ConversationModal: React.FC<ConversationModalProps> = ({ isOpen, onClose }) => {
+  const tableColumns = [
+    {
+      key: 'conversationTitle',
+      label: '对话名称',
+    },
+    {
+      key: 'startTime',
+      label: '对话发起时间',
+    },
+  ]
+
+  const { currentConversationId, conversations } = useAppSelector(state => state.conversation)
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set([]))
+  const allItems = conversations.filter(item => item.conversationId)
+  const handleClose = () => {
+    setSelectedKeys(new Set([]))
+    onClose()
+  }
+  const handleDelete = () => {
+    // console.log(selectedKeys, 'asd')
+  }
+  return (
+    <Modal backdrop="blur" size="3xl" isOpen={isOpen} onClose={handleClose}>
+      <ModalContent>
+        {onClose => (
+          <>
+            <ModalHeader className="flex flex-col gap-1">
+              <div>
+                管理对话记录
+                <span className="text-[#8D9795] text-[14px]">（共11条）</span>
+              </div>
+            </ModalHeader>
+            <ModalBody className="text-[#27353C]">
+              <Table
+                removeWrapper
+                selectionMode="multiple"
+                selectedKeys={selectedKeys}
+                disabledKeys={[currentConversationId || '']}
+                onSelectionChange={keys => setSelectedKeys(keys as any)}
+                aria-label="table"
+              >
+                <TableHeader columns={tableColumns}>
+                  {column => <TableColumn key={column.key}>{column.label}</TableColumn>}
+                </TableHeader>
+                <TableBody items={allItems}>
+                  {item => (
+                    <TableRow key={item.conversationId}>
+                      {columnKey => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </ModalBody>
+            <ModalFooter>
+              <Button onPress={onClose}>
+                取消
+              </Button>
+              <Button color="primary" onClick={handleDelete}>
+                删除所选
+              </Button>
+            </ModalFooter>
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  )
+}

src/layouts/HistoryBar/HistoryBar.tsx

 import { AnimatePresence, motion } from 'framer-motion'
 import { AnimatePresence, motion } from 'framer-motion'
-import { Button, Input, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react'
+import { Button, Input } from '@nextui-org/react'
 import React, { useState } from 'react'
 import React, { useState } from 'react'
 import { variants } from './motionAnimate'
 import { variants } from './motionAnimate'
 import { HistoryBarList } from './components/HistoryBarList'
 import { HistoryBarList } from './components/HistoryBarList'
 import SearchIcon from '@/assets/svg/search.svg?react'
 import SearchIcon from '@/assets/svg/search.svg?react'
 import HistoryMenuIcon from '@/assets/svg/historyMenu.svg?react'
 import HistoryMenuIcon from '@/assets/svg/historyMenu.svg?react'
+import { ConversationModal } from '@/components/ConversationModal'
 
 
 interface HistoryBarProps {
 interface HistoryBarProps {
   isVisible: boolean
   isVisible: boolean
 }
 }
 
 
 export const HistoryBar: React.FC<HistoryBarProps> = ({ isVisible }) => {
 export const HistoryBar: React.FC<HistoryBarProps> = ({ isVisible }) => {
-  // const [isSelected, setIsSelected] = useState(false)
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpenConversationModal, setIsOpenConversationModal] = useState(false)
   return (
   return (
     <AnimatePresence>
     <AnimatePresence>
       {isVisible && (
       {isVisible && (
@@ -31,69 +31,12 @@ export const HistoryBar: React.FC<HistoryBarProps> = ({ isVisible }) => {
               <HistoryBarList />
               <HistoryBarList />
             </div>
             </div>
             <div className="text-[12px] border-t-solid border-t-[1px] border-t-[#82969C12] w-full h-[48px] flex items-center justify-center">
             <div className="text-[12px] border-t-solid border-t-[1px] border-t-[#82969C12] w-full h-[48px] flex items-center justify-center">
-              <Button onClick={() => setIsOpen(true)} className="w-full" color="primary" variant="light" startContent={<HistoryMenuIcon />}>
+              <Button onClick={() => setIsOpenConversationModal(true)} className="w-full" color="primary" variant="light" startContent={<HistoryMenuIcon />}>
                 <span className="text-[#82969C]">管理对话记录</span>
                 <span className="text-[#82969C]">管理对话记录</span>
               </Button>
               </Button>
             </div>
             </div>
           </div>
           </div>
-          <Modal backdrop="blur" size="3xl" isOpen={isOpen} onClose={() => setIsOpen(false)}>
-            <ModalContent>
-              {onClose => (
-                <>
-                  <ModalHeader className="flex flex-col gap-1">
-                    <div>
-                      管理对话记录
-                      <span className="text-[#8D9795] text-[14px]">（共11条）</span>
-                    </div>
-                  </ModalHeader>
-                  <ModalBody className="text-[#27353C]">
-                    <Table
-                      removeWrapper
-                      selectionMode="multiple"
-                      defaultSelectedKeys={[]}
-                      aria-label="Example static collection table"
-                    >
-                      <TableHeader>
-                        <TableColumn>NAME</TableColumn>
-                        <TableColumn>ROLE</TableColumn>
-                        <TableColumn>STATUS</TableColumn>
-                      </TableHeader>
-                      <TableBody>
-                        <TableRow key="1">
-                          <TableCell>Tony Reichert</TableCell>
-                          <TableCell>CEO</TableCell>
-                          <TableCell>Active</TableCell>
-                        </TableRow>
-                        <TableRow key="2">
-                          <TableCell>Zoey Lang</TableCell>
-                          <TableCell>Technical Lead</TableCell>
-                          <TableCell>Paused</TableCell>
-                        </TableRow>
-                        <TableRow key="3">
-                          <TableCell>Jane Fisher</TableCell>
-                          <TableCell>Senior Developer</TableCell>
-                          <TableCell>Active</TableCell>
-                        </TableRow>
-                        <TableRow key="4">
-                          <TableCell>William Howard</TableCell>
-                          <TableCell>Community Manager</TableCell>
-                          <TableCell>Vacation</TableCell>
-                        </TableRow>
-                      </TableBody>
-                    </Table>
-                  </ModalBody>
-                  <ModalFooter>
-                    <Button onPress={onClose}>
-                      取消
-                    </Button>
-                    <Button color="primary">
-                      删除所选
-                    </Button>
-                  </ModalFooter>
-                </>
-              )}
-            </ModalContent>
-          </Modal>
+          <ConversationModal isOpen={isOpenConversationModal} onClose={() => setIsOpenConversationModal(false)} />
         </motion.div>
         </motion.div>
       )}
       )}
     </AnimatePresence>
     </AnimatePresence>

src/pages/Chat/components/ChatMaskBar/index.tsx

 export const ChatMaskBar: React.FC = () => {
 export const ChatMaskBar: React.FC = () => {
   return (
   return (
-    <div className="absolute w-full h-[32px] z-[100] top-[110px] bg-gradient-to-b from-[hsl(var(--sdream-background))] to-transparent"></div>
+    <div className="absolute w-full h-[32px] z-[2] top-[110px] bg-gradient-to-b from-[hsl(var(--sdream-background))] to-transparent"></div>
   )
   )
 }
 }