working sandpack

2025-04-11 23:11:56 -07:00
parent 37579d011a
commit a4a763a06d
14 changed files with 451 additions and 175 deletions
--- a/src/components/chat/ChatInput.tsx
+++ b/src/components/chat/ChatInput.tsx
@@ -30,7 +30,6 @@ export function ChatInput({ chatId, onSubmit }: ChatInputProps) {
    if (textarea) {
      textarea.style.height = "0px";
      const scrollHeight = textarea.scrollHeight;
-      console.log("scrollHeight", scrollHeight);
      textarea.style.height = `${scrollHeight + 4}px`;
    }
  };
--- a/src/components/chat/ChatMessage.tsx
+++ b/src/components/chat/ChatMessage.tsx
@@ -8,73 +8,67 @@ interface ChatMessageProps {
  message: Message;
 }

-const ChatMessage = memo(
-  ({ message }: ChatMessageProps) => {
-    return (
+const ChatMessage = ({ message }: ChatMessageProps) => {
+  const { isStreaming } = useStreamChat();
+  return (
+    <div
+      className={`flex ${
+        message.role === "assistant" ? "justify-start" : "justify-end"
+      }`}
+    >
      <div
-        className={`flex ${
-          message.role === "assistant" ? "justify-start" : "justify-end"
+        className={`rounded-lg p-2 mt-2 ${
+          message.role === "assistant"
+            ? "w-full max-w-3xl mx-auto"
+            : "bg-(--sidebar-accent)"
        }`}
      >
-        <div
-          className={`rounded-lg p-2 mt-2 ${
-            message.role === "assistant"
-              ? "w-full max-w-3xl mx-auto"
-              : "bg-(--sidebar-accent)"
-          }`}
-        >
-          {message.role === "assistant" && !message.content ? (
-            <div className="flex h-6 items-center space-x-2 p-2">
-              <motion.div
-                className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
-                animate={{ y: [0, -12, 0] }}
-                transition={{
-                  repeat: Number.POSITIVE_INFINITY,
-                  duration: 0.4,
-                  ease: "easeOut",
-                  repeatDelay: 1.2,
-                }}
-              />
-              <motion.div
-                className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
-                animate={{ y: [0, -12, 0] }}
-                transition={{
-                  repeat: Number.POSITIVE_INFINITY,
-                  duration: 0.4,
-                  ease: "easeOut",
-                  delay: 0.4,
-                  repeatDelay: 1.2,
-                }}
-              />
-              <motion.div
-                className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
-                animate={{ y: [0, -12, 0] }}
-                transition={{
-                  repeat: Number.POSITIVE_INFINITY,
-                  duration: 0.4,
-                  ease: "easeOut",
-                  delay: 0.8,
-                  repeatDelay: 1.2,
-                }}
-              />
-            </div>
-          ) : (
-            <div
-              className="prose dark:prose-invert prose-headings:mb-2 prose-p:my-1 prose-pre:my-0 max-w-none"
-              suppressHydrationWarning
-            >
-              <DyadMarkdownParser content={message.content} />
-            </div>
-          )}
-        </div>
+        {message.role === "assistant" && !message.content && isStreaming ? (
+          <div className="flex h-6 items-center space-x-2 p-2">
+            <motion.div
+              className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
+              animate={{ y: [0, -12, 0] }}
+              transition={{
+                repeat: Number.POSITIVE_INFINITY,
+                duration: 0.4,
+                ease: "easeOut",
+                repeatDelay: 1.2,
+              }}
+            />
+            <motion.div
+              className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
+              animate={{ y: [0, -12, 0] }}
+              transition={{
+                repeat: Number.POSITIVE_INFINITY,
+                duration: 0.4,
+                ease: "easeOut",
+                delay: 0.4,
+                repeatDelay: 1.2,
+              }}
+            />
+            <motion.div
+              className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
+              animate={{ y: [0, -12, 0] }}
+              transition={{
+                repeat: Number.POSITIVE_INFINITY,
+                duration: 0.4,
+                ease: "easeOut",
+                delay: 0.8,
+                repeatDelay: 1.2,
+              }}
+            />
+          </div>
+        ) : (
+          <div
+            className="prose dark:prose-invert prose-headings:mb-2 prose-p:my-1 prose-pre:my-0 max-w-none"
+            suppressHydrationWarning
+          >
+            <DyadMarkdownParser content={message.content} />
+          </div>
+        )}
      </div>
-    );
-  },
-  (prevProps, nextProps) => {
-    return prevProps.message.content === nextProps.message.content;
-  }
-);
-
-ChatMessage.displayName = "ChatMessage";
+    </div>
+  );
+};

 export default ChatMessage;
--- a/src/components/chat/DyadAddDependency.tsx
+++ b/src/components/chat/DyadAddDependency.tsx
@@ -28,7 +28,6 @@ export const DyadAddDependency: React.FC<DyadAddDependencyProps> = ({
 }) => {
  // Extract package attribute from the node if available
  const packages = node?.properties?.packages?.split(" ") || "";
-  console.log("packages", packages);
  const [isInstalling, setIsInstalling] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const selectedChatId = useAtomValue(selectedChatIdAtom);
--- a/src/components/preview_panel/PreviewIframe.tsx
+++ b/src/components/preview_panel/PreviewIframe.tsx
@@ -24,6 +24,15 @@ import {
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { useSettings } from "@/hooks/useSettings";
+import {
+  loadSandpackClient,
+  type SandboxSetup,
+  type ClientOptions,
+  SandpackClient,
+} from "@codesandbox/sandpack-client";
+import { showError } from "@/lib/toast";
+import { SandboxConfig } from "@/ipc/ipc_types";

 interface ErrorBannerProps {
  error: string | null;
@@ -107,7 +116,6 @@ export const PreviewIframe = ({
  // Effect to parse routes from the router file
  useEffect(() => {
    if (routerContent) {
-      console.log("routerContent", routerContent);
      try {
        const routes: Array<{ path: string; label: string }> = [];

@@ -148,6 +156,7 @@ export const PreviewIframe = ({
  const [navigationHistory, setNavigationHistory] = useState<string[]>([]);
  const [currentHistoryPosition, setCurrentHistoryPosition] = useState(0);
  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const { settings } = useSettings();

  // Add message listener for iframe errors and navigation events
  useEffect(() => {
@@ -392,7 +401,9 @@ export const PreviewIframe = ({
          }}
        />

-        {!appUrl ? (
+        {settings?.runtimeMode === "web-sandbox" ? (
+          <SandpackIframe reloadKey={reloadKey} />
+        ) : !appUrl ? (
          <div className="absolute inset-0 flex flex-col items-center justify-center space-y-4 bg-gray-50 dark:bg-gray-950">
            <Loader2 className="w-8 h-8 animate-spin text-gray-400 dark:text-gray-500" />
            <p className="text-gray-600 dark:text-gray-300">
@@ -412,3 +423,120 @@ export const PreviewIframe = ({
    </div>
  );
 };
+
+const parseTailwindConfig = (config: string) => {
+  const themeRegex = /theme\s*:\s*(\{[\s\S]*?\})(?=\s*,\s*plugins)/;
+  const match = config.match(themeRegex);
+  if (!match) return "{};";
+  return `{theme: ${match[1]}};`;
+};
+
+const SandpackIframe = ({ reloadKey }: { reloadKey: number }) => {
+  const selectedAppId = useAtomValue(selectedAppIdAtom);
+  const { app } = useLoadApp(selectedAppId);
+  const keyRef = useRef<number | null>(null);
+  const isFirstRender = useRef(true);
+  const sandpackClientRef = useRef<SandpackClient | null>(null);
+
+  async function loadSandpack() {
+    if (keyRef.current === reloadKey) return;
+    keyRef.current = reloadKey;
+
+    if (!iframeRef.current || !app || !selectedAppId) return;
+    const sandboxConfig = await IpcClient.getInstance().getAppSandboxConfig(
+      selectedAppId
+    );
+
+    const sandpackConfig: SandboxSetup = mapSandpackConfig(sandboxConfig);
+
+    const options: ClientOptions = {
+      // bundlerURL: "https://sandpack.dyad.sh/",
+      showOpenInCodeSandbox: false,
+      showLoadingScreen: true,
+      showErrorScreen: true,
+      externalResources: [
+        // "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
+        "https://cdn.tailwindcss.com",
+      ],
+    };
+
+    let client: SandpackClient | undefined;
+    try {
+      client = await loadSandpackClient(
+        iframeRef.current,
+        sandpackConfig,
+        options
+      );
+      sandpackClientRef.current = client;
+      return client;
+    } catch (error) {
+      showError(error);
+    }
+  }
+
+  useEffect(() => {
+    async function updateSandpack() {
+      if (sandpackClientRef.current && selectedAppId) {
+        const sandboxConfig = await IpcClient.getInstance().getAppSandboxConfig(
+          selectedAppId
+        );
+        sandpackClientRef.current.updateSandbox(
+          mapSandpackConfig(sandboxConfig)
+        );
+      }
+    }
+    updateSandpack();
+  }, [app]);
+
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    if (!iframeRef.current || !app || !selectedAppId) return () => {};
+
+    const clientPromise = loadSandpack();
+    return () => {
+      clientPromise.then((client) => {
+        client?.destroy();
+        sandpackClientRef.current = null;
+      });
+    };
+  }, [reloadKey]);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      className="w-full h-full border-none bg-gray-50"
+    ></iframe>
+  );
+};
+
+const mapSandpackConfig = (sandboxConfig: SandboxConfig): SandboxSetup => {
+  return {
+    files: Object.fromEntries(
+      Object.entries(sandboxConfig.files).map(([key, value]) => [
+        key,
+        {
+          code: value.replace(
+            "import './globals.css'",
+            `
+const injectedStyle = document.createElement("style");
+injectedStyle.textContent = \`${sandboxConfig.files["src/globals.css"]}\`;
+injectedStyle.type = "text/tailwindcss";
+document.head.appendChild(injectedStyle);
+
+window.tailwind.config = ${parseTailwindConfig(
+              sandboxConfig.files["tailwind.config.ts"]
+            )}
+`
+          ),
+        },
+      ])
+    ),
+    dependencies: sandboxConfig.dependencies,
+    entry: sandboxConfig.entry,
+  };
+};
--- a/src/hooks/useLoadVersions.ts
+++ b/src/hooks/useLoadVersions.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useAtom } from "jotai";
 import { versionsListAtom } from "@/atoms/appAtoms";
 import { IpcClient } from "@/ipc/ipc_client";
@@ -34,7 +34,7 @@ export function useLoadVersions(appId: number | null) {
    loadVersions();
  }, [appId, setVersions]);

-  const refreshVersions = async () => {
+  const refreshVersions = useCallback(async () => {
    if (appId === null) {
      return;
    }
@@ -48,7 +48,7 @@ export function useLoadVersions(appId: number | null) {
      console.error("Error refreshing versions:", error);
      setError(error instanceof Error ? error : new Error(String(error)));
    }
-  };
+  }, [appId, setVersions, setError]);

  return { versions, loading, error, refreshVersions };
 }
--- a/src/ipc/handlers/app_handlers.ts
+++ b/src/ipc/handlers/app_handlers.ts
@@ -2,7 +2,12 @@ import { ipcMain } from "electron";
 import { db, getDatabasePath } from "../../db";
 import { apps, chats } from "../../db/schema";
 import { desc, eq } from "drizzle-orm";
-import type { App, CreateAppParams, Version } from "../ipc_types";
+import type {
+  App,
+  CreateAppParams,
+  SandboxConfig,
+  Version,
+} from "../ipc_types";
 import fs from "node:fs";
 import path from "node:path";
 import { getDyadAppPath, getUserDataPath } from "../../paths/paths";
@@ -25,6 +30,7 @@ import {
 } from "../utils/process_manager";
 import { ALLOWED_ENV_VARS } from "../../constants/models";
 import { getEnvVar } from "../utils/read_env";
+import { readSettings } from "../../main/settings";

 async function executeApp({
  appPath,
@@ -34,7 +40,26 @@ async function executeApp({
  appPath: string;
  appId: number;
  event: Electron.IpcMainInvokeEvent;
-}): Promise<{ processId: number }> {
+}): Promise<void> {
+  const settings = readSettings();
+  if (settings.runtimeMode === "web-sandbox") {
+    return;
+  }
+  if (settings.runtimeMode === "local-node") {
+    await executeAppLocalNode({ appPath, appId, event });
+    return;
+  }
+  throw new Error("Invalid runtime mode");
+}
+async function executeAppLocalNode({
+  appPath,
+  appId,
+  event,
+}: {
+  appPath: string;
+  appId: number;
+  event: Electron.IpcMainInvokeEvent;
+}): Promise<void> {
  const process = spawn("npm install && npm run dev", [], {
    cwd: appPath,
    shell: true,
@@ -99,11 +124,43 @@ async function executeApp({
    // Note: We don't throw here as the error is asynchronous. The caller got a success response already.
    // Consider adding ipcRenderer event emission to notify UI of the error.
  });
-
-  return { processId: currentProcessId };
 }

 export function registerAppHandlers() {
+  ipcMain.handle(
+    "get-app-sandbox-config",
+    async (_, { appId }: { appId: number }): Promise<SandboxConfig> => {
+      const app = await db.query.apps.findFirst({
+        where: eq(apps.id, appId),
+      });
+      if (!app) {
+        throw new Error("App not found");
+      }
+      const appPath = getDyadAppPath(app.path);
+      const files = getFilesRecursively(appPath, appPath);
+
+      const filesMap = await Promise.all(
+        files.map(async (file) => {
+          const content = await fs.promises.readFile(
+            path.join(appPath, file),
+            "utf-8"
+          );
+          return { [file]: content };
+        })
+      );
+
+      // Get dependencies from package.json
+      const packageJsonPath = path.join(appPath, "package.json");
+      const packageJson = await fs.promises.readFile(packageJsonPath, "utf-8");
+      const dependencies = JSON.parse(packageJson).dependencies;
+
+      return {
+        files: filesMap.reduce((acc, file) => ({ ...acc, ...file }), {}),
+        dependencies,
+        entry: "src/main.tsx",
+      };
+    }
+  );
  ipcMain.handle("create-app", async (_, params: CreateAppParams) => {
    const appPath = params.name;
    const fullAppPath = getDyadAppPath(appPath);
@@ -272,7 +329,6 @@ export function registerAppHandlers() {
        console.debug(`Starting app ${appId} in path ${app.path}`);

        const appPath = getDyadAppPath(app.path);
-        console.log("appPath-CWD", appPath);
        try {
          const currentProcessId = await executeApp({ appPath, appId, event });

@@ -379,9 +435,9 @@ export function registerAppHandlers() {
          const appPath = getDyadAppPath(app.path);
          console.debug(`Starting app ${appId} in path ${app.path}`);

-          const currentProcessId = await executeApp({ appPath, appId, event });
+          await executeApp({ appPath, appId, event });

-          return { success: true, processId: currentProcessId };
+          return { success: true };
        } catch (error) {
          console.error(`Error restarting app ${appId}:`, error);
          throw error;
--- a/src/ipc/ipc_client.ts
+++ b/src/ipc/ipc_client.ts
@@ -14,6 +14,7 @@ import type {
  CreateAppParams,
  CreateAppResult,
  ListAppsResponse,
+  SandboxConfig,
  Version,
 } from "./ipc_types";
 import { showError } from "@/lib/toast";
@@ -127,6 +128,18 @@ export class IpcClient {
    }
  }

+  public async getAppSandboxConfig(appId: number): Promise<SandboxConfig> {
+    try {
+      const data = await this.ipcRenderer.invoke("get-app-sandbox-config", {
+        appId,
+      });
+      return data;
+    } catch (error) {
+      showError(error);
+      throw error;
+    }
+  }
+
  public async getApp(appId: number): Promise<App> {
    try {
      const data = await this.ipcRenderer.invoke("get-app", appId);
--- a/src/ipc/ipc_types.ts
+++ b/src/ipc/ipc_types.ts
@@ -57,3 +57,9 @@ export interface Version {
  message: string;
  timestamp: number;
 }
+
+export interface SandboxConfig {
+  files: Record<string, string>;
+  dependencies: Record<string, string>;
+  entry: string;
+}
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -15,6 +15,7 @@ const validInvokeChannels = [
  "get-chats",
  "list-apps",
  "get-app",
+  "get-app-sandbox-config",
  "edit-app-file",
  "read-app-file",
  "run-app",