sunpeak 0.5.39 → 0.6.1

package/README.md

@@ -21,6 +21,7 @@ Quickstart, build, test, and ship your ChatGPT App locally!
 
 [Demo (Hosted)](https://sunpeak.ai/#simulator) ~
 [Demo (Video)](https://d10djik02wlf6x.cloudfront.net/sunpeak-demo-prod.mp4) ~
+[Discord (NEW)](https://discord.gg/FB2QNXqRnw) ~
 [Documentation](https://docs.sunpeak.ai/) ~
 [GitHub](https://github.com/Sunpeak-AI/sunpeak)
 

package/bin/commands/build.mjs

@@ -26,12 +26,12 @@ export async function build(projectRoot = process.cwd()) {
   const distDir = path.join(projectRoot, 'dist/chatgpt');
   const buildDir = path.join(projectRoot, 'dist/build-output');
   const tempDir = path.join(projectRoot, '.tmp');
-  const resourcesDir = path.join(projectRoot, 'src/components/resources');
+  const resourcesDir = path.join(projectRoot, 'src/resources');
   const templateFile = path.join(projectRoot, 'src/index-resource.tsx');
 
   // Validate project structure
   if (!existsSync(resourcesDir)) {
-    console.error('Error: src/components/resources directory not found');
+    console.error('Error: src/resources directory not found');
     console.error('Expected location: ' + resourcesDir);
     console.error('\nThe build command expects the standard Sunpeak project structure.');
     console.error('If you have customized your project structure, you may need to use');
@@ -106,7 +106,7 @@ export async function build(projectRoot = process.cwd()) {
     });
 
   if (resourceFiles.length === 0) {
-    console.error('Error: No resource files found in src/components/resources/');
+    console.error('Error: No resource files found in src/resources/');
     console.error('Resource files should be named like: counter-resource.tsx');
     process.exit(1);
   }
@@ -144,7 +144,7 @@ export async function build(projectRoot = process.cwd()) {
 
       // Create entry file from template in temp directory
       const entryContent = template
-        .replace('// RESOURCE_IMPORT', `import { ${componentName} } from '../src/components/resources/${componentFile}';`)
+        .replace('// RESOURCE_IMPORT', `import { ${componentName} } from '../src/resources/${componentFile}';`)
         .replace('// RESOURCE_MOUNT', `createRoot(root).render(<${componentName} />);`);
 
       const entryPath = path.join(projectRoot, entry);

package/dist/chatgpt/globals.css

@@ -30,3 +30,10 @@
 @utility bg-sidebar {
   background-color: var(--color-surface-secondary);
 }
+
+/* Ensure Select dropdowns appear above mobile drawer overlay when simulator is present */
+@layer components {
+  :has(.sunpeak-simulator-root) :where([role="listbox"], [data-radix-select-content], [data-radix-popper-content-wrapper]) {
+    z-index: 100 !important;
+  }
+}

package/dist/chatgpt/mock-openai.d.ts

@@ -4,7 +4,7 @@ declare class MockOpenAI implements OpenAiAPI, OpenAiGlobals {
     theme: Theme;
     userAgent: OpenAiGlobals['userAgent'];
     locale: string;
-    maxHeight: number;
+    maxHeight: number | undefined;
     displayMode: DisplayMode;
     safeArea: {
         insets: {
@@ -42,7 +42,7 @@ declare class MockOpenAI implements OpenAiAPI, OpenAiGlobals {
     setTheme(theme: Theme): void;
     setUserAgent(userAgent: OpenAiGlobals['userAgent']): void;
     setLocale(locale: string): void;
-    setMaxHeight(maxHeight: number): void;
+    setMaxHeight(maxHeight: number | undefined): void;
     setDisplayMode(displayMode: DisplayMode): void;
     setSafeArea(safeArea: OpenAiGlobals['safeArea']): void;
     setView(view: View | null): void;

package/dist/chatgpt/simple-sidebar.d.ts

@@ -30,8 +30,9 @@ interface SidebarInputProps {
     onChange: (value: string) => void;
     placeholder?: string;
     type?: 'text' | 'number';
+    disabled?: boolean;
 }
-export declare function SidebarInput({ value, onChange, placeholder, type }: SidebarInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarInput({ value, onChange, placeholder, type, disabled, }: SidebarInputProps): import("react/jsx-runtime").JSX.Element;
 interface SidebarCheckboxProps {
     checked: boolean;
     onChange: (checked: boolean) => void;

package/dist/hooks/use-max-height.d.ts

@@ -1 +1 @@
-export declare const useMaxHeight: () => number | null;
+export declare const useMaxHeight: () => number | null | undefined;

package/dist/index.cjs

@@ -5706,6 +5706,7 @@ const preventDefaultHandler = (evt) => {
 };
 const Check = (props) => jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18.063 5.674a1 1 0 0 1 .263 1.39l-7.5 11a1 1 0 0 1-1.533.143l-4.5-4.5a1 1 0 1 1 1.414-1.414l3.647 3.647 6.82-10.003a1 1 0 0 1 1.39-.263Z", clipRule: "evenodd" }) });
 const ChevronDownVector = (props) => jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 16 9", fill: "currentColor", ...props, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L8 6.58579L14.2929 0.292894C14.6834 -0.0976305 15.3166 -0.0976304 15.7071 0.292894C16.0976 0.683418 16.0976 1.31658 15.7071 1.70711L8.70711 8.70711C8.31658 9.09763 7.68342 9.09763 7.29289 8.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z" }) });
+const ChevronRight = (props) => jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M8.293 4.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L14.586 12 8.293 5.707a1 1 0 0 1 0-1.414Z", clipRule: "evenodd" }) });
 const CloseBold = (props) => jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.83071 5.83077C6.33839 5.32309 7.16151 5.32309 7.66919 5.83077L12 10.1615L16.3307 5.83077C16.8384 5.32309 17.6615 5.32309 18.1692 5.83077C18.6769 6.33845 18.6769 7.16157 18.1692 7.66925L13.8384 12L18.1692 16.3308C18.6769 16.8385 18.6769 17.6616 18.1692 18.1693C17.6615 18.6769 16.8384 18.6769 16.3307 18.1693L12 13.8385L7.66919 18.1693C7.16151 18.6769 6.33839 18.6769 5.83071 18.1693C5.32303 17.6616 5.32303 16.8385 5.83071 16.3308L10.1615 12L5.83071 7.66925C5.32303 7.16157 5.32303 6.33845 5.83071 5.83077Z", fill: "currentColor" }) });
 const DropdownVector = (props) => jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 10 16", fill: "currentColor", ...props, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.34151 0.747423C4.71854 0.417526 5.28149 0.417526 5.65852 0.747423L9.65852 4.24742C10.0742 4.61111 10.1163 5.24287 9.75259 5.6585C9.38891 6.07414 8.75715 6.11626 8.34151 5.75258L5.00001 2.82877L1.65852 5.75258C1.24288 6.11626 0.61112 6.07414 0.247438 5.6585C-0.116244 5.24287 -0.0741267 4.61111 0.34151 4.24742L4.34151 0.747423ZM0.246065 10.3578C0.608879 9.94139 1.24055 9.89795 1.65695 10.2608L5.00001 13.1737L8.34308 10.2608C8.75948 9.89795 9.39115 9.94139 9.75396 10.3578C10.1168 10.7742 10.0733 11.4058 9.65695 11.7687L5.65695 15.2539C5.28043 15.582 4.7196 15.582 4.34308 15.2539L0.343082 11.7687C-0.0733128 11.4058 -0.116749 10.7742 0.246065 10.3578Z" }) });
 const Info = (props) => jsxRuntime.jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [jsxRuntime.jsx("path", { d: "M13 12a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0v-4Zm-1-2.5A1.25 1.25 0 1 0 12 7a1.25 1.25 0 0 0 0 2.5Z" }), jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z", clipRule: "evenodd" })] });
@@ -7378,12 +7379,78 @@ const Segment = ({ children, ...restProps }) => {
 };
 SegmentedControl.Option = Segment;
 function SimpleSidebar({ children, controls }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-screen w-full overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "max-md:hidden md:flex w-56 flex-col border-r border-subtle bg-sidebar overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto min-h-0 px-3 pb-3 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xs font-semibold sticky top-0 bg-sidebar z-10 py-2", children: "Controls" }),
-      controls
-    ] }) }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto", children })
+  const [isDrawerOpen, setIsDrawerOpen] = React__namespace.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sunpeak-simulator-root flex h-screen w-full overflow-hidden relative", children: [
+    isDrawerOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "md:hidden fixed inset-0 bg-black/50 z-40 pointer-events-auto",
+        onClick: (e) => {
+          if (e.target === e.currentTarget) {
+            setIsDrawerOpen(false);
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "aside",
+      {
+        className: `
+          w-56 flex flex-col border-r border-subtle bg-sidebar
+          md:relative md:z-auto
+          max-md:fixed max-md:inset-y-0 max-md:left-0 max-md:z-[100]
+          max-md:transition-transform max-md:duration-300
+          ${isDrawerOpen ? "max-md:translate-x-0" : "max-md:-translate-x-full"}
+        `,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto min-h-0 px-3 pb-3 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between sticky top-0 bg-sidebar z-10 py-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xs font-semibold", children: "Controls" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setIsDrawerOpen(false),
+                className: "md:hidden text-secondary hover:text-primary transition-colors p-1",
+                type: "button",
+                "aria-label": "Close sidebar",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M12 4L4 12M4 4L12 12",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          controls
+        ] }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex-1 overflow-auto relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setIsDrawerOpen(true),
+          className: "md:hidden fixed top-18 left-0 z-30 bg-sidebar border-r border-t border-b border-subtle rounded-r-md p-2 shadow-lg hover:bg-primary/10 transition-colors",
+          type: "button",
+          "aria-label": "Open sidebar",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {})
+        }
+      ),
+      children
+    ] })
   ] });
 }
 function SidebarControl({ label, children }) {
@@ -7427,7 +7494,13 @@ function SidebarSelect({ value, onChange, options, placeholder }) {
     }
   );
 }
-function SidebarInput({ value, onChange, placeholder, type = "text" }) {
+function SidebarInput({
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+  disabled = false
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Input,
     {
@@ -7435,7 +7508,8 @@ function SidebarInput({ value, onChange, placeholder, type = "text" }) {
       value,
       onChange: (e) => onChange(e.target.value),
       placeholder,
-      size: "2xs"
+      size: "2xs",
+      disabled
     }
   );
 }
@@ -7511,144 +7585,148 @@ function Conversation({
         api.requestDisplayMode({ mode: "inline" });
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1 items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "w-full border-subtle bg-surface z-10 grid h-12 grid-cols-[1fr_auto_1fr] border-b px-2",
-          style: { maxWidth: containerWidth },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-start gap-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: handleClose,
-                "aria-label": "Close",
-                className: "h-7 w-7 flex items-center justify-center hover:bg-subtle rounded-md transition-colors text-primary",
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(CloseBold, {})
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-primary flex items-center justify-center text-base", children: appName }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "relative overflow-hidden flex-1 w-full",
-          style: { maxWidth: containerWidth },
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full max-w-full overflow-auto", children })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "bg-surface w-full", style: { maxWidth: containerWidth }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "text",
-          name: "userInput",
-          disabled: true,
-          placeholder: "Message SimGPT",
-          className: "w-full bg-[var(--color-background-primary)] dark:bg-[#303030] text-secondary-foreground placeholder:text-muted-foreground rounded-3xl px-5 py-3 pr-12 shadow-md light:border border-[#0000000f]"
-        }
-      ) }) }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1 items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "header",
-      {
-        className: "h-12 bg-surface flex items-center px-4 text-lg sticky top-0 z-40 w-full",
-        style: { maxWidth: containerWidth },
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: "SimGPT" })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "flex flex-col flex-1 w-full transition-all duration-200 overflow-hidden",
-        style: { maxWidth: containerWidth },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "text-primary w-full focus:outline-none", dir: "auto", "data-turn": "user", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "sr-only", children: "You said:" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base my-auto mx-auto md:pt-8 px-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex max-w-full flex-col grow", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+        className: "flex flex-col bg-surface w-full h-full flex-1 items-center relative",
+        style: { transform: "translate(0)" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "no-scrollbar fixed start-0 end-0 top-0 bottom-0 z-50 mx-auto flex w-auto flex-col overflow-hidden",
+            style: { maxWidth: containerWidth },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-subtle bg-token-bg-primary sm:bg-token-bg-primary z-10 grid h-[3.25rem] grid-cols-[1fr_auto_1fr] border-b px-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-start gap-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: handleClose,
+                    "aria-label": "Close",
+                    className: "h-7 w-7 flex items-center justify-center hover:bg-subtle rounded-md transition-colors text-primary",
+                    type: "button",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(CloseBold, {})
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-primary flex items-center justify-center text-base", children: appName }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full max-w-full overflow-auto", children }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "bg-surface", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
                 {
-                  "data-message-author-role": "user",
-                  className: "min-h-8 relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden items-end", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[var(--color-background-primary-soft)] relative rounded-[18px] px-4 py-3 max-w-[70%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap", children: userMessage }) }) })
+                  type: "text",
+                  name: "userInput",
+                  disabled: true,
+                  placeholder: "Message SimGPT",
+                  className: "w-full dark:bg-[#303030] text-secondary-foreground placeholder:text-muted-foreground rounded-3xl px-5 py-3 pr-12 shadow-md light:border border-[#0000000f]"
                 }
               ) }) }) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "article",
-              {
-                className: "text-primary w-full focus:outline-none",
-                dir: "auto",
-                "data-turn": "assistant",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("h6", { className: "sr-only", children: [
-                    appName,
-                    " said:"
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base my-auto mx-auto pb-10 px-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-full flex-col grow", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 my-3", children: [
-                      appIcon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 flex items-center justify-center text-base", children: appIcon }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-medium text-xs", children: "AI" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm", children: appName })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        "data-message-author-role": "assistant",
-                        className: "min-h-8 relative flex w-full flex-col items-start gap-2 text-start break-words whitespace-normal",
-                        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden", children: displayMode === "pip" ? /* @__PURE__ */ jsxRuntime.jsxs(
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex flex-col bg-surface w-full h-full flex-1 items-center relative",
+      style: { transform: "translate(0)" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "header",
+          {
+            className: "h-12 bg-surface flex items-center px-4 text-lg sticky top-0 z-40 w-full",
+            style: { maxWidth: containerWidth },
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: "SimGPT" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex flex-col flex-1 w-full transition-all duration-200 overflow-hidden",
+            style: { maxWidth: containerWidth },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "text-primary w-full focus:outline-none", dir: "auto", "data-turn": "user", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "sr-only", children: "You said:" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base my-auto mx-auto md:pt-8 px-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex max-w-full flex-col grow", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      "data-message-author-role": "user",
+                      className: "min-h-8 relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden items-end", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[var(--color-background-primary-soft)] relative rounded-[18px] px-4 py-3 max-w-[70%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap", children: userMessage }) }) })
+                    }
+                  ) }) }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "article",
+                  {
+                    className: "text-primary w-full focus:outline-none",
+                    dir: "auto",
+                    "data-turn": "assistant",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("h6", { className: "sr-only", children: [
+                        appName,
+                        " said:"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base my-auto mx-auto pb-10 px-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-full flex-col grow", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 my-3", children: [
+                          appIcon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 flex items-center justify-center text-base", children: appIcon }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-6 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-medium text-xs", children: "AI" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm", children: appName })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
                           "div",
                           {
-                            className: "fixed top-14 z-50 overflow-visible left-1/2 md:left-[calc(50vw+7rem)] -translate-x-1/2 max-w-[calc(100vw-2rem)] md:max-w-[calc(100vw-16rem)]",
-                            style: {
-                              maxHeight: "429px",
-                              width: containerWidth
-                            },
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                "button",
-                                {
-                                  onClick: () => {
-                                    if (api == null ? void 0 : api.requestDisplayMode) {
-                                      api.requestDisplayMode({ mode: "inline" });
+                            "data-message-author-role": "assistant",
+                            className: "min-h-8 relative flex w-full flex-col items-start gap-2 text-start break-words whitespace-normal",
+                            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden", children: displayMode === "pip" ? /* @__PURE__ */ jsxRuntime.jsxs(
+                              "div",
+                              {
+                                className: "no-scrollbar @w-xl/main:top-4 fixed start-4 end-4 top-12 z-50 mx-auto max-w-[40rem] lg:max-w-[48rem] sm:start-0 sm:end-0 sm:top-[3.25rem] sm:w-full overflow-visible",
+                                style: { maxHeight: "480px" },
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    "button",
+                                    {
+                                      onClick: () => {
+                                        if (api == null ? void 0 : api.requestDisplayMode) {
+                                          api.requestDisplayMode({ mode: "inline" });
+                                        }
+                                      },
+                                      className: "absolute -start-2 -top-1.5 z-10 rounded-full bg-[#3a3a3a] p-1.5 text-white shadow-[0px_0px_0px_1px_#fff3,0px_4px_12px_rgba(0,0,0,0.12)] hover:bg-[#6a6a6a]",
+                                      "aria-label": "Close picture-in-picture",
+                                      type: "button",
+                                      children: /* @__PURE__ */ jsxRuntime.jsx(CloseBold, { className: "h-4 w-4" })
                                     }
-                                  },
-                                  className: "absolute -start-2 -top-1.5 z-10 rounded-full bg-[#3a3a3a] p-1.5 text-white shadow-[0px_0px_0px_1px_var(--border-heavy),0px_4px_12px_rgba(0,0,0,0.12)] hover:bg-[#6a6a6a]",
-                                  "aria-label": "Close picture-in-picture",
-                                  type: "button",
-                                  children: /* @__PURE__ */ jsxRuntime.jsx(CloseBold, { className: "h-4 w-4" })
-                                }
-                              ),
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden h-full rounded-2xl sm:rounded-3xl shadow-[0px_0px_0px_1px_var(--border-heavy),0px_6px_20px_rgba(0,0,0,0.1)] border border-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full max-w-full overflow-auto bg-surface", children }) })
-                            ]
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden h-full rounded-2xl sm:rounded-3xl shadow-[0px_0px_0px_1px_#fff3,0px_6px_20px_rgba(0,0,0,0.1)] md:-mx-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full max-w-full overflow-auto bg-white dark:bg-[#212121]", children }) })
+                                ]
+                              }
+                            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "no-scrollbar relative mb-2 @w-sm/main:w-full mx-0 max-sm:-mx-[1rem] max-sm:w-[100cqw] max-sm:overflow-hidden overflow-visible", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden h-full", children }) }) })
                           }
-                        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full overflow-x-auto", children }) })
-                      }
-                    )
-                  ] }) }) })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "bg-surface", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "text",
-              name: "userInput",
-              disabled: true,
-              placeholder: "Message SimGPT",
-              className: "w-full bg-[var(--color-background-primary)] dark:bg-[#303030] text-secondary-foreground placeholder:text-muted-foreground rounded-3xl px-5 py-3 pr-12 shadow-md light:border border-[#0000000f]"
-            }
-          ) }) }) })
-        ]
-      }
-    )
-  ] });
+                        )
+                      ] }) }) })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "bg-surface", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[48rem] mx-auto px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  name: "userInput",
+                  disabled: true,
+                  placeholder: "Message SimGPT",
+                  className: "w-full dark:bg-[#303030] text-secondary-foreground placeholder:text-muted-foreground rounded-3xl px-5 py-3 pr-12 shadow-md light:border border-[#0000000f]"
+                }
+              ) }) }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 class MockOpenAI {
   constructor() {
@@ -7661,7 +7739,7 @@ class MockOpenAI {
       }
     });
     __publicField(this, "locale", "en-US");
-    __publicField(this, "maxHeight", 600);
+    __publicField(this, "maxHeight");
     __publicField(this, "displayMode", "inline");
     __publicField(this, "safeArea", {
       insets: {
@@ -7722,7 +7800,8 @@ class MockOpenAI {
   }
   setDisplayMode(displayMode) {
     this.displayMode = displayMode;
-    this.emitUpdate({ displayMode });
+    this.maxHeight = displayMode === "pip" ? 480 : void 0;
+    this.emitUpdate({ displayMode, maxHeight: this.maxHeight });
   }
   setSafeArea(safeArea) {
     this.safeArea = safeArea;
@@ -7857,7 +7936,7 @@ function ChatGPTSimulator({
     []
   );
   React.useEffect(() => {
-    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     if (selectedSim) {
       if (((_a2 = selectedSim.simulationGlobals) == null ? void 0 : _a2.theme) !== void 0) {
         mock.theme = selectedSim.simulationGlobals.theme;
@@ -7871,12 +7950,13 @@ function ChatGPTSimulator({
       }
       mock.userAgent = ((_c = selectedSim.simulationGlobals) == null ? void 0 : _c.userAgent) ?? mock.userAgent;
       mock.locale = ((_d = selectedSim.simulationGlobals) == null ? void 0 : _d.locale) ?? "en-US";
-      mock.maxHeight = ((_e = selectedSim.simulationGlobals) == null ? void 0 : _e.maxHeight) ?? 600;
-      mock.safeArea = ((_f = selectedSim.simulationGlobals) == null ? void 0 : _f.safeArea) ?? mock.safeArea;
-      mock.view = ((_g = selectedSim.simulationGlobals) == null ? void 0 : _g.view) ?? null;
-      mock.toolInput = ((_h = selectedSim.simulationGlobals) == null ? void 0 : _h.toolInput) ?? {};
-      mock.widgetState = ((_i = selectedSim.simulationGlobals) == null ? void 0 : _i.widgetState) ?? null;
-      mock.toolOutput = ((_j = selectedSim.toolCall) == null ? void 0 : _j.structuredContent) ?? null;
+      const currentDisplayMode = ((_e = selectedSim.simulationGlobals) == null ? void 0 : _e.displayMode) ?? DEFAULT_DISPLAY_MODE;
+      mock.maxHeight = currentDisplayMode === "pip" ? ((_f = selectedSim.simulationGlobals) == null ? void 0 : _f.maxHeight) ?? 480 : void 0;
+      mock.safeArea = ((_g = selectedSim.simulationGlobals) == null ? void 0 : _g.safeArea) ?? mock.safeArea;
+      mock.view = ((_h = selectedSim.simulationGlobals) == null ? void 0 : _h.view) ?? null;
+      mock.toolInput = ((_i = selectedSim.simulationGlobals) == null ? void 0 : _i.toolInput) ?? {};
+      mock.widgetState = ((_j = selectedSim.simulationGlobals) == null ? void 0 : _j.widgetState) ?? null;
+      mock.toolOutput = ((_k = selectedSim.toolCall) == null ? void 0 : _k.structuredContent) ?? null;
     }
   }, [selectedKey, selectedSim, mock]);
   const theme = useTheme() ?? DEFAULT_THEME;
@@ -8071,13 +8151,18 @@ function ChatGPTSimulator({
               placeholder: "e.g. en-US"
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Max Height", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Max Height (PiP)", children: /* @__PURE__ */ jsxRuntime.jsx(
             SidebarInput,
             {
               type: "number",
-              value: String(maxHeight),
-              onChange: (value) => mock.setMaxHeight(Number(value)),
-              placeholder: "600"
+              value: displayMode === "pip" && maxHeight !== void 0 ? String(maxHeight) : "",
+              onChange: (value) => {
+                if (displayMode === "pip") {
+                  mock.setMaxHeight(value ? Number(value) : 480);
+                }
+              },
+              placeholder: displayMode === "pip" ? "480" : "-",
+              disabled: displayMode !== "pip"
             }
           ) })
         ] }),