feat: support adding custom links on the nav header (#1836)

* feat: support adding custom links on the nav header

* include condition to use apiClient.buildEndpoint

* adjust size of buttons

Author: fgalind1

backend/chainlit/config.py

@@ -143,6 +143,12 @@
 # Be careful: If this is a relative path, it should not start with a slash.
 # custom_build = "./public/build"
 
+# Specify optional one or more custom links in the header.
+# [[UI.header_links]]
+#     name = "Issues"
+#     icon_url = "https://avatars.githubusercontent.com/u/128686189?s=200&v=4"
+#     url = "https://github.com/Chainlit/chainlit/issues"
+
 [meta]
 generated_by = "{__version__}"
 """
@@ -214,6 +220,13 @@ class FeaturesSettings(DataClassJsonMixin):
     edit_message: bool = True
 
 
+@dataclass
+class HeaderLink(DataClassJsonMixin):
+    name: str
+    icon_url: str
+    url: str
+
+
 @dataclass()
 class UISettings(DataClassJsonMixin):
     name: str
@@ -230,6 +243,8 @@ class UISettings(DataClassJsonMixin):
     custom_meta_image_url: Optional[str] = None
     # Optional custom build directory for the frontend
     custom_build: Optional[str] = None
+    # Optional header links
+    header_links: Optional[List[HeaderLink]] = None
 
 
 @dataclass()

frontend/src/components/ButtonLink.tsx

@@ -0,0 +1,47 @@
+import { useContext } from 'react';
+
+import { ChainlitContext } from '@chainlit/react-client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '@/components/ui/tooltip';
+
+export interface ButtonLinkProps {
+  name?: string;
+  iconUrl?: string;
+  url: string;
+}
+
+export default function ButtonLink({ name, iconUrl, url }: ButtonLinkProps) {
+  const apiClient = useContext(ChainlitContext);
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-muted-foreground hover:text-muted-foreground"
+          >
+            <a href={url} target="_blank">
+              <img
+                src={
+                  iconUrl?.startsWith('/public')
+                    ? apiClient.buildEndpoint(iconUrl)
+                    : iconUrl
+                }
+                className={'h-6 w-6'}
+                alt={name}
+              />
+            </a>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{name}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

frontend/src/components/header/index.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAudio, useAuth, useConfig } from '@chainlit/react-client';
 
 import AudioPresence from '@/components/AudioPresence';
+import ButtonLink from '@/components/ButtonLink';
 import { useSidebar } from '@/components/ui/sidebar';
 
 import ApiKeys from './ApiKeys';
@@ -25,6 +26,8 @@ const Header = memo(() => {
 
   const historyEnabled = data?.requireLogin && config?.dataPersistence;
 
+  const links = config?.ui?.header_links || [];
+
   return (
     <div
       className="p-3 flex h-[60px] items-center justify-between gap-2 relative"
@@ -59,6 +62,9 @@ const Header = memo(() => {
       <div className="flex items-center gap-1">
         <ReadmeButton />
         <ApiKeys />
+        {links && (
+           links.map(link => <ButtonLink name={link.name} iconUrl={link.icon_url} url={link.url}/>)
+        )}
         <ThemeToggle />
         <UserNav />
       </div>

libs/react-client/src/types/config.ts

@@ -39,6 +39,7 @@ export interface IChainlitConfig {
     custom_js?: string;
     custom_font?: string;
     custom_meta_image_url?: string;
+    header_links?: { name: string; icon_url: string, url: string }[];
   };
   features: {
     spontaneous_file_upload?: {