@carbon/ai-chat 0.3.2 → 0.3.3

package/dist/es/VideoComponent.js

@@ -0,0 +1,241 @@
+/**
+* @license
+* 
+* (C) Copyright IBM Corp. 2017, 2025. All Rights Reserved.
+* 
+* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+* in compliance with the License. You may obtain a copy of the License at
+* 
+* http://www.apache.org/licenses/LICENSE-2.0
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License
+* is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+* or implied. See the License for the specific language governing permissions and limitations under
+* the License.
+* 
+* @carbon/ai-chat 0.3.2
+* 
+* Built: Jul 9 2025 11:10 am -04:00
+* 
+* 
+*/
+
+import { AISkeletonText, SkeletonText as SkeletonText$1, AISkeletonPlaceholder, SkeletonPlaceholder as SkeletonPlaceholder$1, Tile, unstable__AiSkeletonPlaceholder } from '@carbon/react';
+import { Z as cx, ak as VisuallyHidden, bG as lazyMediaPlayer, _ as useLanguagePack, bl as useAriaAnnouncer, b9 as usePrevious, bH as RESPONSE_TYPE_TIMEOUT_MS, bn as getResponsiveElementPaddingValue, bk as getURLHostName } from './AppContainer.js';
+import React__default, { useState, useRef, useCallback, useEffect, Suspense } from 'react';
+import { I as InlineError } from './InlineError.js';
+import Music from '@carbon/icons-react/es/Music.js';
+import { useSelector } from 'react-redux';
+import { j as MessageResponseTypes } from './customElement.js';
+
+function SkeletonText(props) {
+    const useAITheme = useSelector((state) => state.theme.useAITheme);
+    return useAITheme ? React__default.createElement(AISkeletonText, { ...props }) : React__default.createElement(SkeletonText$1, { ...props });
+}
+function SkeletonPlaceholder(props) {
+    const useAITheme = useSelector((state) => state.theme.useAITheme);
+    return useAITheme ? React__default.createElement(AISkeletonPlaceholder, { ...props }) : React__default.createElement(SkeletonPlaceholder$1, { ...props });
+}
+
+/**
+ * This component renders the Textual part of the cards - more specifically Title, description, favicon URL
+ * or default fallback icon. In the case of Iframes, this also renders the URL part. Also renders a launch icon in
+ * the case of text-only cards
+ */
+function TextHolderTile({ title, description, displayURL, urlHostName, hideTitle }) {
+    return (React__default.createElement("div", { className: "WACTextHolderTile" },
+        React__default.createElement("div", { className: cx('WACTextHolderTile__Wrapper', 'WACWidget__textEllipsis', {
+                WACTextHolderTile__IconMargin: !displayURL,
+            }) },
+            !hideTitle && title && React__default.createElement("div", { className: "WACTextHolderTile__Title" }, title),
+            description && (React__default.createElement("div", { className: cx('WACTextHolderTile__Description', { WACTextHolderTile__DescriptionMargin: title }) }, description)),
+            displayURL && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(VisuallyHidden, null, urlHostName),
+                React__default.createElement("div", { className: cx('WACTextHolderTile__Url', 'WACWidget__textEllipsis', {
+                        WACTextHolderTile__UrlMargin: title || description,
+                    }), "aria-hidden": true }, displayURL))))));
+}
+
+// https://reactjs.org/docs/code-splitting.html#reactlazy
+const ReactPlayerComponent = lazyMediaPlayer();
+/**
+ * This component uses the React player library to handle rendering video/audio files, as well as handling third-party
+ * embeddable video/audio services. Learn more: https://github.com/cookpete/react-player
+ *
+ * Note: We force media files to render using a video element for accessibility purposes since the audio element doesn't
+ * support WebVTT for captioning/transcripts, but the video element does.
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#accessibility_concerns
+ */
+function MediaPlayerComponent({ type, source, title, description, ariaLabel, isMixcloud, baseHeight, doAutoScroll, playing, onPlay, onPause, hideIconAndTitle, needsAnnouncement, }) {
+    const [skeletonHidden, setSkeletonHidden] = useState(false);
+    const [errorLoading, setErrorLoading] = useState(false);
+    const { errors_audioSource, errors_videoSource } = useLanguagePack();
+    const ariaAnnouncer = useAriaAnnouncer();
+    const rootElementRef = useRef();
+    const paddingTop = isMixcloud ? '120px' : getResponsiveElementPaddingValue(baseHeight);
+    const isAudio = type === MessageResponseTypes.AUDIO;
+    const errorMessage = isAudio ? errors_audioSource : errors_videoSource;
+    const prevSource = usePrevious(source);
+    // This ref is for merely saving the initial value of shouldAnnounce prop.
+    const shouldAnnounceRef = useRef(needsAnnouncement);
+    /**
+     * Upon an error, update the error loading flag in order to render an inline error.
+     */
+    const handleError = useCallback(() => {
+        setErrorLoading(true);
+        setSkeletonHidden(true);
+    }, []);
+    useEffect(() => {
+        if (source !== prevSource && skeletonHidden) {
+            setSkeletonHidden(false);
+        }
+    }, [prevSource, skeletonHidden, source]);
+    // This effect sets a timeout that auto error handles after 10 seconds of waiting for the React player to ready.
+    // Once the player has loaded, the skeleton will be hidden, and we can clear the timeout.
+    useEffect(() => {
+        let errorTimeout = null;
+        if (!skeletonHidden) {
+            errorTimeout = setTimeout(handleError, RESPONSE_TYPE_TIMEOUT_MS);
+        }
+        return () => {
+            clearTimeout(errorTimeout);
+        };
+    }, [skeletonHidden, handleError]);
+    useEffect(() => {
+        if (skeletonHidden && shouldAnnounceRef.current) {
+            ariaAnnouncer(rootElementRef.current);
+        }
+    }, [ariaAnnouncer, skeletonHidden]);
+    /**
+     * Once the video player is finished loading, remove the skeleton.
+     */
+    const handleReady = useCallback(() => {
+        if (!skeletonHidden) {
+            setSkeletonHidden(true);
+            doAutoScroll?.();
+        }
+    }, [doAutoScroll, skeletonHidden]);
+    /**
+     * Renders a media player skeleton. This is rendered until the react-player has loaded the provided url.
+     */
+    function renderMediaPlayerSkeleton() {
+        return (React__default.createElement(Tile, { className: "WACMediaPlayer__Skeleton" },
+            React__default.createElement("div", { className: "WACMediaPlayer__SkeletonContainer", style: { paddingTop } },
+                React__default.createElement(SkeletonPlaceholder, { className: "WACMediaPlayer__SkeletonPlayer" })),
+            (title || description) && (React__default.createElement("div", { className: "WACMediaPlayer__SkeletonTextContainer" },
+                React__default.createElement(SkeletonText, { paragraph: true, lineCount: 2 })))));
+    }
+    /**
+     * Render a media player background that adds letterboxes to urls utilizing iframes that may not have them included
+     * already. If an audio file is being played, we should display a music icon in the center since audio files will be
+     * loaded using a video element and a 16:9 blank video element with controls playing audio would look weird.
+     */
+    function renderMediaPlayerBackground() {
+        return (React__default.createElement("div", { className: cx('WACMediaPlayer__Background', {
+                'WACMediaPlayer__Background--audio': isAudio,
+            }) }, isAudio && React__default.createElement(Music, { size: 32, className: "WACMediaPlayer__MusicIcon" })));
+    }
+    /**
+     * If the dynamically imported react-player component is in suspense, we don't need to display some loading indicator
+     * since the media player skeleton handles that for us and the media player is hidden with `display: none` until the
+     * react-player has loaded the url.
+     */
+    function renderSuspenseFallback() {
+        return React__default.createElement(React__default.Fragment, null);
+    }
+    return (React__default.createElement(React__default.Fragment, null,
+        !skeletonHidden && renderMediaPlayerSkeleton(),
+        React__default.createElement("div", { className: "WACMediaPlayer__Root", ref: rootElementRef },
+            errorLoading && React__default.createElement(InlineError, { text: errorMessage }),
+            !errorLoading && (React__default.createElement(Tile, { className: cx('WACMediaPlayer', { WAC__hidden: !skeletonHidden }) },
+                React__default.createElement("div", { className: "WACMediaPlayer__Wrapper", style: { paddingTop } },
+                    renderMediaPlayerBackground(),
+                    React__default.createElement(Suspense, { fallback: renderSuspenseFallback() },
+                        React__default.createElement(ReactPlayerComponent, { className: "WACMediaPlayer__Player", url: source, controls: true, width: "100%", height: "100%", config: {
+                                file: {
+                                    forceVideo: true,
+                                    attributes: {
+                                        controlsList: 'nodownload',
+                                        'aria-label': ariaLabel || description || title,
+                                    },
+                                },
+                            }, playsinline: true, playing: playing, onPlay: onPlay, onPause: onPause, onReady: handleReady, onError: handleError, pip: true }))),
+                (title || description) && (React__default.createElement(TextHolderTile, { title: title, description: description, hideTitle: hideIconAndTitle })))))));
+}
+const MediaPlayerExport = React__default.memo(MediaPlayerComponent);
+
+function Image(props) {
+    const { imageError, title, description, displayURL, hideIconAndTitle, needsAnnouncement, renderIcon, inline } = props;
+    const ariaAnnouncer = useAriaAnnouncer();
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [isError, setIsError] = useState(false);
+    const rootRef = useRef();
+    // This ref is for merely saving the initial value of shouldAnnounce prop.
+    const needsAnnouncementRef = useRef(needsAnnouncement);
+    const hasText = Boolean(title || description || displayURL);
+    const Icon = renderIcon;
+    // This effect announces the contents of this response type once the image has loaded.
+    useEffect(() => {
+        if (isLoaded && needsAnnouncementRef.current) {
+            ariaAnnouncer(rootRef.current);
+        }
+    }, [ariaAnnouncer, isLoaded]);
+    if (isError) {
+        return React__default.createElement(InlineError, { text: imageError });
+    }
+    if (inline) {
+        return (React__default.createElement(ImageOnly, { ...props, setIsError: setIsError, setIsLoaded: setIsLoaded, isError: isError, isLoaded: isLoaded }));
+    }
+    return (React__default.createElement(Tile, { ref: rootRef, className: cx('WACImage', {
+            WACImage__TextAndIcon: hasText && Boolean(renderIcon),
+            WACImage__IconOnly: !hideIconAndTitle && !title && !description && Boolean(renderIcon),
+        }) },
+        React__default.createElement("div", { className: "WACImage__ImageWrapper" },
+            React__default.createElement(ImageOnly, { ...props, setIsError: setIsError, setIsLoaded: setIsLoaded, isError: isError, isLoaded: isLoaded })),
+        hasText && (React__default.createElement(TextHolderTile, { title: title, description: description, displayURL: displayURL, urlHostName: displayURL && getURLHostName(displayURL), hideTitle: hideIconAndTitle })),
+        Boolean(Icon) && (React__default.createElement(Icon, { className: cx('WACImage__Icon', 'WACDirectionHasReversibleSVG', { 'WACImage__Icon--link': displayURL }) }))));
+}
+function ImageOnly({ source, title, description, altText, displayURL, preventInlineError, onImageLoad, useAITheme, isLoaded, isError, setIsLoaded, setIsError, className, inline, }) {
+    const [isImageHidden, setIsImageHidden] = useState(false);
+    const imageAlt = altText || title || description || '';
+    const hasText = Boolean(title || description || displayURL);
+    /**
+     * Upon an error, update the error loading flag in order to render an inline error.
+     */
+    const handleError = useCallback(() => {
+        if (preventInlineError && hasText) {
+            setIsImageHidden(true);
+        }
+        else {
+            setIsError(true);
+        }
+    }, [preventInlineError, hasText, setIsError]);
+    // This effect sets a timeout that auto error handles after 10 seconds of waiting for the image to load. Once the
+    // image has loaded, the skeleton will be hidden, and we can clear the timeout.
+    useEffect(() => {
+        let errorTimeout = null;
+        if (!isLoaded) {
+            errorTimeout = setTimeout(handleError, RESPONSE_TYPE_TIMEOUT_MS);
+        }
+        return () => {
+            clearTimeout(errorTimeout);
+        };
+    }, [isLoaded, handleError]);
+    return (React__default.createElement(React__default.Fragment, null,
+        !isLoaded && !isImageHidden && !inline && source && (React__default.createElement(React__default.Fragment, null, useAITheme ? (React__default.createElement(unstable__AiSkeletonPlaceholder, { className: "WACImage__Skeleton" })) : (React__default.createElement(SkeletonPlaceholder$1, { className: "WACImage__Skeleton" })))),
+        !isError && !isImageHidden && source && (React__default.createElement("img", { className: cx('WACImage__Image', {
+                [className]: className,
+                'WACImage__Image--loaded': isLoaded,
+            }), src: source, alt: imageAlt, onLoad: () => {
+                onImageLoad?.();
+                setIsLoaded(true);
+            }, onError: handleError }))));
+}
+const ImageExport = React__default.memo(Image);
+
+function VideoComponent({ ...props }) {
+    return React__default.createElement(MediaPlayerExport, { type: MessageResponseTypes.VIDEO, ...props });
+}
+const VideoComponentExport = React__default.memo(VideoComponent);
+
+export { ImageExport as I, MediaPlayerExport as M, SkeletonText as S, VideoComponentExport as V, SkeletonPlaceholder as a };

package/dist/es/ViewSourcePanel.js

@@ -0,0 +1,85 @@
+/**
+* @license
+* 
+* (C) Copyright IBM Corp. 2017, 2025. All Rights Reserved.
+* 
+* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+* in compliance with the License. You may obtain a copy of the License at
+* 
+* http://www.apache.org/licenses/LICENSE-2.0
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License
+* is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+* or implied. See the License for the specific language governing permissions and limitations under
+* the License.
+* 
+* @carbon/ai-chat 0.3.2
+* 
+* Built: Jul 9 2025 11:10 am -04:00
+* 
+* 
+*/
+
+import React__default, { forwardRef } from 'react';
+import { useSelector } from 'react-redux';
+import { _ as useLanguagePack, a0 as useServiceManager, bT as BasePanelComponentExport, w as actions } from './AppContainer.js';
+import { a as SearchResultBodyWithCitationHighlightedExport, S as SearchResultBodyExport } from './SearchResultBody.js';
+import './customElement.js';
+import 'react-intl';
+import '@carbon/react';
+import '@carbon/icons-react/es/AiLaunch.js';
+import '@carbon/icons-react/es/ArrowUpLeft.js';
+import '@carbon/icons-react/es/ChatLaunch.js';
+import '@carbon/icons-react/es/Close.js';
+import '@carbon/icons-react/es/Information.js';
+import '@carbon/icons-react/es/Home.js';
+import '@carbon/web-components/es-custom/components/slug/index.js';
+import '@carbon/icons-react/es/CloseLarge.js';
+import '@carbon/icons-react/es/DownToBottom.js';
+import '@carbon/icons-react/es/Menu.js';
+import '@carbon/icons-react/es/Restart.js';
+import '@carbon/icons-react/es/SidePanelClose.js';
+import '@carbon/icons-react/es/SubtractLarge.js';
+import '@carbon/web-components/es-custom/components/ai-label/defs.js';
+import '@carbon/web-components/es-custom/components/popover/defs.js';
+import '@carbon/web-components/es-custom/components/skeleton-icon/index.js';
+import 'lit';
+import 'lit/decorators.js';
+import '@carbon/web-components/es-custom/components/button/index.js';
+import '@carbon/web-components/es-custom/components/overflow-menu/index.js';
+import '@carbon/icons-react/es/ChevronDown.js';
+import '@carbon/icons-react/es/ChevronUp.js';
+import 'react-dom';
+import '@carbon/web-components/es-custom/components/ai-label/ai-label-action-button.js';
+import '@carbon/web-components/es-custom/components/ai-label/ai-label.js';
+
+/**
+ * This panel is used to show the text of a conversational search citation.
+ */
+function ViewSourcePanel(props, ref) {
+    const languagePack = useLanguagePack();
+    const { store } = useServiceManager();
+    const { isOpen, citationItem, relatedSearchResult } = useSelector((state) => state.viewSourcePanelState);
+    let content;
+    if (citationItem && 'text' in citationItem) {
+        // If text is in the citation item then this is a conversational search source that is being shown.
+        if (relatedSearchResult) {
+            // If there is a related search result than show the search result body with the citation text highlighted.
+            content = (React__default.createElement(SearchResultBodyWithCitationHighlightedExport, { relatedSearchResult: relatedSearchResult, citationItem: citationItem }));
+        }
+        else {
+            // If there is no related search result than show the citation text.
+            content = citationItem.text;
+        }
+    }
+    else {
+        // If the citation is not for a conversational search response then it must be for a legacy search result so we
+        // should show the search result body.
+        content = React__default.createElement(SearchResultBodyExport, { searchResult: citationItem });
+    }
+    return (React__default.createElement(BasePanelComponentExport, { ...props, ref: ref, className: "WACViewSourcePanel", isOpen: isOpen, onClickBack: () => store.dispatch(actions.setViewSourcePanelIsOpen(false)), title: citationItem?.title, labelBackButton: languagePack.general_ariaCloseInformationOverlay, eventName: "Search citation panel opened", eventDescription: "A user has opened the search citation panel" },
+        React__default.createElement("div", { className: "WACViewSourcePanel__Content" }, content)));
+}
+const ViewSourcePanelExport = forwardRef(ViewSourcePanel);
+
+export { ViewSourcePanelExport as ViewSourcePanel };

package/dist/es/ZendeskServiceDesk.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */

package/dist/es/_node-resolve_empty.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */

package/dist/es/aiChatEntry.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */

package/dist/es/ar-dz.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */

package/dist/es/ar-kw.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */

package/dist/es/ar-ly.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */

package/dist/es/ar-ma.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */

package/dist/es/ar-sa.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */

package/dist/es/ar-tn.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */

package/dist/es/ar.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */

package/dist/es/ar2.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */

package/dist/es/cds-aichat-code.js

@@ -0,0 +1,103 @@
+/**
+* @license
+* 
+* (C) Copyright IBM Corp. 2017, 2025. All Rights Reserved.
+* 
+* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+* in compliance with the License. You may obtain a copy of the License at
+* 
+* http://www.apache.org/licenses/LICENSE-2.0
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License
+* is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+* or implied. See the License for the specific language governing permissions and limitations under
+* the License.
+* 
+* @carbon/ai-chat 0.3.2
+* 
+* Built: Jul 2 2025 2:29 pm -04:00
+* 
+* 
+*/
+
+import { _ as __decorate, c as carbonElement } from './customElement.js';
+import { LitElement, css, unsafeCSS, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { t as throttle } from './RichText.js';
+import 'react';
+import './AppContainer.js';
+import 'react-intl';
+import '@carbon/react';
+import 'react-redux';
+import '@carbon/icons-react/es/AiLaunch.js';
+import '@carbon/icons-react/es/ArrowUpLeft.js';
+import '@carbon/icons-react/es/ChatLaunch.js';
+import '@carbon/icons-react/es/Close.js';
+import '@carbon/icons-react/es/Information.js';
+import '@carbon/icons-react/es/Home.js';
+import '@carbon/web-components/es-custom/components/slug/index.js';
+import '@carbon/icons-react/es/CloseLarge.js';
+import '@carbon/icons-react/es/DownToBottom.js';
+import '@carbon/icons-react/es/Menu.js';
+import '@carbon/icons-react/es/Restart.js';
+import '@carbon/icons-react/es/SidePanelClose.js';
+import '@carbon/icons-react/es/SubtractLarge.js';
+import '@carbon/web-components/es-custom/components/ai-label/defs.js';
+import '@carbon/web-components/es-custom/components/popover/defs.js';
+import '@carbon/web-components/es-custom/components/skeleton-icon/index.js';
+import '@carbon/web-components/es-custom/components/button/index.js';
+import '@carbon/web-components/es-custom/components/overflow-menu/index.js';
+import '@carbon/icons-react/es/ChevronDown.js';
+import '@carbon/icons-react/es/ChevronUp.js';
+import 'react-dom';
+import '@carbon/web-components/es-custom/components/ai-label/ai-label-action-button.js';
+import '@carbon/web-components/es-custom/components/ai-label/ai-label.js';
+import 'lit/directives/repeat.js';
+import 'lit/directives/unsafe-html.js';
+
+var css_248z = ":host-context(.cds--g100) pre code.hljs,:host-context(.cds--g90) pre code.hljs{display:block;overflow-x:auto;padding:1em}:host-context(.cds--g100) code.hljs,:host-context(.cds--g90) code.hljs{padding:3px 5px}:host-context(.cds--g100) .hljs,:host-context(.cds--g90) .hljs{background:#2b2b2b;color:#f8f8f2}:host-context(.cds--g100) .hljs-comment,:host-context(.cds--g100) .hljs-quote,:host-context(.cds--g90) .hljs-comment,:host-context(.cds--g90) .hljs-quote{color:#d4d0ab}:host-context(.cds--g100) .hljs-deletion,:host-context(.cds--g100) .hljs-name,:host-context(.cds--g100) .hljs-regexp,:host-context(.cds--g100) .hljs-selector-class,:host-context(.cds--g100) .hljs-selector-id,:host-context(.cds--g100) .hljs-tag,:host-context(.cds--g100) .hljs-template-variable,:host-context(.cds--g100) .hljs-variable,:host-context(.cds--g90) .hljs-deletion,:host-context(.cds--g90) .hljs-name,:host-context(.cds--g90) .hljs-regexp,:host-context(.cds--g90) .hljs-selector-class,:host-context(.cds--g90) .hljs-selector-id,:host-context(.cds--g90) .hljs-tag,:host-context(.cds--g90) .hljs-template-variable,:host-context(.cds--g90) .hljs-variable{color:#ffa07a}:host-context(.cds--g100) .hljs-built_in,:host-context(.cds--g100) .hljs-link,:host-context(.cds--g100) .hljs-literal,:host-context(.cds--g100) .hljs-meta,:host-context(.cds--g100) .hljs-number,:host-context(.cds--g100) .hljs-params,:host-context(.cds--g100) .hljs-type,:host-context(.cds--g90) .hljs-built_in,:host-context(.cds--g90) .hljs-link,:host-context(.cds--g90) .hljs-literal,:host-context(.cds--g90) .hljs-meta,:host-context(.cds--g90) .hljs-number,:host-context(.cds--g90) .hljs-params,:host-context(.cds--g90) .hljs-type{color:#f5ab35}:host-context(.cds--g100) .hljs-attribute,:host-context(.cds--g90) .hljs-attribute{color:gold}:host-context(.cds--g100) .hljs-addition,:host-context(.cds--g100) .hljs-bullet,:host-context(.cds--g100) .hljs-string,:host-context(.cds--g100) .hljs-symbol,:host-context(.cds--g90) .hljs-addition,:host-context(.cds--g90) .hljs-bullet,:host-context(.cds--g90) .hljs-string,:host-context(.cds--g90) .hljs-symbol{color:#abe338}:host-context(.cds--g100) .hljs-section,:host-context(.cds--g100) .hljs-title,:host-context(.cds--g90) .hljs-section,:host-context(.cds--g90) .hljs-title{color:#00e0e0}:host-context(.cds--g100) .hljs-keyword,:host-context(.cds--g100) .hljs-selector-tag,:host-context(.cds--g90) .hljs-keyword,:host-context(.cds--g90) .hljs-selector-tag{color:#dcc6e0}:host-context(.cds--g100) .hljs-emphasis,:host-context(.cds--g90) .hljs-emphasis{font-style:italic}:host-context(.cds--g100) .hljs-strong,:host-context(.cds--g90) .hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){:host-context(.cds--g100) .hljs-addition,:host-context(.cds--g100) .hljs-attribute,:host-context(.cds--g100) .hljs-built_in,:host-context(.cds--g100) .hljs-bullet,:host-context(.cds--g100) .hljs-comment,:host-context(.cds--g100) .hljs-link,:host-context(.cds--g100) .hljs-literal,:host-context(.cds--g100) .hljs-meta,:host-context(.cds--g100) .hljs-number,:host-context(.cds--g100) .hljs-params,:host-context(.cds--g100) .hljs-quote,:host-context(.cds--g100) .hljs-string,:host-context(.cds--g100) .hljs-symbol,:host-context(.cds--g100) .hljs-type,:host-context(.cds--g90) .hljs-addition,:host-context(.cds--g90) .hljs-attribute,:host-context(.cds--g90) .hljs-built_in,:host-context(.cds--g90) .hljs-bullet,:host-context(.cds--g90) .hljs-comment,:host-context(.cds--g90) .hljs-link,:host-context(.cds--g90) .hljs-literal,:host-context(.cds--g90) .hljs-meta,:host-context(.cds--g90) .hljs-number,:host-context(.cds--g90) .hljs-params,:host-context(.cds--g90) .hljs-quote,:host-context(.cds--g90) .hljs-string,:host-context(.cds--g90) .hljs-symbol,:host-context(.cds--g90) .hljs-type{color:highlight}:host-context(.cds--g100) .hljs-keyword,:host-context(.cds--g100) .hljs-selector-tag,:host-context(.cds--g90) .hljs-keyword,:host-context(.cds--g90) .hljs-selector-tag{font-weight:700}}:host-context(.cds--g10) pre code.hljs,:host-context(.cds--white) pre code.hljs{display:block;overflow-x:auto;padding:1em}:host-context(.cds--g10) code.hljs,:host-context(.cds--white) code.hljs{padding:3px 5px}:host-context(.cds--g10) .hljs,:host-context(.cds--white) .hljs{background:#fefefe;color:#545454}:host-context(.cds--g10) .hljs-comment,:host-context(.cds--g10) .hljs-quote,:host-context(.cds--white) .hljs-comment,:host-context(.cds--white) .hljs-quote{color:#696969}:host-context(.cds--g10) .hljs-deletion,:host-context(.cds--g10) .hljs-name,:host-context(.cds--g10) .hljs-regexp,:host-context(.cds--g10) .hljs-selector-class,:host-context(.cds--g10) .hljs-selector-id,:host-context(.cds--g10) .hljs-tag,:host-context(.cds--g10) .hljs-template-variable,:host-context(.cds--g10) .hljs-variable,:host-context(.cds--white) .hljs-deletion,:host-context(.cds--white) .hljs-name,:host-context(.cds--white) .hljs-regexp,:host-context(.cds--white) .hljs-selector-class,:host-context(.cds--white) .hljs-selector-id,:host-context(.cds--white) .hljs-tag,:host-context(.cds--white) .hljs-template-variable,:host-context(.cds--white) .hljs-variable{color:#d91e18}:host-context(.cds--g10) .hljs-built_in,:host-context(.cds--g10) .hljs-link,:host-context(.cds--g10) .hljs-literal,:host-context(.cds--g10) .hljs-meta,:host-context(.cds--g10) .hljs-number,:host-context(.cds--g10) .hljs-params,:host-context(.cds--g10) .hljs-type,:host-context(.cds--white) .hljs-built_in,:host-context(.cds--white) .hljs-link,:host-context(.cds--white) .hljs-literal,:host-context(.cds--white) .hljs-meta,:host-context(.cds--white) .hljs-number,:host-context(.cds--white) .hljs-params,:host-context(.cds--white) .hljs-type{color:#aa5d00}:host-context(.cds--g10) .hljs-attribute,:host-context(.cds--white) .hljs-attribute{color:#aa5d00}:host-context(.cds--g10) .hljs-addition,:host-context(.cds--g10) .hljs-bullet,:host-context(.cds--g10) .hljs-string,:host-context(.cds--g10) .hljs-symbol,:host-context(.cds--white) .hljs-addition,:host-context(.cds--white) .hljs-bullet,:host-context(.cds--white) .hljs-string,:host-context(.cds--white) .hljs-symbol{color:green}:host-context(.cds--g10) .hljs-section,:host-context(.cds--g10) .hljs-title,:host-context(.cds--white) .hljs-section,:host-context(.cds--white) .hljs-title{color:#007faa}:host-context(.cds--g10) .hljs-keyword,:host-context(.cds--g10) .hljs-selector-tag,:host-context(.cds--white) .hljs-keyword,:host-context(.cds--white) .hljs-selector-tag{color:#7928a1}:host-context(.cds--g10) .hljs-emphasis,:host-context(.cds--white) .hljs-emphasis{font-style:italic}:host-context(.cds--g10) .hljs-strong,:host-context(.cds--white) .hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){:host-context(.cds--g10) .hljs-addition,:host-context(.cds--g10) .hljs-attribute,:host-context(.cds--g10) .hljs-built_in,:host-context(.cds--g10) .hljs-bullet,:host-context(.cds--g10) .hljs-comment,:host-context(.cds--g10) .hljs-link,:host-context(.cds--g10) .hljs-literal,:host-context(.cds--g10) .hljs-meta,:host-context(.cds--g10) .hljs-number,:host-context(.cds--g10) .hljs-params,:host-context(.cds--g10) .hljs-quote,:host-context(.cds--g10) .hljs-string,:host-context(.cds--g10) .hljs-symbol,:host-context(.cds--g10) .hljs-type,:host-context(.cds--white) .hljs-addition,:host-context(.cds--white) .hljs-attribute,:host-context(.cds--white) .hljs-built_in,:host-context(.cds--white) .hljs-bullet,:host-context(.cds--white) .hljs-comment,:host-context(.cds--white) .hljs-link,:host-context(.cds--white) .hljs-literal,:host-context(.cds--white) .hljs-meta,:host-context(.cds--white) .hljs-number,:host-context(.cds--white) .hljs-params,:host-context(.cds--white) .hljs-quote,:host-context(.cds--white) .hljs-string,:host-context(.cds--white) .hljs-symbol,:host-context(.cds--white) .hljs-type{color:highlight}:host-context(.cds--g10) .hljs-keyword,:host-context(.cds--g10) .hljs-selector-tag,:host-context(.cds--white) .hljs-keyword,:host-context(.cds--white) .hljs-selector-tag{font-weight:700}}pre{font-family:var(--cds-code-02-font-family,\"IBM Plex Mono\",system-ui,-apple-system,BlinkMacSystemFont,\".SFNSText-Regular\",monospace);font-size:var(--cds-code-02-font-size,14px);font-weight:var(--cds-code-02-font-weight,400);line-height:var(--cds-code-02-line-height,1.42857);letter-spacing:var(--cds-code-02-letter-spacing,.32px);border:1px solid var(--cds-chat-bubble-border,#e0e0e0);background-color:var(--cds-layer-02,#fff);overflow:auto hidden;padding:16px;white-space:pre-wrap}";
+
+let CDSChatCodeElement = class CDSChatCodeElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.language = '';
+        this.content = '';
+        this.throttledHighlight = throttle(async () => {
+            try {
+                const { default: hljs } = await import('./common.js');
+                const codeEl = this.renderRoot.querySelector('code');
+                let content = '';
+                if (this.language && hljs.getLanguage(this.language)) {
+                    content = hljs.highlight(this.content, { language: this.language }).value;
+                }
+                else {
+                    content = hljs.highlightAuto(this.content).value;
+                }
+                if (codeEl) {
+                    codeEl.innerHTML = content;
+                }
+            }
+            catch (error) {
+                console.warn(`Language "${this.language}" could not be loaded.`);
+            }
+        }, 100); // adjust delay as needed
+    }
+    static { this.styles = css `
+    ${unsafeCSS(css_248z)}
+  `; }
+    updated() {
+        this.throttledHighlight();
+    }
+    render() {
+        return html `<pre><code class="language-${this.language}"></code></pre>`;
+    }
+};
+__decorate([
+    property({ type: String })
+], CDSChatCodeElement.prototype, "language", void 0);
+__decorate([
+    property({ type: String })
+], CDSChatCodeElement.prototype, "content", void 0);
+CDSChatCodeElement = __decorate([
+    carbonElement(`cds-aichat-code`)
+], CDSChatCodeElement);

package/dist/es/cds-aichat-container.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */
@@ -156,7 +156,7 @@ let ChatContainer = class ChatContainer extends LitElement {
         };
     }
     addWriteableElementSlots() {
-        const writeableElementSlots = [this._instance.customPanels.getPanel().hostElement.getAttribute('slot')];
+        const writeableElementSlots = [];
         Object.keys(this._instance.writeableElements).forEach(writeableElementKey => {
             writeableElementSlots.push(writeableElementKey);
         });

package/dist/es/cds-aichat-custom-element.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */