Add app object in action args

Author: Shellishack

npm-packages/shared-utils/src/types/types.ts

@@ -208,6 +208,10 @@ export type TypedVariableType =
   | "number"
   | "boolean"
   | "any"
+  // An app instance is a reference to another app.
+  // This instance could be possessed by the owner,
+  // or it can be initialized by the caller.
+  | "app-instance"
   | TypedVariableObjectType
   | TypedVariableArrayType;
 

web/components/app-loaders/sandbox-app-loader.tsx

@@ -2,10 +2,11 @@ import BaseAppLoader from "@/components/app-loaders/base-app-loader";
 import Loading from "@/components/interface/status-screens/loading";
 import { EditorContext } from "@/components/providers/editor-context-provider";
 import { IMCContext } from "@/components/providers/imc-provider";
-import { PlatformEnum } from "@/lib/enums";
+import { DragEventTypeEnum, PlatformEnum } from "@/lib/enums";
 import { usePlatformApi } from "@/lib/hooks/use-platform-api";
 import { getPlatform } from "@/lib/platform-api/platform-checker";
-import { ExtensionApp } from "@/lib/types";
+import { ExtensionApp, FileDragData } from "@/lib/types";
+import { addToast } from "@heroui/react";
 import {
   AppTypeEnum,
   ConnectionListener,
@@ -310,7 +311,56 @@ export default function SandboxAppLoader({
   }
 
   return (
-    <div className="relative h-full w-full">
+    <div
+      className="relative h-full w-full"
+      onDragOver={(e) => {
+        e.stopPropagation();
+        const types = e.dataTransfer.types;
+        if (
+          types.includes(`application/${DragEventTypeEnum.File.toLowerCase()}`)
+        ) {
+          e.preventDefault(); // allow drop
+          e.dataTransfer.dropEffect = "move";
+        } else {
+          e.dataTransfer.dropEffect = "none";
+        }
+      }}
+      onDrop={async (e) => {
+        const dataText = e.dataTransfer.getData(
+          `application/${DragEventTypeEnum.File.toLowerCase()}`,
+        );
+        if (!dataText) {
+          return;
+        }
+        console.log("Dropped item:", dataText);
+        try {
+          const data = JSON.parse(dataText) as FileDragData;
+
+          e.preventDefault();
+          const uri = data.uri;
+
+          // Send uri to app view
+          await imcContext?.polyIMC?.sendMessage(
+            viewModel.viewId,
+            IMCMessageTypeEnum.EditorAppReceiveFileUri,
+            {
+              uri,
+            },
+          );
+        } catch (error) {
+          addToast({
+            title: "Failed to open file",
+            description: "The dropped file data is invalid.",
+            color: "danger",
+          });
+        } finally {
+          editorContext?.setEditorStates((prev) => ({
+            ...prev,
+            isDraggingOverCanvas: false,
+          }));
+        }
+      }}
+    >
       {isLookingForExtension ? (
         <div className="bg-content1 h-full w-full">
           <Loading />
@@ -324,7 +374,12 @@ export default function SandboxAppLoader({
           </p>
         </div>
       ) : (
-        <div className="relative h-full w-full">
+        <div
+          className="relative h-full w-full data-[is-dragging-file=true]:pointer-events-none"
+          data-is-dragging-file={
+            editorContext?.editorStates.isDraggingOverCanvas ? "true" : "false"
+          }
+        >
           {isLoadingExtension && (
             <div className="bg-content1 absolute top-0 left-0 h-full w-full">
               <Loading />

web/components/interface/status-screens/loading.tsx

@@ -2,10 +2,10 @@ import { Progress } from "@heroui/react";
 
 export default function Loading({ text = "Loading..." }: { text?: string }) {
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center dark:bg-[#27272A]">
+    <div className="flex h-full w-full flex-col items-center justify-center">
       <Progress
         isIndeterminate={true}
-        className="w-1/2 text-black dark:text-white"
+        className="w-1/2 text-default-foreground"
         color="default"
         size="md"
         label={text}

web/components/views/base/base-app-view.tsx

@@ -1,6 +1,5 @@
 import Loading from "@/components/interface/status-screens/loading";
 import NotAuthorized from "@/components/interface/status-screens/not-authorized";
-import { EditorContext } from "@/components/providers/editor-context-provider";
 import { IMCContext } from "@/components/providers/imc-provider";
 import useExtensionManager from "@/lib/hooks/use-extension-manager";
 import { AppViewConfig, ExtensionApp } from "@/lib/types";
@@ -15,7 +14,6 @@ export default function BaseAppView({
   config: AppViewConfig;
   viewId: string;
 }) {
-  const editorContext = useContext(EditorContext);
   const imcContext = useContext(IMCContext);
 
   const {
@@ -86,7 +84,7 @@ export default function BaseAppView({
   }, [config, installExtension, isOpened]);
 
   return noAccessToApp ? (
-    <div className="bg-content1 h-full w-full">
+    <div className="bg-content3 h-full w-full">
       <NotAuthorized />
     </div>
   ) : !pulseAppViewModel ? (

web/components/views/canvas/canvas-view.tsx

@@ -1,16 +1,19 @@
 import PublishWorkflowModal from "@/components/modals/publish-workflow-modal";
 import { EditorContext } from "@/components/providers/editor-context-provider";
+import { DragEventTypeEnum } from "@/lib/enums";
 import { useRegisterMenuAction } from "@/lib/hooks/menu-actions/use-register-menu-action";
 import { useAppInfo } from "@/lib/hooks/use-app-info";
 import useCanvasWorkflow from "@/lib/hooks/use-canvas-workflow";
 import { useTabViewManager } from "@/lib/hooks/use-tab-view-manager";
 import {
+  AppDragData,
   AppInfoModalContent,
   AppNodeData,
   AppViewConfig,
   CanvasViewConfig,
+  ExtensionApp,
 } from "@/lib/types";
-import { Button } from "@heroui/react";
+import { addToast, Button } from "@heroui/react";
 import {
   addEdge,
   applyEdgeChanges,
@@ -28,7 +31,16 @@ import {
   useViewport,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useTheme } from "next-themes";
+import {
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { v4 } from "uuid";
 import Icon from "../../misc/icon";
 import AppNode from "./nodes/app-node/app-node";
 import "./theme.css";
@@ -63,7 +75,7 @@ export default function CanvasView({
   const editorContext = useContext(EditorContext);
 
   const { openAppInfoModal } = useAppInfo();
-
+  const { resolvedTheme } = useTheme();
   const {
     localEdges,
     localNodes,
@@ -76,7 +88,8 @@ export default function CanvasView({
   } = useCanvasWorkflow(config.initialWorkflowContent);
   const viewport = useViewport();
   const { screenToFlowPosition } = useReactFlow();
-  const { deleteAppViewInCanvasView } = useTabViewManager();
+  const { deleteAppViewInCanvasView, createAppViewInCanvasView } =
+    useTabViewManager();
 
   const [isPublishModalOpen, setIsPublishModalOpen] = useState(false);
 
@@ -270,6 +283,50 @@ export default function CanvasView({
       ref={containerRef}
       className="bg-content3 text-content3-foreground relative h-full w-full"
       id={config.viewId}
+      onDragOver={(e) => {
+        const types = e.dataTransfer.types;
+        if (
+          types.includes(`application/${DragEventTypeEnum.App.toLowerCase()}`)
+        ) {
+          e.preventDefault(); // allow drop
+          e.dataTransfer.dropEffect = "copy";
+        } else {
+          e.dataTransfer.dropEffect = "none";
+        }
+      }}
+      onDrop={(e) => {
+        const dataText = e.dataTransfer.getData(
+          `application/${DragEventTypeEnum.App.toLowerCase()}`,
+        );
+        if (!dataText) {
+          return;
+        }
+        console.log("Dropped item:", dataText);
+        try {
+          const data = JSON.parse(dataText) as AppDragData;
+          e.preventDefault();
+
+          const app: ExtensionApp = data.app;
+          const config: AppViewConfig = {
+            app: app.config.id,
+            viewId: `${app.config.id}-${v4()}`,
+            recommendedHeight: app.config.recommendedHeight,
+            recommendedWidth: app.config.recommendedWidth,
+          };
+          createAppViewInCanvasView(config);
+        } catch (error) {
+          addToast({
+            title: "Failed to open app",
+            description: "The dropped app data is invalid.",
+            color: "danger",
+          });
+        } finally {
+          editorContext?.setEditorStates((prev) => ({
+            ...prev,
+            isDraggingOverCanvas: false,
+          }));
+        }
+      }}
     >
       <ReactFlow
         nodes={localNodes ?? []}
@@ -297,6 +354,7 @@ export default function CanvasView({
         }}
         maxZoom={4}
         minZoom={0.1}
+        colorMode={resolvedTheme === "dark" ? "dark" : "light"}
       >
         <Background id={config.viewId} variant={BackgroundVariant.Dots} />
       </ReactFlow>
@@ -323,3 +381,16 @@ export default function CanvasView({
     </div>
   );
 }
+
+export const MemoizedCanvasView = memo(
+  ({
+    config,
+    isActive,
+    tabName,
+  }: {
+    config: CanvasViewConfig;
+    isActive: boolean;
+    tabName: string;
+  }) => <CanvasView config={config} isActive={isActive} tabName={tabName} />,
+);
+MemoizedCanvasView.displayName = "MemoizedCanvasView";