add agent iframe page for external links

Author: ragingwind

react/src/App.tsx

@@ -79,6 +79,7 @@ const SessionDetailAndContainerLogOpenerLegacy = React.lazy(
 const ChatPage = React.lazy(() => import('./pages/ChatPage'));
 
 const AIAgentPage = React.lazy(() => import('./pages/AIAgentPage'));
+const AIAgentIFramePage = React.lazy(() => import('./pages/AIAgentIFramePage'));
 
 interface CustomHandle {
   title?: string;
@@ -514,6 +515,15 @@ const router = createBrowserRouter([
           );
         },
       },
+      {
+        path: '/ai-agent/external',
+        handle: { labelKey: 'webui.menu.AIAgents' },
+        Component: () => (
+          <Suspense fallback={<Skeleton active />}>
+            <AIAgentIFramePage />
+          </Suspense>
+        ),
+      },
     ],
   },
 ]);

react/src/pages/AIAgentIFramePage.tsx

@@ -0,0 +1,31 @@
+import { Skeleton, theme } from 'antd';
+import React, { Suspense } from 'react';
+import { StringParam, useQueryParams } from 'use-query-params';
+
+const AIAgentIFramePage: React.FC = () => {
+  const { token } = theme.useToken();
+  const [{ url }] = useQueryParams({
+    url: StringParam,
+  });
+
+  return (
+    <Suspense
+      fallback={<Skeleton active style={{ padding: token.paddingMD }} />}
+    >
+      {url && (
+        <iframe
+          src={url}
+          title="AI Agent Content"
+          style={{
+            width: '100%',
+            height: '100vh',
+            border: 'none',
+            borderRadius: token.borderRadius,
+          }}
+        />
+      )}
+    </Suspense>
+  );
+};
+
+export default AIAgentIFramePage;

react/src/pages/AIAgentPage.tsx

@@ -111,62 +111,25 @@ const AIAgentPage: React.FC = () => {
   const { token } = theme.useToken();
   const { agents } = useAIAgent();
   const webuiNavigate = useWebUINavigate();
-  const [iframeUrl, setIframeUrl] = React.useState<string | undefined>(
-    undefined,
-  );
-
-  React.useEffect(() => {
-    const handlePopState = () => {
-      if (iframeUrl) {
-        setIframeUrl(undefined);
-      }
-    };
-
-    window.addEventListener('popstate', handlePopState);
-
-    return () => {
-      window.removeEventListener('popstate', handlePopState);
-    };
-  }, [iframeUrl]);
 
   return (
     <Suspense
       fallback={<Skeleton active style={{ padding: token.paddingMD }} />}
     >
-      {iframeUrl ? (
-        <iframe
-          src={iframeUrl}
-          title="AI Agent Content"
-          style={{
-            width: '100%',
-            height: '100vh',
-            border: 'none',
-            borderRadius: token.borderRadius,
-          }}
-          onLoad={() => {
-            window.history.pushState(
-              null,
-              '',
-              window.location.href + '#iframe',
-            );
+      <Flex direction="column" align="stretch" justify="center" gap="lg">
+        <AIAgentCardList
+          agents={agents}
+          onClickAgent={(agent) => {
+            if (agent.type === 'external') {
+              webuiNavigate(`/ai-agent/external?url=${agent.config.url}`);
+            } else {
+              webuiNavigate(
+                `/chat?endpointId=${agent.endpoint_id}&agentId=${agent.id}`,
+              );
+            }
           }}
         />
-      ) : (
-        <Flex direction="column" align="stretch" justify="center" gap="lg">
-          <AIAgentCardList
-            agents={agents}
-            onClickAgent={(agent) => {
-              if (agent.type === 'external') {
-                setIframeUrl(agent.config.url);
-              } else {
-                webuiNavigate(
-                  `/chat?endpointId=${agent.endpoint_id}&agentId=${agent.id}`,
-                );
-              }
-            }}
-          />
-        </Flex>
-      )}
+      </Flex>
     </Suspense>
   );
 };