Enhancement: Support hyperlinks in custom footers

[jakubmieszczak]

What features would you like to see added?

Ability to convert markdown links in footer environment variables to actual hyperlinks. Currently, my links defined in markdown syntax appear as plain text in the environment variable and are not being converted to actual clickable links. I'd like to enhance the footer component to understand markdown syntax for links and render them appropriately.

More details

LibreChat service allows me to define custom footers using the CUSTOM_FOOTER environment variable. I want to include markdown links in the footer, however, at the moment, these links are not converted to actual (clickable) hyperlinks, but they stay as plain text.

Usage Scenario: A typical scenario would be pointing users to GitHub repository or to other documentation, which is hosted on another platform.

Which components are impacted by your request?

UI

Pictures

This is how UI looks like for CUSTOM_FOOTER="Internal [ChatGPT documentation](https://placeholder-link.com)"

Code of Conduct

• I agree to follow this project's Code of Conduct

[ventz]

A potential solution - I am assuming that there is a better way pull URLs/links with a library.

import React from 'react';
import { Constants } from 'librechat-data-provider';
import { useGetStartupConfig } from 'librechat-data-provider/react-query';
import { useLocalize } from '~/hooks';

function linkify(text: string) {
  const urlRegex = /(https?:\/\/[^\s]+)/g;
  const parts = text.split(urlRegex);

  return parts.map((part, index) =>
    urlRegex.test(part) ? (
      <a
        key={index}
        href={part}
        target="_blank"
        rel="noreferrer"
        className="underline text-gray-600 dark:text-gray-300"
      >
        {part}
      </a>
    ) : (
      part
    )
  );
}

export default function Footer({ className }: { className?: string }) {
  const { data: config } = useGetStartupConfig();
  const localize = useLocalize();

  const privacyPolicy = config?.interface?.privacyPolicy;
  const termsOfService = config?.interface?.termsOfService;

  const privacyPolicyRender = privacyPolicy?.externalUrl && (
    <a
      className=" text-gray-600 underline dark:text-gray-300"
      href={privacyPolicy.externalUrl}
      target={privacyPolicy.openNewTab ? '_blank' : undefined}
      rel="noreferrer"
    >
      {localize('com_ui_privacy_policy')}
    </a>
  );

  const termsOfServiceRender = termsOfService?.externalUrl && (
    <a
      className=" text-gray-600 underline dark:text-gray-300"
      href={termsOfService.externalUrl}
      target={termsOfService.openNewTab ? '_blank' : undefined}
      rel="noreferrer"
    >
      {localize('com_ui_terms_of_service')}
    </a>
  );

  const mainContentRender = (
    <span>
      {typeof config?.customFooter === 'string' ? (
        linkify(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 footerElements = [mainContentRender, privacyPolicyRender, termsOfServiceRender].filter(
    Boolean,
  );

  return (
    <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]'
      }
    >
      {footerElements.map((contentRender, index) => {
        const isLastElement = index === footerElements.length - 1;
        return (
          <React.Fragment key={`footer-element-${index}`}>
            {contentRender}
            {!isLastElement && (
              <div key={`separator-${index}`} className="h-2 border-r-[1px] border-gray-300" />
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

[jakubmieszczak]

I came up with this solution.

• 📝 feat: Markdown support for Custom Footer links #2960