📝 feat: Markdown support for Custom Footer links

[jakubmieszczak]

Summary

This PR addresses enhancements requested issue #(2959) regarding adding support for markdown hyperlinks in footer environment variables. Previously, markdown links added in these environment variables were rendered as plain text. With these changes, the application now correctly interprets and displays these links.

Change Type

Please delete any irrelevant options.

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

Testing

This was tested on several cases. Works fine for single and multiple markdowns.

To test these changes, add a markdown link in the CUSTOM_FOOTER environment variable and confirm that the link is correctly interpreted and displayed in the footer by the application.

Example markdown:

CUSTOM_FOOTER="Internal [ChatGPT documentation](https://placeholder-link.com)"

Test Configuration:

1. Add a markdown link to the CUSTOM_FOOTER environment variable and save changes.
2. Run the application.
3. Navigate to main page that displays the footer.
4. Confirm that the markdown link added in the environment variable shows as a clickable hyperlink in the footer.

Checklist

Please delete any irrelevant options.

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• I have commented in any complex areas of my code
• I have made pertinent documentation changes
• My changes do not introduce new warnings
• Local unit tests pass with my changes
• Any changes dependent on mine have been merged and published in downstream modules.
• A pull request for updating the documentation has been submitted.

[Tanvez]

Tested and seems to work correctly from testing
example .env variable i used to test

CUSTOM_FOOTER="[Accessibility1]() | [Accessibility2]() | [Accessibility3]() | [ChatGPT documentation](https://placeholder-link.com)"

librechat.yaml

interface:
  privacyPolicy:
    externalUrl: "https://example.com/privacy"
    openNewTab: true
  termsOfService:
    externalUrl: "https://example.com/terms"
    openNewTab: true

Few things i noticed:

• When adding a pipe between links the format isn’t matching the privacyPolicy and termsOfservice size
• If no link is provided, it will redirect back to the chat window(I guess that is fine for now)
• Theres some spacing issue with the custom footer and privacyPolicy and termsOfservice in mobile view

[danny-avila]

When adding a pipe between links the format isn’t matching the privacyPolicy and termsOfservice size

Good catch @Tanvez.

@jakubmieszczak maybe you can map any occurrence of | to separator elements?

<div key={`separator-${index}`} className="h-2 border-r-[1px] border-gray-300" />

Theres some spacing issue with the custom footer and privacyPolicy and termsOfservice in mobile view

The prior comment may help resolve this issue. I can try to address it if you don't figure it out. The important thing would be to allow the custom footer render to possibly be made up of multiple elements on the same plain as privacy/tos

---

Only other comment I have is that client/src/components/Input/Footer.tsx is no longer used, and you can actually delete it as part of this PR

[jakubmieszczak]

I've addressed the proposed changes in this PR.

• All links in the footer are now displayed horizontally next to each other, rather than vertically one on top of another.
• I've removed the unused client/src/components/Input/Footer.tsx file to clean up our repository.
• The pipe characters have been correctly converted into div elements so they're visually consistent with the rest of the layout.
• Text across all sections in footer is aligned to center.

Please let me know if there are any further changes required. Thank you for your feedback @danny-avila !

[danny-avila]

I've addressed the proposed changes in this PR.

* All links in the footer are now displayed horizontally next to each other, rather than vertically one on top of another.

* I've removed the unused `client/src/components/Input/Footer.tsx` file to clean up our repository.

* The pipe characters have been correctly converted into div elements so they're visually consistent with the rest of the layout.

* Text across all sections in footer is aligned to center.

Please let me know if there are any further changes required. Thank you for your feedback @danny-avila !

thank you @jakubmieszczak looks good to me!

All I would ask if you would kindly make a PR here to add an additional note for using markdown with CUSTOM_FOOTER

https://www.librechat.ai/docs/configuration/dotenv#app-title-and-footer
https://github.com/LibreChat-AI/librechat.ai/blob/main/pages/docs/configuration/dotenv.mdx

[jakubmieszczak]

Can we merge this PR and include changes in v0.7.3? @danny-avila