✨ chore: 重构 chatBot

src/app/chat/page.tsx

@@ -3,19 +3,9 @@
 import React from 'react';
 
 import ChatBot from '@/panels/ChatPanel/ChatBot';
-import SideBar from '@/panels/ChatPanel/SideBar';
-
-import { useStyles } from './style';
 
 const Chat = () => {
-  const { styles } = useStyles();
-
-  return (
-    <div className={styles.content}>
-      <SideBar />
-      <ChatBot />
-    </div>
-  );
+  return <ChatBot />;
 };
 
 export default Chat;

src/panels/ChatPanel/ChatBot/ChatHeader.tsx

@@ -1,7 +1,7 @@
 import AgentMeta from '@/components/AgentMeta';
+import Voice from '@/features/ChatInput/Actions/Voice';
 import { sessionSelectors, useSessionStore } from '@/store/session';
 
-import Voice from '../../../features/ChatInput/Actions/Voice';
 import { useStyles } from './style';
 
 const Header = () => {

src/panels/ChatPanel/ChatBot/index.tsx

@@ -1,9 +1,11 @@
 import classNames from 'classnames';
 import React, { memo } from 'react';
 
-import ChatInput from '../../../features/ChatInput';
+import ChatInput from '@/features/ChatInput';
+
 import ChatHeader from './ChatHeader';
 import ChatList from './ChatList';
+import SideBar from './SideBar';
 import { useStyles } from './style';
 
 interface ChatBotProps {
@@ -16,12 +18,15 @@ const ChatBot = (props: ChatBotProps) => {
   const { styles } = useStyles();
 
   return (
-    <div className={classNames(styles.chatbot, className)} style={style}>
-      <ChatHeader />
-      <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
-        <ChatList />
+    <div className={classNames(styles.chatBot, className)} style={style}>
+      <SideBar />
+      <div className={styles.content}>
+        <ChatHeader />
+        <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
+          <ChatList />
+        </div>
+        <ChatInput />
       </div>
-      <ChatInput />
     </div>
   );
 };

src/panels/ChatPanel/ChatBot/style.ts

@@ -1,7 +1,15 @@
 import { createStyles } from 'antd-style';
 
 const useStyles = createStyles(({ token, css }) => ({
-  chatbot: css`
+  chatBot: css`
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+
+    width: 100%;
+    height: 100%;
+  `,
+  content: css`
     position: relative;
     display: flex;
     flex-direction: column;

src/panels/ChatPanel/index.tsx

@@ -1,13 +1,10 @@
 'use client';
 
-import classNames from 'classnames';
 import React from 'react';
 
 import PanelContainer from '@/panels/PanelContainer';
 
 import ChatBot from './ChatBot';
-import SideBar from './SideBar';
-import { useStyles } from './style';
 
 interface ChatPanelProps {
   className?: string;
@@ -16,14 +13,10 @@ interface ChatPanelProps {
 
 const ChatPanel = (props: ChatPanelProps) => {
   const { style, className } = props;
-  const { styles } = useStyles();
 
   return (
     <PanelContainer className={className} panelKey="chat" style={style} title="聊天">
-      <div className={classNames(className, styles.content)} style={style}>
-        <SideBar />
-        <ChatBot />
-      </div>
+      <ChatBot />
     </PanelContainer>
   );
 };