src/renderer/src/components/message/MessageList.vue (4)

34-41: Use English comments and add type="button" to avoid implicit form submits

• Per repo guidelines, comments/logs should be in English. Please translate the inline comment.
• Add type="button" on the Button to prevent accidental form submissions if this component is ever nested inside a form.

-        <!-- 取消按钮 -->
+        <!-- Cancel button -->
         <Button
           v-if="showCancelButton"
           variant="outline"
           size="sm"
-          class="rounded-lg"
+          class="rounded-lg"
+          type="button"
           @click="handleCancel"
         >

---

50-57: Translate comment to English and add type="button"

• Keep comments in English to meet the codebase guideline.
• Explicitly set type="button" on the Button.

-        <!-- 新聊天按钮 (仅在非生成状态显示) -->
+        <!-- New chat button (only when not generating) -->
         <Button
           v-if="!showCancelButton"
           variant="outline"
           size="sm"
           class="rounded-lg shrink-0"
+          type="button"
           @click="createNewThread"
         >

---

420-474: Loading ring CSS: support reduced motion and remove duplicate positioning

• Respect users with reduced motion preferences by disabling the spin animation.
• position: relative is already applied via the template class; remove duplication here.
• Optionally keep the ring behind content with an explicit z-index on ::after.

 .scroll-to-bottom-loading {
-  position: relative;
   overflow: visible;
 }
@@
 .scroll-to-bottom-loading::after {
   content: '';
   position: absolute;
@@
   animation: spin 1.2s linear infinite;
   pointer-events: none;
   will-change: transform;
+  z-index: 0;
 }
 
 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .scroll-to-bottom-loading::after {
+    animation: none;
+  }
+}

---

368-371: Optional: Enhance clarity of the showCancelButton computed

I verified that generatingThreadIds is initialized as a reactive Set<string> and is consistently mutated via .add()/.delete() in src/renderer/src/stores/chat.ts, so Vue will correctly track Set.has calls. The existing code works as intended; the suggested change is purely a readability nit.

• Location: src/renderer/src/components/message/MessageList.vue lines 368–371
• Current implementation reacts to generatingThreadIds.has(activeThreadId || ''), which safely handles undefined but embeds the default here.
• Proposed tweak pulls out the ID and uses an explicit truthiness check, making the intent more obvious.

-const showCancelButton = computed(() => {
-  return chatStore.generatingThreadIds.has(chatStore.getActiveThreadId() ?? '')
-})
+const showCancelButton = computed(() => {
+  const id = chatStore.getActiveThreadId()
+  return !!id && chatStore.generatingThreadIds.has(id)
+})

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.