From e9bbf39618e6af5ee13cbedfb6bd2bb71c294db8 Mon Sep 17 00:00:00 2001
From: Jakub Mieszczak <138759018+jakubmieszczak@users.noreply.github.com>
Date: Thu, 13 Jun 2024 15:51:28 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20feat:=20Markdown=20support=20for?=
 =?UTF-8?q?=20Custom=20Footer=20links=20(#2960)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Add markdown support for custom footer links

* fix: Update Footer component with revised ReactMarkdown props

* fix: Adjusted footer links and pipe styles for consistent appearance

* refactor: remove unused footer.tsx file
---
 client/src/components/Chat/Footer.tsx  | 51 ++++++++++++++++++--------
 client/src/components/Input/Footer.tsx | 23 ------------
 2 files changed, 35 insertions(+), 39 deletions(-)
 delete mode 100644 client/src/components/Input/Footer.tsx

diff --git a/client/src/components/Chat/Footer.tsx b/client/src/components/Chat/Footer.tsx
index cca7d9a7cf..0e62eb195d 100644
--- a/client/src/components/Chat/Footer.tsx
+++ b/client/src/components/Chat/Footer.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactMarkdown from 'react-markdown';
 import { Constants } from 'librechat-data-provider';
 import { useGetStartupConfig } from 'librechat-data-provider/react-query';
 import { useLocalize } from '~/hooks';
@@ -32,22 +33,40 @@ export default function Footer({ className }: { className?: string }) {
     </a>
   );
 
-  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')}
-        </>
-      )}
-    </span>
-  );
+  const mainContentParts = (
+    typeof config?.customFooter === 'string'
+      ? config.customFooter
+      : '[<LibreChat ' +
+        Constants.VERSION +
+        '>](https://librechat.ai) - ' +
+        localize('com_ui_pay_per_call')
+  ).split('|');
 
-  const footerElements = [mainContentRender, privacyPolicyRender, termsOfServiceRender].filter(
+  const mainContentRender = mainContentParts.map((text, index) => (
+    <React.Fragment key={`main-content-part-${index}`}>
+      <ReactMarkdown
+        components={{
+          a: (props) => {
+            const { ['node']: _, href, ...otherProps } = props;
+            return (
+              <a
+                className=" text-gray-600 underline dark:text-gray-300"
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+                {...otherProps}
+              />
+            );
+          },
+          p: ({ node, ...props }) => <span {...props} />,
+        }}
+      >
+        {text.trim()}
+      </ReactMarkdown>
+    </React.Fragment>
+  ));
+
+  const footerElements = [...mainContentRender, privacyPolicyRender, termsOfServiceRender].filter(
     Boolean,
   );
 
@@ -55,7 +74,7 @@ export default function Footer({ className }: { className?: string }) {
     <div
       className={
         className ||
-        'relative flex items-center justify-center gap-2 px-2 py-2 text-xs text-gray-600 dark:text-gray-300 md:px-[60px]'
+        'relative flex items-center justify-center gap-2 px-2 py-2 text-center text-xs text-gray-600 dark:text-gray-300 md:px-[60px]'
       }
     >
       {footerElements.map((contentRender, index) => {
diff --git a/client/src/components/Input/Footer.tsx b/client/src/components/Input/Footer.tsx
deleted file mode 100644
index c5fabecc66..0000000000
--- a/client/src/components/Input/Footer.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Constants } from 'librechat-data-provider';
-import { useGetStartupConfig } from 'librechat-data-provider/react-query';
-import { useLocalize } from '~/hooks';
-
-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')}
-        </>
-      )}
-    </div>
-  );
-}