@planningcenter/topbar 12.1.2 → 12.2.0

package/dist/topbar.umd.js

@@ -27,7 +27,7 @@
   var people__namespace = /*#__PURE__*/_interopNamespaceDefault(people);
   var toolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(toolbar);
 
-  var styles$c = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
+  var styles$d = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
 
   const AccessibilityToolbar = ({
     children
@@ -39,7 +39,7 @@
       (_a = document.getElementById("main-content")) === null || _a === void 0 ? void 0 : _a.focus();
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$c["accessibility-toolbar"]
+      className: styles$d["accessibility-toolbar"]
     }, /*#__PURE__*/React.createElement(tapestry.Link, {
       href: "#main-content",
       kind: "primary",
@@ -356,11 +356,11 @@
     fill: fill
   })));
 
-  var styles$b = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement--promo":"announcement--promo-FarUk","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU","dismiss--promo":"dismiss--promo-7zvO4"};
+  var styles$c = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement--promo":"announcement--promo-FarUk","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU","dismiss--promo":"dismiss--promo-7zvO4"};
 
   function AnnouncementIcon() {
     return /*#__PURE__*/React.createElement("svg", {
-      className: styles$b["announcement-icon"],
+      className: styles$c["announcement-icon"],
       width: "16",
       height: "16",
       viewBox: "0 0 16 16",
@@ -485,7 +485,7 @@
       } = this.props;
       const isPromo = variant === "promo";
       return /*#__PURE__*/React.createElement("div", {
-        className: classnames(styles$b["announcement"], styles$b[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
+        className: classnames(styles$c["announcement"], styles$c[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
         "data-announcement-variant": variant !== null && variant !== void 0 ? variant : "platform",
         style: isPromo ? {
           backgroundImage: promoBackgroundUrl,
@@ -494,7 +494,7 @@
           backgroundSize: "cover"
         } : undefined
       }, !isPromo && /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-        className: styles$b["announcement-content"],
+        className: styles$c["announcement-content"],
         style: style,
         ...platformProps
       }));
@@ -543,7 +543,7 @@
     const isPromo = variant === "promo";
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: classnames(styles$b.dismiss, isPromo && styles$b["dismiss--promo"]),
+      className: classnames(styles$c.dismiss, isPromo && styles$c["dismiss--promo"]),
       ...props
     }, /*#__PURE__*/React.createElement(X, {
       fill: isPromo ? "currentColor" : "white",
@@ -623,9 +623,9 @@
         ...platformProps
       } = this.props;
       return /*#__PURE__*/React.createElement("div", {
-        className: styles$b["announcement"]
+        className: styles$c["announcement"]
       }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-        className: styles$b["announcement-content"],
+        className: styles$c["announcement-content"],
         style: style,
         ...platformProps
       }));
@@ -636,7 +636,7 @@
   }) {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$b.dismiss,
+      className: styles$c.dismiss,
       ...props
     }, /*#__PURE__*/React.createElement(X, {
       fill: "white",
@@ -1883,7 +1883,7 @@
     })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported"));
   }
 
-  var styles$a = {"unbutton":"unbutton-lEbTR"};
+  var styles$b = {"unbutton":"unbutton-lEbTR"};
 
   function Unbutton({
     className,
@@ -1892,7 +1892,7 @@
     ...nativeProps
   }) {
     return /*#__PURE__*/React.createElement("button", {
-      className: classnames(styles$a.unbutton, className),
+      className: classnames(styles$b.unbutton, className),
       style: {
         ...style
       },
@@ -1901,7 +1901,7 @@
     });
   }
 
-  var styles$9 = {"button":"button-XMbeQ","button-accounts":"button-accounts-nNh-z","chevron":"chevron-RRg9k","is-expanded":"is-expanded-zD0A0"};
+  var styles$a = {"button":"button-XMbeQ","button-accounts":"button-accounts-nNh-z","chevron":"chevron-RRg9k","is-expanded":"is-expanded-zD0A0"};
 
   const AppsButton = ({
     appName,
@@ -1916,8 +1916,8 @@
       "aria-haspopup": "true",
       "aria-label": `App switcher: ${appName}`,
       onClick: onClick,
-      className: classnames(styles$9.button, {
-        [styles$9["is-expanded"]]: expanded
+      className: classnames(styles$a.button, {
+        [styles$a["is-expanded"]]: expanded
       }),
       type: "button",
       style: style,
@@ -1926,7 +1926,7 @@
       appName: "Accounts",
       colors: colors
     }), /*#__PURE__*/React.createElement("div", {
-      className: styles$9["button-accounts"]
+      className: styles$a["button-accounts"]
     }, "Account settings"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorAppIcon, {
       appName: appName.replace(/[\s-]/, "")
     }), /*#__PURE__*/React.createElement(MonoAppName, {
@@ -1934,7 +1934,7 @@
       key: "mono-app-name",
       size: 24
     }))), /*#__PURE__*/React.createElement(DisclosureChevronIcon, {
-      className: styles$9.chevron,
+      className: styles$a.chevron,
       key: "disclosure-chevron-icon"
     }));
   };
@@ -2022,7 +2022,7 @@
     flex: "1 1 auto"
   };
 
-  var styles$8 = {"popup":"popup-sJ-Nv"};
+  var styles$9 = {"popup":"popup-sJ-Nv"};
 
   const HoverableListItem = ({
     active = false,
@@ -2079,7 +2079,7 @@
     }
   }
 
-  var styles$7 = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
+  var styles$8 = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
 
   const Popup = ({
     className,
@@ -2087,8 +2087,8 @@
     isVisible,
     ...nativeProps
   }) => (/*#__PURE__*/React.createElement(C, {
-    className: classnames(styles$7.popup, {
-      [styles$7["is-visible"]]: isVisible
+    className: classnames(styles$8.popup, {
+      [styles$8["is-visible"]]: isVisible
     }, className),
     ...nativeProps
   }));
@@ -2096,7 +2096,7 @@
   const PopupRoot = ({
     ...nativeProps
   }) => (/*#__PURE__*/React.createElement("div", {
-    className: styles$7["popup-root"],
+    className: styles$8["popup-root"],
     ...nativeProps
   }));
 
@@ -2136,7 +2136,7 @@
       cleanup: !visible,
       component: Outsider,
       onOutsideClick: toggle,
-      className: styles$8.popup,
+      className: styles$9.popup,
       isVisible: visible
     }, /*#__PURE__*/React.createElement("menu", {
       ref: menuRef,
@@ -3032,9 +3032,9 @@ true;
     `), children);
   }
 
-  var styles$6 = {"route":"route--8BWe","is-active":"is-active-FsU9Y","apps-routes-separator":"apps-routes-separator-Nlm-N"};
+  var styles$7 = {"route":"route--8BWe","is-active":"is-active-FsU9Y","apps-routes-separator":"apps-routes-separator-Nlm-N"};
 
-  var styles$5 = {"popup":"popup-mDNKn","trigger-wrap":"trigger-wrap-Jd-KR","trigger":"trigger-WgRT5","is-visible":"is-visible-GZC0-","trigger-orgname":"trigger-orgname-TDHCc"};
+  var styles$6 = {"popup":"popup-mDNKn","trigger-wrap":"trigger-wrap-Jd-KR","trigger":"trigger-WgRT5","is-visible":"is-visible-GZC0-","trigger-orgname":"trigger-orgname-TDHCc"};
 
   const UserMenu = ({
     appName,
@@ -3053,7 +3053,7 @@ true;
       component: Outsider,
       onOutsideClick: () => setUserMenuVisible(false),
       cleanup: !userMenuVisible,
-      className: styles$5.popup,
+      className: styles$6.popup,
       isVisible: userMenuVisible
     }, /*#__PURE__*/React.createElement("div", null, hasConnectedPeople ? (/*#__PURE__*/React.createElement("div", {
       style: {
@@ -3197,11 +3197,11 @@ true;
     userMenuVisible
   }) => {
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$5["trigger-wrap"],
+      className: styles$6["trigger-wrap"],
       "data-pendo": "topbar-org-switcher"
     }, /*#__PURE__*/React.createElement(Hoverable, {
-      className: classnames(styles$5["trigger"], {
-        [styles$5["is-visible"]]: userMenuVisible
+      className: classnames(styles$6["trigger"], {
+        [styles$6["is-visible"]]: userMenuVisible
       }),
       component: "button",
       type: "button",
@@ -3213,7 +3213,7 @@ true;
         requestConnectedPeopleFetch();
       }
     }, showOrgName && (/*#__PURE__*/React.createElement("span", {
-      className: styles$5["trigger-orgname"]
+      className: styles$6["trigger-orgname"]
     }, orgName)), /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)));
   };
 
@@ -3270,7 +3270,7 @@ true;
       },
       appName: props.appName
     }), /*#__PURE__*/React.createElement("div", {
-      className: styles$6["apps-routes-separator"]
+      className: styles$7["apps-routes-separator"]
     }), routesVisible && props.routes, /*#__PURE__*/React.createElement("div", {
       style: {
         margin: "auto"
@@ -3308,12 +3308,12 @@ true;
     ...nativeProps
   }) => {
     return /*#__PURE__*/React.createElement("a", {
-      className: classnames(styles$6["route"], className, active && styles$6["is-active"]),
+      className: classnames(styles$7["route"], className, active && styles$7["is-active"]),
       ...nativeProps
     });
   };
 
-  var styles$4 = {"avatar":"avatar-tW-wn"};
+  var styles$5 = {"avatar":"avatar-tW-wn"};
 
   function Avatar({
     env,
@@ -3323,7 +3323,7 @@ true;
   }) {
     const url = incomingUrl || `${pcoUrl$1(env)("people")}/static/no_photo_thumbnail_gray.svg`;
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$4.avatar,
+      className: styles$5.avatar,
       style: {
         backgroundImage: `url(${url})`,
         ...style
@@ -3345,14 +3345,14 @@ true;
     method: "localStorage"
   };
 
-  var styles$3 = {"appmenu-button":"appmenu-button-b0UvT","appmenu-layer":"appmenu-layer-0IQpN","appmenu-container":"appmenu-container-gackd","appmenu-scroll":"appmenu-scroll-mPSx0","appmenu-list":"appmenu-list-h7clX","appmenu-list-a":"appmenu-list-a-rGIQN","appmenu-list-a--top":"appmenu-list-a--top-RT-2F","appmenu-list-a--bottom":"appmenu-list-a--bottom-YDeBC","appmenu-close-button":"appmenu-close-button-vv9bV","current-route":"current-route-wpJgz","is-active":"is-active-wy8Bg","routes":"routes-Nmt1S","route":"route-kkknQ","profile-button":"profile-button-a2WO2"};
+  var styles$4 = {"appmenu-button":"appmenu-button-b0UvT","appmenu-layer":"appmenu-layer-0IQpN","appmenu-container":"appmenu-container-gackd","appmenu-scroll":"appmenu-scroll-mPSx0","appmenu-list":"appmenu-list-h7clX","appmenu-list-a":"appmenu-list-a-rGIQN","appmenu-list-a--top":"appmenu-list-a--top-RT-2F","appmenu-list-a--bottom":"appmenu-list-a--bottom-YDeBC","appmenu-close-button":"appmenu-close-button-vv9bV","current-route":"current-route-wpJgz","is-active":"is-active-wy8Bg","routes":"routes-Nmt1S","route":"route-kkknQ","profile-button":"profile-button-a2WO2"};
 
   function AccountSettingsLink({
     env
   }) {
     const accountsName = "accounts";
     return /*#__PURE__*/React.createElement("a", {
-      className: classnames(styles$3["appmenu-list-a"], styles$3["appmenu-list-a--bottom"]),
+      className: classnames(styles$4["appmenu-list-a"], styles$4["appmenu-list-a--bottom"]),
       "data-pendo": `app-switcher--change-app--${accountsName}`,
       "data-turbolinks": false,
       href: pcoUrl$1(env)(accountsName) + getAppsSwitchProductPath(accountsName)
@@ -3375,7 +3375,7 @@ true;
   }) => (/*#__PURE__*/React.createElement("button", {
     "aria-label": "Close menu",
     type: "button",
-    className: styles$3["appmenu-close-button"],
+    className: styles$4["appmenu-close-button"],
     style: style
   }, /*#__PURE__*/React.createElement(X, {
     fill: color,
@@ -3456,7 +3456,7 @@ true;
       "aria-haspopup": "true",
       "aria-label": `App switcher: ${props.appName}`,
       type: "button",
-      className: styles$3["appmenu-button"],
+      className: styles$4["appmenu-button"],
       onClick: () => {
         props.requestAppsFetch();
         props.requestConnectedPeopleFetch();
@@ -3466,12 +3466,12 @@ true;
     }, /*#__PURE__*/React.createElement(ColorAppIcon, {
       appName: props.appName.replace(/[\s-]/, "")
     })), routesMenuVisible && (/*#__PURE__*/React.createElement("div", {
-      className: styles$3["routes"]
+      className: styles$4["routes"]
     }, props.routes)), /*#__PURE__*/React.createElement(ClientStorage, {
       item: "Topbar:Small:Menus:Products:visibility",
       render: () => (/*#__PURE__*/React.createElement("div", {
         ref: appMenuRef,
-        className: styles$3["appmenu-layer"],
+        className: styles$4["appmenu-layer"],
         style: {
           ...(productSwitcherVisible && {
             display: "block"
@@ -3490,44 +3490,44 @@ true;
             e.stopPropagation();
           }
         },
-        className: styles$3["appmenu-container"]
+        className: styles$4["appmenu-container"]
       }, /*#__PURE__*/React.createElement("a", {
         "aria-current": props.appName === (homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name) ? "page" : undefined,
         "aria-label": homeProduct ? homeProduct.name : props.appName,
         "data-pendo": `app-switcher--change-app--${homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name}`,
         "data-turbolinks": false,
-        className: classnames(styles$3["appmenu-list-a"], styles$3["appmenu-list-a--top"]),
+        className: classnames(styles$4["appmenu-list-a"], styles$4["appmenu-list-a--top"]),
         href: homeProduct ? pcoUrl$1(props.env)("accounts") + getAppsSwitchProductPath(homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name) : undefined
       }, /*#__PURE__*/React.createElement(UserMenuAppLockup, {
         appName: homeProduct ? homeProduct.name : props.appName
       })), /*#__PURE__*/React.createElement("div", {
-        className: styles$3["appmenu-scroll"]
+        className: styles$4["appmenu-scroll"]
       }, /*#__PURE__*/React.createElement("ul", {
         "data-pendo": "app-switcher",
-        className: styles$3["appmenu-list"]
+        className: styles$4["appmenu-list"]
       }, appsMenuFormatter(restProducts).map(({
         name
       }) => (/*#__PURE__*/React.createElement("li", {
         key: name,
-        className: styles$3["appmenu-list-li"]
+        className: styles$4["appmenu-list-li"]
       }, /*#__PURE__*/React.createElement("a", {
         "aria-current": name === props.appName ? "page" : undefined,
         "aria-label": name,
         "data-pendo": `app-switcher--change-app--${name}`,
         "data-turbolinks": false,
-        className: styles$3["appmenu-list-a"],
+        className: styles$4["appmenu-list-a"],
         href: pcoUrl$1(props.env)("accounts") + getAppsSwitchProductPath(name)
       }, /*#__PURE__*/React.createElement(UserMenuAppLockup, {
         appName: name
       }))))), accountsProduct && (/*#__PURE__*/React.createElement("li", {
-        className: styles$3["appmenu-list-li"]
+        className: styles$4["appmenu-list-li"]
       }, /*#__PURE__*/React.createElement(AccountSettingsLink, {
         env: props.env
       }))))))))
     }), /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: classnames(styles$3["current-route"], {
-        [styles$3["is-active"]]: routesMenuVisible
+      className: classnames(styles$4["current-route"], {
+        [styles$4["is-active"]]: routesMenuVisible
       }),
       onClick: props.routes.length > 0 ? () => {
         setProductSwitcherVisible(false);
@@ -3535,7 +3535,7 @@ true;
       } : null
     }, /*#__PURE__*/React.createElement(CurrentRouteComponent, null, capitalize(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$3["profile-button"],
+      className: styles$4["profile-button"],
       onClick: () => {
         var _a, _b;
         props.requestConnectedPeopleFetch();
@@ -3551,7 +3551,7 @@ true;
     className,
     ...props
   }) => (/*#__PURE__*/React.createElement("a", {
-    className: classnames(styles$3["route"], className, active && styles$3["is-active"]),
+    className: classnames(styles$4["route"], className, active && styles$4["is-active"]),
     ...props
   }));
 
@@ -3690,7 +3690,7 @@ true;
     id: "topbar"
   };
 
-  var styles$2 = {"drawer-wrap":"drawer-wrap-J0rSL","is-visible":"is-visible-KTME8","drawer":"drawer-j7f4l"};
+  var styles$3 = {"drawer-wrap":"drawer-wrap-J0rSL","is-visible":"is-visible-KTME8","drawer":"drawer-j7f4l"};
 
   function Drawer({
     children,
@@ -3698,7 +3698,7 @@ true;
   }) {
     return /*#__PURE__*/React.createElement("div", {
       id: id,
-      className: styles$2["drawer"]
+      className: styles$3["drawer"]
     }, children);
   }
   function DrawerWrap({
@@ -3708,7 +3708,7 @@ true;
     ...props
   }) {
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames(styles$2["drawer-wrap"], className, isVisible && styles$2["is-visible"]),
+      className: classnames(styles$3["drawer-wrap"], className, isVisible && styles$3["is-visible"]),
       ...props
     }, children);
   }
@@ -3892,7 +3892,7 @@ true;
     }));
   };
 
-  var styles$1 = {"color-mode-switcher":"color-mode-switcher-JpczO","color-mode-switcher-label":"color-mode-switcher-label-3jPM2","color-mode-switcher-modes":"color-mode-switcher-modes-u-bic"};
+  var styles$2 = {"color-mode-switcher":"color-mode-switcher-JpczO","color-mode-switcher-label":"color-mode-switcher-label-3jPM2","color-mode-switcher-modes":"color-mode-switcher-modes-u-bic"};
 
   const COLOR_MODES = [{
     label: "Light",
@@ -3912,11 +3912,11 @@ true;
     const updateStore = useUpdateStore();
     const [counter] = React.useState(() => COLOR_MODE_INSTANCE_COUNTER++);
     return /*#__PURE__*/React.createElement("fieldset", {
-      className: styles$1["color-mode-switcher"]
+      className: styles$2["color-mode-switcher"]
     }, /*#__PURE__*/React.createElement("legend", {
-      className: styles$1["color-mode-switcher-label"]
+      className: styles$2["color-mode-switcher-label"]
     }, "Appearance", " "), /*#__PURE__*/React.createElement("div", {
-      className: styles$1["color-mode-switcher-modes"]
+      className: styles$2["color-mode-switcher-modes"]
     }, COLOR_MODES.map(({
       value,
       label
@@ -4187,20 +4187,67 @@ true;
     ...overrides
   });
 
-  var styles = {"toolbar":"toolbar-KHJR5","toolbar-button":"toolbar-button-Ye4h5","is-current":"is-current-DZK47","toolbar-button--avatar":"toolbar-button--avatar-5FUik","toolbar-button--home":"toolbar-button--home-Pthd0"};
+  var styles$1 = {"toolbar":"toolbar-KHJR5","toolbar-button":"toolbar-button-Ye4h5","is-current":"is-current-DZK47","toolbar-button--avatar":"toolbar-button--avatar-5FUik","toolbar-button--home":"toolbar-button--home-Pthd0"};
 
   const pcoUrl = pcoUrl$1;
 
-  // The route rides in the iframe URL fragment (`…/topbar#conversations/abc`),
-  // not the path, so updating it is a same-document navigation that doesn't
-  // reload the iframe, but also lets the route survive a forced reload (e.g.
-  // Turbo re-parenting the topbar).
-  function buildPicobotSrc(origin, path) {
-    const [rawPath, queryPart] = path.replace(/^\/+/, "").split("?", 2);
-    const safePath = rawPath.split("/").filter(segment => segment && segment !== "." && segment !== "..").join("/");
-    const fragment = queryPart !== undefined ? `${safePath}?${queryPart}` : safePath;
-    const base = new URL("topbar", origin).toString();
-    return fragment ? `${base}#${fragment}` : base;
+  var styles = {"banner":"banner-YfQ37","content":"content-lNjWf","icon":"icon-abz7q","iconShape":"iconShape-6uyot","iconWand":"iconWand-yEhh4","text":"text--Vlhl","title":"title-zOEOR","subtitle":"subtitle-ufLnk","chevron":"chevron-oOUA-"};
+
+  function AskAIBanner({
+    onClick
+  }) {
+    return /*#__PURE__*/React.createElement("button", {
+      className: styles.banner,
+      onClick: () => onClick(),
+      type: "button"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.content
+    }, /*#__PURE__*/React.createElement(AskAIIcon, null), /*#__PURE__*/React.createElement("span", {
+      className: styles.text
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.title
+    }, "Ask AI"), /*#__PURE__*/React.createElement("span", {
+      className: styles.subtitle
+    }, "Support answers tailored to you"))), /*#__PURE__*/React.createElement(tapestryReact.Icon, {
+      className: styles.chevron,
+      name: "general.rightChevron",
+      size: "16px"
+    }));
+  }
+  const GRADIENT_ID = "ask-ai-banner-icon-gradient";
+  function AskAIIcon() {
+    return /*#__PURE__*/React.createElement("span", {
+      className: styles.icon
+    }, /*#__PURE__*/React.createElement("svg", {
+      className: styles.iconShape,
+      viewBox: "0 0 32 32",
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M15.9994 0C3.19766 0 0 3.20025 0 16C0 28.7998 3.19766 32 15.9994 32C28.8011 32 32 28.8022 32 16C32 3.19779 28.7999 0 15.9994 0Z",
+      fill: `url(#${GRADIENT_ID})`
+    }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+      id: GRADIENT_ID,
+      x1: "0",
+      y1: "0",
+      x2: "38.0356",
+      y2: "21.1413",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#49D4BB"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "0.352694",
+      stopColor: "#7CA8FE"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "0.656242",
+      stopColor: "#B883E2"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "1",
+      stopColor: "#F28B54"
+    })))), /*#__PURE__*/React.createElement(tapestryReact.Icon, {
+      className: styles.iconWand,
+      name: "general.magicWand",
+      size: "18px"
+    }));
   }
 
   // The article heading lives in the deepest populated hierarchy level (lvl0 is
@@ -4354,6 +4401,74 @@ true;
     }));
   };
 
+  // The route rides in the iframe URL fragment (`…/topbar#conversations/abc`),
+  // not the path, so updating it is a same-document navigation that doesn't
+  // reload the iframe, but also lets the route survive a forced reload (e.g.
+  // Turbo re-parenting the topbar).
+  function buildPicobotSrc(origin, path) {
+    const [rawPath, queryPart] = path.replace(/^\/+/, "").split("?", 2);
+    const safePath = rawPath.split("/").filter(segment => segment && segment !== "." && segment !== "..").join("/");
+    const fragment = queryPart !== undefined ? `${safePath}?${queryPart}` : safePath;
+    const base = new URL("topbar", origin).toString();
+    return fragment ? `${base}#${fragment}` : base;
+  }
+
+  function createPicobotIframe(picobotOrigin) {
+    return /*#__PURE__*/React.forwardRef(function PicobotIframe({
+      currentPath: iframePath,
+      onChangePath: onIframeChangePath,
+      onMessage
+    }, ref) {
+      const iframeRef = React.useRef(null);
+      // Keep the fragment in sync in both directions—external opens (deeplink /
+      // Contact support) and picobot's own NEW_ROUTE_RENDERED reports—so it
+      // always reflects the live conversation. See buildPicobotSrc.
+      const [loadedPath, setLoadedPath] = React.useState(iframePath || "");
+      React.useEffect(function subscribeToGuestMessages() {
+        if (!onIframeChangePath && !onMessage) return undefined;
+        function handleGuestMessage(e) {
+          var _a, _b;
+          if (e.origin !== picobotOrigin) return;
+          if (!e.source || !iframeRef.current) return;
+          if (e.source !== iframeRef.current.contentWindow) return;
+          if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.type) === "NEW_ROUTE_RENDERED" && onIframeChangePath) {
+            const reportedPath = String((_b = e.data.payload) !== null && _b !== void 0 ? _b : "");
+            setLoadedPath(reportedPath);
+            onIframeChangePath(reportedPath);
+          }
+          if (onMessage) onMessage(e.data);
+        }
+        window.addEventListener("message", handleGuestMessage);
+        return () => window.removeEventListener("message", handleGuestMessage);
+      }, [onIframeChangePath, onMessage]);
+      React.useEffect(function syncLoadedPathFromProp() {
+        setLoadedPath(iframePath || "");
+      }, [iframePath]);
+      // A one-way channel for sending messages to picobot. Topbar just
+      // forwards the envelope to the iframe and holds no message semantics of
+      // its own—the consumer decides what to send and when.
+      React.useImperativeHandle(ref, () => ({
+        postMessage(message) {
+          var _a, _b;
+          (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(message, picobotOrigin);
+        }
+      }), []);
+      const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath);
+      return /*#__PURE__*/React.createElement("iframe", {
+        ref: iframeRef,
+        src: iframeSrc,
+        allow: "clipboard-write",
+        style: {
+          border: 0,
+          flex: 1,
+          height: "100%",
+          width: "100%"
+        },
+        title: "Picobot"
+      });
+    });
+  }
+
   const {
     LoadingIndicator: LoadingIndicator$1,
     StackView: StackView$1
@@ -4379,52 +4494,7 @@ true;
     helpdeskConfig,
     onChangePath
   }) {
-    const PicobotIframe = React.useMemo(() => {
-      const picobotOrigin = pcoUrl(env)("picobot");
-      return function PicobotIframe({
-        currentPath: iframePath,
-        onChangePath: onIframeChangePath,
-        onMessage
-      }) {
-        const ref = React.useRef(null);
-        // Keep the fragment in sync in both directions—external opens (deeplink /
-        // Contact support) and picobot's own NEW_ROUTE_RENDERED reports—so it
-        // always reflects the live conversation. See buildPicobotSrc.
-        const [loadedPath, setLoadedPath] = React.useState(iframePath || "");
-        React.useEffect(() => {
-          if (!onIframeChangePath && !onMessage) return undefined;
-          const handler = e => {
-            var _a, _b;
-            if (e.origin !== picobotOrigin) return;
-            if (!e.source || !ref.current) return;
-            if (e.source !== ref.current.contentWindow) return;
-            if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.type) === "NEW_ROUTE_RENDERED" && onIframeChangePath) {
-              const reportedPath = String((_b = e.data.payload) !== null && _b !== void 0 ? _b : "");
-              setLoadedPath(reportedPath);
-              onIframeChangePath(reportedPath);
-            }
-            if (onMessage) onMessage(e.data);
-          };
-          window.addEventListener("message", handler);
-          return () => window.removeEventListener("message", handler);
-        }, [onIframeChangePath, onMessage]);
-        React.useEffect(() => {
-          setLoadedPath(iframePath || "");
-        }, [iframePath]);
-        const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath);
-        return /*#__PURE__*/React.createElement("iframe", {
-          ref: ref,
-          src: iframeSrc,
-          style: {
-            border: 0,
-            flex: 1,
-            height: "100%",
-            width: "100%"
-          },
-          title: "Picobot"
-        });
-      };
-    }, [env]);
+    const PicobotIframe = React.useMemo(() => createPicobotIframe(pcoUrl(env)("picobot")), [env]);
     return /*#__PURE__*/React.createElement(addOns.UiExtensionFirstPartyComponent, {
       grow: 1,
       display: "flex",
@@ -4439,6 +4509,15 @@ true;
         spacing: 1
       }, /*#__PURE__*/React.createElement(DrawerHeading, null, "Help and support"), /*#__PURE__*/React.createElement(LoadingIndicator$1, null)))),
       additionalComponents: {
+        AskAIBanner: {
+          component: AskAIBanner,
+          properties: {
+            onClick: {
+              event: false,
+              type: Function
+            }
+          }
+        },
         CalendlyWidget: {
           component: CalendlyWidget,
           properties: {
@@ -4475,6 +4554,7 @@ true;
         DrawerHeading,
         PicobotIframe: {
           component: PicobotIframe,
+          methods: ["postMessage"],
           properties: {
             currentPath: {
               attribute: false
@@ -5719,18 +5799,18 @@ true;
     return /*#__PURE__*/React.createElement(tapestryReact.ThemeProvider, {
       theme: topbarTheme
     }, /*#__PURE__*/React.createElement(addOns.UiExtensionDataContext, null, /*#__PURE__*/React.createElement("div", {
-      className: styles["toolbar"],
+      className: styles$1["toolbar"],
       "data-pendo": "toolbar-profile-support-wrapper"
     }, /*#__PURE__*/React.createElement(ToolbarButton, {
       "aria-label": `Open ${userName}’s profile drawer`,
       onClick: () => toggleDrawer(Profile),
       "data-pendo": "toolbar-profile",
-      className: styles["toolbar-button--avatar"]
+      className: styles$1["toolbar-button--avatar"]
     }, /*#__PURE__*/React.createElement(Avatar, {
       env: env,
       url: userAvatarPath
     })), /*#__PURE__*/React.createElement(ToolbarButton, {
-      className: styles["toolbar-button--home"],
+      className: styles$1["toolbar-button--home"],
       onClick: () => closeDrawer()
     }, /*#__PURE__*/React.createElement(tapestryReact.Icon, {
       name: "toolbar.planningCenter",
@@ -5768,7 +5848,7 @@ true;
   }) => {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: classnames(styles["toolbar-button"], className, current && styles["is-current"]),
+      className: classnames(styles$1["toolbar-button"], className, current && styles$1["is-current"]),
       onClick: onClick,
       "data-toolbar-link": "true",
       ...restProps