Feat/button cancel #1002

deepinfect · 2025-10-14T10:02:51Z

Summary by CodeRabbit

New Features
- Added a Cancel button to stop ongoing message generation; Send returns when idle.
- Introduced a confirmation dialog before clearing all messages in a thread, with clear and cancel actions.
- Enhanced canceled message display with a subtle notice instead of an error block.
- Enabled clearing all messages in the active thread from the dialog.
Style
- Updated action layout to stack vertically within the dialog for improved clarity.

coderabbitai · 2025-10-14T10:03:15Z

Walkthrough

Adds streaming-aware cancel behavior to PromptInput, introduces a confirmation dialog to clear all messages from MessageList, and adjusts MessageBlockError to render a distinct UI for cancelled blocks versus other errors. New control flows handle canceling generation and confirming thread-wide message clearing.

Changes

Cohort / File(s)	Summary of changes
Prompt input streaming cancel `src/renderer/src/components/prompt-input/PromptInput.vue`	Adds isStreaming computed; toggles Send/Cancel button. Implements handleCancel to call chatStore.cancelGenerating for the active thread. Template conditionally shows cancel during generation.
Message list clean dialog `src/renderer/src/components/message/MessageList.vue`	Adds confirmation dialog (shadcn Dialog). Replaces inline cancel with openCleanDialog. Implements handleThreadCleanMessages to call chatStore.clearAllMessages(threadId); adds dialog open/close state and handlers. Adjusts action layout classes.
Message block cancel UI `src/renderer/src/components/message/MessageBlockError.vue`	Conditionally renders a muted “cancelled” row with refresh-off icon when status is 'cancel'; retains red error block for other statuses.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant PromptInput
  participant ChatStore as chatStore
  participant Thread as ActiveThread

  User->>PromptInput: Press Cancel (while streaming)
  PromptInput->>ChatStore: getActiveThreadId()
  alt Active thread exists and is generating
    PromptInput->>ChatStore: cancelGenerating(threadId)
    ChatStore-->>PromptInput: ack/caught error
  else No active thread
    Note over PromptInput: No-op
  end

sequenceDiagram
  autonumber
  actor User
  participant MessageList
  participant Dialog
  participant ChatStore as chatStore

  User->>MessageList: Click "Clean messages"
  MessageList->>Dialog: Open
  User->>Dialog: Confirm
  Dialog->>MessageList: onConfirm
  MessageList->>ChatStore: getActiveThreadId()
  MessageList->>ChatStore: clearAllMessages(threadId)
  alt Success
    ChatStore-->>MessageList: resolved
    MessageList->>Dialog: Close
  else Error
    ChatStore-->>MessageList: error
    MessageList->>Dialog: Close (after handling)
  end

sequenceDiagram
  participant UI as MessageBlockError.vue
  participant Block as block

  alt block.status == 'cancel'
    UI->>UI: Render muted cancel row with icon + i18n text
  else Other statuses
    UI->>UI: Render red error block (existing)
  end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Fix appbar style on windows and linux #989: Touches PromptInput.vue and MessageList.vue with overlapping UI control updates.
UI/refactor #979: Alters MessageList.vue around cancel/clean-message UI and actions, similar scope.

Suggested reviewers

zerob13

Poem

I thump my paws: “Cancel!”—the stream goes still,
A whisper of dialogs asks, “Clean this quill?”
Errors wear grey when chats are curtailed,
Threads sweep neat, no crumbs derailed.
With tidy logs and buttons bright,
This bunny ships the flow just right. 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title Check	⚠️ Warning	The title “Feat/button cancel” is too terse and does not clearly convey the primary updates introduced by this changeset, including a cancel button for streaming generation, a message cleanup confirmation dialog, and updated error block rendering for canceled statuses. It ambiguously refers to a cancel button without specifying where the feature appears or the broader context of the UI improvements. As a result, teammates scanning the PR history may not grasp the full scope of the changes.	Please update the PR title to succinctly summarize the main UI enhancements, for example “Add streaming cancel button and message cleanup confirmation dialog,” so that the scope and intent of the changes are immediately clear.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/button-cancel

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (2)

src/renderer/src/components/prompt-input/PromptInput.vue (1)
729-732: Consider providing user feedback when cancellation fails.

The handleCancel function silently returns when there's no active thread. While this prevents errors, it could leave users uncertain about why the cancel action had no effect.

Consider logging or providing user feedback:
 const handleCancel = () => {
-  if (!chatStore.getActiveThreadId()) return
+  const activeThreadId = chatStore.getActiveThreadId()
+  if (!activeThreadId) {
+    console.warn('Cannot cancel: no active thread')
+    return
+  }
-  chatStore.cancelGenerating(chatStore.getActiveThreadId()!)
+  chatStore.cancelGenerating(activeThreadId)
 }
src/renderer/src/components/message/MessageBlockError.vue (1)

2-8: Avoid empty translation lookups: t(block.content || '') will call t('') when block.content is falsy—either wrap the <span> in v-if="block.content" or supply a default key (e.g. 'common.cancelled') to prevent empty lookups.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c126214 and c6de5e8.

📒 Files selected for processing (3)

src/renderer/src/components/message/MessageBlockError.vue (1 hunks)
src/renderer/src/components/message/MessageList.vue (6 hunks)
src/renderer/src/components/prompt-input/PromptInput.vue (3 hunks)

🧰 Additional context used

📓 Path-based instructions (16)

src/renderer/src/**/*

📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)

src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system

Files:

src/renderer/src/components/prompt-input/PromptInput.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/components/message/MessageBlockError.vue

src/renderer/**/*.{vue,ts,js,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

渲染进程代码放在 src/renderer

Files:

src/renderer/src/components/prompt-input/PromptInput.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/components/message/MessageBlockError.vue

src/renderer/src/**/*.{vue,ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)

src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling

Files:

src/renderer/src/components/prompt-input/PromptInput.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/components/message/MessageBlockError.vue

src/renderer/src/**/*.vue

📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)

Use scoped styles to prevent CSS conflicts between components

Files:

src/renderer/src/components/prompt-input/PromptInput.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/components/message/MessageBlockError.vue

src/renderer/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.

Files:

src/renderer/src/components/prompt-input/PromptInput.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/components/message/MessageBlockError.vue

src/renderer/**/*.{vue,ts}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

Implement lazy loading for routes and components.

Files:

src/renderer/src/components/prompt-input/PromptInput.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/components/message/MessageBlockError.vue

src/renderer/**/*.{ts,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.

Use Pinia for frontend state management (do not introduce alternative state libraries)

Files:

src/renderer/src/components/prompt-input/PromptInput.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/components/message/MessageBlockError.vue

**/*.{ts,tsx,js,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use English for all logs and comments

Files:

src/renderer/src/components/prompt-input/PromptInput.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/components/message/MessageBlockError.vue

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)

Use PascalCase for TypeScript types and classes

Files:

src/renderer/src/components/prompt-input/PromptInput.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/components/message/MessageBlockError.vue

src/renderer/{src,shell,floating}/**/*.vue

📄 CodeRabbit inference engine (CLAUDE.md)

src/renderer/{src,shell,floating}/**/*.vue: Use Vue 3 Composition API for all components
All user-facing strings must use i18n keys via vue-i18n (no hard-coded UI strings)
Use Tailwind CSS utilities and ensure styles are scoped in Vue components

Files:

src/renderer/src/components/prompt-input/PromptInput.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/components/message/MessageBlockError.vue

src/renderer/src/components/**/*

📄 CodeRabbit inference engine (CLAUDE.md)

Organize UI components by feature within src/renderer/src/

Files:

src/renderer/src/components/prompt-input/PromptInput.vue
src/renderer/src/components/message/MessageList.vue
src/renderer/src/components/message/MessageBlockError.vue

src/renderer/src/**