@planningcenter/topbar 12.1.2 → 12.2.0-rc.1

package/dist/topbar.modern.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,225 @@ 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","iconSparkle":"iconSparkle-t0OzK","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 SQUIRCLE_PATH = "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";
+const SQUIRCLE_BORDER_PATH = "M15.999 0.222656C22.4009 0.222656 26.3132 1.0274 28.6426 3.35645C30.972 5.68549 31.7773 9.59729 31.7773 16C31.7773 22.4025 30.9726 26.3145 28.6436 28.6436C26.3143 30.9726 22.4015 31.7773 15.999 31.7773C9.5968 31.7773 5.68536 30.9719 3.35645 28.6426C1.02748 26.3132 0.222656 22.4015 0.222656 16C0.222656 9.59851 1.02748 5.68678 3.35645 3.35742C5.68536 1.02814 9.5968 0.222687 15.999 0.222656Z";
+// Monotonic counter for per-instance SVG ids. useId would be tidier but isn't
+// available on React 17, which our peer range still supports.
+let iconInstanceCount = 0;
+function AskAIIcon() {
+  const [uid] = useState(() => `ask-ai-icon-${iconInstanceCount++}`);
+  const maskId = `${uid}-mask`;
+  const blur = n => `${uid}-blur-${n}`;
+  const borderA = `${uid}-border-a`;
+  const borderB = `${uid}-border-b`;
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: styles.icon
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    className: styles.iconShape,
+    viewBox: "0 0 32 32",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: SQUIRCLE_PATH,
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: maskId,
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "0",
+    y: "0",
+    width: "32",
+    height: "32"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: SQUIRCLE_PATH,
+    fill: "#939393"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: `url(#${maskId})`
+  }, /*#__PURE__*/React__default.createElement("g", {
+    filter: `url(#${blur(0)})`
+  }, /*#__PURE__*/React__default.createElement("ellipse", {
+    cx: "24.2268",
+    cy: "23.7824",
+    rx: "17.9331",
+    ry: "31.1883",
+    transform: "rotate(-135 24.2268 23.7824)",
+    fill: "#B883E2"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    filter: `url(#${blur(1)})`
+  }, /*#__PURE__*/React__default.createElement("ellipse", {
+    cx: "7.05187",
+    cy: "9.27409",
+    rx: "14.9017",
+    ry: "29.437",
+    transform: "rotate(45 7.05187 9.27409)",
+    fill: "#74A3FF"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    filter: `url(#${blur(2)})`
+  }, /*#__PURE__*/React__default.createElement("ellipse", {
+    cx: "29.7552",
+    cy: "31.0886",
+    rx: "11.2869",
+    ry: "15.1567",
+    transform: "rotate(-135 29.7552 31.0886)",
+    fill: "#F28B54"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    filter: `url(#${blur(3)})`
+  }, /*#__PURE__*/React__default.createElement("ellipse", {
+    cx: "3.58734",
+    cy: "4.03178",
+    rx: "11.2869",
+    ry: "15.1567",
+    transform: "rotate(45 3.58734 4.03178)",
+    fill: "#24D7B7"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    filter: `url(#${blur(4)})`
+  }, /*#__PURE__*/React__default.createElement("ellipse", {
+    cx: "32.0363",
+    cy: "32.0363",
+    rx: "5.65576",
+    ry: "7.59487",
+    transform: "rotate(-135 32.0363 32.0363)",
+    fill: "#FFBC40"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    filter: `url(#${blur(5)})`
+  }, /*#__PURE__*/React__default.createElement("ellipse", {
+    cx: "1.00513",
+    cy: "-0.772657",
+    rx: "5.1403",
+    ry: "6.82216",
+    transform: "rotate(-135 1.00513 -0.772657)",
+    fill: "#70FFD4"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    d: SQUIRCLE_BORDER_PATH,
+    stroke: `url(#${borderA})`,
+    strokeWidth: "0.444444"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: SQUIRCLE_BORDER_PATH,
+    stroke: `url(#${borderB})`,
+    strokeWidth: "0.444444"
+  })), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("filter", {
+    id: blur(0),
+    x: "-20.7722",
+    y: "-21.2166",
+    width: "89.9981",
+    height: "89.9981",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "9.77778"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: blur(1),
+    x: "-35.839",
+    y: "-33.6167",
+    width: "85.7816",
+    height: "85.7816",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "9.77778"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: blur(2),
+    x: "-3.16378",
+    y: "-1.83045",
+    width: "65.838",
+    height: "65.838",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "9.77778"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: blur(3),
+    x: "-29.3317",
+    y: "-28.8872",
+    width: "65.838",
+    height: "65.838",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "9.77778"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: blur(4),
+    x: "16.4511",
+    y: "16.4511",
+    width: "31.1704",
+    height: "31.1704",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "4.44444"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: blur(5),
+    x: "-13.9242",
+    y: "-15.7019",
+    width: "29.8586",
+    height: "29.8586",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "4.44444"
+  })), /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: borderA,
+    x1: "4.22222",
+    y1: "2.44444",
+    x2: "16",
+    y2: "14.4444",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    stopColor: "#62FAFF"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "1",
+    stopColor: "#55AFD6",
+    stopOpacity: "0"
+  })), /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: borderB,
+    x1: "28.4444",
+    y1: "29.3333",
+    x2: "22.8889",
+    y2: "22.4444",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    stopColor: "#FFA961"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "1",
+    stopColor: "#D48B91",
+    stopOpacity: "0"
+  })))), /*#__PURE__*/React__default.createElement("svg", {
+    className: styles.iconSparkle,
+    viewBox: "0 0 19.4995 17.9999",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M2.71191 12.2002C2.81068 11.9333 3.18834 11.9333 3.2871 12.2002L3.84375 13.7031C3.92138 13.9129 4.08707 14.0786 4.29687 14.1562L5.7998 14.7119C6.06662 14.8107 6.06648 15.1882 5.7998 15.2871L4.29687 15.8437C4.08707 15.9214 3.92138 16.0871 3.84375 16.2969L3.2871 17.7998C3.18821 18.0665 2.81066 18.0666 2.71191 17.7998L2.15625 16.2969C2.07861 16.0871 1.91292 15.9214 1.70312 15.8437L0.200191 15.2871C-0.0667302 15.1883 -0.0667302 14.8107 0.200191 14.7119L1.70312 14.1562C1.91292 14.0786 2.07861 13.9129 2.15625 13.7031L2.71191 12.2002ZM11.2812 2C11.5283 1.33313 12.4717 1.33305 12.7187 2L14.1094 5.75878C14.3035 6.28304 14.7169 6.69659 15.2412 6.89062L18.999 8.28125C19.6663 8.52817 19.6663 9.47182 18.999 9.71875L15.2412 11.1094C14.7168 11.3035 14.3035 11.7168 14.1094 12.2412L12.7187 15.999C12.4718 16.6663 11.5282 16.6663 11.2812 15.999L9.89062 12.2412C9.69659 11.7169 9.28304 11.3035 8.75878 11.1094L5 9.71875C4.33305 9.47173 4.33312 8.52834 5 8.28125L8.75878 6.89062C9.28299 6.69653 9.69653 6.28299 9.89062 5.75878L11.2812 2ZM2.71191 0.200191C2.81068 -0.0667302 3.18834 -0.0667302 3.2871 0.200191L3.84375 1.70312C3.92138 1.91292 4.08707 2.07861 4.29687 2.15625L5.7998 2.71191C6.06662 2.81066 6.06648 3.18821 5.7998 3.2871L4.29687 3.84375C4.08707 3.92138 3.92138 4.08707 3.84375 4.29687L3.2871 5.7998C3.18821 6.06648 2.81066 6.06662 2.71191 5.7998L2.15625 4.29687C2.07861 4.08707 1.91292 3.92138 1.70312 3.84375L0.200191 3.2871C-0.0667302 3.18834 -0.0667302 2.81068 0.200191 2.71191L1.70312 2.15625C1.91292 2.07861 2.07861 1.91292 2.15625 1.70312L2.71191 0.200191Z",
+    fill: "currentColor"
+  })));
 }
 
 // The article heading lives in the deepest populated hierarchy level (lvl0 is
@@ -4344,6 +4549,89 @@ 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;
+}
+
+const LOAD_TIMEOUT_MS = 3000;
+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 || "");
+    const hasReportedErrorRef = React__default.useRef(false);
+    const loadTimeoutRef = React__default.useRef();
+    const reportLoadError = React__default.useCallback(() => {
+      if (hasReportedErrorRef.current) return;
+      hasReportedErrorRef.current = true;
+      onMessage === null || onMessage === void 0 ? void 0 : onMessage({
+        type: "IFRAME_LOAD_ERROR"
+      });
+    }, [onMessage]);
+    React__default.useEffect(function armLoadTimeoutOnMount() {
+      const timeout = setTimeout(reportLoadError, LOAD_TIMEOUT_MS);
+      loadTimeoutRef.current = timeout;
+      return () => clearTimeout(timeout);
+    }, []);
+    React__default.useEffect(function subscribeToGuestMessages() {
+      function handleGuestMessage(e) {
+        var _a, _b, _c;
+        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 (((_c = e.data) === null || _c === void 0 ? void 0 : _c.type) === "READY") clearTimeout(loadTimeoutRef.current);
+        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 +4657,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 +4672,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 +4717,7 @@ function HelpdeskComponent({
       DrawerHeading,
       PicobotIframe: {
         component: PicobotIframe,
+        methods: ["postMessage"],
         properties: {
           currentPath: {
             attribute: false
@@ -5709,18 +5962,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 +6011,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