sunpeak 0.5.35 → 0.5.39

package/dist/index.js

@@ -7492,23 +7492,37 @@ function Conversation({
         api.requestDisplayMode({ mode: "inline" });
       }
     };
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "border-subtle bg-surface z-10 grid h-12 grid-cols-[1fr_auto_1fr] border-b px-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start gap-3", children: /* @__PURE__ */ 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__ */ jsx(CloseBold, {})
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: "text-primary flex items-center justify-center text-base", children: appName }),
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end" })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden flex-1", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full max-w-full overflow-auto", children }) }),
-      /* @__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(
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1 items-center", children: [
+      /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-center justify-start gap-3", children: /* @__PURE__ */ 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__ */ jsx(CloseBold, {})
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "text-primary flex items-center justify-center text-base", children: appName }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "relative overflow-hidden flex-1 w-full",
+          style: { maxWidth: containerWidth },
+          children: /* @__PURE__ */ jsx("div", { className: "h-full w-full max-w-full overflow-auto", children })
+        }
+      ),
+      /* @__PURE__ */ jsx("footer", { className: "bg-surface w-full", style: { maxWidth: containerWidth }, children: /* @__PURE__ */ jsx("div", { className: "px-4 py-4", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
@@ -7520,18 +7534,25 @@ function Conversation({
       ) }) }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1", children: [
-    /* @__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" }) }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col bg-surface w-full h-full flex-1 items-center", children: [
+    /* @__PURE__ */ 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__ */ jsx("span", { className: "text-primary", children: "SimGPT" })
+      }
+    ),
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "flex flex-col flex-1 mx-auto w-full transition-all duration-200 overflow-hidden",
+        className: "flex flex-col flex-1 w-full transition-all duration-200 overflow-hidden",
         style: { maxWidth: containerWidth },
         children: [
           /* @__PURE__ */ jsxs("main", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: [
             /* @__PURE__ */ jsxs("article", { className: "text-primary w-full focus:outline-none", dir: "auto", "data-turn": "user", children: [
               /* @__PURE__ */ jsx("h5", { className: "sr-only", children: "You said:" }),
-              /* @__PURE__ */ jsx("div", { className: "text-base my-auto mx-auto 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(
+              /* @__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(
                 "div",
                 {
                   "data-message-author-role": "user",
@@ -7552,7 +7573,7 @@ function Conversation({
                     " said:"
                   ] }),
                   /* @__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: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 my-3", children: [
                       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" }),
                       /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm", children: appName })
                     ] }),
@@ -7564,8 +7585,11 @@ function Conversation({
                         children: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden", children: displayMode === "pip" ? /* @__PURE__ */ jsxs(
                           "div",
                           {
-                            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",
-                            style: { maxHeight: "429px" },
+                            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__ */ jsx(
                                 "button",
@@ -7799,6 +7823,7 @@ function ChatGPTSimulator({
   appIcon
 }) {
   const [screenWidth, setScreenWidth] = React.useState("full");
+  const isMobileWidth = (width) => width === "mobile-s" || width === "mobile-l";
   const getSimulationKey = (sim) => `${sim.resource.name}-${sim.tool.name}`;
   const [selectedKey, setSelectedKey] = React.useState(
     simulations.length > 0 ? getSimulationKey(simulations[0]) : ""
@@ -7897,6 +7922,11 @@ function ChatGPTSimulator({
       }
     };
   }, []);
+  useEffect(() => {
+    if (isMobileWidth(screenWidth) && displayMode === "pip") {
+      mock.setDisplayMode("fullscreen");
+    }
+  }, [screenWidth, displayMode, mock]);
   useEffect(() => {
     if (editingField !== "toolInput") {
       setToolInputJson(JSON.stringify(toolInput ?? {}, null, 2));
@@ -7998,7 +8028,14 @@ function ChatGPTSimulator({
           SidebarToggle,
           {
             value: displayMode,
-            onChange: (value) => mock.setDisplayMode(value),
+            onChange: (value) => {
+              const newMode = value;
+              if (isMobileWidth(screenWidth) && newMode === "pip") {
+                mock.setDisplayMode("fullscreen");
+              } else {
+                mock.setDisplayMode(newMode);
+              }
+            },
             options: [
               { value: "inline", label: "Inline" },
               { value: "pip", label: "PiP" },