fix up iframe

All-Hands-AI · Jan 1, 2025 · 6d078f8 · 6d078f8
1 parent 6ebdf16
commit 6d078f8
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 25 deletions.
diff --git a/frontend/src/components/layout/served-app-label.tsx b/frontend/src/components/layout/served-app-label.tsx
@@ -4,22 +4,22 @@ import { useActiveHost } from "#/hooks/query/use-active-host";
 export function ServedAppLabel() {
   const { activeHost } = useActiveHost();
 
+  function openAppInNewTab() {
+    window.open(activeHost, "_blank");
+  }
+
   return (
     <div className="flex items-center justify-between w-full">
       <div className="flex items-center gap-2">App</div>
       {activeHost && (
-        <a
-          href={activeHost}
-          target="_blank"
-          rel="noreferrer"
+        <span
+          onClick={openAppInNewTab}
           className="flex items-center gap-2"
         >
-          <span className="text-green-500">Online</span>
           <div className="flex items-center gap-1">
             <FaExternalLinkAlt fill="#a3a3a3" />
-            <code className="text-xs">{activeHost.split(":").pop()}</code>
           </div>
-        </a>
+        </span>
       )}
     </div>
   );

diff --git a/frontend/src/hooks/query/use-active-host.ts b/frontend/src/hooks/query/use-active-host.ts
@@ -26,25 +26,28 @@ export const useActiveHost = () => {
   });
 
   const apps = useQueries({
-    queries: data.hosts.map((port) => ({
-      queryKey: [conversationId, "hosts", port],
-      queryFn: async () => axios.get(port),
+    queries: data.hosts.map((host) => ({
+      queryKey: [conversationId, "hosts", host],
+      queryFn: async () => {
+        console.log('querying host', host);
+        try {
+          await axios.get(host);
+          return host;
+        } catch (e) {
+          return '';
+        }
+      },
       refetchInterval: 3000,
     })),
   });
 
-  const success = apps.map((app) => app.isSuccess);
-
   React.useEffect(() => {
-    const successfulApp = apps.find((app) => app.isSuccess);
-    if (successfulApp) {
-      const index = apps.indexOf(successfulApp);
-      const port = data.hosts[index];
-      setActiveHost(port);
-    } else {
-      setActiveHost(null);
-    }
-  }, [success, data]);
+    console.log('apps', apps);
+    const successfulApp = apps.find((app) => app.data);
+    console.log('successfulApp', successfulApp);
+    // Here's the change - use empty string as fallback instead of null
+    setActiveHost(successfulApp?.data || '');
+  }, [apps]);
 
   return { activeHost };
 };
diff --git a/frontend/src/routes/app.tsx b/frontend/src/routes/app.tsx
@@ -5,9 +5,9 @@ function ServedApp() {
 
   if (!activeHost) {
     return (
-      <div className="flex items-center justify-center w-full h-full">
-        <span className="text-4xl text-neutral-400 font-bold">
-          Nothing to see here.
+      <div className="flex items-center justify-center w-full h-full p-10">
+        <span className="text-neutral-400 font-bold">
+          If you tell OpenHands to start a web server, the app will appear here.
         </span>
       </div>
     );

diff --git a/openhands/agenthub/codeact_agent/prompts/system_prompt.j2 b/openhands/agenthub/codeact_agent/prompts/system_prompt.j2
@@ -17,6 +17,7 @@ each of which has a corresponding port:
 {% for host in runtime_info.available_hosts -%}
 * {{ host }}
 {% endfor %}
-When starting a web server, use the corresponding ports.
+When starting a web server, use the corresponding ports. You should also
+set any options to allow iframes and CORS requests.
 </RUNTIME_INFORMATION>
 {% endif %}