From 7bdf8986be794667903f4889e5f933284323d080 Mon Sep 17 00:00:00 2001
From: jakubmieszczak <jakub.mieszczak@zendesk.com>
Date: Tue, 4 Jun 2024 14:32:13 +0200
Subject: [PATCH] feat: Add markdown support for custom footer links

---
 client/src/components/Chat/Footer.tsx  | 22 ++++++++++++----------
 client/src/components/Input/Footer.tsx | 22 ++++++++++++----------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Chat/Footer.tsx b/client/src/components/Chat/Footer.tsx
index cca7d9a7cf55..71c9ce52b8ea 100644
--- 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
index c5fabecc6622..67a5faa7c345 100644
--- a/client/src/components/Input/Footer.tsx
+++ b/client/src/components/Input/Footer.tsx
@@ -1,6 +1,7 @@
 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();
@@ -8,16 +9,17 @@ export default function Footer() {
 
   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>
   );
 }