@carbon/ai-chat 0.4.0-rc.2 → 0.4.0-rc.4

package/dist/es/chat.MessageTypeComponent.js

@@ -0,0 +1,3580 @@
+import React, { useState, useCallback, Suspense, useMemo, useContext, useRef, useLayoutEffect, useEffect, Component } from "react";
+
+import { e as isElement, h as isInputNode, j as isTextAreaNode, k as isImageNode, l as isTextNode, u as useServiceManager, b as usePrevious, m as doScrollElementIntoView } from "./chat.usePrevious.js";
+
+import { c as addHTMLSupport, V as VisuallyHidden, e as enLanguagePack, M as MediaPlayerExport, I as ImageExport, S as SkeletonPlaceholder, d as loadDayjsLocale, u as useDynamicCSSProperties, g as createEnglishFormat, a as VideoComponentExport } from "./chat.VideoComponent.js";
+
+import Attachment from "@carbon/icons-react/es/Attachment.js";
+
+import { FormattedMessage, useIntl } from "react-intl";
+
+import { useSelector, shallowEqual } from "react-redux";
+
+import { c as carbonElement, B as BusEventType, M as MessageSendSource, a as TourStartReason, d as MainWindowCloseReason, F as FeedbackInteractionType } from "./chat.customElement.js";
+
+import { createComponent } from "@lit/react";
+
+import { __decorate } from "tslib";
+
+import { LitElement, unsafeCSS, css, nothing, html, render } from "lit";
+
+import { property, state } from "lit/decorators.js";
+
+import "@carbon/web-components/es-custom/components/textarea/index.js";
+
+import "@carbon/web-components/es-custom/components/icon-button/index.js";
+
+import { toString } from "@carbon/icon-helpers";
+
+import ThumbsDown16 from "@carbon/icons/es/thumbs-down/16.js";
+
+import ThumbsDownFilled16 from "@carbon/icons/es/thumbs-down--filled/16.js";
+
+import ThumbsUp16 from "@carbon/icons/es/thumbs-up/16.js";
+
+import ThumbsUpFilled16 from "@carbon/icons/es/thumbs-up--filled/16.js";
+
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+
+import { b as CSS_CLASS_PREFIX, W as WEB_COMPONENT_PREFIX, C as ConfirmModal, u as useUUID } from "./chat.Header.js";
+
+import { k as lazyCarousel, V as ViewType } from "./chat.dynamic-imports.js";
+
+import "@carbon/web-components/es-custom/components/tag/index.js";
+
+import "@carbon/web-components/es-custom/components/chat-button/index.js";
+
+import CDSButton from "@carbon/web-components/es-custom/components/button/button.js";
+
+import { bind } from "bind-decorator";
+
+import "@carbon/web-components/es-custom/components/button/index.js";
+
+import "@carbon/web-components/es-custom/components/layer/index.js";
+
+import cx from "classnames";
+
+import { u as useLanguagePack } from "./chat.AppState.js";
+
+import { v as hasServiceDesk, D as createMessageRequestForButtonItemOption, E as createMessageRequestForDate, g as getMediaDimensions, C as createMessageRequestForChoice, F as getOptionType, a as isRequest, b as isResponse, G as isTextItem, H as renderAsTour, r as renderAsUserDefinedMessage } from "./chat.messageUtils.js";
+
+import Checkmark from "@carbon/icons-react/es/Checkmark.js";
+
+import Headset from "@carbon/icons-react/es/Headset.js";
+
+import HelpDesk from "@carbon/icons-react/es/HelpDesk.js";
+
+import Logout from "@carbon/icons-react/es/Logout.js";
+
+import { Tile, Button, Link, OperationalTag, Layer, DatePicker, DatePickerInput, Dropdown, unstable__ChatButton, Theme } from "@carbon/react";
+
+import { A as AgentsOnlineStatus } from "./chat.LocalMessageItem.js";
+
+import { R as RichTextExport, g as getMarkdownWorker, r as renderTokenTree, M as MarkdownText } from "./chat.RichText.js";
+
+import { b as MessageResponseTypes, B as ButtonItemKind, a as ButtonItemType, W as WidthOptions, I as IFrameItemDisplayOption, C as ChainOfThoughtStepStatus, c as InternalMessageRequestType } from "./chat.Messages.js";
+
+import TouchInteraction from "@carbon/icons-react/es/TouchInteraction.js";
+
+import Send from "@carbon/icons-react/es/Send.js";
+
+import { a as actions } from "./chat.actions.js";
+
+import { W as WA_CONSOLE_PREFIX, R as RIGHT_TO_LEFT_MARK, E as ENGLISH_US_DATE_FORMAT, T as THROW_ERROR, L as LIGHT_THEMES } from "./chat.constants.js";
+
+import { b as consoleError, o as getResponsiveElementPaddingValue } from "./chat.miscUtils.js";
+
+import ArrowRight from "@carbon/icons-react/es/ArrowRight.js";
+
+import Launch from "@carbon/icons-react/es/Launch.js";
+
+import { B as BodyWithFooterComponent } from "./chat.BodyWithFooterComponent.js";
+
+import debounce from "lodash-es/debounce.js";
+
+import { I as InlineError, u as useAriaAnnouncer } from "./chat.MountChildrenOnDelay.js";
+
+import Link$1 from "@carbon/icons-react/es/Link.js";
+
+import Maximize from "@carbon/icons-react/es/Maximize.js";
+
+import { i as isValidURL, s as sanitizeHTML } from "./chat.htmlUtils.js";
+
+import ChevronDown from "@carbon/icons-react/es/ChevronDown.js";
+
+import ChevronUp from "@carbon/icons-react/es/ChevronUp.js";
+
+import { u as useCounter } from "./chat.useCounter.js";
+
+import dayjs from "dayjs";
+
+import { u as useOnMount } from "./chat.useOnMount.js";
+
+import { u as uuid, U as UUIDType } from "./chat.uuid.js";
+
+import { a as selectInputState, s as selectAgentDisplayState } from "./chat.selectors.js";
+
+import { g as getURLHostName } from "./chat.browserUtils.js";
+
+import { I as IFrameComponent } from "./chat.IFrameComponent.js";
+
+import { B as ButtonSizeEnum, a as ButtonKindEnum } from "./chat.carbonTypes.js";
+
+import { stringify } from "csv-stringify/browser/esm/sync";
+
+import "@carbon/web-components/es-custom/components/data-table/index.js";
+
+import "@carbon/web-components/es-custom/components/checkbox/index.js";
+
+import Download16 from "@carbon/icons/es/download/16.js";
+
+import { repeat } from "lit-html/directives/repeat.js";
+
+import "@carbon/web-components/es-custom/components/pagination/index.js";
+
+import "@carbon/web-components/es-custom/components/select/index.js";
+
+import "@carbon/web-components/es-custom/components/data-table/table-skeleton.js";
+
+import Restart from "@carbon/icons-react/es/Restart.js";
+
+import "@carbon/web-components/es-custom/components/inline-loading/index.js";
+
+import CheckmarkFilled16 from "@carbon/icons/es/checkmark--filled/16.js";
+
+import ChevronRight16 from "@carbon/icons/es/chevron--right/16.js";
+
+import ErrorFilled16 from "@carbon/icons/es/error--filled/16.js";
+
+import { p as parseUnknownDataToMarkdown } from "./chat.stringUtils.js";
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function isNil(value) {
+  return value === undefined || value === null;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function AvailabilityMessage({availability: availability, fallbackText: fallbackText}) {
+  let availabilityKey;
+  let availabilityValues;
+  let availabilityText;
+  if (!isNil(availability?.estimated_wait_time)) {
+    availabilityKey = "agent_connectingMinutes";
+    availabilityValues = {
+      time: availability.estimated_wait_time
+    };
+  } else if (!isNil(availability?.position_in_queue)) {
+    availabilityKey = "agent_connectingQueue";
+    availabilityValues = {
+      position: availability.position_in_queue
+    };
+  } else if (availability?.message) {
+    availabilityText = availability.message;
+  } else {
+    availabilityText = fallbackText;
+  }
+  if (availabilityText) {
+    return React.createElement(RichTextExport, {
+      overrideSanitize: true,
+      text: availabilityText
+    });
+  }
+  return React.createElement(FormattedMessage, {
+    id: availabilityKey,
+    values: addHTMLSupport(availabilityValues)
+  });
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const ANNOUNCE_INPUT_TYPES = new Set([ "button", "date", "datetime-local", "email", "file", "month", "number", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week" ]);
+
+const ANNOUNCE_NODE_EXCLUDE_ATTRIBUTE = "data-wac-exclude-node-read";
+
+class AriaAnnouncerComponent extends React.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.ref1 = React.createRef();
+    this.ref2 = React.createRef();
+    this.useRef1 = true;
+    this.doAnnouncements = () => {
+      const strings = [];
+      this.pendingValues.forEach(elementToAnnounce => {
+        if (typeof elementToAnnounce === "string") {
+          strings.push(elementToAnnounce);
+        } else {
+          nodeToText(elementToAnnounce, strings);
+        }
+      });
+      const useElement = this.useRef1 ? this.ref1.current : this.ref2.current;
+      if (useElement) {
+        useElement.innerText = strings.join(" ");
+        const clearElement = this.useRef1 ? this.ref2.current : this.ref1.current;
+        clearElement.innerHTML = "";
+      }
+      this.useRef1 = !this.useRef1;
+      this.pendingValues = null;
+    };
+  }
+  announceValue(value) {
+    if (!value) {
+      return;
+    }
+    if (!this.pendingValues) {
+      this.pendingValues = [];
+      setTimeout(this.doAnnouncements, 250);
+    }
+    if (typeof value === "string" || hasNodeType(value)) {
+      this.pendingValues.push(value);
+    } else if (value.messageID) {
+      const formattedMessage = this.props.intl.formatMessage({
+        id: value.messageID
+      }, value.messageValues);
+      this.pendingValues.push(formattedMessage);
+    } else {
+      this.pendingValues.push(value.messageText);
+    }
+  }
+  render() {
+    return React.createElement(VisuallyHidden, {
+      className: "WACAriaAnnouncer"
+    }, React.createElement("div", {
+      ref: this.ref1,
+      "aria-live": "polite"
+    }), React.createElement("div", {
+      ref: this.ref2,
+      "aria-live": "polite"
+    }));
+  }
+}
+
+function nodeToText(node, strings) {
+  if (isElement(node)) {
+    if (window.getComputedStyle(node).display !== "none" && node.getAttribute("aria-hidden") !== "true" && !node.hasAttribute(ANNOUNCE_NODE_EXCLUDE_ATTRIBUTE)) {
+      trimAndPush(node.getAttribute("aria-label"), strings);
+      if (isInputNode(node) && ANNOUNCE_INPUT_TYPES.has(node.type.toLowerCase())) {
+        if (node.value === "") {
+          trimAndPush(node.placeholder, strings);
+        } else {
+          trimAndPush(node.value, strings);
+        }
+      } else if (isTextAreaNode(node)) {
+        if (node.value === "") {
+          trimAndPush(node.placeholder, strings);
+        }
+      } else if (isImageNode(node)) {
+        trimAndPush(node.alt, strings);
+      }
+      if (node.shadowRoot) {
+        node.shadowRoot.childNodes?.forEach(childNode => {
+          nodeToText(childNode, strings);
+        });
+      }
+      if (node.childNodes) {
+        node.childNodes.forEach(childNode => {
+          nodeToText(childNode, strings);
+        });
+      }
+    }
+  } else if (isTextNode(node)) {
+    trimAndPush(node.data, strings);
+  }
+}
+
+function trimAndPush(value, strings) {
+  if (value) {
+    value = value.trim();
+    if (value) {
+      strings.push(value.replaceAll("\n", " "));
+    }
+  }
+}
+
+function hasNodeType(value) {
+  return value.nodeType !== undefined;
+}
+
+var css_248z$4 = ".cds--aichat-feedback-buttons{\n  display:flex;\n  margin-block-start:0.5rem;\n}";
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ class FeedbackButtonsElement extends LitElement {}
+
+FeedbackButtonsElement.styles = css`
+    ${unsafeCSS(css_248z$4)}
+  `;
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "is-positive-open",
+  reflect: true
+}) ], FeedbackButtonsElement.prototype, "isPositiveOpen", void 0);
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "is-negative-open",
+  reflect: true
+}) ], FeedbackButtonsElement.prototype, "isNegativeOpen", void 0);
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "is-positive-selected",
+  reflect: true
+}) ], FeedbackButtonsElement.prototype, "isPositiveSelected", void 0);
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "has-positive-details",
+  reflect: true
+}) ], FeedbackButtonsElement.prototype, "hasPositiveDetails", void 0);
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "has-negative-details",
+  reflect: true
+}) ], FeedbackButtonsElement.prototype, "hasNegativeDetails", void 0);
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "is-negative-selected",
+  reflect: true
+}) ], FeedbackButtonsElement.prototype, "isNegativeSelected", void 0);
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "is-positive-disabled",
+  reflect: true
+}) ], FeedbackButtonsElement.prototype, "isPositiveDisabled", void 0);
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "is-negative-disabled",
+  reflect: true
+}) ], FeedbackButtonsElement.prototype, "isNegativeDisabled", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "positive-label",
+  reflect: true
+}) ], FeedbackButtonsElement.prototype, "positiveLabel", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "negative-label",
+  reflect: true
+}) ], FeedbackButtonsElement.prototype, "negativeLabel", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "panel-id",
+  reflect: true
+}) ], FeedbackButtonsElement.prototype, "panelID", void 0);
+
+__decorate([ property({
+  type: Object,
+  attribute: "on-click"
+}) ], FeedbackButtonsElement.prototype, "onClick", void 0);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const ThumbsDown16svg = toString(ThumbsDown16);
+
+const ThumbsDownFilled16svg = toString(ThumbsDownFilled16);
+
+const ThumbsUp16svg = toString(ThumbsUp16);
+
+const ThumbsUpFilled16svg = toString(ThumbsUpFilled16);
+
+function feedbackButtonsElementTemplate(customElementClass) {
+  const {isPositiveOpen: isPositiveOpen, isNegativeOpen: isNegativeOpen, isPositiveSelected: isPositiveSelected, isNegativeSelected: isNegativeSelected, hasPositiveDetails: hasPositiveDetails, hasNegativeDetails: hasNegativeDetails, isPositiveDisabled: isPositiveDisabled, isNegativeDisabled: isNegativeDisabled, positiveLabel: positiveLabel, negativeLabel: negativeLabel, panelID: panelID, onClick: onClick} = customElementClass;
+  return html`<div class="${CSS_CLASS_PREFIX}-feedback-buttons">
+    <cds-custom-icon-button
+      class="${CSS_CLASS_PREFIX}-feedback-buttons-positive"
+      size="sm"
+      align="top-left"
+      kind="ghost"
+      role="button"
+      disabled="${isPositiveDisabled || nothing}"
+      aria-expanded="${isPositiveDisabled || !hasPositiveDetails ? nothing : isPositiveOpen}"
+      aria-pressed="${isPositiveSelected || nothing}"
+      aria-controls="${panelID}-feedback-positive"
+      @click="${() => onClick(true)}"
+    >
+      <span slot="icon"
+        >${unsafeSVG(isPositiveSelected ? ThumbsUpFilled16svg : ThumbsUp16svg)}</span
+      >
+      <span slot="tooltip-content"
+        >${positiveLabel || enLanguagePack.feedback_positiveLabel}</span
+      >
+    </cds-custom-icon-button>
+    <cds-custom-icon-button
+      class="${CSS_CLASS_PREFIX}-feedback-buttons-negative"
+      size="sm"
+      align="top-left"
+      kind="ghost"
+      role="button"
+      disabled="${isNegativeDisabled || nothing}"
+      aria-expanded="${isNegativeDisabled || !hasNegativeDetails ? nothing : isNegativeOpen}"
+      aria-pressed="${isNegativeSelected || nothing}"
+      aria-controls="${panelID}-feedback-positive"
+      @click="${() => onClick(false)}"
+    >
+      <span slot="icon"
+        >${unsafeSVG(isNegativeSelected ? ThumbsDownFilled16svg : ThumbsDown16svg)}</span
+      >
+      <span slot="tooltip-content"
+        >${negativeLabel || enLanguagePack.feedback_negativeLabel}</span
+      >
+    </cds-custom-icon-button>
+  </div>`;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const FEEDBACK_BUTTONS_COMPONENT_TAG_NAME = `cds-aichat-feedback-buttons`;
+
+let CDSChatFeedbackButtonsElement = class CDSChatFeedbackButtonsElement extends FeedbackButtonsElement {
+  render() {
+    return feedbackButtonsElementTemplate(this);
+  }
+};
+
+CDSChatFeedbackButtonsElement = __decorate([ carbonElement(FEEDBACK_BUTTONS_COMPONENT_TAG_NAME) ], CDSChatFeedbackButtonsElement);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const FeedbackButtonsComponent = createComponent({
+  tagName: FEEDBACK_BUTTONS_COMPONENT_TAG_NAME,
+  elementClass: CDSChatFeedbackButtonsElement,
+  react: React
+});
+
+var css_248z$3 = ".cds--aichat-tag-list-container{\n  display:flex;\n  flex-wrap:wrap;\n  align-items:center;\n  padding:0;\n  margin:0;\n  gap:0.5rem;\n  list-style:none;\n}\n\n.cds--aichat-tag-list-item{\n  box-sizing:border-box;\n  padding:0.125rem;\n  animation:fade-in 600ms forwards;\n  font-size:var(--cds-chat-BASE-font-size-small);\n  opacity:0;\n}\n\n@keyframes fade-in{\n  from{\n    opacity:0;\n  }\n  to{\n    opacity:1;\n  }\n}";
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ class TagListElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.selectedTags = new Set;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("initialSelectedTags")) {
+      this._setInitialValues(this.initialSelectedTags);
+    }
+  }
+  _setInitialValues(values) {
+    if (values) {
+      this.selectedTags = new Set(this.initialSelectedTags);
+    }
+  }
+  _handleTagClick(event) {
+    const tagValue = event.target.getAttribute("data-content");
+    const isSelected = this.selectedTags.has(tagValue);
+    if (isSelected) {
+      this.selectedTags.delete(tagValue);
+    } else {
+      this.selectedTags.add(tagValue);
+    }
+    this.onTagsChanged?.(Array.from(this.selectedTags));
+    this.requestUpdate();
+  }
+}
+
+TagListElement.styles = css`
+    ${unsafeCSS(css_248z$3)}
+  `;
+
+__decorate([ property({
+  type: Array,
+  attribute: "tags"
+}) ], TagListElement.prototype, "tags", void 0);
+
+__decorate([ property({
+  type: Array,
+  attribute: "initial-selected-tags"
+}) ], TagListElement.prototype, "initialSelectedTags", void 0);
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "multi-select"
+}) ], TagListElement.prototype, "multiSelect", void 0);
+
+__decorate([ property({
+  type: Object,
+  attribute: "on-tags-changed"
+}) ], TagListElement.prototype, "onTagsChanged", void 0);
+
+__decorate([ state() ], TagListElement.prototype, "selectedTags", void 0);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function tagListElementTemplate(customElementClass) {
+  const {selectedTags: selectedTags, tags: tags, _handleTagClick: handleTagClick} = customElementClass;
+  return html`<div class="${CSS_CLASS_PREFIX}-tag-list">
+    ${html`<ul class="${CSS_CLASS_PREFIX}-tag-list-container">
+      ${tags.map(value => html`<li class="${CSS_CLASS_PREFIX}-tag-list-item}">
+            <cds-custom-chat-button
+              class="${CSS_CLASS_PREFIX}-tag-list-button"
+              kind="primary"
+              size="sm"
+              type="button"
+              is-quick-action
+              role="option"
+              aria-pressed="${selectedTags.has(value)}"
+              ?is-selected="${selectedTags.has(value)}"
+              data-content="${value}"
+              @click="${handleTagClick}"
+            >
+              ${value}
+            </cds-custom-chat-button>
+          </li>`)}
+    </div>`}
+  </div>`;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const TAG_LIST_TAG_NAME = `${WEB_COMPONENT_PREFIX}-tag-list`;
+
+let CDSTagListElement = class CDSTagListElement extends TagListElement {
+  render() {
+    return tagListElementTemplate(this);
+  }
+};
+
+CDSTagListElement = __decorate([ carbonElement(TAG_LIST_TAG_NAME) ], CDSTagListElement);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const ROUNDED_BUTTON_TAG_NAME = `cds-aichat-rounded-button`;
+
+const styles = `\n  .cds-custom--btn {\n    border-start-start-radius: var(--${ROUNDED_BUTTON_TAG_NAME}-top-left);\n    border-start-end-radius: var(--${ROUNDED_BUTTON_TAG_NAME}-top-right);\n    border-end-start-radius: var(--${ROUNDED_BUTTON_TAG_NAME}-bottom-left);\n    border-end-end-radius: var(--${ROUNDED_BUTTON_TAG_NAME}-bottom-right);\n    width: var(--${ROUNDED_BUTTON_TAG_NAME}-width);\n    max-width: var(--${ROUNDED_BUTTON_TAG_NAME}-max-width);\n  }`;
+
+let CDSRoundedButtonElement = class CDSRoundedButtonElement extends CDSButton {};
+
+CDSRoundedButtonElement.styles = css`
+    ${CDSButton.styles}
+    ${unsafeCSS(styles)}
+  `;
+
+CDSRoundedButtonElement = __decorate([ carbonElement(ROUNDED_BUTTON_TAG_NAME) ], CDSRoundedButtonElement);
+
+var css_248z$2 = ".cds--aichat-container{\n  box-sizing:border-box;\n  border:1px solid var(--cds-chat-bubble-border, #e0e0e0);\n  border-radius:var(--cds-chat-BASE-border-radius-med);\n  animation:fade-in 600ms forwards;\n  background-color:var(--cds-chat-shell-background, #ffffff);\n  container-type:inline-size;\n  inline-size:100%;\n  margin-block-start:0.25rem;\n}\n\n.cds--aichat-is-closed{\n  display:none;\n}\n\n.cds--aichat-title-row{\n  display:flex;\n  margin-block-start:0.75rem;\n  margin-inline:1rem 0.5rem;\n}\n\n.cds--aichat-title{\n  flex:1;\n  font-size:var(--cds-chat-BASE-font-size-xlarge);\n  line-height:var(--cds-chat-BASE-line-height-xlarge);\n}\n\n.cds--aichat-close{\n  margin-inline-start:0.5rem;\n}\n\n.cds--aichat-disclaimer,\n.cds--aichat-prompt{\n  color:var(--cds-text-secondary, #525252);\n  font-size:var(--cds-chat-BASE-font-size-small);\n  line-height:var(--cds-chat-BASE-line-height-small);\n  margin-block-start:0.5rem;\n  margin-inline:1rem;\n}\n\n.cds--aichat-categories{\n  margin-block-start:0.5rem;\n  margin-inline:1rem;\n}\n\n.cds--aichat-feedback-text{\n  margin-block-start:0.5rem;\n  margin-inline:1rem;\n}\n\n.cds--aichat-buttons{\n  display:flex;\n  inline-size:100%;\n  margin-block-start:1rem;\n}\n\n.cds--aichat-submit{\n  flex:1;\n  --cds-aichat-rounded-button-bottom-right:var(\n    --cds-chat-BASE-border-radius-med\n  );\n  --cds-aichat-rounded-button-width:100%;\n  --cds-aichat-rounded-button-max-width:100%;\n}\n\n.cds--aichat-cancel{\n  flex:1;\n  --cds-aichat-rounded-button-bottom-left:var(\n    --cds-chat-BASE-border-radius-med\n  );\n  --cds-aichat-rounded-button-width:100%;\n  --cds-aichat-rounded-button-max-width:100%;\n}\n\n@keyframes fade-in{\n  from{\n    opacity:0;\n  }\n  to{\n    opacity:1;\n  }\n}";
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ class FeedbackElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.showTextArea = true;
+    this.showPrompt = true;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("initialValues")) {
+      this._setInitialValues(this.initialValues);
+    }
+  }
+  _setInitialValues(values) {
+    if (values) {
+      this._textInput = values.text;
+      this._initialSelectedCategories = values.selectedCategories;
+    }
+  }
+  _handleTextInput(event) {
+    this._textInput = event.currentTarget.value;
+  }
+  _handleSubmit() {
+    this.onSubmit?.({
+      text: this._textInput,
+      selectedCategories: this._selectedCategories
+    });
+  }
+  _handleCancel() {
+    this.onClose?.();
+  }
+  _handleCategoryChange(selectedCategories) {
+    this._selectedCategories = selectedCategories;
+  }
+}
+
+FeedbackElement.styles = css`
+    ${unsafeCSS(css_248z$2)}
+  `;
+
+__decorate([ property({
+  type: String,
+  attribute: "class",
+  reflect: true
+}) ], FeedbackElement.prototype, "class", void 0);
+
+__decorate([ property({
+  type: String,
+  reflect: true
+}) ], FeedbackElement.prototype, "id", void 0);
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "is-open",
+  reflect: true
+}) ], FeedbackElement.prototype, "isOpen", void 0);
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "is-readonly",
+  reflect: true
+}) ], FeedbackElement.prototype, "isReadonly", void 0);
+
+__decorate([ property({
+  type: Object,
+  attribute: "on-close"
+}) ], FeedbackElement.prototype, "onClose", void 0);
+
+__decorate([ property({
+  type: Object,
+  attribute: "on-submit"
+}) ], FeedbackElement.prototype, "onSubmit", void 0);
+
+__decorate([ property({
+  type: Object,
+  attribute: "initial-values",
+  reflect: true
+}) ], FeedbackElement.prototype, "initialValues", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "title",
+  reflect: true
+}) ], FeedbackElement.prototype, "title", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "prompt",
+  reflect: true
+}) ], FeedbackElement.prototype, "prompt", void 0);
+
+__decorate([ property({
+  type: Object,
+  attribute: "categories",
+  reflect: true
+}) ], FeedbackElement.prototype, "categories", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "disclaimer",
+  reflect: true
+}) ], FeedbackElement.prototype, "disclaimer", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "text-area-placeholder",
+  reflect: true
+}) ], FeedbackElement.prototype, "placeholder", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "cancel-label",
+  reflect: true
+}) ], FeedbackElement.prototype, "cancelLabel", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "submit-label",
+  reflect: true
+}) ], FeedbackElement.prototype, "submitLabel", void 0);
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "show-text-area",
+  reflect: true
+}) ], FeedbackElement.prototype, "showTextArea", void 0);
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "show-prompt",
+  reflect: true
+}) ], FeedbackElement.prototype, "showPrompt", void 0);
+
+__decorate([ state() ], FeedbackElement.prototype, "_textInput", void 0);
+
+__decorate([ state() ], FeedbackElement.prototype, "_initialSelectedCategories", void 0);
+
+__decorate([ state() ], FeedbackElement.prototype, "_selectedCategories", void 0);
+
+__decorate([ bind ], FeedbackElement.prototype, "_handleCategoryChange", null);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const MAX_TEXT_COUNT = 1e3;
+
+function feedbackElementTemplate(customElementClass) {
+  const {_handleCancel: handleCancel, _handleSubmit: handleSubmit, _handleTextInput: handleTextInput, _initialSelectedCategories: initialSelectedCategories, _textInput: textInput, _handleCategoryChange: handleCategoryChange, id: id, isReadonly: isReadonly, isOpen: isOpen, title: title, prompt: prompt, placeholder: placeholder, categories: categories, disclaimer: disclaimer, showTextArea: showTextArea, showPrompt: showPrompt, submitLabel: submitLabel, cancelLabel: cancelLabel} = customElementClass;
+  return html`<div
+    class="${cx(`${CSS_CLASS_PREFIX}-container`, {
+    [`${CSS_CLASS_PREFIX}-is-closed`]: !isOpen
+  })}"
+  >
+    <div class="${CSS_CLASS_PREFIX}-title-row">
+      <div class="${CSS_CLASS_PREFIX}-title">
+        ${title || enLanguagePack.feedback_defaultTitle}
+      </div>
+    </div>
+    ${showPrompt ? html`<div class="${CSS_CLASS_PREFIX}-prompt">
+          ${prompt || enLanguagePack.feedback_defaultPrompt}
+        </div>` : ""}
+    ${categories?.length ? html`<div class="${CSS_CLASS_PREFIX}-categories">
+          <cds-aichat-tag-list
+            .tags=${categories}
+            .initialSelectedTags=${initialSelectedCategories}
+            .onTagsChanged=${handleCategoryChange}
+          >
+          </cds-aichat-tag-list>
+        </div>` : ""}
+    ${showTextArea ? html`<div class="${CSS_CLASS_PREFIX}-feedback-text">
+          <cds-custom-layer level="1">
+            <cds-custom-textarea
+              id="${id}-text-area"
+              value="${textInput}"
+              class="${CSS_CLASS_PREFIX}-feedback-text-area"
+              ?disabled="${isReadonly}"
+              placeholder="${placeholder || enLanguagePack.feedback_defaultPlaceholder}"
+              rows="3"
+              max-count="${MAX_TEXT_COUNT}"
+              @input=${handleTextInput}
+            ></cds-custom-textarea>
+          </cds-custom-layer>
+        </div>` : ""}
+    ${disclaimer ? html`<div class="${CSS_CLASS_PREFIX}-disclaimer">
+          <cds-aichat-markdown-text
+            markdown="${disclaimer}"
+          ></cds-aichat-markdown-text>
+        </div>` : ""}
+    <div class="${CSS_CLASS_PREFIX}-buttons">
+      <cds-aichat-rounded-button
+        class="${CSS_CLASS_PREFIX}-cancel"
+        disabled=${isReadonly || nothing}
+        size="lg"
+        kind="secondary"
+        @click=${handleCancel}
+      >
+        ${cancelLabel || enLanguagePack.feedback_cancelLabel}
+      </cds-aichat-rounded-button>
+      <cds-aichat-rounded-button
+        class="${CSS_CLASS_PREFIX}-submit"
+        disabled=${isReadonly || nothing}
+        size="lg"
+        @click=${handleSubmit}
+      >
+        ${submitLabel || enLanguagePack.feedback_submitLabel}
+      </cds-aichat-rounded-button>
+    </div>
+  </div>`;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const FEEDBACK_COMPONENT_TAG_NAME = `cds-aichat-feedback`;
+
+let CDSChatFeedbackElement = class CDSChatFeedbackElement extends FeedbackElement {
+  render() {
+    return feedbackElementTemplate(this);
+  }
+};
+
+CDSChatFeedbackElement = __decorate([ carbonElement(FEEDBACK_COMPONENT_TAG_NAME) ], CDSChatFeedbackElement);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const FeedbackComponent = createComponent({
+  tagName: FEEDBACK_COMPONENT_TAG_NAME,
+  elementClass: CDSChatFeedbackElement,
+  react: React
+});
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ResponseStopped() {
+  const {messages_responseStopped: messages_responseStopped} = useLanguagePack();
+  return React.createElement("div", {
+    className: "WACResponseStopped"
+  }, messages_responseStopped);
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function EndAgentChatModal(props) {
+  const {onConfirm: onConfirm, onCancel: onCancel, title: title, message: message} = props;
+  const languagePack = useLanguagePack();
+  const serviceManager = useServiceManager();
+  const {isConnected: isConnected, isSuspended: isSuspended} = useSelector(state => state.persistedToBrowserStorage.chatState.agentState);
+  const useTitle = title || (isConnected ? languagePack.agent_endChat : languagePack.agent_confirmCancelRequestTitle);
+  const useMessage = message || (isConnected ? languagePack.agent_confirmEndChat : languagePack.agent_confirmCancelRequestMessage);
+  const cancelButtonLabel = languagePack.agent_confirmEndChatNo;
+  let confirmButtonLabel;
+  if (isSuspended) {
+    confirmButtonLabel = languagePack.agent_confirmEndSuspendedYes;
+  } else if (isConnected) {
+    confirmButtonLabel = languagePack.agent_confirmEndChatYes;
+  } else {
+    confirmButtonLabel = languagePack.agent_confirmCancelRequestYes;
+  }
+  return React.createElement(ConfirmModal, {
+    title: useTitle,
+    message: useMessage,
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    cancelButtonLabel: cancelButtonLabel,
+    confirmButtonLabel: confirmButtonLabel,
+    modalAnnounceMessage: useMessage,
+    serviceManager: serviceManager
+  });
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function RealConnectToAgent(props) {
+  const {languagePack: languagePack, localMessage: localMessage, originalMessage: originalMessage, disableUserInputs: disableUserInputs, serviceManager: serviceManager, agentState: agentState, requestFocus: requestFocus, agentDisplayState: agentDisplayState, persistedAgentState: persistedAgentState} = props;
+  const {activeLocalMessageID: activeLocalMessageID, availability: availability, isConnecting: isConnecting} = agentState;
+  const {isSuspended: isSuspended} = persistedAgentState;
+  const [showConfirmSuspended, setShowConfirmSuspended] = useState(false);
+  if (!isSuspended && showConfirmSuspended) {
+    setShowConfirmSuspended(false);
+  }
+  function doStartChat() {
+    if (isSuspended && !showConfirmSuspended) {
+      setShowConfirmSuspended(true);
+    } else {
+      setShowConfirmSuspended(false);
+      serviceManager.humanAgentService.startChat(localMessage, originalMessage);
+      setTimeout(requestFocus);
+    }
+  }
+  const noAgentsWereOnline = originalMessage.history.agent_availability === AgentsOnlineStatus.OFFLINE;
+  if (noAgentsWereOnline) {
+    const agentUnavailableMessage = localMessage.item.agent_unavailable?.message || languagePack.default_agent_unavailableMessage;
+    return React.createElement("div", null, agentUnavailableMessage);
+  }
+  const textFromMessage = localMessage.item.agent_available?.message || languagePack.default_agent_availableMessage;
+  let buttonIcon;
+  let buttonText;
+  let showDisabled = disableUserInputs || agentDisplayState.isConnectingOrConnected;
+  let messageToUser = textFromMessage;
+  if (localMessage.ui_state.id === activeLocalMessageID) {
+    showDisabled = true;
+    if (isConnecting) {
+      buttonIcon = Checkmark;
+      buttonText = languagePack.agent_cardButtonChatRequested;
+      messageToUser = React.createElement(AvailabilityMessage, {
+        availability: availability,
+        fallbackText: languagePack.agent_connectWaiting
+      });
+    } else {
+      buttonIcon = Headset;
+      buttonText = languagePack.agent_cardButtonConnected;
+      messageToUser = languagePack.agent_cardMessageConnected;
+    }
+  } else if (disableUserInputs) {
+    if (localMessage.ui_state.wasAgentChatEnded) {
+      buttonIcon = Logout;
+      buttonText = languagePack.agent_cardButtonChatEnded;
+      messageToUser = languagePack.agent_cardMessageChatEnded;
+    } else {
+      buttonIcon = Headset;
+      buttonText = languagePack.agent_startChat;
+    }
+  } else {
+    buttonIcon = HelpDesk;
+    buttonText = languagePack.agent_startChat;
+  }
+  return React.createElement(Tile, {
+    className: "WACConnectToAgent"
+  }, React.createElement("div", {
+    className: "WACConnectToAgent__Title"
+  }, React.createElement("span", null, languagePack.agent_chatTitle)), React.createElement("div", {
+    className: "WACConnectToAgent__Text"
+  }, messageToUser), React.createElement(Button, {
+    className: "WACConnectToAgent__RequestButton",
+    size: "md",
+    disabled: showDisabled,
+    onClick: doStartChat,
+    renderIcon: buttonIcon
+  }, buttonText), !showDisabled && isSuspended && React.createElement("div", {
+    className: "WACConnectToAgent__SuspendedWarning"
+  }, languagePack.agent_suspendedWarning), showConfirmSuspended && React.createElement(EndAgentChatModal, {
+    title: languagePack.agent_confirmSuspendedEndChatTitle,
+    message: languagePack.agent_confirmSuspendedEndChatMessage,
+    onConfirm: doStartChat,
+    onCancel: () => setShowConfirmSuspended(false)
+  }));
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ConnectToAgent(props) {
+  const {languagePack: languagePack, localMessage: localMessage, originalMessage: originalMessage, config: config, serviceManager: serviceManager, disableUserInputs: disableUserInputs, agentState: agentState, requestFocus: requestFocus, agentDisplayState: agentDisplayState, persistedAgentState: persistedAgentState} = props;
+  const childDisableUserInputs = disableUserInputs || !hasServiceDesk(config);
+  return React.createElement("div", null, React.createElement(RealConnectToAgent, {
+    localMessage: localMessage,
+    originalMessage: originalMessage,
+    languagePack: languagePack,
+    serviceManager: serviceManager,
+    disableUserInputs: childDisableUserInputs,
+    agentState: agentState,
+    persistedAgentState: persistedAgentState,
+    agentDisplayState: agentDisplayState,
+    requestFocus: requestFocus
+  }));
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function AudioComponent({source: source, ...props}) {
+  const isMixCloud = source?.startsWith("https://www.mixcloud.com");
+  return React.createElement(MediaPlayerExport, {
+    type: MessageResponseTypes.AUDIO,
+    source: source,
+    isMixcloud: isMixCloud,
+    ...props
+  });
+}
+
+const AudioComponentExport = React.memo(AudioComponent);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ClickableImage({buttonAltText: buttonAltText, isLink: isLink, target: target, disabled: disabled, onClick: onClick, ...imageProps}) {
+  if (isLink) {
+    return React.createElement("a", {
+      className: "WACClickableImage",
+      href: imageProps.displayURL,
+      rel: "noopener noreferrer",
+      target: target,
+      onClick: onClick
+    }, React.createElement(ImageExport, {
+      ...imageProps
+    }), buttonAltText && React.createElement(VisuallyHidden, null, buttonAltText));
+  }
+  return React.createElement("button", {
+    className: "WACClickableImage",
+    type: "button",
+    onClick: onClick,
+    disabled: disabled
+  }, React.createElement(ImageExport, {
+    ...imageProps
+  }), buttonAltText && React.createElement(VisuallyHidden, null, buttonAltText));
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function BaseButtonItemComponent({className: className, label: label, kind: kind, url: url, target: target = "_blank", disabled: disabled, renderIcon: renderIcon, imageURL: imageURL, altText: altText, onClick: onClick}) {
+  const {errors_imageSource: errors_imageSource} = useLanguagePack();
+  const useAITheme = useSelector(state => state.theme.useAITheme);
+  const text = label || url;
+  const linkTarget = url ? target : undefined;
+  if (imageURL) {
+    return React.createElement(ClickableImage, {
+      imageError: errors_imageSource,
+      source: imageURL,
+      target: target,
+      title: label,
+      displayURL: url,
+      altText: altText,
+      renderIcon: renderIcon,
+      onClick: onClick,
+      disabled: disabled,
+      isLink: Boolean(url),
+      useAITheme: useAITheme
+    });
+  }
+  return React.createElement(Button, {
+    className: cx("WACButtonItem", className),
+    as: url ? "a" : undefined,
+    kind: getButtonKind(kind),
+    href: url,
+    target: linkTarget,
+    rel: url ? "noopener noreferrer" : undefined,
+    disabled: disabled,
+    renderIcon: renderIcon,
+    onClick: onClick
+  }, text);
+}
+
+function getButtonKind(style) {
+  switch (style) {
+   case ButtonItemKind.LINK:
+   case ButtonItemKind.TERTIARY:
+    return "ghost";
+
+   case ButtonItemKind.DEFAULT:
+    return "primary";
+
+   default:
+    return style;
+  }
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ButtonItemCustomEventComponent({localMessageItem: localMessageItem, fullMessage: fullMessage}) {
+  const serviceManager = useServiceManager();
+  const messageItem = localMessageItem.item;
+  const {ui_state: ui_state} = localMessageItem;
+  const {image_url: image_url, alt_text: alt_text, label: label, kind: kind, value: value} = messageItem;
+  const isDisabled = Boolean(value && ui_state.optionSelected);
+  const onClickHandler = useCallback(async () => {
+    await serviceManager.fire({
+      type: BusEventType.MESSAGE_ITEM_CUSTOM,
+      messageItem: messageItem,
+      fullMessage: fullMessage
+    });
+  }, [ messageItem, serviceManager, fullMessage ]);
+  return React.createElement(BaseButtonItemComponent, {
+    imageURL: image_url,
+    altText: alt_text,
+    label: label,
+    kind: kind,
+    disabled: isDisabled,
+    renderIcon: image_url && TouchInteraction || undefined,
+    onClick: onClickHandler
+  });
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ButtonItemPostBackComponent({localMessageItem: localMessageItem, requestFocus: requestFocus, isMessageForInput: isMessageForInput}) {
+  const serviceManager = useServiceManager();
+  const messageItem = localMessageItem.item;
+  const {ui_state: ui_state, fullMessageID: fullMessageID} = localMessageItem;
+  const {image_url: image_url, alt_text: alt_text, label: label, kind: kind} = messageItem;
+  const isDisabled = !isMessageForInput || Boolean(ui_state.optionSelected);
+  const onClickHandler = useCallback(() => {
+    const isInputAvailable = Boolean(messageItem.value?.input?.text || label);
+    if (isInputAvailable) {
+      const messageRequest = createMessageRequestForButtonItemOption(messageItem, fullMessageID);
+      requestFocus();
+      serviceManager.store.dispatch(actions.messageSetOptionSelected(ui_state.id, messageRequest));
+      serviceManager.actions.sendWithCatch(messageRequest, MessageSendSource.POST_BACK_BUTTON);
+    } else {
+      consoleError(`${WA_CONSOLE_PREFIX} post_back button with label "${messageItem.label}" has no input message to send.`);
+    }
+  }, [ messageItem, label, fullMessageID, requestFocus, serviceManager.store, serviceManager.actions, ui_state.id ]);
+  return React.createElement(BaseButtonItemComponent, {
+    imageURL: image_url,
+    altText: alt_text,
+    label: label,
+    kind: kind,
+    onClick: onClickHandler,
+    renderIcon: image_url && Send || undefined,
+    disabled: isDisabled
+  });
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ButtonItemShowPanelComponent({localMessageItem: localMessageItem, isMessageForInput: isMessageForInput}) {
+  const serviceManager = useServiceManager();
+  const {image_url: image_url, alt_text: alt_text, label: label, kind: kind} = localMessageItem.item;
+  const onClickHandler = useCallback(async () => {
+    serviceManager.store.dispatch(actions.setResponsePanelIsOpen(true));
+    serviceManager.store.dispatch(actions.setResponsePanelContent(localMessageItem, isMessageForInput));
+  }, [ localMessageItem, isMessageForInput, serviceManager ]);
+  return React.createElement(BaseButtonItemComponent, {
+    className: "BaseButtonItemComponent__ShowPanel",
+    imageURL: image_url,
+    altText: alt_text,
+    label: label,
+    kind: kind,
+    renderIcon: image_url && ArrowRight || undefined,
+    onClick: onClickHandler
+  });
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ButtonItemURLComponent({localMessageItem: localMessageItem}) {
+  const {image_url: image_url, alt_text: alt_text, url: url, target: target, label: label, kind: kind} = localMessageItem.item;
+  if (!image_url && kind === ButtonItemKind.LINK) {
+    return React.createElement("div", {
+      className: "WAC__received--textContent WACButtonItem"
+    }, React.createElement(Link, {
+      className: "WACWidget__breakWord",
+      href: url,
+      target: target,
+      rel: "noopener noreferrer",
+      renderIcon: Launch
+    }, label || url));
+  }
+  return React.createElement(BaseButtonItemComponent, {
+    imageURL: image_url,
+    altText: alt_text,
+    label: label,
+    kind: kind,
+    url: url,
+    target: target,
+    renderIcon: Launch
+  });
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ButtonItemComponent(props) {
+  switch (props.localMessageItem.item.button_type) {
+   case ButtonItemType.URL:
+    return React.createElement(ButtonItemURLComponent, {
+      localMessageItem: props.localMessageItem
+    });
+
+   case ButtonItemType.SHOW_PANEL:
+    return React.createElement(ButtonItemShowPanelComponent, {
+      localMessageItem: props.localMessageItem,
+      isMessageForInput: props.isMessageForInput
+    });
+
+   case ButtonItemType.CUSTOM_EVENT:
+    return React.createElement(ButtonItemCustomEventComponent, {
+      localMessageItem: props.localMessageItem,
+      fullMessage: props.fullMessage
+    });
+
+   default:
+    return React.createElement(ButtonItemPostBackComponent, {
+      localMessageItem: props.localMessageItem,
+      requestFocus: props.requestFocus,
+      isMessageForInput: props.isMessageForInput
+    });
+  }
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function CardItemComponent(props) {
+  const {ignoreMaxWidth: ignoreMaxWidth} = props;
+  const item = props.localMessageItem.item;
+  return React.createElement(Tile, {
+    className: cx("WACCardMessageComponent", {
+      WACMaxWidthSmall: !ignoreMaxWidth && item.max_width === WidthOptions.SMALL,
+      WACMaxWidthMedium: !ignoreMaxWidth && item.max_width === WidthOptions.MEDIUM,
+      WACMaxWidthLarge: !ignoreMaxWidth && item.max_width === WidthOptions.LARGE
+    })
+  }, React.createElement(BodyWithFooterComponent, {
+    ...props,
+    renderMessageComponent: props.renderMessageComponent
+  }));
+}
+
+const CardComponentExport = React.memo(CardItemComponent);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const Carousel$1 = lazyCarousel();
+
+function CarouselItemComponent(props) {
+  const {localMessageItem: localMessageItem, fullMessage: fullMessage, isMessageForInput: isMessageForInput, requestFocus: requestFocus, renderMessageComponent: renderMessageComponent} = props;
+  const allMessageItemsByID = useSelector(state => state.allMessageItemsByID);
+  const {itemsLocalMessageItemIDs: itemsLocalMessageItemIDs} = localMessageItem.ui_state;
+  return React.createElement(Suspense, {
+    fallback: React.createElement(SkeletonPlaceholder, null)
+  }, React.createElement(Carousel$1, null, itemsLocalMessageItemIDs.map(nestedLocalMessageItemID => {
+    const localMessageItem = allMessageItemsByID[nestedLocalMessageItemID];
+    return React.createElement(CardComponentExport, {
+      key: nestedLocalMessageItemID,
+      localMessageItem: localMessageItem,
+      fullMessage: fullMessage,
+      isMessageForInput: isMessageForInput,
+      ignoreMaxWidth: true,
+      requestFocus: requestFocus,
+      renderMessageComponent: renderMessageComponent
+    });
+  })));
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function useCallbackOnChange(value, callback) {
+  const doDebounced = useMemo(() => callback && debounce(callback, 100, {
+    maxWait: 100,
+    leading: true
+  }), [ callback ]);
+  if (usePrevious(value) !== value && callback) {
+    setTimeout(doDebounced);
+  }
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const WindowSizeContext = React.createContext(null);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function useWindowSize() {
+  return useContext(WindowSizeContext);
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ var CitationType;
+
+(function(CitationType) {
+  CitationType["URL"] = "url";
+  CitationType["EXPAND_IF_NEEDED"] = "expand";
+})(CitationType || (CitationType = {}));
+
+function CitationCardContent({citation: citation, type: type, setIsExpandable: setIsExpandable, isExpandable: isExpandable}) {
+  const languagePack = useLanguagePack();
+  const {width: width} = useWindowSize();
+  const {conversationalSearch_viewSourceDocument: conversationalSearch_viewSourceDocument} = languagePack;
+  const ref = useRef(null);
+  const {text: text} = citation;
+  useLayoutEffect(() => {
+    if (ref.current && !isExpandable && setIsExpandable) {
+      if (ref.current.clientHeight && ref.current.scrollHeight) {
+        setIsExpandable(ref.current.clientHeight < ref.current.scrollHeight);
+      }
+    }
+  }, [ text, isExpandable, setIsExpandable, width ]);
+  let label;
+  let icon;
+  if (type === CitationType.URL && citation.url) {
+    label = new URL(citation.url).hostname;
+    icon = React.createElement(Link$1, {
+      size: 16
+    });
+  } else if (isExpandable) {
+    icon = React.createElement(Maximize, {
+      size: 16
+    });
+    label = conversationalSearch_viewSourceDocument;
+  }
+  return React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "WACCitationCard_Header"
+  }, React.createElement("div", {
+    className: "WACCitationCard_Title WACWidget__textEllipsis"
+  }, citation.title), React.createElement("div", {
+    ref: ref,
+    className: "WACCitationCard_Text"
+  }, text)), React.createElement("div", {
+    className: "WACCitationCard_Footer"
+  }, (label || icon) && React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "WACCitationCard_Label WACWidget__textEllipsis"
+  }, label), React.createElement("div", {
+    className: "WACCitationCard_Icon"
+  }, icon))));
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function CitationClickableCard({title: title, onClick: onClick, onSelectCitation: onSelectCitation, children: children, className: className}) {
+  return React.createElement("button", {
+    type: "button",
+    className: `${className} WACCitationCard--clickable`,
+    "aria-label": title,
+    onClick: () => {
+      onClick();
+      onSelectCitation?.();
+    },
+    onFocus: onSelectCitation
+  }, children);
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ExpandToPanelCard({className: className, citation: citation, onSelectCitation: onSelectCitation, relatedSearchResult: relatedSearchResult}) {
+  const serviceManager = useServiceManager();
+  const {title: title} = citation;
+  const [isExpandable, setIsExpandable] = useState(Boolean(relatedSearchResult?.body));
+  function onViewSourcePanelButtonClick() {
+    serviceManager.store.dispatch(actions.setViewSourcePanelIsOpen(true, citation, relatedSearchResult));
+  }
+  function renderTile(className) {
+    return React.createElement(Tile, {
+      className: className
+    }, React.createElement(CitationCardContent, {
+      citation: citation,
+      type: CitationType.EXPAND_IF_NEEDED,
+      setIsExpandable: setIsExpandable,
+      isExpandable: isExpandable
+    }));
+  }
+  if (isExpandable) {
+    return React.createElement(CitationClickableCard, {
+      className: className,
+      title: title,
+      onClick: onViewSourcePanelButtonClick,
+      onSelectCitation: onSelectCitation
+    }, renderTile());
+  }
+  return renderTile(className);
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function CitationCard({citation: citation, isSelected: isSelected, onSelectCitation: onSelectCitation, relatedSearchResult: relatedSearchResult}) {
+  const {url: url} = citation;
+  function getType() {
+    if (url && isValidURL(url)) {
+      return CitationType.URL;
+    }
+    return CitationType.EXPAND_IF_NEEDED;
+  }
+  const type = getType();
+  const className = cx("WACCitationCard", {
+    "WACCitationCard--selected": isSelected,
+    "WACCitationCard--clickable": type === CitationType.URL,
+    "WACCitationCard--url": type === CitationType.URL,
+    "WACCitationCard--no-url": type !== CitationType.URL
+  }, "WACWidget__textEllipsis");
+  if (type === CitationType.URL) {
+    return React.createElement("a", {
+      className: className,
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: onSelectCitation,
+      onFocus: onSelectCitation
+    }, React.createElement(Tile, null, React.createElement(CitationCardContent, {
+      citation: citation,
+      type: type
+    })));
+  }
+  return React.createElement(ExpandToPanelCard, {
+    citation: citation,
+    className: className,
+    onSelectCitation: onSelectCitation,
+    relatedSearchResult: relatedSearchResult
+  });
+}
+
+const CitationCardExport = React.memo(CitationCard);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function templateToString(result) {
+  const container = document.createElement("div");
+  render(result, container);
+  const htmlString = container.innerHTML;
+  render(html``, container);
+  return htmlString;
+}
+
+async function processMarkdown(value, sanitzeHTML = false) {
+  const tokenTree = await getMarkdownWorker(value, undefined);
+  const html = templateToString(renderTokenTree(tokenTree, sanitzeHTML));
+  return html;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ConversationalSearchText(props) {
+  const {highlightCitation: highlightCitation, onToggleCitations: onToggleCitations, citationsOpen: citationsOpen, searchItem: searchItem, showCitationsToggle: showCitationsToggle} = props;
+  const languagePack = useLanguagePack();
+  const serviceManager = useServiceManager();
+  const {streamingState: streamingState} = searchItem.ui_state;
+  const toggleID = `WACConversationalSearchText-${useCounter()}${serviceManager.namespace.suffix}`;
+  const [html, setHtml] = useState("");
+  let text;
+  if (streamingState && !streamingState.isDone) {
+    text = streamingState.chunks.map(chunk => chunk.text).join("");
+  } else {
+    text = searchItem.item.text;
+  }
+  useEffect(() => {
+    async function getHtml() {
+      const newHtml = await createHTMLWithHighlights(text, highlightCitation);
+      setHtml(newHtml);
+    }
+    getHtml();
+  }, [ text, highlightCitation, showCitationsToggle ]);
+  return React.createElement("div", {
+    className: "WACConversationalSearchText"
+  }, React.createElement(MarkdownText, {
+    markdown: html,
+    sanitizeHTML: false
+  }), showCitationsToggle && React.createElement("div", {
+    className: "WACConversationalSearchText__CitationsToggleContainer"
+  }, React.createElement("div", {
+    className: "WACConversationalSearchText__CitationsToggle"
+  }, React.createElement(OperationalTag, {
+    id: toggleID,
+    onClick: onToggleCitations,
+    "aria-expanded": citationsOpen,
+    text: languagePack.conversationalSearch_citationsLabel,
+    renderIcon: citationsOpen ? ChevronUp : ChevronDown,
+    "aria-label": languagePack.conversationalSearch_toggleCitations
+  }))));
+}
+
+const HIGHLIGHT_TOKEN_START = "@@:wc-source:@@";
+
+const HIGHLIGHT_TOKEN_END = "@@/:wc-source:@@";
+
+const HIGHLIGHT_TOKEN_REGEXP = /@@\/?:wc-source:@@/g;
+
+async function createHTMLWithHighlights(text, highlightCitation) {
+  const ranges = highlightCitation?.ranges;
+  if (ranges?.length) {
+    const pieces = [];
+    let startIndex = 0;
+    ranges.forEach(range => {
+      const beforeHighlight = text.substring(startIndex, range.start);
+      const highlight = text.substring(range.start, range.end);
+      pieces.push(beforeHighlight);
+      pieces.push(HIGHLIGHT_TOKEN_START);
+      pieces.push(highlight);
+      pieces.push(HIGHLIGHT_TOKEN_END);
+      startIndex = range.end;
+    });
+    const lastPiece = text.substring(startIndex, text.length);
+    pieces.push(lastPiece);
+    text = pieces.join("");
+  }
+  const md = await processMarkdown(text);
+  const afterMarkdownHTML = sanitizeHTML(md);
+  if (ranges) {
+    try {
+      const rootElement = document.createElement("div");
+      rootElement.innerHTML = afterMarkdownHTML;
+      if (ranges) {
+        insertHighlights(rootElement, false);
+      }
+      return rootElement.innerHTML;
+    } catch (error) {
+      consoleError("An error occurred processing source highlights.", text, highlightCitation, error);
+    }
+  }
+  return afterMarkdownHTML;
+}
+
+function insertHighlights(parent, isInHighlight) {
+  const childNodes = Array.from(parent.childNodes);
+  childNodes.forEach(child => {
+    if (child instanceof Text) {
+      const text = child.textContent;
+      const tokenMatches = Array.from(text.matchAll(HIGHLIGHT_TOKEN_REGEXP));
+      if (!tokenMatches.length && !isInHighlight) ; else {
+        let startIndex = 0;
+        tokenMatches.forEach(match => {
+          const isInHighlightHere = match[0] === HIGHLIGHT_TOKEN_END;
+          const textContent = text.substring(startIndex, match.index);
+          startIndex = match.index + match[0].length;
+          addTextSegment(textContent, isInHighlightHere, parent, child);
+          isInHighlight = !isInHighlightHere;
+        });
+        const lastText = text.substring(startIndex, text.length);
+        addTextSegment(lastText, isInHighlight, parent, child);
+        child.remove();
+      }
+    } else if (child instanceof Element) {
+      child.getAttributeNames().forEach(name => {
+        const value = child.getAttribute(name);
+        if (value) {
+          child.setAttribute(name, value.replaceAll(HIGHLIGHT_TOKEN_REGEXP, ""));
+        }
+      });
+    }
+    isInHighlight = insertHighlights(child, isInHighlight);
+  });
+  return isInHighlight;
+}
+
+function addTextSegment(text, highlighted, parent, beforeChild) {
+  if (text) {
+    const textNode = document.createTextNode(text);
+    if (highlighted && text.trim()) {
+      const highlightNode = document.createElement("span");
+      highlightNode.className = `WACConversationalSearchText--hasCitation`;
+      highlightNode.appendChild(textNode);
+      parent.insertBefore(highlightNode, beforeChild);
+    } else {
+      parent.insertBefore(textNode, beforeChild);
+    }
+  }
+}
+
+const ConversationalSearchTextExport = React.memo(ConversationalSearchText);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const Carousel = lazyCarousel();
+
+function ConversationalSearch({localMessageItem: localMessageItem, scrollElementIntoView: scrollElementIntoView, isStreamingError: isStreamingError, doAutoScroll: doAutoScroll}) {
+  const [selectedCitationIndex, setSelectedCitationIndex] = useState(0);
+  const [citationsOpen, setCitationsOpen] = useState(false);
+  const scrollIntoViewArea = useRef();
+  const swiperRef = useRef();
+  const languagePack = useLanguagePack();
+  const messageItem = localMessageItem.item;
+  const sortedCitations = useMemo(() => sortCitations(messageItem.citations), [ messageItem.citations ]);
+  function scrollCitations() {
+    setTimeout(() => scrollElementIntoView(scrollIntoViewArea.current, 32, 64), 50);
+  }
+  useCallbackOnChange(localMessageItem.ui_state.streamingState?.chunks, doAutoScroll);
+  function onSelectCitation(index) {
+    setCitationsOpen(true);
+    setSelectedCitationIndex(index);
+    setTimeout(() => swiperRef.current?.swiper.slideTo(index));
+    scrollCitations();
+  }
+  function onToggleCitations() {
+    setCitationsOpen(!citationsOpen);
+    if (!citationsOpen) {
+      scrollCitations();
+    }
+  }
+  function renderCitations() {
+    const tiles = sortedCitations?.map((citation, index) => React.createElement(CitationCardExport, {
+      key: index,
+      citation: citation,
+      isSelected: index === selectedCitationIndex,
+      onSelectCitation: () => onSelectCitation(index),
+      relatedSearchResult: messageItem.search_results?.[citation.search_result_idx]
+    }));
+    return React.createElement("div", {
+      className: "WACConversationalSearch_Citations"
+    }, React.createElement(Suspense, {
+      fallback: React.createElement(SkeletonPlaceholder, null)
+    }, React.createElement(Carousel, {
+      swiperRef: swiperRef,
+      initialSlide: selectedCitationIndex,
+      onSlideChange: setSelectedCitationIndex
+    }, tiles)));
+  }
+  return React.createElement("div", {
+    className: "WACConversationalSearch"
+  }, React.createElement(ConversationalSearchTextExport, {
+    searchItem: localMessageItem,
+    showCitationsToggle: Boolean(sortedCitations?.length),
+    highlightCitation: citationsOpen ? sortedCitations?.[selectedCitationIndex] : null,
+    onToggleCitations: onToggleCitations,
+    citationsOpen: citationsOpen
+  }), isStreamingError && React.createElement(InlineError, {
+    text: languagePack.conversationalSearch_streamingIncomplete
+  }), React.createElement("div", {
+    ref: scrollIntoViewArea
+  }, citationsOpen && renderCitations()));
+}
+
+function sortCitations(citations) {
+  if (!citations) {
+    return null;
+  }
+  const withRanges = citations.filter(citation => citation.ranges?.length);
+  const withoutRanges = citations.filter(citation => !citation.ranges?.length);
+  return withRanges.concat(withoutRanges);
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function UserDefinedResponse(props) {
+  const {doAutoScroll: doAutoScroll, isStreamingError: isStreamingError, streamingState: streamingState, serviceManager: serviceManager} = props;
+  const languagePack = useLanguagePack();
+  const userDefinedRegistryItem = serviceManager.actions.getOrCreateUserDefinedElement(props.localMessageID);
+  useCallbackOnChange(streamingState?.chunks, doAutoScroll);
+  return React.createElement("div", {
+    className: "WAC__message-userDefinedResponse",
+    "data-floating-menu-container": true
+  }, React.createElement("slot", {
+    name: userDefinedRegistryItem.slotName
+  }), isStreamingError && React.createElement(InlineError, {
+    text: languagePack.conversationalSearch_streamingIncomplete
+  }));
+}
+
+var UserDefinedResponse$1 = React.memo(UserDefinedResponse);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const UNWANTED_CHARACTERS_REGEX = new RegExp(`[ ${RIGHT_TO_LEFT_MARK}]|\\.$`, "g");
+
+function sanitizeDateFormat(value) {
+  let format = value.replace(UNWANTED_CHARACTERS_REGEX, "");
+  if (!format.includes("mm")) {
+    format = format.replace("m", "mm");
+  }
+  if (!format.includes("dd")) {
+    format = format.replace("d", "dd");
+  }
+  return format;
+}
+
+function toUserDateFormat(date, format) {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = String(date.getFullYear());
+  return format.replace("dd", day).replace("mm", month).replace("yyyy", year);
+}
+
+function toAssistantDateFormat(date) {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = String(date.getFullYear());
+  return `${year}-${month}-${day}`;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function DatePickerComponent(props) {
+  const {localMessage: localMessage, disabled: disabled, scrollElementIntoView: scrollElementIntoView} = props;
+  const serviceManager = useServiceManager();
+  const intl = useIntl();
+  const webChatLocale = useSelector(state => state.locale);
+  const originalMessage = useSelector(state => state.allMessagesByID[localMessage.fullMessageID]);
+  const uuidRef = useRef(uuid(UUIDType.MISCELLANEOUS));
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
+  const [userDisplayValue, setUserDisplayValue] = useState();
+  const [flatpickrFormat, setFlatpickrFormat] = useState();
+  const [userDisplayFormat, setUserDisplayFormat] = useState();
+  const [flatpickrLocale, setFlatpickrLocale] = useState();
+  const [dayjsLocale, setDayjsLocale] = useState();
+  const [datePickerHostElement, setDatePickerHostElement] = useState();
+  const valueForAssistantRef = useRef();
+  const isInputPointerDownEventFiredRef = useRef(false);
+  const inputLabel = intl.formatMessage({
+    id: "datePicker_chooseDate"
+  }, {
+    format: userDisplayFormat
+  });
+  const confirmButtonLabel = intl.formatMessage({
+    id: "datePicker_confirmDate"
+  });
+  const isDateInfoReady = Boolean(flatpickrFormat && userDisplayFormat && flatpickrLocale && dayjsLocale);
+  function setDateInfoForLocale(locale) {
+    const format = dayjs.Ls[locale]?.formats?.L?.toLocaleLowerCase() || ENGLISH_US_DATE_FORMAT;
+    const dateFormat = sanitizeDateFormat(format);
+    setDayjsLocale(locale);
+    setFlatpickrLocale(calcFlatpickrLocale(locale));
+    setUserDisplayFormat(dateFormat);
+    setFlatpickrFormat(getFlatpickrDateFormat(dateFormat));
+  }
+  const handlerSendDate = useCallback(() => {
+    const {ui_state: ui_state, fullMessageID: responseID} = localMessage;
+    const localMessageID = ui_state.id;
+    const request = createMessageRequestForDate(valueForAssistantRef.current, userDisplayValue, responseID);
+    serviceManager.actions.sendWithCatch(request, MessageSendSource.DATE_PICKER, {
+      setValueSelectedForMessageID: localMessageID
+    });
+  }, [ localMessage, serviceManager, userDisplayValue ]);
+  const doScrollElementIntoView = useCallback(() => {
+    scrollElementIntoView(datePickerHostElement, 0, 24);
+  }, [ datePickerHostElement, scrollElementIntoView ]);
+  useOnMount(() => {
+    const localeFromMessage = webChatLocale;
+    const {originalUserText: originalUserText} = localMessage.ui_state;
+    const fromHistory = originalMessage.history.from_history;
+    if (fromHistory && originalUserText) {
+      setUserDisplayValue(originalUserText);
+    }
+    try {
+      if (dayjs.Ls[localeFromMessage]) {
+        setDateInfoForLocale(localeFromMessage);
+      } else {
+        loadDayjsLocale(localeFromMessage).then(locale => {
+          setDateInfoForLocale(locale);
+        });
+      }
+    } catch {
+      consoleError(`Locale ${dayjsLocale} is not recognized by Carbon AI chat. Defaulting to English(US).`);
+      setDateInfoForLocale("en");
+    }
+  });
+  return React.createElement("div", {
+    className: "WACDatePicker"
+  }, isDateInfoReady && datePickerHostElement && React.createElement(Layer, null, React.createElement(DatePicker, {
+    className: "WACDatePicker__Calendar",
+    datePickerType: "single",
+    allowInput: false,
+    locale: flatpickrLocale,
+    appendTo: datePickerHostElement,
+    onChange: dates => {
+      if (dates.length) {
+        const date = dates[0];
+        valueForAssistantRef.current = toAssistantDateFormat(date);
+        setUserDisplayValue(toUserDateFormat(date, userDisplayFormat));
+      }
+    },
+    dateFormat: flatpickrFormat,
+    onOpen: () => {
+      setIsCalendarOpen(true);
+      if (isInputPointerDownEventFiredRef.current) {
+        isInputPointerDownEventFiredRef.current = false;
+      } else {
+        doScrollElementIntoView();
+      }
+    },
+    onClose: () => setIsCalendarOpen(false)
+  }, React.createElement(DatePickerInput, {
+    id: uuidRef.current,
+    labelText: inputLabel,
+    placeholder: userDisplayFormat,
+    disabled: disabled,
+    title: "",
+    onPointerDown: () => {
+      isInputPointerDownEventFiredRef.current = true;
+    },
+    onClick: () => doScrollElementIntoView()
+  }))), React.createElement("div", {
+    className: "WACDatePicker__CalendarContainer",
+    ref: setDatePickerHostElement
+  }), !disabled && !isCalendarOpen && userDisplayValue && React.createElement(Button, {
+    className: "WACDatePicker__ConfirmButton",
+    onClick: handlerSendDate,
+    renderIcon: props => React.createElement(Checkmark, {
+      size: 32,
+      ...props
+    })
+  }, confirmButtonLabel));
+}
+
+function calcFlatpickrLocale(localeValue) {
+  if (localeValue === "zh-tw") {
+    return "zh_tw";
+  }
+  return localeValue.includes("-") ? localeValue.split("-")[0] : localeValue;
+}
+
+function getFlatpickrDateFormat(format) {
+  const dash = format.includes("-") ? "-" : "/";
+  const firstChar = format.toLocaleLowerCase().trim()[0];
+  if (firstChar === "m") {
+    return `m${dash}d${dash}Y`;
+  }
+  if (firstChar === "d") {
+    return `d${dash}m${dash}Y`;
+  }
+  if (firstChar === "y") {
+    return `Y${dash}m${dash}d`;
+  }
+  throw Error(`The provided format ${format} is invalid.`);
+}
+
+const DatePickerComponentExport = React.memo(DatePickerComponent);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const VALID_COLUMN_WIDTH_REGEX = /^[0-9]*(px)?$/;
+
+const DEFAULT_COLUMN_WIDTH = "1";
+
+function GridItemComponent({localMessageItem: localMessageItem, originalMessage: originalMessage, renderMessageComponent: renderMessageComponent}) {
+  const serviceManager = useServiceManager();
+  const languagePack = useLanguagePack();
+  const appConfig = useSelector(state => state.config);
+  const inputState = useSelector(selectInputState);
+  const allMessageItemsByID = useSelector(state => state.allMessageItemsByID);
+  const {columns: columns, horizontal_alignment: horizontal_alignment, vertical_alignment: vertical_alignment, max_width: max_width} = localMessageItem.item;
+  const gridTemplateColumns = columns?.map(column => column.width).join(" ") || DEFAULT_COLUMN_WIDTH;
+  return React.createElement("div", {
+    className: cx("WACGrid", {
+      WACMaxWidthSmall: max_width === WidthOptions.SMALL,
+      WACMaxWidthMedium: max_width === WidthOptions.MEDIUM,
+      WACMaxWidthLarge: max_width === WidthOptions.LARGE
+    }),
+    style: {
+      gridTemplateColumns: gridTemplateColumns
+    }
+  }, localMessageItem.ui_state.gridLocalMessageItemIDs.map((row, rowIndex) => React.createElement("div", {
+    key: `row-${rowIndex}`,
+    className: "WACGrid__Row"
+  }, row.map((cell, columnIndex) => {
+    const cellData = localMessageItem.item.rows[rowIndex]?.cells[columnIndex];
+    let columnWidthString = columns?.[columnIndex]?.width || DEFAULT_COLUMN_WIDTH;
+    let isPixelValue;
+    if (columnWidthString.match(VALID_COLUMN_WIDTH_REGEX)) {
+      isPixelValue = columnWidthString.endsWith("px");
+    } else {
+      columnWidthString = DEFAULT_COLUMN_WIDTH;
+      isPixelValue = false;
+    }
+    return React.createElement("div", {
+      className: "WACGrid__Cell",
+      style: {
+        width: isPixelValue ? columnWidthString : undefined,
+        flex: isPixelValue ? undefined : Number(columnWidthString),
+        alignItems: getFlexAlignment(cellData?.horizontal_alignment || horizontal_alignment),
+        justifyContent: getFlexAlignment(cellData?.vertical_alignment || vertical_alignment)
+      },
+      key: `cell-${rowIndex}-${columnIndex}`
+    }, cell.map((localMessageItemID, itemIndex) => {
+      const message = allMessageItemsByID[localMessageItemID];
+      return React.createElement(React.Fragment, {
+        key: `item-${rowIndex}-${columnIndex}-${itemIndex}`
+      }, renderMessageComponent({
+        message: message,
+        originalMessage: originalMessage,
+        languagePack: languagePack,
+        requestInputFocus: THROW_ERROR,
+        disableUserInputs: inputState.isReadonly,
+        config: appConfig,
+        isMessageForInput: false,
+        scrollElementIntoView: THROW_ERROR,
+        serviceManager: serviceManager,
+        isNestedMessageItem: true,
+        hideFeedback: true,
+        allowNewFeedback: false
+      }));
+    }));
+  }))));
+}
+
+function getFlexAlignment(value) {
+  switch (value) {
+   case "bottom":
+   case "right":
+    return "flex-end";
+
+   case "center":
+    return "center";
+
+   case "top":
+   case "left":
+   default:
+    return "flex-start";
+  }
+}
+
+const GridItemComponentExport = React.memo(GridItemComponent);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function IFramePreviewCardComponent({messageItem: messageItem, doAutoScroll: doAutoScroll}) {
+  const {source: source, image_url: image_url, title: title, description: description} = messageItem;
+  const useAITheme = useSelector(state => state.theme.useAITheme);
+  const urlHostName = getURLHostName(source);
+  const {store: store} = useServiceManager();
+  const {iframe_ariaImageAltText: iframe_ariaImageAltText} = useLanguagePack();
+  const intl = useIntl();
+  const iframeAriaClickPreviewCardMessage = intl.formatMessage({
+    id: "iframe_ariaClickPreviewCard"
+  }, {
+    source: urlHostName
+  });
+  function handleCardClick() {
+    if (source) {
+      store.dispatch(actions.setIFrameContent(messageItem));
+    }
+  }
+  function handleImageLoaded() {
+    doAutoScroll?.();
+  }
+  return React.createElement("div", null, React.createElement(ClickableImage, {
+    title: title,
+    description: description,
+    source: image_url,
+    displayURL: source,
+    altText: iframe_ariaImageAltText,
+    onImageLoad: handleImageLoaded,
+    renderIcon: ArrowRight,
+    onClick: handleCardClick,
+    preventInlineError: true,
+    useAITheme: useAITheme
+  }), React.createElement(VisuallyHidden, null, iframeAriaClickPreviewCardMessage));
+}
+
+const IFramePreviewCardExport = React.memo(IFramePreviewCardComponent);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function InlineIFrame({messageItem: messageItem, doAutoScroll: doAutoScroll}) {
+  const ariaAnnouncer = useAriaAnnouncer();
+  const {errors_iframeSource: errors_iframeSource} = useLanguagePack();
+  const [isError, setIsError] = useState(false);
+  const {source: source, title: title} = messageItem;
+  const baseHeight = getMediaDimensions(messageItem)?.base_height;
+  const paddingTop = getResponsiveElementPaddingValue(baseHeight);
+  const inlineStyles = useDynamicCSSProperties({
+    paddingTop: paddingTop
+  });
+  const iframeTitle = title || source;
+  const onTimeoutOverride = useCallback(() => {
+    setIsError(true);
+    ariaAnnouncer(errors_iframeSource);
+  }, [ ariaAnnouncer, errors_iframeSource ]);
+  if (isError) {
+    return React.createElement(InlineError, {
+      text: errors_iframeSource
+    });
+  }
+  return React.createElement("div", {
+    className: "WACInlineIFrame",
+    style: inlineStyles
+  }, React.createElement(IFrameComponent, {
+    source: source,
+    title: iframeTitle,
+    onTimeoutOverride: onTimeoutOverride,
+    onLoad: () => doAutoScroll?.()
+  }));
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function IFrameMessage({doAutoScroll: doAutoScroll, localMessage: localMessage, displayOverride: displayOverride}) {
+  const {item: item} = localMessage;
+  const itemDisplay = item.display;
+  if (itemDisplay === IFrameItemDisplayOption.INLINE || displayOverride === IFrameItemDisplayOption.INLINE) {
+    return React.createElement(InlineIFrame, {
+      key: item.source,
+      doAutoScroll: doAutoScroll,
+      messageItem: item
+    });
+  }
+  return React.createElement(IFramePreviewCardExport, {
+    doAutoScroll: doAutoScroll,
+    messageItem: item
+  });
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function Description({className: className, text: text, shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion = false}) {
+  return React.createElement("div", {
+    className: `WAC__description ${className}`
+  }, React.createElement(RichTextExport, {
+    text: text,
+    shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion
+  }));
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function Metablock({title: title = null, description: description = null, id: id = null, shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion = false}) {
+  return title || description ? React.createElement("div", {
+    className: "WAC__received--metablock",
+    id: id
+  }, title && React.createElement(Description, {
+    className: "WAC__received--metablock-content WACMetablock__Title",
+    text: title,
+    shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion
+  }), description && React.createElement(Description, {
+    className: "WAC__received--metablock-content WACMetablock__Description",
+    text: description,
+    shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion
+  })) : null;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function createProxyEnvironment(shadowRoot) {
+  const properties = {
+    document: shadowRoot.ownerDocument,
+    addEventListener: shadowRoot.ownerDocument.addEventListener.bind(shadowRoot),
+    removeEventListener: shadowRoot.ownerDocument.removeEventListener.bind(shadowRoot),
+    Node: Node
+  };
+  return new Proxy(shadowRoot, {
+    get: (_, prop) => properties[prop]
+  });
+}
+
+function SelectComponent(props) {
+  const {title: title, description: description, options: options, onChange: onChange, languagePack: languagePack, disableUserInputs: disableUserInputs, serviceManager: serviceManager, shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion} = props;
+  const [isBeingOpened, setIsBeingOpened] = useState(false);
+  const rootRef = useRef();
+  const counter = useCounter();
+  const id = `${counter}${serviceManager.namespace.suffix}`;
+  const environment = rootRef.current?.getRootNode ? createProxyEnvironment(rootRef.current.getRootNode()) : undefined;
+  function findOptionForValue() {
+    const {value: value, options: options} = props;
+    const selectedItem = options.find(item => item.value === value);
+    return selectedItem;
+  }
+  function onIsOpenChange(changes) {
+    if (changes.isOpen && rootRef.current) {
+      setTimeout(() => {
+        if (rootRef?.current) {
+          setIsBeingOpened(true);
+          doScrollElementIntoView(rootRef.current, true);
+          setIsBeingOpened(false);
+        }
+      }, 70 * 2);
+    }
+  }
+  return React.createElement("div", {
+    ref: rootRef
+  }, React.createElement(Metablock, {
+    title: title,
+    description: description,
+    id: `WAC__selectUUID_${id}-label`,
+    shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion
+  }), React.createElement("div", {
+    className: cx("WAC__selectHolder", {
+      WAC__customSelectTemporaryPadding: isBeingOpened
+    })
+  }, React.createElement(Layer, null, React.createElement(Dropdown, {
+    id: `WAC__selectUUID_${id}`,
+    items: options,
+    label: languagePack.options_select,
+    titleText: languagePack.options_select,
+    hideLabel: true,
+    "aria-label": disableUserInputs ? languagePack.options_ariaOptionsDisabled : title,
+    disabled: disableUserInputs,
+    onChange: onChange,
+    selectedItem: findOptionForValue(),
+    downshiftProps: {
+      environment: environment,
+      onIsOpenChange: onIsOpenChange,
+      id: `WACSelectComponent__Downshift-${id}`
+    }
+  }))));
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ class OptionComponent extends Component {
+  constructor() {
+    super(...arguments);
+    this.onOptionSelected = (selectedOption, type) => {
+      const {localMessage: localMessage, serviceManager: serviceManager, originalMessage: originalMessage} = this.props;
+      const {id: responseID} = originalMessage;
+      const messageRequest = createMessageRequestForChoice(selectedOption, responseID);
+      const localMessageID = localMessage.ui_state.id;
+      const source = type === "button" ? MessageSendSource.OPTION_BUTTON : MessageSendSource.OPTION_DROP_DOWN;
+      serviceManager.actions.sendWithCatch(messageRequest, source, {
+        setValueSelectedForMessageID: localMessageID
+      });
+      this.props.requestInputFocus();
+    };
+    this.onButtonClick = (event, item) => {
+      this.onOptionSelected(item, "button");
+    };
+    this.onSelectChange = data => {
+      this.onOptionSelected(data.selectedItem, "dropdown");
+    };
+  }
+  render() {
+    const {localMessage: localMessage, languagePack: languagePack, disableUserInputs: disableUserInputs, serviceManager: serviceManager, shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion} = this.props;
+    const {options: options, title: title, description: description, preference: preference} = localMessage.item;
+    const {optionSelected: optionSelected} = localMessage.ui_state;
+    const type = getOptionType(preference, options.length);
+    return type === "button" ? React.createElement(React.Fragment, null, React.createElement(Metablock, {
+      title: title,
+      description: description,
+      shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion
+    }), React.createElement("div", {
+      className: "WAC__button-holder"
+    }, React.createElement("ul", null, options.map((item, index) => {
+      const isSelected = optionSelected ? item.value.input.text === optionSelected.input.text : false;
+      return React.createElement("li", {
+        key: item.label
+      }, React.createElement(unstable__ChatButton, {
+        kind: ButtonKindEnum.TERTIARY,
+        isQuickAction: true,
+        size: ButtonSizeEnum.SMALL,
+        className: `WAC__button-${index}`,
+        disabled: disableUserInputs,
+        isSelected: isSelected,
+        onClick: event => {
+          this.onButtonClick(event, item);
+        }
+      }, item.label));
+    })))) : React.createElement(SelectComponent, {
+      serviceManager: serviceManager,
+      languagePack: languagePack,
+      title: title,
+      description: description,
+      options: options,
+      disableUserInputs: disableUserInputs,
+      onChange: this.onSelectChange,
+      value: optionSelected,
+      shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion
+    });
+  }
+}
+
+var css_248z$1 = "cds-custom-table-header-title,\ncds-custom-table-header-description,\ncds-custom-table-toolbar{\n  position:sticky;\n  inline-size:var(--cds-chat-table-width, auto);\n  inset-inline-start:0;\n}\n\n:dir(rtl) cds-custom-table-header-title,\n:dir(rtl) cds-custom-table-header-description,\n:dir(rtl) cds-custom-table-toolbar{\n  right:0;\n  left:unset;\n}\n\ncds-custom-table-header-title,\ncds-custom-table-header-description{\n  padding:0 1rem;\n  inline-size:calc(var(--cds-chat-table-width, auto) - 1rem - 1rem);\n  margin-inline:-1rem;\n}\n\ncds-custom-table-header-description{\n  margin-block-end:-0.5rem;\n}\n\ncds-custom-pagination{\n  inline-size:100%;\n}";
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const Download16svg = toString({
+  ...Download16,
+  attrs: {
+    ...Download16.attrs,
+    slot: "icon"
+  }
+});
+
+function tableTemplate(tableElement) {
+  const {tableTitle: tableTitle, tableDescription: tableDescription, headers: headers, containerWidth: containerWidth, filterPlaceholderText: filterPlaceholderText, locale: locale, _handleDownload: handleDownload, _rowsWithIDs: tableRowsWithIDs, _allowFiltering: allowTableFiltering, _handleFilterEvent: handleFilterEvent} = tableElement;
+  function toolbarElement() {
+    return html`<cds-custom-table-toolbar slot="toolbar">
+      <cds-custom-table-toolbar-content>
+        ${allowTableFiltering ? html`<cds-custom-table-toolbar-search
+              persistent
+              placeholder=${filterPlaceholderText}
+            ></cds-custom-table-toolbar-search>` : ""}
+        <cds-custom-button @click=${handleDownload}
+          >${unsafeSVG(Download16svg)}</cds-custom-button
+        >
+      </cds-custom-table-toolbar-content>
+    </cds-custom-table-toolbar>`;
+  }
+  function headersElement() {
+    return html`<cds-custom-table-head>
+      <cds-custom-table-header-row>
+        ${headers.map(header => html`<cds-custom-table-header-cell
+              >${header}</cds-custom-table-header-cell
+            >`)}
+      </cds-custom-table-header-row>
+    </cds-custom-table-head>`;
+  }
+  function rowsElement() {
+    return html`<cds-custom-table-body>
+      ${repeat(tableRowsWithIDs, row => row.id, row => html`<cds-custom-table-row id=${row.id}
+            >${row.cells.map(cell => html`<cds-custom-table-cell>${cell}</cds-custom-table-cell>`)}</cds-custom-table-row
+          >`)}
+    </cds-custom-table-body>`;
+  }
+  return html`<cds-custom-table
+    style="--cds-chat-table-width:${containerWidth}px"
+    size="md"
+    locale=${locale}
+    .isSortable=${allowTableFiltering}
+    .useZebraStyles=${true}
+    @cds-custom-table-filtered=${handleFilterEvent}
+  >
+    ${tableTitle && html`<cds-custom-table-header-title slot="title"
+      >${tableTitle}</cds-custom-table-header-title
+    >`}
+    ${tableDescription && html`<cds-custom-table-header-description slot="description"
+      >${tableDescription}</cds-custom-table-header-description
+    >`}
+    ${toolbarElement()} ${headersElement()} ${rowsElement()}
+  </cds-custom-table>`;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const POSSIBLE_PAGE_SIZES = [ 5, 10, 15, 20, 50 ];
+
+function tablePaginationTemplate(props) {
+  const {_currentPageSize: currentPageSize, _currentPageNumber: currentPageNumber, _filterVisibleRowIDs: filterVisibleRowIDs, rows: rows, previousPageText: previousPageText, nextPageText: nextPageText, itemsPerPageText: itemsPerPageText, getPaginationSupplementalText: getPaginationSupplementalText, getPaginationStatusText: getPaginationStatusText, _handlePageChangeEvent: handlePageChangeEvent, _handlePageSizeChangeEvent: handlePageSizeChangeEvent} = props;
+  const totalVisibleRows = filterVisibleRowIDs.size;
+  const totalRows = rows.length;
+  const supportedPageSizes = POSSIBLE_PAGE_SIZES.filter(pageSize => pageSize < totalRows);
+  return html`<cds-custom-pagination
+    page-size=${currentPageSize}
+    page=${currentPageNumber}
+    total-items=${totalVisibleRows}
+    totalPages=${Math.ceil(totalVisibleRows / currentPageSize)}
+    backward-text=${previousPageText}
+    forward-text=${nextPageText}
+    items-per-page-text=${itemsPerPageText}
+    .formatSupplementalText=${getPaginationSupplementalText}
+    .formatStatusWithDeterminateTotal=${getPaginationStatusText}
+    @cds-custom-pagination-changed-current=${handlePageChangeEvent}
+    @cds-custom-page-sizes-select-changed=${handlePageSizeChangeEvent}
+  >
+    ${supportedPageSizes.map(pageSize => html`<cds-custom-select-item value="${pageSize}"
+          >${pageSize}</cds-custom-select-item
+        >`)}
+    <cds-custom-select-item value="${totalRows}"
+      >${totalRows}</cds-custom-select-item
+    >
+  </cds-custom-pagination>`;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function tableSkeletonTemplate() {
+  return html`<cds-custom-table-skeleton row-count="3" column-count="2">
+  </cds-custom-table-skeleton>`;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const DEFAULT_TABLE_PAGE_SIZE = 5;
+
+const DEFAULT_TABLE_PAGE_SIZE_TALL_CHAT = 10;
+
+const TALL_CHAT_HEIGHT = 850;
+
+const TABLE_COMPONENT_TAG_NAME = "cds-aichat-table";
+
+let TableElement = class TableElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._isValid = true;
+    this._currentPageNumber = 1;
+    this._rowsPerPageChanged = false;
+    this._rowsWithIDs = [];
+  }
+  updated(changedProperties) {
+    if ((changedProperties.has("headers") || changedProperties.has("rows")) && this.headers !== undefined && this.rows !== undefined) {
+      this._calcIsTableValid();
+    }
+    if (changedProperties.has("rows") && this.rows !== undefined) {
+      this._initializeRowsArrays();
+    }
+    if (this._currentPageSize === undefined && changedProperties.has("chatHeight") && this.chatHeight !== changedProperties.get("chatHeight")) {
+      this._initializePageSize();
+    }
+  }
+  _calcIsTableValid() {
+    const columnCount = this.headers.length;
+    this._isValid = !this.rows.some(row => row.cells.length !== columnCount);
+  }
+  _initializeRowsArrays() {
+    this._rowsWithIDs = [];
+    this._filterVisibleRowIDs = new Set;
+    this.rows.forEach((row, index) => {
+      const id = index.toString();
+      this._rowsWithIDs.push({
+        ...row,
+        id: id
+      });
+      this._filterVisibleRowIDs.add(id);
+    });
+  }
+  _initializePageSize() {
+    if (this.chatHeight > TALL_CHAT_HEIGHT) {
+      this._currentPageSize = DEFAULT_TABLE_PAGE_SIZE_TALL_CHAT;
+    } else {
+      this._currentPageSize = DEFAULT_TABLE_PAGE_SIZE;
+    }
+    this._allowFiltering = this.rows.length > this._currentPageSize;
+    this._updateVisibleRows();
+  }
+  _handlePageChangeEvent(event) {
+    this._updateVisibleRows(event.detail?.page, event.detail?.pageSize);
+    event.stopPropagation();
+  }
+  _handlePageSizeChangeEvent(event) {
+    this._rowsPerPageChanged = true;
+    this._currentPageSize = event.detail?.pageSize;
+    this._updateVisibleRows();
+    event.stopPropagation();
+  }
+  _handleFilterEvent(event) {
+    this._filterVisibleRowIDs = new Set(event?.detail?.unfilteredRows.map(row => row.id));
+    this._currentPageNumber = 1;
+    this._updateVisibleRows();
+    event.stopPropagation();
+  }
+  _updateVisibleRows(page = this._currentPageNumber, pageSize = this._currentPageSize) {
+    this._currentPageNumber = page;
+    const rows = Array.from(this.renderRoot.querySelectorAll("cds-custom-table-row"));
+    rows.forEach(row => row.style.setProperty("display", "none"));
+    const filterVisibleRows = rows.filter(row => this._filterVisibleRowIDs.has(row.id));
+    const pageStart = (page - 1) * pageSize;
+    const pageEnd = page * pageSize - 1;
+    for (let index = pageStart; index <= pageEnd; index++) {
+      filterVisibleRows[index]?.removeAttribute("style");
+    }
+  }
+  _handleDownload() {
+    const tableArray = [ this.headers, ...this.rows.map(row => row.cells) ];
+    const stringifiedTable = stringify(tableArray);
+    const blob = new Blob([ stringifiedTable ], {
+      type: "text/csv;charset=utf-8;"
+    });
+    const link = document.createElement("a");
+    const url = URL.createObjectURL(blob);
+    link.setAttribute("href", url);
+    link.setAttribute("download", "table-data.csv");
+    link.style.visibility = "hidden";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+  render() {
+    if (this.loading) {
+      return tableSkeletonTemplate();
+    }
+    if (this.rows.length > this._currentPageSize || this._rowsPerPageChanged) {
+      return html`${tableTemplate(this)}
+      ${tablePaginationTemplate({
+        _currentPageSize: this._currentPageSize,
+        _currentPageNumber: this._currentPageNumber,
+        _filterVisibleRowIDs: this._filterVisibleRowIDs,
+        rows: this.rows,
+        previousPageText: this.previousPageText,
+        nextPageText: this.nextPageText,
+        itemsPerPageText: this.itemsPerPageText,
+        getPaginationSupplementalText: this.getPaginationSupplementalText,
+        getPaginationStatusText: this.getPaginationStatusText,
+        _handlePageChangeEvent: this._handlePageChangeEvent,
+        _handlePageSizeChangeEvent: this._handlePageSizeChangeEvent
+      })}`;
+    }
+    return html`${tableTemplate(this)}`;
+  }
+};
+
+TableElement.styles = css`
+    ${unsafeCSS(css_248z$1)}
+  `;
+
+__decorate([ property({
+  type: String,
+  attribute: "table-title"
+}) ], TableElement.prototype, "tableTitle", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "table-description"
+}) ], TableElement.prototype, "tableDescription", void 0);
+
+__decorate([ property({
+  type: Array
+}) ], TableElement.prototype, "headers", void 0);
+
+__decorate([ property({
+  type: Array
+}) ], TableElement.prototype, "rows", void 0);
+
+__decorate([ property({
+  type: Number,
+  attribute: "container-width"
+}) ], TableElement.prototype, "containerWidth", void 0);
+
+__decorate([ property({
+  type: Number,
+  attribute: "chat-height"
+}) ], TableElement.prototype, "chatHeight", void 0);
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "loading"
+}) ], TableElement.prototype, "loading", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "filter-placeholder-text"
+}) ], TableElement.prototype, "filterPlaceholderText", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "previous-page-text"
+}) ], TableElement.prototype, "previousPageText", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "next-page-text"
+}) ], TableElement.prototype, "nextPageText", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "items-per-page-text"
+}) ], TableElement.prototype, "itemsPerPageText", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "locale"
+}) ], TableElement.prototype, "locale", void 0);
+
+__decorate([ property({
+  type: Function,
+  attribute: false
+}) ], TableElement.prototype, "getPaginationSupplementalText", void 0);
+
+__decorate([ property({
+  type: Function,
+  attribute: false
+}) ], TableElement.prototype, "getPaginationStatusText", void 0);
+
+__decorate([ state() ], TableElement.prototype, "_isValid", void 0);
+
+__decorate([ state() ], TableElement.prototype, "_currentPageNumber", void 0);
+
+__decorate([ state() ], TableElement.prototype, "_currentPageSize", void 0);
+
+__decorate([ state() ], TableElement.prototype, "_rowsPerPageChanged", void 0);
+
+__decorate([ state() ], TableElement.prototype, "_filterVisibleRowIDs", void 0);
+
+__decorate([ state() ], TableElement.prototype, "_rowsWithIDs", void 0);
+
+__decorate([ state() ], TableElement.prototype, "_allowFiltering", void 0);
+
+__decorate([ bind ], TableElement.prototype, "_handlePageChangeEvent", null);
+
+__decorate([ bind ], TableElement.prototype, "_handlePageSizeChangeEvent", null);
+
+__decorate([ bind ], TableElement.prototype, "_handleFilterEvent", null);
+
+TableElement = __decorate([ carbonElement(TABLE_COMPONENT_TAG_NAME) ], TableElement);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const Table = createComponent({
+  tagName: TABLE_COMPONENT_TAG_NAME,
+  elementClass: TableElement,
+  react: React
+});
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function TableContainer(props) {
+  const {tableItem: tableItem} = props;
+  const {title: title, description: description, headers: headers, rows: rows} = tableItem;
+  const carbonTheme = useSelector(state => state.theme.carbonTheme);
+  const chatHeight = useSelector(state => state.chatHeight);
+  const locale = useSelector(state => state.locale);
+  const languagePack = useLanguagePack();
+  const intl = useIntl();
+  const tableContainerRef = useRef(null);
+  const [tableContainerWidth, setTableContainerWidth] = useState();
+  function onResize() {
+    setTableContainerWidth(tableContainerRef.current?.clientWidth);
+  }
+  useLayoutEffect(() => {
+    const tableResizeObserver = new ResizeObserver(onResize);
+    tableResizeObserver.observe(tableContainerRef.current);
+  });
+  const isValidTable = useMemo(() => {
+    const columnCount = headers.length;
+    const isValid = !rows.some(row => row.cells.length !== columnCount);
+    if (!isValid) {
+      consoleError(`Number of cells in the table header does not match the number of cells in one or more of the table rows. In order to render a table there needs to be the same number of columns in the table header and all of the table rows.`);
+    }
+    return isValid;
+  }, [ rows, headers ]);
+  function getTablePaginationSupplementalText({count: count}) {
+    return intl.formatMessage({
+      id: "table_paginationSupplementalText"
+    }, {
+      pagesCount: count
+    });
+  }
+  function getTablePaginationStatusText({start: start, end: end, count: count}) {
+    return intl.formatMessage({
+      id: "table_paginationStatus"
+    }, {
+      start: start,
+      end: end,
+      count: count
+    });
+  }
+  if (isValidTable) {
+    return React.createElement(Theme, {
+      theme: LIGHT_THEMES.includes(carbonTheme) ? "white" : "g90"
+    }, React.createElement("div", {
+      className: "WACTableContainer",
+      ref: tableContainerRef
+    }, React.createElement(Table, {
+      tableTitle: title,
+      tableDescription: description,
+      headers: headers,
+      rows: rows,
+      containerWidth: tableContainerWidth,
+      chatHeight: chatHeight,
+      filterPlaceholderText: languagePack.table_filterPlaceholder,
+      previousPageText: languagePack.table_previousPage,
+      nextPageText: languagePack.table_nextPage,
+      itemsPerPageText: languagePack.table_itemsPerPage,
+      getPaginationSupplementalText: getTablePaginationSupplementalText,
+      getPaginationStatusText: getTablePaginationStatusText,
+      locale: locale
+    })));
+  }
+  return React.createElement(InlineError, null);
+}
+
+const TableContainerExport = React.memo(TableContainer);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function TourCard({message: message, serviceManager: serviceManager}) {
+  const {tour_resumeButton: tour_resumeButton, tour_restartButton: tour_restartButton, tour_startButton: tour_startButton} = useLanguagePack();
+  const {activeTourID: activeTourID} = useSelector(state => state.persistedToBrowserStorage.chatState.persistedTourState);
+  const isCurrentTour = message.fullMessageID === activeTourID;
+  const tourTitle = message.item.user_defined?.card_title || "Guided journey";
+  const tourDescription = message.item.user_defined?.card_description || "Follow along as the assistant guides you to where you want to be.";
+  async function onResumeClick() {
+    await serviceManager.actions.changeView(ViewType.TOUR, {
+      mainWindowCloseReason: MainWindowCloseReason.TOUR_CARD_RESUMED_TOUR
+    });
+  }
+  async function onRestartClick() {
+    const newViewState = await serviceManager.actions.changeView(ViewType.TOUR, {
+      mainWindowCloseReason: MainWindowCloseReason.TOUR_CARD_RESTARTED_TOUR
+    });
+    if (newViewState.tour) {
+      serviceManager.actions.changeStepInTour({
+        newStepIndex: 0
+      });
+    }
+  }
+  return React.createElement(Tile, {
+    className: "WACTourCard"
+  }, React.createElement("div", {
+    className: "WACTourCard__Title"
+  }, tourTitle), React.createElement("div", {
+    className: "WACTourCard__Description"
+  }, tourDescription), isCurrentTour && React.createElement("div", null, React.createElement(Button, {
+    className: "WACTourCard__ResumeButton",
+    renderIcon: ArrowRight,
+    onClick: onResumeClick
+  }, tour_resumeButton), React.createElement(Button, {
+    className: "WACTourCard__RestartButton",
+    kind: "ghost",
+    renderIcon: Restart,
+    onClick: onRestartClick
+  }, tour_restartButton)), !isCurrentTour && React.createElement(Button, {
+    className: "WACTourCard__StartButton",
+    renderIcon: ArrowRight,
+    onClick: () => serviceManager.actions.startTour(message, TourStartReason.START_TOUR_CLICKED, {
+      mainWindowCloseReason: MainWindowCloseReason.TOUR_CARD_STARTED_TOUR
+    })
+  }, tour_startButton));
+}
+
+const TourCardExport = React.memo(TourCard);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function StreamingRichText(props) {
+  const {text: text, streamingState: streamingState, removeHTML: removeHTML, isStreamingError: isStreamingError, doAutoScroll: doAutoScroll} = props;
+  const languagePack = useLanguagePack();
+  useCallbackOnChange(streamingState?.chunks, doAutoScroll);
+  let textToUse;
+  if (streamingState && !streamingState.isDone) {
+    textToUse = streamingState.chunks.map(chunk => chunk.text).join("");
+  } else {
+    textToUse = text;
+  }
+  return React.createElement("div", {
+    className: "WACStreamingRichText"
+  }, React.createElement(RichTextExport, {
+    text: textToUse,
+    shouldRemoveHTMLBeforeMarkdownConversion: removeHTML
+  }), isStreamingError && React.createElement(InlineError, {
+    text: languagePack.conversationalSearch_streamingIncomplete
+  }));
+}
+
+var css_248z = ":host{\n  display:block;\n  margin-block-start:1rem;\n}\n\n:host([open]) .cds--aichat-chain-of-thought-content{\n  display:block;\n  overflow:visible;\n  max-block-size:-moz-fit-content;\n  max-block-size:fit-content;\n  opacity:1;\n}\n:host([open]) .cds--aichat-chain-of-thought-button-chevron svg{\n  transform:rotate(-90deg);\n}\n\n.cds--aichat-chain-of-thought-button-chevron{\n  display:flex;\n  flex-basis:1.5rem;\n}\n@media screen and (prefers-reduced-motion: reduce){\n  .cds--aichat-chain-of-thought-button-chevron svg{\n    transform:rotate(-270deg);\n    transition:none;\n  }\n}\n.cds--aichat-chain-of-thought-button-chevron svg{\n  transform:rotate(-270deg);\n  transition:all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);\n}\n\n.cds--aichat-chain-of-thought-content{\n  display:none;\n  overflow:hidden;\n  max-block-size:0;\n  opacity:0;\n  transition:all 110ms cubic-bezier(0, 0, 0.38, 0.9) allow-discrete;\n}\n\n.cds--aichat-chain-of-thought-inner-content{\n  border:1px solid var(--cds-border-subtle-01, #c6c6c6);\n  background-color:var(--cds-layer-01, #f4f4f4);\n  margin-block-start:0.5rem;\n}\n\n.cds--aichat-chain-of-thought-item:not(:last-child){\n  padding-block-end:0.75rem;\n}\n\n.cds--aichat-chain-of-thought-item cds-aichat-markdown-text:not(:first-child){\n  padding-block-start:0.5rem;\n}\n\n.cds--aichat-chain-of-thought-item-label{\n  font-size:var(--cds-heading-01-font-size, 0.875rem);\n  font-weight:var(--cds-heading-01-font-weight, 600);\n  line-height:var(--cds-heading-01-line-height, 1.42857);\n  letter-spacing:var(--cds-heading-01-letter-spacing, 0.16px);\n}\n\nbutton.cds--aichat-chain-of-thought-button{\n  box-sizing:border-box;\n  padding:0;\n  border:0;\n  margin:0;\n  font-family:inherit;\n  font-size:100%;\n  vertical-align:baseline;\n  display:inline-block;\n  padding:0;\n  border:0;\n  -webkit-appearance:none;\n     -moz-appearance:none;\n          appearance:none;\n  background:none;\n  cursor:pointer;\n  text-align:start;\n  inline-size:100%;\n  font-size:var(--cds-heading-01-font-size, 0.875rem);\n  font-weight:var(--cds-heading-01-font-weight, 600);\n  line-height:var(--cds-heading-01-line-height, 1.42857);\n  letter-spacing:var(--cds-heading-01-letter-spacing, 0.16px);\n  display:flex;\n  align-items:center;\n  color:var(--cds-text-primary, #161616);\n}\nbutton.cds--aichat-chain-of-thought-button *,\nbutton.cds--aichat-chain-of-thought-button *::before,\nbutton.cds--aichat-chain-of-thought-button *::after{\n  box-sizing:inherit;\n}\nbutton.cds--aichat-chain-of-thought-button::-moz-focus-inner{\n  border:0;\n}\n\nbutton.cds--aichat-chain-of-thought-button:focus,\nbutton.cds--aichat-chain-of-thought-button:focus-visible{\n  outline:2px solid var(--cds-focus);\n}\n\n.cds--aichat-chain-of-thought-accordion-item-content{\n  display:block;\n  overflow:visible;\n  background:var(--cds-layer-01, #f4f4f4);\n  color:var(--cds-text-primary, #161616);\n  max-block-size:-moz-fit-content;\n  max-block-size:fit-content;\n  opacity:1;\n  transition:all 110ms cubic-bezier(0, 0, 0.38, 0.9) allow-discrete;\n}\n\n.cds--aichat-chain-of-thought-item{\n  padding-block:1rem;\n  padding-inline:2rem 1rem;\n}\n\n.cds--aichat-chain-of-thought-accordion-item-content[hidden]{\n  display:none;\n  overflow:hidden;\n  max-block-size:0;\n  opacity:0;\n  padding-block:0;\n  padding-inline:0;\n}\n\n.cds--aichat-chain-of-thought-accordion-item-header-chevron{\n  display:flex;\n  flex:0 1 2rem;\n  justify-content:center;\n  color:var(--cds-text-primary, #161616);\n}\n@media screen and (prefers-reduced-motion: reduce){\n  .cds--aichat-chain-of-thought-accordion-item-header-chevron svg{\n    fill:var(--cds-text-primary, #161616);\n    transform:rotate(-270deg);\n    transition:none;\n  }\n}\n.cds--aichat-chain-of-thought-accordion-item-header-chevron svg{\n  fill:var(--cds-text-primary, #161616);\n  transform:rotate(-270deg);\n  transition:all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);\n}\n\n.cds--aichat-chain-of-thought-accordion-item-header-chevron[data-open] svg{\n  transform:rotate(-90deg);\n}\n\n.cds--aichat-chain-of-thought-accordion-item button.cds--aichat-chain-of-thought-accordion-item-header{\n  box-sizing:border-box;\n  padding:0;\n  border:0;\n  margin:0;\n  font-family:inherit;\n  font-size:100%;\n  vertical-align:baseline;\n  display:inline-block;\n  padding:0;\n  border:0;\n  -webkit-appearance:none;\n     -moz-appearance:none;\n          appearance:none;\n  background:none;\n  cursor:pointer;\n  text-align:start;\n  inline-size:100%;\n  font-size:var(--cds-body-01-font-size, 0.875rem);\n  font-weight:var(--cds-body-01-font-weight, 400);\n  line-height:var(--cds-body-01-line-height, 1.42857);\n  letter-spacing:var(--cds-body-01-letter-spacing, 0.16px);\n  display:flex;\n  align-items:center;\n  padding:0.5rem 0;\n  background:var(--cds-layer-accent-02, #e0e0e0);\n  block-size:2rem;\n}\n.cds--aichat-chain-of-thought-accordion-item button.cds--aichat-chain-of-thought-accordion-item-header *,\n.cds--aichat-chain-of-thought-accordion-item button.cds--aichat-chain-of-thought-accordion-item-header *::before,\n.cds--aichat-chain-of-thought-accordion-item button.cds--aichat-chain-of-thought-accordion-item-header *::after{\n  box-sizing:inherit;\n}\n.cds--aichat-chain-of-thought-accordion-item button.cds--aichat-chain-of-thought-accordion-item-header::-moz-focus-inner{\n  border:0;\n}\n.cds--aichat-chain-of-thought-accordion-item button.cds--aichat-chain-of-thought-accordion-item-header:focus,\n.cds--aichat-chain-of-thought-accordion-item button.cds--aichat-chain-of-thought-accordion-item-header:focus-visible{\n  position:relative;\n  z-index:2;\n  box-shadow:0 -1px 0 0 var(--cds-focus, #0f62fe), inset 0 1px 0 0 var(--cds-focus, #0f62fe), inset 2px 0 0 0 var(--cds-focus, #0f62fe), 0 1px 0 0 var(--cds-focus, #0f62fe), inset 0 -1px 0 0 var(--cds-focus, #0f62fe), inset -2px 0 0 0 var(--cds-focus, #0f62fe);\n  outline:none;\n}\n\n.cds--aichat-chain-of-thought-accordion-item:nth-child(odd) button.cds--aichat-chain-of-thought-accordion-item-header{\n  background:var(--cds-layer-02, #ffffff);\n}\n\n.cds--aichat-chain-of-thought-accordion-item-header-title{\n  overflow:hidden;\n  flex:1 1;\n  color:var(--cds-text-primary, #161616);\n  margin-inline-end:0.5rem;\n  text-overflow:ellipsis;\n  white-space:nowrap;\n}\n\n.cds--aichat-chain-of-thought-accordion-item-header-status{\n  display:flex;\n  flex:0 0 1.5rem;\n  align-items:center;\n  justify-content:center;\n}\n\n.cds--aichat-chain-of-thought-accordion-item-header-status--failure{\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  margin-inline-end:0.5rem;\n}\n.cds--aichat-chain-of-thought-accordion-item-header-status--failure svg{\n  fill:var(--cds-support-error, #da1e28);\n}\n\n.cds--aichat-chain-of-thought-accordion-item-header-status--success{\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  margin-inline-end:0.5rem;\n}\n.cds--aichat-chain-of-thought-accordion-item-header-status--success svg{\n  fill:var(--cds-support-success, #24a148);\n}";
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const stepTitleFormatter = createEnglishFormat("chainOfThought_stepTitle");
+
+class ChainOfThoughtElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.formatStepLabelText = ({stepNumber: stepNumber, stepTitle: stepTitle}) => stepTitleFormatter.format({
+      stepNumber: stepNumber,
+      stepTitle: stepTitle || ""
+    });
+    this.inputLabelText = enLanguagePack.chainOfThought_inputLabel;
+    this.outputLabelText = enLanguagePack.chainOfThought_outputLabel;
+    this.toolLabelText = enLanguagePack.chainOfThought_toolLabel;
+    this.explainabilityText = enLanguagePack.chainOfThought_explainabilityLabel;
+    this.statusSucceededLabelText = enLanguagePack.chainOfThought_statusSucceededLabel;
+    this.statusFailedLabelText = enLanguagePack.chainOfThought_statusFailedLabel;
+    this.statusProcessingLabelText = enLanguagePack.chainOfThought_statusProcessingLabel;
+    this._chainOfThoughtPanelID = `${CSS_CLASS_PREFIX}-chain-of-thought-panel-id-${uuid()}`;
+  }
+  firstUpdated(_changedProperties) {
+    this._steps = this.steps.map(item => ({
+      ...item,
+      open: false
+    }));
+  }
+}
+
+ChainOfThoughtElement.styles = css`
+    ${unsafeCSS(css_248z)}
+  `;
+
+__decorate([ property({
+  type: Boolean,
+  attribute: "open",
+  reflect: true
+}) ], ChainOfThoughtElement.prototype, "open", void 0);
+
+__decorate([ property({
+  type: Array,
+  attribute: "steps",
+  reflect: true
+}) ], ChainOfThoughtElement.prototype, "steps", void 0);
+
+__decorate([ property({
+  type: Function,
+  attribute: false
+}) ], ChainOfThoughtElement.prototype, "formatStepLabelText", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "input-label-text",
+  reflect: true
+}) ], ChainOfThoughtElement.prototype, "inputLabelText", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "output-label-text",
+  reflect: true
+}) ], ChainOfThoughtElement.prototype, "outputLabelText", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "tool-label-text",
+  reflect: true
+}) ], ChainOfThoughtElement.prototype, "toolLabelText", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "explainability-text",
+  reflect: true
+}) ], ChainOfThoughtElement.prototype, "explainabilityText", void 0);
+
+__decorate([ property({
+  type: Function,
+  attribute: false
+}) ], ChainOfThoughtElement.prototype, "onToggle", void 0);
+
+__decorate([ property({
+  type: Function,
+  attribute: false
+}) ], ChainOfThoughtElement.prototype, "onStepToggle", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "status-succeeded-label-text",
+  reflect: true
+}) ], ChainOfThoughtElement.prototype, "statusSucceededLabelText", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "status-failed-label-text",
+  reflect: true
+}) ], ChainOfThoughtElement.prototype, "statusFailedLabelText", void 0);
+
+__decorate([ property({
+  type: String,
+  attribute: "status-processing-label-text",
+  reflect: true
+}) ], ChainOfThoughtElement.prototype, "statusProcessingLabelText", void 0);
+
+__decorate([ state() ], ChainOfThoughtElement.prototype, "_steps", void 0);
+
+__decorate([ state() ], ChainOfThoughtElement.prototype, "_chainOfThoughtPanelID", void 0);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const CSS_CLASS_ITEM_PREFIX = `${CSS_CLASS_PREFIX}-chain-of-thought-item`;
+
+const CSS_CLASS_STATUS_PREFIX = `${CSS_CLASS_PREFIX}-chain-of-thought-accordion-item-header-status`;
+
+const ChevronRight16svg = toString(ChevronRight16);
+
+const CheckmarkFilled16svg = toString(CheckmarkFilled16);
+
+const ErrorFilled16svg = toString(ErrorFilled16);
+
+function stepStatus(status, statusSucceededLabelText, statusFailedLabelText, statusProcessingLabelText) {
+  switch (status) {
+   case ChainOfThoughtStepStatus.PROCESSING:
+    return html`<cds-custom-inline-loading
+        status="active"
+        aria-label="${statusProcessingLabelText}"
+      ></cds-custom-inline-loading>`;
+
+   case ChainOfThoughtStepStatus.FAILURE:
+    return html`<span
+        class="${CSS_CLASS_STATUS_PREFIX}--${ChainOfThoughtStepStatus.FAILURE}"
+        aria-label="${statusFailedLabelText}"
+        >${unsafeSVG(ErrorFilled16svg)}</span
+      >`;
+
+   default:
+    return html`<span
+        class="${CSS_CLASS_STATUS_PREFIX}--${ChainOfThoughtStepStatus.SUCCESS}"
+        aria-label="${statusSucceededLabelText}"
+        >${unsafeSVG(CheckmarkFilled16svg)}</span
+      >`;
+  }
+}
+
+function renderToolData(data, label, classPostfix) {
+  const content = parseUnknownDataToMarkdown(data);
+  if (content) {
+    return renderToolDataAsMarkdown(content, label, classPostfix);
+  }
+  return html``;
+}
+
+function renderToolDataAsMarkdown(content, label, classPostfix) {
+  return html`<div
+    class="${CSS_CLASS_ITEM_PREFIX} ${CSS_CLASS_ITEM_PREFIX}-${classPostfix}"
+  >
+    <div class="${CSS_CLASS_ITEM_PREFIX}-label">${label}</div>
+    <cds-aichat-markdown-text
+      sanitize-html
+      markdown=${content}
+    ></cds-aichat-markdown-text>
+  </div>`;
+}
+
+function accordionItemContent(customElementClass, item) {
+  const {inputLabelText: inputLabelText, outputLabelText: outputLabelText, toolLabelText: toolLabelText} = customElementClass;
+  if (item.open) {
+    return html` ${item.description ? html`<div
+          class="${CSS_CLASS_ITEM_PREFIX} ${CSS_CLASS_ITEM_PREFIX}-description"
+        >
+          <cds-aichat-markdown-text
+            sanitize-html
+            markdown=${item.description}
+          ></cds-aichat-markdown-text>
+        </div>` : null}
+    ${item.tool_name ? html`<div
+          class="${CSS_CLASS_ITEM_PREFIX} ${CSS_CLASS_ITEM_PREFIX}-toolName"
+        >
+          <div class="${CSS_CLASS_ITEM_PREFIX}-label">${toolLabelText}</div>
+          ${item.tool_name}
+        </div>` : null}
+    ${renderToolData(item.request?.args, inputLabelText, "input")}
+    ${renderToolData(item.response?.content, outputLabelText, "output")}`;
+  }
+  return html``;
+}
+
+function accordionContent(customElementClass) {
+  const {_steps: _steps, open: open, _chainOfThoughtPanelID: _chainOfThoughtPanelID, onStepToggle: onStepToggle, formatStepLabelText: formatStepLabelText, statusSucceededLabelText: statusSucceededLabelText, statusFailedLabelText: statusFailedLabelText, statusProcessingLabelText: statusProcessingLabelText} = customElementClass;
+  if (open) {
+    return html`${_steps.map((item, index) => {
+      const stepNumber = index + 1;
+      const content_id = `${_chainOfThoughtPanelID}-step-${stepNumber}-content`;
+      return html`<div
+        class="${CSS_CLASS_PREFIX}-chain-of-thought-accordion-item"
+      >
+        <button
+          class="${CSS_CLASS_PREFIX}-chain-of-thought-accordion-item-header"
+          @click=${() => {
+        item.open = !item.open;
+        customElementClass.requestUpdate();
+        const element = customElementClass.shadowRoot.querySelector(`#${content_id}`);
+        onStepToggle?.(item.open, element);
+      }}
+          aria-expanded=${item.open}
+          aria-controls=${content_id}
+        >
+          <span
+            class="${CSS_CLASS_PREFIX}-chain-of-thought-accordion-item-header-chevron"
+            ?data-open=${item.open}
+            >${unsafeSVG(ChevronRight16svg)}</span
+          >
+          <span
+            class="${CSS_CLASS_PREFIX}-chain-of-thought-accordion-item-header-title"
+            >${formatStepLabelText({
+        stepNumber: stepNumber,
+        stepTitle: item.title
+      })}</span
+          >
+          <span class="${CSS_CLASS_STATUS_PREFIX}"
+            >${stepStatus(item.status, statusSucceededLabelText, statusFailedLabelText, statusProcessingLabelText)}</span
+          >
+        </button>
+        <div
+          class="${CSS_CLASS_PREFIX}-chain-of-thought-accordion-item-content"
+          id=${content_id}
+          ?hidden=${!item.open}
+        >
+          ${accordionItemContent(customElementClass, item)}
+        </div>
+      </div>`;
+    })}`;
+  }
+  return html``;
+}
+
+function chainOfThoughtElementTemplate(customElementClass) {
+  const {_chainOfThoughtPanelID: _chainOfThoughtPanelID, explainabilityText: explainabilityText, open: open} = customElementClass;
+  function toggle() {
+    customElementClass.open = !customElementClass.open;
+    customElementClass.onToggle?.(customElementClass.open, customElementClass);
+  }
+  return html`<div class="${CSS_CLASS_PREFIX}-chain-of-thought">
+    <button
+      class="${CSS_CLASS_PREFIX}-chain-of-thought-button"
+      @click=${toggle}
+      aria-expanded=${open}
+      aria-controls=${_chainOfThoughtPanelID}
+    >
+      <span class="${CSS_CLASS_PREFIX}-chain-of-thought-button-chevron"
+        >${unsafeSVG(ChevronRight16svg)}</span
+      >
+      ${explainabilityText}
+    </button>
+    <div
+      id=${_chainOfThoughtPanelID}
+      class="${CSS_CLASS_PREFIX}-chain-of-thought-content"
+      ?hidden=${!open}
+    >
+      <div class="${CSS_CLASS_PREFIX}-chain-of-thought-inner-content">
+        ${accordionContent(customElementClass)}
+      </div>
+    </div>
+  </div>`;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const CHAIN_OF_THOUGHT_COMPONENT_TAG_NAME = `cds-aichat-chain-of-thought`;
+
+let CDSChatChainOfThoughtElement = class CDSChatChainOfThoughtElement extends ChainOfThoughtElement {
+  render() {
+    return chainOfThoughtElementTemplate(this);
+  }
+};
+
+CDSChatChainOfThoughtElement = __decorate([ carbonElement(CHAIN_OF_THOUGHT_COMPONENT_TAG_NAME) ], CDSChatChainOfThoughtElement);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const ChainOfThought = createComponent({
+  tagName: CHAIN_OF_THOUGHT_COMPONENT_TAG_NAME,
+  elementClass: CDSChatChainOfThoughtElement,
+  react: React
+});
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function MessageTypeComponent(props) {
+  const {allowNewFeedback: allowNewFeedback, hideFeedback: hideFeedback, serviceManager: serviceManager, originalMessage: originalMessage, message: message} = props;
+  const intl = useIntl();
+  const languagePack = useLanguagePack();
+  const feedbackDetailsRef = useRef();
+  const agentDisplayState = useSelector(selectAgentDisplayState, shallowEqual);
+  const agentState = useSelector(state => state.agentState);
+  const persistedAgentState = useSelector(state => state.persistedToBrowserStorage.chatState.agentState);
+  const feedbackID = message.item.message_options?.feedback?.id;
+  const feedbackPanelID = useUUID();
+  const feedbackHistory = originalMessage.history?.feedback?.[feedbackID];
+  const feedbackInitialValues = useMemo(() => {
+    if (!feedbackHistory) {
+      return null;
+    }
+    return {
+      text: feedbackHistory.text,
+      selectedCategories: feedbackHistory.categories
+    };
+  }, [ feedbackHistory ]);
+  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);
+  const [isPositiveFeedbackSelected, setIsPositiveFeedbackSelected] = useState(feedbackHistory && feedbackHistory.is_positive);
+  const [isNegativeFeedbackSelected, setIsNegativeFeedbackSelected] = useState(feedbackHistory && !feedbackHistory.is_positive);
+  const [isFeedbackSubmitted, setIsFeedbackSubmitted] = useState(Boolean(feedbackHistory));
+  function renderSpecificMessage(localMessageItem, message) {
+    if (isRequest(message)) {
+      return renderRequest(localMessageItem, message);
+    }
+    if (isResponse(message)) {
+      const response = renderResponse(localMessageItem, message);
+      const isResponseStopped = localMessageItem.item.streaming_metadata?.stream_stopped;
+      return React.createElement(React.Fragment, null, response, isResponseStopped && React.createElement(ResponseStopped, null), renderChainOfThought(localMessageItem), renderFeedback(localMessageItem, message));
+    }
+    return false;
+  }
+  function renderRequest(localMessageItem, originalMessage) {
+    const messageItem = localMessageItem.item;
+    if (isTextItem(messageItem)) {
+      const text = originalMessage.history?.label || messageItem.text;
+      const userText = localMessageItem.ui_state.originalUserText || text;
+      return React.createElement("div", {
+        className: "WAC__sent--text"
+      }, originalMessage.input.message_type === InternalMessageRequestType.FILE && React.createElement(Attachment, {
+        className: "WAC__sent-fileIcon",
+        "aria-label": props.languagePack.fileSharing_fileIcon
+      }), React.createElement("span", {
+        role: "heading",
+        "aria-level": 2
+      }, userText));
+    }
+    return null;
+  }
+  function renderResponse(localMessageItem, message) {
+    if (renderAsTour(localMessageItem.item)) {
+      return renderTour(localMessageItem);
+    }
+    if (renderAsUserDefinedMessage(localMessageItem.item)) {
+      return renderUserDefinedResponse(localMessageItem, message);
+    }
+    const responseType = localMessageItem.item.response_type;
+    const withHumanAgent = Boolean(localMessageItem.item.agent_message_type);
+    switch (responseType) {
+     case MessageResponseTypes.TEXT:
+      return renderText(localMessageItem, message, withHumanAgent);
+
+     case MessageResponseTypes.IMAGE:
+      return renderImage(localMessageItem);
+
+     case MessageResponseTypes.OPTION:
+      return renderOption(localMessageItem, message);
+
+     case MessageResponseTypes.CONNECT_TO_AGENT:
+      return renderConnectToAgent(localMessageItem, message);
+
+     case MessageResponseTypes.INLINE_ERROR:
+      return renderInlineError(localMessageItem);
+
+     case MessageResponseTypes.IFRAME:
+      return renderIFrameMessage(localMessageItem);
+
+     case MessageResponseTypes.VIDEO:
+      return renderVideoMessage(localMessageItem);
+
+     case MessageResponseTypes.AUDIO:
+      return renderAudioMessage(localMessageItem);
+
+     case MessageResponseTypes.DATE:
+      return renderDateMessage(localMessageItem);
+
+     case MessageResponseTypes.CONVERSATIONAL_SEARCH:
+      return renderConversationalSearchMessage(localMessageItem, message);
+
+     case MessageResponseTypes.TABLE:
+      return renderTable(localMessageItem);
+
+     case MessageResponseTypes.CARD:
+      return renderCard(localMessageItem, message);
+
+     case MessageResponseTypes.CAROUSEL:
+      return renderCarouselMessage(localMessageItem, message);
+
+     case MessageResponseTypes.BUTTON:
+      return renderButtonItem(localMessageItem, message);
+
+     case MessageResponseTypes.GRID:
+      return renderGrid(localMessageItem, message);
+
+     default:
+      return renderUserDefinedResponse(localMessageItem, message);
+    }
+  }
+  function renderText(message, originalMessage, removeHTML) {
+    if (props.isNestedMessageItem) {
+      return renderRichText(message, removeHTML, originalMessage);
+    }
+    return React.createElement("div", {
+      className: "WAC__received--textContent"
+    }, renderRichText(message, removeHTML, originalMessage));
+  }
+  function renderRichText(localMessageItem, removeHTML, originalMessage) {
+    return React.createElement(StreamingRichText, {
+      text: localMessageItem.item.text,
+      streamingState: localMessageItem.ui_state.streamingState,
+      isStreamingError: originalMessage?.history?.is_streaming_error,
+      removeHTML: removeHTML,
+      doAutoScroll: props.doAutoScroll
+    });
+  }
+  function renderOption(message, originalMessage) {
+    const {languagePack: languagePack, requestInputFocus: requestInputFocus, serviceManager: serviceManager, disableUserInputs: disableUserInputs, isMessageForInput: isMessageForInput} = props;
+    const withHumanAgent = Boolean(message.item.agent_message_type);
+    return React.createElement(OptionComponent, {
+      localMessage: message,
+      originalMessage: originalMessage,
+      languagePack: languagePack,
+      disableUserInputs: disableUserInputs || !isMessageForInput,
+      requestInputFocus: requestInputFocus,
+      serviceManager: serviceManager,
+      shouldRemoveHTMLBeforeMarkdownConversion: withHumanAgent
+    });
+  }
+  function renderImage(message) {
+    const {languagePack: languagePack, serviceManager: serviceManager} = props;
+    const {useAITheme: useAITheme} = serviceManager.store.getState().theme;
+    return React.createElement(ImageExport, {
+      imageError: languagePack.errors_imageSource,
+      source: message.item.source,
+      title: message.item.title,
+      description: message.item.description,
+      altText: message.item.alt_text,
+      needsAnnouncement: message.ui_state.needsAnnouncement,
+      useAITheme: useAITheme
+    });
+  }
+  function renderInlineError(message) {
+    return React.createElement(InlineError, {
+      text: message.item.text
+    });
+  }
+  function renderIFrameMessage(message) {
+    const {doAutoScroll: doAutoScroll, isNestedMessageItem: isNestedMessageItem} = props;
+    const display = isNestedMessageItem ? IFrameItemDisplayOption.INLINE : undefined;
+    return React.createElement(IFrameMessage, {
+      localMessage: message,
+      doAutoScroll: doAutoScroll,
+      displayOverride: display
+    });
+  }
+  function renderVideoMessage(message) {
+    const {doAutoScroll: doAutoScroll} = props;
+    const {item: item} = message;
+    const {source: source, title: title, description: description, alt_text: alt_text} = item;
+    return React.createElement(VideoComponentExport, {
+      source: source,
+      title: title,
+      description: description,
+      baseHeight: getMediaDimensions(item)?.base_height,
+      ariaLabel: alt_text,
+      doAutoScroll: doAutoScroll,
+      needsAnnouncement: message.ui_state.needsAnnouncement
+    });
+  }
+  function renderAudioMessage(message) {
+    const {doAutoScroll: doAutoScroll} = props;
+    const {source: source, title: title, description: description, alt_text: alt_text} = message.item;
+    return React.createElement(AudioComponentExport, {
+      source: source,
+      title: title,
+      description: description,
+      ariaLabel: alt_text,
+      doAutoScroll: doAutoScroll,
+      needsAnnouncement: message.ui_state.needsAnnouncement
+    });
+  }
+  function renderDateMessage(message) {
+    return React.createElement(DatePickerComponentExport, {
+      localMessage: message,
+      disabled: !props.isMessageForInput,
+      scrollElementIntoView: props.scrollElementIntoView
+    });
+  }
+  function renderUserDefinedResponse(message, originalMessage) {
+    const {serviceManager: serviceManager} = props;
+    return React.createElement(UserDefinedResponse$1, {
+      streamingState: message.ui_state.streamingState,
+      isStreamingError: originalMessage?.history?.is_streaming_error,
+      doAutoScroll: props.doAutoScroll,
+      localMessageID: message.ui_state.id,
+      serviceManager: serviceManager
+    });
+  }
+  function renderTour(message) {
+    const {serviceManager: serviceManager} = props;
+    return React.createElement(TourCardExport, {
+      message: message,
+      serviceManager: serviceManager
+    });
+  }
+  function renderConnectToAgent(message, originalMessage) {
+    const {languagePack: languagePack, config: config, serviceManager: serviceManager, disableUserInputs: disableUserInputs, isMessageForInput: isMessageForInput} = props;
+    return React.createElement(ConnectToAgent, {
+      localMessage: message,
+      originalMessage: originalMessage,
+      languagePack: languagePack,
+      config: config,
+      serviceManager: serviceManager,
+      agentState: agentState,
+      agentDisplayState: agentDisplayState,
+      persistedAgentState: persistedAgentState,
+      disableUserInputs: disableUserInputs || !isMessageForInput,
+      requestFocus: props.requestInputFocus
+    });
+  }
+  function renderCard(message, originalMessage) {
+    const {isMessageForInput: isMessageForInput, requestInputFocus: requestInputFocus} = props;
+    return React.createElement(CardComponentExport, {
+      localMessageItem: message,
+      fullMessage: originalMessage,
+      isMessageForInput: isMessageForInput,
+      requestFocus: requestInputFocus,
+      renderMessageComponent: childProps => React.createElement(MessageTypeComponent, {
+        ...childProps
+      })
+    });
+  }
+  function renderConversationalSearchMessage(localMessageItem, fullMessage) {
+    const {scrollElementIntoView: scrollElementIntoView, doAutoScroll: doAutoScroll} = props;
+    return React.createElement(ConversationalSearch, {
+      localMessageItem: localMessageItem,
+      scrollElementIntoView: scrollElementIntoView,
+      isStreamingError: fullMessage.history?.is_streaming_error,
+      doAutoScroll: doAutoScroll
+    });
+  }
+  function renderButtonItem(message, originalMessage) {
+    const {isMessageForInput: isMessageForInput, requestInputFocus: requestInputFocus} = props;
+    return React.createElement(ButtonItemComponent, {
+      localMessageItem: message,
+      fullMessage: originalMessage,
+      isMessageForInput: isMessageForInput,
+      requestFocus: requestInputFocus
+    });
+  }
+  function renderCarouselMessage(message, originalMessage) {
+    const {isMessageForInput: isMessageForInput, requestInputFocus: requestInputFocus} = props;
+    return React.createElement(CarouselItemComponent, {
+      localMessageItem: message,
+      fullMessage: originalMessage,
+      isMessageForInput: isMessageForInput,
+      requestFocus: requestInputFocus,
+      renderMessageComponent: childProps => React.createElement(MessageTypeComponent, {
+        ...childProps
+      })
+    });
+  }
+  function renderGrid(message, originalMessage) {
+    return React.createElement(GridItemComponentExport, {
+      localMessageItem: message,
+      originalMessage: originalMessage,
+      renderMessageComponent: childProps => React.createElement(MessageTypeComponent, {
+        ...childProps
+      })
+    });
+  }
+  function renderTable(message) {
+    return React.createElement(TableContainerExport, {
+      tableItem: message.item
+    });
+  }
+  function scrollChainOfThought(open, element) {
+    if (open) {
+      setTimeout(() => {
+        props.scrollElementIntoView(element, 64, 64);
+      });
+    }
+  }
+  function formatStepLabelText({stepNumber: stepNumber, stepTitle: stepTitle}) {
+    return intl.formatMessage({
+      id: "chainOfThought_stepTitle"
+    }, {
+      stepNumber: stepNumber,
+      stepTitle: stepTitle
+    });
+  }
+  function renderChainOfThought(localMessageItem) {
+    const chainOfThought = localMessageItem.item.message_options?.chain_of_thought;
+    if (!chainOfThought || props.isNestedMessageItem) {
+      return false;
+    }
+    return React.createElement(ChainOfThought, {
+      steps: chainOfThought,
+      onToggle: scrollChainOfThought,
+      onStepToggle: scrollChainOfThought,
+      formatStepLabelText: formatStepLabelText,
+      explainabilityText: languagePack.chainOfThought_explainabilityLabel,
+      inputLabelText: languagePack.chainOfThought_inputLabel,
+      outputLabelText: languagePack.chainOfThought_outputLabel,
+      toolLabelText: languagePack.chainOfThought_toolLabel
+    });
+  }
+  function renderFeedback(localMessageItem, message) {
+    const feedbackOptions = localMessageItem.item.message_options?.feedback || {};
+    const {id: feedbackID, is_on: is_on, show_positive_details: show_positive_details = true, show_negative_details: show_negative_details = true, show_text_area: show_text_area = true, show_prompt: show_prompt = true, title: title, prompt: prompt, categories: categories, placeholder: placeholder, disclaimer: disclaimer} = feedbackOptions;
+    if (props.isNestedMessageItem || hideFeedback || !allowNewFeedback && !feedbackHistory || !is_on) {
+      return false;
+    }
+    function updateHistory(data) {
+      if (feedbackID) {
+        const history = {
+          feedback: {
+            [feedbackID]: data
+          }
+        };
+        serviceManager.store.dispatch(actions.mergeMessageHistory(localMessageItem.fullMessageID, history));
+      }
+    }
+    function onFeedbackClicked(isPositive) {
+      const toggleToSelected = isPositive ? !isPositiveFeedbackSelected : !isNegativeFeedbackSelected;
+      const openDetails = (isPositive ? show_positive_details : show_negative_details) && toggleToSelected;
+      if (toggleToSelected && !openDetails) {
+        updateHistory({
+          is_positive: isPositive
+        });
+        setIsFeedbackSubmitted(true);
+        serviceManager.fire({
+          type: BusEventType.FEEDBACK,
+          messageItem: localMessageItem.item,
+          message: message,
+          interactionType: FeedbackInteractionType.SUBMITTED,
+          isPositive: isPositive
+        });
+      } else {
+        setIsFeedbackOpen(openDetails);
+        if (openDetails) {
+          setTimeout(() => {
+            props.scrollElementIntoView(feedbackDetailsRef.current, 48, 56);
+          });
+        }
+        serviceManager.fire({
+          type: BusEventType.FEEDBACK,
+          messageItem: localMessageItem.item,
+          message: message,
+          interactionType: openDetails ? FeedbackInteractionType.DETAILS_OPENED : FeedbackInteractionType.DETAILS_CLOSED,
+          isPositive: isPositive
+        });
+      }
+      setIsPositiveFeedbackSelected(isPositive ? toggleToSelected : false);
+      setIsNegativeFeedbackSelected(isPositive ? false : toggleToSelected);
+    }
+    function onSubmit(isPositive, details) {
+      setIsFeedbackSubmitted(true);
+      setIsFeedbackOpen(false);
+      const event = {
+        type: BusEventType.FEEDBACK,
+        messageItem: localMessageItem.item,
+        message: message,
+        interactionType: FeedbackInteractionType.SUBMITTED,
+        isPositive: isPositive,
+        text: details.text,
+        categories: details.selectedCategories
+      };
+      serviceManager.fire(event);
+      updateHistory({
+        is_positive: event.isPositive,
+        text: event.text,
+        categories: event.categories
+      });
+    }
+    function renderFeedbackPopup(isPositive) {
+      const isOpen = isFeedbackOpen && (isPositive ? isPositiveFeedbackSelected : isNegativeFeedbackSelected);
+      return React.createElement(FeedbackComponent, {
+        class: `${CSS_CLASS_PREFIX}-feedbackDetails-${isPositive ? "positive" : "negative"}`,
+        id: `${feedbackPanelID}-feedback-${isPositive ? "positive" : "negative"}`,
+        isOpen: isOpen,
+        isReadonly: isFeedbackSubmitted,
+        onClose: () => onFeedbackClicked(isPositive),
+        onSubmit: details => onSubmit(isPositive, details),
+        initialValues: feedbackHistory && feedbackHistory?.is_positive === isPositive ? feedbackInitialValues : null,
+        showTextArea: show_text_area,
+        showPrompt: show_prompt,
+        title: title || languagePack.feedback_defaultTitle,
+        prompt: prompt || languagePack.feedback_defaultPrompt,
+        categories: categories,
+        placeholder: placeholder || languagePack.feedback_defaultPlaceholder,
+        disclaimer: disclaimer,
+        submitLabel: languagePack.feedback_submitLabel,
+        cancelLabel: languagePack.feedback_cancelLabel
+      });
+    }
+    return React.createElement("div", {
+      className: "WAC__received--feedback"
+    }, React.createElement(FeedbackButtonsComponent, {
+      isPositiveOpen: isFeedbackOpen && isPositiveFeedbackSelected,
+      isNegativeOpen: isFeedbackOpen && isNegativeFeedbackSelected,
+      isPositiveSelected: isPositiveFeedbackSelected,
+      isNegativeSelected: isNegativeFeedbackSelected,
+      hasPositiveDetails: show_positive_details,
+      hasNegativeDetails: show_negative_details,
+      isPositiveDisabled: isNegativeFeedbackSelected || isFeedbackSubmitted,
+      isNegativeDisabled: isPositiveFeedbackSelected || isFeedbackSubmitted,
+      positiveLabel: languagePack.feedback_positiveLabel,
+      negativeLabel: languagePack.feedback_negativeLabel,
+      panelID: feedbackPanelID,
+      onClick: onFeedbackClicked
+    }), React.createElement("div", {
+      ref: feedbackDetailsRef
+    }, renderFeedbackPopup(true), renderFeedbackPopup(false)));
+  }
+  return renderSpecificMessage(props.message, props.originalMessage);
+}
+
+export { AvailabilityMessage as A, EndAgentChatModal as E, MessageTypeComponent as M, WindowSizeContext as W, AriaAnnouncerComponent as a, nodeToText as n };