feat(gpt-runner-web): optimize css

nicepkg · Jun 21, 2023 · 28b6c37 · 28b6c37
1 parent 9240042
commit 28b6c37
Show file tree

Hide file tree

Showing 7 changed files with 310 additions and 23 deletions.
diff --git a/packages/gpt-runner-web/client/src/components/chat-message-code-block/code-style.ts b/packages/gpt-runner-web/client/src/components/chat-message-code-block/code-style.ts
@@ -0,0 +1,288 @@
+// @flow
+
+import type { SyntaxHighlighterProps } from 'react-syntax-highlighter'
+
+// import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
+// Converted automatically using ./tools/themeFromVsCode
+export const vscodeDarkPlus: SyntaxHighlighterProps['style'] = {
+  'pre[class*="language-"]': {
+    color: '#d4d4d4',
+    fontSize: '13px',
+    textShadow: 'none',
+    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+    direction: 'ltr',
+    textAlign: 'left',
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    lineHeight: '1.5',
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: '4',
+    WebkitHyphens: 'none',
+    MozHyphens: 'none',
+    msHyphens: 'none',
+    hyphens: 'none',
+    padding: '1em',
+    margin: '.5em 0',
+    overflow: 'auto',
+    // background: '#1e1e1e',
+  },
+  'code[class*="language-"]': {
+    color: '#d4d4d4',
+    fontSize: '13px',
+    textShadow: 'none',
+    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+    direction: 'ltr',
+    textAlign: 'left',
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    lineHeight: '1.5',
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: '4',
+    WebkitHyphens: 'none',
+    MozHyphens: 'none',
+    msHyphens: 'none',
+    hyphens: 'none',
+  },
+  'pre[class*="language-"]::selection': {
+    textShadow: 'none',
+    background: '#264F78',
+  },
+  'code[class*="language-"]::selection': {
+    textShadow: 'none',
+    background: '#264F78',
+  },
+  'pre[class*="language-"] *::selection': {
+    textShadow: 'none',
+    background: '#264F78',
+  },
+  'code[class*="language-"] *::selection': {
+    textShadow: 'none',
+    background: '#264F78',
+  },
+  ':not(pre) > code[class*="language-"]': {
+    padding: '.1em .3em',
+    borderRadius: '.3em',
+    color: '#db4c69',
+    // background: '#1e1e1e',
+  },
+  '.namespace': {
+    opacity: '.7',
+  },
+  'doctype.doctype-tag': {
+    color: '#569CD6',
+  },
+  'doctype.name': {
+    color: '#9cdcfe',
+  },
+  'comment': {
+    color: '#6a9955',
+  },
+  'prolog': {
+    color: '#6a9955',
+  },
+  'punctuation': {
+    color: '#d4d4d4',
+  },
+  '.language-html .language-css .token.punctuation': {
+    color: '#d4d4d4',
+  },
+  '.language-html .language-javascript .token.punctuation': {
+    color: '#d4d4d4',
+  },
+  'property': {
+    color: '#9cdcfe',
+  },
+  'tag': {
+    color: '#569cd6',
+  },
+  'boolean': {
+    color: '#569cd6',
+  },
+  'number': {
+    color: '#b5cea8',
+  },
+  'constant': {
+    color: '#9cdcfe',
+  },
+  'symbol': {
+    color: '#b5cea8',
+  },
+  'inserted': {
+    color: '#b5cea8',
+  },
+  'unit': {
+    color: '#b5cea8',
+  },
+  'selector': {
+    color: '#d7ba7d',
+  },
+  'attr-name': {
+    color: '#9cdcfe',
+  },
+  'string': {
+    color: '#ce9178',
+  },
+  'char': {
+    color: '#ce9178',
+  },
+  'builtin': {
+    color: '#ce9178',
+  },
+  'deleted': {
+    color: '#ce9178',
+  },
+  '.language-css .token.string.url': {
+    textDecoration: 'underline',
+  },
+  'operator': {
+    color: '#d4d4d4',
+  },
+  'entity': {
+    color: '#569cd6',
+  },
+  'operator.arrow': {
+    color: '#569CD6',
+  },
+  'atrule': {
+    color: '#ce9178',
+  },
+  'atrule.rule': {
+    color: '#c586c0',
+  },
+  'atrule.url': {
+    color: '#9cdcfe',
+  },
+  'atrule.url.function': {
+    color: '#dcdcaa',
+  },
+  'atrule.url.punctuation': {
+    color: '#d4d4d4',
+  },
+  'keyword': {
+    color: '#569CD6',
+  },
+  'keyword.module': {
+    color: '#c586c0',
+  },
+  'keyword.control-flow': {
+    color: '#c586c0',
+  },
+  'function': {
+    color: '#dcdcaa',
+  },
+  'function.maybe-class-name': {
+    color: '#dcdcaa',
+  },
+  'regex': {
+    color: '#d16969',
+  },
+  'important': {
+    color: '#569cd6',
+  },
+  'italic': {
+    fontStyle: 'italic',
+  },
+  'class-name': {
+    color: '#4ec9b0',
+  },
+  'maybe-class-name': {
+    color: '#4ec9b0',
+  },
+  'console': {
+    color: '#9cdcfe',
+  },
+  'parameter': {
+    color: '#9cdcfe',
+  },
+  'interpolation': {
+    color: '#9cdcfe',
+  },
+  'punctuation.interpolation-punctuation': {
+    color: '#569cd6',
+  },
+  'variable': {
+    color: '#9cdcfe',
+  },
+  'imports.maybe-class-name': {
+    color: '#9cdcfe',
+  },
+  'exports.maybe-class-name': {
+    color: '#9cdcfe',
+  },
+  'escape': {
+    color: '#d7ba7d',
+  },
+  'tag.punctuation': {
+    color: '#808080',
+  },
+  'cdata': {
+    color: '#808080',
+  },
+  'attr-value': {
+    color: '#ce9178',
+  },
+  'attr-value.punctuation': {
+    color: '#ce9178',
+  },
+  'attr-value.punctuation.attr-equals': {
+    color: '#d4d4d4',
+  },
+  'namespace': {
+    color: '#4ec9b0',
+  },
+  'pre[class*="language-javascript"]': {
+    color: '#9cdcfe',
+  },
+  'code[class*="language-javascript"]': {
+    color: '#9cdcfe',
+  },
+  'pre[class*="language-jsx"]': {
+    color: '#9cdcfe',
+  },
+  'code[class*="language-jsx"]': {
+    color: '#9cdcfe',
+  },
+  'pre[class*="language-typescript"]': {
+    color: '#9cdcfe',
+  },
+  'code[class*="language-typescript"]': {
+    color: '#9cdcfe',
+  },
+  'pre[class*="language-tsx"]': {
+    color: '#9cdcfe',
+  },
+  'code[class*="language-tsx"]': {
+    color: '#9cdcfe',
+  },
+  'pre[class*="language-css"]': {
+    color: '#ce9178',
+  },
+  'code[class*="language-css"]': {
+    color: '#ce9178',
+  },
+  'pre[class*="language-html"]': {
+    color: '#d4d4d4',
+  },
+  'code[class*="language-html"]': {
+    color: '#d4d4d4',
+  },
+  '.language-regex .token.anchor': {
+    color: '#dcdcaa',
+  },
+  '.language-html .token.punctuation': {
+    color: '#808080',
+  },
+  'pre[class*="language-"] > code[class*="language-"]': {
+    position: 'relative',
+    zIndex: '1',
+  },
+  '.line-highlight.line-highlight': {
+    background: '#f7ebc6',
+    boxShadow: 'inset 5px 0 0 #f7d87c',
+    zIndex: '0',
+  },
+}
diff --git a/packages/gpt-runner-web/client/src/components/chat-message-code-block/index.tsx b/packages/gpt-runner-web/client/src/components/chat-message-code-block/index.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import { CodeBlockHeader, CodeBlockWrapper } from './chat-message-code-block.styles'
+import { vscodeDarkPlus } from './code-style'
 
 export interface BuildCodeToolbarState {
   contents: string
@@ -24,7 +24,7 @@ export const MessageCodeBlock: FC<MessageCodeBlockProps> = (props) => {
       <SyntaxHighlighter
         useInlineStyles={true}
         codeTagProps={{ style: {} }}
-        style={vscDarkPlus}
+        style={vscodeDarkPlus}
         language={language}
       >
         {contents}

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
@@ -1,5 +1,4 @@
-import { css, styled } from 'styled-components'
-import { withBreakpoint } from '../../helpers/with-breakpoint'
+import { styled } from 'styled-components'
 import type { MessageItemProps } from '.'
 
 export const MsgWrapper = styled.div<{ $isMe: boolean }>`
@@ -23,13 +22,8 @@ export const MsgAvatarWrapper = styled.div<{ $isMe: boolean; $showAvatar: boolea
 export const MsgContentWrapper = styled.div<{ $isMe: boolean }>`
   display: flex;
   flex-direction: ${({ $isMe }) => $isMe ? 'row-reverse' : 'row'};
-  max-width: 100%;
   width: 100%;
   position: relative;
-
-  ${withBreakpoint('lg', css`
-    max-width: calc(100% - 6rem);
-  `)}
 `
 
 export const MsgContent = styled.div<{ $showToolbar: MessageItemProps['showToolbar']; $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
@@ -61,7 +61,13 @@ export const MessageItem: FC<MessageItemProps> = (props) => {
       <MsgAvatarWrapper $showAvatar={showAvatar} $isMe={name === ChatRole.User}>
         <Icon className={clsx(name === ChatRole.User ? 'codicon-account' : 'codicon-github')} />
       </MsgAvatarWrapper>
-      <MsgContentWrapper ref={hoverContentRef} $isMe={name === ChatRole.User}>
+      <MsgContentWrapper
+        ref={hoverContentRef}
+        $isMe={name === ChatRole.User}
+        style={{
+          maxWidth: showAvatar ? 'calc(100% - 6rem)' : '100%',
+        }}
+      >
         {
           showToolbar === 'hover'
             ? (

diff --git a/packages/gpt-runner-web/client/src/components/icon-button/index.tsx b/packages/gpt-runner-web/client/src/components/icon-button/index.tsx
@@ -97,11 +97,11 @@ export const IconButton: FC<IconButtonProps> = (props) => {
 
   return <ButtonWrapper className={clsx('icon-button', className)} style={style} $hoverShowText={hoverShowText}>
     <VSCodeButton
-      {...otherProps}
       onClick={handleClick}
       appearance="secondary"
       ariaLabel={text}
       title={text}
+      {...otherProps}
       style={{
         ...buttonStyle,
         borderRadius: radius,

diff --git a/packages/gpt-runner-web/client/src/pages/chat/components/init-gpt-files/index.tsx b/packages/gpt-runner-web/client/src/pages/chat/components/init-gpt-files/index.tsx
@@ -5,7 +5,7 @@ import { IconButton } from '../../../../components/icon-button'
 import { initGptFiles } from '../../../../networks/gpt-files'
 import { getGlobalConfig } from '../../../../helpers/global-config'
 import { LoadingView } from '../../../../components/loading-view'
-import { StyledVSCodeTag, Title, Wrapper } from './init-gpt-files.styles'
+import { Badge, Title, Wrapper } from './init-gpt-files.styles'
 
 export interface InitGptFilesProps {
   rootPath: string
@@ -40,18 +40,19 @@ export const InitGptFiles: FC<InitGptFilesProps> = (props) => {
   return <Wrapper>
     <Title>
       There is no
-      <StyledVSCodeTag>xxx.gpt.md</StyledVSCodeTag>
+      <Badge>xxx.gpt.md</Badge>
       file in the current directory.
     </Title>
     <Title>
       Do you need to create a
-      <StyledVSCodeTag>./{GPT_RUNNER_OFFICIAL_FOLDER}/copilot.gpt.md</StyledVSCodeTag>
+      <Badge>./{GPT_RUNNER_OFFICIAL_FOLDER}/copilot.gpt.md</Badge>
       file?
     </Title>
     <IconButton
       text='Yes, Create'
       hoverShowText={false}
       iconClassName='codicon-new-file'
+      appearance='primary'
       onClick={handleCreate}></IconButton>
     {isLoading && <LoadingView absolute></LoadingView>}
   </Wrapper>