fix: necessary font changes (danny-avila#1818)

* fix: necessary font changes

* chore: minor bump

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@librechat/backend",
-  "version": "0.6.9",
+  "version": "0.6.10",
   "description": "",
   "scripts": {
     "start": "echo 'please run this from the root directory'",

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@librechat/frontend",
-  "version": "0.6.9",
+  "version": "0.6.10",
   "description": "",
   "type": "module",
   "scripts": {

client/src/components/Chat/Footer.tsx

@@ -17,7 +17,7 @@ export default function Footer() {
               rel="noreferrer"
               className="underline"
             >
-              {config?.appTitle || 'LibreChat'} v0.6.9
+              {config?.appTitle || 'LibreChat'} v0.6.10
             </a>
             {' - '} {localize('com_ui_new_footer')}
           </>

client/src/components/Chat/Messages/Content/Markdown.tsx

@@ -41,7 +41,7 @@ export const p = memo(({ children }: { children: React.ReactNode }) => {
   return <p className="mb-2 whitespace-pre-wrap">{children}</p>;
 });
 
-const cursor = ' ⬤';
+const cursor = ' ';
 const Markdown = memo(({ content, message, showCursor }: TContentProps) => {
   const { isSubmitting, latestMessage } = useChatContext();
   const LaTeXParsing = useRecoilValue<boolean>(store.LaTeXParsing);

client/src/components/Chat/Messages/Content/MessageContent.tsx

@@ -57,6 +57,7 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
         ))}
       <div
         className={cn(
+          showCursor && !!text?.length ? 'result-streaming' : '',
           'markdown prose dark:prose-invert light w-full break-words',
           isCreatedByUser ? 'whitespace-pre-wrap dark:text-gray-20' : 'dark:text-gray-70',
         )}

client/src/components/Input/Footer.tsx

@@ -17,7 +17,7 @@ export default function Footer() {
             rel="noreferrer"
             className="underline"
           >
-            {config?.appTitle || 'LibreChat'} v0.6.9
+            {config?.appTitle || 'LibreChat'} v0.6.10
           </a>
           {' - '}. {localize('com_ui_pay_per_call')}
         </>

client/src/style.css

@@ -10,37 +10,111 @@
 
 @font-face {
   font-display: swap;
-  font-family: Signifier;
+  font-family: Inter;
   font-style: normal;
   font-weight: 400;
-  src: url("$fonts/signifier-light.woff2") format("woff2")
+  src: url("$fonts/Inter-Regular.woff2") format("woff2");
+  size-adjust: 94%;
 }
 
 @font-face {
   font-display: swap;
-  font-family: Signifier;
+  font-family: Inter;
   font-style: italic;
   font-weight: 400;
-  src: url("$fonts/signifier-light-italic.woff2") format("woff2")
+  src: url("$fonts/Inter-Italic.woff2") format("woff2");
+  size-adjust: 94%;
 }
 
 @font-face {
   font-display: swap;
-  font-family: Signifier;
+  font-family: Inter;
   font-style: normal;
-  font-weight: 700;
-  src: url("$fonts/signifier-bold.woff2") format("woff2")
+  font-weight: 500;
+  src: url("$fonts/Inter-SemiBold.woff2") format("woff2");
+  size-adjust: 94%;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Inter;
+  font-style: italic;
+  font-weight: 500;
+  src: url("$fonts/Inter-SemiBoldItalic.woff2") format("woff2");
+  size-adjust: 94%;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 600;
+  src: url("$fonts/Inter-Bold.woff2") format("woff2");
+  size-adjust: 94%;
 }
 
 @font-face {
   font-display: swap;
-  font-family: Signifier;
+  font-family: Inter;
   font-style: italic;
+  font-weight: 600;
+  src: url("$fonts/Inter-BoldItalic.woff2") format("woff2");
+  size-adjust: 94%;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Roboto Mono;
+  font-style: normal;
+  font-weight: 400;
+  src: url("$fonts/roboto-mono-latin-400-normal.woff2") format("woff2")
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Roboto Mono;
+  font-style: normal;
   font-weight: 700;
-  src: url("$fonts/signifier-bold-italic.woff2") format("woff2")
+  src: url("$fonts/roboto-mono-latin-700-normal.woff2") format("woff2")
 }
 
 @font-face {
+  font-display: swap;
+  font-family: Roboto Mono;
+  font-style: italic;
+  font-weight: 400;
+  src: url("$fonts/roboto-mono-latin-400-italic.woff2") format("woff2")
+}
+
+/*
+
+The default ChatGPT fonts, according to OpenAI's brand guidelines, are proprietary and require appropriate font license according to your use case.
+
+They can be purchased here: https://klim.co.nz/buy/soehne/
+
+The fonts in question are (9 total):
+
+> - Söhne (Buch Kursiv, Buch, Halbfett Kursiv, Halbfett, Kraftig Kursiv, Kraftig, Mono Buch Kursiv, Mono Buch, Mono Halbfett)
+
+If you have purchased a license, you can use the commented-out `@font-face` declarations below to include them in your project.
+
+Step 1: Buy whatever license applies to you and allows use of `.woff2` font files (likely web font license).
+Step 2: Place them in ./client/public/fonts/ directory.
+Step 3: Replace the current `fontFamily` config in ./client/tailwind.config.cjs with the following:
+
+```
+    fontFamily: {
+      sans: ['Söhne', 'sans-serif'],
+      mono: ['Söhne Mono', 'monospace'],
+    },
+```
+
+Step 4: Uncomment all Söhne font-face declarations below.
+Step 5: rebuild frontend code: `npm run frontend` (or rebuild docker).
+
+*/
+
+/* @font-face {
   font-display: swap;
   font-family: Söhne;
   font-style: normal;
@@ -110,7 +184,7 @@
   font-style: italic;
   font-weight: 400;
   src: url("$fonts/soehne-mono-buch-kursiv.woff2") format("woff2")
-}
+} */
 
 /* * {
   box-sizing: border-box;
@@ -1311,25 +1385,6 @@ html {
   animation: spin 1s linear infinite;
 }
 
-.result-streaming {
-  -webkit-animation: blink 1s steps(5, start) infinite;
-  animation: blink 1s steps(5, start) infinite;
-  content:"⬤ ";
-  margin-left: 0.25rem;
-  vertical-align: baseline;
-}
-
-/* .result-streaming>:not(ol):not(ul):not(pre):last-child:after,
-.result-streaming>ol:last-child li:last-child:after,
-.result-streaming>pre:last-child code:after,
-.result-streaming>ul:last-child li:last-child:after {
- -webkit-animation:blink 1s steps(5,start) infinite;
- animation:blink 1s steps(5,start) infinite;
- content:"▋";
- margin-left:.25rem;
- vertical-align:baseline
-} */
-
 .form-input,
 .form-multiselect,
 .form-select,
@@ -1870,3 +1925,74 @@ html {
   --tw-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
   --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
 }
+
+.result-streaming>:not(ol):not(ul):not(pre):last-child:after,
+.result-streaming>pre:last-child code:after {
+  display: inline-block; /* Add this line */
+  content:"⬤";
+  width: 12px;
+  height: 12px;
+  font-family:system-ui,Inter,Söhne Circle,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
+  line-height:normal;
+  margin-left:.25rem;
+  vertical-align:middle;
+  font-size: 0.5rem;
+}
+
+.result-streaming>pre:last-child code {
+  background: url('path-to-circle-image') no-repeat right center;
+  padding-right: 1em; /* Adjust as necessary */
+}
+
+@supports (selector(:has(*))) {
+  .result-streaming>ol:last-child>li:last-child>ol:last-child>li:last-child:after,
+  .result-streaming>ol:last-child>li:last-child>ol:last-child>li:last-child>ol:last-child>li:last-child:after,
+  .result-streaming>ol:last-child>li:last-child>ol:last-child>li:last-child>ul:last-child>li:last-child:after,
+  .result-streaming>ol:last-child>li:last-child>ul:last-child>li:last-child:after,
+  .result-streaming>ol:last-child>li:last-child>ul:last-child>li:last-child>ol:last-child>li:last-child:after,
+  .result-streaming>ol:last-child>li:last-child>ul:last-child>li:last-child>ul:last-child>li:last-child:after,
+  .result-streaming>ul:last-child>li:last-child>ol:last-child>li:last-child:after,
+  .result-streaming>ul:last-child>li:last-child>ol:last-child>li:last-child>ol:last-child>li:last-child:after,
+  .result-streaming>ul:last-child>li:last-child>ol:last-child>li:last-child>ul:last-child>li:last-child:after,
+  .result-streaming>ul:last-child>li:last-child>ul:last-child>li:last-child:after,
+  .result-streaming>ul:last-child>li:last-child>ul:last-child>li:last-child>ol:last-child>li:last-child:after,
+  .result-streaming>ul:last-child>li:last-child>ul:last-child>li:last-child>ul:last-child>li:last-child:after,
+  .result-streaming>ul:last-child>li:last-child[*|\:not-has\(]:after {
+    content:"⬤";
+    font-family:system-ui,Inter,Söhne Circle,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
+    line-height:normal;
+    margin-left:.25rem;
+    vertical-align:baseline
+  }
+  .result-streaming>ul:last-child>li:last-child:not(:has(*>li)):after {
+    content:"⬤";
+    font-family:system-ui,Inter,Söhne Circle,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
+    line-height:normal;
+    margin-left:.25rem;
+    vertical-align:baseline
+  }
+  .result-streaming>ol:last-child>li:last-child[*|\:not-has\(]:after {
+    content:"⬤";
+    font-family:system-ui,Inter,Söhne Circle,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
+    line-height:normal;
+    margin-left:.25rem;
+    vertical-align:baseline
+  }
+  .result-streaming>ol:last-child>li:last-child:not(:has(*>li)):after {
+    content:"⬤";
+    font-family:system-ui,Inter,Söhne Circle,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
+    line-height:normal;
+    margin-left:.25rem;
+    vertical-align:baseline
+  }
+}
+@supports not (selector(:has(*))) {
+  .result-streaming>ol:last-child>li:last-child:after,
+  .result-streaming>ul:last-child>li:last-child:after {
+    content:"⬤";
+    font-family:system-ui,Inter,Söhne Circle,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
+    line-height:normal;
+    margin-left:.25rem;
+    vertical-align:baseline
+  }
+}

client/tailwind.config.cjs

@@ -10,9 +10,13 @@ module.exports = {
     //   'gpt-dark-gray': '#343541',
     // },
     fontFamily: {
-      sans: ['Söhne', 'sans-serif'],
-      mono: ['Söhne Mono', 'monospace'],
+      sans: ['Inter', 'sans-serif'],
+      mono: ['Roboto Mono', 'monospace'],
     },
+    // fontFamily: {
+    //   sans: ['Söhne', 'sans-serif'],
+    //   mono: ['Söhne Mono', 'monospace'],
+    // },
     extend: {
       width: {
         'authPageWidth': '370px',

e2e/jestSetup.js

@@ -1,3 +1,3 @@
-// v0.6.9
+// v0.6.10
 // See .env.test.example for an example of the '.env.test' file.
 require('dotenv').config({ path: './e2e/.env.test' });

index.html

@@ -1,4 +1,4 @@
-<!-- v0.6.9 -->
+<!-- v0.6.10 -->
 <!DOCTYPE html>
 <html>
   <head>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "LibreChat",
-  "version": "0.6.9",
+  "version": "0.6.10",
   "description": "",
   "workspaces": [
     "api",

packages/data-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "librechat-data-provider",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "data services for librechat apps",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

packages/data-provider/src/config.ts

@@ -357,7 +357,7 @@ export enum Constants {
   /**
    * Key for the app's version.
    */
-  VERSION = 'v0.6.9',
+  VERSION = 'v0.6.10',
   /**
    * Key for the Custom Config's version (librechat.yaml).
    */

prettier.config.js

@@ -1,4 +1,4 @@
-// v0.6.9
+// v0.6.10
 module.exports = {
   tailwindConfig: './client/tailwind.config.cjs',
   printWidth: 100,