feat: 拆分左侧栏、中间聊天区、右侧栏组件, Hooks 提取

src/views/AgentChat/hooks/useAutoScroll.ts

@@ -0,0 +1,38 @@
+// src/views/AgentChat/hooks/useAutoScroll.ts
+// 自动滚动 Hook - 消息列表自动滚动到底部
+
+import { useEffect, useRef } from 'react';
+import type { Message } from '../constants/messageTypes';
+
+/**
+ * useAutoScroll Hook
+ *
+ * 监听消息列表变化，自动滚动到底部
+ *
+ * @param messages - 消息列表
+ * @returns messagesEndRef - 消息列表底部引用（需要绑定到消息列表末尾的 div）
+ *
+ * @example
+ * ```tsx
+ * const { messagesEndRef } = useAutoScroll(messages);
+ *
+ * return (
+ *   <VStack>
+ *     {messages.map(msg => <MessageCard key={msg.id} message={msg} />)}
+ *     <div ref={messagesEndRef} />
+ *   </VStack>
+ * );
+ * ```
+ */
+export const useAutoScroll = (messages: Message[]) => {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // 平滑滚动到底部
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  return {
+    messagesEndRef,
+  };
+};