feat: hide window title

src/main/index.ts

@@ -24,7 +24,12 @@ function createWindow() {
     minHeight: 500,
     show: true,
     autoHideMenuBar: true,
-    titleBarStyle: 'hiddenInset',
+    titleBarStyle: 'hidden',
+    titleBarOverlay: {
+      height: 41,
+      color: '#1f1f1f',
+      symbolColor: '#eee'
+    },
     trafficLightPosition: { x: 8, y: 12 },
     ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {

src/renderer/src/components/app/Navbar.tsx

@@ -30,7 +30,6 @@ const NavbarContainer = styled.div`
   margin-left: calc(var(--sidebar-width) * -1);
   padding-left: var(--sidebar-width);
   border-bottom: 0.5px solid var(--color-border);
-  border-top: 0.5px solid var(--color-border);
 `
 
 const NavbarLeftContainer = styled.div`

src/renderer/src/components/app/Sidebar.tsx

@@ -13,7 +13,7 @@ const Sidebar: FC = () => {
 
   return (
     <Container style={isWindows ? { paddingTop: 0 } : {}}>
-      {isMac && <PlaceholderBorder />}
+      {isMac ? <PlaceholderBorderMac /> : <PlaceholderBorderWin />}
       <StyledLink to="/">
         <AvatarImg src={avatar || Logo} draggable={false} />
       </StyledLink>
@@ -52,7 +52,6 @@ const Container = styled.div`
   -webkit-app-region: drag !important;
   background-color: #1f1f1f;
   border-right: 0.5px solid var(--color-border);
-  border-top: 0.5px solid var(--color-border);
   padding-top: var(--navbar-height);
   position: relative;
 `
@@ -115,7 +114,7 @@ const StyledLink = styled(Link)`
   }
 `
 
-const PlaceholderBorder = styled.div`
+const PlaceholderBorderMac = styled.div`
   width: var(--sidebar-width);
   height: var(--navbar-height);
   border-right: 1px solid #1f1f1f;
@@ -125,4 +124,13 @@ const PlaceholderBorder = styled.div`
   left: 0.5px;
 `
 
+const PlaceholderBorderWin = styled.div`
+  width: var(--sidebar-width);
+  height: var(--navbar-height);
+  position: absolute;
+  border-right: 1px solid #1f1f1f;
+  top: 0;
+  right: -1px;
+`
+
 export default Sidebar

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

@@ -9,8 +9,7 @@ import { useShowAssistants, useShowRightSidebar } from '@renderer/hooks/useStore
 import { Tooltip } from 'antd'
 import Navigation from './components/NavigationCenter'
 import { useTranslation } from 'react-i18next'
-import { PlusCircleOutlined } from '@ant-design/icons'
+import { isMac, isWindows } from '@renderer/config/constant'
-import { isMac } from '@renderer/config/constant'
 
 const HomePage: FC = () => {
   const { assistants, addAssistant } = useAssistants()
@@ -35,12 +34,12 @@ const HomePage: FC = () => {
               <i className="iconfont icon-hidesidebarhoriz" />
             </NewButton>
             <NewButton onClick={onCreateAssistant}>
-              <PlusCircleOutlined />
+              <i className="iconfont icon-a-addchat"></i>
             </NewButton>
           </NavbarLeft>
         )}
         <Navigation activeAssistant={activeAssistant} />
-        <NavbarRight style={{ justifyContent: 'flex-end', padding: '0 7px' }}>
+        <NavbarRight style={{ justifyContent: 'flex-end', paddingRight: isWindows ? 140 : 8 }}>
           <Tooltip
             placement="left"
             title={showRightSidebar ? t('assistant.topics.hide_topics') : t('assistant.topics.show_topics')}
@@ -88,6 +87,9 @@ export const NewButton = styled.div`
   align-items: center;
   transition: all 0.2s ease-in-out;
   color: var(--color-icon);
+  .icon-a-addchat {
+    font-size: 20px;
+  }
   .anticon {
     font-size: 19px;
   }

src/renderer/src/pages/home/components/Assistants.tsx

@@ -147,7 +147,7 @@ const AssistantItem = styled.div`
 const AssistantName = styled.div`
   font-size: 14px;
   color: var(--color-text-1);
-  font-weight: bold;
+  font-weight: 600;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;

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

@@ -4,9 +4,9 @@ import {
   FullscreenExitOutlined,
   FullscreenOutlined,
   HistoryOutlined,
-  MessageOutlined,
   MoreOutlined,
-  PauseCircleOutlined
+  PauseCircleOutlined,
+  PlusCircleOutlined
 } from '@ant-design/icons'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
@@ -134,7 +134,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
         <ToolbarMenu>
           <Tooltip placement="top" title={t('assistant.input.new_chat')} arrow>
             <ToolbarButton type="text" onClick={addNewTopic}>
-              <MessageOutlined />
+              <PlusCircleOutlined />
             </ToolbarButton>
           </Tooltip>
           <Tooltip placement="top" title={t('assistant.input.topics')} arrow>

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

@@ -14,7 +14,6 @@ import { firstLetter } from '@renderer/utils'
 import { useTranslation } from 'react-i18next'
 import { isEmpty, upperFirst } from 'lodash'
 import dayjs from 'dayjs'
-import { useAppSelector } from '@renderer/store'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
 
@@ -29,12 +28,10 @@ interface Props {
 const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) => {
   const avatar = useAvatar()
   const { t } = useTranslation()
-  const generating = useAppSelector((state) => state.runtime.generating)
   const { assistant } = useAssistant(message.assistantId)
   const { userName, showMessageDivider } = useSettings()
 
   const isLastMessage = index === 0
-  const isUserMessage = message.role === 'user'
   const canRegenerate = isLastMessage && message.role === 'assistant'
 
   const onCopy = () => {
@@ -81,10 +78,8 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
     return userName || t('common.you')
   }
 
-  const borderBottom = (isLastMessage && !isUserMessage) || generating || !showMessageDivider ? 'none' : undefined
-
   return (
-    <MessageContainer key={message.id} style={{ borderBottom }}>
+    <MessageContainer key={message.id} className="message" style={{ border: showMessageDivider ? undefined : 'none' }}>
       <MessageHeader>
         <AvatarWrapper>
           {message.role === 'assistant' ? (

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

@@ -120,6 +120,9 @@ const Container = styled.div`
   max-height: calc(100vh - var(--input-bar-height) - var(--navbar-height));
   padding-top: 10px;
   padding-bottom: 20px;
+  .message:first-child {
+    border: none;
+  }
 `
 
 export default Messages