refactor(HomePage): update HomePage component to accept style prop and simplify layout structure

src/renderer/src/Routes.tsx

@@ -15,10 +15,8 @@ const RouteContainer = () => {
   const isHomePage = location.pathname === '/'
 
   return (
-    <div style={{ display: 'flex', width: '100%', height: '100%' }}>
+    <div style={{ display: 'flex', width: '100%', height: '100%', minWidth: '0' }}>
-      <div style={{ display: isHomePage ? 'flex' : 'none', flex: 1 }}>
+      <HomePage style={{ display: isHomePage ? 'flex' : 'none' }} />
-        <HomePage />
-      </div>
       <div style={{ display: isHomePage ? 'none' : 'flex', flex: 1 }}>
         <Routes location={location}>
           <Route path="/agents" element={<AgentsPage />} />

src/renderer/src/pages/home/Chat.tsx

@@ -7,7 +7,7 @@ import { useSettings } from '@renderer/hooks/useSettings'
 import { useShortcut } from '@renderer/hooks/useShortcuts'
 import { Flex } from 'antd'
 import { debounce } from 'lodash'
-import React, { FC, useMemo, useState } from 'react'
+import React, { FC, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import styled from 'styled-components'
 
@@ -16,18 +16,13 @@ import Messages from './Messages/Messages'
 
 const Chat: FC = () => {
   const { activeAssistant, activeTopic, setActiveTopic } = useChat()
-  const { messageStyle, showAssistants } = useSettings()
+  const { messageStyle } = useSettings()
   const { isMultiSelectMode } = useChatContext(activeTopic)
 
   const mainRef = React.useRef<HTMLDivElement>(null)
   const contentSearchRef = React.useRef<ContentSearchRef>(null)
   const [filterIncludeUser, setFilterIncludeUser] = useState(false)
 
-  const maxWidth = useMemo(() => {
-    const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : ''
-    return `calc(100vw - ${minusAssistantsWidth})`
-  }, [showAssistants])
-
   useHotkeys('esc', () => {
     contentSearchRef.current?.disable()
   })
@@ -93,36 +88,30 @@ const Chat: FC = () => {
   }
 
   return (
-    <Container id="chat" className={messageStyle}>
+    <Main ref={mainRef} id="chat-main" className={messageStyle} vertical flex={1} justify="space-between">
-      <Main ref={mainRef} id="chat-main" vertical flex={1} justify="space-between" style={{ maxWidth }}>
+      <ContentSearch
-        <ContentSearch
+        ref={contentSearchRef}
-          ref={contentSearchRef}
+        searchTarget={mainRef as React.RefObject<HTMLElement>}
-          searchTarget={mainRef as React.RefObject<HTMLElement>}
+        filter={contentSearchFilter}
-          filter={contentSearchFilter}
+        includeUser={filterIncludeUser}
-          includeUser={filterIncludeUser}
+        onIncludeUserChange={userOutlinedItemClickHandler}
-          onIncludeUserChange={userOutlinedItemClickHandler}
+      />
-        />
+      <Messages
-        <Messages
+        key={activeTopic.id}
-          key={activeTopic.id}
+        assistant={activeAssistant}
-          assistant={activeAssistant}
+        topic={activeTopic}
-          topic={activeTopic}
+        setActiveTopic={setActiveTopic}
-          setActiveTopic={setActiveTopic}
+        onComponentUpdate={messagesComponentUpdateHandler}
-          onComponentUpdate={messagesComponentUpdateHandler}
+        onFirstUpdate={messagesComponentFirstUpdateHandler}
-          onFirstUpdate={messagesComponentFirstUpdateHandler}
+      />
-        />
+      <QuickPanelProvider>
-        <QuickPanelProvider>
+        <Inputbar />
-          <Inputbar />
+        {isMultiSelectMode && <MultiSelectActionPopup topic={activeTopic} />}
-          {isMultiSelectMode && <MultiSelectActionPopup topic={activeTopic} />}
+      </QuickPanelProvider>
-        </QuickPanelProvider>
+    </Main>
-      </Main>
-    </Container>
   )
 }
 
-const Container = styled.div`
-  height: 100%;
-`
-
 const Main = styled(Flex)`
   height: calc(100vh - var(--navbar-height));
   transform: translateZ(0);

src/renderer/src/pages/home/HomePage.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import Chat from './Chat'
 import ChatNavbar from './ChatNavbar'
 
-const HomePage: FC = () => {
+const HomePage: FC<{ style?: React.CSSProperties }> = ({ style }) => {
   const { showAssistants, showTopics, topicPosition } = useSettings()
 
   useEffect(() => {
@@ -17,7 +17,7 @@ const HomePage: FC = () => {
   }, [showAssistants, showTopics, topicPosition])
 
   return (
-    <Container id="home-page">
+    <Container id="home-page" style={style}>
       <ChatNavbar />
       <ContentContainer id="content-container">
         <Chat />

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

@@ -298,7 +298,7 @@ const GridContainer = styled.div<{ $count: number; $layout: MultiModelMessageSty
     $layout === 'grid' &&
     css`
       margin-top: 15px;
-      grid-template-columns: repeat(${$count > 1 ? $gridColumns || 2 : 1}, minmax(0, 1fr));
+      grid-template-columns: repeat(${$count > 1 ? $gridColumns || 2 : 1}, minmax(0, 1fr)) !important;
       grid-template-rows: auto;
       gap: 16px;
     `}
@@ -339,7 +339,7 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
       return css`
         border: 0.5px solid var(--color-border);
         padding: 10px 10px 0 10px;
-        border-radius: 6px;
+        border-radius: 8px;
         max-height: 600px;
       `
     }
@@ -356,12 +356,12 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
           overflow-y: ${$isInPopover ? 'auto' : 'hidden'};
           border: 0.5px solid ${$isInPopover ? 'transparent' : 'var(--color-border)'};
           padding: 10px;
-          border-radius: 6px;
+          border-radius: 8px;
           background-color: var(--color-background);
         `
       : css`
           overflow-y: ${$layout === 'horizontal' ? 'auto' : 'visible'};
-          border-radius: 6px;
+          border-radius: 8px;
         `
   }}
 `