From a082d6faeeeb787d0f58b0cf0b546098f1a1c15d Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <46546486+ryanhopperlowe@users.noreply.github.com>
Date: Fri, 15 Nov 2024 14:38:16 -0600
Subject: [PATCH] feat: open agent refname url in new tab from agent page
 (#604)

---
 .../components/agent/AgentPublishStatus.tsx   | 25 +++++++++++---
 ui/admin/app/components/composed/CopyText.tsx | 34 +++++++++++--------
 ui/admin/app/lib/routers/baseRouter.ts        |  4 +++
 3 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/ui/admin/app/components/agent/AgentPublishStatus.tsx b/ui/admin/app/components/agent/AgentPublishStatus.tsx
index deb976d95..5dfdfd684 100644
--- a/ui/admin/app/components/agent/AgentPublishStatus.tsx
+++ b/ui/admin/app/components/agent/AgentPublishStatus.tsx
@@ -4,6 +4,7 @@ import { $path } from "remix-routes";
 import useSWR from "swr";
 
 import { AgentBase } from "~/lib/model/agents";
+import { ConsumptionUrl } from "~/lib/routers/baseRouter";
 import { AssistantApiService } from "~/lib/service/api/assistantApiService";
 
 import { TypographySmall } from "~/components/Typography";
@@ -86,12 +87,26 @@ export function AgentPublishStatus({
 
         if (!agent.refNameAssigned) return <div />;
 
+        const agentUrl = ConsumptionUrl(`/${agent.refName}`);
+
         return (
-            <CopyText
-                className="h-8 text-muted-foreground text-sm bg-background flex-row-reverse"
-                holdStatusDelay={10000}
-                text={`${window.location.protocol}//${window.location.host}/${agent.refName}`}
-            />
+            <div className="flex items-center gap-2">
+                <CopyText
+                    className="h-8 text-muted-foreground text-sm bg-background flex-row-reverse"
+                    holdStatusDelay={6000}
+                    text={agentUrl}
+                    iconOnly
+                />
+
+                <Link
+                    target="_blank"
+                    rel="noreferrer"
+                    className="text-muted-foreground underline"
+                    to={agentUrl}
+                >
+                    {agentUrl}
+                </Link>
+            </div>
         );
     }
 }
diff --git a/ui/admin/app/components/composed/CopyText.tsx b/ui/admin/app/components/composed/CopyText.tsx
index eba4aa893..d8f057d99 100644
--- a/ui/admin/app/components/composed/CopyText.tsx
+++ b/ui/admin/app/components/composed/CopyText.tsx
@@ -17,11 +17,13 @@ export function CopyText({
     displayText = text,
     className,
     holdStatusDelay,
+    iconOnly,
 }: {
     text: string;
     displayText?: string;
     className?: string;
     holdStatusDelay?: number;
+    iconOnly?: boolean;
 }) {
     const [isCopied, setIsCopied] = useState(false);
 
@@ -40,22 +42,24 @@ export function CopyText({
                 className
             )}
         >
-            <Tooltip>
-                <TooltipTrigger
-                    type="button"
-                    onClick={() => handleCopy(text)}
-                    className="decoration-dotted underline-offset-4 underline text-ellipsis overflow-hidden text-nowrap"
-                >
-                    <TypographyP className="truncate break-words p-2">
-                        {displayText}
-                    </TypographyP>
-                </TooltipTrigger>
+            {!iconOnly && (
+                <Tooltip>
+                    <TooltipTrigger
+                        type="button"
+                        onClick={() => handleCopy(text)}
+                        className="decoration-dotted underline-offset-4 underline text-ellipsis overflow-hidden text-nowrap"
+                    >
+                        <TypographyP className="truncate break-words p-2">
+                            {displayText}
+                        </TypographyP>
+                    </TooltipTrigger>
 
-                <TooltipContent>
-                    <b>Copy: </b>
-                    {text}
-                </TooltipContent>
-            </Tooltip>
+                    <TooltipContent>
+                        <b>Copy: </b>
+                        {text}
+                    </TooltipContent>
+                </Tooltip>
+            )}
 
             <Button
                 size="icon"
diff --git a/ui/admin/app/lib/routers/baseRouter.ts b/ui/admin/app/lib/routers/baseRouter.ts
index 24f2bc1f7..b7a1a98c6 100644
--- a/ui/admin/app/lib/routers/baseRouter.ts
+++ b/ui/admin/app/lib/routers/baseRouter.ts
@@ -16,3 +16,7 @@ export const ApiUrl = () => {
 
     return window.location.origin + "/api";
 };
+
+export const ConsumptionUrl = (route: string) => {
+    return window.location.protocol + "//" + window.location.host + route;
+};