style(chat): 对话界面改为左右布局

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

@@ -34,6 +34,7 @@
   --color-icon-white: #ffffff;
   --color-border: #ffffff24;
   --color-border-soft: #ffffff20;
+  --color-border-mute: #ffffff11;
   --color-error: #f44336;
   --color-link: #1677ff;
   --color-code-background: #323232;
@@ -51,6 +52,10 @@
   --assistants-width: 275px;
   --topic-list-width: 275px;
   --settings-width: 250px;
+
+  --chat-background: #111111;
+  --chat-background-user: #28b561;
+  --chat-background-assistant: #2c2c2c;
 }
 
 body[theme-mode='light'] {
@@ -83,6 +88,7 @@ body[theme-mode='light'] {
   --color-icon-white: #000000;
   --color-border: #00000028;
   --color-border-soft: #00000028;
+  --color-border-mute: #00000011;
   --color-error: #f44336;
   --color-link: #1677ff;
   --color-code-background: #e3e3e3;
@@ -91,6 +97,10 @@ body[theme-mode='light'] {
 
   --navbar-background-mac: rgba(255, 255, 255, 0.6);
   --navbar-background: rgba(255, 255, 255);
+
+  --chat-background: #f3f3f3;
+  --chat-background-user: #95ec69;
+  --chat-background-assistant: #ffffff;
 }
 
 *,
@@ -156,7 +166,6 @@ body,
 body[os='mac'] {
   #content-container {
     border-top-left-radius: 10px;
-    border-bottom-left-radius: 10px;
     border-left: 0.5px solid var(--color-border);
     box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.05);
   }

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

@@ -52,7 +52,7 @@ const Container = styled.div`
   height: 100%;
   flex: 1;
   justify-content: space-between;
-  background-color: var(--color-background);
+  background-color: var(--chat-background);
 `
 
 const Main = styled(Flex)`

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

@@ -35,8 +35,9 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
   gap: 10px;
-  margin: 10px 20px;
+  padding: 10px 20px;
-  margin-right: 0;
+  background: var(--color-background);
+  border-top: 1px solid var(--color-border-mute);
 `
 
 export default AttachmentPreview

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

@@ -299,7 +299,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
           autoFocus
           contextMenu="true"
           variant="borderless"
-          rows={1}
+          rows={2}
           ref={textareaRef}
           style={{ fontSize }}
           styles={{ textarea: TextareaStyle }}
@@ -381,11 +381,10 @@ const TextareaStyle: CSSProperties = {
 }
 
 const InputBarContainer = styled.div`
-  border: 1px solid var(--color-border-soft);
+  border-top: 1px solid var(--color-border-mute);
   transition: all 0.3s ease;
   position: relative;
-  margin: 0 20px 15px 20px;
+  background: var(--color-background);
-  border-radius: 10px;
 `
 
 const Textarea = styled(TextArea)`

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

@@ -16,7 +16,7 @@ import styled from 'styled-components'
 import MessageContent from './MessageContent'
 import MessageHeader from './MessageHeader'
 import MessageMenubar from './MessageMenubar'
-import MessgeTokens from './MessageTokens'
+import MessageTokens from './MessageTokens'
 
 interface Props {
   message: Message
@@ -131,13 +131,23 @@ const MessageItem: FC<Props> = ({
   }
 
   return (
-    <MessageContainer key={message.id} className="message" ref={messageContainerRef}>
+    <MessageContainer
+      key={message.id}
+      className="message"
+      ref={messageContainerRef}
+      style={{
+        alignItems: isAssistantMessage ? 'start' : 'end'
+      }}>
       <MessageHeader message={message} assistant={assistant} model={model} />
-      <MessageContentContainer style={{ fontFamily, fontSize }}>
+      <MessageContentContainer
+        style={{
+          fontFamily,
+          fontSize,
+          background: isAssistantMessage ? 'var(--chat-background-assistant)' : 'var(--chat-background-user)'
+        }}>
         <MessageContent message={message} model={model} />
         {showMenubar && (
-          <MessageFooter style={{ border: messageBorder, flexDirection: isLastMessage ? 'row-reverse' : undefined }}>
+          <MessageFooter style={{ border: messageBorder }}>
-            <MessgeTokens message={message} isLastMessage={isLastMessage} />
             <MessageMenubar
               message={message}
               model={model}
@@ -148,6 +158,7 @@ const MessageItem: FC<Props> = ({
               onEditMessage={onEditMessage}
               onDeleteMessage={onDeleteMessage}
             />
+            <MessageTokens message={message} isLastMessage={isLastMessage} />
           </MessageFooter>
         )}
       </MessageContentContainer>
@@ -179,12 +190,14 @@ const MessageContainer = styled.div`
 `
 
 const MessageContentContainer = styled.div`
+  max-width: 100%;
   display: flex;
   flex: 1;
   flex-direction: column;
   justify-content: space-between;
-  margin-left: 46px;
+  margin: 5px 0;
-  margin-top: 5px;
+  border-radius: 8px;
+  padding: 10px 15px 0 15px;
 `
 
 const MessageFooter = styled.div`
@@ -195,6 +208,7 @@ const MessageFooter = styled.div`
   padding: 2px 0;
   margin-top: 2px;
   border-top: 0.5px dashed var(--color-border);
+  gap: 20px;
 `
 
 export default memo(MessageItem)

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

@@ -47,7 +47,11 @@ const MessageHeader: FC<Props> = ({ assistant, model, message }) => {
 
   return (
     <Container>
-      <AvatarWrapper>
+      <AvatarWrapper
+        style={{
+          flexDirection: isAssistantMessage ? 'row' : 'row-reverse',
+          textAlign: isAssistantMessage ? 'left' : 'right'
+        }}>
         {isAssistantMessage ? (
           <Avatar
             src={avatarSource}
@@ -79,25 +83,23 @@ const MessageHeader: FC<Props> = ({ assistant, model, message }) => {
 }
 
 const Container = styled.div`
-  margin-right: 10px;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding-bottom: 4px;
-  justify-content: space-between;
 `
 
 const AvatarWrapper = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 10px;
 `
 
 const UserWrap = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  margin-left: 12px;
 `
 
 const UserName = styled.div`

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

@@ -217,7 +217,6 @@ const Container = styled(Scrollbar)`
   display: flex;
   flex-direction: column-reverse;
   padding: 10px 0;
-  background-color: var(--color-background);
   padding-bottom: 20px;
   overflow-x: hidden;
 `

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

@@ -26,7 +26,7 @@ const Prompt: FC<Props> = ({ assistant }) => {
 
 const Container = styled.div`
   padding: 10px 20px;
-  background-color: var(--color-background-soft);
+  background-color: var(--chat-background-assistant);
   margin-bottom: 20px;
   margin: 0 20px 0 20px;
   border-radius: 6px;