Merge pull request #5179 from frostime/contrib-font

✨ feat(config): Config the font-family of chat content
2025-05-19 20:20:16 +09:00 · 2024-08-03 21:04:43 +08:00 · 2024-08-03 21:04:43 +08:00 · 764c0cb865
commit 764c0cb865
parent d9e407fd2b 8ec6acc55a
25 changed files with 136 additions and 2 deletions
--- a/app/components/chat.tsx
+++ b/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 && (
--- a/app/components/exporter.tsx
+++ b/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 && (
--- a/app/components/markdown.tsx
+++ b/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}
--- a/app/components/settings.tsx
+++ b/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}
--- a/app/locales/ar.ts
+++ b/app/locales/ar.ts
@ -111,6 +111,11 @@ const ar: PartialLocaleType = {
      Title: "حجم الخط",
      SubTitle: "ضبط حجم الخط لمحتوى الدردشة",
    },
+    FontFamily: {
+      Title: "خط الدردشة",
+      SubTitle: "خط محتوى الدردشة، اتركه فارغًا لتطبيق الخط الافتراضي العالمي",
+      Placeholder: "اسم الخط",
+    },
    InjectSystemPrompts: {
      Title: "حقن تلميحات النظام",
      SubTitle:
--- a/app/locales/bn.ts
+++ b/app/locales/bn.ts
@ -136,6 +136,12 @@ const bn: PartialLocaleType = {
      Title: "ফন্ট সাইজ",
      SubTitle: "চ্যাট সামগ্রীর ফন্ট সাইজ সংশোধন করুন",
    },
+    FontFamily: {
+      Title: "চ্যাট ফন্ট",
+      SubTitle:
+        "চ্যাট সামগ্রীর ফন্ট, বিশ্বব্যাপী ডিফল্ট ফন্ট প্রয়োগ করতে খালি রাখুন",
+      Placeholder: "ফন্টের নাম",
+    },
    InjectSystemPrompts: {
      Title: "حقن تلميحات النظام",
      SubTitle:
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@ -156,6 +156,11 @@ const cn = {
      Title: "字体大小",
      SubTitle: "聊天内容的字体大小",
    },
+    FontFamily: {
+      Title: "聊天字体",
+      SubTitle: "聊天内容的字体，若置空则应用全局默认字体",
+      Placeholder: "字体名称",
+    },
    InjectSystemPrompts: {
      Title: "注入系统级提示信息",
      SubTitle: "强制给每次请求的消息列表开头添加一个模拟 ChatGPT 的系统提示",
--- a/app/locales/cs.ts
+++ b/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:
--- a/app/locales/de.ts
+++ b/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:
--- a/app/locales/en.ts
+++ b/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",
--- a/app/locales/es.ts
+++ b/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:
--- a/app/locales/fr.ts
+++ b/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:
--- a/app/locales/id.ts
+++ b/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,7 +375,7 @@ 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",
--- a/app/locales/it.ts
+++ b/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:
--- a/app/locales/jp.ts
+++ b/app/locales/jp.ts
@ -118,6 +118,12 @@ const jp: PartialLocaleType = {
      Title: "フォントサイズ",
      SubTitle: "チャット内容のフォントサイズ",
    },
+    FontFamily: {
+      Title: "チャットフォント",
+      SubTitle:
+        "チャットコンテンツのフォント、空白の場合はグローバルデフォルトフォントを適用します",
+      Placeholder: "フォント名",
+    },
    InjectSystemPrompts: {
      Title: "システムプロンプトの挿入",
      SubTitle:
--- a/app/locales/ko.ts
+++ b/app/locales/ko.ts
@ -72,6 +72,11 @@ const ko: PartialLocaleType = {
      Title: "글꼴 크기",
      SubTitle: "채팅 내용의 글꼴 크기 조정",
    },
+    FontFamily: {
+      Title: "채팅 폰트",
+      SubTitle: "채팅 내용의 폰트, 비워 두면 글로벌 기본 폰트를 적용",
+      Placeholder: "폰트 이름",
+    },
    InjectSystemPrompts: {
      Title: "시스템 프롬프트 주입",
      SubTitle:
--- a/app/locales/no.ts
+++ b/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:
--- a/app/locales/pt.ts
+++ b/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",
--- a/app/locales/ru.ts
+++ b/app/locales/ru.ts
@ -71,6 +71,12 @@ const ru: PartialLocaleType = {
      Title: "Размер шрифта",
      SubTitle: "Настроить размер шрифта контента чата",
    },
+    FontFamily: {
+      Title: "Шрифт чата",
+      SubTitle:
+        "Шрифт содержимого чата, оставьте пустым для применения глобального шрифта по умолчанию",
+      Placeholder: "Название шрифта",
+    },
    InjectSystemPrompts: {
      Title: "Вставить системные подсказки",
      SubTitle:
--- a/app/locales/sk.ts
+++ b/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",
--- a/app/locales/tr.ts
+++ b/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:
--- a/app/locales/tw.ts
+++ b/app/locales/tw.ts
@ -153,6 +153,11 @@ const tw = {
      Title: "字型大小",
      SubTitle: "聊天內容的字型大小",
    },
+    FontFamily: {
+      Title: "聊天字體",
+      SubTitle: "聊天內容的字體，若置空則應用全局默認字體",
+      Placeholder: "字體名稱",
+    },
    InjectSystemPrompts: {
      Title: "匯入系統提示",
      SubTitle: "強制在每個請求的訊息列表開頭新增一個模擬 ChatGPT 的系統提示",
--- a/app/locales/vi.ts
+++ b/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:
--- a/app/store/config.ts
+++ b/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,
--- a/app/utils.ts
+++ b/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(