feat: add country flag emoji support and enhance UI components (#7646)

* feat: add country flag emoji support and enhance UI components

* Added country-flag-emoji-polyfill to package.json and yarn.lock
* Integrated polyfill in AddAgentPopup, GeneralSettings, and AssistantPromptSettings components
* Updated emoji rendering styles for better visual consistency

* fix: update country flag emoji polyfill to use 'Twemoji Country Flags'

* feat: enhance emoji components with country flag support

* Integrated country-flag-emoji-polyfill in EmojiIcon, EmojiPicker, and AssistantItem components.
* Updated font-family styles across various components for consistent emoji rendering.
* Removed redundant polyfill calls from AddAgentPopup and AssistantPromptSettings.

* refactor: streamline country flag emoji integration

* Removed redundant polyfill calls from EmojiIcon, AssistantItem, and GeneralSettings components.
* Updated EmojiPicker to use a local font file for country flag emojis.
* Added country flag font import in index.scss for improved styling consistency.

* format code

* refactor: standardize country flag font usage across components

* Introduced a new CSS class for country flag font to streamline styling.
* Updated various components (GeneralSettings, EmojiIcon, EmojiAvatar, AssistantPromptSettings, TranslatePage) to utilize the new class for consistent font application.
* Removed inline font-family styles to enhance maintainability.

* refactor: update font styles for improved consistency and maintainability

* Added Windows-specific font configuration in font.scss for better emoji rendering.
* Removed inline font-family styles from various components (EmojiAvatar, GeneralSettings, AssistantPromptSettings, TranslatePage) to enhance code clarity and maintainability.

* refactor: remove inline font-family styles from EmojiIcon for improved maintainability

package.json

@@ -141,6 +141,7 @@
     "axios": "^1.7.3",
     "browser-image-compression": "^2.0.2",
     "color": "^5.0.0",
+    "country-flag-emoji-polyfill": "0.1.8",
     "dayjs": "^1.11.11",
     "dexie": "^4.0.8",
     "dexie-react-hooks": "^1.1.7",

src/renderer/src/assets/fonts/country-flag-fonts/flag.css

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: 'Twemoji Country Flags';
+  unicode-range:
+    U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
+  /*https://github.com/beyondkmp/country-flag-emoji-polyfill/blob/master/font/TwemojiCountryFlags.woff2 */
+  src: url('TwemojiCountryFlags.woff2') format('woff2');
+  font-display: swap;
+}
+
+/* 国旗字体样式类 */
+.country-flag-font {
+  font-family: 'Twemoji Country Flags', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
+}

src/renderer/src/assets/styles/font.scss

@@ -1,12 +1,20 @@
-:root {
+:root {
-  --font-family:
+  --font-family:
-    Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen, Cantarell, 'Open Sans',
+    Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen, Cantarell, 'Open Sans',
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-    'Noto Color Emoji';
+    'Noto Color Emoji';
-
+
-  --font-family-serif:
+  --font-family-serif:
-    serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Ubuntu, Roboto, Oxygen, Cantarell, 'Open Sans',
+    serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Ubuntu, Roboto, Oxygen, Cantarell, 'Open Sans',
-    'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-
+
-  --code-font-family: 'Cascadia Code', 'Fira Code', 'Consolas', Menlo, Courier, monospace;
+  --code-font-family: 'Cascadia Code', 'Fira Code', 'Consolas', Menlo, Courier, monospace;
-}
+}
+
+// Windows系统专用字体配置
+body[os='windows'] {
+  --font-family:
+    'Twemoji Country Flags', Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen,
+    Cantarell, 'Open Sans', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+}

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

@@ -7,6 +7,7 @@
 @use './animation.scss';
 @import '../fonts/icon-fonts/iconfont.css';
 @import '../fonts/ubuntu/ubuntu.css';
+@import '../fonts/country-flag-fonts/flag.css';
 
 *,
 *::before,

src/renderer/src/components/Avatar/EmojiAvatar.tsx

@@ -44,6 +44,7 @@ const StyledEmojiAvatar = styled.div<{ $size: number; $fontSize: number }>`
   height: ${(props) => props.$size}px;
   font-size: ${(props) => props.$fontSize}px;
   transition: opacity 0.3s ease;
+
   &:hover {
     opacity: 0.8;
   }

src/renderer/src/components/EmojiPicker/index.tsx

@@ -1,4 +1,6 @@
+import TwemojiCountryFlagsWoff2 from '@renderer/assets/fonts/country-flag-fonts/TwemojiCountryFlags.woff2?url'
 import { useTheme } from '@renderer/context/ThemeProvider'
+import { polyfillCountryFlagEmojis } from 'country-flag-emoji-polyfill'
 import { FC, useEffect, useRef } from 'react'
 
 interface Props {
@@ -9,6 +11,10 @@ const EmojiPicker: FC<Props> = ({ onEmojiClick }) => {
   const { theme } = useTheme()
   const ref = useRef<HTMLDivElement>(null)
 
+  useEffect(() => {
+    polyfillCountryFlagEmojis('Twemoji Mozilla', TwemojiCountryFlagsWoff2)
+  }, [])
+
   useEffect(() => {
     if (ref.current) {
       ref.current.addEventListener('emoji-click', (event: any) => {

src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx

@@ -65,7 +65,15 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant }
       <HStack gap={8} alignItems="center">
         <Popover content={<EmojiPicker onEmojiClick={handleEmojiSelect} />} arrow trigger="click">
           <EmojiButtonWrapper>
-            <Button style={{ fontSize: 18, padding: '4px', minWidth: '28px', height: '28px' }}>{emoji}</Button>
+            <Button
+              style={{
+                fontSize: 18,
+                padding: '4px',
+                minWidth: '28px',
+                height: '28px'
+              }}>
+              {emoji}
+            </Button>
             {emoji && (
               <CloseCircleFilled
                 className="delete-icon"

yarn.lock

@@ -5716,6 +5716,7 @@ __metadata:
     axios: "npm:^1.7.3"
     browser-image-compression: "npm:^2.0.2"
     color: "npm:^5.0.0"
+    country-flag-emoji-polyfill: "npm:0.1.8"
     dayjs: "npm:^1.11.11"
     dexie: "npm:^4.0.8"
     dexie-react-hooks: "npm:^1.1.7"
@@ -7380,6 +7381,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"country-flag-emoji-polyfill@npm:0.1.8":
+  version: 0.1.8
+  resolution: "country-flag-emoji-polyfill@npm:0.1.8"
+  checksum: 10c0/aac74de7df236bfc64d33438e29ab4c9eec314370b48f2e7aabb052a57fd3bc939e41afdcad0069987f18509aaf4b34d9e44327d0284fa2afabe97129f25cd89
+  languageName: node
+  linkType: hard
+
 "crc-32@npm:^1.2.0":
   version: 1.2.2
   resolution: "crc-32@npm:1.2.2"