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,
+  };
+};