refactor: enhance theme handling and style adjustments in MinApp and Navbar components

- Added theme context usage in MinApp for dynamic background styling based on the current theme.
- Updated Navbar component by removing the AssistantSettingsPopup and associated TitleText for a cleaner interface.
- Adjusted border radius in MessageHeader for a more consistent design across components.

src/renderer/src/assets/styles/index.scss

@@ -50,7 +50,7 @@
   --color-reference-text: #ffffff;
   --color-reference-background: #0b0e12;
 
-  --navbar-background-mac: rgba(20, 20, 20, 0.6);
+  --navbar-background-mac: rgba(20, 20, 20, 0.55);
   --navbar-background: rgba(40, 40, 40);
 
   --navbar-height: 40px;
@@ -115,7 +115,7 @@ body[theme-mode='light'] {
   --color-reference-text: #000000;
   --color-reference-background: #f1f7ff;
 
-  --navbar-background-mac: rgba(255, 255, 255, 0.6);
+  --navbar-background-mac: rgba(255, 255, 255, 0.55);
   --navbar-background: rgba(244, 244, 244);
 
   --chat-background: #f3f3f3;

src/renderer/src/components/MinApp/index.tsx

@@ -64,7 +64,9 @@ const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
     const newPinned = isPinned ? pinned.filter((item) => item.id !== app.id) : [...pinned, app]
     updatePinnedMinapps(newPinned)
   }
+
   const isInDevelopment = process.env.NODE_ENV === 'development'
+
   const Title = () => {
     return (
       <TitleContainer style={{ justifyContent: 'space-between' }}>
@@ -176,6 +178,7 @@ const TitleContainer = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
+  background-color: transparent;
 `
 
 const TitleText = styled.div`

src/renderer/src/hooks/useAppInit.ts

@@ -1,5 +1,6 @@
 import { isMac } from '@renderer/config/constant'
 import { isLocalAi } from '@renderer/config/env'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import db from '@renderer/databases'
 import i18n from '@renderer/i18n'
 import { useAppDispatch } from '@renderer/store'
@@ -21,6 +22,7 @@ export function useAppInit() {
   const { minappShow } = useRuntime()
   const { setDefaultModel, setTopicNamingModel, setTranslateModel } = useDefaultModel()
   const avatar = useLiveQuery(() => db.settings.get('image://avatar'))
+  const { theme } = useTheme()
 
   useUpdateHandler()
   useFullScreenNotice()
@@ -58,8 +60,14 @@ export function useAppInit() {
 
   useEffect(() => {
     const transparentWindow = windowStyle === 'transparent' && isMac && !minappShow
+
+    if (minappShow) {
+      window.root.style.background = theme === 'dark' ? 'var(--color-black)' : 'var(--color-white)'
+      return
+    }
+
     window.root.style.background = transparentWindow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
-  }, [windowStyle, minappShow])
+  }, [windowStyle, minappShow, theme])
 
   useEffect(() => {
     if (isLocalAi) {

src/renderer/src/pages/home/Inputbar/Inputbar.tsx

@@ -1,6 +1,7 @@
 import {
   ClearOutlined,
   ColumnHeightOutlined,
+  FormOutlined,
   FullscreenExitOutlined,
   FullscreenOutlined,
   GlobalOutlined,
@@ -123,6 +124,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
 
   const inputTokenCount = showInputEstimatedTokens ? tokenCount : 0
 
+  const newTopicShortcut = useShortcutDisplay('new_topic')
   const cleanTopicShortcut = useShortcutDisplay('clear_topic')
   const inputEmpty = isEmpty(text.trim()) && files.length === 0
 
@@ -707,6 +709,11 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
           </DragHandle>
           <Toolbar>
             <ToolbarMenu>
+              <Tooltip placement="top" title={t('chat.input.new_topic', { Command: newTopicShortcut })} arrow>
+                <ToolbarButton type="text" onClick={addNewTopic}>
+                  <FormOutlined />
+                </ToolbarButton>
+              </Tooltip>
               <AttachmentButton model={model} files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} />
               <MentionModelsButton
                 mentionModels={mentionModels}

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

@@ -72,7 +72,7 @@ const MessageHeader: FC<Props> = memo(({ assistant, model, message }) => {
             src={avatarSource}
             size={35}
             style={{
-              borderRadius: '20%',
+              borderRadius: '25%',
               cursor: showMinappIcon ? 'pointer' : 'default',
               border: isLocalAi ? '1px solid var(--color-border-soft)' : 'none',
               filter: theme === 'dark' ? 'invert(0.05)' : undefined
@@ -88,7 +88,7 @@ const MessageHeader: FC<Props> = memo(({ assistant, model, message }) => {
               <Avatar
                 src={avatar}
                 size={35}
-                style={{ borderRadius: '20%', cursor: 'pointer' }}
+                style={{ borderRadius: '25%', cursor: 'pointer' }}
                 onClick={() => UserPopup.show()}
               />
             )}

src/renderer/src/pages/home/Navbar.tsx

@@ -9,7 +9,6 @@ import { modelGenerating } from '@renderer/hooks/useRuntime'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { useShortcut } from '@renderer/hooks/useShortcuts'
 import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore'
-import AssistantSettingsPopup from '@renderer/pages/settings/AssistantSettings'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { useAppDispatch } from '@renderer/store'
 import { setNarrowMode } from '@renderer/store/settings'
@@ -85,12 +84,6 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
               </NavbarIcon>
             </Tooltip>
           )}
-          <TitleText
-            style={{ marginRight: 10, cursor: 'pointer' }}
-            className="nodrag"
-            onClick={() => AssistantSettingsPopup.show({ assistant })}>
-            {assistant.name}
-          </TitleText>
           <SelectModelButton assistant={assistant} />
         </HStack>
         <HStack alignItems="center" gap={8}>
@@ -159,16 +152,6 @@ export const NavbarIcon = styled.div`
   }
 `
 
-const TitleText = styled.span`
-  margin-left: 5px;
-  font-family: Ubuntu;
-  font-size: 12px;
-  user-select: none;
-  @media (max-width: 1080px) {
-    display: none;
-  }
-`
-
 const NarrowIcon = styled(NavbarIcon)`
   @media (max-width: 1000px) {
     display: none;