fix: issue with embeded not working correctly (#2245)

<!-- ELLIPSIS_HIDDEN -->


> [!IMPORTANT]
> Fix embedded component issues by ensuring WASM readiness, updating
layout, and removing placeholders in `clientwrapper.tsx`.
> 
>   - **Behavior**:
> - Ensure WASM readiness before rendering in `EmbedComponentInner` in
`clientwrapper.tsx`.
> - Use fallback active file name 'main.baml' when WASM is not ready in
`clientwrapper.tsx`.
>     - Add `dev:fiddle-web-app` script to `package.json`.
>   - **Components**:
> - Wrap `EmbedComponentInner` with `JotaiProvider` in
`clientwrapper.tsx`.
> - Remove placeholder `JotaiProvider` and `PromptPreview` components in
`clientwrapper.tsx`.
> - Add `PromptPreview` and `JotaiProvider` imports in
`clientwrapper.tsx`.
>   - **Layout**:
>     - Add `viewport` export to `layout.tsx` for theme color settings.
> - Update `body` class in `layout.tsx` to include new font and styling
classes.
>   - **Dependencies**:
>     - Add `geist` dependency to `fiddle-web-app/package.json`.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=BoundaryML%2Fbaml&utm_source=github&utm_medium=referral)<sup>
for c6847fc. You can
[customize](https://app.ellipsis.dev/BoundaryML/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

Author: seawatts

package.json

@@ -16,6 +16,7 @@
     "dev:vscode": "turbo run dev --filter=baml-extension...",
     "dev:language-server": "turbo run dev --filter=@baml/language-server",
     "dev:playground": "turbo run dev --filter=@baml/playground",
+    "dev:fiddle-web-app": "turbo run dev --filter=@baml/fiddle-web-app...",
     "generate": "turbo run generate",
     "typecheck": "turbo run typecheck",
     "lint:ws": "pnpm dlx sherif@latest",

pnpm-lock.yaml

@@ -1,5 +1,7 @@
 'use client';
-import { filesAtom } from '@baml/playground-common';
+import { filesAtom, useWaitForWasm } from '@baml/playground-common';
+import { PromptPreview } from '@baml/playground-common/prompt-preview';
+import { JotaiProvider } from '@baml/playground-common/jotai-provider';
 import { ResizableHandle, ResizablePanelGroup } from '@baml/ui/resizable';
 import { ResizablePanel } from '@baml/ui/resizable';
 import { ScrollArea } from '@baml/ui/scroll-area';
@@ -60,10 +62,6 @@ const CustomErrorBoundary: React.FC<{ children: React.ReactNode; message?: strin
 };
 
 // Placeholder components
-const JotaiProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return <>{children}</>;
-};
-
 const CodeMirrorViewer: React.FC<any> = ({ fileContent, onContentChange }) => {
   return (
     <textarea
@@ -74,14 +72,6 @@ const CodeMirrorViewer: React.FC<any> = ({ fileContent, onContentChange }) => {
   );
 };
 
-const PromptPreview: React.FC = () => {
-  return (
-    <div className="flex items-center justify-center w-full h-full">
-      <p className="text-muted-foreground">Prompt preview coming soon...</p>
-    </div>
-  );
-};
-
 const EventListener: React.FC = () => {
   return null;
 };
@@ -92,9 +82,21 @@ interface EmbedComponentProps {
 }
 
 export default function EmbedComponent({ bamlContent }: EmbedComponentProps) {
+  return (
+    <JotaiProvider>
+      <EmbedComponentInner bamlContent={bamlContent} />
+    </JotaiProvider>
+  );
+}
+
+function EmbedComponentInner({ bamlContent }: EmbedComponentProps) {
   const [files, setFiles] = useAtom(filesAtom);
   const [isLoading, setIsLoading] = useState(true);
-  const activeFileName = useAtomValue(activeFileNameAtom);
+  const isWasmReady = useWaitForWasm();
+  const activeFileNameAtomValue = useAtomValue(activeFileNameAtom);
+
+  // Use fallback active file name when WASM is not ready
+  const activeFileName = isWasmReady ? activeFileNameAtomValue : 'main.baml';
 
   useEffect(() => {
     // Set the files with the BAML content passed from the server
@@ -104,7 +106,8 @@ export default function EmbedComponent({ bamlContent }: EmbedComponentProps) {
     setIsLoading(false);
   }, [bamlContent, setFiles]);
 
-  if (isLoading) {
+  // Wait for WASM to be ready before rendering
+  if (isLoading || !isWasmReady) {
     return <div className="text-white">Loading BAML file...</div>;
   }
 
@@ -120,29 +123,27 @@ export default function EmbedComponent({ bamlContent }: EmbedComponentProps) {
         direction="horizontal"
       >
         <ResizablePanel defaultSize={50}>
-          <div className="flex pl-1 w-full h-full tour-editor dark:bg-muted/70">
-            <ScrollArea className="w-full h-full">
-              {activeFileName && (
-                <CodeMirrorViewer
-                  lang="baml"
-                  fileContent={{
-                    code: files[activeFileName] || '',
-                    language: 'baml',
-                    id: activeFileName,
-                  }}
-                  hideLineNumbers={true}
-                  shouldScrollDown={false}
-                  onContentChange={(v: string) => {
-                    const newFiles: Record<string, string> = {};
-                    Object.entries(files).map(([key, value]) => {
-                      const newVal = key === activeFileName ? v : value;
-                      newFiles[key] = newVal;
-                    });
-                    setFiles(newFiles);
-                  }}
-                />
-              )}
-            </ScrollArea>
+          <div className="flex pl-1 w-full h-full tour-editor dark:bg-muted/70 overflow-y-auto">
+            {activeFileName && (
+              <CodeMirrorViewer
+                lang="baml"
+                fileContent={{
+                  code: files[activeFileName] || '',
+                  language: 'baml',
+                  id: activeFileName,
+                }}
+                hideLineNumbers={true}
+                shouldScrollDown={false}
+                onContentChange={(v: string) => {
+                  const newFiles: Record<string, string> = {};
+                  Object.entries(files).map(([key, value]) => {
+                    const newVal = key === activeFileName ? v : value;
+                    newFiles[key] = newVal;
+                  });
+                  setFiles(newFiles);
+                }}
+              />
+            )}
           </div>
         </ResizablePanel>
         <ResizableHandle className="" />

typescript/apps/fiddle-web-app/app/embed/clientwrapper.tsx

@@ -1,12 +1,16 @@
 import { Toaster } from '@baml/ui/sonner';
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import { Inter } from 'next/font/google';
 import { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { PHProvider, RB2BElement } from './_components/PosthogProvider';
 import { ThemeProvider } from './_components/ThemeProvider';
 import '@baml/ui/globals.css';
 import PostHogPageView from './PostHogPageView';
+import { cn } from '@baml/ui/lib/utils';
+
+import { GeistMono } from 'geist/font/mono';
+import { GeistSans } from 'geist/font/sans';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -15,16 +19,31 @@ export const metadata: Metadata = {
   description: 'An LLM prompt playground for structured prompting',
 };
 
+export const viewport: Viewport = {
+  themeColor: [
+    { color: 'white', media: '(prefers-color-scheme: light)' },
+    { color: 'black', media: '(prefers-color-scheme: dark)' },
+  ],
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
+
+
       <RB2BElement />
       <PHProvider>
-        <body className={'bg-background'}>
+      <body
+      className={cn(
+        'bg-background text-foreground relative min-h-screen font-sans antialiased',
+        GeistSans.variable,
+        GeistMono.variable,
+      )}
+    >
           <ErrorBoundary fallback={<div></div>}>
             <PostHogPageView />
           </ErrorBoundary>

typescript/apps/fiddle-web-app/app/layout.tsx

@@ -32,6 +32,7 @@
     "react-arborist": "3.4.3",
     "react-device-detect": "2.2.3",
     "react-dom": "19.1.0",
+    "geist": "1.4.2",
     "react-error-boundary": "6.0.0",
     "react-icons": "5.5.0",
     "react-joyride": "2.9.3",

typescript/apps/fiddle-web-app/package.json

@@ -192,4 +192,4 @@ export const proxyUrlAtom = atom((get) => {
     proxyEnabled,
     proxyUrl,
   };
-});
+});