import { h } from "@stencil/core";
import { debounce, generateUUID } from "../../utils/utils";
import { DEFAULT_SHORTCUTS } from "../../utils/keyboard-shortcuts";
export class InputForm {
    constructor() {
        // private customWidth = "100%"
        // private icon_width: string
        // private icon_height: string
        this.instanceId = `input-${generateUUID()}`;
        this.imagesBase64List = [];
        this.showShortcutsDialog = false;
        this.shortcuts = DEFAULT_SHORTCUTS;
        this.componentType = "search";
        this.chatLength = 0;
        this.searchInput = "";
        this.submitted = false;
        this.showErrorMessage = false;
        this.hideAllButtons = false;
        this.isOpen = false;
        this.capturedFile = null;
        this.errorMessage = "You can upload a maximum of 10 images once at a time.";
        this.emptyMessageError = false;
        this.announceMessage = "";
        this.adjustHeight = () => {
            this.searchInputElem.style.height = "auto";
            this.searchInputElem.style.height = this.searchInputElem.scrollHeight + "px";
        };
        this.handleInputChange = (e) => {
            this.searchInput = this.searchInputElem.value;
            if (this.isChat) {
                return;
            }
            // console.log("handleInputChange", this.searchInputElem.value)
            const value = this.searchInputElem.value;
            if (value.length > 3 && !this.isChat) {
                this.action.emit({ event: e, value: value, type: "search", imgFiles: this.imagesBase64List });
            }
        };
        this.handleClickOutside = (event) => {
            const target = event.target;
            if (this.isOpen && this.menuElem && !this.menuElem.contains(target)) {
                this.isOpen = false;
            }
        };
        this.handleFormSubmit = (e) => {
            e.preventDefault();
            if (this.searchInput.length > 3) {
                this.action.emit({ event: e, value: this.searchInputElem.value, type: "search" });
            }
        };
        this.handleKeyDown = (event) => {
            // if (event.key === "Enter" && event.shiftKey) {
            //   console.log("Shift + Enter detected")
            //   // Prevent default behavior if needed
            // }
            if (event.key === "Enter" && !event.shiftKey) {
                event.preventDefault();
                // console.log("Enter key pressed", this.searchInputElem.value, this.imagesBase64List)
                if (this.searchInputElem.value.trim() !== "" || this.imagesBase64List.length > 0) {
                    this.handleAskAI(event);
                }
                else if (this.imagesBase64List.length === 0 && this.searchInputElem.value.trim() === "") {
                    // Show error when Enter is pressed with empty message
                    this.emptyMessageError = true;
                    this.searchInputElem.focus();
                    setTimeout(() => {
                        this.emptyMessageError = false;
                    }, 3000);
                }
            }
        };
        this.handleFollowUp = (e) => {
            this.action.emit({ event: e, value: this.searchInputElem.value, imgFiles: this.imagesBase64List, type: "follow-up", followUp: false /*this.followUpElem.checked*/ });
        };
        this.handleRecentChat = (e) => {
            this.action.emit({ event: e, value: this.searchInputElem.value, type: "history" });
        };
        this.handleAskAI = (e) => {
            var _a, _b;
            e.preventDefault();
            if (this.searchInputElem.value.trim() === "" && this.imagesBase64List.length === 0) {
                this.emptyMessageError = true;
                this.searchInputElem.focus();
                // Clear error after 3 seconds
                setTimeout(() => {
                    this.emptyMessageError = false;
                }, 3000);
                return;
            }
            this.submitted = true;
            this.showErrorMessage = false;
            this.emptyMessageError = false;
            this.announce("Message sent successfully");
            this.tempValue = this.searchInputElem.value;
            this.searchInputElem.value = "";
            const tempImages = this.imagesBase64List;
            this.imagesBase64List = [];
            // console.log("Handling Ask AI with value:", this.searchInputElem.value , this.tempValue)
            this.action.emit({ event: e, value: this.tempValue, imgFiles: tempImages, followUp: (_b = (_a = this.followUpElem) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false, type: "ask-ai" });
        };
        this.handleImageChange = event => {
            this.imagesBase64List = event.detail;
            this.showErrorMessage = false;
        };
        this.handleImageError = event => {
            this.errorMessage = event.detail;
            this.showErrorMessage = true;
        };
        this.toggleBox = e => {
            e.stopPropagation();
            this.isOpen = !this.isOpen;
        };
        // Replace your existing handlePaste method with this enhanced version
        this.handlePaste = (event) => {
            var _a;
            event.preventDefault(); // Prevent default paste behavior
            // console.log("Text pasted into textarea")
            const pastedText = ((_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData("text")) || "";
            if (this.searchInputElem && pastedText) {
                const textarea = this.searchInputElem;
                const startPos = textarea.selectionStart;
                const endPos = textarea.selectionEnd;
                const currentValue = textarea.value;
                // Replace selected text or insert at cursor position
                const newValue = currentValue.substring(0, startPos) + pastedText + currentValue.substring(endPos);
                // Update the textarea value
                textarea.value = newValue;
                // Set cursor position after pasted text
                const newCursorPos = startPos + pastedText.length;
                textarea.setSelectionRange(newCursorPos, newCursorPos);
                // Adjust height after paste
                setTimeout(() => {
                    this.adjustHeight();
                }, 0);
            }
        };
    }
    disconnectedCallback() {
        // console.log("disconnectedCallback input.tsx")
        // Clean up event listeners to avoid memory leaks
        document.removeEventListener("click", this.handleClickOutside);
        // Remove any other cleanup logic if necessary
        // Image upload logic moved to ImageUploader component
    }
    componentDidLoad() {
        // console.log("componentWillLoad input.tsx")
        if (!this.isImageUpload)
            return;
        // const preivewContainer = this.el.querySelector(".custom-input")
        document.addEventListener("click", this.handleClickOutside);
    }
    stateChangedHandler(_state) {
        this.submitted = false;
        if (this.isChat) {
            this.searchInputElem.value = "";
            this.searchInput = "";
            const parent = this.el.querySelector(`#previewContainer-${this.instanceId}`);
            const textarea = this.el.querySelector(`#searchInput-${this.instanceId}`);
            // textarea["style"].height = "20px"
            textarea["style"].overflow = "hidden";
            if (parent) {
                parent.innerHTML = "";
            }
            this.imagesBase64List = [];
        }
    }
    clearInputHandler(_state) {
        this.submitted = false;
        this.searchInput = "";
        const parent = this.el.querySelector(`#previewContainer-${this.instanceId}`);
        if (parent) {
            parent.innerHTML = "";
        }
        this.imagesBase64List = [];
        this.searchInputElem.style.height = "auto";
    }
    announce(message) {
        this.announceMessage = message;
        setTimeout(() => {
            this.announceMessage = "";
        }, 1000);
    }
    async captureScreen() {
        try {
            const stream = await navigator.mediaDevices.getDisplayMedia({
                video: true, // Capture the screen
            });
            const video = document.createElement("video");
            video.srcObject = stream;
            video.autoplay = true;
            document.body.appendChild(video); // Add temporarily to allow rendering
            // // Ensure the page stays in focus
            // document.body.focus()
            await new Promise(resolve => (video.onloadedmetadata = resolve));
            // Ensure the video is playing before capturing
            await new Promise(resolve => setTimeout(resolve, 500));
            const canvas = document.createElement("canvas");
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            const ctx = canvas.getContext("2d");
            if (ctx) {
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                // Convert canvas to Blob
                canvas.toBlob(blob => {
                    if (blob) {
                        const file = new File([blob], `screenshot-${Date.now()}.png`, { type: "image/png" });
                        this.capturedFile = file;
                        this.capturedImgUpload.emit([file]);
                        // TODO: Integrate with ImageUploader to handle the captured file
                        // Example: emit an event or update state to pass file to ImageUploader
                    }
                }, "image/png");
            }
            // Stop video stream after capture
            stream.getTracks().forEach(track => track.stop());
            // Remove the video element from the DOM
            document.body.removeChild(video);
        }
        catch (err) {
            console.error("Error capturing screen:", err);
        }
    }
    render() {
        //To get the query params of the iconSrc
        // if (this.iconSrc) {
        //   const url = new URL(this.iconSrc)
        //   this.icon_width = url.searchParams.get("w") || "28"
        //   this.icon_height = url.searchParams.get("h") || "28"
        // }
        return (h("div", { key: '623f7b93a8fee68a98ffe0d15fe49232c928d541' }, h("div", { key: '33fa75b886a6d845785ab7ad4be2cba4437deead', class: `absolute left-0 w-48 bg-white rounded-lg shadow-lg transition-all duration-300 ease-in-out z-10
  ${this.isOpen ? "opacity-100 scale-100 pointer-events-auto" : "opacity-0 scale-90 pointer-events-none"}`, ref: el => (this.menuElem = el) }, h("ul", { key: 'c7a41dcf7bbb7d3b52d3adac6f7871553d082a97', class: "space-y-2" }, this.isImageUpload && (h("li", { key: '4efc17c2a136caf0b8bfc2fba39622a1bab801c9', class: "px-4 py-2 hover:bg-gray-100 cursor-pointer flex" }, h("image-uploader", { key: '8c669dda8dd81f4a24da8232938bbd6cae65ad7f', maxImages: 10, images: this.imagesBase64List, targetElement: this.searchInputElem, onImagesChange: this.handleImageChange, onError: this.handleImageError, ref: el => (this.imageUploaderRef = el) }))), h("li", { key: '5fc6b84028c421a57c9b4c3ed36a1b19c6833546', class: "px-4 pb-2 hover:bg-gray-100 cursor-pointer flex", onClick: e => {
                this.captureScreen();
                this.toggleBox(e);
            } }, h("div", { key: '20cd5b58b14938dde41c3ec82a4d204ddaebea4d', class: "mr-1 mt-px" }, h("svg", { key: 'c740a9f51839e41055786d23fd7b4ed44ed29324', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20" }, h("path", { key: 'f8516209c60f8478b6b6e510ceff2ec0a6fb57cd', d: "M12 9a3.75 3.75 0 1 0 0 7.5A3.75 3.75 0 0 0 12 9Z" }), h("path", { key: '8c59bd0faf944dedc4b311cf6c7403e4e8c79689', "fill-rule": "evenodd", d: "M9.344 3.071a49.52 49.52 0 0 1 5.312 0c.967.052 1.83.585 2.332 1.39l.821 1.317c.24.383.645.643 1.11.71.386.054.77.113 1.152.177 1.432.239 2.429 1.493 2.429 2.909V18a3 3 0 0 1-3 3h-15a3 3 0 0 1-3-3V9.574c0-1.416.997-2.67 2.429-2.909.382-.064.766-.123 1.151-.178a1.56 1.56 0 0 0 1.11-.71l.822-1.315a2.942 2.942 0 0 1 2.332-1.39ZM6.75 12.75a5.25 5.25 0 1 1 10.5 0 5.25 5.25 0 0 1-10.5 0Zm12-1.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z", "clip-rule": "evenodd" }))), h("div", { key: 'e10bf86ebd212649837dfad5094d9f39c0555af4' }, "Capture")), h("li", { key: 'd2b7a298b838ed7259019e26f211a09d69f328b5', class: "px-4 pb-2 hover:bg-gray-100 cursor-pointer flex", "aria-label": "Start Over", "aria-disabled": this.chatLength === 0, style: { opacity: this.chatLength === 0 ? "0.5" : "1", cursor: this.chatLength === 0 ? "not-allowed" : "pointer" }, onClick: e => {
                if (this.chatLength === 0)
                    return;
                // const escapeEvent = new KeyboardEvent("keydown", { key: "Escape" })
                // document.dispatchEvent(escapeEvent)
                this.handleFollowUp(e);
                this.toggleBox(e);
            } }, h("div", { key: '95729576e7131a1bcde5edf2f00704e3979f0168', class: "mr-1 mt-px" }, h("svg", { key: 'aca3169ad3c1933750e6e70156ff3aafa9cb700e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: 'f09ce7b4c487d62f744ab255274120d648cebd0c', d: "M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" }))), h("div", { key: '22838c5639850ca1520b5859188cd0cc7f62ae78' }, "Start Over")), h("li", { key: '0625819dc4f37253f68674ae2f41169abd7249d3', class: "px-4 pb-2 hover:bg-gray-100 cursor-pointer flex", "aria-label": "View Recent Chat", onClick: e => {
                // console.log("View Recent Chat")
                this.handleRecentChat(e);
            } }, h("div", { key: '1bd82e7a2f97481c5215af8b5d67ec71d2c69719', class: "mr-1 mt-px" }, h("svg", { key: '1a88182d117cadac2c5c491578533860b008cf75', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '1e75ddfc584d70d0ada8008463ea08d8d0ac6623', d: "M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z" }), h("path", { key: 'd1db69ed6ae7f982b1839204e52a90c32630f1fb', d: "M12 7v5l3 2" }))), h("div", { key: '813b01482c85e7b63908facb41c4a48f226ecd3b' }, "View Recent Chat")))), h("form", { key: 'b810bd80536347059124d3827e26502e03a97092', class: "w-full flex flex-col gap-1.5 sticky", onSubmit: this.handleFormSubmit }, h("div", { key: 'f69b95ec734d662c3e88cdc93aa15f8983f380a7', class: `flex-1 flex flex-col relative w-full rounded-3xl px-1 ${this.componentType === "inline" ? "inline-searchbar-bgcolor" : "searchbar-bgcolor"}`, dir: "LTR", ref: el => (this.searchFormElem = el) }, h("div", { key: 'c64d576d4675e5993fcecde579f4a992da296a3f', class: "flex items-center" }, h("div", { key: 'e41c8a31a3775a409810f12f856dd6bb5113b67d', class: "ml-1 self-center flex space-x-1" }, !this.hideAllButtons && (h("div", { key: '7614880c9a53a7e99ead7090637185b996b7cc2e', class: "relative inline-block", style: { width: "5%" } }, h("button", { key: 'edfcedc1fe6e77f2da4d26a60aad3748683ca6ef', class: "plus-icon", "aria-label": "Options", title: "Add images or capture screen", tabindex: "0", onClick: e => {
                e.stopPropagation();
                this.toggleBox(e);
            } }, h("svg", { key: '123d73fdd31ea56f503df593818a05f5574c6fdb', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", width: "20", height: "20" }, h("path", { key: 'cded16c28c1421bc4c9d4b9f18af6411309a22ba', d: "M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" })))))), !this.hideAllButtons && (h("div", { key: '9b0213ad6586daecb71c46941b17108f13c58048', class: "scrollbar-hidden text-left bg-transparent dark:text-gray-100 outline-none w-full rounded-xl resize-none h-fit max-h-80 overflow-auto" }, h("div", { key: '619ef140b69574f9b5f6b56d3d7dc8355163fbc1', class: "relative w-full min-w-full h-full min-h-fit flex items-center input-prose" }, h("div", { key: 'a972c24cc5748376eedced77c91dffd331054293', id: `previewContainer-${this.instanceId}`, draggable: true }), h("label", { key: 'b515979270ffdbf8024951c04a826888539a0e64', htmlFor: `searchInput-${this.instanceId}`, class: "sr-only" }, "Your message"), h("textarea", { key: '32123cab1fb36680b6e62a53e975988434721974', readOnly: this.submitted, "aria-describedby": this.emptyMessageError ? `message-error-${this.instanceId} search-hint-${this.instanceId}` : `search-hint-${this.instanceId}`, "aria-invalid": this.emptyMessageError, id: `searchInput-${this.instanceId}`, ref: el => {
                this.searchInputElem = el;
                el === null || el === void 0 ? void 0 : el.focus();
            }, placeholder: this.placeholder, autoComplete: "off", class: "w-full p-1 custom-input", value: this.searchInput, rows: 1, onInput: debounce(e => this.handleInputChange(e), 500), onKeyUp: this.adjustHeight, onKeyDown: this.handleKeyDown, onFocus: () => this.searchFormElem.classList.add("input-focus-color"), onBlur: () => this.searchFormElem.classList.remove("input-focus-color"), onPaste: e => {
                this.handlePaste(e);
            } }), h("div", { key: '4ced8688e0edac2ed1f8a30ea7c0e1099b09e331', role: "status", "aria-live": "polite", "aria-atomic": "true", class: "sr-only" }, this.announceMessage), h("span", { key: '114b87fb5a67f955503a87624e402722cad00276', class: "sr-only" }, "Press Enter to send, Shift+Enter for new line")))), h("div", { key: 'd9ce04f9657eba2ed56116f3e51ceba84f518052', class: "p-1 self-end flex space-x-1 flex-row", style: { width: this.hideAllButtons ? "100%" : "auto" } }, h("div", { key: 'a4752b743e10f5c90e0c7d03192d64e6ba8d2c08', "aria-label": "Record voice", class: "flex self-center", style: { width: this.hideAllButtons ? "100%" : "auto" } }, this.isEnableMic && (h("audio-recorder", { key: 'e195ba053e5aeb6d017bccf44c01a3a6df2a684c', "component-type": "cta", onStartRecord: _ev => {
                // console.log("test", ev)
                this.hideAllButtons = true;
            }, onStopRecord: _ev => {
                this.hideAllButtons = false;
            }, onSendTranscript: ev => {
                // console.log("ev", ev)
                setTimeout(() => {
                    // console.log("input", this.searchInputElem)
                    if (this.searchInputElem) {
                        this.searchInputElem.value = ev.detail;
                        this.searchInputElem.focus();
                        // Wait for DOM to update
                        requestAnimationFrame(() => {
                            this.adjustHeight();
                        });
                    }
                }, 1000);
            }, style: { width: "100%" } }))), " ", !this.hideAllButtons && (h("div", { key: 'bd7cbc198fbeb575c0105f686683ff0b0a7cd078', class: "flex items-center" }, h("div", { key: '50b9e47852a3830eb9fbf0915d75d994924990fd', "aria-label": "Send message", class: "flex" }, h("button", { key: '15299d903700edfebc1a7084940e2fd6100ccce3', id: `send-message-button-${this.instanceId}`, class: "btn-bg-color text-white transition rounded-full p-1.5 self-center",
            // type="submit"
            disabled: this.submitted, onClick: this.handleAskAI, tabindex: "0", "aria-label": "Send Message", title: "Send Message" }, h("svg", { key: 'f27771c390def50b54ec73c295d2c29f4193fafb', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", class: "size-6" }, h("path", { key: 'c1c893815c40e536537c0c9f1e486666ad2bb0c9', "fill-rule": "evenodd", d: "M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z", "clip-rule": "evenodd" })))))))), this.imagesBase64List.length > 0 && (h("div", { key: '3f67411ac3c2f9decf28c5e73767c587744619a5', class: "flex flex-wrap gap-2 mx-1 mt-2.5 mb-1" }, this.imagesBase64List.map((img, idx) => (h("div", { class: "image-Container sc-ai12z-input-form", key: idx }, h("img", { src: img, style: { width: "70px", height: "50px", borderRadius: ".75rem" } }), h("span", { class: "delete-image sc-ai12z-input-form cursor-pointer ml-1", onClick: () => {
                this.imagesBase64List = this.imagesBase64List.filter((_, i) => i !== idx);
                if (this.imageUploaderRef && typeof this.imageUploaderRef.removeImageAtIndex === "function") {
                    this.imageUploaderRef.removeImageAtIndex(idx);
                }
            } }, "\u00D7"))))))), this.showErrorMessage && (h("div", { key: '868075f816f1704f7a033e44c58b457d3221773d', class: "flex" }, " ", h("p", { key: 'b3f13d96e369071675db049057032c5e2df64e97', class: "error-msg", innerHTML: this.errorMessage }))), this.emptyMessageError && (h("div", { key: 'bdda68e0bdf5067c5c188a33652925453afde468', class: "flex" }, h("p", { key: 'bc9f69e378e0b6ad52f9c4420c6db64343ea3be2', id: `message-error-${this.instanceId}`, class: "error-msg", role: "alert" }, "Message cannot be empty. Please enter a message to send."))), this.chatLength === 0 && (h("div", { key: '5927e7b9968e6dc33cf3f6f4a61c3d3a5e2c86a0', class: "enter-tip", role: "tooltip" }, "Tip: Press Enter to send, Shift+Enter for new line", " ", h("button", { key: 'b6cc8c60952881f38a68913949f63647e4dedd3f', onClick: () => (this.showShortcutsDialog = true), class: "keyboard-shortcuts-btn", "aria-label": "Show keyboard shortcuts", title: "Keyboard shortcuts (?)", tabindex: "0" }, h("svg", { key: 'a1330e6d41582e0af855b76a463eb4d5ba5b1c14', width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { key: 'c1e6d8628ad15d82d90d686e7f1608c0b0a1b65d', cx: "12", cy: "12", r: "10" }), h("path", { key: 'a339edfb79c587493f9935e19ac3db6439906d11', d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }), h("line", { key: '9a5a90516a6dbaef064ad268712ada0ba9877d4f', x1: "12", y1: "17", x2: "12.01", y2: "17" })))))), this.showShortcutsDialog && (h("keyboard-shortcuts-dialog", { key: '6f92ef187ba852baf48a50418028ed36ab6ce8dd', show: this.showShortcutsDialog, shortcuts: this.shortcuts, onCloseDialog: () => (this.showShortcutsDialog = false) }))));
    }
    static get is() { return "ai12z-input-form"; }
    static get originalStyleUrls() {
        return {
            "$": ["./input.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["input.css"]
        };
    }
    static get properties() {
        return {
            "isChat": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-chat"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder"
            },
            "buttonText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "button-text"
            },
            "followUpLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "follow-up-label"
            },
            "iconSrc": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon-src"
            },
            "isImageUpload": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-image-upload"
            },
            "isEnableMic": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-enable-mic"
            },
            "componentType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "component-type",
                "defaultValue": "\"search\""
            },
            "chatLength": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "chat-length",
                "defaultValue": "0"
            },
            "dataKey": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "data-key"
            },
            "dataMode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "data-mode"
            }
        };
    }
    static get states() {
        return {
            "imagesBase64List": {},
            "showShortcutsDialog": {},
            "shortcuts": {},
            "searchInput": {},
            "submitted": {},
            "showErrorMessage": {},
            "hideAllButtons": {},
            "isOpen": {},
            "capturedFile": {},
            "errorMessage": {},
            "emptyMessageError": {},
            "announceMessage": {}
        };
    }
    static get events() {
        return [{
                "method": "action",
                "name": "action",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "capturedImgUpload",
                "name": "capturedImgUpload",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "File[]",
                    "resolved": "File[]",
                    "references": {
                        "File": {
                            "location": "global",
                            "id": "global::File"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "stateChanged",
                "method": "stateChangedHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }, {
                "name": "clearInput",
                "method": "clearInputHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
