feat(gpt-runner-web): optimize styles

nicepkg · Aug 8, 2023 · 3206c88 · 3206c88
1 parent 9a7b80b
commit 3206c88
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 14 deletions.
diff --git a/packages/gpt-runner-web/client/src/components/chat-message-item/chat-message-item.styles.ts b/packages/gpt-runner-web/client/src/components/chat-message-item/chat-message-item.styles.ts
@@ -6,8 +6,8 @@ export const MsgWrapper = styled.div<{ $isMe: boolean }>`
   margin-bottom: 1rem;
 `
 
-export const MsgAvatarWrapper = styled.div<{ $isMe: boolean; $showAvatar: boolean }>`
-  display: ${({ $showAvatar }) => $showAvatar ? 'flex' : 'none'};
+export const MsgAvatarWrapper = styled.div<{ $isMe: boolean }>`
+  display: flex;
   width: 2rem;
   height: 2rem;
   justify-content: center;
@@ -23,6 +23,7 @@ export const MsgContentWrapper = styled.div<{ $isMe: boolean }>`
   flex-direction: ${({ $isMe }) => $isMe ? 'row-reverse' : 'row'};
   width: 100%;
   position: relative;
+  max-width: calc(100% - 6rem);
 `
 
 export const MsgContent = styled.div<{ $isMe: boolean }>`

diff --git a/packages/gpt-runner-web/client/src/components/chat-message-item/index.tsx b/packages/gpt-runner-web/client/src/components/chat-message-item/index.tsx
@@ -12,7 +12,6 @@ export interface BuildMessageToolbarState extends SingleChatMessage {
 }
 export interface MessageItemProps extends SingleChatMessage, Partial<MessageTextViewProps> {
   status: ChatMessageStatus
-  showAvatar?: boolean
   style?: React.CSSProperties
   buildMessageToolbar?: (state: BuildMessageToolbarState) => React.ReactNode
 }
@@ -23,7 +22,6 @@ export const MessageItem: FC<MessageItemProps> = memo((props) => {
     text,
     status,
     style,
-    showAvatar = false,
     buildCodeToolbar,
     buildMessageToolbar,
     ...messageTextViewProps
@@ -33,15 +31,10 @@ export const MessageItem: FC<MessageItemProps> = memo((props) => {
 
   return (
     <MsgWrapper style={style} $isMe={name === ChatRole.User}>
-      <MsgAvatarWrapper $showAvatar={showAvatar} $isMe={name === ChatRole.User}>
+      <MsgAvatarWrapper $isMe={name === ChatRole.User}>
         <Icon className={clsx(name === ChatRole.User ? 'codicon-account' : 'codicon-github')} />
       </MsgAvatarWrapper>
-      <MsgContentWrapper
-        $isMe={name === ChatRole.User}
-        style={{
-          maxWidth: showAvatar ? 'calc(100% - 6rem)' : '100%',
-        }}
-      >
+      <MsgContentWrapper $isMe={name === ChatRole.User} >
         <MsgContent $isMe={name === ChatRole.User}>
           <MessageTextView
             contents={contents}

diff --git a/...ages/gpt-runner-web/client/src/components/chat-message-panel/chat-message-panel.styles.ts b/...ages/gpt-runner-web/client/src/components/chat-message-panel/chat-message-panel.styles.ts
@@ -4,7 +4,7 @@ export const Panel = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1;
-  padding: 0.5rem;
+  padding: 0.5rem 0;
   user-select: text;
   overflow-x: hidden;
   overflow-y: auto;

diff --git a/packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/index.tsx b/packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/index.tsx
@@ -323,7 +323,6 @@ export const ChatPanel: FC<ChatPanelProps> = memo((props) => {
           ...message,
           remarkPlugins,
           status: isLast ? status : ChatMessageStatus.Success,
-          showAvatar: chatPanelWidth > 600,
           theme: codeBlockTheme,
           buildCodeToolbar: status === ChatMessageStatus.Pending ? undefined : buildCodeToolbar,
           buildMessageToolbar,
@@ -333,7 +332,6 @@ export const ChatPanel: FC<ChatPanelProps> = memo((props) => {
   }, [
     chatInstance?.messages,
     status,
-    chatPanelWidth,
     remarkPlugins,
     codeBlockTheme,
     buildCodeToolbar,

diff --git a/packages/gpt-runner-web/client/src/styles/markdown.styles.ts b/packages/gpt-runner-web/client/src/styles/markdown.styles.ts
@@ -134,6 +134,7 @@ export const MarkdownStyle = createGlobalStyle`
     }
     ul, ol {
       padding-left: 30px;
+      overflow: auto;
     }
 
     ul :first-child, ol :first-child {