sunpeak 0.5.36 → 0.5.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/chatgpt/mock-openai.d.ts +2 -2
  2. package/dist/chatgpt/simple-sidebar.d.ts +2 -1
  3. package/dist/hooks/use-max-height.d.ts +1 -1
  4. package/dist/index.cjs +176 -121
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.js +176 -121
  7. package/dist/index.js.map +1 -1
  8. package/dist/providers/openai/types.d.ts +1 -1
  9. package/dist/providers/types.d.ts +1 -1
  10. package/dist/style.css +155 -36
  11. package/package.json +1 -1
  12. package/template/dist/chatgpt/albums.js +10 -10
  13. package/template/dist/chatgpt/carousel.js +2 -2
  14. package/template/dist/chatgpt/counter.js +7 -7
  15. package/template/node_modules/.vite/deps/@openai_apps-sdk-ui_components_Button.js +3 -3
  16. package/template/node_modules/.vite/deps/@openai_apps-sdk-ui_components_SegmentedControl.js +4 -4
  17. package/template/node_modules/.vite/deps/@openai_apps-sdk-ui_components_Select.js +19 -19
  18. package/template/node_modules/.vite/deps/@openai_apps-sdk-ui_components_Textarea.js +3 -3
  19. package/template/node_modules/.vite/deps/_metadata.json +30 -30
  20. package/template/node_modules/.vite/deps/{chunk-675LFNY2.js → chunk-EVJ3DVH5.js} +8 -8
  21. package/template/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json +1 -1
  22. package/template/src/components/album/albums.test.tsx +7 -2
  23. package/template/src/components/album/albums.tsx +1 -1
  24. package/template/src/components/album/fullscreen-viewer.test.tsx +12 -24
  25. package/template/src/components/album/fullscreen-viewer.tsx +55 -34
  26. package/template/src/components/carousel/carousel.tsx +1 -1
  27. package/template/src/components/resources/albums-resource.tsx +1 -0
  28. package/template/src/components/resources/counter-resource.tsx +8 -0
  29. package/template/src/simulations/albums-simulation.ts +5 -1
  30. package/template/src/simulations/carousel-simulation.ts +5 -1
  31. package/template/src/simulations/counter-simulation.ts +6 -1
  32. package/template/src/simulations/widget-config.ts +42 -0
  33. /package/template/node_modules/.vite/deps/{chunk-675LFNY2.js.map → chunk-EVJ3DVH5.js.map} +0 -0
package/dist/index.js CHANGED
@@ -7408,7 +7408,13 @@ function SidebarSelect({ value, onChange, options, placeholder }) {
7408
7408
  }
7409
7409
  );
7410
7410
  }
7411
- function SidebarInput({ value, onChange, placeholder, type = "text" }) {
7411
+ function SidebarInput({
7412
+ value,
7413
+ onChange,
7414
+ placeholder,
7415
+ type = "text",
7416
+ disabled = false
7417
+ }) {
7412
7418
  return /* @__PURE__ */ jsx(
7413
7419
  Input,
7414
7420
  {
@@ -7416,7 +7422,8 @@ function SidebarInput({ value, onChange, placeholder, type = "text" }) {
7416
7422
  value,
7417
7423
  onChange: (e) => onChange(e.target.value),
7418
7424
  placeholder,
7419
- size: "2xs"
7425
+ size: "2xs",
7426
+ disabled
7420
7427
  }
7421
7428
  );
7422
7429
  }
@@ -7492,120 +7499,148 @@ function Conversation({
7492
7499
  api.requestDisplayMode({ mode: "inline" });
7493
7500
  }
7494
7501
  };
7495
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1", children: [
7496
- /* @__PURE__ */ jsxs("div", { className: "border-subtle bg-surface z-10 grid h-12 grid-cols-[1fr_auto_1fr] border-b px-2", children: [
7497
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start gap-3", children: /* @__PURE__ */ jsx(
7498
- "button",
7499
- {
7500
- onClick: handleClose,
7501
- "aria-label": "Close",
7502
- className: "h-7 w-7 flex items-center justify-center hover:bg-subtle rounded-md transition-colors text-primary",
7503
- type: "button",
7504
- children: /* @__PURE__ */ jsx(CloseBold, {})
7505
- }
7506
- ) }),
7507
- /* @__PURE__ */ jsx("div", { className: "text-primary flex items-center justify-center text-base", children: appName }),
7508
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end" })
7509
- ] }),
7510
- /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden flex-1", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full max-w-full overflow-auto", children }) }),
7511
- /* @__PURE__ */ jsx("footer", { className: "bg-surface", children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto px-4 py-4", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
7512
- "input",
7513
- {
7514
- type: "text",
7515
- name: "userInput",
7516
- disabled: true,
7517
- placeholder: "Message SimGPT",
7518
- 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]"
7519
- }
7520
- ) }) }) })
7521
- ] });
7522
- }
7523
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1", children: [
7524
- /* @__PURE__ */ jsx("header", { className: "h-12 bg-surface flex items-center px-4 text-lg sticky top-0 z-40", children: /* @__PURE__ */ jsx("span", { className: "text-primary", children: "SimGPT" }) }),
7525
- /* @__PURE__ */ jsxs(
7502
+ return /* @__PURE__ */ jsx(
7526
7503
  "div",
7527
7504
  {
7528
- className: "flex flex-col flex-1 mx-auto w-full transition-all duration-200 overflow-hidden",
7529
- style: { maxWidth: containerWidth },
7530
- children: [
7531
- /* @__PURE__ */ jsxs("main", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: [
7532
- /* @__PURE__ */ jsxs("article", { className: "text-primary w-full focus:outline-none", dir: "auto", "data-turn": "user", children: [
7533
- /* @__PURE__ */ jsx("h5", { className: "sr-only", children: "You said:" }),
7534
- /* @__PURE__ */ jsx("div", { className: "text-base my-auto mx-auto md:pt-12 px-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex max-w-full flex-col grow", children: /* @__PURE__ */ jsx(
7535
- "div",
7505
+ className: "flex flex-col bg-surface w-full h-full flex-1 items-center relative",
7506
+ style: { transform: "translate(0)" },
7507
+ children: /* @__PURE__ */ jsxs(
7508
+ "div",
7509
+ {
7510
+ className: "no-scrollbar fixed start-0 end-0 top-0 bottom-0 z-50 mx-auto flex w-auto flex-col overflow-hidden",
7511
+ style: { maxWidth: containerWidth },
7512
+ children: [
7513
+ /* @__PURE__ */ 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: [
7514
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start gap-3", children: /* @__PURE__ */ jsx(
7515
+ "button",
7516
+ {
7517
+ onClick: handleClose,
7518
+ "aria-label": "Close",
7519
+ className: "h-7 w-7 flex items-center justify-center hover:bg-subtle rounded-md transition-colors text-primary",
7520
+ type: "button",
7521
+ children: /* @__PURE__ */ jsx(CloseBold, {})
7522
+ }
7523
+ ) }),
7524
+ /* @__PURE__ */ jsx("div", { className: "text-primary flex items-center justify-center text-base", children: appName }),
7525
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end" })
7526
+ ] }),
7527
+ /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden flex-1 min-h-0", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full max-w-full overflow-auto", children }) }),
7528
+ /* @__PURE__ */ jsx("footer", { className: "bg-surface", children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto px-4 py-4", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
7529
+ "input",
7536
7530
  {
7537
- "data-message-author-role": "user",
7538
- className: "min-h-8 relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal",
7539
- children: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden items-end", children: /* @__PURE__ */ jsx("div", { className: "bg-[var(--color-background-primary-soft)] relative rounded-[18px] px-4 py-3 max-w-[70%]", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap", children: userMessage }) }) })
7531
+ type: "text",
7532
+ name: "userInput",
7533
+ disabled: true,
7534
+ placeholder: "Message SimGPT",
7535
+ 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]"
7540
7536
  }
7541
7537
  ) }) }) })
7542
- ] }),
7543
- /* @__PURE__ */ jsxs(
7544
- "article",
7545
- {
7546
- className: "text-primary w-full focus:outline-none",
7547
- dir: "auto",
7548
- "data-turn": "assistant",
7549
- children: [
7550
- /* @__PURE__ */ jsxs("h6", { className: "sr-only", children: [
7551
- appName,
7552
- " said:"
7553
- ] }),
7554
- /* @__PURE__ */ jsx("div", { className: "text-base my-auto mx-auto pb-10 px-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-full flex-col grow", children: [
7555
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 my-3", children: [
7556
- appIcon ? /* @__PURE__ */ jsx("div", { className: "size-6 flex items-center justify-center text-base", children: appIcon }) : /* @__PURE__ */ jsx("div", { className: "size-6 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-medium text-xs", children: "AI" }),
7557
- /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm", children: appName })
7558
- ] }),
7559
- /* @__PURE__ */ jsx(
7560
- "div",
7561
- {
7562
- "data-message-author-role": "assistant",
7563
- className: "min-h-8 relative flex w-full flex-col items-start gap-2 text-start break-words whitespace-normal",
7564
- children: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden", children: displayMode === "pip" ? /* @__PURE__ */ jsxs(
7538
+ ]
7539
+ }
7540
+ )
7541
+ }
7542
+ );
7543
+ }
7544
+ return /* @__PURE__ */ jsxs(
7545
+ "div",
7546
+ {
7547
+ className: "flex flex-col bg-surface w-full h-full flex-1 items-center relative",
7548
+ style: { transform: "translate(0)" },
7549
+ children: [
7550
+ /* @__PURE__ */ jsx(
7551
+ "header",
7552
+ {
7553
+ className: "h-12 bg-surface flex items-center px-4 text-lg sticky top-0 z-40 w-full",
7554
+ style: { maxWidth: containerWidth },
7555
+ children: /* @__PURE__ */ jsx("span", { className: "text-primary", children: "SimGPT" })
7556
+ }
7557
+ ),
7558
+ /* @__PURE__ */ jsxs(
7559
+ "div",
7560
+ {
7561
+ className: "flex flex-col flex-1 w-full transition-all duration-200 overflow-hidden",
7562
+ style: { maxWidth: containerWidth },
7563
+ children: [
7564
+ /* @__PURE__ */ jsxs("main", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: [
7565
+ /* @__PURE__ */ jsxs("article", { className: "text-primary w-full focus:outline-none", dir: "auto", "data-turn": "user", children: [
7566
+ /* @__PURE__ */ jsx("h5", { className: "sr-only", children: "You said:" }),
7567
+ /* @__PURE__ */ jsx("div", { className: "text-base my-auto mx-auto md:pt-8 px-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex max-w-full flex-col grow", children: /* @__PURE__ */ jsx(
7568
+ "div",
7569
+ {
7570
+ "data-message-author-role": "user",
7571
+ className: "min-h-8 relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal",
7572
+ children: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden items-end", children: /* @__PURE__ */ jsx("div", { className: "bg-[var(--color-background-primary-soft)] relative rounded-[18px] px-4 py-3 max-w-[70%]", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap", children: userMessage }) }) })
7573
+ }
7574
+ ) }) }) })
7575
+ ] }),
7576
+ /* @__PURE__ */ jsxs(
7577
+ "article",
7578
+ {
7579
+ className: "text-primary w-full focus:outline-none",
7580
+ dir: "auto",
7581
+ "data-turn": "assistant",
7582
+ children: [
7583
+ /* @__PURE__ */ jsxs("h6", { className: "sr-only", children: [
7584
+ appName,
7585
+ " said:"
7586
+ ] }),
7587
+ /* @__PURE__ */ jsx("div", { className: "text-base my-auto mx-auto pb-10 px-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto flex-1 relative flex w-full min-w-0 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-full flex-col grow", children: [
7588
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 my-3", children: [
7589
+ appIcon ? /* @__PURE__ */ jsx("div", { className: "size-6 flex items-center justify-center text-base", children: appIcon }) : /* @__PURE__ */ jsx("div", { className: "size-6 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-medium text-xs", children: "AI" }),
7590
+ /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm", children: appName })
7591
+ ] }),
7592
+ /* @__PURE__ */ jsx(
7565
7593
  "div",
7566
7594
  {
7567
- className: "fixed start-4 end-4 top-14 z-50 mx-auto max-w-[48rem] md:start-60 md:end-4 sm:start-0 sm:end-0 sm:w-full overflow-visible",
7568
- style: { maxHeight: "429px" },
7569
- children: [
7570
- /* @__PURE__ */ jsx(
7571
- "button",
7572
- {
7573
- onClick: () => {
7574
- if (api == null ? void 0 : api.requestDisplayMode) {
7575
- api.requestDisplayMode({ mode: "inline" });
7595
+ "data-message-author-role": "assistant",
7596
+ className: "min-h-8 relative flex w-full flex-col items-start gap-2 text-start break-words whitespace-normal",
7597
+ children: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden", children: displayMode === "pip" ? /* @__PURE__ */ jsxs(
7598
+ "div",
7599
+ {
7600
+ className: "no-scrollbar @w-xl/main:top-4 fixed start-4 end-4 top-4 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",
7601
+ style: { maxHeight: "480px" },
7602
+ children: [
7603
+ /* @__PURE__ */ jsx(
7604
+ "button",
7605
+ {
7606
+ onClick: () => {
7607
+ if (api == null ? void 0 : api.requestDisplayMode) {
7608
+ api.requestDisplayMode({ mode: "inline" });
7609
+ }
7610
+ },
7611
+ 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]",
7612
+ "aria-label": "Close picture-in-picture",
7613
+ type: "button",
7614
+ children: /* @__PURE__ */ jsx(CloseBold, { className: "h-4 w-4" })
7576
7615
  }
7577
- },
7578
- 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]",
7579
- "aria-label": "Close picture-in-picture",
7580
- type: "button",
7581
- children: /* @__PURE__ */ jsx(CloseBold, { className: "h-4 w-4" })
7582
- }
7583
- ),
7584
- /* @__PURE__ */ 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__ */ jsx("div", { className: "h-full w-full max-w-full overflow-auto bg-surface", children }) })
7585
- ]
7616
+ ),
7617
+ /* @__PURE__ */ 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__ */ jsx("div", { className: "h-full w-full max-w-full overflow-auto bg-[#212121]", children }) })
7618
+ ]
7619
+ }
7620
+ ) : /* @__PURE__ */ 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__ */ jsx("div", { className: "relative overflow-hidden h-full", children }) }) })
7586
7621
  }
7587
- ) : /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto", children }) })
7588
- }
7589
- )
7590
- ] }) }) })
7591
- ]
7592
- }
7593
- )
7594
- ] }),
7595
- /* @__PURE__ */ jsx("footer", { className: "bg-surface", children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto px-4 py-4", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
7596
- "input",
7597
- {
7598
- type: "text",
7599
- name: "userInput",
7600
- disabled: true,
7601
- placeholder: "Message SimGPT",
7602
- 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]"
7603
- }
7604
- ) }) }) })
7605
- ]
7606
- }
7607
- )
7608
- ] });
7622
+ )
7623
+ ] }) }) })
7624
+ ]
7625
+ }
7626
+ )
7627
+ ] }),
7628
+ /* @__PURE__ */ jsx("footer", { className: "bg-surface", children: /* @__PURE__ */ jsx("div", { className: "max-w-[48rem] mx-auto px-4 py-4", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
7629
+ "input",
7630
+ {
7631
+ type: "text",
7632
+ name: "userInput",
7633
+ disabled: true,
7634
+ placeholder: "Message SimGPT",
7635
+ 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]"
7636
+ }
7637
+ ) }) }) })
7638
+ ]
7639
+ }
7640
+ )
7641
+ ]
7642
+ }
7643
+ );
7609
7644
  }
7610
7645
  class MockOpenAI {
7611
7646
  constructor() {
@@ -7618,7 +7653,7 @@ class MockOpenAI {
7618
7653
  }
7619
7654
  });
7620
7655
  __publicField(this, "locale", "en-US");
7621
- __publicField(this, "maxHeight", 600);
7656
+ __publicField(this, "maxHeight");
7622
7657
  __publicField(this, "displayMode", "inline");
7623
7658
  __publicField(this, "safeArea", {
7624
7659
  insets: {
@@ -7679,7 +7714,8 @@ class MockOpenAI {
7679
7714
  }
7680
7715
  setDisplayMode(displayMode) {
7681
7716
  this.displayMode = displayMode;
7682
- this.emitUpdate({ displayMode });
7717
+ this.maxHeight = displayMode === "pip" ? 480 : void 0;
7718
+ this.emitUpdate({ displayMode, maxHeight: this.maxHeight });
7683
7719
  }
7684
7720
  setSafeArea(safeArea) {
7685
7721
  this.safeArea = safeArea;
@@ -7799,6 +7835,7 @@ function ChatGPTSimulator({
7799
7835
  appIcon
7800
7836
  }) {
7801
7837
  const [screenWidth, setScreenWidth] = React.useState("full");
7838
+ const isMobileWidth = (width) => width === "mobile-s" || width === "mobile-l";
7802
7839
  const getSimulationKey = (sim) => `${sim.resource.name}-${sim.tool.name}`;
7803
7840
  const [selectedKey, setSelectedKey] = React.useState(
7804
7841
  simulations.length > 0 ? getSimulationKey(simulations[0]) : ""
@@ -7813,7 +7850,7 @@ function ChatGPTSimulator({
7813
7850
  []
7814
7851
  );
7815
7852
  useEffect(() => {
7816
- var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
7853
+ var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k;
7817
7854
  if (selectedSim) {
7818
7855
  if (((_a2 = selectedSim.simulationGlobals) == null ? void 0 : _a2.theme) !== void 0) {
7819
7856
  mock.theme = selectedSim.simulationGlobals.theme;
@@ -7827,12 +7864,13 @@ function ChatGPTSimulator({
7827
7864
  }
7828
7865
  mock.userAgent = ((_c = selectedSim.simulationGlobals) == null ? void 0 : _c.userAgent) ?? mock.userAgent;
7829
7866
  mock.locale = ((_d = selectedSim.simulationGlobals) == null ? void 0 : _d.locale) ?? "en-US";
7830
- mock.maxHeight = ((_e = selectedSim.simulationGlobals) == null ? void 0 : _e.maxHeight) ?? 600;
7831
- mock.safeArea = ((_f = selectedSim.simulationGlobals) == null ? void 0 : _f.safeArea) ?? mock.safeArea;
7832
- mock.view = ((_g = selectedSim.simulationGlobals) == null ? void 0 : _g.view) ?? null;
7833
- mock.toolInput = ((_h = selectedSim.simulationGlobals) == null ? void 0 : _h.toolInput) ?? {};
7834
- mock.widgetState = ((_i = selectedSim.simulationGlobals) == null ? void 0 : _i.widgetState) ?? null;
7835
- mock.toolOutput = ((_j = selectedSim.toolCall) == null ? void 0 : _j.structuredContent) ?? null;
7867
+ const currentDisplayMode = ((_e = selectedSim.simulationGlobals) == null ? void 0 : _e.displayMode) ?? DEFAULT_DISPLAY_MODE;
7868
+ mock.maxHeight = currentDisplayMode === "pip" ? ((_f = selectedSim.simulationGlobals) == null ? void 0 : _f.maxHeight) ?? 480 : void 0;
7869
+ mock.safeArea = ((_g = selectedSim.simulationGlobals) == null ? void 0 : _g.safeArea) ?? mock.safeArea;
7870
+ mock.view = ((_h = selectedSim.simulationGlobals) == null ? void 0 : _h.view) ?? null;
7871
+ mock.toolInput = ((_i = selectedSim.simulationGlobals) == null ? void 0 : _i.toolInput) ?? {};
7872
+ mock.widgetState = ((_j = selectedSim.simulationGlobals) == null ? void 0 : _j.widgetState) ?? null;
7873
+ mock.toolOutput = ((_k = selectedSim.toolCall) == null ? void 0 : _k.structuredContent) ?? null;
7836
7874
  }
7837
7875
  }, [selectedKey, selectedSim, mock]);
7838
7876
  const theme = useTheme() ?? DEFAULT_THEME;
@@ -7897,6 +7935,11 @@ function ChatGPTSimulator({
7897
7935
  }
7898
7936
  };
7899
7937
  }, []);
7938
+ useEffect(() => {
7939
+ if (isMobileWidth(screenWidth) && displayMode === "pip") {
7940
+ mock.setDisplayMode("fullscreen");
7941
+ }
7942
+ }, [screenWidth, displayMode, mock]);
7900
7943
  useEffect(() => {
7901
7944
  if (editingField !== "toolInput") {
7902
7945
  setToolInputJson(JSON.stringify(toolInput ?? {}, null, 2));
@@ -7998,7 +8041,14 @@ function ChatGPTSimulator({
7998
8041
  SidebarToggle,
7999
8042
  {
8000
8043
  value: displayMode,
8001
- onChange: (value) => mock.setDisplayMode(value),
8044
+ onChange: (value) => {
8045
+ const newMode = value;
8046
+ if (isMobileWidth(screenWidth) && newMode === "pip") {
8047
+ mock.setDisplayMode("fullscreen");
8048
+ } else {
8049
+ mock.setDisplayMode(newMode);
8050
+ }
8051
+ },
8002
8052
  options: [
8003
8053
  { value: "inline", label: "Inline" },
8004
8054
  { value: "pip", label: "PiP" },
@@ -8015,13 +8065,18 @@ function ChatGPTSimulator({
8015
8065
  placeholder: "e.g. en-US"
8016
8066
  }
8017
8067
  ) }),
8018
- /* @__PURE__ */ jsx(SidebarControl, { label: "Max Height", children: /* @__PURE__ */ jsx(
8068
+ /* @__PURE__ */ jsx(SidebarControl, { label: "Max Height (PiP)", children: /* @__PURE__ */ jsx(
8019
8069
  SidebarInput,
8020
8070
  {
8021
8071
  type: "number",
8022
- value: String(maxHeight),
8023
- onChange: (value) => mock.setMaxHeight(Number(value)),
8024
- placeholder: "600"
8072
+ value: displayMode === "pip" && maxHeight !== void 0 ? String(maxHeight) : "",
8073
+ onChange: (value) => {
8074
+ if (displayMode === "pip") {
8075
+ mock.setMaxHeight(value ? Number(value) : 480);
8076
+ }
8077
+ },
8078
+ placeholder: displayMode === "pip" ? "480" : "-",
8079
+ disabled: displayMode !== "pip"
8025
8080
  }
8026
8081
  ) })
8027
8082
  ] }),