@planningcenter/topbar 12.1.1 → 12.2.0-rc.0

package/dist/topbar.module.js

@@ -17,7 +17,7 @@ import { useSearchBox, useHits, InstantSearch, Configure } from 'react-instantse
 import { TransitionGroup, Transition } from 'react-transition-group';
 import datetimeFmt from '@planningcenter/datetime-fmt';
 
-var styles$c = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
+var styles$d = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
 
 const AccessibilityToolbar = ({
   children
@@ -29,7 +29,7 @@ const AccessibilityToolbar = ({
     (_a = document.getElementById("main-content")) === null || _a === void 0 ? void 0 : _a.focus();
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: styles$c["accessibility-toolbar"]
+    className: styles$d["accessibility-toolbar"]
   }, /*#__PURE__*/React__default.createElement(Link, {
     href: "#main-content",
     kind: "primary",
@@ -346,11 +346,11 @@ const X = ({
   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__default.createElement("svg", {
-    className: styles$b["announcement-icon"],
+    className: styles$c["announcement-icon"],
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
@@ -475,7 +475,7 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React__default.Compo
     } = this.props;
     const isPromo = variant === "promo";
     return /*#__PURE__*/React__default.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,
@@ -484,7 +484,7 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React__default.Compo
         backgroundSize: "cover"
       } : undefined
     }, !isPromo && /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$b["announcement-content"],
+      className: styles$c["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -533,7 +533,7 @@ function StyledDismissButton$1({
   const isPromo = variant === "promo";
   return /*#__PURE__*/React__default.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__default.createElement(X, {
     fill: isPromo ? "currentColor" : "white",
@@ -613,9 +613,9 @@ class StyledAnnouncement extends React__default.Component {
       ...platformProps
     } = this.props;
     return /*#__PURE__*/React__default.createElement("div", {
-      className: styles$b["announcement"]
+      className: styles$c["announcement"]
     }, /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$b["announcement-content"],
+      className: styles$c["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -626,7 +626,7 @@ function StyledDismissButton({
 }) {
   return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: styles$b.dismiss,
+    className: styles$c.dismiss,
     ...props
   }, /*#__PURE__*/React__default.createElement(X, {
     fill: "white",
@@ -1873,7 +1873,7 @@ function MonoAppName({
   })) : (/*#__PURE__*/React__default.createElement("div", null, "appName not supported"));
 }
 
-var styles$a = {"unbutton":"unbutton-lEbTR"};
+var styles$b = {"unbutton":"unbutton-lEbTR"};
 
 function Unbutton({
   className,
@@ -1882,7 +1882,7 @@ function Unbutton({
   ...nativeProps
 }) {
   return /*#__PURE__*/React__default.createElement("button", {
-    className: classnames(styles$a.unbutton, className),
+    className: classnames(styles$b.unbutton, className),
     style: {
       ...style
     },
@@ -1891,7 +1891,7 @@ function Unbutton({
   });
 }
 
-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,
@@ -1906,8 +1906,8 @@ const AppsButton = ({
     "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,
@@ -1916,7 +1916,7 @@ const AppsButton = ({
     appName: "Accounts",
     colors: colors
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$9["button-accounts"]
+    className: styles$a["button-accounts"]
   }, "Account settings"))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ColorAppIcon, {
     appName: appName.replace(/[\s-]/, "")
   }), /*#__PURE__*/React__default.createElement(MonoAppName, {
@@ -1924,7 +1924,7 @@ const AppsButton = ({
     key: "mono-app-name",
     size: 24
   }))), /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, {
-    className: styles$9.chevron,
+    className: styles$a.chevron,
     key: "disclosure-chevron-icon"
   }));
 };
@@ -2012,7 +2012,7 @@ const IEFlex1 = {
   flex: "1 1 auto"
 };
 
-var styles$8 = {"popup":"popup-sJ-Nv"};
+var styles$9 = {"popup":"popup-sJ-Nv"};
 
 const HoverableListItem = ({
   active = false,
@@ -2069,7 +2069,7 @@ class Outsider extends React__default.Component {
   }
 }
 
-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,
@@ -2077,8 +2077,8 @@ const Popup = ({
   isVisible,
   ...nativeProps
 }) => (/*#__PURE__*/React__default.createElement(C, {
-  className: classnames(styles$7.popup, {
-    [styles$7["is-visible"]]: isVisible
+  className: classnames(styles$8.popup, {
+    [styles$8["is-visible"]]: isVisible
   }, className),
   ...nativeProps
 }));
@@ -2086,7 +2086,7 @@ const Popup = ({
 const PopupRoot = ({
   ...nativeProps
 }) => (/*#__PURE__*/React__default.createElement("div", {
-  className: styles$7["popup-root"],
+  className: styles$8["popup-root"],
   ...nativeProps
 }));
 
@@ -2126,7 +2126,7 @@ const AppsMenu = ({
     cleanup: !visible,
     component: Outsider,
     onOutsideClick: toggle,
-    className: styles$8.popup,
+    className: styles$9.popup,
     isVisible: visible
   }, /*#__PURE__*/React__default.createElement("menu", {
     ref: menuRef,
@@ -3022,9 +3022,9 @@ function StyledRoot({
     `), 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,
@@ -3043,7 +3043,7 @@ const UserMenu = ({
     component: Outsider,
     onOutsideClick: () => setUserMenuVisible(false),
     cleanup: !userMenuVisible,
-    className: styles$5.popup,
+    className: styles$6.popup,
     isVisible: userMenuVisible
   }, /*#__PURE__*/React__default.createElement("div", null, hasConnectedPeople ? (/*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -3187,11 +3187,11 @@ const UserMenuTrigger = ({
   userMenuVisible
 }) => {
   return /*#__PURE__*/React__default.createElement("div", {
-    className: styles$5["trigger-wrap"],
+    className: styles$6["trigger-wrap"],
     "data-pendo": "topbar-org-switcher"
   }, /*#__PURE__*/React__default.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",
@@ -3203,7 +3203,7 @@ const UserMenuTrigger = ({
       requestConnectedPeopleFetch();
     }
   }, showOrgName && (/*#__PURE__*/React__default.createElement("span", {
-    className: styles$5["trigger-orgname"]
+    className: styles$6["trigger-orgname"]
   }, orgName)), /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, null)));
 };
 
@@ -3260,7 +3260,7 @@ const NotSmallTopbar = ({
     },
     appName: props.appName
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$6["apps-routes-separator"]
+    className: styles$7["apps-routes-separator"]
   }), routesVisible && props.routes, /*#__PURE__*/React__default.createElement("div", {
     style: {
       margin: "auto"
@@ -3298,12 +3298,12 @@ const NotSmallRoute = ({
   ...nativeProps
 }) => {
   return /*#__PURE__*/React__default.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,
@@ -3313,7 +3313,7 @@ function Avatar({
 }) {
   const url = incomingUrl || `${pcoUrl$1(env)("people")}/static/no_photo_thumbnail_gray.svg`;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: styles$4.avatar,
+    className: styles$5.avatar,
     style: {
       backgroundImage: `url(${url})`,
       ...style
@@ -3335,14 +3335,14 @@ ClientStorage.defaultProps = {
   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__default.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)
@@ -3365,7 +3365,7 @@ const CloseMenuButton = ({
 }) => (/*#__PURE__*/React__default.createElement("button", {
   "aria-label": "Close menu",
   type: "button",
-  className: styles$3["appmenu-close-button"],
+  className: styles$4["appmenu-close-button"],
   style: style
 }, /*#__PURE__*/React__default.createElement(X, {
   fill: color,
@@ -3446,7 +3446,7 @@ const SmallTopbar = ({
     "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();
@@ -3456,12 +3456,12 @@ const SmallTopbar = ({
   }, /*#__PURE__*/React__default.createElement(ColorAppIcon, {
     appName: props.appName.replace(/[\s-]/, "")
   })), routesMenuVisible && (/*#__PURE__*/React__default.createElement("div", {
-    className: styles$3["routes"]
+    className: styles$4["routes"]
   }, props.routes)), /*#__PURE__*/React__default.createElement(ClientStorage, {
     item: "Topbar:Small:Menus:Products:visibility",
     render: () => (/*#__PURE__*/React__default.createElement("div", {
       ref: appMenuRef,
-      className: styles$3["appmenu-layer"],
+      className: styles$4["appmenu-layer"],
       style: {
         ...(productSwitcherVisible && {
           display: "block"
@@ -3480,44 +3480,44 @@ const SmallTopbar = ({
           e.stopPropagation();
         }
       },
-      className: styles$3["appmenu-container"]
+      className: styles$4["appmenu-container"]
     }, /*#__PURE__*/React__default.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__default.createElement(UserMenuAppLockup, {
       appName: homeProduct ? homeProduct.name : props.appName
     })), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$3["appmenu-scroll"]
+      className: styles$4["appmenu-scroll"]
     }, /*#__PURE__*/React__default.createElement("ul", {
       "data-pendo": "app-switcher",
-      className: styles$3["appmenu-list"]
+      className: styles$4["appmenu-list"]
     }, appsMenuFormatter(restProducts).map(({
       name
     }) => (/*#__PURE__*/React__default.createElement("li", {
       key: name,
-      className: styles$3["appmenu-list-li"]
+      className: styles$4["appmenu-list-li"]
     }, /*#__PURE__*/React__default.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__default.createElement(UserMenuAppLockup, {
       appName: name
     }))))), accountsProduct && (/*#__PURE__*/React__default.createElement("li", {
-      className: styles$3["appmenu-list-li"]
+      className: styles$4["appmenu-list-li"]
     }, /*#__PURE__*/React__default.createElement(AccountSettingsLink, {
       env: props.env
     }))))))))
   }), /*#__PURE__*/React__default.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);
@@ -3525,7 +3525,7 @@ const SmallTopbar = ({
     } : null
   }, /*#__PURE__*/React__default.createElement(CurrentRouteComponent, null, capitalize(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: styles$3["profile-button"],
+    className: styles$4["profile-button"],
     onClick: () => {
       var _a, _b;
       props.requestConnectedPeopleFetch();
@@ -3541,7 +3541,7 @@ const SmallRoute = ({
   className,
   ...props
 }) => (/*#__PURE__*/React__default.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
 }));
 
@@ -3680,7 +3680,7 @@ const topbarTheme = {
   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,
@@ -3688,7 +3688,7 @@ function Drawer({
 }) {
   return /*#__PURE__*/React__default.createElement("div", {
     id: id,
-    className: styles$2["drawer"]
+    className: styles$3["drawer"]
   }, children);
 }
 function DrawerWrap({
@@ -3698,7 +3698,7 @@ function DrawerWrap({
   ...props
 }) {
   return /*#__PURE__*/React__default.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);
 }
@@ -3882,7 +3882,7 @@ const SwitchView = ({
   }));
 };
 
-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",
@@ -3902,11 +3902,11 @@ function ColorModeSwitcher() {
   const updateStore = useUpdateStore();
   const [counter] = useState(() => COLOR_MODE_INSTANCE_COUNTER++);
   return /*#__PURE__*/React__default.createElement("fieldset", {
-    className: styles$1["color-mode-switcher"]
+    className: styles$2["color-mode-switcher"]
   }, /*#__PURE__*/React__default.createElement("legend", {
-    className: styles$1["color-mode-switcher-label"]
+    className: styles$2["color-mode-switcher-label"]
   }, "Appearance", " "), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$1["color-mode-switcher-modes"]
+    className: styles$2["color-mode-switcher-modes"]
   }, COLOR_MODES.map(({
     value,
     label
@@ -4177,20 +4177,67 @@ const useToolbarReducer = overrides => React.useReducer(reducer, {
   ...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__default.createElement("button", {
+    className: styles.banner,
+    onClick: () => onClick(),
+    type: "button"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: styles.content
+  }, /*#__PURE__*/React__default.createElement(AskAIIcon, null), /*#__PURE__*/React__default.createElement("span", {
+    className: styles.text
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: styles.title
+  }, "Ask AI"), /*#__PURE__*/React__default.createElement("span", {
+    className: styles.subtitle
+  }, "Support answers tailored to you"))), /*#__PURE__*/React__default.createElement(Icon, {
+    className: styles.chevron,
+    name: "general.rightChevron",
+    size: "16px"
+  }));
+}
+const GRADIENT_ID = "ask-ai-banner-icon-gradient";
+function AskAIIcon() {
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: styles.icon
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    className: styles.iconShape,
+    viewBox: "0 0 32 32",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React__default.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__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: GRADIENT_ID,
+    x1: "0",
+    y1: "0",
+    x2: "38.0356",
+    y2: "21.1413",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    stopColor: "#49D4BB"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "0.352694",
+    stopColor: "#7CA8FE"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "0.656242",
+    stopColor: "#B883E2"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "1",
+    stopColor: "#F28B54"
+  })))), /*#__PURE__*/React__default.createElement(Icon, {
+    className: styles.iconWand,
+    name: "general.magicWand",
+    size: "18px"
+  }));
 }
 
 // The article heading lives in the deepest populated hierarchy level (lvl0 is
@@ -4344,6 +4391,74 @@ const DocumentationSearch = ({
   }));
 };
 
+// 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__default.forwardRef(function PicobotIframe({
+    currentPath: iframePath,
+    onChangePath: onIframeChangePath,
+    onMessage
+  }, ref) {
+    const iframeRef = React__default.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__default.useState(iframePath || "");
+    React__default.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__default.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__default.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__default.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
@@ -4369,52 +4484,7 @@ function HelpdeskComponent({
   helpdeskConfig,
   onChangePath
 }) {
-  const PicobotIframe = React__default.useMemo(() => {
-    const picobotOrigin = pcoUrl(env)("picobot");
-    return function PicobotIframe({
-      currentPath: iframePath,
-      onChangePath: onIframeChangePath,
-      onMessage
-    }) {
-      const ref = React__default.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__default.useState(iframePath || "");
-      React__default.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__default.useEffect(() => {
-        setLoadedPath(iframePath || "");
-      }, [iframePath]);
-      const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath);
-      return /*#__PURE__*/React__default.createElement("iframe", {
-        ref: ref,
-        src: iframeSrc,
-        style: {
-          border: 0,
-          flex: 1,
-          height: "100%",
-          width: "100%"
-        },
-        title: "Picobot"
-      });
-    };
-  }, [env]);
+  const PicobotIframe = React__default.useMemo(() => createPicobotIframe(pcoUrl(env)("picobot")), [env]);
   return /*#__PURE__*/React__default.createElement(UiExtensionFirstPartyComponent, {
     grow: 1,
     display: "flex",
@@ -4429,6 +4499,15 @@ function HelpdeskComponent({
       spacing: 1
     }, /*#__PURE__*/React__default.createElement(DrawerHeading, null, "Help and support"), /*#__PURE__*/React__default.createElement(LoadingIndicator$1, null)))),
     additionalComponents: {
+      AskAIBanner: {
+        component: AskAIBanner,
+        properties: {
+          onClick: {
+            event: false,
+            type: Function
+          }
+        }
+      },
       CalendlyWidget: {
         component: CalendlyWidget,
         properties: {
@@ -4465,6 +4544,7 @@ function HelpdeskComponent({
       DrawerHeading,
       PicobotIframe: {
         component: PicobotIframe,
+        methods: ["postMessage"],
         properties: {
           currentPath: {
             attribute: false
@@ -5709,18 +5789,18 @@ function Toolbar({
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: topbarTheme
   }, /*#__PURE__*/React__default.createElement(UiExtensionDataContext, null, /*#__PURE__*/React__default.createElement("div", {
-    className: styles["toolbar"],
+    className: styles$1["toolbar"],
     "data-pendo": "toolbar-profile-support-wrapper"
   }, /*#__PURE__*/React__default.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__default.createElement(Avatar, {
     env: env,
     url: userAvatarPath
   })), /*#__PURE__*/React__default.createElement(ToolbarButton, {
-    className: styles["toolbar-button--home"],
+    className: styles$1["toolbar-button--home"],
     onClick: () => closeDrawer()
   }, /*#__PURE__*/React__default.createElement(Icon, {
     name: "toolbar.planningCenter",
@@ -5758,7 +5838,7 @@ const ToolbarButton = ({
 }) => {
   return /*#__PURE__*/React__default.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