@brandsync/wc 0.0.7 → 0.0.9

package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.js

@@ -0,0 +1,324 @@
+import { h } from "@stencil/core";
+const RATING_COPY = {
+    1: { heading: "We're sorry we couldn't help.", subtitle: "We'll use your feedback to improve." },
+    2: { heading: "We're sorry we didn't get it right.", subtitle: "We'll use your feedback to improve." },
+    3: { heading: 'Thanks for your feedback.', subtitle: "We're always looking for ways to improve." },
+    4: { heading: "Thanks! We're glad we could help.", subtitle: 'We appreciate your feedback.' },
+    5: { heading: 'Thanks for the great rating!', subtitle: "We're happy we could help." },
+};
+const DEFAULT_HEADING = 'How was your experience with us?';
+const DEFAULT_SUBTITLE = 'Your feedback helps us make Genie better.';
+/**
+ * A star-rating feedback card shown at the end of a Genie AI chat: a heading/subtitle, a 5-star
+ * rating, an optional comment, and either "Submit feedback" + "Start new chat" (before
+ * submitting) or just "Start new chat" (after).
+ *
+ * ## When to use
+ * - Prompting for feedback on a Genie response or chat session, typically after the user ends or
+ *   restarts a conversation.
+ *
+ * ## When not to use
+ * - A generic star-rating input elsewhere in the product -- this component's copy and layout are
+ *   purpose-built for the Genie feedback flow, not a reusable rating control.
+ *
+ * The heading and subtitle are not freeform props: before submitting, they're always the fixed
+ * "How was your experience..." copy; after submitting, they're determined entirely by `rating`
+ * (1-2 stars reads apologetic, 3 neutral, 4-5 positive), matching the Figma source exactly. Use
+ * `heading`/`subtitle` only if a consuming app genuinely needs to override that copy.
+ *
+ * @part close - The close button.
+ * @part heading - The heading text.
+ * @part subtitle - The subtitle text.
+ * @part star - A single star button (`::part(star)` matches all five).
+ * @part label - The "Tell us what you think" label (only rendered before submitting).
+ * @part textarea - The comment textarea (only rendered before submitting).
+ * @part comment - The submitted comment, read-only (only rendered after submitting, if a comment was given).
+ * @part submit - The "Submit feedback" button (only rendered before submitting).
+ * @part new-chat - The "Start new chat" button.
+ * @prop --bs-chatbot-feedback-bg - Card background. Aliased to `--bs-surface-raised`.
+ * @prop --bs-chatbot-feedback-border - Card border color. Aliased to `--bs-border-default`.
+ * @prop --bs-chatbot-feedback-radius - Card corner radius. Aliased to `--bs-border-radius-200`.
+ * @prop --bs-chatbot-feedback-padding-x - Card horizontal padding. Aliased to `--bs-spacing-250`.
+ * @prop --bs-chatbot-feedback-padding-y - Card vertical padding. Aliased to `--bs-spacing-550`.
+ * @prop --bs-chatbot-feedback-max-width - Max width of the card. Matches Figma's 762px.
+ * @prop --bs-chatbot-feedback-gap - Gap between the top content block and the button(s). Aliased
+ *   to `--bs-spacing-300`.
+ * @prop --bs-chatbot-feedback-top-gap - Gap between heading/subtitle, stars, and the
+ *   textarea/comment within the top block. Aliased to `--bs-spacing-250`.
+ * @prop --bs-chatbot-feedback-heading-color - Aliased to `--bs-text-default`.
+ * @prop --bs-chatbot-feedback-subtitle-color - Aliased to `--bs-text-secondary`.
+ * @prop --bs-chatbot-feedback-star-filled - Filled star color. Aliased to `--bs-color-primary-default`.
+ * @prop --bs-chatbot-feedback-star-empty - Empty star color. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-chatbot-feedback-comment-color - Submitted comment text color. Aliased to `--bs-text-default`.
+ * @prop --bs-chatbot-feedback-close-hover - Close button hover background. Aliased to `--bs-surface-hover`.
+ * @prop --bs-chatbot-feedback-primary-bg - "Submit feedback" / post-submit "Start new chat"
+ *   background. Aliased to `--bs-button-primary-default`.
+ * @prop --bs-chatbot-feedback-primary-bg-hover - Aliased to `--bs-button-primary-hover`.
+ * @prop --bs-chatbot-feedback-primary-bg-disabled - Aliased to `--bs-button-primary-disabled`.
+ * @prop --bs-chatbot-feedback-outlined-border - Pre-submit "Start new chat" border. Aliased to
+ *   `--bs-border-primary`.
+ * @prop --bs-chatbot-feedback-outlined-hover - Pre-submit "Start new chat" hover background.
+ *   Aliased to `--bs-color-primary-container-hover`.
+ * @prop --bs-chatbot-feedback-outlined-text - Pre-submit "Start new chat" text/icon color.
+ *   Aliased to `--bs-text-action`.
+ */
+export class BsChatbotFeedback {
+    /** Current star rating, 0-5. 0 means no rating has been given yet. */
+    rating = 0;
+    /** Whether feedback has been submitted. Switches the card from the editable form to the
+     * read-only "thanks" view. */
+    submitted = false;
+    /** The comment text. */
+    comment = '';
+    /** Overrides the computed heading (see the class doc for why this is computed by default). */
+    heading;
+    /** Overrides the computed subtitle. */
+    subtitle;
+    /** Fires when a star is clicked, with the new rating. */
+    bsRatingChange;
+    /** Fires on every keystroke in the comment textarea, with the current value. */
+    bsCommentInput;
+    /** Fires when "Submit feedback" is clicked, with the current rating and comment. Also sets
+     * `submitted` to true. */
+    bsSubmit;
+    /** Fires when "Start new chat" is clicked. The consuming app owns actually starting a new chat. */
+    bsNewChat;
+    /** Fires when the close button is clicked. The consuming app owns actually hiding the card. */
+    bsClose;
+    onStarClick = (value) => {
+        if (this.submitted)
+            return;
+        this.rating = value;
+        this.bsRatingChange.emit(value);
+    };
+    onCommentInput = (ev) => {
+        this.comment = ev.target.value;
+        this.bsCommentInput.emit(this.comment);
+    };
+    onSubmitClick = () => {
+        if (this.rating === 0)
+            return;
+        this.submitted = true;
+        this.bsSubmit.emit({ rating: this.rating, comment: this.comment });
+    };
+    onNewChatClick = () => {
+        this.bsNewChat.emit();
+    };
+    onCloseClick = () => {
+        this.bsClose.emit();
+    };
+    computedHeading() {
+        if (this.heading)
+            return this.heading;
+        if (this.submitted && RATING_COPY[this.rating])
+            return RATING_COPY[this.rating].heading;
+        return DEFAULT_HEADING;
+    }
+    computedSubtitle() {
+        if (this.subtitle)
+            return this.subtitle;
+        if (this.submitted && RATING_COPY[this.rating])
+            return RATING_COPY[this.rating].subtitle;
+        return DEFAULT_SUBTITLE;
+    }
+    render() {
+        const stars = [1, 2, 3, 4, 5];
+        return (h("div", { key: 'e509feb04a65ee7908c9021befe43ddb0727fd00', class: "bs-chatbot-feedback", role: "region", "aria-label": this.computedHeading() }, h("button", { key: '3c1e7f84bb1a2e0e6f89323f2c45102c3714c0f6', type: "button", part: "close", class: "bs-chatbot-feedback__close", "aria-label": "Close", onClick: this.onCloseClick }, h(CloseIcon, { key: '30202380a79f55d4187ff6f50fc0a11d7a282b81' })), h("div", { key: '228f8195087f1d6d3ec6ba53f954ab722cae2971', class: "bs-chatbot-feedback__top" }, h("div", { key: 'd7fb1f58d21aed4fa9b0e5da83a5506e8082c5ff', class: "bs-chatbot-feedback__text" }, h("p", { key: '7e275ebb91562a2f3b4eaf8076a7238f82260bcf', part: "heading", class: "bs-chatbot-feedback__heading" }, this.computedHeading()), h("p", { key: '0bd022e0594dee0a084a83fcce90abeb2b8c8a98', part: "subtitle", class: "bs-chatbot-feedback__subtitle" }, this.computedSubtitle())), h("div", { key: '0c54cd7cfc1b14c4feac0859e1ad2dd3ee2af8a1', class: "bs-chatbot-feedback__stars", role: "radiogroup", "aria-label": "Rating" }, stars.map(value => (h("button", { type: "button", part: "star", class: "bs-chatbot-feedback__star", role: "radio", "aria-checked": (this.rating >= value).toString(), "aria-label": `${value} star${value > 1 ? 's' : ''}`, disabled: this.submitted, onClick: () => this.onStarClick(value) }, h(StarIcon, { filled: this.rating >= value }))))), !this.submitted && (h("div", { key: '4e00821d17646c1d71d9893a7459557f9fcf24d2', class: "bs-chatbot-feedback__field" }, h("label", { key: '11d31fb2ff6897e97e2ec4196ead7269d60cec7b', part: "label", class: "bs-chatbot-feedback__label", htmlFor: "bs-chatbot-feedback-comment" }, "Tell us what you think"), h("textarea", { key: 'd6228e4d737e90ab61cca91d633e36ac69f1c172', part: "textarea", id: "bs-chatbot-feedback-comment", class: "bs-chatbot-feedback__textarea", placeholder: "e.g.The response was helpful ....", value: this.comment, onInput: this.onCommentInput }))), this.submitted && this.comment && (h("p", { key: 'bb5fdd240b07a6051cb784077b3476af1e1217fb', part: "comment", class: "bs-chatbot-feedback__comment" }, this.comment))), h("div", { key: '0d262521f8f13b464f4cbfa746ce49bd330986c6', class: "bs-chatbot-feedback__actions" }, !this.submitted && (h("button", { key: 'a5e8cc2a7bdd290cc95afeefe5d1fc5a1dde86ce', type: "button", part: "submit", class: "bs-chatbot-feedback__submit", disabled: this.rating === 0, onClick: this.onSubmitClick }, h(SendIcon, { key: '163b0c11e0038ae01d7bc61ae1f8c50930b7f8f2' }), "Submit feedback")), h("button", { key: '3cf2d4b2cd6b9043d4194a991cc0e33fa09c69e4', type: "button", part: "new-chat", class: `bs-chatbot-feedback__new-chat ${this.submitted ? 'bs-chatbot-feedback__new-chat--primary' : 'bs-chatbot-feedback__new-chat--outlined'}`, onClick: this.onNewChatClick }, h(EditIcon, { key: 'a0fddede710c06b60302e4cb12b7affe9ed8afec' }), "Start new chat"))));
+    }
+    static get is() { return "bs-chatbot-feedback"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-chatbot-feedback.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-chatbot-feedback.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "rating": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current star rating, 0-5. 0 means no rating has been given yet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "rating",
+                "defaultValue": "0"
+            },
+            "submitted": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether feedback has been submitted. Switches the card from the editable form to the\nread-only \"thanks\" view."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "submitted",
+                "defaultValue": "false"
+            },
+            "comment": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The comment text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "comment",
+                "defaultValue": "''"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the computed heading (see the class doc for why this is computed by default)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the computed subtitle."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subtitle"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsRatingChange",
+                "name": "bsRatingChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a star is clicked, with the new rating."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "bsCommentInput",
+                "name": "bsCommentInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on every keystroke in the comment textarea, with the current value."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bsSubmit",
+                "name": "bsSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when \"Submit feedback\" is clicked, with the current rating and comment. Also sets\n`submitted` to true."
+                },
+                "complexType": {
+                    "original": "{ rating: number; comment: string }",
+                    "resolved": "{ rating: number; comment: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "bsNewChat",
+                "name": "bsNewChat",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when \"Start new chat\" is clicked. The consuming app owns actually starting a new chat."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the close button is clicked. The consuming app owns actually hiding the card."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+const StarIcon = ({ filled }) => (h("svg", { viewBox: "0 0 24 24", fill: filled ? 'currentColor' : 'none', xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M12 2.5L15.09 8.75L22 9.77L17 14.62L18.18 21.5L12 18.22L5.82 21.5L7 14.62L2 9.77L8.91 8.75L12 2.5Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const SendIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M13.5 12H7.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M4.55 20.75C4.44 20.99 4.47 21.27 4.63 21.48C4.79 21.69 5.05 21.79 5.31 21.75L21.37 12.65C21.6 12.52 21.75 12.27 21.75 12C21.75 11.73 21.6 11.48 21.37 11.35L5.31 2.25C5.05 2.21 4.79 2.31 4.63 2.52C4.47 2.73 4.44 3.01 4.55 3.25L7.5 12L4.55 20.75Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const EditIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M16.5 3.5L20.5 7.5L8 20H4V16L16.5 3.5Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M14.5 5.5L18.5 9.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const CloseIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M15 5L5 15", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M15 15L5 5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.stories.js

@@ -0,0 +1,54 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const meta = {
+    title: 'Genie AI Components/bs-chatbot-feedback',
+    parameters: { docs: { description: { component: componentDescription('bs-chatbot-feedback') } } },
+    render: args => html `
+    <bs-chatbot-feedback rating=${args.rating} ?submitted=${args.submitted} comment=${args.comment}></bs-chatbot-feedback>
+  `,
+    argTypes: {
+        rating: { control: { type: 'range', min: 0, max: 5, step: 1 }, description: propDescription('bs-chatbot-feedback', 'rating') },
+        submitted: { control: 'boolean', description: propDescription('bs-chatbot-feedback', 'submitted') },
+        comment: { control: 'text', description: propDescription('bs-chatbot-feedback', 'comment') },
+    },
+    args: {
+        rating: 0,
+        submitted: false,
+        comment: '',
+    },
+};
+export default meta;
+export const Default = {};
+export const OneStarSubmitted = {
+    name: '1 star (submitted)',
+    args: { rating: 1, submitted: true, comment: 'The response was helpful ....' },
+};
+export const TwoStarsSubmitted = {
+    name: '2 stars (submitted)',
+    args: { rating: 2, submitted: true, comment: 'The response was helpful ....' },
+};
+export const ThreeStarsSubmitted = {
+    name: '3 stars (submitted)',
+    args: { rating: 3, submitted: true, comment: 'The response was helpful ....' },
+};
+export const FourStarsSubmitted = {
+    name: '4 stars (submitted)',
+    args: { rating: 4, submitted: true, comment: 'The response was helpful ....' },
+};
+export const FiveStarsSubmitted = {
+    name: '5 stars (submitted)',
+    args: { rating: 5, submitted: true, comment: 'The response was helpful ....' },
+};
+export const AllStates = {
+    name: 'All states',
+    render: () => html `
+    <div style="display: grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); gap: 16px;">
+      <bs-chatbot-feedback></bs-chatbot-feedback>
+      <bs-chatbot-feedback rating="1" submitted comment="The response was helpful ...."></bs-chatbot-feedback>
+      <bs-chatbot-feedback rating="2" submitted comment="The response was helpful ...."></bs-chatbot-feedback>
+      <bs-chatbot-feedback rating="3" submitted comment="The response was helpful ...."></bs-chatbot-feedback>
+      <bs-chatbot-feedback rating="4" submitted comment="The response was helpful ...."></bs-chatbot-feedback>
+      <bs-chatbot-feedback rating="5" submitted comment="The response was helpful ...."></bs-chatbot-feedback>
+    </div>
+  `,
+};

package/dist/collection/components/bs-chatbot-header/bs-chatbot-header.js

@@ -74,7 +74,7 @@ export class BsChatbotHeader {
         this.bsClose.emit();
     };
     render() {
-        return (h("div", { key: '9ae798e8d79c992933228383823d3160dc660f90', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: 'c80243df90e7ed74cea0679b94c139fc6bba8cc5', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: 'ebcfc959d4d7c606866870f1f107c4fc771d25b1', class: "bs-chatbot-header__actions" }, h("span", { key: '153e84f8e63faf67c180338da94e86d2b28da945', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '76b48c5dcaf482dfbafacf8125a5c2908bbc27c3', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: 'b09177f97df5a1ddb20374d260858f0ae3afea12', name: "new-chat-icon" }, h(NewChatIcon, { key: 'a1907a4fd8730c83af15ad7dbf8ec1d784fac88d' }))), h("bs-tooltip", { key: '77b453884b760bf4687b26adbb06f6220c49dbca', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: '8b775f74bd28efa4b812f959658cae97ffce085f', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '1a8c279aa94175b2d90654aa4d3c959273147a7c', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: '8660d04481d3d846731e83b23c865e2bab1cbea7', name: "history-icon" }, h(HistoryIcon, { key: 'a34ed34be60fbc2869b34480342007aa59700177' }))), h("bs-tooltip", { key: '7ba408053f7b0e88330720d3dff4f188f233f46a', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: '4b4d24319a9b5b2085c8180748f72bfcc532a942', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'b9055bd0344465df6afb40aad28ea9565865751e', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Collapse' : 'Expand', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: '460b3c1d20f2a48945df6385e3ebf7f54577881e', name: "expand-icon" }, h(ExpandIcon, { key: '890b772fff27703a7d3da00ff4ad5f2844714075' }))), h("bs-tooltip", { key: 'b43756a31171e14b70bc80574741b28b4dad2c98', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '2023c06216607d6205ec3a0a13d2b06a10babae5', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '1bdc7a342af4b6b37121edb9a93c30ba659d95bf', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '1c47b5499cf15ca73aa8a9dab792bf72c441ff38', name: "close-icon" }, h(CloseIcon, { key: '2ce1bad2bca776187e238647c02e3cc4b68018de' }))), h("bs-tooltip", { key: 'd7a3016e6eab564ab0cd9f5ab1d79be2b6408c17', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
+        return (h("div", { key: 'b1f536775af30bea47474dbcf41f444e9361fabd', class: "bs-chatbot-header", role: "banner", "aria-label": this.heading }, h("div", { key: '1e650269ff177b26e1dce30d9e04b4fab9de9698', part: "logo", class: "bs-chatbot-header__logo", role: "img", "aria-label": this.heading, innerHTML: GENIE_LOGO_SVG }), h("div", { key: '6a35a216f3bbda37ebd14ba801bf83f1f4941616', class: "bs-chatbot-header__actions" }, h("span", { key: 'af2b8a3eeafd27a946e1dd1c51c326c6f7e73531', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '2928c845fd3737d68d672305437d9edd76d1deb3', type: "button", part: "new-chat", class: "bs-chatbot-header__button", "aria-label": "New chat", onClick: this.onNewChatClick }, h("slot", { key: 'bdab9f84e61bc92e16abcb7a9019300291690387', name: "new-chat-icon" }, h(NewChatIcon, { key: 'c61ddb8d3b8f9945f9986253cbe16e462c836f28' }))), h("bs-tooltip", { key: '3edbc3aae276ad91d2e70d21040efaffef101381', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "New chat")), h("span", { key: 'ef3bc303486fea9088b3855ac211baf6e1acae8b', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: '60e2787be7401832a29f806723414b361c480c47', type: "button", part: "history", class: "bs-chatbot-header__button", "aria-label": "History", onClick: this.onHistoryClick }, h("slot", { key: '2bbf8e675aa150740a23d59015446e012adbcb05', name: "history-icon" }, h(HistoryIcon, { key: '55badb6fc7cf1a17abbdae74896789cf2802be01' }))), h("bs-tooltip", { key: 'd4fd6cffbff586949b9357605cf23362a09fbd86', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "History")), h("span", { key: 'e2aa88c87d900d581b5a353cb2a4d014818b238b', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'aa5357f502a32b586b2d5c4837b37364f00d344a', type: "button", part: "expand", class: "bs-chatbot-header__button", "aria-label": this.expanded ? 'Collapse' : 'Expand', "aria-pressed": this.expanded ? 'true' : 'false', onClick: this.onExpandClick }, h("slot", { key: '312e8c17f49c84672533e37989c73072038ca07f', name: "expand-icon" }, h(ExpandIcon, { key: 'a0b666ae7b3660d4eb892407a82a84a0d8c8607b' }))), h("bs-tooltip", { key: '3c43e4d14ef4cdedaaecebed43927eb8f59e3391', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, this.expanded ? 'Collapse' : 'Expand')), h("span", { key: '1e252dcc382c0f2c5ae89a8dcf96e9d76c086b01', class: "bs-chatbot-header__tooltip-wrapper" }, h("button", { key: 'b95104b5dc629e70c43f0eb01f34fd0ba57db670', type: "button", part: "close", class: "bs-chatbot-header__button", "aria-label": "Close", onClick: this.onCloseClick }, h("slot", { key: '7c24bb86799528bc1e1bcc6419217b2048f70835', name: "close-icon" }, h(CloseIcon, { key: 'c53e2028c86264bac5082e9e145deb79eca3156d' }))), h("bs-tooltip", { key: 'f132fa96cc7942a3c4574403da1f2a0d586c0068', class: "bs-chatbot-header__tooltip", placement: "top", "aria-hidden": "true" }, "Close")))));
     }
     static get is() { return "bs-chatbot-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-response-action/bs-chatbot-response-action.js

@@ -105,7 +105,7 @@ export class BsChatbotResponseAction {
     };
     render() {
         const hasSources = !!this.sourcesCount && this.sourcesCount > 0;
-        return (h("div", { key: 'd372000276bedcf0bd64015d955a4ed4ff1c83cc', class: "bs-chatbot-response-action" }, h("button", { key: '6fff591650e4f6114a653ff37bfebe100d4874b7', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: 'e92d29243291141fd63120b4bc6a5024f1908066', name: "like-icon" }, h(ThumbsUpIcon, { key: 'd1a7e8d922f5e712e48e19c6176fdb60ac511240' }))), h("button", { key: '7115ff6c49c5388440f0fe8a352ddd4459a5f8ed', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'd3642d52b90cbd3f6c60d8b8ead3d14fab29f531', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '8cff196faabd164cf023bfa8bac02f3455885261' }))), h("button", { key: 'd32e2ebce71ab91327d7ad7406ae581b2ff98443', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: '1c0459f9fb78202d41e5bf7b3bf5a11ac9c00ecd', name: "copy-icon" }, h(CopyIcon, { key: 'b3d8e9f3cb2125c26967156f046ce3caf44ab8b1' }))), h("button", { key: 'c14f8a2580018edac6b16c82be5b339c7a4033af', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: 'cf67332b681da43a7a305909e14a16bf6a3ca962', name: "regenerate-icon" }, h(RegenerateIcon, { key: '76b5b9c39624007532b2c2b7f20554f12cd8eee4' }))), h("div", { key: 'b62694c42bf23484362e188b6b74559810fce693', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '36715b97f529bfc9c064020d434d0210a3674e52', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: 'f11d837af777a04cc9031921f92b57e139758f2c', name: "menu-icon" }, h(MenuIcon, { key: '3c0c0a70edcf1e8c817a121fce315b8a747ee8e4' }))), this.menuOpen && (h("div", { key: '5a4848466caecf26ce3797b14609932e76ca653d', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: 'f79ac9bcde08eadd0a904223f6f13c9850066827', name: "menu" })))), hasSources && (h("button", { key: 'ef9663bbbb7f74482743177bdfa8053575c3330e', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'f848fd2b5e545d186a7f337c2d0fe0f300c567f7', name: "sources-icon" }, h(SourcesIcon, { key: '7a8be099bcf97209b30c1b941b1f13691d9c07d3' })), h("span", { key: 'e91be28b3d36b1cc3a91c17218ca5ea77938f887', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
+        return (h("div", { key: 'bae036e0fce39e91ad77e048e6c169ea72ce78e4', class: "bs-chatbot-response-action" }, h("button", { key: 'aadfb92da35ba7b5b105cfdc3ad506c7a7fd78e7', type: "button", part: "like", class: "bs-chatbot-response-action__button", "aria-label": "Like", onClick: this.onLikeClick }, h("slot", { key: 'f61c62fa761d277b3ef1b6c7a1bf4b8077ac340b', name: "like-icon" }, h(ThumbsUpIcon, { key: 'a95b09db3fee703c4d2e31a5efa590feb777f3b5' }))), h("button", { key: '37bdacfab99f444ae215b0da5a7b11912562baf7', type: "button", part: "dislike", class: "bs-chatbot-response-action__button", "aria-label": "Dislike", onClick: this.onDislikeClick }, h("slot", { key: 'b948f912ce5cd82c570bfcf7fe69f01f4bf993b0', name: "dislike-icon" }, h(ThumbsDownIcon, { key: '59e901ec41273c235fb0e484e53d23e529a1f429' }))), h("button", { key: '5f0f954f0cadcfda62d0493ebbf07651dc9c43c3', type: "button", part: "copy", class: "bs-chatbot-response-action__button", "aria-label": "Copy", onClick: this.onCopyClick }, h("slot", { key: 'a965380a2c3af43ba49b735c19c7b4afb5ec9c9f', name: "copy-icon" }, h(CopyIcon, { key: 'c9e7d8ef53a14728bced9c753aba3529ac97152f' }))), h("button", { key: 'e06f0c60698dea9a17005d6b233e59e5389c2c11', type: "button", part: "regenerate", class: "bs-chatbot-response-action__button", "aria-label": "Regenerate", onClick: this.onRegenerateClick }, h("slot", { key: '9a5aad36b3f1e217b2ab1718c25d451bc4f0b326', name: "regenerate-icon" }, h(RegenerateIcon, { key: '02aa85caf9c69a84fab24fd97361fa0a2a42c784' }))), h("div", { key: '6c48442ee1c32fcdecab2521c7e7773aae413c61', class: "bs-chatbot-response-action__menu-wrapper" }, h("button", { key: '749474386109e0c6bf3d0c18396ab75514a84db5', type: "button", part: "menu", class: "bs-chatbot-response-action__button", "aria-label": "More options", "aria-haspopup": "menu", "aria-expanded": this.menuOpen ? 'true' : 'false', onClick: this.onMenuClick }, h("slot", { key: 'a48edebb1eb697e7ebb80ceee8b674ad28ae760b', name: "menu-icon" }, h(MenuIcon, { key: '3bc463d9d8882ae373221b754d234938bd47f7de' }))), this.menuOpen && (h("div", { key: 'b1217dd05886155d65b6c6e52933b23ddfbeda4e', class: "bs-chatbot-response-action__menu-popup" }, h("slot", { key: '5a22ff4ffe417bbd25dfddbf18a943862b499f24', name: "menu" })))), hasSources && (h("button", { key: '35d6be1ee305a8549ebc1bed28884c0c5dc83220', type: "button", part: "sources", class: "bs-chatbot-response-action__sources", onClick: this.onSourcesClick }, h("slot", { key: 'af5a033146160fc90eb9ad3d28eb0ecc3628347c', name: "sources-icon" }, h(SourcesIcon, { key: '908029587106b710ddcee80fe207dddc8f77723c' })), h("span", { key: 'aa64462f7f5f4d96adfdf7172a5c2ac18cb1e608', class: "bs-chatbot-response-action__sources-label" }, this.sourcesCount, " ", this.sourcesCount === 1 ? 'source' : 'sources')))));
     }
     static get is() { return "bs-chatbot-response-action"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.cmp.test.js

@@ -0,0 +1,34 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-chatbot-sources-drawer', () => {
+    it('renders the heading and slotted bs-source-link rows', async () => {
+        const { root } = await render(h("bs-chatbot-sources-drawer", { heading: "Sources" }, h("bs-source-link", { "file-name": "report.pdf" }), h("bs-source-link", { "file-name": "notes.docx" })));
+        expect(root.shadowRoot.querySelector('[part="heading"]')).toHaveTextContent('Sources');
+        const slot = root.shadowRoot.querySelector('[part="list"] slot');
+        expect(slot.assignedElements()).toHaveLength(2);
+    });
+    it('does not render the count badge when there are no sources', async () => {
+        const { root } = await render(h("bs-chatbot-sources-drawer", null));
+        expect(root.shadowRoot.querySelector('[part="count"]')).toBeNull();
+    });
+    it('auto-detects the count from slotted bs-source-link children', async () => {
+        const { root, waitForChanges } = await render(h("bs-chatbot-sources-drawer", null, h("bs-source-link", { "file-name": "a.pdf" }), h("bs-source-link", { "file-name": "b.pdf" }), h("bs-source-link", { "file-name": "c.pdf" })));
+        // The initial count is computed from slotchange, which fires once assignment settles.
+        await waitForChanges();
+        expect(root.shadowRoot.querySelector('[part="count"]')).toHaveTextContent('3');
+    });
+    it('ignores non-bs-source-link children when counting', async () => {
+        const { root, waitForChanges } = await render(h("bs-chatbot-sources-drawer", null, h("bs-source-link", { "file-name": "a.pdf" }), h("div", null, "not a source")));
+        await waitForChanges();
+        expect(root.shadowRoot.querySelector('[part="count"]')).toHaveTextContent('1');
+    });
+    it('overrides the auto-detected count when the count prop is set', async () => {
+        const { root } = await render(h("bs-chatbot-sources-drawer", { count: 9 }, h("bs-source-link", { "file-name": "a.pdf" })));
+        expect(root.shadowRoot.querySelector('[part="count"]')).toHaveTextContent('9');
+    });
+    it('emits bsCollapse when the collapse button is clicked', async () => {
+        const { root, spyOnEvent } = await render(h("bs-chatbot-sources-drawer", null));
+        const spy = spyOnEvent('bsCollapse');
+        root.shadowRoot.querySelector('[part="collapse"]').click();
+        expect(spy).toHaveReceivedEventTimes(1);
+    });
+});

package/dist/collection/components/bs-chatbot-sources-drawer/bs-chatbot-sources-drawer.css

@@ -0,0 +1,106 @@
+:host {
+  display: block;
+  /* --bs-static-white is deliberately NOT theme-aware (never overridden in [data-theme="dark"]),
+   * so using it here would leave the panel pure white in dark mode while --bs-text-default (used
+   * for the heading below) switches to white -- invisible text on an unchanged white background.
+   * --bs-surface-raised is the theme-aware equivalent already used for bs-modal's own dialog box. */
+  --bs-chatbot-sources-drawer-bg: var(--bs-surface-raised);
+  --bs-chatbot-sources-drawer-header-shadow: var(--bs-shadow-xs);
+  --bs-chatbot-sources-drawer-header-padding-x: var(--bs-spacing-200);
+  --bs-chatbot-sources-drawer-header-padding-top: var(--bs-spacing-150);
+  --bs-chatbot-sources-drawer-header-padding-bottom: var(--bs-spacing-100);
+  --bs-chatbot-sources-drawer-heading-color: var(--bs-text-default);
+  --bs-chatbot-sources-drawer-count-bg: var(--bs-badge-bg-neutral-container);
+  --bs-chatbot-sources-drawer-count-color: var(--bs-badge-text-neutral);
+  --bs-chatbot-sources-drawer-collapse-hover: var(--bs-surface-hover);
+  --bs-chatbot-sources-drawer-section-gap: var(--bs-spacing-200);
+  --bs-chatbot-sources-drawer-list-padding: var(--bs-spacing-200);
+  --bs-chatbot-sources-drawer-list-gap: var(--bs-spacing-50);
+}
+
+.bs-chatbot-sources-drawer {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-chatbot-sources-drawer-section-gap);
+  width: 100%;
+  height: 100%;
+  background: var(--bs-chatbot-sources-drawer-bg);
+  font-family: inherit;
+}
+
+.bs-chatbot-sources-drawer__header {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  padding: var(--bs-chatbot-sources-drawer-header-padding-top) var(--bs-chatbot-sources-drawer-header-padding-x) var(--bs-chatbot-sources-drawer-header-padding-bottom);
+  box-shadow: var(--bs-chatbot-sources-drawer-header-shadow);
+}
+
+.bs-chatbot-sources-drawer__title-group {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-chatbot-sources-drawer__heading {
+  margin: 0;
+  color: var(--bs-chatbot-sources-drawer-heading-color);
+  font-size: var(--bs-font-size-2xl);
+  font-weight: var(--bs-font-weight-bold);
+  /* --bs-line-height-heading-h4 is a bare number (32), meant as a px value -- unlike
+   * --bs-line-height-normal/snug/etc, which are true unitless ratios safe to use directly. */
+  line-height: calc(var(--bs-line-height-heading-h4) * 1px);
+}
+
+.bs-chatbot-sources-drawer__count {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  max-width: 34px;
+  padding: var(--bs-spacing-50) var(--bs-spacing-100);
+  background: var(--bs-chatbot-sources-drawer-count-bg);
+  border-radius: var(--bs-border-radius-50);
+  color: var(--bs-chatbot-sources-drawer-count-color);
+  font-size: var(--bs-font-size-xs);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+}
+
+.bs-chatbot-sources-drawer__collapse {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--bs-border-radius-100);
+  color: var(--bs-icon-default);
+  cursor: pointer;
+}
+
+.bs-chatbot-sources-drawer__collapse:hover {
+  background: var(--bs-chatbot-sources-drawer-collapse-hover);
+}
+
+.bs-chatbot-sources-drawer__collapse:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 1px;
+}
+
+.bs-chatbot-sources-drawer__list {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-chatbot-sources-drawer-list-gap);
+  /* No top padding -- the gap between header and list (--bs-chatbot-sources-drawer-section-gap)
+   * already provides that separation; adding padding here too would double it up. */
+  padding: 0 var(--bs-chatbot-sources-drawer-list-padding) var(--bs-chatbot-sources-drawer-list-padding);
+  overflow-y: auto;
+}