@carbon/ai-chat 1.15.0 → 1.16.0-rc.0

package/dist/es/web-components/cds-aichat-container/index.js

@@ -90,6 +90,8 @@ import "lodash-es/throttle.js";
 
 import "@carbon/icons/es/down-to-bottom/16.js";
 
+import "@carbon/ai-chat-components/es/globals/settings.js";
+
 import "@carbon/icons/es/screen--off/16.js";
 
 import "@carbon/icons/es/user--avatar/32.js";
@@ -126,8 +128,6 @@ import "@carbon/ai-chat-components/es/react/feedback-buttons.js";
 
 import "@carbon/ai-chat-components/es/react/feedback.js";
 
-import "@carbon/ai-chat-components/es/globals/settings.js";
-
 import "@carbon/icons/es/checkmark/16.js";
 
 import "@carbon/icons/es/headset/16.js";
@@ -214,12 +214,12 @@ import "@carbon/icons/es/stop--filled/16.js";
 
 import "@carbon/ai-chat-components/es/react/panel.js";
 
-import "@carbon/icons/es/chevron--down/20.js";
-
-import "@carbon/icons/es/close--large/20.js";
+import "@carbon/icons/es/chevron--left/16.js";
 
 import "@carbon/ai-chat-components/es/react/toolbar.js";
 
+import "@carbon/web-components/es/components/icon-button/icon-button.js";
+
 import "@carbon/web-components/es/components/chat-button/chat-button.js";
 
 import "@carbon/ai-chat-components/es/components/chain-of-thought/defs.js";

package/dist/es/web-components/cds-aichat-custom-element/index.js

@@ -92,6 +92,8 @@ import "lodash-es/throttle.js";
 
 import "@carbon/icons/es/down-to-bottom/16.js";
 
+import "@carbon/ai-chat-components/es/globals/settings.js";
+
 import "@carbon/icons/es/screen--off/16.js";
 
 import "@carbon/icons/es/user--avatar/32.js";
@@ -128,8 +130,6 @@ import "@carbon/ai-chat-components/es/react/feedback-buttons.js";
 
 import "@carbon/ai-chat-components/es/react/feedback.js";
 
-import "@carbon/ai-chat-components/es/globals/settings.js";
-
 import "@carbon/icons/es/checkmark/16.js";
 
 import "@carbon/icons/es/headset/16.js";
@@ -216,12 +216,12 @@ import "@carbon/icons/es/stop--filled/16.js";
 
 import "@carbon/ai-chat-components/es/react/panel.js";
 
-import "@carbon/icons/es/chevron--down/20.js";
-
-import "@carbon/icons/es/close--large/20.js";
+import "@carbon/icons/es/chevron--left/16.js";
 
 import "@carbon/ai-chat-components/es/react/toolbar.js";
 
+import "@carbon/web-components/es/components/icon-button/icon-button.js";
+
 import "@carbon/web-components/es/components/chat-button/chat-button.js";
 
 import "@carbon/ai-chat-components/es/components/chain-of-thought/defs.js";

package/dist/es/web-components/cds-aichat-custom-element/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/web-components/cds-aichat-custom-element/index.ts"],"sourcesContent":["/*\n *  Copyright IBM Corp. 2025, 2026\n *\n *  This source code is licensed under the Apache-2.0 license found in the\n *  LICENSE file in the root directory of this source tree.\n *\n *  @license\n */\n\n// Ensure the container custom element is registered whenever the\n// custom element module is imported by re-exporting its exports.\n// This prevents bundlers (and our own multi-entry Rollup build)\n// from pruning the side-effect-only import.\nexport { default as __cds_aichat_container_register } from \"../cds-aichat-container\";\nimport \"../cds-aichat-container\";\n\nimport { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\n\nimport { carbonElement } from \"@carbon/ai-chat-components/es/globals/decorators/index.js\";\nimport { PublicConfig } from \"../../types/config/PublicConfig\";\nimport { FlattenedConfigElement } from \"../shared/FlattenedConfigElement\";\nimport { ChatInstance } from \"../../types/instance/ChatInstance\";\nimport {\n  BusEventChunkUserDefinedResponse,\n  BusEventCustomFooterSlot,\n  BusEventType,\n  BusEventUserDefinedResponse,\n  BusEventViewChange,\n  BusEventViewPreChange,\n} from \"../../types/events/eventBusTypes\";\nimport type {\n  WCMarkdown,\n  WCRenderCustomMessageFooter,\n  WCRenderUserDefinedResponse,\n} from \"../../types/component/ChatContainer\";\n\n/**\n * cds-aichat-custom-element will is a pass through to cds-aichat-container. It takes any user_defined and writeable element\n * slotted content and forwards it to cds-aichat-container. It also will setup the custom element with a default viewChange\n * pattern (e.g. hiding and showing the custom element when the chat should be open/closed) if a onViewChange property is not\n * defined. Finally, it registers the custom element with cds-aichat-container so a default \"floating\" element will not be created.\n *\n * The custom element should be sized using external CSS. When hidden, the 'cds-aichat--hidden' class is added to set dimensions to 0x0.\n */\n@carbonElement(\"cds-aichat-custom-element\")\nclass ChatCustomElement extends FlattenedConfigElement {\n  /**\n   * Shared stylesheet for hiding styles.\n   */\n  private static hideSheet = new CSSStyleSheet();\n  static {\n    // Hide styles that override any external sizing. `replaceSync` is absent\n    // in non-browser environments (e.g. the jsdom-based test environment), so\n    // skip styling there rather than throwing at module-evaluation time.\n    ChatCustomElement.hideSheet.replaceSync?.(`\n      :host {\n        display: block;\n      }\n      :host(.cds-aichat--hidden) {\n        width: 0 !important;\n        height: 0 !important;\n        min-width: 0 !important;\n        min-height: 0 !important;\n        max-width: 0 !important;\n        max-height: 0 !important;\n        inline-size: 0 !important;\n        block-size: 0 !important;\n        min-inline-size: 0 !important;\n        min-block-size: 0 !important;\n        max-inline-size: 0 !important;\n        max-block-size: 0 !important;\n        overflow: hidden !important;\n        display: block !important;\n      }\n    `);\n  }\n\n  /**\n   * Adopt our stylesheet into every shadowRoot.\n   */\n  protected createRenderRoot(): ShadowRoot {\n    // Lits default createRenderRoot actually returns a ShadowRoot\n    const root = super.createRenderRoot() as ShadowRoot;\n\n    // now TS knows root.adoptedStyleSheets exists\n    root.adoptedStyleSheets = [\n      ...root.adoptedStyleSheets,\n      ChatCustomElement.hideSheet,\n    ];\n    return root;\n  }\n\n  /**\n   * This function is called before the render function of Carbon AI Chat is called. This function can return a Promise\n   * which will cause Carbon AI Chat to wait for it before rendering.\n   */\n  @property({ attribute: false })\n  onBeforeRender?: (instance: ChatInstance) => Promise<void> | void;\n\n  /**\n   * This function is called after the render function of Carbon AI Chat is called.\n   */\n  @property({ attribute: false })\n  onAfterRender?: (instance: ChatInstance) => Promise<void> | void;\n\n  /**\n   * Called before a view change (chat opening/closing). The chat will hide the chat shell inside your custom element\n   * to prevent invisible keyboard stops when the view change is complete.\n   *\n   * Use this callback to update your CSS class name values on this element before the view change happens if you want to add any open/close\n   * animations to your custom element before the chat shell inner contents are hidden. It is async and so you can\n   * tie it to native the AnimationEvent and only return when your animations have completed.\n   *\n   * A common pattern is to use this for when the chat is closing and to use onViewChange for when the chat opens.\n   *\n   * Note that this function can only be provided before Carbon AI Chat is loaded as it is registered before the\n   * chat renders. After Carbon AI Chat is loaded, the callback will not be updated.\n   */\n  @property()\n  onViewPreChange?: (event: BusEventViewPreChange) => Promise<void> | void;\n\n  /**\n   * Called when the chat view change is complete. If no callback is provided here, the default behavior will be to set\n   * the chat shell to 0x0 size and set all inner contents aside from the launcher, if you are using it, to display: none.\n   * The inner contents of the chat shell (aside from the launcher if you are using it) are always set to display: none\n   * regardless of what is configured with this callback to prevent invisible tab stops and screen reader issues.\n   *\n   * Use this callback to update your className value when the chat has finished being opened or closed.\n   *\n   * You can provide a different callback here if you want custom animation behavior when the chat is opened or closed.\n   * The animation behavior defined here will run in concert with the chat inside your custom container being hidden.\n   *\n   * If you want to run animations before the inner contents of the chat shell is shrunk and the inner contents are hidden,\n   * make use of onViewPreChange.\n   *\n   * A common pattern is to use this for when the chat is opening and to use onViewPreChange for when the chat closes.\n   *\n   * Note that this function can only be provided before Carbon AI Chat is loaded as it is registered before the\n   * chat renders. After Carbon AI Chat is loaded, the callback will not be updated.\n   */\n  @property()\n  onViewChange?: (event: BusEventViewChange, instance: ChatInstance) => void;\n\n  /**\n   * Optional callback to render user defined responses. When provided, the inner cds-aichat-container\n   * manages all event listening, slot tracking, and element lifecycle.\n   */\n  @property({ attribute: false })\n  renderUserDefinedResponse?: WCRenderUserDefinedResponse;\n\n  /**\n   * Optional callback to render custom message footers. When provided, the inner cds-aichat-container\n   * manages all event listening, slot tracking, and element lifecycle.\n   */\n  @property({ attribute: false })\n  renderCustomMessageFooter?: WCRenderCustomMessageFooter;\n\n  // markdown is declared on the FlattenedConfigElement base; the attributes\n  // interface narrows its type.\n\n  @state()\n  private _userDefinedSlotNames: string[] = [];\n\n  @state()\n  private _writeableElementSlots: string[] = [];\n\n  @state()\n  private _customFooterSlotNames: string[] = [];\n\n  /**\n   * Active slot names for markdown-plugin output hosted at this element.\n   * Populated when this element accepts the host-mount event; drained when\n   * the matching unmount event fires.\n   */\n  @state()\n  private _pluginSlotNames: string[] = [];\n\n  /**\n   * Page-level host elements created for plugin-output slots, keyed by slot\n   * name. Created in this element's outer light DOM so consumer-loaded\n   * stylesheets (e.g. KaTeX) reach the rendered HTML normally.\n   */\n  private _pluginHosts: Map<string, HTMLElement> = new Map();\n\n  @state()\n  private _instance!: ChatInstance;\n\n  private defaultViewChangeHandler = (event: BusEventViewChange) => {\n    if (event.newViewState.mainWindow) {\n      this.classList.remove(\"cds-aichat--hidden\");\n    } else {\n      this.classList.add(\"cds-aichat--hidden\");\n    }\n  };\n\n  private userDefinedHandler = (\n    event: BusEventUserDefinedResponse | BusEventChunkUserDefinedResponse,\n  ) => {\n    const { slot } = event.data;\n    if (!this._userDefinedSlotNames.includes(slot)) {\n      this._userDefinedSlotNames = [...this._userDefinedSlotNames, slot];\n    }\n  };\n\n  private customFooterHandler = (event: BusEventCustomFooterSlot) => {\n    const { slotName } = event.data;\n    if (!this._customFooterSlotNames.includes(slotName)) {\n      this._customFooterSlotNames = [...this._customFooterSlotNames, slotName];\n    }\n  };\n\n  private handlePluginHostMount = (event: Event) => {\n    const detail = (\n      event as CustomEvent<{\n        slotName: string;\n        html: string;\n        isInline: boolean;\n      }>\n    ).detail;\n    if (!detail?.slotName) {\n      return;\n    }\n    if (!this._pluginSlotNames.includes(detail.slotName)) {\n      this._pluginSlotNames = [...this._pluginSlotNames, detail.slotName];\n    }\n    // cds-aichat-custom-element is always the outermost chat element in its\n    // shadow chain; there is no further chat ancestor to defer to. Take\n    // hosting unconditionally.\n    event.preventDefault();\n    let host = this._pluginHosts.get(detail.slotName);\n    if (!host) {\n      host = document.createElement(detail.isInline ? \"span\" : \"div\");\n      host.setAttribute(\"slot\", detail.slotName);\n      // Match `.cds-aichat-markdown-stack > *:not(:first-child)` spacing;\n      // shadow CSS doesn't reach this host (it lives in this element's\n      // outer light DOM), so apply it inline. Inline output flows with\n      // text and gets no extra spacing.\n      if (!detail.isInline) {\n        host.style.marginBlockStart = \"1rem\";\n      }\n      this._pluginHosts.set(detail.slotName, host);\n      this.appendChild(host);\n    }\n    if (host.innerHTML !== detail.html) {\n      host.innerHTML = detail.html;\n    }\n  };\n\n  private handlePluginHostUpdate = (event: Event) => {\n    const detail = (event as CustomEvent<{ slotName: string; html: string }>)\n      .detail;\n    if (!detail?.slotName) {\n      return;\n    }\n    const host = this._pluginHosts.get(detail.slotName);\n    if (host && host.innerHTML !== detail.html) {\n      host.innerHTML = detail.html;\n    }\n  };\n\n  private handlePluginHostUnmount = (event: Event) => {\n    const detail = (event as CustomEvent<{ slotName: string }>).detail;\n    if (!detail?.slotName) {\n      return;\n    }\n    this._pluginSlotNames = this._pluginSlotNames.filter(\n      (n) => n !== detail.slotName,\n    );\n    const host = this._pluginHosts.get(detail.slotName);\n    if (host) {\n      host.remove();\n      this._pluginHosts.delete(detail.slotName);\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\n      \"cds-aichat-markdown-plugin-host-mount\",\n      this.handlePluginHostMount,\n    );\n    this.addEventListener(\n      \"cds-aichat-markdown-plugin-host-update\",\n      this.handlePluginHostUpdate,\n    );\n    this.addEventListener(\n      \"cds-aichat-markdown-plugin-host-unmount\",\n      this.handlePluginHostUnmount,\n    );\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener(\n      \"cds-aichat-markdown-plugin-host-mount\",\n      this.handlePluginHostMount,\n    );\n    this.removeEventListener(\n      \"cds-aichat-markdown-plugin-host-update\",\n      this.handlePluginHostUpdate,\n    );\n    this.removeEventListener(\n      \"cds-aichat-markdown-plugin-host-unmount\",\n      this.handlePluginHostUnmount,\n    );\n    for (const host of this._pluginHosts.values()) {\n      host.remove();\n    }\n    this._pluginHosts.clear();\n    super.disconnectedCallback();\n  }\n\n  private onBeforeRenderOverride = async (instance: ChatInstance) => {\n    this._instance = instance;\n    if (this.onViewPreChange) {\n      this._instance.on({\n        type: BusEventType.VIEW_PRE_CHANGE,\n        handler: this.onViewPreChange,\n      });\n    }\n    this._instance.on({\n      type: BusEventType.VIEW_CHANGE,\n      handler: this.onViewChange || this.defaultViewChangeHandler,\n    });\n\n    if (!this.renderUserDefinedResponse) {\n      // Legacy path: custom-element tracks slot names for manual slotting.\n      // When renderUserDefinedResponse is set, the inner cds-aichat-container handles everything.\n      this._instance.on({\n        type: BusEventType.USER_DEFINED_RESPONSE,\n        handler: this.userDefinedHandler,\n      });\n      this._instance.on({\n        type: BusEventType.CHUNK_USER_DEFINED_RESPONSE,\n        handler: this.userDefinedHandler,\n      });\n    }\n\n    if (!this.renderCustomMessageFooter) {\n      // Legacy path: custom-element tracks slot names for manual slotting.\n      // When renderCustomMessageFooter is set, the inner cds-aichat-container handles everything.\n      this._instance.on({\n        type: BusEventType.CUSTOM_FOOTER_SLOT,\n        handler: this.customFooterHandler,\n      });\n    }\n    this.addWriteableElementSlots();\n    await this.onBeforeRender?.(instance);\n  };\n\n  private addWriteableElementSlots() {\n    this._writeableElementSlots = Object.keys(this._instance.writeableElements);\n  }\n\n  render() {\n    return html`\n      <cds-aichat-container\n        .config=${this.resolvedConfig}\n        .header=${this.resolvedConfig.header}\n        .onAfterRender=${this.onAfterRender}\n        .onBeforeRender=${this.onBeforeRenderOverride}\n        .element=${this}\n        .renderUserDefinedResponse=${this.renderUserDefinedResponse}\n        .renderCustomMessageFooter=${this.renderCustomMessageFooter}\n        .markdown=${this.markdown as WCMarkdown | undefined}\n      >\n        ${this._writeableElementSlots.map(\n          (slot) => html`<slot name=${slot} slot=${slot}></slot>`,\n        )}\n        ${this.renderUserDefinedResponse\n          ? null\n          : this._userDefinedSlotNames.map(\n              (slot) => html`<slot name=${slot} slot=${slot}></slot>`,\n            )}\n        ${this.renderCustomMessageFooter\n          ? null\n          : this._customFooterSlotNames.map(\n              (slot) =>\n                html`<div slot=${slot}><slot name=${slot}></slot></div>`,\n            )}\n        ${this._pluginSlotNames.map(\n          (slot) => html`<slot name=${slot} slot=${slot}></slot>`,\n        )}\n      </cds-aichat-container>\n    `;\n  }\n}\n\n/**\n * Attributes interface for the cds-aichat-custom-element web component.\n * This interface extends {@link PublicConfig} with additional component-specific props,\n * flattening all config properties as top-level properties for better TypeScript IntelliSense.\n *\n * @category Web component\n */\ninterface CdsAiChatCustomElementAttributes extends Omit<\n  PublicConfig,\n  \"markdown\"\n> {\n  /**\n   * Markdown rendering customization. Extends the framework-neutral\n   * `PublicConfig.markdown` with web-component `customRenderers`.\n   *\n   * @experimental\n   */\n  markdown?: WCMarkdown;\n\n  /**\n   * This function is called before the render function of Carbon AI Chat is called. This function can return a Promise\n   * which will cause Carbon AI Chat to wait for it before rendering.\n   */\n  onBeforeRender?: (instance: ChatInstance) => Promise<void> | void;\n\n  /**\n   * This function is called after the render function of Carbon AI Chat is called.\n   */\n  onAfterRender?: (instance: ChatInstance) => Promise<void> | void;\n\n  /**\n   * An optional listener for \"view:change\" events. Such a listener is required when using a custom element in order\n   * to control the visibility of the Carbon AI Chat main window. If no callback is provided here, a default one will be\n   * used that injects styling into the app that will show and hide the Carbon AI Chat main window and also change the\n   * size of the custom element so it doesn't take up space when the main window is closed.\n   *\n   * You can provide a different callback here if you want custom behavior such as an animation when the main window\n   * is opened or closed.\n   *\n   * Note that this function can only be provided before Carbon AI Chat is loaded. After Carbon AI Chat is loaded, the event\n   * handler will not be updated.\n   */\n  onViewChange?: (event: BusEventViewChange, instance: ChatInstance) => void;\n\n  /**\n   * Optional callback to render user defined responses. When provided, the inner cds-aichat-container\n   * manages all event listening, slot tracking, streaming state, and element lifecycle.\n   */\n  renderUserDefinedResponse?: WCRenderUserDefinedResponse;\n\n  /**\n   * Optional callback to render custom message footers. When provided, the inner cds-aichat-container\n   * manages all event listening, slot tracking, and element lifecycle.\n   */\n  renderCustomMessageFooter?: WCRenderCustomMessageFooter;\n}\n\nexport { CdsAiChatCustomElementAttributes };\n\nexport default ChatCustomElement;\n"],"names":["ChatCustomElement","ChatCustomElement_1","FlattenedConfigElement","constructor","this","_userDefinedSlotNames","_writeableElementSlots","_customFooterSlotNames","_pluginSlotNames","_pluginHosts","Map","defaultViewChangeHandler","event","newViewState","mainWindow","classList","remove","add","userDefinedHandler","slot","data","includes","customFooterHandler","slotName","handlePluginHostMount","detail","preventDefault","host","get","document","createElement","isInline","setAttribute","style","marginBlockStart","set","appendChild","innerHTML","html","handlePluginHostUpdate","handlePluginHostUnmount","filter","n","delete","onBeforeRenderOverride","async","instance","_instance","onViewPreChange","on","type","BusEventType","VIEW_PRE_CHANGE","handler","VIEW_CHANGE","onViewChange","renderUserDefinedResponse","USER_DEFINED_RESPONSE","CHUNK_USER_DEFINED_RESPONSE","renderCustomMessageFooter","CUSTOM_FOOTER_SLOT","addWriteableElementSlots","onBeforeRender","createRenderRoot","root","super","adoptedStyleSheets","hideSheet","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","values","clear","Object","keys","writeableElements","render","resolvedConfig","header","onAfterRender","markdown","map","CSSStyleSheet","replaceSync","__decorate","property","attribute","prototype","state","carbonElement","ChatCustomElement_default"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/web-components/cds-aichat-custom-element/index.ts"],"sourcesContent":["/*\n *  Copyright IBM Corp. 2025, 2026\n *\n *  This source code is licensed under the Apache-2.0 license found in the\n *  LICENSE file in the root directory of this source tree.\n *\n *  @license\n */\n\n// Ensure the container custom element is registered whenever the\n// custom element module is imported by re-exporting its exports.\n// This prevents bundlers (and our own multi-entry Rollup build)\n// from pruning the side-effect-only import.\nexport { default as __cds_aichat_container_register } from \"../cds-aichat-container\";\nimport \"../cds-aichat-container\";\n\nimport { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\n\nimport { carbonElement } from \"@carbon/ai-chat-components/es/globals/decorators/index.js\";\nimport { PublicConfig } from \"../../types/config/PublicConfig\";\nimport { FlattenedConfigElement } from \"../shared/FlattenedConfigElement\";\nimport { ChatInstance } from \"../../types/instance/ChatInstance\";\nimport {\n  BusEventChunkUserDefinedResponse,\n  BusEventCustomFooterSlot,\n  BusEventType,\n  BusEventUserDefinedResponse,\n  BusEventViewChange,\n  BusEventViewPreChange,\n} from \"../../types/events/eventBusTypes\";\nimport type {\n  WCMarkdown,\n  WCRenderCustomMessageFooter,\n  WCRenderUserDefinedResponse,\n} from \"../../types/component/ChatContainer\";\n\n/**\n * cds-aichat-custom-element will is a pass through to cds-aichat-container. It takes any user_defined and writeable element\n * slotted content and forwards it to cds-aichat-container. It also will setup the custom element with a default viewChange\n * pattern (e.g. hiding and showing the custom element when the chat should be open/closed) if a onViewChange property is not\n * defined. Finally, it registers the custom element with cds-aichat-container so a default \"floating\" element will not be created.\n *\n * The custom element should be sized using external CSS. When hidden, the 'cds-aichat--hidden' class is added to set dimensions to 0x0.\n */\n@carbonElement(\"cds-aichat-custom-element\")\nclass ChatCustomElement extends FlattenedConfigElement {\n  /**\n   * Shared stylesheet for hiding styles.\n   */\n  private static hideSheet = new CSSStyleSheet();\n  static {\n    // Hide styles that override any external sizing. `replaceSync` is absent\n    // in non-browser environments (e.g. the jsdom-based test environment), so\n    // skip styling there rather than throwing at module-evaluation time.\n    ChatCustomElement.hideSheet.replaceSync?.(`\n      :host {\n        display: block;\n      }\n      :host(.cds-aichat--hidden) {\n        width: 0 !important;\n        height: 0 !important;\n        min-width: 0 !important;\n        min-height: 0 !important;\n        max-width: 0 !important;\n        max-height: 0 !important;\n        inline-size: 0 !important;\n        block-size: 0 !important;\n        min-inline-size: 0 !important;\n        min-block-size: 0 !important;\n        max-inline-size: 0 !important;\n        max-block-size: 0 !important;\n        overflow: hidden !important;\n        display: block !important;\n      }\n    `);\n  }\n\n  /**\n   * Adopt our stylesheet into every shadowRoot.\n   */\n  protected createRenderRoot(): ShadowRoot {\n    // Lits default createRenderRoot actually returns a ShadowRoot\n    const root = super.createRenderRoot() as ShadowRoot;\n\n    // now TS knows root.adoptedStyleSheets exists\n    root.adoptedStyleSheets = [\n      ...root.adoptedStyleSheets,\n      ChatCustomElement.hideSheet,\n    ];\n    return root;\n  }\n\n  /**\n   * This function is called before the render function of Carbon AI Chat is called. This function can return a Promise\n   * which will cause Carbon AI Chat to wait for it before rendering.\n   *\n   * Use it to capture the {@link ChatInstance} so you can call instance methods later.\n   *\n   * @example\n   * ```ts\n   * const onBeforeRender = (instance: ChatInstance) => {\n   *   this.instance = instance;\n   * };\n   * // <cds-aichat-custom-element .onBeforeRender=${onBeforeRender}></cds-aichat-custom-element>\n   * ```\n   */\n  @property({ attribute: false })\n  onBeforeRender?: (instance: ChatInstance) => Promise<void> | void;\n\n  /**\n   * This function is called after the render function of Carbon AI Chat is called.\n   *\n   * Like `onBeforeRender`, it receives the {@link ChatInstance}; use it when you need the instance only after the\n   * first render has completed.\n   */\n  @property({ attribute: false })\n  onAfterRender?: (instance: ChatInstance) => Promise<void> | void;\n\n  /**\n   * Called before a view change (chat opening/closing). The chat will hide the chat shell inside your custom element\n   * to prevent invisible keyboard stops when the view change is complete.\n   *\n   * Use this callback to update your CSS class name values on this element before the view change happens if you want to add any open/close\n   * animations to your custom element before the chat shell inner contents are hidden. It is async and so you can\n   * tie it to native the AnimationEvent and only return when your animations have completed.\n   *\n   * A common pattern is to use this for when the chat is closing and to use onViewChange for when the chat opens.\n   *\n   * Note that this function can only be provided before Carbon AI Chat is loaded as it is registered before the\n   * chat renders. After Carbon AI Chat is loaded, the callback will not be updated.\n   */\n  @property()\n  onViewPreChange?: (event: BusEventViewPreChange) => Promise<void> | void;\n\n  /**\n   * Called when the chat view change is complete. If no callback is provided here, the default behavior will be to set\n   * the chat shell to 0x0 size and set all inner contents aside from the launcher, if you are using it, to display: none.\n   * The inner contents of the chat shell (aside from the launcher if you are using it) are always set to display: none\n   * regardless of what is configured with this callback to prevent invisible tab stops and screen reader issues.\n   *\n   * Use this callback to update your className value when the chat has finished being opened or closed.\n   *\n   * You can provide a different callback here if you want custom animation behavior when the chat is opened or closed.\n   * The animation behavior defined here will run in concert with the chat inside your custom container being hidden.\n   *\n   * If you want to run animations before the inner contents of the chat shell is shrunk and the inner contents are hidden,\n   * make use of onViewPreChange.\n   *\n   * A common pattern is to use this for when the chat is opening and to use onViewPreChange for when the chat closes.\n   *\n   * Note that this function can only be provided before Carbon AI Chat is loaded as it is registered before the\n   * chat renders. After Carbon AI Chat is loaded, the callback will not be updated.\n   */\n  @property()\n  onViewChange?: (event: BusEventViewChange, instance: ChatInstance) => void;\n\n  /**\n   * Optional callback to render user defined responses. When provided, the inner cds-aichat-container\n   * manages all event listening, slot tracking, and element lifecycle.\n   */\n  @property({ attribute: false })\n  renderUserDefinedResponse?: WCRenderUserDefinedResponse;\n\n  /**\n   * Optional callback to render custom message footers. When provided, the inner cds-aichat-container\n   * manages all event listening, slot tracking, and element lifecycle.\n   */\n  @property({ attribute: false })\n  renderCustomMessageFooter?: WCRenderCustomMessageFooter;\n\n  // markdown is declared on the FlattenedConfigElement base; the attributes\n  // interface narrows its type.\n\n  @state()\n  private _userDefinedSlotNames: string[] = [];\n\n  @state()\n  private _writeableElementSlots: string[] = [];\n\n  @state()\n  private _customFooterSlotNames: string[] = [];\n\n  /**\n   * Active slot names for markdown-plugin output hosted at this element.\n   * Populated when this element accepts the host-mount event; drained when\n   * the matching unmount event fires.\n   */\n  @state()\n  private _pluginSlotNames: string[] = [];\n\n  /**\n   * Page-level host elements created for plugin-output slots, keyed by slot\n   * name. Created in this element's outer light DOM so consumer-loaded\n   * stylesheets (e.g. KaTeX) reach the rendered HTML normally.\n   */\n  private _pluginHosts: Map<string, HTMLElement> = new Map();\n\n  @state()\n  private _instance!: ChatInstance;\n\n  private defaultViewChangeHandler = (event: BusEventViewChange) => {\n    if (event.newViewState.mainWindow) {\n      this.classList.remove(\"cds-aichat--hidden\");\n    } else {\n      this.classList.add(\"cds-aichat--hidden\");\n    }\n  };\n\n  private userDefinedHandler = (\n    event: BusEventUserDefinedResponse | BusEventChunkUserDefinedResponse,\n  ) => {\n    const { slot } = event.data;\n    if (!this._userDefinedSlotNames.includes(slot)) {\n      this._userDefinedSlotNames = [...this._userDefinedSlotNames, slot];\n    }\n  };\n\n  private customFooterHandler = (event: BusEventCustomFooterSlot) => {\n    const { slotName } = event.data;\n    if (!this._customFooterSlotNames.includes(slotName)) {\n      this._customFooterSlotNames = [...this._customFooterSlotNames, slotName];\n    }\n  };\n\n  private handlePluginHostMount = (event: Event) => {\n    const detail = (\n      event as CustomEvent<{\n        slotName: string;\n        html: string;\n        isInline: boolean;\n      }>\n    ).detail;\n    if (!detail?.slotName) {\n      return;\n    }\n    if (!this._pluginSlotNames.includes(detail.slotName)) {\n      this._pluginSlotNames = [...this._pluginSlotNames, detail.slotName];\n    }\n    // cds-aichat-custom-element is always the outermost chat element in its\n    // shadow chain; there is no further chat ancestor to defer to. Take\n    // hosting unconditionally.\n    event.preventDefault();\n    let host = this._pluginHosts.get(detail.slotName);\n    if (!host) {\n      host = document.createElement(detail.isInline ? \"span\" : \"div\");\n      host.setAttribute(\"slot\", detail.slotName);\n      // Match `.cds-aichat-markdown-stack > *:not(:first-child)` spacing;\n      // shadow CSS doesn't reach this host (it lives in this element's\n      // outer light DOM), so apply it inline. Inline output flows with\n      // text and gets no extra spacing.\n      if (!detail.isInline) {\n        host.style.marginBlockStart = \"1rem\";\n      }\n      this._pluginHosts.set(detail.slotName, host);\n      this.appendChild(host);\n    }\n    if (host.innerHTML !== detail.html) {\n      host.innerHTML = detail.html;\n    }\n  };\n\n  private handlePluginHostUpdate = (event: Event) => {\n    const detail = (event as CustomEvent<{ slotName: string; html: string }>)\n      .detail;\n    if (!detail?.slotName) {\n      return;\n    }\n    const host = this._pluginHosts.get(detail.slotName);\n    if (host && host.innerHTML !== detail.html) {\n      host.innerHTML = detail.html;\n    }\n  };\n\n  private handlePluginHostUnmount = (event: Event) => {\n    const detail = (event as CustomEvent<{ slotName: string }>).detail;\n    if (!detail?.slotName) {\n      return;\n    }\n    this._pluginSlotNames = this._pluginSlotNames.filter(\n      (n) => n !== detail.slotName,\n    );\n    const host = this._pluginHosts.get(detail.slotName);\n    if (host) {\n      host.remove();\n      this._pluginHosts.delete(detail.slotName);\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\n      \"cds-aichat-markdown-plugin-host-mount\",\n      this.handlePluginHostMount,\n    );\n    this.addEventListener(\n      \"cds-aichat-markdown-plugin-host-update\",\n      this.handlePluginHostUpdate,\n    );\n    this.addEventListener(\n      \"cds-aichat-markdown-plugin-host-unmount\",\n      this.handlePluginHostUnmount,\n    );\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener(\n      \"cds-aichat-markdown-plugin-host-mount\",\n      this.handlePluginHostMount,\n    );\n    this.removeEventListener(\n      \"cds-aichat-markdown-plugin-host-update\",\n      this.handlePluginHostUpdate,\n    );\n    this.removeEventListener(\n      \"cds-aichat-markdown-plugin-host-unmount\",\n      this.handlePluginHostUnmount,\n    );\n    for (const host of this._pluginHosts.values()) {\n      host.remove();\n    }\n    this._pluginHosts.clear();\n    super.disconnectedCallback();\n  }\n\n  private onBeforeRenderOverride = async (instance: ChatInstance) => {\n    this._instance = instance;\n    if (this.onViewPreChange) {\n      this._instance.on({\n        type: BusEventType.VIEW_PRE_CHANGE,\n        handler: this.onViewPreChange,\n      });\n    }\n    this._instance.on({\n      type: BusEventType.VIEW_CHANGE,\n      handler: this.onViewChange || this.defaultViewChangeHandler,\n    });\n\n    if (!this.renderUserDefinedResponse) {\n      // Legacy path: custom-element tracks slot names for manual slotting.\n      // When renderUserDefinedResponse is set, the inner cds-aichat-container handles everything.\n      this._instance.on({\n        type: BusEventType.USER_DEFINED_RESPONSE,\n        handler: this.userDefinedHandler,\n      });\n      this._instance.on({\n        type: BusEventType.CHUNK_USER_DEFINED_RESPONSE,\n        handler: this.userDefinedHandler,\n      });\n    }\n\n    if (!this.renderCustomMessageFooter) {\n      // Legacy path: custom-element tracks slot names for manual slotting.\n      // When renderCustomMessageFooter is set, the inner cds-aichat-container handles everything.\n      this._instance.on({\n        type: BusEventType.CUSTOM_FOOTER_SLOT,\n        handler: this.customFooterHandler,\n      });\n    }\n    this.addWriteableElementSlots();\n    await this.onBeforeRender?.(instance);\n  };\n\n  private addWriteableElementSlots() {\n    this._writeableElementSlots = Object.keys(this._instance.writeableElements);\n  }\n\n  render() {\n    return html`\n      <cds-aichat-container\n        .config=${this.resolvedConfig}\n        .header=${this.resolvedConfig.header}\n        .onAfterRender=${this.onAfterRender}\n        .onBeforeRender=${this.onBeforeRenderOverride}\n        .element=${this}\n        .renderUserDefinedResponse=${this.renderUserDefinedResponse}\n        .renderCustomMessageFooter=${this.renderCustomMessageFooter}\n        .markdown=${this.markdown as WCMarkdown | undefined}\n      >\n        ${this._writeableElementSlots.map(\n          (slot) => html`<slot name=${slot} slot=${slot}></slot>`,\n        )}\n        ${this.renderUserDefinedResponse\n          ? null\n          : this._userDefinedSlotNames.map(\n              (slot) => html`<slot name=${slot} slot=${slot}></slot>`,\n            )}\n        ${this.renderCustomMessageFooter\n          ? null\n          : this._customFooterSlotNames.map(\n              (slot) =>\n                html`<div slot=${slot}><slot name=${slot}></slot></div>`,\n            )}\n        ${this._pluginSlotNames.map(\n          (slot) => html`<slot name=${slot} slot=${slot}></slot>`,\n        )}\n      </cds-aichat-container>\n    `;\n  }\n}\n\n/**\n * Attributes interface for the cds-aichat-custom-element web component.\n * This interface extends {@link PublicConfig} with additional component-specific props,\n * flattening all config properties as top-level properties for better TypeScript IntelliSense.\n *\n * @category Web component\n */\ninterface CdsAiChatCustomElementAttributes extends Omit<\n  PublicConfig,\n  \"markdown\"\n> {\n  /**\n   * Markdown rendering customization. Extends the framework-neutral\n   * `PublicConfig.markdown` with web-component `customRenderers`.\n   *\n   * @experimental\n   */\n  markdown?: WCMarkdown;\n\n  /**\n   * This function is called before the render function of Carbon AI Chat is called. This function can return a Promise\n   * which will cause Carbon AI Chat to wait for it before rendering.\n   */\n  onBeforeRender?: (instance: ChatInstance) => Promise<void> | void;\n\n  /**\n   * This function is called after the render function of Carbon AI Chat is called.\n   */\n  onAfterRender?: (instance: ChatInstance) => Promise<void> | void;\n\n  /**\n   * Called before a view change (the chat opening or closing) and awaited before the change proceeds. Use it to update\n   * this element's CSS classes and run open/close animations to completion before the chat shell's inner contents are\n   * hidden. A common pattern is to use this when the chat is closing and `onViewChange` when it opens.\n   *\n   * Note that this function can only be provided before Carbon AI Chat is loaded. After Carbon AI Chat is loaded, the\n   * callback will not be updated.\n   */\n  onViewPreChange?: (event: BusEventViewPreChange) => Promise<void> | void;\n\n  /**\n   * An optional listener for \"view:change\" events. Such a listener is required when using a custom element in order\n   * to control the visibility of the Carbon AI Chat main window. If no callback is provided here, a default one will be\n   * used that injects styling into the app that will show and hide the Carbon AI Chat main window and also change the\n   * size of the custom element so it doesn't take up space when the main window is closed.\n   *\n   * You can provide a different callback here if you want custom behavior such as an animation when the main window\n   * is opened or closed.\n   *\n   * Note that this function can only be provided before Carbon AI Chat is loaded. After Carbon AI Chat is loaded, the event\n   * handler will not be updated.\n   */\n  onViewChange?: (event: BusEventViewChange, instance: ChatInstance) => void;\n\n  /**\n   * Optional callback to render user defined responses. When provided, the inner cds-aichat-container\n   * manages all event listening, slot tracking, streaming state, and element lifecycle.\n   */\n  renderUserDefinedResponse?: WCRenderUserDefinedResponse;\n\n  /**\n   * Optional callback to render custom message footers. When provided, the inner cds-aichat-container\n   * manages all event listening, slot tracking, and element lifecycle.\n   */\n  renderCustomMessageFooter?: WCRenderCustomMessageFooter;\n}\n\nexport { CdsAiChatCustomElementAttributes };\n\nexport default ChatCustomElement;\n"],"names":["ChatCustomElement","ChatCustomElement_1","FlattenedConfigElement","constructor","this","_userDefinedSlotNames","_writeableElementSlots","_customFooterSlotNames","_pluginSlotNames","_pluginHosts","Map","defaultViewChangeHandler","event","newViewState","mainWindow","classList","remove","add","userDefinedHandler","slot","data","includes","customFooterHandler","slotName","handlePluginHostMount","detail","preventDefault","host","get","document","createElement","isInline","setAttribute","style","marginBlockStart","set","appendChild","innerHTML","html","handlePluginHostUpdate","handlePluginHostUnmount","filter","n","delete","onBeforeRenderOverride","async","instance","_instance","onViewPreChange","on","type","BusEventType","VIEW_PRE_CHANGE","handler","VIEW_CHANGE","onViewChange","renderUserDefinedResponse","USER_DEFINED_RESPONSE","CHUNK_USER_DEFINED_RESPONSE","renderCustomMessageFooter","CUSTOM_FOOTER_SLOT","addWriteableElementSlots","onBeforeRender","createRenderRoot","root","super","adoptedStyleSheets","hideSheet","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","values","clear","Object","keys","writeableElements","render","resolvedConfig","header","onAfterRender","markdown","map","CSSStyleSheet","replaceSync","__decorate","property","attribute","prototype","state","carbonElement","ChatCustomElement_default"],"mappings":"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"}

package/dist/es-custom/aiChatEntry.js

@@ -92,6 +92,8 @@ import "lodash-es/throttle.js";
 
 import "@carbon/icons/es/down-to-bottom/16.js";
 
+import "@carbon/ai-chat-components/es-custom/globals/settings.js";
+
 import "@carbon/icons/es/screen--off/16.js";
 
 import "@carbon/icons/es/user--avatar/32.js";
@@ -128,8 +130,6 @@ import "@carbon/ai-chat-components/es-custom/react/feedback-buttons.js";
 
 import "@carbon/ai-chat-components/es-custom/react/feedback.js";
 
-import "@carbon/ai-chat-components/es-custom/globals/settings.js";
-
 import "@carbon/icons/es/checkmark/16.js";
 
 import "@carbon/icons/es/headset/16.js";
@@ -218,12 +218,12 @@ import "lit/decorators.js";
 
 import "@carbon/ai-chat-components/es-custom/react/panel.js";
 
-import "@carbon/icons/es/chevron--down/20.js";
-
-import "@carbon/icons/es/close--large/20.js";
+import "@carbon/icons/es/chevron--left/16.js";
 
 import "@carbon/ai-chat-components/es-custom/react/toolbar.js";
 
+import "@carbon/web-components/es-custom/components/icon-button/icon-button.js";
+
 import "@carbon/web-components/es-custom/components/chat-button/chat-button.js";
 
 function readCarbonChatSession(namespace) {

package/dist/es-custom/chat.ChatAppEntry.js

@@ -76,6 +76,8 @@ import throttle from "lodash-es/throttle.js";
 
 import DownToBottom16 from "@carbon/icons/es/down-to-bottom/16.js";
 
+import prefix from "@carbon/ai-chat-components/es-custom/globals/settings.js";
+
 import ScreenOff16 from "@carbon/icons/es/screen--off/16.js";
 
 import UserAvatar32 from "@carbon/icons/es/user--avatar/32.js";
@@ -112,8 +114,6 @@ import FeedbackButtons from "@carbon/ai-chat-components/es-custom/react/feedback
 
 import Feedback from "@carbon/ai-chat-components/es-custom/react/feedback.js";
 
-import prefix from "@carbon/ai-chat-components/es-custom/globals/settings.js";
-
 import Checkmark16 from "@carbon/icons/es/checkmark/16.js";
 
 import Headset16 from "@carbon/icons/es/headset/16.js";
@@ -208,12 +208,12 @@ import { property } from "lit/decorators.js";
 
 import ChatPanel from "@carbon/ai-chat-components/es-custom/react/panel.js";
 
-import ChevronDown20 from "@carbon/icons/es/chevron--down/20.js";
-
-import CloseLarge20 from "@carbon/icons/es/close--large/20.js";
+import ChevronLeft16 from "@carbon/icons/es/chevron--left/16.js";
 
 import Toolbar from "@carbon/ai-chat-components/es-custom/react/toolbar.js";
 
+import CarbonIconButtonElement from "@carbon/web-components/es-custom/components/icon-button/icon-button.js";
+
 import CarbonChatButtonElement, { CHAT_BUTTON_SIZE as CHAT_BUTTON_SIZE$1, CHAT_BUTTON_KIND as CHAT_BUTTON_KIND$1 } from "@carbon/web-components/es-custom/components/chat-button/chat-button.js";
 
 const VERSION = "1.15.0";
@@ -2017,7 +2017,9 @@ const DEFAULT_CUSTOM_PANEL_CONFIG_OPTIONS = {
   hideBackButton: false,
   disableAnimation: false,
   fullWidth: false,
-  backButtonType: "minimize"
+  backButtonType: "minimize",
+  showChatHeader: false,
+  openFromSide: false
 };
 
 deepFreeze(DEFAULT_CUSTOM_PANEL_CONFIG_OPTIONS);
@@ -11145,7 +11147,7 @@ const OperationalTag = createComponent({
   react: React
 });
 
-const ChevronDown = carbonIconToReact(ChevronDown16);
+const ChevronDown$1 = carbonIconToReact(ChevronDown16);
 
 const ChevronUp = carbonIconToReact(ChevronUp16);
 
@@ -11191,7 +11193,7 @@ function ConversationalSearchText(props) {
     "aria-label": languagePack.conversationalSearch_toggleCitations
   }, React.createElement("span", {
     slot: "icon"
-  }, citationsOpen ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))))));
+  }, citationsOpen ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown$1, null))))));
 }
 
 function insertHighlightMarkdown(text, highlightCitation) {
@@ -13295,14 +13297,16 @@ class MessagesComponent extends PureComponent {
     });
     this.scheduleAutoScroll = (options = {}, includePublicSpacerReconciliation = false) => {
       requestAnimationFrame(() => {
-        const scrollElement = this.messagesContainerWithScrollingRef.current;
-        if (!scrollElement) {
-          return;
-        }
-        this.executeResolvedAutoScrollAction(options, scrollElement);
-        if (includePublicSpacerReconciliation) {
-          this.reconcileSpacerAfterPublicDoAutoScroll(scrollElement);
-        }
+        void (async () => {
+          const scrollElement = this.messagesContainerWithScrollingRef.current;
+          if (!scrollElement) {
+            return;
+          }
+          await this.executeResolvedAutoScrollAction(options, scrollElement);
+          if (includePublicSpacerReconciliation) {
+            this.reconcileSpacerAfterPublicDoAutoScroll(scrollElement);
+          }
+        })();
       });
     };
     this.doAutoScrollInternal = (options = {}) => {
@@ -13400,7 +13404,10 @@ class MessagesComponent extends PureComponent {
         if (scrollElement && spacerElem && this.pinnedMessageComponent) {
           const maxScrollTop = scrollElement.scrollHeight - scrollElement.clientHeight;
           const wasBrowserCapped = scrollElement.scrollTop >= maxScrollTop - 2 && scrollElement.scrollTop < this.pinnedScrollTop;
-          this.domSpacerHeight = Math.max(0, this.domSpacerHeight - delta);
+          const deltaCompensated = Math.max(0, this.domSpacerHeight - delta);
+          const contentHeightWithoutSpacer = scrollElement.scrollHeight - this.domSpacerHeight;
+          const minSpacerForPin = Math.max(0, this.pinnedScrollTop + scrollElement.clientHeight - contentHeightWithoutSpacer);
+          this.domSpacerHeight = Math.min(deltaCompensated, Math.max(this.domSpacerHeight, minSpacerForPin));
           applySpacerDeficit(spacerElem, this.domSpacerHeight);
           const scrollDelta = Math.abs(scrollElement.scrollTop - this.pinnedScrollTop);
           const hasScrolledAway = scrollDelta > 50;
@@ -13494,6 +13501,20 @@ class MessagesComponent extends PureComponent {
     this.pinnedScrollTop = result.scrollTop;
     debugAutoScroll(`[autoScroll] Pinned message, scrollTop=${result.scrollTop}, spacer=${result.currentSpacerHeight}px`);
   }
+  async waitForMessageComponentLayout(messageComponent) {
+    const targetElem = messageComponent?.ref?.current;
+    if (!targetElem) {
+      return;
+    }
+    const markdownElement = targetElem.querySelector(`${prefix}-markdown`);
+    if (!markdownElement) {
+      return;
+    }
+    await (markdownElement.updateComplete?.catch(() => undefined));
+    await new Promise(resolve => {
+      requestAnimationFrame(() => resolve());
+    });
+  }
   executeRecalculateSpacer(scrollElement) {
     const result = recalculatePinnedMessageSpacer({
       pinnedMessageComponent: this.pinnedMessageComponent,
@@ -13505,7 +13526,7 @@ class MessagesComponent extends PureComponent {
     }
     this.domSpacerHeight = result.deficit;
   }
-  executeResolvedAutoScrollAction(options, scrollElement) {
+  async executeResolvedAutoScrollAction(options, scrollElement) {
     const action = resolveAutoScrollAction({
       allMessagesByID: this.props.allMessagesByID,
       localMessageItems: this.props.localMessageItems,
@@ -13532,6 +13553,10 @@ class MessagesComponent extends PureComponent {
       return;
 
      case "pin_message":
+      await this.waitForMessageComponentLayout(action.messageComponent);
+      if (!scrollElement.isConnected) {
+        return;
+      }
       this.executePinAndScroll(action.messageComponent, scrollElement);
       return;
 
@@ -14728,20 +14753,76 @@ function RequestScreenShareModal() {
   });
 }
 
-function PanelHeader({title, showBackButton = true, labelBackButton, backButtonType = "minimize", onClickBack}) {
-  const toolbarActions = useMemo(() => showBackButton ? [ {
-    text: labelBackButton ?? "",
-    icon: backButtonType === "close" ? CloseLarge20 : ChevronDown20,
-    size: "md",
-    onClick: () => onClickBack?.()
-  } ] : [], [ backButtonType, labelBackButton, onClickBack, showBackButton ]);
+const IconButton = createComponent({
+  tagName: "cds-custom-icon-button",
+  elementClass: CarbonIconButtonElement,
+  react: React
+});
+
+const ChevronDown = carbonIconToReact(ChevronDown16);
+
+const ChevronLeft = carbonIconToReact(ChevronLeft16);
+
+const CloseLarge = carbonIconToReact(CloseLarge16);
+
+function PanelHeader({title, openFromSide, showBackButton = true, labelBackButton, backButtonType = "minimize", backButtonPosition = "end", onClickBack}) {
+  const {backButtonIcon, BackButtonIcon} = useMemo(() => {
+    const icons = {
+      close: {
+        iconDescriptor: CloseLarge16,
+        IconComponent: CloseLarge
+      },
+      side: {
+        iconDescriptor: ChevronLeft16,
+        IconComponent: ChevronLeft
+      },
+      down: {
+        iconDescriptor: ChevronDown16,
+        IconComponent: ChevronDown
+      }
+    };
+    const iconKey = backButtonType === "close" ? "close" : openFromSide ? "side" : "down";
+    const selected = icons[iconKey];
+    return {
+      backButtonIcon: selected.iconDescriptor,
+      BackButtonIcon: selected.IconComponent
+    };
+  }, [ backButtonType, openFromSide ]);
+  const toolbarActions = useMemo(() => {
+    if (!showBackButton || backButtonPosition === "start") {
+      return [];
+    }
+    return [ {
+      text: labelBackButton ?? "",
+      icon: backButtonIcon,
+      size: "md",
+      onClick: () => onClickBack?.()
+    } ];
+  }, [ labelBackButton, onClickBack, showBackButton, backButtonPosition, backButtonIcon ]);
+  const tooltipAlign = isDirectionRTL() ? "bottom-end" : "bottom-start";
   return React.createElement("div", {
     "data-floating-menu-container": true
   }, React.createElement(Toolbar, {
     actions: toolbarActions
   }, React.createElement("div", {
     slot: "title"
-  }, title)));
+  }, title && React.createElement(MarkdownWithDefaultsExport, {
+    text: title
+  })), showBackButton && backButtonPosition === "start" && React.createElement("div", {
+    slot: "navigation"
+  }, React.createElement(IconButton, {
+    "data-rounded": "top-left",
+    size: "md",
+    kind: BUTTON_KIND.GHOST,
+    align: tooltipAlign,
+    enterDelayMs: 0,
+    leaveDelayMs: 0,
+    onClick: () => onClickBack?.()
+  }, React.createElement(BackButtonIcon, {
+    slot: "icon"
+  }), labelBackButton && React.createElement("span", {
+    slot: "tooltip-content"
+  }, labelBackButton)))));
 }
 
 const HydrationPanel = ({isHydrated, languagePack}) => React.createElement("div", {
@@ -15522,9 +15603,10 @@ const AppShellPanels = React.memo(function AppShellPanels({serviceManager, langu
     fullWidth: "fullWidth" in customPanelState.options && customPanelState.options.fullWidth ? true : false,
     showFrame: "showFrame" in customPanelState.options && customPanelState.options.showFrame ? true : false,
     aiEnabled: "aiEnabled" in customPanelState.options && customPanelState.options.aiEnabled ? true : false,
-    showChatHeader: !isLegacyCustomPanel,
-    animationOnOpen: customPanelState.options.disableAnimation ? "none" : "slide-in-from-bottom",
-    animationOnClose: customPanelState.options.disableAnimation ? "none" : "slide-out-to-bottom",
+    showChatHeader: !isLegacyCustomPanel && "showChatHeader" in customPanelState.options && customPanelState.options.showChatHeader ? true : false,
+    animationOnOpen: customPanelState.options.disableAnimation ? "none" : "openFromSide" in customPanelState.options && customPanelState.options.openFromSide ? "slide-in-from-start" : "slide-in-from-bottom",
+    animationOnClose: customPanelState.options.disableAnimation ? "none" : "openFromSide" in customPanelState.options && customPanelState.options.openFromSide ? "slide-out-to-start" : "slide-out-to-bottom",
+    openFromSide: "openFromSide" in customPanelState.options && customPanelState.options.openFromSide ? true : false,
     onOpenStart: () => {
       serviceManager.eventBus.fire({
         type: BusEventType.CUSTOM_PANEL_PRE_OPEN
@@ -15576,6 +15658,8 @@ const AppShellPanels = React.memo(function AppShellPanels({serviceManager, langu
       title: panelTitle,
       labelBackButton: languagePack.general_returnToAssistant,
       backButtonType: "backButtonType" in customPanelState.options ? customPanelState.options.backButtonType : undefined,
+      backButtonPosition: "backButtonPosition" in customPanelState.options ? customPanelState.options.backButtonPosition : undefined,
+      openFromSide: "openFromSide" in customPanelState.options && customPanelState.options.openFromSide,
       onClickBack: () => {
         serviceManager.store.dispatch(actions.setCustomPanelOpen(false));
         "onClickBack" in customPanelState.options && customPanelState.options.onClickBack?.();