fix: refactor message deletion logic and enhance message selection handling

src/renderer/src/pages/home/Messages/ChatContext.tsx

@@ -1,11 +1,12 @@
+import { useMessageOperations } from '@renderer/hooks/useMessageOperations'
 import { RootState } from '@renderer/store'
 import { messageBlocksSelectors } from '@renderer/store/messageBlock'
-import { newMessagesActions, selectMessagesForTopic } from '@renderer/store/newMessage'
+import { selectMessagesForTopic } from '@renderer/store/newMessage'
 import { Topic } from '@renderer/types'
 import { Modal } from 'antd'
 import { createContext, FC, ReactNode, use, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 
 interface ChatContextProps {
   isMultiSelectMode: boolean
@@ -36,7 +37,7 @@ export const useChatContext = () => {
 
 export const ChatProvider: FC<ChatProviderProps> = ({ children, activeTopic }) => {
   const { t } = useTranslation()
-  const dispatch = useDispatch()
+  const { deleteMessage } = useMessageOperations(activeTopic)
   const [isMultiSelectMode, setIsMultiSelectMode] = useState(false)
   const [selectedMessageIds, setSelectedMessageIds] = useState<string[]>([])
   const [confirmDeleteVisible, setConfirmDeleteVisible] = useState(false)
@@ -163,12 +164,7 @@ export const ChatProvider: FC<ChatProviderProps> = ({ children, activeTopic }) =
 
   const confirmDelete = async () => {
     try {
-      dispatch(
+      await Promise.all(messagesToDelete.map((messageId) => deleteMessage(messageId)))
-        newMessagesActions.removeMessages({
-          topicId: activeTopic.id,
-          messageIds: messagesToDelete
-        })
-      )
       window.message.success(t('message.delete.success'))
       setMessagesToDelete([])
       toggleMultiSelectMode(false)

src/renderer/src/pages/home/Messages/Message.tsx

@@ -126,7 +126,9 @@ const MessageItem: FC<Props> = ({
 
   if (message.type === 'clear') {
     return (
-      <NewContextMessage onClick={() => EventEmitter.emit(EVENT_NAMES.NEW_CONTEXT)}>
+      <NewContextMessage
+        className="clear-context-divider"
+        onClick={() => EventEmitter.emit(EVENT_NAMES.NEW_CONTEXT)}>
         <Divider dashed style={{ padding: '0 20px' }} plain>
           {t('chat.message.new.context')}
         </Divider>

src/renderer/src/pages/home/Messages/MessageGroup.tsx

@@ -178,7 +178,8 @@ const MessageGroup = ({
           isMultiSelectMode={isMultiSelectMode}
           isSelected={selectedMessages.has(message.id)}
           onSelect={(selected) => onSelectMessage?.(message.id, selected)}
-          registerElement={registerMessageElement}>
+          registerElement={registerMessageElement}
+          isClearMessage={message.type === 'clear'}>
           {messageContent}
         </SelectableMessage>
       )

src/renderer/src/pages/home/Messages/MessageSelect.tsx

@@ -11,6 +11,7 @@ interface SelectableMessageProps {
   onSelect: (selected: boolean) => void
   messageId: string
   registerElement?: (id: string, element: HTMLElement | null) => void
+  isClearMessage?: boolean
 }
 
 const SelectableMessage: FC<SelectableMessageProps> = ({
@@ -19,7 +20,8 @@ const SelectableMessage: FC<SelectableMessageProps> = ({
   isSelected,
   onSelect,
   messageId,
-  registerElement
+  registerElement,
+  isClearMessage = false
 }) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const { registerMessageElement: contextRegister } = useChatContext()
@@ -43,7 +45,7 @@ const SelectableMessage: FC<SelectableMessageProps> = ({
 
   return (
     <Container ref={containerRef}>
-      {isMultiSelectMode && (
+      {isMultiSelectMode && !isClearMessage && (
         <CheckboxWrapper>
           <Checkbox checked={isSelected} onChange={(e) => onSelect(e.target.checked)} />
         </CheckboxWrapper>

src/renderer/src/pages/home/Messages/Messages.tsx

@@ -122,8 +122,7 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic, o
 
       const MIN_SELECTION_SIZE = 5
       const isValidSelection =
-        Math.abs(right - left) > MIN_SELECTION_SIZE &&
+        Math.abs(right - left) > MIN_SELECTION_SIZE && Math.abs(bottom - top) > MIN_SELECTION_SIZE
-        Math.abs(bottom - top) > MIN_SELECTION_SIZE
 
       if (isValidSelection) {
         // 处理元素选择