From f3bafbeb52638f31d0195b8b491897637323acec Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Fri, 6 Sep 2024 15:41:46 +0800 Subject: [PATCH] feat: Update UI components and styling for consistency and readability. - Updated icon font asset reference URL to reflect a new timestamp. - Updated icon-fonts file asset. - Updated markdown styling to adjust margins and padding of pre-formatted text elements. - Added Windows-specific styling to the Inputbar component. - Improved the rendering of code blocks with a focus on readability and theming consistency. - Added new 'plain' attribute to Divider component for 'clear' message type. - Minor adjustments made to the navigation bar styles and layout. --- .../src/assets/fonts/icon-fonts/iconfont.css | 6 ++- .../assets/fonts/icon-fonts/iconfont.woff2 | Bin 3432 -> 3644 bytes src/renderer/src/assets/styles/markdown.scss | 4 +- .../src/pages/home/Inputbar/Inputbar.tsx | 7 +++- .../src/pages/home/Markdown/CodeBlock.tsx | 14 ++++--- .../src/pages/home/Messages/Message.tsx | 2 +- src/renderer/src/pages/home/Navbar.tsx | 35 ++++++++---------- 7 files changed, 39 insertions(+), 29 deletions(-) diff --git a/src/renderer/src/assets/fonts/icon-fonts/iconfont.css b/src/renderer/src/assets/fonts/icon-fonts/iconfont.css index f5f32a319b..eddc69d790 100644 --- a/src/renderer/src/assets/fonts/icon-fonts/iconfont.css +++ b/src/renderer/src/assets/fonts/icon-fonts/iconfont.css @@ -1,6 +1,6 @@ @font-face { font-family: 'iconfont'; /* Project id 4563475 */ - src: url('iconfont.woff2?t=1725587595482') format('woff2'); + src: url('iconfont.woff2?t=1725606177995') format('woff2'); } .iconfont { @@ -11,6 +11,10 @@ -moz-osx-font-smoothing: grayscale; } +.icon-a-darkmode:before { + content: '\e6cd'; +} + .icon-ai-model:before { content: '\e827'; } diff --git a/src/renderer/src/assets/fonts/icon-fonts/iconfont.woff2 b/src/renderer/src/assets/fonts/icon-fonts/iconfont.woff2 index d9327f93217288ebb4af3605df1fec8bdc812f63..067b1a9d9613adb1bd7fc55591dba9253c80587d 100644 GIT binary patch literal 3644 zcmV-C4#V+xPew8T0RR9101i9=3jhEB02;^u01fT{0RR9100000000000000000000 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 KLS`SV5C8yXbDSXn diff --git a/src/renderer/src/assets/styles/markdown.scss b/src/renderer/src/assets/styles/markdown.scss index bc41416883..81c313fa18 100644 --- a/src/renderer/src/assets/styles/markdown.scss +++ b/src/renderer/src/assets/styles/markdown.scss @@ -72,6 +72,9 @@ li { margin-bottom: 0.5em; + pre { + margin: 1.5em 0; + } &::marker { color: var(--color-text-3); } @@ -106,7 +109,6 @@ pre { white-space: pre-wrap !important; - padding: 1em 0; border-radius: 5px; overflow-x: auto; font-family: 'Fira Code', 'Courier New', Courier, monospace; diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx index 4c4c208069..f44a9ef4fc 100644 --- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx +++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx @@ -8,6 +8,7 @@ import { PauseCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons' +import { isWindows } from '@renderer/config/constant' import { useAssistant } from '@renderer/hooks/useAssistant' import { useSettings } from '@renderer/hooks/useSettings' import { useShowTopics } from '@renderer/hooks/useStore' @@ -263,7 +264,8 @@ const Inputbar: FC = ({ assistant, setActiveTopic }) => { - ⊙ {contextCount} + ⊙ + {contextCount} ↑{inputTokenCount} / {estimateTokenCount} @@ -379,6 +381,9 @@ const StyledTag = styled(Tag)` padding: 2px 8px; border-width: 0.5; margin: 0; + height: 25px; + font-size: 12px; + line-height: 16px; ` export default Inputbar diff --git a/src/renderer/src/pages/home/Markdown/CodeBlock.tsx b/src/renderer/src/pages/home/Markdown/CodeBlock.tsx index ecf4d698f1..48103ac466 100644 --- a/src/renderer/src/pages/home/Markdown/CodeBlock.tsx +++ b/src/renderer/src/pages/home/Markdown/CodeBlock.tsx @@ -37,7 +37,7 @@ const CodeBlock: React.FC = ({ children, className, ...rest }) = } return match ? ( -
+ <> {'<' + match[1].toUpperCase() + '>'} {!copied && } @@ -51,11 +51,15 @@ const CodeBlock: React.FC = ({ children, className, ...rest }) = customStyle={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginTop: 0 }}> {String(children).replace(/\n$/, '')} -
+ ) : ( - - {children} - + + {String(children).replace(/\n$/, '')} + ) } diff --git a/src/renderer/src/pages/home/Messages/Message.tsx b/src/renderer/src/pages/home/Messages/Message.tsx index b506faf5d5..bb2a7bff03 100644 --- a/src/renderer/src/pages/home/Messages/Message.tsx +++ b/src/renderer/src/pages/home/Messages/Message.tsx @@ -132,7 +132,7 @@ const MessageItem: FC = ({ message, index, showMenu, onDeleteMessage }) = if (message.type === 'clear') { return ( - + {t('chat.message.new.context')} ) diff --git a/src/renderer/src/pages/home/Navbar.tsx b/src/renderer/src/pages/home/Navbar.tsx index 24f62ef584..19d48d91fb 100644 --- a/src/renderer/src/pages/home/Navbar.tsx +++ b/src/renderer/src/pages/home/Navbar.tsx @@ -10,7 +10,6 @@ import { useSettings } from '@renderer/hooks/useSettings' import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore' import { getDefaultTopic } from '@renderer/services/assistant' import { Assistant, Topic } from '@renderer/types' -import { Switch } from 'antd' import { FC, useCallback } from 'react' import { useTranslation } from 'react-i18next' import styled from 'styled-components' @@ -80,7 +79,7 @@ const HeaderNavbar: FC = ({ activeAssistant, setActiveAssistant, setActiv )} - + {!showAssistants && (topicPosition === 'left' ? !showTopics : true) && ( = ({ activeAssistant, setActiveAssistant, setActiv - } - unCheckedChildren={} - checked={theme === 'dark'} - onChange={toggleTheme} - /> + + {theme === 'dark' ? ( + + ) : ( + + )} + {topicPosition === 'right' && ( @@ -119,7 +119,7 @@ export const NewButton = styled.div` -webkit-app-region: none; border-radius: 4px; height: 30px; - padding: 0 8px; + padding: 0 7px; display: flex; flex-direction: row; justify-content: center; @@ -129,9 +129,12 @@ export const NewButton = styled.div` .iconfont { font-size: 19px; color: var(--color-icon); - } - .icon-a-addchat { - font-size: 20px; + &.icon-a-addchat { + font-size: 20px; + } + &.icon-a-darkmode { + font-size: 20px; + } } .anticon { color: var(--color-icon); @@ -150,12 +153,4 @@ const TitleText = styled.span` font-weight: 500; ` -const ThemeSwitch = styled(Switch)` - -webkit-app-region: no-drag; - margin-right: 10px; - .icon-theme { - font-size: 14px; - } -` - export default HeaderNavbar