refactor(Messages): update message group styling and improve grouped message handling

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

@@ -145,7 +145,7 @@ const MessageGroup = ({ messages, topic, hidePresetMessages }: Props) => {
           key={message.id}
           className={classNames({
             'group-message-wrapper': message.role === 'assistant' && isHorizontal && isGrouped,
-            [multiModelMessageStyle]: true,
+            [multiModelMessageStyle]: isGrouped,
             selected: 'foldSelected' in message ? message.foldSelected : index === 0
           })}>
           <MessageStream {...messageProps} />

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

@@ -240,6 +240,7 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic })
       window.message.success(t('message.copy.success'))
     }
   })
+
   return (
     <Container
       id="messages"
@@ -272,9 +273,7 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic })
         </InfiniteScroll>
         <Prompt assistant={assistant} key={assistant.prompt} topic={topic} />
       </NarrowLayout>
-
       {messageNavigation === 'anchor' && <MessageAnchorLine messages={displayMessages} />}
-
       {messageNavigation === 'buttons' && <ChatNavigation containerId="messages" />}
     </Container>
   )

src/renderer/src/services/MessagesService.ts

@@ -175,6 +175,7 @@ export function getAssistantMessage({ assistant, topic }: { assistant: Assistant
 
 export function getGroupedMessages(messages: Message[]): { [key: string]: (Message & { index: number })[] } {
   const groups: { [key: string]: (Message & { index: number })[] } = {}
+
   messages.forEach((message, index) => {
     const key = message.askId ? 'assistant' + message.askId : 'user' + message.id
     if (key && !groups[key]) {
@@ -182,6 +183,7 @@ export function getGroupedMessages(messages: Message[]): { [key: string]: (Messa
     }
     groups[key].unshift({ ...message, index })
   })
+
   return groups
 }
 

src/renderer/src/store/migrate.ts

@@ -805,6 +805,7 @@ const migrateConfig = {
     state.settings.autoCheckUpdate = !state.settings.manualUpdateCheck
     // @ts-ignore eslint-disable-next-line
     delete state.settings.manualUpdateCheck
+    state.settings.gridPopoverTrigger = 'click'
     return state
   }
 }

src/renderer/src/store/settings.ts

@@ -138,7 +138,7 @@ const initialState: SettingsState = {
   codeStyle: 'auto',
   foldDisplayMode: 'expanded',
   gridColumns: 2,
-  gridPopoverTrigger: 'hover',
+  gridPopoverTrigger: 'click',
   messageNavigation: 'none',
   webdavHost: '',
   webdavUser: '',