Fix PolyIMC bug that it won't handle multiple IMC from the same view …

npm-packages/react-api/eslint.config.js

@@ -1,7 +1,7 @@
-import globals from "globals";
 import pluginJs from "@eslint/js";
-import tseslint from "typescript-eslint";
 import pluginReact from "eslint-plugin-react";
+import globals from "globals";
+import tseslint from "typescript-eslint";
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
@@ -26,4 +26,12 @@ export default [
       "@typescript-eslint/no-unused-vars": "off",
     },
   },
+  {
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
+        project: "./tsconfig.json",
+      },
+    },
+  },
 ];

npm-packages/react-api/src/hooks/agent/use-agent-tools.ts

@@ -1,5 +1,5 @@
 import { AgentTool, IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 
 /**
  * Add or use agent tools in the editor.

npm-packages/react-api/src/hooks/agent/use-agents.ts

@@ -4,7 +4,7 @@ import {
   IMCMessageTypeEnum,
   LLMConfig,
 } from "@pulse-editor/shared-utils";
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 
 export default function useAgents() {
   const receiverHandlerMap = new Map<

npm-packages/react-api/src/hooks/ai-modality/use-image-gen.ts

@@ -3,7 +3,7 @@ import {
   IMCMessage,
   IMCMessageTypeEnum,
 } from "@pulse-editor/shared-utils";
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 
 export default function useImageGen() {
   const receiverHandlerMap = new Map<

npm-packages/react-api/src/hooks/ai-modality/use-llm.ts

@@ -3,7 +3,7 @@ import {
   IMCMessageTypeEnum,
   LLMConfig,
 } from "@pulse-editor/shared-utils";
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 
 export default function useLLM() {
   const receiverHandlerMap = new Map<

npm-packages/react-api/src/hooks/ai-modality/use-ocr.ts

@@ -1,6 +1,6 @@
 import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
 
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 
 export default function useOCR() {
   const receiverHandlerMap = new Map<

npm-packages/react-api/src/hooks/ai-modality/use-speech2speech.ts

@@ -1,5 +1,5 @@
 import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 import { useState } from "react";
 
 /**

npm-packages/react-api/src/hooks/ai-modality/use-stt.ts

@@ -3,7 +3,7 @@ import {
   IMCMessageTypeEnum,
   STTConfig,
 } from "@pulse-editor/shared-utils";
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 
 export default function useSTT() {
   const receiverHandlerMap = new Map<

npm-packages/react-api/src/hooks/ai-modality/use-tts.ts

@@ -3,7 +3,7 @@ import {
   IMCMessageTypeEnum,
   TTSConfig,
 } from "@pulse-editor/shared-utils";
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 
 export default function useTTS() {
   const receiverHandlerMap = new Map<

npm-packages/react-api/src/hooks/ai-modality/use-video-gen.ts

@@ -3,7 +3,7 @@ import {
   IMCMessageTypeEnum,
   VideoModelConfig,
 } from "@pulse-editor/shared-utils";
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 
 export default function useVideoGen() {
   const receiverHandlerMap = new Map<

npm-packages/react-api/src/hooks/editor/use-env.ts

@@ -1,6 +1,6 @@
 import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
 import { useEffect, useState } from "react";
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 
 export default function usePulseEnv() {
   const receiverHandlerMap = new Map<

npm-packages/react-api/src/hooks/editor/use-file.ts

@@ -0,0 +1,62 @@
+import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
+import { useCallback, useEffect, useState } from "react";
+import useIMC from "../imc/use-imc";
+
+export default function useFile(uri: string | undefined) {
+  const [file, setFile] = useState<File | undefined>(undefined);
+
+  const receiverHandlerMap = new Map<
+    IMCMessageTypeEnum,
+    (senderWindow: Window, message: IMCMessage) => Promise<void>
+  >([
+    [
+      IMCMessageTypeEnum.PlatformFileUpdate,
+      async (senderWindow: Window, message: IMCMessage) => {
+        const updatedFile = message.payload as File;
+        setFile(updatedFile);
+      },
+    ],
+  ]);
+
+  const { imc, isReady } = useIMC(receiverHandlerMap);
+
+  const saveFile = useCallback(
+    (fileContent: string) => {
+      if (!uri) return;
+      else if (!file) return;
+
+      // Update file content
+      const newFile = new File([fileContent], file.name, {
+        type: file.type,
+        lastModified: Date.now(),
+      });
+      setFile(newFile);
+
+      if (isReady && uri) {
+        imc?.sendMessage(IMCMessageTypeEnum.PlatformWriteFile, {
+          uri,
+          file: newFile,
+        });
+      }
+    },
+    [uri, file, isReady]
+  );
+
+  // Read file when uri changes
+  useEffect(() => {
+    if (isReady) {
+      imc
+        ?.sendMessage(IMCMessageTypeEnum.PlatformReadFile, {
+          uri,
+        })
+        .then((f: File | undefined) => {
+          setFile(f);
+        });
+    }
+  }, [isReady, uri]);
+
+  return {
+    file,
+    saveFile,
+  };
+}

npm-packages/react-api/src/hooks/editor/use-loading.ts

@@ -1,6 +1,6 @@
 import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
 import { useEffect, useState } from "react";
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 
 export default function useLoading() {
   const receiverHandlerMap = new Map<

npm-packages/react-api/src/hooks/editor/use-notification.ts

@@ -4,7 +4,7 @@ import {
   IMCMessageTypeEnum,
 } from "@pulse-editor/shared-utils";
 
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 
 export default function useNotification() {
   const receiverHandlerMap = new Map<

npm-packages/react-api/src/hooks/editor/use-receive-file.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { ReceiveFileContext } from "../../providers/receive-file-provider";
+
+export default function useReceiveFile() {
+  const context = useContext(ReceiveFileContext);
+
+  if (!context) {
+    throw new Error("useReceiveFile must be used within a ReceiveFileProvider");
+  }
+
+  return { receivedFileUri: context.selectedFileUri };
+}

npm-packages/react-api/src/hooks/editor/use-register-action.ts

@@ -6,7 +6,7 @@ import {
   TypedVariable,
 } from "@pulse-editor/shared-utils";
 import { DependencyList, useEffect, useRef, useState } from "react";
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 
 /**
  * Register an app action to listen to IMC messages from the core,

npm-packages/react-api/src/hooks/editor/use-theme.ts

@@ -1,6 +1,6 @@
 import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
-import { useState } from "react";
-import useIMC from "../../lib/use-imc";
+import { useEffect, useState } from "react";
+import useIMC from "../imc/use-imc";
 
 export default function useTheme() {
   const [theme, setTheme] = useState<string>("light");
@@ -17,7 +17,19 @@ export default function useTheme() {
     }
   );
 
-  const { imc } = useIMC(receiverHandlerMap);
+  const { imc, isReady } = useIMC(receiverHandlerMap);
+
+  // Upon initial load, request theme from main app
+  useEffect(() => {
+    if (isReady) {
+      imc
+        ?.sendMessage(IMCMessageTypeEnum.EditorAppRequestTheme)
+        .then((result) => {
+          console.log("Received theme from main app:", result);
+          setTheme((prev) => result);
+        });
+    }
+  }, [isReady]);
 
   return {
     theme,

npm-packages/react-api/src/hooks/terminal/use-terminal.ts

@@ -1,5 +1,5 @@
 import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
-import useIMC from "../../lib/use-imc";
+import useIMC from "../imc/use-imc";
 import { useEffect, useState } from "react";
 
 export default function useTerminal() {

npm-packages/react-api/src/main.ts

@@ -1,6 +1,6 @@
 import useAgentTools from "./hooks/agent/use-agent-tools";
 import useAgents from "./hooks/agent/use-agents";
-import useFileView from "./hooks/editor/use-file-view";
+import useFile from "./hooks/editor/use-file";
 import useLoading from "./hooks/editor/use-loading";
 import useNotification from "./hooks/editor/use-notification";
 import useRegisterAction from "./hooks/editor/use-register-action";
@@ -14,21 +14,25 @@ import useSTT from "./hooks/ai-modality/use-stt";
 import useTTS from "./hooks/ai-modality/use-tts";
 import useVideoGen from "./hooks/ai-modality/use-video-gen";
 import usePulseEnv from "./hooks/editor/use-env";
+import useReceiveFile from "./hooks/editor/use-receive-file";
 import useSnapshotState from "./hooks/editor/use-snapshot-state";
 import useTerminal from "./hooks/terminal/use-terminal";
+import ReceiveFileProvider from "./providers/receive-file-provider";
 import SnapshotProvider from "./providers/snapshot-provider";
 
 export {
+  ReceiveFileProvider,
   SnapshotProvider,
   useAgentTools,
   useAgents,
-  useFileView,
+  useFile,
   useImageGen,
   useLLM,
   useLoading,
   useNotification,
   useOCR,
   usePulseEnv,
+  useReceiveFile,
   useRegisterAction,
   useSTT,
   useSnapshotState,

npm-packages/react-api/src/providers/receive-file-provider.tsx

@@ -0,0 +1,42 @@
+import { IMCMessage, IMCMessageTypeEnum } from "@pulse-editor/shared-utils";
+import React, { createContext, ReactNode, useState } from "react";
+import useIMC from "../hooks/imc/use-imc";
+
+export const ReceiveFileContext = createContext<
+  ReceiveFileContextType | undefined
+>(undefined);
+
+export type ReceiveFileContextType = {
+  // Define any state or functions you want to provide here
+  selectedFileUri: string | undefined;
+};
+
+export default function ReceiveFileProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [receivedFileUri, setReceivedFileUri] = useState<string | undefined>(
+    undefined
+  );
+
+  const receiverHandlerMap = new Map<
+    IMCMessageTypeEnum,
+    (senderWindow: Window, message: IMCMessage) => Promise<any>
+  >([
+    [
+      IMCMessageTypeEnum.EditorAppReceiveFileUri,
+      async (senderWindow: Window, message: IMCMessage) => {
+        const { uri } = message.payload;
+        setReceivedFileUri((prev) => uri);
+      },
+    ],
+  ]);
+  useIMC(receiverHandlerMap);
+
+  return (
+    <ReceiveFileContext.Provider value={{ selectedFileUri: receivedFileUri }}>
+      {children}
+    </ReceiveFileContext.Provider>
+  );
+}

npm-packages/react-api/src/providers/snapshot-provider.tsx

@@ -7,7 +7,7 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import useIMC from "../lib/use-imc";
+import useIMC from "../hooks/imc/use-imc";
 
 export const SnapshotContext = createContext<SnapshotContextType | undefined>(
   undefined
@@ -23,6 +23,8 @@ export default function SnapshotProvider({
 }: {
   children: ReactNode;
 }) {
+  const [states, setStates] = useState<{ [key: string]: any }>({});
+
   const receiverHandlerMap = new Map<
     IMCMessageTypeEnum,
     (senderWindow: Window, message: IMCMessage) => Promise<any>
@@ -48,8 +50,6 @@ export default function SnapshotProvider({
 
   const { imc, isReady } = useIMC(receiverHandlerMap);
 
-  const [states, setStates] = useState<{ [key: string]: any }>({});
-
   useEffect(() => {
     if (isReady) {
       imc?.updateReceiverHandlerMap(receiverHandlerMap);