Merge pull request #5179 from frostime/contrib-font

✨ feat(config): Config the font-family of chat content

app/components/chat.tsx

@@ -732,6 +732,7 @@ function _Chat() {
   const session = chatStore.currentSession();
   const config = useAppConfig();
   const fontSize = config.fontSize;
+  const fontFamily = config.fontFamily;
 
   const [showExport, setShowExport] = useState(false);
 
@@ -1482,6 +1483,7 @@ function _Chat() {
                         setUserInput(getMessageTextContent(message));
                       }}
                       fontSize={fontSize}
+                      fontFamily={fontFamily}
                       parentRef={scrollRef}
                       defaultShow={i >= messages.length - 6}
                     />
@@ -1576,6 +1578,7 @@ function _Chat() {
             autoFocus={autoFocus}
             style={{
               fontSize: config.fontSize,
+              fontFamily: config.fontFamily,
             }}
           />
           {attachImages.length != 0 && (

app/components/exporter.tsx

@@ -583,6 +583,7 @@ export function ImagePreviewer(props: {
                 <Markdown
                   content={getMessageTextContent(m)}
                   fontSize={config.fontSize}
+                  fontFamily={config.fontFamily}
                   defaultShow
                 />
                 {getMessageImages(m).length == 1 && (

app/components/markdown.tsx

@@ -232,6 +232,7 @@ export function Markdown(
     content: string;
     loading?: boolean;
     fontSize?: number;
+    fontFamily?: string;
     parentRef?: RefObject<HTMLDivElement>;
     defaultShow?: boolean;
   } & React.DOMAttributes<HTMLDivElement>,
@@ -243,6 +244,7 @@ export function Markdown(
       className="markdown-body"
       style={{
         fontSize: `${props.fontSize ?? 14}px`,
+        fontFamily: props.fontFamily || "inherit",
       }}
       ref={mdRef}
       onContextMenu={props.onContextMenu}

app/components/settings.tsx

@@ -1316,6 +1316,22 @@ export function Settings() {
             ></InputRange>
           </ListItem>
 
+          <ListItem
+            title={Locale.Settings.FontFamily.Title}
+            subTitle={Locale.Settings.FontFamily.SubTitle}
+          >
+            <input
+              type="text"
+              value={config.fontFamily}
+              placeholder={Locale.Settings.FontFamily.Placeholder}
+              onChange={(e) =>
+                updateConfig(
+                  (config) => (config.fontFamily = e.currentTarget.value),
+                )
+              }
+            ></input>
+          </ListItem>
+
           <ListItem
             title={Locale.Settings.AutoGenerateTitle.Title}
             subTitle={Locale.Settings.AutoGenerateTitle.SubTitle}

app/locales/ar.ts

@@ -111,6 +111,11 @@ const ar: PartialLocaleType = {
       Title: "حجم الخط",
       SubTitle: "ضبط حجم الخط لمحتوى الدردشة",
     },
+    FontFamily: {
+      Title: "خط الدردشة",
+      SubTitle: "خط محتوى الدردشة، اتركه فارغًا لتطبيق الخط الافتراضي العالمي",
+      Placeholder: "اسم الخط",
+    },
     InjectSystemPrompts: {
       Title: "حقن تلميحات النظام",
       SubTitle:

app/locales/bn.ts

@@ -136,6 +136,12 @@ const bn: PartialLocaleType = {
       Title: "ফন্ট সাইজ",
       SubTitle: "চ্যাট সামগ্রীর ফন্ট সাইজ সংশোধন করুন",
     },
+    FontFamily: {
+      Title: "চ্যাট ফন্ট",
+      SubTitle:
+        "চ্যাট সামগ্রীর ফন্ট, বিশ্বব্যাপী ডিফল্ট ফন্ট প্রয়োগ করতে খালি রাখুন",
+      Placeholder: "ফন্টের নাম",
+    },
     InjectSystemPrompts: {
       Title: "حقن تلميحات النظام",
       SubTitle:

app/locales/cn.ts

@@ -156,6 +156,11 @@ const cn = {
       Title: "字体大小",
       SubTitle: "聊天内容的字体大小",
     },
+    FontFamily: {
+      Title: "聊天字体",
+      SubTitle: "聊天内容的字体，若置空则应用全局默认字体",
+      Placeholder: "字体名称",
+    },
     InjectSystemPrompts: {
       Title: "注入系统级提示信息",
       SubTitle: "强制给每次请求的消息列表开头添加一个模拟 ChatGPT 的系统提示",

app/locales/cs.ts

@@ -71,6 +71,12 @@ const cs: PartialLocaleType = {
       Title: "Velikost písma",
       SubTitle: "Nastavení velikosti písma obsahu chatu",
     },
+    FontFamily: {
+      Title: "Chatové Písmo",
+      SubTitle:
+        "Písmo obsahu chatu, ponechejte prázdné pro použití globálního výchozího písma",
+      Placeholder: "Název Písma",
+    },
     InjectSystemPrompts: {
       Title: "Vložit systémové prompty",
       SubTitle:

app/locales/de.ts

@@ -71,6 +71,12 @@ const de: PartialLocaleType = {
       Title: "Schriftgröße",
       SubTitle: "Schriftgröße des Chat-Inhalts anpassen",
     },
+    FontFamily: {
+      Title: "Chat-Schriftart",
+      SubTitle:
+        "Schriftart des Chat-Inhalts, leer lassen, um die globale Standardschriftart anzuwenden",
+      Placeholder: "Schriftartname",
+    },
     InjectSystemPrompts: {
       Title: "System-Prompts einfügen",
       SubTitle:

app/locales/en.ts

@@ -158,6 +158,12 @@ const en: LocaleType = {
       Title: "Font Size",
       SubTitle: "Adjust font size of chat content",
     },
+    FontFamily: {
+      Title: "Chat Font Family",
+      SubTitle:
+        "Font Family of the chat content, leave empty to apply global default font",
+      Placeholder: "Font Family Name",
+    },
     InjectSystemPrompts: {
       Title: "Inject System Prompts",
       SubTitle: "Inject a global system prompt for every request",

app/locales/es.ts

@@ -71,6 +71,12 @@ const es: PartialLocaleType = {
       Title: "Tamaño de fuente",
       SubTitle: "Ajustar el tamaño de fuente del contenido del chat",
     },
+    FontFamily: {
+      Title: "Fuente del Chat",
+      SubTitle:
+        "Fuente del contenido del chat, dejar vacío para aplicar la fuente predeterminada global",
+      Placeholder: "Nombre de la Fuente",
+    },
     InjectSystemPrompts: {
       Title: "Inyectar Prompts del Sistema",
       SubTitle:

app/locales/fr.ts

@@ -111,6 +111,12 @@ const fr: PartialLocaleType = {
       Title: "Taille des polices",
       SubTitle: "Ajuste la taille de police du contenu de la conversation",
     },
+    FontFamily: {
+      Title: "Police de Chat",
+      SubTitle:
+        "Police du contenu du chat, laissez vide pour appliquer la police par défaut globale",
+      Placeholder: "Nom de la Police",
+    },
     InjectSystemPrompts: {
       Title: "Injecter des invites système",
       SubTitle:

app/locales/id.ts

@@ -140,6 +140,12 @@ const id: PartialLocaleType = {
       Title: "Ukuran Font",
       SubTitle: "Ubah ukuran font konten chat",
     },
+    FontFamily: {
+      Title: "Font Obrolan",
+      SubTitle:
+        "Font dari konten obrolan, biarkan kosong untuk menerapkan font default global",
+      Placeholder: "Nama Font",
+    },
     InjectSystemPrompts: {
       Title: "Suntikkan Petunjuk Sistem",
       SubTitle:
@@ -369,8 +375,8 @@ const id: PartialLocaleType = {
   },
   Exporter: {
     Description: {
-      Title: "Hanya pesan setelah menghapus konteks yang akan ditampilkan"
-    },  
+      Title: "Hanya pesan setelah menghapus konteks yang akan ditampilkan",
+    },
     Model: "Model",
     Messages: "Pesan",
     Topic: "Topik",

app/locales/it.ts

@@ -71,6 +71,12 @@ const it: PartialLocaleType = {
       Title: "Dimensione carattere",
       SubTitle: "Regolare la dimensione dei caratteri del contenuto della chat",
     },
+    FontFamily: {
+      Title: "Font della Chat",
+      SubTitle:
+        "Carattere del contenuto della chat, lascia vuoto per applicare il carattere predefinito globale",
+      Placeholder: "Nome del Font",
+    },
     InjectSystemPrompts: {
       Title: "Inserisci Prompts di Sistema",
       SubTitle:

app/locales/jp.ts

@@ -118,6 +118,12 @@ const jp: PartialLocaleType = {
       Title: "フォントサイズ",
       SubTitle: "チャット内容のフォントサイズ",
     },
+    FontFamily: {
+      Title: "チャットフォント",
+      SubTitle:
+        "チャットコンテンツのフォント、空白の場合はグローバルデフォルトフォントを適用します",
+      Placeholder: "フォント名",
+    },
     InjectSystemPrompts: {
       Title: "システムプロンプトの挿入",
       SubTitle:

app/locales/ko.ts

@@ -72,6 +72,11 @@ const ko: PartialLocaleType = {
       Title: "글꼴 크기",
       SubTitle: "채팅 내용의 글꼴 크기 조정",
     },
+    FontFamily: {
+      Title: "채팅 폰트",
+      SubTitle: "채팅 내용의 폰트, 비워 두면 글로벌 기본 폰트를 적용",
+      Placeholder: "폰트 이름",
+    },
     InjectSystemPrompts: {
       Title: "시스템 프롬프트 주입",
       SubTitle:

app/locales/no.ts

@@ -66,6 +66,12 @@ const no: PartialLocaleType = {
       Title: "Fontstørrelsen",
       SubTitle: "Juster fontstørrelsen for samtaleinnholdet.",
     },
+    FontFamily: {
+      Title: "Chat-skrifttype",
+      SubTitle:
+        "Skrifttypen for chatinnhold, la stå tom for å bruke global standardskrifttype",
+      Placeholder: "Skriftnavn",
+    },
     InjectSystemPrompts: {
       Title: "Sett inn systemprompter",
       SubTitle:

app/locales/pt.ts

@@ -153,6 +153,12 @@ const pt: PartialLocaleType = {
       Title: "Tamanho da Fonte",
       SubTitle: "Ajustar o tamanho da fonte do conteúdo do chat",
     },
+    FontFamily: {
+      Title: "Fonte do Chat",
+      SubTitle:
+        "Fonte do conteúdo do chat, deixe vazio para aplicar a fonte padrão global",
+      Placeholder: "Nome da Fonte",
+    },
     InjectSystemPrompts: {
       Title: "Inserir Prompts de Sistema",
       SubTitle: "Inserir um prompt de sistema global para cada requisição",

app/locales/ru.ts

@@ -71,6 +71,12 @@ const ru: PartialLocaleType = {
       Title: "Размер шрифта",
       SubTitle: "Настроить размер шрифта контента чата",
     },
+    FontFamily: {
+      Title: "Шрифт чата",
+      SubTitle:
+        "Шрифт содержимого чата, оставьте пустым для применения глобального шрифта по умолчанию",
+      Placeholder: "Название шрифта",
+    },
     InjectSystemPrompts: {
       Title: "Вставить системные подсказки",
       SubTitle:

app/locales/sk.ts

@@ -155,6 +155,12 @@ const sk: PartialLocaleType = {
       Title: "Veľkosť písma",
       SubTitle: "Nastaviť veľkosť písma obsahu chatu",
     },
+    FontFamily: {
+      Title: "Chatové Písmo",
+      SubTitle:
+        "Písmo obsahu chatu, ponechajte prázdne pre použitie globálneho predvoleného písma",
+      Placeholder: "Názov Písma",
+    },
     InjectSystemPrompts: {
       Title: "Vložiť systémové výzvy",
       SubTitle: "Vložiť globálnu systémovú výzvu pre každú požiadavku",

app/locales/tr.ts

@@ -71,6 +71,12 @@ const tr: PartialLocaleType = {
       Title: "Yazı Boyutu",
       SubTitle: "Sohbet içeriğinin yazı boyutunu ayarlayın",
     },
+    FontFamily: {
+      Title: "Sohbet Yazı Tipi",
+      SubTitle:
+        "Sohbet içeriğinin yazı tipi, boş bırakıldığında küresel varsayılan yazı tipi uygulanır",
+      Placeholder: "Yazı Tipi Adı",
+    },
     InjectSystemPrompts: {
       Title: "Sistem İpucu Ekleyin",
       SubTitle:

app/locales/tw.ts

@@ -153,6 +153,11 @@ const tw = {
       Title: "字型大小",
       SubTitle: "聊天內容的字型大小",
     },
+    FontFamily: {
+      Title: "聊天字體",
+      SubTitle: "聊天內容的字體，若置空則應用全局默認字體",
+      Placeholder: "字體名稱",
+    },
     InjectSystemPrompts: {
       Title: "匯入系統提示",
       SubTitle: "強制在每個請求的訊息列表開頭新增一個模擬 ChatGPT 的系統提示",

app/locales/vi.ts

@@ -71,6 +71,12 @@ const vi: PartialLocaleType = {
       Title: "Font chữ",
       SubTitle: "Thay đổi font chữ của nội dung trò chuyện",
     },
+    FontFamily: {
+      Title: "Phông Chữ Trò Chuyện",
+      SubTitle:
+        "Phông chữ của nội dung trò chuyện, để trống để áp dụng phông chữ mặc định toàn cầu",
+      Placeholder: "Tên Phông Chữ",
+    },
     InjectSystemPrompts: {
       Title: "Tiêm Prompt Hệ thống",
       SubTitle:

app/store/config.ts

@@ -33,6 +33,7 @@ export const DEFAULT_CONFIG = {
   submitKey: SubmitKey.Enter,
   avatar: "1f603",
   fontSize: 14,
+  fontFamily: "",
   theme: Theme.Auto as Theme,
   tightBorder: !!config?.isApp,
   sendPreviewBubble: true,

app/utils.ts

@@ -194,6 +194,7 @@ export function autoGrowTextArea(dom: HTMLTextAreaElement) {
   measureDom.style.width = width + "px";
   measureDom.innerText = dom.value !== "" ? dom.value : "1";
   measureDom.style.fontSize = dom.style.fontSize;
+  measureDom.style.fontFamily = dom.style.fontFamily;
   const endWithEmptyLine = dom.value.endsWith("\n");
   const height = parseFloat(window.getComputedStyle(measureDom).height);
   const singleLineHeight = parseFloat(