sunpeak 0.5.39 → 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.
@@ -4,7 +4,7 @@ declare class MockOpenAI implements OpenAiAPI, OpenAiGlobals {
4
4
  theme: Theme;
5
5
  userAgent: OpenAiGlobals['userAgent'];
6
6
  locale: string;
7
- maxHeight: number;
7
+ maxHeight: number | undefined;
8
8
  displayMode: DisplayMode;
9
9
  safeArea: {
10
10
  insets: {
@@ -42,7 +42,7 @@ declare class MockOpenAI implements OpenAiAPI, OpenAiGlobals {
42
42
  setTheme(theme: Theme): void;
43
43
  setUserAgent(userAgent: OpenAiGlobals['userAgent']): void;
44
44
  setLocale(locale: string): void;
45
- setMaxHeight(maxHeight: number): void;
45
+ setMaxHeight(maxHeight: number | undefined): void;
46
46
  setDisplayMode(displayMode: DisplayMode): void;
47
47
  setSafeArea(safeArea: OpenAiGlobals['safeArea']): void;
48
48
  setView(view: View | null): void;
@@ -30,8 +30,9 @@ interface SidebarInputProps {
30
30
  onChange: (value: string) => void;
31
31
  placeholder?: string;
32
32
  type?: 'text' | 'number';
33
+ disabled?: boolean;
33
34
  }
34
- export declare function SidebarInput({ value, onChange, placeholder, type }: SidebarInputProps): import("react/jsx-runtime").JSX.Element;
35
+ export declare function SidebarInput({ value, onChange, placeholder, type, disabled, }: SidebarInputProps): import("react/jsx-runtime").JSX.Element;
35
36
  interface SidebarCheckboxProps {
36
37
  checked: boolean;
37
38
  onChange: (checked: boolean) => void;
@@ -1 +1 @@
1
- export declare const useMaxHeight: () => number | null;
1
+ export declare const useMaxHeight: () => number | null | undefined;
package/dist/index.cjs CHANGED
@@ -7427,7 +7427,13 @@ function SidebarSelect({ value, onChange, options, placeholder }) {
7427
7427
  }
7428
7428
  );
7429
7429
  }
7430
- function SidebarInput({ value, onChange, placeholder, type = "text" }) {
7430
+ function SidebarInput({
7431
+ value,
7432
+ onChange,
7433
+ placeholder,
7434
+ type = "text",
7435
+ disabled = false
7436
+ }) {
7431
7437
  return /* @__PURE__ */ jsxRuntime.jsx(
7432
7438
  Input,
7433
7439
  {
@@ -7435,7 +7441,8 @@ function SidebarInput({ value, onChange, placeholder, type = "text" }) {
7435
7441
  value,
7436
7442
  onChange: (e) => onChange(e.target.value),
7437
7443
  placeholder,
7438
- size: "2xs"
7444
+ size: "2xs",
7445
+ disabled
7439
7446
  }
7440
7447
  );
7441
7448
  }
@@ -7511,144 +7518,148 @@ function Conversation({
7511
7518
  api.requestDisplayMode({ mode: "inline" });
7512
7519
  }
7513
7520
  };
7514
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1 items-center", children: [
7515
- /* @__PURE__ */ jsxRuntime.jsxs(
7516
- "div",
7517
- {
7518
- className: "w-full border-subtle bg-surface z-10 grid h-12 grid-cols-[1fr_auto_1fr] border-b px-2",
7519
- style: { maxWidth: containerWidth },
7520
- children: [
7521
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-start gap-3", children: /* @__PURE__ */ jsxRuntime.jsx(
7522
- "button",
7523
- {
7524
- onClick: handleClose,
7525
- "aria-label": "Close",
7526
- className: "h-7 w-7 flex items-center justify-center hover:bg-subtle rounded-md transition-colors text-primary",
7527
- type: "button",
7528
- children: /* @__PURE__ */ jsxRuntime.jsx(CloseBold, {})
7529
- }
7530
- ) }),
7531
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-primary flex items-center justify-center text-base", children: appName }),
7532
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end" })
7533
- ]
7534
- }
7535
- ),
7536
- /* @__PURE__ */ jsxRuntime.jsx(
7537
- "div",
7538
- {
7539
- className: "relative overflow-hidden flex-1 w-full",
7540
- style: { maxWidth: containerWidth },
7541
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full max-w-full overflow-auto", children })
7542
- }
7543
- ),
7544
- /* @__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(
7545
- "input",
7546
- {
7547
- type: "text",
7548
- name: "userInput",
7549
- disabled: true,
7550
- placeholder: "Message SimGPT",
7551
- 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]"
7552
- }
7553
- ) }) }) })
7554
- ] });
7555
- }
7556
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1 items-center", children: [
7557
- /* @__PURE__ */ jsxRuntime.jsx(
7558
- "header",
7559
- {
7560
- className: "h-12 bg-surface flex items-center px-4 text-lg sticky top-0 z-40 w-full",
7561
- style: { maxWidth: containerWidth },
7562
- children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: "SimGPT" })
7563
- }
7564
- ),
7565
- /* @__PURE__ */ jsxRuntime.jsxs(
7521
+ return /* @__PURE__ */ jsxRuntime.jsx(
7566
7522
  "div",
7567
7523
  {
7568
- className: "flex flex-col flex-1 w-full transition-all duration-200 overflow-hidden",
7569
- style: { maxWidth: containerWidth },
7570
- children: [
7571
- /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: [
7572
- /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "text-primary w-full focus:outline-none", dir: "auto", "data-turn": "user", children: [
7573
- /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "sr-only", children: "You said:" }),
7574
- /* @__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(
7575
- "div",
7524
+ className: "flex flex-col bg-surface w-full h-full flex-1 items-center relative",
7525
+ style: { transform: "translate(0)" },
7526
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
7527
+ "div",
7528
+ {
7529
+ className: "no-scrollbar fixed start-0 end-0 top-0 bottom-0 z-50 mx-auto flex w-auto flex-col overflow-hidden",
7530
+ style: { maxWidth: containerWidth },
7531
+ children: [
7532
+ /* @__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: [
7533
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-start gap-3", children: /* @__PURE__ */ jsxRuntime.jsx(
7534
+ "button",
7535
+ {
7536
+ onClick: handleClose,
7537
+ "aria-label": "Close",
7538
+ className: "h-7 w-7 flex items-center justify-center hover:bg-subtle rounded-md transition-colors text-primary",
7539
+ type: "button",
7540
+ children: /* @__PURE__ */ jsxRuntime.jsx(CloseBold, {})
7541
+ }
7542
+ ) }),
7543
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-primary flex items-center justify-center text-base", children: appName }),
7544
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end" })
7545
+ ] }),
7546
+ /* @__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 }) }),
7547
+ /* @__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(
7548
+ "input",
7576
7549
  {
7577
- "data-message-author-role": "user",
7578
- className: "min-h-8 relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal",
7579
- 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 }) }) })
7550
+ type: "text",
7551
+ name: "userInput",
7552
+ disabled: true,
7553
+ placeholder: "Message SimGPT",
7554
+ 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]"
7580
7555
  }
7581
7556
  ) }) }) })
7582
- ] }),
7583
- /* @__PURE__ */ jsxRuntime.jsxs(
7584
- "article",
7585
- {
7586
- className: "text-primary w-full focus:outline-none",
7587
- dir: "auto",
7588
- "data-turn": "assistant",
7589
- children: [
7590
- /* @__PURE__ */ jsxRuntime.jsxs("h6", { className: "sr-only", children: [
7591
- appName,
7592
- " said:"
7593
- ] }),
7594
- /* @__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: [
7595
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 my-3", children: [
7596
- 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" }),
7597
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm", children: appName })
7598
- ] }),
7599
- /* @__PURE__ */ jsxRuntime.jsx(
7600
- "div",
7601
- {
7602
- "data-message-author-role": "assistant",
7603
- className: "min-h-8 relative flex w-full flex-col items-start gap-2 text-start break-words whitespace-normal",
7604
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden", children: displayMode === "pip" ? /* @__PURE__ */ jsxRuntime.jsxs(
7557
+ ]
7558
+ }
7559
+ )
7560
+ }
7561
+ );
7562
+ }
7563
+ return /* @__PURE__ */ jsxRuntime.jsxs(
7564
+ "div",
7565
+ {
7566
+ className: "flex flex-col bg-surface w-full h-full flex-1 items-center relative",
7567
+ style: { transform: "translate(0)" },
7568
+ children: [
7569
+ /* @__PURE__ */ jsxRuntime.jsx(
7570
+ "header",
7571
+ {
7572
+ className: "h-12 bg-surface flex items-center px-4 text-lg sticky top-0 z-40 w-full",
7573
+ style: { maxWidth: containerWidth },
7574
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: "SimGPT" })
7575
+ }
7576
+ ),
7577
+ /* @__PURE__ */ jsxRuntime.jsxs(
7578
+ "div",
7579
+ {
7580
+ className: "flex flex-col flex-1 w-full transition-all duration-200 overflow-hidden",
7581
+ style: { maxWidth: containerWidth },
7582
+ children: [
7583
+ /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: [
7584
+ /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "text-primary w-full focus:outline-none", dir: "auto", "data-turn": "user", children: [
7585
+ /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "sr-only", children: "You said:" }),
7586
+ /* @__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(
7587
+ "div",
7588
+ {
7589
+ "data-message-author-role": "user",
7590
+ className: "min-h-8 relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal",
7591
+ 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 }) }) })
7592
+ }
7593
+ ) }) }) })
7594
+ ] }),
7595
+ /* @__PURE__ */ jsxRuntime.jsxs(
7596
+ "article",
7597
+ {
7598
+ className: "text-primary w-full focus:outline-none",
7599
+ dir: "auto",
7600
+ "data-turn": "assistant",
7601
+ children: [
7602
+ /* @__PURE__ */ jsxRuntime.jsxs("h6", { className: "sr-only", children: [
7603
+ appName,
7604
+ " said:"
7605
+ ] }),
7606
+ /* @__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: [
7607
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 my-3", children: [
7608
+ 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" }),
7609
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm", children: appName })
7610
+ ] }),
7611
+ /* @__PURE__ */ jsxRuntime.jsx(
7605
7612
  "div",
7606
7613
  {
7607
- 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)]",
7608
- style: {
7609
- maxHeight: "429px",
7610
- width: containerWidth
7611
- },
7612
- children: [
7613
- /* @__PURE__ */ jsxRuntime.jsx(
7614
- "button",
7615
- {
7616
- onClick: () => {
7617
- if (api == null ? void 0 : api.requestDisplayMode) {
7618
- api.requestDisplayMode({ mode: "inline" });
7614
+ "data-message-author-role": "assistant",
7615
+ className: "min-h-8 relative flex w-full flex-col items-start gap-2 text-start break-words whitespace-normal",
7616
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden", children: displayMode === "pip" ? /* @__PURE__ */ jsxRuntime.jsxs(
7617
+ "div",
7618
+ {
7619
+ 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",
7620
+ style: { maxHeight: "480px" },
7621
+ children: [
7622
+ /* @__PURE__ */ jsxRuntime.jsx(
7623
+ "button",
7624
+ {
7625
+ onClick: () => {
7626
+ if (api == null ? void 0 : api.requestDisplayMode) {
7627
+ api.requestDisplayMode({ mode: "inline" });
7628
+ }
7629
+ },
7630
+ 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]",
7631
+ "aria-label": "Close picture-in-picture",
7632
+ type: "button",
7633
+ children: /* @__PURE__ */ jsxRuntime.jsx(CloseBold, { className: "h-4 w-4" })
7619
7634
  }
7620
- },
7621
- 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]",
7622
- "aria-label": "Close picture-in-picture",
7623
- type: "button",
7624
- children: /* @__PURE__ */ jsxRuntime.jsx(CloseBold, { className: "h-4 w-4" })
7625
- }
7626
- ),
7627
- /* @__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 }) })
7628
- ]
7635
+ ),
7636
+ /* @__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-[#212121]", children }) })
7637
+ ]
7638
+ }
7639
+ ) : /* @__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 }) }) })
7629
7640
  }
7630
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full overflow-x-auto", children }) })
7631
- }
7632
- )
7633
- ] }) }) })
7634
- ]
7635
- }
7636
- )
7637
- ] }),
7638
- /* @__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(
7639
- "input",
7640
- {
7641
- type: "text",
7642
- name: "userInput",
7643
- disabled: true,
7644
- placeholder: "Message SimGPT",
7645
- 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]"
7646
- }
7647
- ) }) }) })
7648
- ]
7649
- }
7650
- )
7651
- ] });
7641
+ )
7642
+ ] }) }) })
7643
+ ]
7644
+ }
7645
+ )
7646
+ ] }),
7647
+ /* @__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(
7648
+ "input",
7649
+ {
7650
+ type: "text",
7651
+ name: "userInput",
7652
+ disabled: true,
7653
+ placeholder: "Message SimGPT",
7654
+ 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]"
7655
+ }
7656
+ ) }) }) })
7657
+ ]
7658
+ }
7659
+ )
7660
+ ]
7661
+ }
7662
+ );
7652
7663
  }
7653
7664
  class MockOpenAI {
7654
7665
  constructor() {
@@ -7661,7 +7672,7 @@ class MockOpenAI {
7661
7672
  }
7662
7673
  });
7663
7674
  __publicField(this, "locale", "en-US");
7664
- __publicField(this, "maxHeight", 600);
7675
+ __publicField(this, "maxHeight");
7665
7676
  __publicField(this, "displayMode", "inline");
7666
7677
  __publicField(this, "safeArea", {
7667
7678
  insets: {
@@ -7722,7 +7733,8 @@ class MockOpenAI {
7722
7733
  }
7723
7734
  setDisplayMode(displayMode) {
7724
7735
  this.displayMode = displayMode;
7725
- this.emitUpdate({ displayMode });
7736
+ this.maxHeight = displayMode === "pip" ? 480 : void 0;
7737
+ this.emitUpdate({ displayMode, maxHeight: this.maxHeight });
7726
7738
  }
7727
7739
  setSafeArea(safeArea) {
7728
7740
  this.safeArea = safeArea;
@@ -7857,7 +7869,7 @@ function ChatGPTSimulator({
7857
7869
  []
7858
7870
  );
7859
7871
  React.useEffect(() => {
7860
- var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
7872
+ var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k;
7861
7873
  if (selectedSim) {
7862
7874
  if (((_a2 = selectedSim.simulationGlobals) == null ? void 0 : _a2.theme) !== void 0) {
7863
7875
  mock.theme = selectedSim.simulationGlobals.theme;
@@ -7871,12 +7883,13 @@ function ChatGPTSimulator({
7871
7883
  }
7872
7884
  mock.userAgent = ((_c = selectedSim.simulationGlobals) == null ? void 0 : _c.userAgent) ?? mock.userAgent;
7873
7885
  mock.locale = ((_d = selectedSim.simulationGlobals) == null ? void 0 : _d.locale) ?? "en-US";
7874
- mock.maxHeight = ((_e = selectedSim.simulationGlobals) == null ? void 0 : _e.maxHeight) ?? 600;
7875
- mock.safeArea = ((_f = selectedSim.simulationGlobals) == null ? void 0 : _f.safeArea) ?? mock.safeArea;
7876
- mock.view = ((_g = selectedSim.simulationGlobals) == null ? void 0 : _g.view) ?? null;
7877
- mock.toolInput = ((_h = selectedSim.simulationGlobals) == null ? void 0 : _h.toolInput) ?? {};
7878
- mock.widgetState = ((_i = selectedSim.simulationGlobals) == null ? void 0 : _i.widgetState) ?? null;
7879
- mock.toolOutput = ((_j = selectedSim.toolCall) == null ? void 0 : _j.structuredContent) ?? null;
7886
+ const currentDisplayMode = ((_e = selectedSim.simulationGlobals) == null ? void 0 : _e.displayMode) ?? DEFAULT_DISPLAY_MODE;
7887
+ mock.maxHeight = currentDisplayMode === "pip" ? ((_f = selectedSim.simulationGlobals) == null ? void 0 : _f.maxHeight) ?? 480 : void 0;
7888
+ mock.safeArea = ((_g = selectedSim.simulationGlobals) == null ? void 0 : _g.safeArea) ?? mock.safeArea;
7889
+ mock.view = ((_h = selectedSim.simulationGlobals) == null ? void 0 : _h.view) ?? null;
7890
+ mock.toolInput = ((_i = selectedSim.simulationGlobals) == null ? void 0 : _i.toolInput) ?? {};
7891
+ mock.widgetState = ((_j = selectedSim.simulationGlobals) == null ? void 0 : _j.widgetState) ?? null;
7892
+ mock.toolOutput = ((_k = selectedSim.toolCall) == null ? void 0 : _k.structuredContent) ?? null;
7880
7893
  }
7881
7894
  }, [selectedKey, selectedSim, mock]);
7882
7895
  const theme = useTheme() ?? DEFAULT_THEME;
@@ -8071,13 +8084,18 @@ function ChatGPTSimulator({
8071
8084
  placeholder: "e.g. en-US"
8072
8085
  }
8073
8086
  ) }),
8074
- /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Max Height", children: /* @__PURE__ */ jsxRuntime.jsx(
8087
+ /* @__PURE__ */ jsxRuntime.jsx(SidebarControl, { label: "Max Height (PiP)", children: /* @__PURE__ */ jsxRuntime.jsx(
8075
8088
  SidebarInput,
8076
8089
  {
8077
8090
  type: "number",
8078
- value: String(maxHeight),
8079
- onChange: (value) => mock.setMaxHeight(Number(value)),
8080
- placeholder: "600"
8091
+ value: displayMode === "pip" && maxHeight !== void 0 ? String(maxHeight) : "",
8092
+ onChange: (value) => {
8093
+ if (displayMode === "pip") {
8094
+ mock.setMaxHeight(value ? Number(value) : 480);
8095
+ }
8096
+ },
8097
+ placeholder: displayMode === "pip" ? "480" : "-",
8098
+ disabled: displayMode !== "pip"
8081
8099
  }
8082
8100
  ) })
8083
8101
  ] }),