修复停止生成按钮消失的问题

css/chat.css

@@ -18,13 +18,13 @@
 
 .message {
   display: flex;
-  align-items: flex-start;
   max-width: 85%;
   margin-bottom: 4px;
-  width: 100%; /* 添加宽度限制 */
+  width: 100%;
 }
 
 .message.user {
+  justify-content: flex-end;
   margin-left: auto;
 }
 
@@ -35,23 +35,23 @@
   background: #fff;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
   transition: all 0.3s ease;
-  max-width: 100%; /* 限制最大宽度 */
-  overflow-wrap: break-word; /* 确保长文本会换行 */
-  word-wrap: break-word; /* 兼容性支持 */
-  word-break: break-word; /* 允许在单词内换行 */
-  hyphens: auto; /* 添加连字符支持 */
-}
-
-.message.assistant .message-content {
-  background: #f0f4f8; /* AI消息背景色 */
-  border-top-left-radius: 4px;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
 }
 
 .message.user .message-content {
-  background: #e8f4ff; /* 用户消息背景色 */
+  background: #e8f4ff;
   border-top-right-radius: 4px;
 }
 
+.message.assistant .message-content {
+  background: #f0f4f8;
+  border-top-left-radius: 4px;
+}
+
 .message p {
   margin: 0;
   line-height: 1.5;
@@ -1027,3 +1027,17 @@
 #upload-button:active {
   transform: scale(0.95);
 }
+
+/* 停止生成按钮 */
+.stop-button {
+  display: none;
+  color: #d32f2f;
+}
+
+.stop-button.show {
+  display: inline-flex;
+}
+
+.stop-button:hover {
+  background-color: rgba(211, 47, 47, 0.08);
+}

js/chat-ui.js

@@ -3,6 +3,7 @@ class ChatUI {
     this.messageContainer = document.getElementById("chat-messages");
     this.input = document.getElementById("chat-input");
     this.sendButton = document.getElementById("send-button");
+    this.stopButton = document.getElementById("stop-button");
     this.promptButton = document.getElementById("prompt-button");
     this.promptPanel = document.getElementById("prompt-panel");
 
@@ -51,7 +52,6 @@ class ChatUI {
     );
 
     // 创建打断按钮
-    this.stopButton = document.createElement("button");
     this.stopButton.className = "stop-button";
     this.stopButton.innerHTML = `
       <svg viewBox="0 0 24 24" fill="currentColor">
@@ -597,8 +597,10 @@ class ChatUI {
     this.input.placeholder = isGenerating ? "回复生成中..." : "输入消息...";
     if (isGenerating) {
       this.inputWrapper.classList.add("generating");
+      this.stopButton.classList.add("show");
     } else {
       this.inputWrapper.classList.remove("generating");
+      this.stopButton.classList.remove("show");
       // AI回复完成后，自动聚焦到输入框
       this.input.focus();
     }

sidebar.html

@@ -191,6 +191,21 @@
                 />
               </svg>
             </button>
+            <!-- 停止生成按钮 -->
+            <button
+              id="stop-button"
+              class="icon-button stop-button"
+              title="停止生成"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                width="20"
+                height="20"
+              >
+                <path d="M6 6h12v12H6z" />
+              </svg>
+            </button>
           </div>
         </div>
       </div>