sunpeak 0.5.41 → 0.6.4

package/dist/index.js

@@ -5687,6 +5687,7 @@ const preventDefaultHandler = (evt) => {
 };
 const Check = (props) => jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: 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) => jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 16 9", fill: "currentColor", ...props, children: 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) => jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: 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) => jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: 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) => jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 10 16", fill: "currentColor", ...props, children: 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) => jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", ...props, children: [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" }), 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" })] });
@@ -7359,12 +7360,78 @@ const Segment = ({ children, ...restProps }) => {
 };
 SegmentedControl.Option = Segment;
 function SimpleSidebar({ children, controls }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-screen w-full overflow-hidden", children: [
-    /* @__PURE__ */ jsx("aside", { className: "max-md:hidden md:flex w-56 flex-col border-r border-subtle bg-sidebar overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto min-h-0 px-3 pb-3 pt-0", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-xs font-semibold sticky top-0 bg-sidebar z-10 py-2", children: "Controls" }),
-      controls
-    ] }) }) }) }),
-    /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto", children })
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "sunpeak-simulator-root flex h-screen w-full overflow-hidden relative", children: [
+    isDrawerOpen && /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "flex-1 overflow-y-auto min-h-0 px-3 pb-3 pt-0", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between sticky top-0 bg-sidebar z-10 py-2", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-xs font-semibold", children: "Controls" }),
+            /* @__PURE__ */ 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__ */ jsx(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M12 4L4 12M4 4L12 12",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          controls
+        ] }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs("main", { className: "flex-1 overflow-auto relative", children: [
+      /* @__PURE__ */ 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__ */ jsx(ChevronRight, {})
+        }
+      ),
+      children
+    ] })
   ] });
 }
 function SidebarControl({ label, children }) {
@@ -7486,9 +7553,10 @@ const SCREEN_WIDTHS = {
 function Conversation({
   children,
   screenWidth,
-  appName = "Sunpeak App",
+  appName = "Sunpeak",
   appIcon,
-  userMessage = "What have you got for me today?"
+  userMessage = "What have you got for me today?",
+  resourceMeta
 }) {
   const displayMode = useDisplayMode() ?? "inline";
   const api = useWidgetAPI();
@@ -7522,7 +7590,25 @@ function Conversation({
                   }
                 ) }),
                 /* @__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: "flex items-center justify-end", children: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    color: "primary",
+                    className: "bg-token-bg-primary",
+                    onClick: () => {
+                      const widgetDomain = resourceMeta == null ? void 0 : resourceMeta["openai/widgetDomain"];
+                      if ((api == null ? void 0 : api.openExternal) && widgetDomain) {
+                        api.openExternal({ href: widgetDomain });
+                      }
+                    },
+                    children: [
+                      appIcon && /* @__PURE__ */ jsx("span", { className: "me-2 h-4 w-4 flex items-center justify-center", children: appIcon }),
+                      "Open in ",
+                      appName
+                    ]
+                  }
+                ) })
               ] }),
               /* @__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 }) }),
               /* @__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(
@@ -7597,7 +7683,7 @@ function Conversation({
                             children: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-1 empty:hidden", children: displayMode === "pip" ? /* @__PURE__ */ jsxs(
                               "div",
                               {
-                                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",
+                                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__ */ jsx(
@@ -7614,7 +7700,7 @@ function Conversation({
                                       children: /* @__PURE__ */ jsx(CloseBold, { className: "h-4 w-4" })
                                     }
                                   ),
-                                  /* @__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 }) })
+                                  /* @__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-white dark:bg-[#212121]", children }) })
                                 ]
                               }
                             ) : /* @__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 }) }) })
@@ -7831,7 +7917,7 @@ const DEFAULT_DISPLAY_MODE = "inline";
 function ChatGPTSimulator({
   children,
   simulations = [],
-  appName = "Sunpeak App",
+  appName = "Sunpeak",
   appIcon
 }) {
   const [screenWidth, setScreenWidth] = React.useState("full");
@@ -8325,6 +8411,7 @@ function ChatGPTSimulator({
           appName,
           appIcon,
           userMessage,
+          resourceMeta: selectedSim == null ? void 0 : selectedSim.resource._meta,
           children: content
         },
         selectedKey