feat: Add markdown support for custom footer links

danny-avila · Jun 4, 2024 · 7bdf898 · 7bdf898
1 parent 37ae484
commit 7bdf898
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/client/src/components/Chat/Footer.tsx b/client/src/components/Chat/Footer.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Constants } from 'librechat-data-provider';
 import { useGetStartupConfig } from 'librechat-data-provider/react-query';
 import { useLocalize } from '~/hooks';
+import ReactMarkdown from 'react-markdown';
 
 export default function Footer({ className }: { className?: string }) {
   const { data: config } = useGetStartupConfig();
@@ -34,16 +35,17 @@ export default function Footer({ className }: { className?: string }) {
 
   const mainContentRender = (
     <span>
-      {typeof config?.customFooter === 'string' ? (
-        config.customFooter
-      ) : (
-        <>
-          <a href="https://librechat.ai" target="_blank" rel="noreferrer" className="underline">
-            {config?.appTitle || 'LibreChat'} {Constants.VERSION}
-          </a>
-          {' - '} {localize('com_ui_new_footer')}
-        </>
-      )}
+      <ReactMarkdown
+        components={{
+          a: ({ ...props }) => <a style={{ textDecoration: 'underline' }} {...props} />,
+        }}
+      >
+        {typeof config?.customFooter === 'string'
+          ? config.customFooter
+          : `[<${config?.appTitle || 'LibreChat'} ${
+            Constants.VERSION
+          }>](https://librechat.ai) - ${localize('com_ui_pay_per_call')}`}
+      </ReactMarkdown>
     </span>
   );
 

diff --git a/client/src/components/Input/Footer.tsx b/client/src/components/Input/Footer.tsx
@@ -1,23 +1,25 @@
 import { Constants } from 'librechat-data-provider';
 import { useGetStartupConfig } from 'librechat-data-provider/react-query';
 import { useLocalize } from '~/hooks';
+import ReactMarkdown from 'react-markdown';
 
 export default function Footer() {
   const { data: config } = useGetStartupConfig();
   const localize = useLocalize();
 
   return (
     <div className="hidden px-3 pb-1 pt-2 text-center text-xs text-black/50 dark:text-white/50 md:block md:px-4 md:pb-4 md:pt-3">
-      {typeof config?.customFooter === 'string' ? (
-        config.customFooter
-      ) : (
-        <>
-          <a href="https://librechat.ai" target="_blank" rel="noreferrer" className="underline">
-            {config?.appTitle || 'LibreChat'} {Constants.VERSION}
-          </a>
-          {' - '}. {localize('com_ui_pay_per_call')}
-        </>
-      )}
+      <ReactMarkdown
+        components={{
+          a: ({ ...props }) => <a style={{ textDecoration: 'underline' }} {...props} />,
+        }}
+      >
+        {typeof config?.customFooter === 'string'
+          ? config.customFooter
+          : `[<${config?.appTitle || 'LibreChat'} ${
+            Constants.VERSION
+          }>](https://librechat.ai) - ${localize('com_ui_pay_per_call')}`}
+      </ReactMarkdown>
     </div>
   );
 }