feat: add ability to configure font for chat application (#1332)

apps/chat/src/components/Markdown/CodeBlock.tsx

@@ -128,12 +128,12 @@ export const CodeBlock: FC<Props> = memo(
             fontSize: 14,
             padding: 12,
             letterSpacing: 0,
-            fontFamily: 'var(--font-inter)',
+            fontFamily: 'var(--theme-font)',
           }}
           className={`${isInner ? '!bg-layer-3' : '!bg-layer-1'}`}
           codeTagProps={{
             style: {
-              fontFamily: 'var(--font-inter)',
+              fontFamily: 'var(--theme-font)',
             },
           }}
         >

apps/chat/src/components/Settings/ThemeSelect.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, useState } from 'react';
+import { MouseEvent, useMemo, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
@@ -27,6 +27,14 @@ export const ThemeSelect = ({
   const { t } = useTranslation(Translation.Settings);
   const availableThemes = useAppSelector(UISelectors.selectAvailableThemes);
 
+  const themeName = useMemo(() => {
+    const name = availableThemes.find(
+      ({ id }) => id === localTheme,
+    )?.displayName;
+
+    return name ?? localTheme;
+  }, [availableThemes, localTheme]);
+
   const onChangeHandler = (e: MouseEvent<HTMLButtonElement>) => {
     onThemeChangeHandler(e.currentTarget.value);
     setIsOpen(false);
@@ -45,7 +53,7 @@ export const ThemeSelect = ({
           onOpenChange={setIsOpen}
           trigger={
             <div className="flex w-full min-w-[120px] cursor-pointer items-center justify-between gap-2 capitalize">
-              {localTheme}
+              {themeName}
               <ChevronDownIcon
                 className={classNames(
                   'shrink-0 text-primary transition-all',

apps/chat/src/pages/_app.tsx

@@ -14,7 +14,7 @@ import { HomeProps } from '.';
 import { createStore } from '@/src/store';
 import '@/src/styles/globals.css';
 
-const inter = Inter({
+export const inter = Inter({
   subsets: ['latin'],
   weight: 'variable',
   variable: '--font-inter',

apps/chat/src/pages/api/themes/styles.ts

@@ -6,6 +6,8 @@ import { ThemesConfig } from '@/src/types/themes';
 
 import { errorsMessages } from '@/src/constants/errors';
 
+import { inter } from '../../_app';
+
 import cssEscape from 'css.escape';
 import fetch from 'node-fetch';
 
@@ -52,6 +54,25 @@ function generateUrlsCssVariables(
   return cssContent;
 }
 
+function generateFontCssVariables(
+  variables: Record<string, string | undefined> | undefined,
+) {
+  if (!variables) {
+    return `${inter.variable}:${inter.style.fontFamily};\n`;
+  }
+
+  let cssContent = '';
+  Object.entries(variables).forEach(([variable, value]) => {
+    let compiledValue = value;
+    if (!value || !value.length) {
+      compiledValue = inter.style.fontFamily;
+    }
+
+    cssContent += `--${cssEscape(variable)}: ${compiledValue};\n`;
+  });
+  return cssContent;
+}
+
 function wrapCssContents(wrapper: string, contents: string[]): string {
   return `${wrapper} {\n ${contents.join('')}\n }\n`;
 }
@@ -103,6 +124,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
         wrapCssContents(`.${theme.id}`, [
           generateColorsCssVariables(theme.colors),
           generateUrlsCssVariables({ 'app-logo': theme['app-logo'] }),
+          generateFontCssVariables({ 'theme-font': theme['font-family'] }),
         ]),
       ),
       generateUrlsCssVariables({

apps/chat/src/types/themes.ts

@@ -2,6 +2,7 @@ export interface Theme {
   displayName: string;
   colors: Record<string, string>;
   'app-logo': string;
+  'font-family'?: string;
   id: string;
 }
 

apps/chat/tailwind.config.js

@@ -77,7 +77,7 @@ module.exports = {
         DEFAULT: '0 0 4px 0 var(--bg-blackout, #090D13B3)',
       },
       fontFamily: {
-        DEFAULT: ['var(--font-inter)'],
+        DEFAULT: ['var(--theme-font, var(--font-inter))'],
       },
       fontSize: {
         xxs: '10px',

docs/THEME-CUSTOMIZATION.md

@@ -46,7 +46,8 @@ To declare new theme you should create an object inside your themes property and
       "colors": {
         // Semantic colors which commonly used across entire application.
         // See default configuration to check available colors
-      }
+      },
+      "font-family":"Inter" //Font for the theme
     },
     // Other themes
   ],
@@ -67,6 +68,7 @@ Below is the default configuration for the theme. This configuration includes th
       "displayName": "Light",
       "id": "light",
       "app-logo": "logo.svg",
+      "font-family": "",
       "colors": {
         "bg-layer-0": "#FCFCFC",
         "bg-layer-1": "#EAEDF0",
@@ -110,6 +112,7 @@ Below is the default configuration for the theme. This configuration includes th
       "displayName": "Dark",
       "id": "dark",
       "app-logo": "logo-dark.svg",
+      "font-family": "",
       "colors": {
         "bg-layer-0": "#000000",
         "bg-layer-1": "#090D13",