feat: optimize message style

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

@@ -33,6 +33,7 @@
   --color-border: #ffffff20;
   --color-error: #f44336;
 
+  --navbar-background: #1f1f1f;
   --navbar-height: 42px;
   --sidebar-width: 55px;
   --assistants-width: 250px;

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

@@ -26,7 +26,7 @@ const NavbarContainer = styled.div`
   min-height: var(--navbar-height);
   max-height: var(--navbar-height);
   -webkit-app-region: drag;
-  background-color: #1f1f1f;
+  background-color: var(--navbar-background);
   margin-left: calc(var(--sidebar-width) * -1);
   padding-left: var(--sidebar-width);
   border-bottom: 0.5px solid var(--color-border);

src/renderer/src/config/provider.ts

@@ -15,7 +15,7 @@ import ChatGPTModelLogo from '@renderer/assets/images/models/chatgpt.jpeg'
 import ChatGLMModelLogo from '@renderer/assets/images/models/chatglm.jpeg'
 import DeepSeekModelLogo from '@renderer/assets/images/models/deepseek.png'
 import GemmaModelLogo from '@renderer/assets/images/models/gemma.jpeg'
-import QwenModelLogo from '@renderer/assets/images/models/qwen.jpeg'
+import QwenModelLogo from '@renderer/assets/images/models/qwen.png'
 import YiModelLogo from '@renderer/assets/images/models/yi.svg'
 import LlamaModelLogo from '@renderer/assets/images/models/llama.jpeg'
 import MixtralModelLogo from '@renderer/assets/images/models/mixtral.jpeg'

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

@@ -83,11 +83,11 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
       <MessageHeader>
         <AvatarWrapper>
           {message.role === 'assistant' ? (
-            <Avatar src={message.modelId ? getModelLogo(message.modelId) : Logo}>
+            <Avatar src={message.modelId ? getModelLogo(message.modelId) : Logo} size={35}>
               {firstLetter(message.modelId).toUpperCase()}
             </Avatar>
           ) : (
-            <Avatar src={avatar} />
+            <Avatar src={avatar} size={35} />
           )}
           <UserWrap>
             <UserName>{getUserName()}</UserName>
@@ -147,9 +147,9 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
 const MessageContainer = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 10px 18px;
+  padding: 10px;
   position: relative;
-  border-bottom: 0.5px solid var(--color-border);
+  border-bottom: 0.5px dotted var(--color-border);
   .menubar {
     opacity: 0;
     transition: opacity 0.2s ease;
@@ -171,7 +171,6 @@ const MessageContainer = styled.div`
 
 const MessageHeader = styled.div`
   margin-right: 10px;
-  margin-bottom: 10px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -187,20 +186,19 @@ const AvatarWrapper = styled.div`
 
 const UserWrap = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
-  align-items: center;
+  justify-content: space-between;
-`
-
-const MessageTime = styled.div`
-  font-size: 12px;
-  color: var(--color-text-2);
   margin-left: 12px;
 `
 
 const UserName = styled.div`
   font-size: 14px;
   font-weight: 600;
-  margin-left: 12px;
+`
+
+const MessageTime = styled.div`
+  font-size: 12px;
+  color: var(--color-text-3);
 `
 
 const MessageContent = styled.div`
@@ -208,6 +206,8 @@ const MessageContent = styled.div`
   flex: 1;
   flex-direction: column;
   justify-content: space-between;
+  margin-left: 46px;
+  margin-top: 5px;
 `
 
 const MessageContentLoading = styled.div`

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

@@ -119,7 +119,7 @@ const Container = styled.div`
   flex-direction: column-reverse;
   max-height: calc(100vh - var(--input-bar-height) - var(--navbar-height));
   padding-top: 10px;
-  padding-bottom: 20px;
+  padding-bottom: 10px;
   .message:first-child {
     border: none;
   }