feat(ui): add agent share button (#1323)

Signed-off-by: Petr Kadlec <petr@puradesign.cz>

Author: kapetr

apps/beeai-ui/src/components/AppHeader/AgentShareButton.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Share } from '@carbon/icons-react';
+import { Button } from '@carbon/react';
+import { useCopyToClipboard } from 'usehooks-ts';
+
+import { useToast } from '#contexts/Toast/index.ts';
+import type { Agent } from '#modules/agents/api/types.ts';
+import { routes } from '#utils/router.ts';
+
+interface Props {
+  agent: Agent;
+}
+
+export function AgentShareButton({ agent }: Props) {
+  const [, copy] = useCopyToClipboard();
+  const { addToast } = useToast();
+
+  const handleShare = () => {
+    copy(`${window.location.origin}${routes.agentRun({ providerId: agent.provider.id })}`);
+    addToast({ kind: 'info', title: 'Link has been copied to clipboard!' });
+  };
+
+  return (
+    <Button kind="tertiary" size="sm" renderIcon={Share} onClick={handleShare}>
+      Share agent
+    </Button>
+  );
+}

apps/beeai-ui/src/components/AppHeader/AppHeader.module.scss

@@ -28,6 +28,8 @@
   line-height: math.div(20, 14);
 }
 
-.agentDetailButtonContainer {
-  text-align: end;
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: $spacing-03;
 }

apps/beeai-ui/src/components/AppHeader/AppHeader.tsx

@@ -14,6 +14,7 @@ import { isNotNull } from '#utils/helpers.ts';
 
 import { Container } from '../layouts/Container';
 import { AgentDetailButton } from './AgentDetailButton';
+import { AgentShareButton } from './AgentShareButton';
 import classes from './AppHeader.module.scss';
 import { AppHeaderNav } from './AppHeaderNav';
 
@@ -39,7 +40,8 @@ export function AppHeader({ className }: Props) {
             <>
               <p className={classes.agentName}>{agent.name}</p>
 
-              <div className={classes.agentDetailButtonContainer}>
+              <div className={classes.buttons}>
+                <AgentShareButton agent={agent} />
                 <AgentDetailButton />
               </div>
             </>

apps/beeai-ui/src/components/Tooltip/Tooltip.tsx

@@ -34,9 +34,19 @@ interface Props {
   placement?: Placement;
   size?: 'sm' | 'md' | 'lg';
   asChild?: boolean;
+  isEnabled?: boolean;
+  isOpen?: boolean;
 }
 
-export function Tooltip({ content, placement = 'bottom', size = 'md', asChild, children }: PropsWithChildren<Props>) {
+export function Tooltip({
+  content,
+  placement = 'bottom',
+  size = 'md',
+  asChild,
+  isEnabled = true,
+  isOpen: isOpenControlled,
+  children,
+}: PropsWithChildren<Props>) {
   const arrowRef = useRef(null);
 
   const SIZE = {
@@ -59,10 +69,12 @@ export function Tooltip({ content, placement = 'bottom', size = 'md', asChild, c
 
   const [isOpen, setIsOpen] = useState(false);
 
+  const isControlled = isOpenControlled !== undefined;
+
   const { refs, floatingStyles, context } = useFloating({
     placement,
-    open: isOpen,
-    onOpenChange: setIsOpen,
+    open: isControlled ? isOpenControlled : isOpen,
+    onOpenChange: isControlled ? undefined : setIsOpen,
     whileElementsMounted: autoUpdate,
     middleware: [
       offset(SIZE.ArrowHeight + SIZE.Offset),
@@ -76,8 +88,12 @@ export function Tooltip({ content, placement = 'bottom', size = 'md', asChild, c
     ],
   });
 
-  const hover = useHover(context, { move: false, handleClose: safePolygon() });
-  const focus = useFocus(context);
+  const hover = useHover(context, {
+    move: false,
+    handleClose: safePolygon(),
+    enabled: !isControlled,
+  });
+  const focus = useFocus(context, { enabled: !isControlled });
   const dismiss = useDismiss(context);
   const role = useRole(context, { role: 'tooltip' });
 
@@ -91,7 +107,7 @@ export function Tooltip({ content, placement = 'bottom', size = 'md', asChild, c
         {children}
       </Comp>
 
-      {isOpen && (
+      {(isControlled ? isOpenControlled : isOpen) && isEnabled && (
         <FloatingPortal>
           <div
             ref={refs.setFloating}