@carbon/ai-chat-components 0.5.0 → 0.6.0-rc.1

package/es/components/chain-of-thought/src/chain-of-thought.template.js

@@ -0,0 +1,206 @@
+/**
+ * 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.
+ */
+
+import '../../markdown/src/cds-aichat-markdown.js';
+import '@carbon/web-components/es/components/inline-loading/index.js';
+import { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.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 { html } from 'lit';
+import prefix from '../../../globals/settings.js';
+import { ChainOfThoughtStepStatus } from './types.js';
+import { parseUnknownDataToMarkdown } from './parse-unknown-data-to-markdown.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
+ */
+const CSS_CLASS_ITEM_PREFIX = `${prefix}--chain-of-thought-item`;
+const CSS_CLASS_STATUS_PREFIX = `${prefix}--chain-of-thought-accordion-item-header-status`;
+/**
+ * Returns the correct icon given the status of the step. If there is no status, we assume it is successful.
+ */
+function stepStatus(status, statusSucceededLabelText, statusFailedLabelText, statusProcessingLabelText) {
+    switch (status) {
+        case ChainOfThoughtStepStatus.PROCESSING:
+            return html `<cds-inline-loading
+        status="active"
+        aria-label="${statusProcessingLabelText}"
+      ></cds-inline-loading>`;
+        case ChainOfThoughtStepStatus.FAILURE:
+            return html `<span
+        class="${CSS_CLASS_STATUS_PREFIX}--${ChainOfThoughtStepStatus.FAILURE}"
+        aria-label="${statusFailedLabelText}"
+        >${iconLoader(ErrorFilled16)}</span
+      >`;
+        default:
+            return html `<span
+        class="${CSS_CLASS_STATUS_PREFIX}--${ChainOfThoughtStepStatus.SUCCESS}"
+        aria-label="${statusSucceededLabelText}"
+        >${iconLoader(CheckmarkFilled16)}</span
+      >`;
+    }
+}
+function renderToolDataAsMarkdown(content, label, classPostfix, customElementClass) {
+    const { filterPlaceholderText, previousPageText, nextPageText, itemsPerPageText, locale, getPaginationSupplementalText, getPaginationStatusText, feedback, showLessText, showMoreText, tooltipContent, getLineCountText, } = customElementClass;
+    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
+      sanitize-html
+      markdown=${content}
+      filter-placeholder-text=${filterPlaceholderText}
+      previous-page-text=${previousPageText}
+      next-page-text=${nextPageText}
+      items-per-page-text=${itemsPerPageText}
+      locale=${locale}
+      .getPaginationSupplementalText=${getPaginationSupplementalText}
+      .getPaginationStatusText=${getPaginationStatusText}
+      feedback=${feedback}
+      show-less-text=${showLessText}
+      show-more-text=${showMoreText}
+      tooltip-content=${tooltipContent}
+      .getLineCountText=${getLineCountText}
+    ></cds-aichat-markdown>
+  </div>`;
+}
+/**
+ * Takes the input/output data that is unknown and then renders it in the correct format or returns nothing.
+ */
+function renderToolData(data, label, classPostfix, customElementClass) {
+    const content = parseUnknownDataToMarkdown(data);
+    if (content) {
+        return renderToolDataAsMarkdown(content, label, classPostfix, customElementClass);
+    }
+    return html ``;
+}
+function accordionItemContent(customElementClass, item) {
+    const { inputLabelText, outputLabelText, toolLabelText, filterPlaceholderText, previousPageText, nextPageText, itemsPerPageText, locale, getPaginationSupplementalText, getPaginationStatusText, feedback, showLessText, showMoreText, tooltipContent, getLineCountText, } = customElementClass;
+    if (item.open) {
+        return html ` ${item.description
+            ? html `<div
+          class="${CSS_CLASS_ITEM_PREFIX} ${CSS_CLASS_ITEM_PREFIX}-description"
+        >
+          <cds-aichat-markdown
+            sanitize-html
+            markdown=${item.description}
+            filter-placeholder-text=${filterPlaceholderText}
+            previous-page-text=${previousPageText}
+            next-page-text=${nextPageText}
+            items-per-page-text=${itemsPerPageText}
+            locale=${locale}
+            .getPaginationSupplementalText=${getPaginationSupplementalText}
+            .getPaginationStatusText=${getPaginationStatusText}
+            feedback=${feedback}
+            show-less-text=${showLessText}
+            show-more-text=${showMoreText}
+            tooltip-content=${tooltipContent}
+            .getLineCountText=${getLineCountText}
+          ></cds-aichat-markdown>
+        </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", customElementClass)}
+    ${renderToolData(item.response?.content, outputLabelText, "output", customElementClass)}`;
+    }
+    return html ``;
+}
+function accordionContent(customElementClass) {
+    const { _steps, open, _chainOfThoughtPanelID, onStepToggle, formatStepLabelText, statusSucceededLabelText, statusFailedLabelText, statusProcessingLabelText, } = customElementClass;
+    if (open) {
+        return html `${_steps.map((item, index) => {
+            const stepNumber = index + 1;
+            const content_id = `${_chainOfThoughtPanelID}-step-${stepNumber}-content`;
+            const disabled = !item.description && !item.request && !item.response;
+            return html `<div class="${prefix}--chain-of-thought-accordion-item">
+        <button
+          class="${prefix}--chain-of-thought-accordion-item-header"
+          @click=${() => {
+                item.open = !item.open;
+                customElementClass.requestUpdate();
+                const element = customElementClass.shadowRoot?.querySelector(`#${content_id}`);
+                if (element) {
+                    onStepToggle?.(item.open, element);
+                }
+            }}
+          aria-expanded=${item.open}
+          aria-controls=${content_id}
+          ?disabled=${disabled}
+        >
+          <span
+            class="${prefix}--chain-of-thought-accordion-item-header-chevron"
+            ?data-disabled=${disabled}
+            ?data-open=${item.open}
+            >${iconLoader(ChevronRight16)}</span
+          >
+          <span class="${prefix}--chain-of-thought-accordion-item-header-title"
+            >${formatStepLabelText({
+                stepNumber,
+                stepTitle: item.title || item.tool_name || "",
+            })}</span
+          >
+          <span class="${CSS_CLASS_STATUS_PREFIX}"
+            >${stepStatus(item.status || ChainOfThoughtStepStatus.SUCCESS, statusSucceededLabelText, statusFailedLabelText, statusProcessingLabelText)}</span
+          >
+        </button>
+        <div
+          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, explainabilityText, open, onToggle } = customElementClass;
+    function toggle() {
+        customElementClass.open = !customElementClass.open;
+        onToggle?.(customElementClass.open, customElementClass);
+    }
+    return html `<div class="${prefix}--chain-of-thought">
+    <button
+      class="${prefix}--chain-of-thought-button"
+      @click=${toggle}
+      aria-expanded=${open}
+      aria-controls=${_chainOfThoughtPanelID}
+    >
+      <span class="${prefix}--chain-of-thought-button-chevron"
+        >${iconLoader(ChevronRight16)}</span
+      >
+      ${explainabilityText}
+    </button>
+    <div
+      id=${_chainOfThoughtPanelID}
+      class="${prefix}--chain-of-thought-content"
+      ?hidden=${!open}
+    >
+      <div class="${prefix}--chain-of-thought-inner-content">
+        ${accordionContent(customElementClass)}
+      </div>
+    </div>
+  </div>`;
+}
+
+export { chainOfThoughtElementTemplate };
+//# sourceMappingURL=chain-of-thought.template.js.map

package/es/components/chain-of-thought/src/chain-of-thought.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chain-of-thought.template.js","sources":["../../../../src/components/chain-of-thought/src/chain-of-thought.template.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAmBH,MAAM,qBAAqB,GAAG,CAAA,EAAG,MAAM,yBAAyB;AAChE,MAAM,uBAAuB,GAAG,CAAA,EAAG,MAAM,iDAAiD;AAE1F;;AAEG;AACH,SAAS,UAAU,CACjB,MAAgC,EAChC,wBAAgC,EAChC,qBAA6B,EAC7B,yBAAiC,EAAA;IAEjC,QAAQ,MAAM;QACZ,KAAK,wBAAwB,CAAC,UAAU;AACtC,YAAA,OAAO,IAAI,CAAA,CAAA;;sBAEK,yBAAyB,CAAA;6BAClB;QACzB,KAAK,wBAAwB,CAAC,OAAO;AACnC,YAAA,OAAO,IAAI,CAAA,CAAA;iBACA,uBAAuB,CAAA,EAAA,EAAK,wBAAwB,CAAC,OAAO,CAAA;sBACvD,qBAAqB,CAAA;WAChC,UAAU,CAAC,aAAa,CAAC,CAAA;QAC5B;AACJ,QAAA;AACE,YAAA,OAAO,IAAI,CAAA,CAAA;iBACA,uBAAuB,CAAA,EAAA,EAAK,wBAAwB,CAAC,OAAO,CAAA;sBACvD,wBAAwB,CAAA;WACnC,UAAU,CAAC,iBAAiB,CAAC,CAAA;QAChC;;AAER;AAEA,SAAS,wBAAwB,CAC/B,OAAe,EACf,KAAa,EACb,YAAoB,EACpB,kBAAyC,EAAA;IAEzC,MAAM,EACJ,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,EAChB,MAAM,EACN,6BAA6B,EAC7B,uBAAuB,EACvB,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,gBAAgB,GACjB,GAAG,kBAAkB;AAEtB,IAAA,OAAO,IAAI,CAAA,CAAA;aACA,qBAAqB,CAAA,CAAA,EAAI,qBAAqB,CAAA,CAAA,EAAI,YAAY,CAAA;;AAEzD,gBAAA,EAAA,qBAAqB,WAAW,KAAK,CAAA;;;iBAGtC,OAAO;gCACQ,qBAAqB;2BAC1B,gBAAgB;uBACpB,YAAY;4BACP,gBAAgB;eAC7B,MAAM;uCACkB,6BAA6B;iCACnC,uBAAuB;iBACvC,QAAQ;uBACF,YAAY;uBACZ,YAAY;wBACX,cAAc;0BACZ,gBAAgB;;SAEjC;AACT;AAEA;;AAEG;AACH,SAAS,cAAc,CACrB,IAAa,EACb,KAAa,EACb,YAAoB,EACpB,kBAAyC,EAAA;AAEzC,IAAA,MAAM,OAAO,GAAG,0BAA0B,CAAC,IAAI,CAAC;IAChD,IAAI,OAAO,EAAE;QACX,OAAO,wBAAwB,CAC7B,OAAO,EACP,KAAK,EACL,YAAY,EACZ,kBAAkB,CACnB;IACH;IACA,OAAO,IAAI,CAAA,CAAA,CAAE;AACf;AAEA,SAAS,oBAAoB,CAC3B,kBAAyC,EACzC,IAAkC,EAAA;AAElC,IAAA,MAAM,EACJ,cAAc,EACd,eAAe,EACf,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,EAChB,MAAM,EACN,6BAA6B,EAC7B,uBAAuB,EACvB,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,gBAAgB,GACjB,GAAG,kBAAkB;AAEtB,IAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,QAAA,OAAO,IAAI,CAAA,CAAA,CAAA,EAAI,IAAI,CAAC;cAChB,IAAI,CAAA,CAAA;AACO,iBAAA,EAAA,qBAAqB,IAAI,qBAAqB,CAAA;;;;AAI1C,qBAAA,EAAA,IAAI,CAAC,WAAW;sCACD,qBAAqB;iCAC1B,gBAAgB;6BACpB,YAAY;kCACP,gBAAgB;qBAC7B,MAAM;6CACkB,6BAA6B;uCACnC,uBAAuB;uBACvC,QAAQ;6BACF,YAAY;6BACZ,YAAY;8BACX,cAAc;gCACZ,gBAAgB;;AAEjC,cAAA;AACT,cAAE,IAAI;AACN,IAAA,EAAA,IAAI,CAAC;cACH,IAAI,CAAA,CAAA;AACO,iBAAA,EAAA,qBAAqB,IAAI,qBAAqB,CAAA;;AAEzC,sBAAA,EAAA,qBAAqB,WAAW,aAAa,CAAA;AACzD,UAAA,EAAA,IAAI,CAAC,SAAS;AACX,cAAA;AACT,cAAE,IAAI;AACN,IAAA,EAAA,cAAc,CACd,IAAI,CAAC,OAAO,EAAE,IAAI,EAClB,cAAc,EACd,OAAO,EACP,kBAAkB,CACnB;AACC,IAAA,EAAA,cAAc,CACd,IAAI,CAAC,QAAQ,EAAE,OAAO,EACtB,eAAe,EACf,QAAQ,EACR,kBAAkB,CACnB,EAAE;IACL;IACA,OAAO,IAAI,CAAA,CAAA,CAAE;AACf;AAEA,SAAS,gBAAgB,CAAC,kBAAyC,EAAA;AACjE,IAAA,MAAM,EACJ,MAAM,EACN,IAAI,EACJ,sBAAsB,EACtB,YAAY,EACZ,mBAAmB,EACnB,wBAAwB,EACxB,qBAAqB,EACrB,yBAAyB,GAC1B,GAAG,kBAAkB;IAEtB,IAAI,IAAI,EAAE;AACR,QAAA,OAAO,IAAI,CAAA,CAAA,EAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACvC,YAAA,MAAM,UAAU,GAAG,KAAK,GAAG,CAAC;AAC5B,YAAA,MAAM,UAAU,GAAG,CAAA,EAAG,sBAAsB,CAAA,MAAA,EAAS,UAAU,UAAU;AACzE,YAAA,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ;YACrE,OAAO,IAAI,CAAA,CAAA,YAAA,EAAe,MAAM,CAAA;;mBAEnB,MAAM,CAAA;AACN,iBAAA,EAAA,MAAK;AACZ,gBAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;gBACtB,kBAAkB,CAAC,aAAa,EAAE;AAClC,gBAAA,MAAM,OAAO,GAAG,kBAAkB,CAAC,UAAU,EAAE,aAAa,CAC1D,CAAA,CAAA,EAAI,UAAU,CAAA,CAAE,CACK;gBACvB,IAAI,OAAO,EAAE;oBACX,YAAY,GAAG,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;gBACpC;YACF,CAAC;AACe,wBAAA,EAAA,IAAI,CAAC,IAAI;0BACT,UAAU;sBACd,QAAQ;;;qBAGT,MAAM,CAAA;6BACE,QAAQ;AACZ,uBAAA,EAAA,IAAI,CAAC,IAAI;eACnB,UAAU,CAAC,cAAc,CAAC,CAAA;;yBAEhB,MAAM,CAAA;AAChB,aAAA,EAAA,mBAAmB,CAAC;gBACrB,UAAU;gBACV,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE;aAC9C,CAAC,CAAA;;yBAEW,uBAAuB,CAAA;AACjC,aAAA,EAAA,UAAU,CACX,IAAI,CAAC,MAAM,IAAI,wBAAwB,CAAC,OAAO,EAC/C,wBAAwB,EACxB,qBAAqB,EACrB,yBAAyB,CAC1B,CAAA;;;;mBAIM,MAAM,CAAA;eACV,UAAU;oBACL,CAAC,IAAI,CAAC,IAAI;;AAElB,UAAA,EAAA,oBAAoB,CAAC,kBAAkB,EAAE,IAAI,CAAC;;aAE7C;QACT,CAAC,CAAC,EAAE;IACN;IAEA,OAAO,IAAI,CAAA,CAAA,CAAE;AACf;AAEA,SAAS,6BAA6B,CACpC,kBAAyC,EAAA;IAEzC,MAAM,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAClE,kBAAkB;AAEpB,IAAA,SAAS,MAAM,GAAA;AACb,QAAA,kBAAkB,CAAC,IAAI,GAAG,CAAC,kBAAkB,CAAC,IAAI;QAClD,QAAQ,GAAG,kBAAkB,CAAC,IAAI,EAAE,kBAAkB,CAAC;IACzD;IAEA,OAAO,IAAI,CAAA,CAAA,YAAA,EAAe,MAAM,CAAA;;eAEnB,MAAM,CAAA;eACN,MAAM;sBACC,IAAI;sBACJ,sBAAsB;;qBAEvB,MAAM,CAAA;WAChB,UAAU,CAAC,cAAc,CAAC,CAAA;;QAE7B,kBAAkB;;;WAGf,sBAAsB;eAClB,MAAM,CAAA;AACL,cAAA,EAAA,CAAC,IAAI;;oBAED,MAAM,CAAA;UAChB,gBAAgB,CAAC,kBAAkB,CAAC;;;SAGrC;AACT;;;;"}

package/es/components/chain-of-thought/src/parse-unknown-data-to-markdown.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Attempts to parse the given value into a markdown string. If the value is an object or a JSON string,
+ * it is pretty printed as a code block. Otherwise, string content is returned as-is and other primitives are
+ * converted to strings.
+ *
+ * @param data The value to normalize.
+ * @returns Markdown formatted string or `undefined` if the value cannot be represented.
+ */
+declare function parseUnknownDataToMarkdown(data: unknown): string | undefined;
+export { parseUnknownDataToMarkdown };

package/es/components/chain-of-thought/src/parse-unknown-data-to-markdown.js

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ */
+
+/*
+ *  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
+ */
+/**
+ * Attempts to parse the given value into a markdown string. If the value is an object or a JSON string,
+ * it is pretty printed as a code block. Otherwise, string content is returned as-is and other primitives are
+ * converted to strings.
+ *
+ * @param data The value to normalize.
+ * @returns Markdown formatted string or `undefined` if the value cannot be represented.
+ */
+function parseUnknownDataToMarkdown(data) {
+    if (!data) {
+        return undefined;
+    }
+    try {
+        if (typeof data === "object") {
+            return `\`\`\`\n${JSON.stringify(data, null, 2)}\n\`\`\`\n`;
+        }
+        if (typeof data === "string") {
+            try {
+                const parsed = JSON.parse(data);
+                return `\`\`\`\n${JSON.stringify(parsed, null, 2)}\n\`\`\`\n`;
+            }
+            catch (_error) {
+                return data;
+            }
+        }
+        return String(data);
+    }
+    catch (error) {
+        console.error("Cannot parse step content", error);
+        return undefined;
+    }
+}
+
+export { parseUnknownDataToMarkdown };
+//# sourceMappingURL=parse-unknown-data-to-markdown.js.map

package/es/components/chain-of-thought/src/parse-unknown-data-to-markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-unknown-data-to-markdown.js","sources":["../../../../src/components/chain-of-thought/src/parse-unknown-data-to-markdown.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;;;;;;;AAOG;AAEH;;;;;;;AAOG;AACH,SAAS,0BAA0B,CAAC,IAAa,EAAA;IAC/C,IAAI,CAAC,IAAI,EAAE;AACT,QAAA,OAAO,SAAS;IAClB;AAEA,IAAA,IAAI;AACF,QAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC5B,YAAA,OAAO,CAAA,QAAA,EAAW,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA,UAAA,CAAY;QAC7D;AAEA,QAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC5B,YAAA,IAAI;gBACF,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;AAC/B,gBAAA,OAAO,CAAA,QAAA,EAAW,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA,UAAA,CAAY;YAC/D;YAAE,OAAO,MAAM,EAAE;AACf,gBAAA,OAAO,IAAI;YACb;QACF;AAEA,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC;IACrB;IAAE,OAAO,KAAK,EAAE;AACd,QAAA,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,KAAK,CAAC;AACjD,QAAA,OAAO,SAAS;IAClB;AACF;;;;"}

package/es/components/chain-of-thought/src/types.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Status of the chain of thought step.
+ *
+ * @category Messaging
+ */
+declare enum ChainOfThoughtStepStatus {
+    PROCESSING = "processing",
+    FAILURE = "failure",
+    SUCCESS = "success"
+}
+/**
+ * A chain of thought step is meant to show tool calls and other steps made by your agent
+ * to reach its final answer.
+ *
+ * @category Messaging
+ */
+interface ChainOfThoughtStep {
+    /**
+     * The plain text name of the step.
+     */
+    title?: string;
+    /**
+     * An optional human readable description of what the tool does.
+     *
+     * Accepts markdown formatted text.
+     */
+    description?: string;
+    /**
+     * The plain text name of the tool called.
+     */
+    tool_name?: string;
+    /**
+     * Optional request metadata sent to a tool.
+     */
+    request?: {
+        /**
+         * Arguments sent to the tool. If this is properly formed JSON, it will be shown as a code block.
+         */
+        args?: unknown;
+    };
+    /**
+     * Optional response from a tool.
+     */
+    response?: {
+        /**
+         * Content returned by the tool. If this is properly formed JSON, it will be shown as a code block.
+         *
+         * You can also return markdown compatible text here.
+         */
+        content: unknown;
+    };
+    /**
+     * Optionally, share the status of this step. An icon will appear in the view showing the status. If no status is
+     * shared, the UI will assume success.
+     */
+    status?: ChainOfThoughtStepStatus;
+}
+/**
+ * A function to allow the chat component to properly scroll to the element on toggle.
+ *
+ * @category Messaging
+ */
+type ChainOfThoughtOnToggle = (isOpen: boolean, scrollToElement: HTMLElement) => void;
+/**
+ * @category Messaging
+ */
+interface ChainOfThoughtStepWithToggle extends ChainOfThoughtStep {
+    /**
+     * If the step is opened.
+     */
+    open: boolean;
+}
+export { type ChainOfThoughtOnToggle, type ChainOfThoughtStep, ChainOfThoughtStepStatus, type ChainOfThoughtStepWithToggle, };

package/es/components/chain-of-thought/src/types.js

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+
+/*
+ *  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
+ */
+/**
+ * Status of the chain of thought step.
+ *
+ * @category Messaging
+ */
+var ChainOfThoughtStepStatus;
+(function (ChainOfThoughtStepStatus) {
+    ChainOfThoughtStepStatus["PROCESSING"] = "processing";
+    ChainOfThoughtStepStatus["FAILURE"] = "failure";
+    ChainOfThoughtStepStatus["SUCCESS"] = "success";
+})(ChainOfThoughtStepStatus || (ChainOfThoughtStepStatus = {}));
+
+export { ChainOfThoughtStepStatus };
+//# sourceMappingURL=types.js.map

package/es/components/chain-of-thought/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../src/components/chain-of-thought/src/types.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;;;;;;;AAOG;AAEH;;;;AAIG;AACH,IAAK;AAAL,CAAA,UAAK,wBAAwB,EAAA;AAC3B,IAAA,wBAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzB,IAAA,wBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,wBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EAJI,wBAAwB,KAAxB,wBAAwB,GAAA,EAAA,CAAA,CAAA;;;;"}

package/es/components/chat-button/defs.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *
+ * 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.
+ */
+/**
+ * Chat Button size.
+ */
+export declare enum CHAT_BUTTON_SIZE {
+    /**
+     * Small size.
+     */
+    SMALL = "sm",
+    /**
+     * Medium size.
+     */
+    MEDIUM = "md",
+    /**
+     * Large size.
+     */
+    LARGE = "lg"
+}

package/es/components/chat-button/defs.js

@@ -0,0 +1,36 @@
+/**
+ * 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
+ *
+ * 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.
+ */
+/**
+ * Chat Button size.
+ */
+var CHAT_BUTTON_SIZE;
+(function (CHAT_BUTTON_SIZE) {
+    /**
+     * Small size.
+     */
+    CHAT_BUTTON_SIZE["SMALL"] = "sm";
+    /**
+     * Medium size.
+     */
+    CHAT_BUTTON_SIZE["MEDIUM"] = "md";
+    /**
+     * Large size.
+     */
+    CHAT_BUTTON_SIZE["LARGE"] = "lg";
+})(CHAT_BUTTON_SIZE || (CHAT_BUTTON_SIZE = {}));
+
+export { CHAT_BUTTON_SIZE };
+//# sourceMappingURL=defs.js.map

package/es/components/chat-button/defs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs.js","sources":["../../../src/components/chat-button/defs.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;;;;;;;AAOG;AAEH;;AAEG;IACS;AAAZ,CAAA,UAAY,gBAAgB,EAAA;AAC1B;;AAEG;AACH,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AAEZ;;AAEG;AACH,IAAA,gBAAA,CAAA,QAAA,CAAA,GAAA,IAAa;AAEb;;AAEG;AACH,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,IAAY;AACd,CAAC,EAfW,gBAAgB,KAAhB,gBAAgB,GAAA,EAAA,CAAA,CAAA;;;;"}

package/es/components/chat-button/index.d.ts

@@ -6,4 +6,4 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import "./chat-button";
+import "./src/chat-button";

package/es/components/chat-button/index.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import './chat-button.js';
+import './src/chat-button.js';
 //# sourceMappingURL=index.js.map

package/es/components/chat-button/src/chat-button.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ *
+ * 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.
+ */
+import { PropertyValues } from "lit";
+import { CHAT_BUTTON_SIZE } from "../defs";
+import { BUTTON_KIND as CHAT_BUTTON_KIND, BUTTON_TYPE as CHAT_BUTTON_TYPE, BUTTON_TYPE as CHAT_BUTTON_TOOLTIP_ALIGNMENT, BUTTON_TYPE as CHAT_BUTTON_TOOLTIP_POSITION } from "@carbon/web-components/es/components/button/button.js";
+import CDSButton from "@carbon/web-components/es/components/button/button.js";
+export { CHAT_BUTTON_KIND, CHAT_BUTTON_TYPE, CHAT_BUTTON_SIZE, CHAT_BUTTON_TOOLTIP_ALIGNMENT, CHAT_BUTTON_TOOLTIP_POSITION, };
+type ChatButtonSize = CHAT_BUTTON_SIZE.SMALL | CHAT_BUTTON_SIZE.MEDIUM | CHAT_BUTTON_SIZE.LARGE;
+/**
+ * Component extending the @carbon/web-components' button
+ */
+declare class ChatButton extends CDSButton {
+    static styles: any;
+    /**
+     * Specify whether the `ChatButton` should be rendered as a quick action button
+     */
+    isQuickAction: boolean;
+    /**
+     * Button size.
+     */
+    size: ChatButtonSize;
+    private readonly allowedSizes;
+    protected willUpdate(changedProps: PropertyValues<this>): void;
+    private _normalizeButtonState;
+}
+export default ChatButton;

package/es/components/chat-button/{chat-button.js → src/chat-button.js}

@@ -7,9 +7,11 @@
 
 import { __decorate } from 'tslib';
 import { property, customElement } from 'lit/decorators.js';
-import chatButton from './src/chat-button.template.js';
-import { BUTTON_SIZE, BUTTON_KIND } from '@carbon/web-components/es/components/button/button.js';
-import prefix from '../../globals/settings.js';
+import { CHAT_BUTTON_SIZE } from '../defs.js';
+import CarbonButtonElement, { BUTTON_KIND } from '@carbon/web-components/es/components/button/button.js';
+export { BUTTON_KIND as CHAT_BUTTON_KIND, BUTTON_TYPE as CHAT_BUTTON_TOOLTIP_ALIGNMENT, BUTTON_TYPE as CHAT_BUTTON_TOOLTIP_POSITION, BUTTON_TYPE as CHAT_BUTTON_TYPE } from '@carbon/web-components/es/components/button/button.js';
+import prefix from '../../../globals/settings.js';
+import styles from './chat-button.scss.js';
 
 /**
  * @license
@@ -22,7 +24,7 @@ import prefix from '../../globals/settings.js';
 /**
  * Component extending the @carbon/web-components' button
  */
-let ChatButton = class ChatButton extends chatButton {
+let ChatButton = class ChatButton extends CarbonButtonElement {
     constructor() {
         super(...arguments);
         /**
@@ -30,9 +32,9 @@ let ChatButton = class ChatButton extends chatButton {
          */
         this.isQuickAction = false;
         this.allowedSizes = [
-            BUTTON_SIZE.SMALL,
-            BUTTON_SIZE.MEDIUM,
-            BUTTON_SIZE.LARGE,
+            CHAT_BUTTON_SIZE.SMALL,
+            CHAT_BUTTON_SIZE.MEDIUM,
+            CHAT_BUTTON_SIZE.LARGE,
         ];
     }
     willUpdate(changedProps) {
@@ -43,25 +45,29 @@ let ChatButton = class ChatButton extends chatButton {
     _normalizeButtonState() {
         if (this.isQuickAction) {
             this.kind = BUTTON_KIND.GHOST;
-            this.size = BUTTON_SIZE.SMALL;
+            this.size = CHAT_BUTTON_SIZE.SMALL;
             return;
         }
         // Do not allow size larger than `lg`
         if (!this.allowedSizes.includes(this.size)) {
-            this.size = BUTTON_SIZE.LARGE;
+            this.size = CHAT_BUTTON_SIZE.LARGE;
         }
         if (!Object.values(BUTTON_KIND).includes(this.kind)) {
             this.kind = BUTTON_KIND.PRIMARY;
         }
     }
 };
+ChatButton.styles = styles;
 __decorate([
     property({ type: Boolean, attribute: "is-quick-action" })
 ], ChatButton.prototype, "isQuickAction", void 0);
+__decorate([
+    property({ reflect: true })
+], ChatButton.prototype, "size", void 0);
 ChatButton = __decorate([
     customElement(`${prefix}-button`)
 ], ChatButton);
 var AIChatButton = ChatButton;
 
-export { AIChatButton as default };
+export { CHAT_BUTTON_SIZE, AIChatButton as default };
 //# sourceMappingURL=chat-button.js.map

package/es/components/chat-button/src/chat-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-button.js","sources":["../../../../src/components/chat-button/src/chat-button.ts"],"sourcesContent":[null],"names":["CDSButton","CHAT_BUTTON_KIND"],"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AA6BH;;AAEG;AAEH,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQA,mBAAS,CAAA;AAAlC,IAAA,WAAA,GAAA;;AAGE;;AAEG;QAEH,IAAA,CAAA,aAAa,GAAG,KAAK;AAQJ,QAAA,IAAA,CAAA,YAAY,GAAuB;AAClD,YAAA,gBAAgB,CAAC,KAAK;AACtB,YAAA,gBAAgB,CAAC,MAAM;AACvB,YAAA,gBAAgB,CAAC,KAAK;SACvB;IAyBH;AAvBY,IAAA,UAAU,CAAC,YAAkC,EAAA;AACrD,QAAA,IAAI,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACjE,IAAI,CAAC,qBAAqB,EAAE;QAC9B;IACF;IAEQ,qBAAqB,GAAA;AAC3B,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,YAAA,IAAI,CAAC,IAAI,GAAGC,WAAgB,CAAC,KAAK;AAClC,YAAA,IAAI,CAAC,IAAI,GAAG,gBAAgB,CAAC,KAAK;YAClC;QACF;;AAEA,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAwB,CAAC,EAAE;AAC9D,YAAA,IAAI,CAAC,IAAI,GAAG,gBAAgB,CAAC,KAAK;QACpC;AAEA,QAAA,IACE,CAAC,MAAM,CAAC,MAAM,CAACA,WAAgB,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAwB,CAAC,EACxE;AACA,YAAA,IAAI,CAAC,IAAI,GAAGA,WAAgB,CAAC,OAAO;QACtC;IACF;;AA1CO,UAAA,CAAA,MAAM,GAAG,MAAH;AAMb,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE;AACnC,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;AAMd,UAAA,CAAA;AADP,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACE,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAbzB,UAAU,GAAA,UAAA,CAAA;AADf,IAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,OAAA,CAAS;AAC3B,CAAA,EAAA,UAAU,CA4Cf;AAED,mBAAe,UAAU;;;;"}