diff --git a/src/components/chat-messages/chat-messages.tsx b/src/components/chat-messages/chat-messages.tsx
index 96c5d72c033fd1d42fd0ff5fc964196bcfc2ca35..01bb286490f0a17d250b8d9e32a67f0cf76edc81 100644
--- a/src/components/chat-messages/chat-messages.tsx
+++ b/src/components/chat-messages/chat-messages.tsx
@@ -34,14 +34,39 @@ export const ChatMessages = (props: ChatMessageProps) => {
 
   const messages = props.controller.messages;
 
+  // 用于标记用户是否手动滚动到了上方
+  const isUserScrolledUp = useRef(false);
+
   useSignalEffect(() => {
-    if (ref.current && messages.value.length > 0) {
-      ref.current.scrollTop = ref.current.scrollHeight;
+    const container = ref.current;
+    if (!container || messages.value.length === 0) return;
+
+    // 如果用户没有手动滚动到上方，则自动滚动到底部
+    if (!isUserScrolledUp.current) {
+      container.scrollTop = container.scrollHeight;
     }
   });
 
+  // 监听滚动事件，判断用户是否手动滚动到了上方
+  const handleScroll = () => {
+    const container = ref.current;
+    if (!container) return;
+
+    // 判断用户是否滚动到了上方
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const isNearBottom = scrollHeight - (scrollTop + clientHeight) < 50; // 距离底部小于 50px 认为是底部
+
+    // 如果用户滚动到了底部，恢复自动滚动
+    if (isNearBottom) {
+      isUserScrolledUp.current = false;
+    } else {
+      // 否则标记为用户手动滚动到了上方
+      isUserScrolledUp.current = true;
+    }
+  };
+
   return (
-    <div ref={ref} className={ns.b()}>
+    <div ref={ref} className={ns.b()} onScroll={handleScroll}>
       {messages.value.map(message => {
         const size = message.content?.length || 0;
         return (
diff --git a/src/components/chat-toolbar/chat-toolbar.scss b/src/components/chat-toolbar/chat-toolbar.scss
index d328dcdad3af5feb4ee92483fb2b4e883e753ddf..06f092eecb35246000ddd8f3287169e86a9d4f61 100644
--- a/src/components/chat-toolbar/chat-toolbar.scss
+++ b/src/components/chat-toolbar/chat-toolbar.scss
@@ -35,21 +35,22 @@
 
   @include e(circle) {
     .#{bem(chat-toolbar, item)} {
-      width: 32px;
       height: 32px;
       padding: 6px;
+      max-width: 32px;
       overflow: hidden;
       font-size: 12px;
+      white-space: nowrap; 
       border: 1px solid #{getCssVar('ai-chat', 'border-color')};
       border-radius: 15px;
-      transition: all 0.3s ease;
+      transition: max-width 0.8s ease;
 
       &.is-disabled {
         color: #{getCssVar('ai-chat', 'disabled-color')};
       }
 
       &:hover:not(.is-disabled) {
-        width: 68px;
+        max-width: 200px;
         color: #{getCssVar('ai-chat', 'hover-color')};
         background-color: #{getCssVar('ai-chat', 'hover-background-color')};
       }