feat: Add capabilities for user to load custom CSS #548

src/renderer/src/hooks/useAppInit.ts

@@ -16,8 +16,16 @@ import useUpdateHandler from './useUpdateHandler'
 
 export function useAppInit() {
   const dispatch = useAppDispatch()
-  const { proxyUrl, language, windowStyle, manualUpdateCheck, proxyMode, webdavAutoSync, webdavSyncInterval } =
-    useSettings()
+  const {
+    proxyUrl,
+    language,
+    windowStyle,
+    manualUpdateCheck,
+    proxyMode,
+    webdavAutoSync,
+    webdavSyncInterval,
+    customCss
+  } = useSettings()
   const { minappShow } = useRuntime()
   const { setDefaultModel, setTopicNamingModel, setTranslateModel } = useDefaultModel()
   const avatar = useLiveQuery(() => db.settings.get('image://avatar'))
@@ -83,4 +91,18 @@ export function useAppInit() {
   useEffect(() => {
     import('@renderer/queue/KnowledgeQueue')
   }, [])
+
+  useEffect(() => {
+    const oldCustomCss = document.getElementById('user-defined-custom-css')
+    if (oldCustomCss) {
+      oldCustomCss.remove()
+    }
+
+    if (customCss) {
+      const style = document.createElement('style')
+      style.id = 'user-defined-custom-css'
+      style.textContent = customCss
+      document.head.appendChild(style)
+    }
+  }, [customCss])
 }

src/renderer/src/i18n/locales/en-us.json

@@ -381,6 +381,8 @@
       "display.sidebar.files.icon": "Show Files icon",
       "display.sidebar.title": "Sidebar Settings",
       "display.topic.title": "Topic Settings",
+      "display.custom.css": "Custom CSS",
+      "display.custom.css.placeholder": "/* Put custom CSS here */",
       "input.auto_translate_with_space": "Quickly translate with 3 spaces",
       "messages.divider": "Show divider between messages",
       "messages.input.paste_long_text_as_file": "Paste long text as file",

src/renderer/src/i18n/locales/ja-jp.json

@@ -379,6 +379,8 @@
       "display.sidebar.files.icon": "ファイルのアイコンを表示",
       "display.sidebar.title": "サイドバー設定",
       "display.topic.title": "トピック設定",
+      "display.custom.css": "カスタムCSS",
+      "display.custom.css.placeholder": "/* ここにカスタムCSSを入力 */",
       "input.auto_translate_with_space": "スペースを3回押して翻訳",
       "messages.divider": "メッセージ間に区切り線を表示",
       "messages.input.paste_long_text_as_file": "長いテキストをファイルとして貼り付け",

src/renderer/src/i18n/locales/ru-ru.json

@@ -381,6 +381,8 @@
       "display.sidebar.files.icon": "Показывать иконку файлов",
       "display.sidebar.title": "Настройки боковой панели",
       "display.topic.title": "Настройки топиков",
+      "display.custom.css": "Пользовательский CSS",
+      "display.custom.css.placeholder": "/* Здесь введите пользовательский CSS */",
       "input.auto_translate_with_space": "Быстрый перевод с помощью 3-х пробелов",
       "messages.divider": "Показывать разделитель между сообщениями",
       "messages.input.paste_long_text_as_file": "Вставлять длинный текст как файл",

src/renderer/src/i18n/locales/zh-cn.json

@@ -382,6 +382,8 @@
       "display.sidebar.files.icon": "显示文件图标",
       "display.sidebar.title": "侧边栏设置",
       "display.topic.title": "话题设置",
+      "display.custom.css": "自定义 CSS",
+      "display.custom.css.placeholder": "/* 这里写自定义CSS */",
       "input.auto_translate_with_space": "快速敲击3次空格翻译",
       "messages.divider": "消息分割线",
       "messages.input.paste_long_text_as_file": "长文本粘贴为文件",

src/renderer/src/i18n/locales/zh-tw.json

@@ -381,6 +381,8 @@
       "display.sidebar.files.icon": "顯示文件圖示",
       "display.sidebar.title": "側邊欄設定",
       "display.topic.title": "話題設定",
+      "display.custom.css": "自定義 CSS",
+      "display.custom.css.placeholder": "/* 這裡寫自定義 CSS */",
       "input.auto_translate_with_space": "快速敲擊3次空格翻譯",
       "messages.divider": "訊息間顯示分隔線",
       "messages.input.paste_long_text_as_file": "將長文本貼上為檔案",

src/renderer/src/pages/settings/DisplaySettings.tsx

@@ -4,12 +4,13 @@ import { useSettings } from '@renderer/hooks/useSettings'
 import { useAppDispatch } from '@renderer/store'
 import {
   setClickAssistantToShowTopic,
+  setCustomCss,
   setShowFilesIcon,
   setShowMinappIcon,
   setShowTopicTime
 } from '@renderer/store/settings'
 import { ThemeMode } from '@renderer/types'
-import { Select, Switch } from 'antd'
+import { Input, Select, Switch } from 'antd'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -26,7 +27,8 @@ const DisplaySettings: FC = () => {
     topicPosition,
     setTopicPosition,
     clickAssistantToShowTopic,
-    showTopicTime
+    showTopicTime,
+    customCss
   } = useSettings()
   const { theme: themeMode } = useTheme()
 
@@ -111,6 +113,19 @@ const DisplaySettings: FC = () => {
           <Switch checked={showFilesIcon} onChange={(value) => dispatch(setShowFilesIcon(value))} />
         </SettingRow>
       </SettingGroup>
+      <SettingGroup theme={theme}>
+        <SettingTitle>{t('settings.display.custom.css')}</SettingTitle>
+        <SettingDivider />
+        <Input.TextArea
+          value={customCss}
+          onChange={(e) => dispatch(setCustomCss(e.target.value))}
+          placeholder={t('settings.display.custom.css.placeholder')}
+          style={{
+            minHeight: 200,
+            fontFamily: 'monospace'
+          }}
+        />
+      </SettingGroup>
     </SettingContainer>
   )
 }

src/renderer/src/store/settings.ts

@@ -44,6 +44,7 @@ export interface SettingsState {
   // Sidebar icons
   showMinappIcon: boolean
   showFilesIcon: boolean
+  customCss: string
 }
 
 const initialState: SettingsState = {
@@ -83,7 +84,8 @@ const initialState: SettingsState = {
   autoTranslateWithSpace: false,
   enableTopicNaming: true,
   showMinappIcon: true,
-  showFilesIcon: true
+  showFilesIcon: true,
+  customCss: ''
 }
 
 const settingsSlice = createSlice({
@@ -207,6 +209,9 @@ const settingsSlice = createSlice({
     },
     setPasteLongTextThreshold: (state, action: PayloadAction<number>) => {
       state.pasteLongTextThreshold = action.payload
+    },
+    setCustomCss: (state, action: PayloadAction<string>) => {
+      state.customCss = action.payload
     }
   }
 })
@@ -250,7 +255,8 @@ export const {
   setEnableTopicNaming,
   setShowMinappIcon,
   setShowFilesIcon,
-  setPasteLongTextThreshold
+  setPasteLongTextThreshold,
+  setCustomCss
 } = settingsSlice.actions
 
 export default settingsSlice.reducer