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/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';
 }

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;

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<Props> = ({ assistant, setActiveTopic }) => {
             <TextCount>
               <Tooltip title={t('chat.input.context_count.tip') + ' | ' + t('chat.input.estimated_tokens.tip')}>
                 <StyledTag>
-                  ⊙ {contextCount}
+                  <span style={isWindows ? { fontFamily: 'serif', marginRight: 2 } : { marginRight: 3 }}>⊙</span>
+                  {contextCount}
                   <Divider type="vertical" style={{ marginTop: 2, marginLeft: 5, marginRight: 5 }} />↑{inputTokenCount}
                   <span style={{ margin: '0 2px', fontSize: 10 }}>/</span>
                   {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

src/renderer/src/pages/home/Markdown/CodeBlock.tsx

@@ -37,7 +37,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) =
   }
 
   return match ? (
-    <div>
+    <>
       <CodeHeader>
         <CodeLanguage>{'<' + match[1].toUpperCase() + '>'}</CodeLanguage>
         {!copied && <CopyIcon className="copy" onClick={onCopy} />}
@@ -51,11 +51,15 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) =
         customStyle={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginTop: 0 }}>
         {String(children).replace(/\n$/, '')}
       </SyntaxHighlighter>
-    </div>
+    </>
   ) : (
-    <code {...rest} className={className}>
+    <SyntaxHighlighter
-      {children}
+      {...rest}
-    </code>
+      style={theme === ThemeMode.dark ? atomDark : oneLight}
+      wrapLongLines={true}
+      customStyle={{ border: '0.5px solid var(--color-border)', padding: '8px 12px' }}>
+      {String(children).replace(/\n$/, '')}
+    </SyntaxHighlighter>
   )
 }
 

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

@@ -132,7 +132,7 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
 
   if (message.type === 'clear') {
     return (
-      <Divider dashed style={{ padding: '0 20px' }}>
+      <Divider dashed style={{ padding: '0 20px' }} plain>
         {t('chat.message.new.context')}
       </Divider>
     )

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<Props> = ({ activeAssistant, setActiveAssistant, setActiv
           </NewButton>
         </NavbarCenter>
       )}
-      <NavbarRight style={{ justifyContent: 'space-between', paddingRight: isWindows ? 136 : 12, flex: 1 }}>
+      <NavbarRight style={{ justifyContent: 'space-between', paddingRight: isWindows ? 140 : 12, flex: 1 }}>
         <HStack alignItems="center">
           {!showAssistants && (topicPosition === 'left' ? !showTopics : true) && (
             <NewButton
@@ -98,12 +97,13 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, setActiv
           <SelectModelButton assistant={assistant} />
         </HStack>
         <HStack alignItems="center">
-          <ThemeSwitch
+          <NewButton onClick={toggleTheme} style={{ marginRight: 3 }}>
-            checkedChildren={<i className="iconfont icon-theme icon-dark1" />}
+            {theme === 'dark' ? (
-            unCheckedChildren={<i className="iconfont icon-theme icon-theme-light" />}
+              <i className="iconfont icon-theme icon-theme-light" />
-            checked={theme === 'dark'}
+            ) : (
-            onChange={toggleTheme}
+              <i className="iconfont icon-a-darkmode" />
-          />
+            )}
+          </NewButton>
           {topicPosition === 'right' && (
             <NewButton onClick={toggleShowTopics}>
               <i className={`iconfont icon-${showTopics ? 'show' : 'hide'}-sidebar`} />
@@ -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,10 +129,13 @@ export const NewButton = styled.div`
   .iconfont {
     font-size: 19px;
     color: var(--color-icon);
-  }
+    &.icon-a-addchat {
-  .icon-a-addchat {
       font-size: 20px;
     }
+    &.icon-a-darkmode {
+      font-size: 20px;
+    }
+  }
   .anticon {
     color: var(--color-icon);
     font-size: 17px;
@@ -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