refactor: update MultiSelectionPopup icons and improve styling

- Replaced Ant Design icons with Lucide icons for a more modern look.
- Adjusted ActionButton styling to have a circular border radius.
- Updated translation keys in Chinese locales for better formatting.
- Enhanced event handling in ChatContext to manage multi-select mode more effectively.
- Cleaned up unused imports and props in MessageGroup and MessageSelect components.

src/renderer/src/components/Popups/MultiSelectionPopup.tsx

@@ -1,6 +1,6 @@
-import { CloseOutlined, CopyOutlined, DeleteOutlined, SaveOutlined } from '@ant-design/icons'
 import { useChatContext } from '@renderer/pages/home/Messages/ChatContext'
 import { Button, Tooltip } from 'antd'
+import { Copy, Save, Trash, X } from 'lucide-react'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -29,17 +29,17 @@ const MultiSelectActionPopup: FC = () => {
         <SelectionCount>{t('common.selectedMessages', { count: selectedMessageIds.length })}</SelectionCount>
         <ActionButtons>
           <Tooltip title={t('common.save')}>
-            <ActionButton icon={<SaveOutlined />} disabled={isActionDisabled} onClick={() => handleAction('save')} />
+            <ActionButton icon={<Save size={16} />} disabled={isActionDisabled} onClick={() => handleAction('save')} />
           </Tooltip>
           <Tooltip title={t('common.copy')}>
-            <ActionButton icon={<CopyOutlined />} disabled={isActionDisabled} onClick={() => handleAction('copy')} />
+            <ActionButton icon={<Copy size={16} />} disabled={isActionDisabled} onClick={() => handleAction('copy')} />
           </Tooltip>
           <Tooltip title={t('common.delete')}>
-            <ActionButton danger icon={<DeleteOutlined />} onClick={() => handleAction('delete')} />
+            <ActionButton danger icon={<Trash size={16} />} onClick={() => handleAction('delete')} />
           </Tooltip>
         </ActionButtons>
         <Tooltip title={t('chat.navigation.close')}>
-          <ActionButton icon={<CloseOutlined />} onClick={handleClose} />
+          <ActionButton icon={<X size={16} />} onClick={handleClose} />
         </Tooltip>
       </ActionBar>
     </Container>
@@ -73,7 +73,7 @@ const ActionButton = styled(Button)`
   align-items: center;
   justify-content: center;
   padding: 8px 16px;
-  border-radius: 4px;
+  border-radius: 50%;
   .anticon {
     font-size: 16px;
   }

src/renderer/src/hooks/useTopic.ts

@@ -1,5 +1,6 @@
 import db from '@renderer/databases'
 import i18n from '@renderer/i18n'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { deleteMessageFiles } from '@renderer/services/MessagesService'
 import store from '@renderer/store'
 import { updateTopic } from '@renderer/store/assistants'
@@ -27,6 +28,7 @@ export function useActiveTopic(_assistant: Assistant, topic?: Topic) {
   useEffect(() => {
     if (activeTopic) {
       store.dispatch(loadTopicMessagesThunk(activeTopic.id))
+      EventEmitter.emit(EVENT_NAMES.CHANGE_TOPIC, activeTopic)
     }
   }, [activeTopic])
 

src/renderer/src/i18n/locales/zh-cn.json

@@ -395,7 +395,7 @@
       "save": "保存",
       "search": "搜索",
       "select": "选择",
-      "selectedMessages": "选中{{count}}条消息",
+      "selectedMessages": "选中 {{count}} 条消息",
       "topics": "话题",
       "warning": "警告",
       "you": "用户",

src/renderer/src/i18n/locales/zh-tw.json

@@ -395,7 +395,7 @@
       "save": "儲存",
       "search": "搜尋",
       "select": "選擇",
-      "selectedMessages": "选中{{count}}条消息",
+      "selectedMessages": "选中 {{count}} 条消息",
       "topics": "話題",
       "warning": "警告",
       "you": "您",

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

@@ -1,10 +1,11 @@
 import { useMessageOperations } from '@renderer/hooks/useMessageOperations'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { RootState } from '@renderer/store'
 import { messageBlocksSelectors } from '@renderer/store/messageBlock'
 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 { createContext, FC, ReactNode, use, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from 'react-redux'
 
@@ -46,6 +47,11 @@ export const ChatProvider: FC<ChatProviderProps> = ({ children, activeTopic }) =
 
   const store = useStore<RootState>()
 
+  useEffect(() => {
+    const unsubscribe = EventEmitter.on(EVENT_NAMES.CHANGE_TOPIC, () => setIsMultiSelectMode(false))
+    return () => unsubscribe()
+  }, [])
+
   const toggleMultiSelectMode = (value: boolean) => {
     setIsMultiSelectMode(value)
     if (!value) {

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

@@ -10,7 +10,6 @@ import { Popover } from 'antd'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styled, { css } from 'styled-components'
 
-import { useChatContext } from './ChatContext'
 import MessageItem from './Message'
 import MessageGroupMenuBar from './MessageGroupMenuBar'
 import SelectableMessage from './MessageSelect'
@@ -25,8 +24,6 @@ interface Props {
 const MessageGroup = ({ messages, topic, hidePresetMessages, registerMessageElement }: Props) => {
   const { editMessage } = useMessageOperations(topic)
   const { multiModelMessageStyle: multiModelMessageStyleSetting, gridColumns, gridPopoverTrigger } = useSettings()
-  const { isMultiSelectMode, selectedMessageIds, handleSelectMessage } = useChatContext()
-  const selectedMessages = useMemo(() => new Set(selectedMessageIds), [selectedMessageIds])
 
   const [multiModelMessageStyle, setMultiModelMessageStyle] = useState<MultiModelMessageStyle>(
     messages[0].multiModelMessageStyle || multiModelMessageStyleSetting
@@ -201,10 +198,6 @@ const MessageGroup = ({ messages, topic, hidePresetMessages, registerMessageElem
       multiModelMessageStyle,
       isHorizontal,
       selectedMessageId,
-      isMultiSelectMode,
-      selectedMessages,
-      registerMessageElement,
-      handleSelectMessage,
       gridPopoverTrigger
     ]
   )

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

@@ -50,7 +50,8 @@ const Container = styled.div`
 `
 
 const CheckboxWrapper = styled.div`
-  padding: 10px 0 10px 20px;
+  padding: 22px 0 10px 20px;
+  margin-right: -10px;
   display: flex;
   align-items: flex-start;
 `

src/renderer/src/services/EventService.ts

@@ -28,5 +28,6 @@ export const EVENT_NAMES = {
   RESEND_MESSAGE: 'RESEND_MESSAGE',
   SHOW_MODEL_SELECTOR: 'SHOW_MODEL_SELECTOR',
   QUOTE_TEXT: 'QUOTE_TEXT',
-  EDIT_CODE_BLOCK: 'EDIT_CODE_BLOCK'
+  EDIT_CODE_BLOCK: 'EDIT_CODE_BLOCK',
+  CHANGE_TOPIC: 'CHANGE_TOPIC'
 }