fix: Publish URL showing based on aliasAssigned and entityID check (#693

) * fix: Update agent and publish URL showing correctly based on aliasAssigned * fix: update useEffect, avoid agentUpdates dependency Update Agent.tsx
otto8-ai · Nov 26, 2024 · 5c4d37e · 5c4d37e
1 parent ad8adcc
commit 5c4d37e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/ui/admin/app/components/agent/Agent.tsx b/ui/admin/app/components/agent/Agent.tsx
@@ -1,5 +1,5 @@
 import { LibraryIcon, PlusIcon, WrenchIcon } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { Agent as AgentType } from "~/lib/model/agents";
 import { cn } from "~/lib/utils";
@@ -27,6 +27,19 @@ export function Agent({ className, onRefresh }: AgentProps) {
 
     const [agentUpdates, setAgentUpdates] = useState(agent);
 
+    useEffect(() => {
+        setAgentUpdates((prev) => {
+            if (agent.id === prev.id) {
+                return {
+                    ...prev,
+                    aliasAssigned: agent.aliasAssigned ?? false,
+                };
+            }
+
+            return agent;
+        });
+    }, [agent]);
+
     const partialSetAgent = useCallback(
         (changes: Partial<typeof agent>) => {
             const updatedAgent = { ...agent, ...agentUpdates, ...changes };

diff --git a/ui/admin/app/components/agent/AgentContext.tsx b/ui/admin/app/components/agent/AgentContext.tsx
@@ -58,7 +58,7 @@ export function AgentProvider({
         <AgentContext.Provider
             value={{
                 agentId,
-                agent,
+                agent: getAgent.data ?? agent,
                 updateAgent: updateAgent.execute,
                 isUpdating: updateAgent.isLoading,
                 lastUpdated,

diff --git a/ui/admin/app/components/agent/AgentPublishStatus.tsx b/ui/admin/app/components/agent/AgentPublishStatus.tsx
@@ -29,7 +29,7 @@ export function AgentPublishStatus({
         () => AssistantApiService.getAssistants()
     );
 
-    const refAgent = useMemo(() => {
+    const refAssistant = useMemo(() => {
         if (!getAssistants.data) return null;
 
         return getAssistants.data.find(({ id }) => id === agent.alias);
@@ -53,14 +53,14 @@ export function AgentPublishStatus({
     function renderAgentRef() {
         if (!agent.alias) return <div />;
 
-        if (refAgent && refAgent.id !== agent.id) {
+        if (refAssistant && refAssistant.entityID !== agent.id) {
             const route =
-                refAgent.type === "agent"
+                refAssistant.type === "agent"
                     ? $path("/agents/:agent", {
-                          agent: refAgent.entityID,
+                          agent: refAssistant.entityID,
                       })
                     : $path("/workflows/:workflow", {
-                          workflow: refAgent.entityID,
+                          workflow: refAssistant.entityID,
                       });
 
             return (
@@ -72,13 +72,13 @@ export function AgentPublishStatus({
 
                     <TypographySmall className="pb-0 text-muted-foreground">
                         <span className="min-w-fit">
-                            Ref name <b>{refAgent.id}</b> used by{" "}
+                            Ref name <b>{refAssistant.id}</b> used by{" "}
                         </span>
                         <Link
                             className="text-accent-foreground underline"
                             to={route}
                         >
-                            {refAgent.name}
+                            {refAssistant.name}
                         </Link>
                     </TypographySmall>
                 </div>