From ee0cccd430c1af5c8cd9333190a24aaed145de7c Mon Sep 17 00:00:00 2001
From: deepinsect <deepinsect@github.com>
Date: Tue, 14 Oct 2025 18:01:38 +0800
Subject: [PATCH] feat: remove new thread button, add clean button.

---
 .../components/message/MessageBlockError.vue  |  8 ++
 .../src/components/message/MessageList.vue    | 82 ++++++++++++-------
 .../components/prompt-input/PromptInput.vue   | 28 +++++++
 3 files changed, 89 insertions(+), 29 deletions(-)

diff --git a/src/renderer/src/components/message/MessageBlockError.vue b/src/renderer/src/components/message/MessageBlockError.vue
index 2f46c1c76..9cf7568de 100644
--- a/src/renderer/src/components/message/MessageBlockError.vue
+++ b/src/renderer/src/components/message/MessageBlockError.vue
@@ -1,5 +1,13 @@
 <template>
   <div
+    class="text-muted-foreground text-sm flex flex-row gap-2 items-center py-2"
+    v-if="block.status === 'cancel'"
+  >
+    <Icon icon="lucide:refresh-cw-off"></Icon>
+    <span>{{ t(block.content || '') }}</span>
+  </div>
+  <div
+    v-else
     class="text-xs bg-red-100 text-red-700 rounded-lg border border-red-400 flex flex-col gap-2 px-2 py-2"
   >
     <div class="flex flex-row gap-2 items-center cursor-pointer">
diff --git a/src/renderer/src/components/message/MessageList.vue b/src/renderer/src/components/message/MessageList.vue
index e3bd102bf..92f1ebb49 100644
--- a/src/renderer/src/components/message/MessageList.vue
+++ b/src/renderer/src/components/message/MessageList.vue
@@ -37,7 +37,7 @@
     <template v-if="!isCapturingImage">
       <TransitionGroup
         tag="div"
-        class="absolute bottom-3 right-3 flex items-center gap-2"
+        class="absolute bottom-3 right-3 flex flex-col items-center gap-2"
         enter-active-class="transition-all duration-300 ease-out"
         enter-from-class="opacity-0 translate-y-2"
         enter-to-class="opacity-100 translate-y-0"
@@ -49,29 +49,14 @@
         @after-leave="handleActionAfterLeave"
         @leave-cancelled="handleActionAfterLeave"
       >
-        <!-- 取消按钮 -->
-        <Button
-          v-if="showCancelButton"
-          key="cancel"
-          variant="outline"
-          size="icon"
-          class="w-8 h-8 shrink-0 opacity-100 bg-card backdrop-blur-lg z-20"
-          @click="handleCancel"
-        >
-          <Icon
-            icon="lucide:square"
-            class="w-6 h-6 bg-red-500 p-1 text-primary-foreground rounded-full"
-          />
-        </Button>
-
         <!-- 新聊天按钮 (仅在非生成状态显示) -->
         <Button
-          v-else
+          v-if="!showCancelButton"
           key="new-chat"
           variant="outline"
           size="icon"
           class="w-8 h-8 shrink-0 opacity-100 bg-card backdrop-blur-lg z-20"
-          @click="createNewThread"
+          @click="openCleanDialog"
         >
           <Icon icon="lucide:brush-cleaning" class="w-6 h-6 text-foreground" />
           <!-- <span class="">{{ t('common.newChat') }}</span> -->
@@ -105,6 +90,24 @@
       @bar-click="handleMinimapClick"
     />
   </div>
+  <Dialog v-model:open="cleanMessagesDialog">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>{{ t('dialog.cleanMessages.title') }}</DialogTitle>
+        <DialogDescription>
+          {{ t('dialog.cleanMessages.description') }}
+        </DialogDescription>
+      </DialogHeader>
+      <DialogFooter>
+        <Button variant="outline" @click="handleCleanMessagesDialogCancel">{{
+          t('dialog.cancel')
+        }}</Button>
+        <Button variant="destructive" @click="handleThreadCleanMessages">{{
+          t('dialog.cleanMessages.confirm')
+        }}</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
@@ -124,6 +127,16 @@ import { usePageCapture } from '@/composables/usePageCapture'
 import { usePresenter } from '@/composables/usePresenter'
 import MessageMinimap from './MessageMinimap.vue'
 import { useArtifactStore } from '@/stores/artifact'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter
+} from '@shadcn/components/ui/dialog'
+
+const cleanMessagesDialog = ref(false)
 
 const { t } = useI18n()
 const props = defineProps<{
@@ -172,6 +185,26 @@ const handleMinimapHover = (messageId: string | null) => {
   hoveredMessageId.value = messageId
 }
 
+// 取消清空消息对话框
+const handleCleanMessagesDialogCancel = () => {
+  cleanMessagesDialog.value = false
+}
+
+// 清空会话消息
+const handleThreadCleanMessages = async () => {
+  try {
+    const threadId = chatStore.getActiveThreadId()
+    if (!threadId) {
+      return
+    }
+    await chatStore.clearAllMessages(threadId)
+  } catch (error) {
+    console.error(t('common.error.cleanMessagesFailed'), error)
+  }
+
+  cleanMessagesDialog.value = false
+}
+
 const handleMinimapClick = () => {
   // 点击迷你地图改为打开消息导航侧边栏
   if (artifactStore.isOpen) {
@@ -466,11 +499,6 @@ const showCancelButton = computed(() => {
   return chatStore.generatingThreadIds.has(chatStore.getActiveThreadId() ?? '')
 })
 
-const handleCancel = () => {
-  if (!chatStore.getActiveThreadId()) return
-  chatStore.cancelGenerating(chatStore.getActiveThreadId()!)
-}
-
 // Handle retry event from MessageItemUser
 const handleRetry = async (index: number) => {
   let triggered = false
@@ -502,12 +530,8 @@ const handleRetry = async (index: number) => {
   }
 }
 // 创建新会话
-const createNewThread = async () => {
-  try {
-    await chatStore.clearActiveThread()
-  } catch (error) {
-    console.error(t('common.error.createChatFailed'), error)
-  }
+const openCleanDialog = async () => {
+  cleanMessagesDialog.value = true
 }
 defineExpose({
   scrollToBottom,
diff --git a/src/renderer/src/components/prompt-input/PromptInput.vue b/src/renderer/src/components/prompt-input/PromptInput.vue
index 42c736506..f6b999a8b 100644
--- a/src/renderer/src/components/prompt-input/PromptInput.vue
+++ b/src/renderer/src/components/prompt-input/PromptInput.vue
@@ -193,10 +193,25 @@
               size="icon"
               class="w-7 h-7 text-xs rounded-lg"
               :disabled="disabledSend"
+              v-if="!isStreaming"
               @click="emitSend"
             >
               <Icon icon="lucide:arrow-up" class="w-4 h-4" />
             </Button>
+            <!-- 取消按钮 -->
+            <Button
+              v-if="isStreaming"
+              key="cancel"
+              variant="outline"
+              size="icon"
+              class="w-7 h-7 text-xs rounded-lg bg-card backdrop-blur-lg"
+              @click="handleCancel"
+            >
+              <Icon
+                icon="lucide:square"
+                class="w-6 h-6 bg-red-500 p-1 text-primary-foreground rounded-full"
+              />
+            </Button>
           </div>
         </div>
         <div v-if="isDragging" class="absolute inset-0 bg-black/40 rounded-lg">
@@ -711,6 +726,11 @@ const previewFile = (filePath: string) => {
   windowPresenter.previewFile(filePath)
 }
 
+const handleCancel = () => {
+  if (!chatStore.getActiveThreadId()) return
+  chatStore.cancelGenerating(chatStore.getActiveThreadId()!)
+}
+
 const handlePaste = async (e: ClipboardEvent, fromCapture = false) => {
   // Avoid double-processing only for bubble-phase handler on wrapper.
   // Allow processing when invoked from the capture-phase editor listener.
@@ -1050,6 +1070,14 @@ const disabledSend = computed(() => {
   return false
 })
 
+const isStreaming = computed(() => {
+  const activeThreadId = chatStore.getActiveThreadId()
+  if (activeThreadId) {
+    return chatStore.generatingThreadIds.has(activeThreadId)
+  }
+  return false
+})
+
 const handleEditorEnter = (e: KeyboardEvent) => {
   // If a mention was just selected, don't do anything
   if (mentionSelected.value) {