feat: Add message deletion functionality across chat components, enabling users to delete messages and their children with confirmation prompts, enhancing message management capabilities

experdot · experdot · commit e6b50fa372c0 · 2025-07-22T22:17:11.000+08:00
diff --git a/src/renderer/src/components/pages/chat/ChatLogic.tsx b/src/renderer/src/components/pages/chat/ChatLogic.tsx
@@ -21,6 +21,7 @@ interface ChatLogicProps {
     onEditAndResendMessage: (messageId: string, newContent: string) => Promise<void>
     onToggleFavorite: (messageId: string) => void
     onModelChangeForMessage: (messageId: string, newModelId: string) => Promise<void>
+    onDeleteMessage: (messageId: string) => Promise<void>
   }) => React.ReactNode
 }
 
@@ -131,6 +132,7 @@ export default function ChatLogic({
     onEditMessage: messageOperations.handleEditMessage,
     onEditAndResendMessage: messageOperations.handleEditAndResendMessage,
     onToggleFavorite: messageOperations.handleToggleFavorite,
-    onModelChangeForMessage: messageOperations.handleModelChangeForMessage
+    onModelChangeForMessage: messageOperations.handleModelChangeForMessage,
+    onDeleteMessage: messageOperations.handleDeleteMessage
   })
 }
diff --git a/src/renderer/src/components/pages/chat/ChatWindow.tsx b/src/renderer/src/components/pages/chat/ChatWindow.tsx
@@ -179,7 +179,8 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({ chatId }, ref)
             onEditMessage,
             onEditAndResendMessage,
             onToggleFavorite,
-            onModelChangeForMessage
+            onModelChangeForMessage,
+            onDeleteMessage
           }) => (
             <>
               {/* 消息树侧边栏 */}
@@ -220,12 +221,14 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({ chatId }, ref)
                   onEditAndResendMessage={onEditAndResendMessage}
                   onToggleFavorite={onToggleFavorite}
                   onModelChange={onModelChangeForMessage}
+                  onDeleteMessage={onDeleteMessage}
                   onSwitchBranch={handleSwitchBranch}
                   // 折叠相关props
                   collapsedMessages={collapsedMessagesForChat}
                   onToggleMessageCollapse={handleToggleMessageCollapse}
                   // 设置相关props
                   onOpenSettings={handleOpenSettings}
+                  onDeleteMessage={onDeleteMessage}
                 />
                 <ChatInput
                   ref={chatInputRef}
diff --git a/src/renderer/src/components/pages/chat/MessageItem.tsx b/src/renderer/src/components/pages/chat/MessageItem.tsx
@@ -14,7 +14,8 @@ import {
   BulbOutlined,
   PictureOutlined,
   DownOutlined,
-  UpOutlined
+  UpOutlined,
+  DeleteOutlined
 } from '@ant-design/icons'
 import { ChatMessage, LLMConfig } from '../../../types/type'
 import BranchNavigator from './BranchNavigator'
@@ -44,6 +45,7 @@ interface MessageItemProps {
   onEditAndResend?: (messageId: string, newContent: string) => void
   onToggleFavorite?: (messageId: string) => void
   onModelChange?: (messageId: string, newModelId: string) => void
+  onDelete?: (messageId: string) => void
   // 折叠相关
   isCollapsed?: boolean
   onToggleCollapse?: (messageId: string) => void
@@ -65,6 +67,7 @@ export default function MessageItem({
   onEditAndResend,
   onToggleFavorite,
   onModelChange,
+  onDelete,
   isCollapsed = false,
   onToggleCollapse
 }: MessageItemProps) {
@@ -161,6 +164,10 @@ export default function MessageItem({
     onToggleCollapse?.(message.id)
   }
 
+  const handleDelete = () => {
+    onDelete?.(message.id)
+  }
+
   // 生成折叠状态下的预览文本
   const getPreviewText = (content: string, maxLength: number = 80) => {
     if (!content) return '消息已折叠，点击展开按钮查看内容'
@@ -412,6 +419,18 @@ export default function MessageItem({
                 />
               </Tooltip>
             )}
+            {onDelete && (
+              <Tooltip title="删除">
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<DeleteOutlined />}
+                  onClick={handleDelete}
+                  disabled={isCurrentlyStreaming}
+                  className="message-delete-btn"
+                />
+              </Tooltip>
+            )}
           </div>
         </div>
       </div>
diff --git a/src/renderer/src/components/pages/chat/MessageList.tsx b/src/renderer/src/components/pages/chat/MessageList.tsx
@@ -17,6 +17,7 @@ interface MessageListProps {
   onEditAndResendMessage?: (messageId: string, newContent: string) => void
   onToggleFavorite?: (messageId: string) => void
   onModelChange?: (messageId: string, newModelId: string) => void
+  onDeleteMessage?: (messageId: string) => void
   onSwitchBranch?: (messageId: string, branchIndex: number) => void
   onStopGeneration?: () => void
   // 折叠相关
@@ -38,6 +39,7 @@ export default function MessageList({
   onEditAndResendMessage,
   onToggleFavorite,
   onModelChange,
+  onDeleteMessage,
   onSwitchBranch,
   collapsedMessages = [],
   onToggleMessageCollapse,
@@ -159,6 +161,7 @@ export default function MessageList({
             onEditAndResend={onEditAndResendMessage}
             onToggleFavorite={onToggleFavorite}
             onModelChange={onModelChange}
+            onDelete={onDeleteMessage}
             // 折叠相关
             isCollapsed={collapsedMessages.includes(message.id)}
             onToggleCollapse={onToggleMessageCollapse}
diff --git a/src/renderer/src/components/pages/chat/hooks/useMessageOperations.ts b/src/renderer/src/components/pages/chat/hooks/useMessageOperations.ts
@@ -2,6 +2,7 @@ import { useCallback } from 'react'
 import { App } from 'antd'
 import { v4 as uuidv4 } from 'uuid'
 import { usePagesStore } from '../../../../stores/pagesStore'
+import { useSettingsStore } from '../../../../stores/settingsStore'
 import { useMessagesStore } from '../../../../stores/messagesStore'
 import { ChatMessage } from '../../../../types/type'
 import { MessageTree } from '../messageTree'
@@ -23,6 +24,7 @@ export interface UseMessageOperationsReturn {
   handleEditAndResendMessage: (messageId: string, newContent: string) => Promise<void>
   handleToggleFavorite: (messageId: string) => void
   handleModelChangeForMessage: (messageId: string, newModelId: string) => Promise<void>
+  handleDeleteMessage: (messageId: string) => Promise<void>
 }
 
 export function useMessageOperations({
@@ -33,8 +35,9 @@ export function useMessageOperations({
   isLoading,
   setIsLoading
 }: UseMessageOperationsProps): UseMessageOperationsReturn {
-  const { addMessageToParent, toggleMessageFavorite } = useMessagesStore()
-  const { message } = App.useApp()
+  const { addMessageToParent, toggleMessageFavorite, deleteMessageAndChildren } = useMessagesStore()
+  const { settings } = useSettingsStore()
+  const { message, modal } = App.useApp()
 
   const handleSendMessage = useCallback(
     async (content: string, customModelId?: string, customParentId?: string) => {
@@ -287,7 +290,6 @@ export function useMessageOperations({
     async (messageId: string, newModelId: string) => {
       if (!chat || isLoading) return
 
-      const { settings } = usePagesStore.getState()
       const llmConfig = settings.llmConfigs?.find((config: any) => config.id === newModelId)
       if (!llmConfig) {
         message.error('所选模型配置不存在')
@@ -337,16 +339,72 @@ export function useMessageOperations({
       chatId,
       aiService,
       messageTree,
-      setIsLoading
+      setIsLoading,
+      settings
     ]
   )
 
+  const handleDeleteMessage = useCallback(
+    async (messageId: string) => {
+      if (!chat) return
+
+      // 找到要删除的消息
+      const messageToDelete = chat.messages?.find((msg: any) => msg.id === messageId)
+      if (!messageToDelete) return
+
+      // 计算要删除的消息总数（包括子分支）
+      const countChildrenRecursively = (msgId: string): number => {
+        let count = 1 // 当前消息
+        const msg = chat.messages?.find((m: any) => m.id === msgId)
+        if (msg?.children) {
+          msg.children.forEach((childId: string) => {
+            count += countChildrenRecursively(childId)
+          })
+        }
+        return count
+      }
+
+      const totalCount = countChildrenRecursively(messageId)
+      const hasChildren = totalCount > 1
+
+      // 显示确认对话框
+      const confirmText = hasChildren 
+        ? `确定要删除这条消息及其所有子分支吗？（共 ${totalCount} 条消息）` 
+        : '确定要删除这条消息吗？'
+      
+      const confirmed = await new Promise<boolean>((resolve) => {
+        modal.confirm({
+          title: '删除消息',
+          content: confirmText,
+          okText: '删除',
+          cancelText: '取消',
+          okType: 'danger',
+          onOk: () => resolve(true),
+          onCancel: () => resolve(false)
+        })
+      })
+
+      if (!confirmed) return
+
+      try {
+        // 调用删除方法
+        deleteMessageAndChildren(chatId, messageId)
+        message.success(hasChildren ? `已删除 ${totalCount} 条消息` : '已删除消息')
+      } catch (error) {
+        console.error('Delete message failed:', error)
+        message.error('删除消息失败')
+      }
+    },
+    [chat, chatId, deleteMessageAndChildren, message, modal]
+  )
+
   return {
     handleSendMessage,
     handleRetryMessage,
     handleEditMessage,
     handleEditAndResendMessage,
     handleToggleFavorite,
-    handleModelChangeForMessage
+    handleModelChangeForMessage,
+    handleDeleteMessage
   }
 } 
diff --git a/src/renderer/src/stores/messagesStore.ts b/src/renderer/src/stores/messagesStore.ts
@@ -25,6 +25,7 @@ export interface MessagesActions {
   updateMessageContent: (chatId: string, messageId: string, content: string) => void
   updateMessageReasoning: (chatId: string, messageId: string, reasoning_content: string) => void
   removeMessage: (chatId: string, messageId: string) => void
+  deleteMessageAndChildren: (chatId: string, messageId: string) => void
   toggleMessageFavorite: (chatId: string, messageId: string) => void
 
   // 流式消息处理 - 优化版本
@@ -204,6 +205,98 @@ export const useMessagesStore = create<MessagesState & MessagesActions>()(
           }
         },
 
+        deleteMessageAndChildren: (chatId, messageId) => {
+          try {
+            const { updatePage } = usePagesStore.getState()
+            const page = usePagesStore.getState().findPageById(chatId)
+
+            if (page && page.type === 'regular' && page.messages) {
+              // 递归查找所有需要删除的消息ID（包括子分支）
+              const messagesToDelete = new Set<string>()
+              
+              const findChildrenRecursively = (currentMessageId: string) => {
+                messagesToDelete.add(currentMessageId)
+                const message = page.messages?.find(msg => msg.id === currentMessageId)
+                if (message && message.children) {
+                  message.children.forEach(childId => {
+                    findChildrenRecursively(childId)
+                  })
+                }
+              }
+
+              findChildrenRecursively(messageId)
+
+              // 过滤掉要删除的消息
+              const updatedMessages = page.messages?.filter(msg => !messagesToDelete.has(msg.id)) || []
+              
+              // 更新父消息的children数组（如果被删除的消息有父消息）
+              const messageToDelete = page.messages?.find(msg => msg.id === messageId)
+              let finalMessages = updatedMessages
+              
+              if (messageToDelete?.parentId) {
+                finalMessages = updatedMessages.map(msg => 
+                  msg.id === messageToDelete.parentId 
+                    ? {
+                        ...msg,
+                        children: (msg.children || []).filter(childId => childId !== messageId)
+                      }
+                    : msg
+                )
+              }
+
+              // 更新当前路径，移除已删除的消息
+              let newCurrentPath = page.currentPath || []
+              
+              // 如果当前路径包含被删除的消息，需要调整路径
+              if (messagesToDelete.has(newCurrentPath[newCurrentPath.length - 1])) {
+                // 找到被删除消息在路径中的位置
+                const deletedMessageIndex = newCurrentPath.findIndex(id => messagesToDelete.has(id))
+                if (deletedMessageIndex !== -1) {
+                  // 截取到被删除消息之前的路径
+                  newCurrentPath = newCurrentPath.slice(0, deletedMessageIndex)
+                  
+                  // 如果删除了路径中的消息，尝试找到同级的其他消息作为替代
+                  if (messageToDelete?.parentId && deletedMessageIndex > 0) {
+                    const parentId = newCurrentPath[newCurrentPath.length - 1]
+                    const parentMessage = finalMessages.find(msg => msg.id === parentId)
+                    if (parentMessage?.children && parentMessage.children.length > 0) {
+                      // 选择同级的第一个子消息继续路径
+                      newCurrentPath.push(parentMessage.children[0])
+                    }
+                  }
+                }
+              }
+
+              // 更新消息映射（如果存在）
+              let updatedMessageMap = page.messageMap
+              if (updatedMessageMap) {
+                const newMessageMap = { ...updatedMessageMap }
+                messagesToDelete.forEach(id => {
+                  delete newMessageMap[id]
+                })
+                
+                // 更新父消息在messageMap中的children
+                if (messageToDelete?.parentId && newMessageMap[messageToDelete.parentId]) {
+                  newMessageMap[messageToDelete.parentId] = {
+                    ...newMessageMap[messageToDelete.parentId],
+                    children: (newMessageMap[messageToDelete.parentId].children || []).filter(childId => childId !== messageId)
+                  }
+                }
+                
+                updatedMessageMap = newMessageMap
+              }
+
+              updatePage(chatId, { 
+                messages: finalMessages,
+                currentPath: newCurrentPath,
+                messageMap: updatedMessageMap
+              })
+            }
+          } catch (error) {
+            handleStoreError('messagesStore', 'deleteMessageAndChildren', error)
+          }
+        },
+
         toggleMessageFavorite: (chatId, messageId) => {
           try {
             const { updatePage } = usePagesStore.getState()
