diff --git a/frontend/src/routes/_oh.app/hooks/use-handle-runtime-active.ts b/frontend/src/routes/_oh.app/hooks/use-handle-runtime-active.ts
index 08f3c3e5a9fb..246d3794ad3a 100644
--- a/frontend/src/routes/_oh.app/hooks/use-handle-runtime-active.ts
+++ b/frontend/src/routes/_oh.app/hooks/use-handle-runtime-active.ts
@@ -1,31 +1,44 @@
import React from "react";
-import { useSelector } from "react-redux";
-import { useAuth } from "#/context/auth-context";
-import { useWsClient } from "#/context/ws-client-provider";
-import { getGitHubTokenCommand } from "#/services/terminal-service";
+import toast from "react-hot-toast";
+import { useDispatch, useSelector } from "react-redux";
+import { setImportedProjectZip } from "#/state/initial-query-slice";
import { RootState } from "#/store";
-import { useGitHubUser } from "../../../hooks/query/use-github-user";
-import { isGitHubErrorReponse } from "#/api/github-axios-instance";
+import { base64ToBlob } from "#/utils/base64-to-blob";
+import { useUploadFiles } from "../../../hooks/mutation/use-upload-files";
+
import { RUNTIME_INACTIVE_STATES } from "#/types/agent-state";
export const useHandleRuntimeActive = () => {
- const { gitHubToken } = useAuth();
- const { send } = useWsClient();
- const { curAgentState } = useSelector((state: RootState) => state.agent);
+ const dispatch = useDispatch();
- const { data: user } = useGitHubUser();
+ const { mutate: uploadFiles } = useUploadFiles();
+ const { curAgentState } = useSelector((state: RootState) => state.agent);
const runtimeActive = !RUNTIME_INACTIVE_STATES.includes(curAgentState);
- const userId = React.useMemo(() => {
- if (user && !isGitHubErrorReponse(user)) return user.id;
- return null;
- }, [user]);
+ const { importedProjectZip } = useSelector(
+ (state: RootState) => state.initialQuery,
+ );
+
+ const handleUploadFiles = (zip: string) => {
+ const blob = base64ToBlob(zip);
+ const file = new File([blob], "imported-project.zip", {
+ type: blob.type,
+ });
+ uploadFiles(
+ { files: [file] },
+ {
+ onError: () => {
+ toast.error("Failed to upload project files.");
+ },
+ },
+ );
+ dispatch(setImportedProjectZip(null));
+ };
React.useEffect(() => {
- if (runtimeActive && userId && gitHubToken) {
- // Export if the user valid, this could happen mid-session so it is handled here
- send(getGitHubTokenCommand(gitHubToken));
+ if (runtimeActive && importedProjectZip) {
+ handleUploadFiles(importedProjectZip);
}
- }, [userId, gitHubToken, runtimeActive]);
+ }, [runtimeActive, importedProjectZip]);
};
diff --git a/frontend/src/routes/_oh.app/route.tsx b/frontend/src/routes/_oh.app/route.tsx
index 73c50f5d8a7d..701d6b3edb1e 100644
--- a/frontend/src/routes/_oh.app/route.tsx
+++ b/frontend/src/routes/_oh.app/route.tsx
@@ -2,6 +2,7 @@ import { useDisclosure } from "@nextui-org/react";
import React from "react";
import { Outlet } from "react-router";
import { useDispatch, useSelector } from "react-redux";
+import { FaServer } from "react-icons/fa";
import toast from "react-hot-toast";
import {
ConversationProvider,
@@ -20,7 +21,6 @@ import { FilesProvider } from "#/context/files";
import { ChatInterface } from "../../components/features/chat/chat-interface";
import { WsClientProvider } from "#/context/ws-client-provider";
import { EventHandler } from "./event-handler";
-import { useLatestRepoCommit } from "#/hooks/query/use-latest-repo-commit";
import { useAuth } from "#/context/auth-context";
import { useConversationConfig } from "#/hooks/query/use-conversation-config";
import { Container } from "#/components/layout/container";
@@ -30,38 +30,27 @@ import {
} from "#/components/layout/resizable-panel";
import Security from "#/components/shared/modals/security/security";
import { useEndSession } from "#/hooks/use-end-session";
-import { useUserConversation } from "#/hooks/query/get-conversation-permissions";
+import { useUserConversation } from "#/hooks/query/use-user-conversation";
import { CountBadge } from "#/components/layout/count-badge";
+import { ServedAppLabel } from "#/components/layout/served-app-label";
import { TerminalStatusLabel } from "#/components/features/terminal/terminal-status-label";
import { useSettings } from "#/hooks/query/use-settings";
-import { MULTI_CONVO_UI_IS_ENABLED } from "#/utils/constants";
+import { MULTI_CONVERSATION_UI } from "#/utils/feature-flags";
function AppContent() {
+ useConversationConfig();
const { gitHubToken } = useAuth();
const { data: settings } = useSettings();
-
- const endSession = useEndSession();
- const [width, setWidth] = React.useState(window.innerWidth);
-
const { conversationId } = useConversation();
-
- const dispatch = useDispatch();
-
- useConversationConfig();
const { data: conversation, isFetched } = useUserConversation(
conversationId || null,
);
+ const dispatch = useDispatch();
+ const endSession = useEndSession();
- const { selectedRepository } = useSelector(
- (state: RootState) => state.initialQuery,
- );
-
+ const [width, setWidth] = React.useState(window.innerWidth);
const { updateCount } = useSelector((state: RootState) => state.browser);
- const { data: latestGitHubCommit } = useLatestRepoCommit({
- repository: selectedRepository,
- });
-
const secrets = React.useMemo(
() => [gitHubToken].filter((secret) => secret !== null),
[gitHubToken],
@@ -73,7 +62,7 @@ function AppContent() {
);
React.useEffect(() => {
- if (MULTI_CONVO_UI_IS_ENABLED && isFetched && !conversation) {
+ if (MULTI_CONVERSATION_UI && isFetched && !conversation) {
toast.error(
"This conversation does not exist, or you do not have permission to access it.",
);
@@ -139,6 +128,11 @@ function AppContent() {
labels={[
{ label: "Workspace", to: "", icon:
},
{ label: "Jupyter", to: "jupyter", icon:
},
+ {
+ label:
,
+ to: "served",
+ icon:
,
+ },
{
label: (
@@ -175,23 +169,22 @@ function AppContent() {
}
return (
-
+
{renderMain()}
-
-
-
-
+ {settings && (
+
+ )}
diff --git a/frontend/src/routes/_oh/route.tsx b/frontend/src/routes/_oh/route.tsx
index 47e5ffe52e22..ca5868d15572 100644
--- a/frontend/src/routes/_oh/route.tsx
+++ b/frontend/src/routes/_oh/route.tsx
@@ -63,10 +63,10 @@ export default function MainApp() {
});
React.useEffect(() => {
- if (settings.LANGUAGE) {
+ if (settings?.LANGUAGE) {
i18n.changeLanguage(settings.LANGUAGE);
}
- }, [settings.LANGUAGE]);
+ }, [settings?.LANGUAGE]);
const isInWaitlist =
!isFetchingAuth && !isAuthed && config.data?.APP_MODE === "saas";
@@ -78,7 +78,10 @@ export default function MainApp() {
>
-
+
diff --git a/frontend/src/routes/app.tsx b/frontend/src/routes/app.tsx
new file mode 100644
index 000000000000..e44ac6947d36
--- /dev/null
+++ b/frontend/src/routes/app.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import { FaArrowRotateRight } from "react-icons/fa6";
+import { FaExternalLinkAlt, FaHome } from "react-icons/fa";
+import { useActiveHost } from "#/hooks/query/use-active-host";
+import { PathForm } from "#/components/features/served-host/path-form";
+
+function ServedApp() {
+ const { activeHost } = useActiveHost();
+ const [refreshKey, setRefreshKey] = React.useState(0);
+ const [currentActiveHost, setCurrentActiveHost] = React.useState<
+ string | null
+ >(null);
+ const [path, setPath] = React.useState
("hello");
+
+ const formRef = React.useRef(null);
+
+ const handleOnBlur = () => {
+ if (formRef.current) {
+ const formData = new FormData(formRef.current);
+ const urlInputValue = formData.get("url")?.toString();
+
+ if (urlInputValue) {
+ const url = new URL(urlInputValue);
+
+ setCurrentActiveHost(url.origin);
+ setPath(url.pathname);
+ }
+ }
+ };
+
+ const resetUrl = () => {
+ setCurrentActiveHost(activeHost);
+ setPath("");
+
+ if (formRef.current) {
+ formRef.current.reset();
+ }
+ };
+
+ React.useEffect(() => {
+ resetUrl();
+ }, [activeHost]);
+
+ const fullUrl = `${currentActiveHost}/${path}`;
+
+ if (!currentActiveHost) {
+ return (
+
+
+ If you tell OpenHands to start a web server, the app will appear here.
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
}
- {repoName}
-