📝 feat: Markdown support for Custom Footer links (#2960)

* 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
This commit is contained in:
Jakub Mieszczak 2024-06-13 15:51:28 +02:00 committed by GitHub
parent 08b8ae120e
commit e9bbf39618
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 35 additions and 39 deletions

View file

@ -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) => {

View file

@ -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>
);
}