@carbon/ai-chat 0.3.2 → 0.3.3

package/dist/es/Input.js

@@ -0,0 +1,537 @@
+/**
+* @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 Attachment from '@carbon/icons-react/es/Attachment.js';
+import Send from '@carbon/icons-react/es/Send.js';
+import SendFilled from '@carbon/icons-react/es/SendFilled.js';
+import { Tag, FileUploaderItem, Button } from '@carbon/react';
+import { aR as CSS_CLASS_PREFIX, aE as ButtonKindEnum, aH as ButtonSizeEnum, aS as bind_1, aa as doFocusRef, Z as cx, aT as TagSize, w as actions, aU as isEnterKey, j as consoleError, ax as IS_MOBILE, aV as selectIsInputToAgent, aQ as uuid, aW as UUIDType, aX as isValidForUpload, aY as doScrollElementIntoView } from './AppContainer.js';
+import React__default, { PureComponent, forwardRef, useState, useRef, useImperativeHandle } from 'react';
+import { _ as __decorate, c as carbonElement, o, i as FileStatusValue } from './customElement.js';
+import '@carbon/web-components/es-custom/components/icon-button/index.js';
+import { toString } from '@carbon/icon-helpers';
+import StopFilled16 from '@carbon/icons/es/stop--filled/16.js';
+import { html, LitElement, css, unsafeCSS } from 'lit';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { property } from 'lit/decorators.js';
+import { u as useCounter } from './useCounter.js';
+
+const StopFilled16svg = toString(StopFilled16);
+function stopStreamingButtonTemplate({ label, disabled, tooltipAlignment, onClick, }) {
+    return html `
+    <cds-custom-icon-button
+      class="${CSS_CLASS_PREFIX}-stop-streaming-button"
+      align="${tooltipAlignment}"
+      kind="${ButtonKindEnum.GHOST}"
+      size="${ButtonSizeEnum.SMALL}"
+      ?disabled=${disabled}
+      @click="${onClick}"
+    >
+      <span class="${disabled ? `${CSS_CLASS_PREFIX}-stop-icon` : ''}" slot="icon">${unsafeSVG(StopFilled16svg)}</span>
+      <span slot="tooltip-content">${label}</span>
+    </cds-custom-icon-button>
+  `;
+}
+
+var css_248z = ".cds--aichat-stop-icon svg{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}";
+
+class StopStreamingButtonElement extends LitElement {
+    static { this.styles = css `
+    ${unsafeCSS(css_248z)}
+  `; }
+    /**
+     * Called when the user clicks the stop streaming button.
+     */
+    _handleOnClick() {
+        this.onClick();
+    }
+}
+__decorate([
+    property({ type: String, attribute: 'label' })
+], StopStreamingButtonElement.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: 'tooltip-alignment' })
+], StopStreamingButtonElement.prototype, "tooltipAlignment", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disabled' })
+], StopStreamingButtonElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Object })
+], StopStreamingButtonElement.prototype, "onClick", void 0);
+__decorate([
+    bind_1
+], StopStreamingButtonElement.prototype, "_handleOnClick", null);
+
+const STOP_STREAMING_BUTTON_TAG_NAME = 'cds-aichat-stop-streaming-button';
+/**
+ * Constructed class functionality for the stop streaming button.
+ */
+let CDSChatStopStreamingButtonElement = class CDSChatStopStreamingButtonElement extends StopStreamingButtonElement {
+    render() {
+        return stopStreamingButtonTemplate(this);
+    }
+};
+CDSChatStopStreamingButtonElement = __decorate([
+    carbonElement(STOP_STREAMING_BUTTON_TAG_NAME)
+], CDSChatStopStreamingButtonElement);
+var CDSChatStopStreamingButtonElement$1 = CDSChatStopStreamingButtonElement;
+
+const StopStreamingButton = o({
+    tagName: 'cds-aichat-stop-streaming-button',
+    elementClass: CDSChatStopStreamingButtonElement$1,
+    react: React__default,
+});
+
+/**
+ * A simple class that can track a set of listeners and then fire them when needed.
+ */
+class ListenerList {
+    constructor() {
+        /**
+         * The current set of listeners.
+         */
+        this.listeners = [];
+    }
+    /**
+     * Adds the given listener to the list.
+     */
+    addListener(listenerToAdd) {
+        this.listeners = [...this.listeners, listenerToAdd];
+    }
+    /**
+     * Removes all occurrences of the given listener from the list.
+     */
+    removeListener(listenerToRemove) {
+        this.listeners = this.listeners.filter(listener => listener !== listenerToRemove);
+    }
+    /**
+     * Calls all the listeners in the list passing each the given arguments.
+     */
+    fireListeners(...args) {
+        if (this.listeners.length) {
+            this.listeners.forEach(listener => listener(...args));
+        }
+    }
+}
+
+class TextArea extends PureComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * A React ref to the TextArea component.
+         */
+        this.textAreaRef = React__default.createRef();
+    }
+    static { this.defaultProps = {
+        // Default value for whether input in the text area is required before form submission.
+        isRequired: false,
+        // Default max character length for a text area is 10,000 characters.
+        maxLength: 10000,
+    }; }
+    /**
+     * Returns the HTML element.
+     */
+    getHTMLElement() {
+        return this.textAreaRef.current;
+    }
+    /**
+     * Instructs this component to put focus into the input text area.
+     */
+    takeFocus() {
+        doFocusRef(this.textAreaRef, false, true);
+    }
+    /**
+     * Causes the text area to blur.
+     */
+    doBlur() {
+        this.textAreaRef.current.blur();
+    }
+    render() {
+        const { isRequired, name, id, onFocus, onBlur, onClick, onChange, onKeyDown, rows, value, autoSize, maxLength, disabled, placeholder, ariaLabel, testId, onSelect, } = this.props;
+        // The extra ' ' in the sizer div below makes sure there's at least a space in the area to ensure that we get a
+        // min-height of one line of text.
+        return (React__default.createElement("div", { className: cx('WAC__TextArea', { 'WAC__TextArea--autoSize': autoSize, 'WAC__TextArea--disabled': disabled }) },
+            React__default.createElement("textarea", { ref: this.textAreaRef, "aria-label": ariaLabel, "aria-required": isRequired, className: "WAC__TextArea-textarea", disabled: disabled, id: id, maxLength: maxLength, name: name, onFocus: onFocus, onBlur: onBlur, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown, onSelect: onSelect, placeholder: placeholder, rows: rows, value: value || '', "data-enable-grammarly": false, "data-test-id": testId }),
+            autoSize && React__default.createElement("div", { className: "WAC__TextArea-sizer" }, value || placeholder || ' ')));
+    }
+}
+
+/**
+ * The size of the gap between input changes before we indicate that the user has stopped typing.
+ */
+const STOP_TYPING_PERIOD = 5000;
+/**
+ * The maximum number of characters to all the user to enter into the input field. The number was chosen to match
+ * the limit imposed by the API.
+ */
+const INPUT_MAX_CHARS = 2048;
+function Input(props, ref) {
+    const { inputType, isInputVisible, placeholder, disableInput, disableSend, disableUploadButton, pendingUploads, allowedFileUploadTypes, allowMultipleFileUploads, showUploadButton, onFilesSelectedForUpload, onSendInput, blurOnSend, serviceManager, onUserTyping, languagePack, inputCustomizations, isStopStreamingButtonVisible, isStopStreamingButtonDisabled, } = props;
+    const { onBeforeSend, getCompletions, onCompletionSelected } = inputCustomizations || {};
+    const inputID = `${serviceManager.namespace.suffix}-${useCounter()}`;
+    // Indicates if the text area currently has focus.
+    const [textAreaHasFocus, setTextAreaHasFocus] = useState(false);
+    // The current controlled value of the text area.
+    const [inputValue, setInputValue] = useState('');
+    // Indicates if handling of the enter key is enabled or not. If it's enabled, this component will call the
+    // onSendInput prop when a press of the enter key is detected.
+    const enterKeyEnabled = useRef(true);
+    // Indicates the user is currently typing.
+    const isTypingTimeout = useRef(null);
+    // A React ref to the TextArea component.
+    const textAreaRef = useRef();
+    // A React ref to the file Input element.
+    const fileInputRef = useRef();
+    // An array of functions that will be called when the text value changes.
+    const changeListeners = useRef(new ListenerList());
+    // The last text value that was sent to the change listeners.
+    const lastValue = useRef('');
+    // The reusable {@link InstanceInputElement} object that allows access and control over the input.
+    const instanceInputElement = useRef(createInstanceInputElement());
+    // A ref to the last completion Promise that was made.
+    const lastCompletion = useRef(null);
+    // A ref to the list box for the completions popup.
+    const completionsPopupRef = useRef(null);
+    // The current list of completions to display in the completions popup.
+    const [completionResults, setCompletionResults] = useState(null);
+    // The index of the currently highlighted completion. A value of -1 means none.
+    const [highlightedCompletion, setHighlightedCompletion] = useState(-1);
+    /**
+     * Scrolls the completion at the given index into view.
+     */
+    function scrollCompletion(index) {
+        const element = completionsPopupRef.current?.querySelector(`.WACInputCompletion:nth-child(${index + 1})`);
+        doScrollElementIntoView(element);
+    }
+    /**
+     * Closes the completion list and cancels any outstanding request.
+     */
+    function closeCompletions() {
+        if (completionResults) {
+            setCompletionResults(null);
+            setHighlightedCompletion(-1);
+        }
+        if (lastCompletion.current) {
+            lastCompletion.current.cancelled = true;
+            lastCompletion.current = null;
+        }
+    }
+    /**
+     * This is called when we have detected that the user has stopped typing.
+     */
+    function doTypingStopped() {
+        if (isTypingTimeout.current) {
+            clearTimeout(isTypingTimeout.current);
+            isTypingTimeout.current = null;
+            onUserTyping?.(false);
+        }
+    }
+    function doCompletionSelected(completionResults, index) {
+        const { completionStart, completionEnd, completions } = completionResults;
+        const completion = completions[index];
+        const { targetValue } = completion;
+        const newInput = inputValue.substring(0, completionStart) + targetValue + inputValue.substring(completionEnd, inputValue.length);
+        closeCompletions();
+        setInputValue(newInput);
+        onCompletionSelected?.(completion);
+        // Move the cursor to the end up the completion we just inserted.
+        setTimeout(() => {
+            const cursorPosition = completionStart + targetValue.length;
+            textAreaRef.current.getHTMLElement().setSelectionRange(cursorPosition, cursorPosition);
+        });
+    }
+    /**
+     * This is a callback which is called on each keydown event that occurs on the text area. This is used to capture
+     * the enter key, so we can send the entered text to the server.
+     */
+    function onKeyDown(event) {
+        if (isEnterKey(event)) {
+            if (highlightedCompletion !== -1) {
+                doCompletionSelected(completionResults, highlightedCompletion);
+                event.preventDefault();
+            }
+            else if (disableSend || !enterKeyEnabled.current) {
+                // If sending is disabled, stop the field from inserting a newline into the field.
+                event.preventDefault();
+            }
+            else {
+                send(event);
+            }
+        }
+        else if (completionResults) {
+            switch (event.key) {
+                case 'ArrowUp': {
+                    setHighlightedCompletion(currentValue => {
+                        const newValue = currentValue <= 0 ? completionResults.completions.length - 1 : currentValue - 1;
+                        scrollCompletion(newValue);
+                        return newValue;
+                    });
+                    event.preventDefault();
+                    break;
+                }
+                case 'ArrowDown': {
+                    setHighlightedCompletion(currentValue => {
+                        const newValue = currentValue >= completionResults.completions.length - 1 ? 0 : currentValue + 1;
+                        scrollCompletion(newValue);
+                        return newValue;
+                    });
+                    event.preventDefault();
+                    break;
+                }
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                case 'Home':
+                case 'End':
+                case 'Escape': {
+                    // If the user tries to move the cursor or presses escape, close the completions. We close on changes to
+                    // the cursor since it can be a little awkward if the user moves the cursor but then selects a value from
+                    // the completions list which will not be inserted where the cursor is. This also happens if a click
+                    // occurs on the input field.
+                    closeCompletions();
+                    break;
+                }
+            }
+        }
+    }
+    /**
+     * This is a callback which is called when a change event occurs on the textarea inside this input.
+     */
+    function onChange(event) {
+        const inputText = event.target.value;
+        if (onUserTyping) {
+            if (!isTypingTimeout.current) {
+                onUserTyping(true);
+            }
+            else {
+                clearTimeout(isTypingTimeout.current);
+            }
+            isTypingTimeout.current = setTimeout(doTypingStopped, STOP_TYPING_PERIOD);
+        }
+        if (getCompletions) {
+            closeCompletions();
+            handleCompletions(inputText).catch(error => consoleError('Error handling completions', error));
+        }
+        setInputValue(inputText);
+    }
+    /**
+     * Each time the text in the field changes, this will handle any possible completions that may need to be displayed.
+     */
+    async function handleCompletions(inputText) {
+        const { selectionStart } = textAreaRef.current.getHTMLElement();
+        // If a completion is currently running, then cancel it.
+        if (lastCompletion.current) {
+            lastCompletion.current.cancelled = true;
+        }
+        const completionPromise = getCompletions?.(inputText, selectionStart);
+        const cancelable = { cancelled: false, item: completionPromise };
+        lastCompletion.current = cancelable;
+        const result = await cancelable.item;
+        if (!cancelable.cancelled) {
+            if (!result?.completions?.length) {
+                setCompletionResults(null);
+            }
+            else {
+                setCompletionResults(result);
+            }
+            setHighlightedCompletion(-1);
+        }
+    }
+    function send(event) {
+        if (doHasValidInput()) {
+            event.preventDefault();
+            doTypingStopped();
+            closeCompletions();
+            const text = inputValue.trim();
+            const payload = onBeforeSend?.();
+            onSendInput(text, payload);
+            // Reset the value of the field.
+            setInputValue('');
+            if (blurOnSend) {
+                textAreaRef.current.doBlur();
+            }
+            else {
+                textAreaRef.current.takeFocus();
+            }
+        }
+    }
+    /**
+     * Called when the input field gets focus.
+     */
+    function onInputFocus() {
+        setTextAreaHasFocus(true);
+    }
+    /**
+     * Called when the input field loses focus.
+     */
+    function onInputBlur() {
+        setTextAreaHasFocus(false);
+    }
+    /**
+     * Instructs this component to put focus into the input text area. This only applies to desktop devices.
+     */
+    function takeFocus() {
+        if (!IS_MOBILE && isInputVisible) {
+            textAreaRef.current.takeFocus();
+        }
+    }
+    /**
+     * Creates an instance of {@link InstanceInputElement}.
+     */
+    function createInstanceInputElement() {
+        return {
+            getHTMLElement: () => textAreaRef?.current?.getHTMLElement(),
+            setValue: (value) => setInputValue(value),
+            setEnableEnterKey: (isEnabled) => {
+                enterKeyEnabled.current = isEnabled;
+            },
+            addChangeListener: (listener) => changeListeners.current.addListener(listener),
+            removeChangeListener: (listener) => changeListeners.current.removeListener(listener),
+        };
+    }
+    /**
+     * Given a base string, add modifiers to an element id to ensure it is unique based off of context.
+     */
+    function getElementId(baseId, isTestingId) {
+        const elementID = baseId;
+        const withInputType = inputType ? `--${inputType}` : '';
+        const withNamespace = isTestingId ? '' : serviceManager.namespace.suffix;
+        return `${elementID}${withInputType}${withNamespace}`;
+    }
+    /**
+     * The callback that is called when the user removes a file from the upload area.
+     */
+    function onRemoveFile(fileID) {
+        const isInputToAgent = selectIsInputToAgent(serviceManager.store.getState());
+        serviceManager.store.dispatch(actions.removeFileUpload(fileID, isInputToAgent));
+        // After we remove the file, we need to move focus back to the input field.
+        textAreaRef.current.takeFocus();
+    }
+    /**
+     * The callback that is called when the user selects a file using the file input.
+     */
+    function onFileChange(event) {
+        const isInputToAgent = selectIsInputToAgent(serviceManager.store.getState());
+        const { dispatch } = serviceManager.store;
+        const { files } = event.target;
+        const newFiles = [];
+        for (let index = 0; index < files.length; index++) {
+            const newFile = { id: uuid(UUIDType.FILE), status: FileStatusValue.EDIT, file: files[index] };
+            newFiles.push(newFile);
+            dispatch(actions.addInputFile(newFile, isInputToAgent));
+        }
+        onFilesSelectedForUpload?.(newFiles);
+        // Clear the file input. We're controlling the file list.
+        fileInputRef.current.value = null;
+    }
+    /**
+     * Determines if there is anything valid that the user could send.
+     */
+    function doHasValidInput() {
+        const hasUploads = Boolean(pendingUploads?.length);
+        if (hasUploads) {
+            if (pendingUploads.find(upload => !isValidForUpload(upload))) {
+                // If there are any files that are in error, the user cannot send the message.
+                return false;
+            }
+        }
+        return Boolean(inputValue.trim()) || hasUploads;
+    }
+    // If the input field becomes disabled, we don't get a blur event so make sure to remove the focus indicator.
+    if (textAreaHasFocus && disableInput) {
+        setTextAreaHasFocus(false);
+    }
+    // If the input field loses focus, close the completions.
+    if (!textAreaHasFocus && completionResults) {
+        closeCompletions();
+    }
+    useImperativeHandle(ref, () => ({
+        takeFocus,
+        getMessageInput: () => instanceInputElement.current,
+    }));
+    const { input_buttonLabel, input_placeholder, input_ariaLabel, input_uploadButtonLabel, input_stopResponse } = languagePack;
+    const useInputValue = disableInput ? '' : inputValue;
+    const hasValidInput = doHasValidInput();
+    const showDisabledSend = !hasValidInput || disableInput || disableSend;
+    const showUploadButtonDisabled = disableUploadButton || disableInput;
+    const uploadButtonID = `WACInputContainer__UploadInput-${inputID}`;
+    const isRTL = document.dir === 'rtl';
+    // If the input field is disabled, don't show a placeholder (unless one is provided).
+    const usePlaceHolder = placeholder || (disableInput ? undefined : input_placeholder);
+    if (lastValue.current !== inputValue) {
+        lastValue.current = inputValue;
+        changeListeners.current.fireListeners(inputValue);
+    }
+    return (isInputVisible && (React__default.createElement("div", { className: cx('WACInputAndCompletions', {
+            'WACInputAndCompletions--completionsOpen': completionResults,
+        }) },
+        completionResults && (React__default.createElement("div", { className: "WACInputCompletions" },
+            React__default.createElement("ul", { ref: completionsPopupRef, className: "WACInputCompletions__Menu cds--list-box__menu" }, completionResults.completions.map((completion, index) => {
+                return (
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+                React__default.createElement("li", { 
+                    // eslint-disable-next-line react/no-array-index-key
+                    key: index, className: cx('WACInputCompletion cds--list-box__menu-item', {
+                        'WACInputCompletion--selected': index === highlightedCompletion,
+                        'WACInputCompletion--afterSelected': index === highlightedCompletion + 1,
+                    }), onClick: () => doCompletionSelected(completionResults, index), 
+                    // This onMouseDown prevents the browser from moving focus away from the input field.
+                    onMouseDown: event => event.preventDefault() },
+                    React__default.createElement("div", { className: "WACInputCompletions__MenuItem cds--list-box__menu-item__option" },
+                        React__default.createElement("div", { className: "WACInputCompletions__MenuItemLabel" }, completion.label),
+                        completion.tag && (React__default.createElement(Tag, { className: "WACInputCompletions__MenuItemTag", type: completion.tag.type, size: TagSize.SMALL }, completion.tag.label)))));
+            })))),
+        React__default.createElement("div", { className: cx('WACInputContainer', {
+                'WACInputContainer--hasFocus': textAreaHasFocus,
+                'WACInputContainer--showUploadButton': showUploadButton,
+            }) },
+            React__default.createElement("div", { className: "WACInputContainer__LeftContainer" },
+                React__default.createElement("div", { className: "WACInputContainer__TextAndUpload" },
+                    showUploadButton && (React__default.createElement("div", { className: "WACInputContainer__UploadButtonContainer" },
+                        React__default.createElement("input", { ref: fileInputRef, accept: allowedFileUploadTypes, id: uploadButtonID, className: "WACVisuallyHidden WACInputContainer__UploadInput", type: "file", "aria-label": input_uploadButtonLabel, onChange: onFileChange, multiple: allowMultipleFileUploads, disabled: showUploadButtonDisabled }),
+                        React__default.createElement("label", { className: cx('WACInputContainer__UploadButton', {
+                                'WACInputContainer__UploadButton--disabled': showUploadButtonDisabled,
+                            }), htmlFor: uploadButtonID },
+                            React__default.createElement(Attachment, null)))),
+                    React__default.createElement(TextArea, { autoSize: true, ariaLabel: input_ariaLabel, disabled: disableInput, maxLength: INPUT_MAX_CHARS, onChange: onChange, onKeyDown: onKeyDown, onClick: closeCompletions, placeholder: usePlaceHolder, value: useInputValue, ref: textAreaRef, onFocus: onInputFocus, onBlur: onInputBlur, id: getElementId('WACInputContainer-TextArea'), testId: getElementId('WACInputContainer-TextArea', true) })),
+                Boolean(pendingUploads?.length) && (React__default.createElement("div", { className: "WACInputContainer__FilesContainer" }, pendingUploads.map((fileUpload, index) => {
+                    return (React__default.createElement(FileUploaderItem
+                    // eslint-disable-next-line react/no-array-index-key
+                    , { 
+                        // eslint-disable-next-line react/no-array-index-key
+                        key: index, iconDescription: languagePack.fileSharing_removeButtonTitle, name: fileUpload.file.name, status: FileStatusValue.EDIT, errorSubject: fileUpload.errorMessage, invalid: fileUpload.isError, size: ButtonSizeEnum.SMALL, onDelete: () => onRemoveFile(fileUpload.id) }));
+                })))),
+            React__default.createElement("div", { className: "WACInputContainer__SendButtonContainer" },
+                isStopStreamingButtonVisible && (React__default.createElement(StopStreamingButton, { label: input_stopResponse, disabled: isStopStreamingButtonDisabled, tooltipAlignment: "top", onClick: () => {
+                        const { store } = serviceManager;
+                        const { currentStreamID } = store.getState().botInputState.stopStreamingButtonState;
+                        store.dispatch(actions.setStopStreamingButtonDisabled(true));
+                        serviceManager.fire({ type: "stopStreaming" /* BusEventType.STOP_STREAMING */ });
+                        // If we have an assistant stream ID, then tell the message service to stop the stream.
+                        if (currentStreamID) {
+                            serviceManager.messageService.stopStreaming(currentStreamID);
+                        }
+                    } })),
+                React__default.createElement(Button, { className: "WACInputContainer__SendButton", kind: ButtonKindEnum.GHOST, size: ButtonSizeEnum.SMALL, id: getElementId('WACInputContainer__SendButton'), type: "button", onClick: send, "aria-label": input_buttonLabel, disabled: showDisabledSend, renderIcon: hasValidInput ? SendFilled : Send, iconDescription: input_buttonLabel, tooltipAlignment: isRTL ? 'start' : 'end', tooltipPosition: "top", hasIconOnly: true }))))));
+}
+const InputExport = React__default.memo(forwardRef(Input));
+
+export { InputExport as I };