Move view management to context provider & allow changing view document

Shellishack · Shellishack · commit 50f99784d8bc · 2024-12-08T05:53:15.000+08:00
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -30,27 +30,14 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const editorStates: EditorStates = {
-    isDrawing: false,
-    isDrawHulls: true,
-    isDownloadClip: false,
-    isInlineChat: false,
-    isOpenChatView: false,
-    isRecording: false,
-    isListening: false,
-    isThinking: false,
-    isSpeaking: false,
-    isMuted: false,
-  };
-
   return (
     <html lang="en">
       <body
         className={`${geistSans.variable} ${geistMono.variable} h-screen w-screen antialiased`}
       >
         <CapacitorProvider>
           <WrappedNextUIProvider>
-            <EditorContextProvider defaultEditorStates={editorStates}>
+            <EditorContextProvider>
               <Toaster />
               <Nav>{children}</Nav>
             </EditorContextProvider>
diff --git a/app/page.tsx b/app/page.tsx
@@ -12,15 +12,15 @@ import { CodeEditorAgent } from "@/lib/agent/code-editor-agent";
 import { BaseTTS, getModelTTS } from "@/lib/tts/tts";
 import AgentChatTerminalView from "@/components/views/agent-chat-terminal-view";
 import { AnimatePresence, motion } from "framer-motion";
-import { ViewRef } from "@/lib/types";
+import { ViewDocument, ViewRef } from "@/lib/types";
 import EditorToolbar from "@/components/editor-toolbar";
 import { getPlatform } from "@/lib/platforms/platform-checker";
 import { EditorContext } from "@/components/providers/editor-context-provider";
 
 export default function Home() {
   const [isCanvasReady, setIsCanvasReady] = useState(false);
 
-  const viewMap = useRef<Map<string, ViewRef | null>>(new Map());
+  // const viewMap = useRef<Map<string, ViewRef | null>>(new Map());
   const editorContext = useContext(EditorContext);
 
   const sttModelRef = useRef<BaseSTT | undefined>(undefined);
@@ -61,7 +61,7 @@ export default function Home() {
           llmModelRef.current,
           ttsModelRef.current,
         );
-        const codeEditor = viewMap.current.get("1") as CodeEditorViewRef;
+        const codeEditor = editorContext?.getViewById("1") as CodeEditorViewRef;
         const viewDocument = codeEditor?.getViewDocument();
         editorContext?.setEditorStates((prev) => ({
           ...prev,
@@ -84,7 +84,9 @@ export default function Home() {
             }));
 
             // Apply changes
-            const codeEditor = viewMap.current.get("1") as CodeEditorViewRef;
+            const codeEditor = editorContext?.getViewById(
+              "1",
+            ) as CodeEditorViewRef;
             codeEditor?.applyChanges(changes);
 
             // Play the audio in the blob
@@ -182,6 +184,31 @@ export default function Home() {
     }
   }, [editorContext?.editorStates, vad]);
 
+  useEffect(() => {
+    const url = "/test.tsx";
+    if (url) {
+      fetch(url)
+        .then((res) => res.text())
+        .then((text) => {
+          const viewId = "1";
+
+          // Init a new viewDocument
+          const viewDocument: ViewDocument = {
+            fileContent: text,
+            filePath: url,
+          };
+
+          // Get the code editor view
+          const codeEditor = editorContext?.getViewById(
+            viewId,
+          ) as CodeEditorViewRef;
+
+          // Set the viewDocument
+          codeEditor?.setViewDocument(viewDocument);
+        });
+    }
+  }, []);
+
   return (
     <div className="flex h-full w-full flex-col">
       <EditorToolbar />
@@ -192,16 +219,17 @@ export default function Home() {
             className={`min-h-0 w-full flex-grow`}
             style={{
               cursor:
-              editorContext?.editorStates?.isDrawing && !isCanvasReady ? "wait" : "auto",
+                editorContext?.editorStates?.isDrawing && !isCanvasReady
+                  ? "wait"
+                  : "auto",
             }}
           >
             <CodeEditorView
               ref={(ref) => {
-                viewMap.current.set("1", ref);
+                if (ref) editorContext?.addView("1", ref);
               }}
               width="100%"
               height="100%"
-              url="/test.tsx"
               isDrawingMode={editorContext?.editorStates?.isDrawing}
               isDownloadClip={editorContext?.editorStates?.isDownloadClip}
               isDrawHulls={editorContext?.editorStates?.isDrawHulls}
@@ -219,9 +247,8 @@ export default function Home() {
               >
                 <AgentChatTerminalView
                   ref={(ref) => {
-                    viewMap.current.set("2", ref);
+                    if (ref) editorContext?.addView("2", ref);
                   }}
-                  viewMap={viewMap}
                 />
               </motion.div>
             )}
diff --git a/components/nav-menu.tsx b/components/nav-menu.tsx
@@ -2,6 +2,10 @@ import { Button } from "@nextui-org/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { useMediaQuery } from "react-responsive";
 import { useFileSystem } from "@/lib/hooks/use-file-system";
+import { ViewDocument } from "@/lib/types";
+import { CodeEditorViewRef } from "./views/code-editor-view";
+import { EditorContext } from "./providers/editor-context-provider";
+import { useContext } from "react";
 
 function MenuPanel({ children }: { children?: React.ReactNode }) {
   const isDesktop = useMediaQuery({
@@ -54,6 +58,8 @@ function MenuPanel({ children }: { children?: React.ReactNode }) {
 export default function NavMenu({ isMenuOpen }: { isMenuOpen: boolean }) {
   const { projectPath, openFilePicker, readFile } = useFileSystem();
 
+  const editorContext = useContext(EditorContext);
+
   return (
     <AnimatePresence>
       {isMenuOpen && (
@@ -80,11 +86,23 @@ export default function NavMenu({ isMenuOpen }: { isMenuOpen: boolean }) {
                     onPress={() => {
                       openFilePicker(false).then((filePaths) => {
                         console.log(filePaths);
+                        const filePath = filePaths[0];
                         // Open the first file
-                        readFile(filePaths[0]).then((file) => {
+                        readFile(filePath).then((file) => {
                           console.log(file);
                           file.text().then((text) => {
                             console.log("File content:\n" + text);
+                            const viewDocument: ViewDocument = {
+                              fileContent: text,
+                              filePath: filePath,
+                            };
+                            // Get the code editor view
+                            const codeEditor = editorContext?.getViewById(
+                              "1",
+                            ) as CodeEditorViewRef;
+
+                            // Set the viewDocument
+                            codeEditor?.setViewDocument(viewDocument);
                           });
                         });
                       });
diff --git a/components/providers/editor-context-provider.tsx b/components/providers/editor-context-provider.tsx
@@ -1,30 +1,74 @@
 "use client";
 
 import usePersistSettings from "@/lib/hooks/use-persist-settings";
-import { EditorStates, EditorContextType, PersistSettings } from "@/lib/types";
-import { createContext, useEffect, useState } from "react";
+import {
+  EditorStates,
+  EditorContextType,
+  PersistSettings,
+  ViewRef,
+} from "@/lib/types";
+import { createContext, useEffect, useRef, useState } from "react";
 
 export const EditorContext = createContext<EditorContextType | undefined>(
   undefined,
 );
 
+const defaultEditorStates: EditorStates = {
+  isDrawing: false,
+  isDrawHulls: true,
+  isDownloadClip: false,
+  isInlineChat: false,
+  isOpenChatView: false,
+  isRecording: false,
+  isListening: false,
+  isThinking: false,
+  isSpeaking: false,
+  isMuted: false,
+};
+
 export default function EditorContextProvider({
   children,
-  defaultEditorStates,
 }: {
   children: React.ReactNode;
-  defaultEditorStates: EditorStates;
 }) {
+  // --- Editor States ---
   const [editorStates, setEditorStates] =
     useState<EditorStates>(defaultEditorStates);
 
+  // --- Persist Settings ---
+  // Persist settings are loaded from local storage upon component mount
   const { getPersistSettings, setPersistSettings, clearPersistSettings } =
     usePersistSettings();
   const [settings, setSettings] = useState<PersistSettings | undefined>(
     undefined,
   );
   const [isSettingsLoaded, setIsSettingsLoaded] = useState(false);
 
+  // --- View Management ---
+  const viewMap = useRef<Map<string, ViewRef>>(new Map());
+  function addView(viewId: string, view: ViewRef) {
+    viewMap.current.set(viewId, view);
+  }
+
+  function getViewById(viewId: string) {
+    return viewMap.current.get(viewId);
+  }
+
+  function getViewByType(viewType: string) {
+    const views: ViewRef[] = [];
+    viewMap.current.forEach((view) => {
+      if (view?.getType() === viewType) {
+        views.push(view);
+      }
+    });
+
+    return views;
+  }
+
+  function deleteView(viewId: string) {
+    viewMap.current.delete(viewId);
+  }
+
   // Load settings from local storage
   useEffect(() => {
     getPersistSettings().then((loadedSettings: PersistSettings) => {
@@ -51,6 +95,10 @@ export default function EditorContextProvider({
         setEditorStates,
         persistSettings: settings,
         setPersistSettings: setSettings,
+        addView,
+        getViewById,
+        getViewByType,
+        deleteView,
       }}
     >
       {children}
diff --git a/components/views/agent-chat-terminal-view.tsx b/components/views/agent-chat-terminal-view.tsx
@@ -12,19 +12,8 @@ import {
   useState,
 } from "react";
 import ViewLayout from "./layout";
-import {
-  AgentConfig,
-  ChatMessage,
-  ViewDocument,
-  ViewRef,
-} from "@/lib/types";
-import {
-  Avatar,
-  Button,
-  Divider,
-  Input,
-  Tooltip,
-} from "@nextui-org/react";
+import { AgentConfig, ChatMessage, ViewDocument, ViewRef } from "@/lib/types";
+import { Avatar, Button, Divider, Input, Tooltip } from "@nextui-org/react";
 import Icon from "../icon";
 import { getModelLLM } from "@/lib/llm/llm";
 import toast from "react-hot-toast";
@@ -261,10 +250,7 @@ function TerminalNavBar({
 }
 
 const AgentChatTerminalView = forwardRef(
-  (
-    { viewMap }: AgentChatTerminalViewProps,
-    ref: React.Ref<AgentChatTerminalViewRef>,
-  ) => {
+  ({}, ref: React.Ref<AgentChatTerminalViewRef>) => {
     useImperativeHandle(ref, () => ({
       getType: () => "AgentChatTerminalView",
     }));
@@ -347,14 +333,14 @@ const AgentChatTerminalView = forwardRef(
       setIsThinking(true);
 
       // Get all code editor views and their content
+      const codeEditorViews =
+        editorContext?.getViewByType("CodeEditorView") ?? [];
       const viewDocuments: ViewDocument[] = [];
-      viewMap.current.forEach((view) => {
-        if (view?.getType() === "CodeEditorView") {
-          const codeEditorView = view as CodeEditorViewRef;
-          const viewDocument = codeEditorView.getViewDocument();
-          if (viewDocument) {
-            viewDocuments.push(viewDocument);
-          }
+      codeEditorViews.forEach((view) => {
+        const codeEditorView = view as CodeEditorViewRef;
+        const viewDocument = codeEditorView.getViewDocument();
+        if (viewDocument) {
+          viewDocuments.push(viewDocument);
         }
       });
 
diff --git a/components/views/code-editor-view.tsx b/components/views/code-editor-view.tsx
@@ -39,7 +39,6 @@ import { EditorContext } from "../providers/editor-context-provider";
 interface CodeEditorViewProps {
   width?: string;
   height?: string;
-  url?: string;
   isDrawingMode?: boolean;
   isDownloadClip?: boolean;
   isDrawHulls?: boolean;
@@ -48,6 +47,7 @@ interface CodeEditorViewProps {
 
 export type CodeEditorViewRef = ViewRef & {
   getViewDocument: () => ViewDocument | undefined;
+  setViewDocument: (document: ViewDocument) => void;
   applyChanges: (changes: LineChange[]) => void;
 };
 
@@ -56,7 +56,6 @@ const CodeEditorView = forwardRef(
     {
       width,
       height,
-      url,
       isDrawingMode,
       isDownloadClip,
       isDrawHulls,
@@ -69,6 +68,9 @@ const CodeEditorView = forwardRef(
       getViewDocument: () => {
         return viewDocument;
       },
+      setViewDocument: (document: ViewDocument) => {
+        setViewDocument(document);
+      },
       applyChanges: (changes: LineChange[]) => {
         console.log("Applying changes", changes);
         const cmView = cmRef.current?.view;
@@ -155,24 +157,6 @@ const CodeEditorView = forwardRef(
       undefined,
     );
 
-    useEffect(() => {
-      if (url) {
-        fetch(url)
-          .then((res) => res.text())
-          .then((text) => {
-            const viewId = "1";
-
-            // Init a new viewDocument
-            const viewDocument: ViewDocument = {
-              fileContent: text,
-              filePath: url,
-              selections: [],
-            };
-            setViewDocument(viewDocument);
-          });
-      }
-    }, [url]);
-
     useEffect(() => {
       if (resolvedTheme === "dark") {
         setTheme(vscodeDark);
@@ -343,7 +327,7 @@ const CodeEditorView = forwardRef(
 
         return {
           ...prev,
-          selections: [...prev.selections, newInfo],
+          selections: [...(prev.selections ?? []), newInfo],
         };
       });
     }, []);
diff --git a/lib/types.ts b/lib/types.ts
