devextreme-vue/esm/chat.js

DevExtreme UI and Visualization Components for Vue

/*!
 * devextreme-vue
 * Version: 26.1.4
 * Build date: Fri Jul 24 2026
 *
 * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
 *
 * This software may be modified and distributed under the terms
 * of the MIT license. See the LICENSE file in the root of the project for details.
 *
 * https://github.com/DevExpress/DevExtreme
 */

import { defineComponent } from "vue";
import { prepareComponentConfig } from "./core/index";
import Chat from "devextreme/ui/chat";
import { prepareConfigurationComponentConfig } from "./core/index";
const componentConfig = {
    props: {
        accessKey: String,
        activeStateEnabled: Boolean,
        alerts: Array,
        dataSource: [Array, Object, String],
        dayHeaderFormat: [Object, String, Function],
        disabled: Boolean,
        editing: Object,
        elementAttr: Object,
        emptyViewTemplate: {},
        fileUploaderOptions: Object,
        focusStateEnabled: Boolean,
        height: [Number, String],
        hint: String,
        hoverStateEnabled: Boolean,
        inputFieldText: String,
        items: Array,
        messageTemplate: {},
        messageTimestampFormat: [Object, String, Function],
        onAttachmentDownloadClick: Function,
        onDisposing: Function,
        onInitialized: Function,
        onInputFieldTextChanged: Function,
        onMessageDeleted: Function,
        onMessageDeleting: Function,
        onMessageEditCanceled: Function,
        onMessageEditingStart: Function,
        onMessageEntered: Function,
        onMessageUpdated: Function,
        onMessageUpdating: Function,
        onOptionChanged: Function,
        onTypingEnd: Function,
        onTypingStart: Function,
        reloadOnChange: Boolean,
        rtlEnabled: Boolean,
        sendButtonOptions: Object,
        showAvatar: Boolean,
        showDayHeaders: Boolean,
        showMessageTimestamp: Boolean,
        showUserName: Boolean,
        speechToTextEnabled: Boolean,
        speechToTextOptions: Object,
        suggestions: Object,
        typingUsers: Array,
        user: Object,
        visible: Boolean,
        width: [Number, String]
    },
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:accessKey": null,
        "update:activeStateEnabled": null,
        "update:alerts": null,
        "update:dataSource": null,
        "update:dayHeaderFormat": null,
        "update:disabled": null,
        "update:editing": null,
        "update:elementAttr": null,
        "update:emptyViewTemplate": null,
        "update:fileUploaderOptions": null,
        "update:focusStateEnabled": null,
        "update:height": null,
        "update:hint": null,
        "update:hoverStateEnabled": null,
        "update:inputFieldText": null,
        "update:items": null,
        "update:messageTemplate": null,
        "update:messageTimestampFormat": null,
        "update:onAttachmentDownloadClick": null,
        "update:onDisposing": null,
        "update:onInitialized": null,
        "update:onInputFieldTextChanged": null,
        "update:onMessageDeleted": null,
        "update:onMessageDeleting": null,
        "update:onMessageEditCanceled": null,
        "update:onMessageEditingStart": null,
        "update:onMessageEntered": null,
        "update:onMessageUpdated": null,
        "update:onMessageUpdating": null,
        "update:onOptionChanged": null,
        "update:onTypingEnd": null,
        "update:onTypingStart": null,
        "update:reloadOnChange": null,
        "update:rtlEnabled": null,
        "update:sendButtonOptions": null,
        "update:showAvatar": null,
        "update:showDayHeaders": null,
        "update:showMessageTimestamp": null,
        "update:showUserName": null,
        "update:speechToTextEnabled": null,
        "update:speechToTextOptions": null,
        "update:suggestions": null,
        "update:typingUsers": null,
        "update:user": null,
        "update:visible": null,
        "update:width": null,
    },
    computed: {
        instance() {
            return this.$_instance;
        }
    },
    beforeCreate() {
        this.$_WidgetClass = Chat;
        this.$_hasAsyncTemplate = true;
        this.$_expectedChildren = {
            alert: { isCollectionItem: true, optionName: "alerts" },
            chatItem: { isCollectionItem: true, optionName: "items" },
            dayHeaderFormat: { isCollectionItem: false, optionName: "dayHeaderFormat" },
            editing: { isCollectionItem: false, optionName: "editing" },
            fileUploaderOptions: { isCollectionItem: false, optionName: "fileUploaderOptions" },
            item: { isCollectionItem: true, optionName: "items" },
            messageTimestampFormat: { isCollectionItem: false, optionName: "messageTimestampFormat" },
            sendButtonOptions: { isCollectionItem: false, optionName: "sendButtonOptions" },
            speechToTextOptions: { isCollectionItem: false, optionName: "speechToTextOptions" },
            suggestions: { isCollectionItem: false, optionName: "suggestions" },
            typingUser: { isCollectionItem: true, optionName: "typingUsers" },
            user: { isCollectionItem: false, optionName: "user" }
        };
    }
};
prepareComponentConfig(componentConfig);
const DxChat = defineComponent(componentConfig);
const DxAlertConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:id": null,
        "update:message": null,
    },
    props: {
        id: [Number, String],
        message: String
    }
};
prepareConfigurationComponentConfig(DxAlertConfig);
const DxAlert = defineComponent(DxAlertConfig);
DxAlert.$_optionName = "alerts";
DxAlert.$_isCollectionItem = true;
const DxAttachmentConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:name": null,
        "update:size": null,
    },
    props: {
        name: String,
        size: Number
    }
};
prepareConfigurationComponentConfig(DxAttachmentConfig);
const DxAttachment = defineComponent(DxAttachmentConfig);
DxAttachment.$_optionName = "attachments";
DxAttachment.$_isCollectionItem = true;
const DxAuthorConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:avatarAlt": null,
        "update:avatarUrl": null,
        "update:id": null,
        "update:name": null,
    },
    props: {
        avatarAlt: String,
        avatarUrl: String,
        id: [Number, String],
        name: String
    }
};
prepareConfigurationComponentConfig(DxAuthorConfig);
const DxAuthor = defineComponent(DxAuthorConfig);
DxAuthor.$_optionName = "author";
const DxChatItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:alt": null,
        "update:attachments": null,
        "update:author": null,
        "update:id": null,
        "update:isDeleted": null,
        "update:isEdited": null,
        "update:src": null,
        "update:text": null,
        "update:timestamp": null,
        "update:type": null,
    },
    props: {
        alt: String,
        attachments: Array,
        author: Object,
        id: [Number, String],
        isDeleted: Boolean,
        isEdited: Boolean,
        src: String,
        text: String,
        timestamp: [Date, Number, String],
        type: String
    }
};
prepareConfigurationComponentConfig(DxChatItemConfig);
const DxChatItem = defineComponent(DxChatItemConfig);
DxChatItem.$_optionName = "items";
DxChatItem.$_isCollectionItem = true;
DxChatItem.$_expectedChildren = {
    attachment: { isCollectionItem: true, optionName: "attachments" },
    author: { isCollectionItem: false, optionName: "author" }
};
const DxCustomSpeechRecognizerConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:enabled": null,
        "update:isListening": null,
    },
    props: {
        enabled: Boolean,
        isListening: Boolean
    }
};
prepareConfigurationComponentConfig(DxCustomSpeechRecognizerConfig);
const DxCustomSpeechRecognizer = defineComponent(DxCustomSpeechRecognizerConfig);
DxCustomSpeechRecognizer.$_optionName = "customSpeechRecognizer";
const DxDayHeaderFormatConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:currency": null,
        "update:formatter": null,
        "update:parser": null,
        "update:precision": null,
        "update:type": null,
        "update:useCurrencyAccountingStyle": null,
    },
    props: {
        currency: String,
        formatter: Function,
        parser: Function,
        precision: Number,
        type: String,
        useCurrencyAccountingStyle: Boolean
    }
};
prepareConfigurationComponentConfig(DxDayHeaderFormatConfig);
const DxDayHeaderFormat = defineComponent(DxDayHeaderFormatConfig);
DxDayHeaderFormat.$_optionName = "dayHeaderFormat";
const DxEditingConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:allowDeleting": null,
        "update:allowUpdating": null,
    },
    props: {
        allowDeleting: [Boolean, Function],
        allowUpdating: [Boolean, Function]
    }
};
prepareConfigurationComponentConfig(DxEditingConfig);
const DxEditing = defineComponent(DxEditingConfig);
DxEditing.$_optionName = "editing";
const DxFileUploaderOptionsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:abortUpload": null,
        "update:accept": null,
        "update:accessKey": null,
        "update:activeStateEnabled": null,
        "update:allowCanceling": null,
        "update:allowedFileExtensions": null,
        "update:chunkSize": null,
        "update:dialogTrigger": null,
        "update:disabled": null,
        "update:dropZone": null,
        "update:elementAttr": null,
        "update:focusStateEnabled": null,
        "update:height": null,
        "update:hint": null,
        "update:hoverStateEnabled": null,
        "update:inputAttr": null,
        "update:invalidFileExtensionMessage": null,
        "update:invalidMaxFileSizeMessage": null,
        "update:invalidMinFileSizeMessage": null,
        "update:isDirty": null,
        "update:isValid": null,
        "update:labelText": null,
        "update:maxFileSize": null,
        "update:minFileSize": null,
        "update:multiple": null,
        "update:name": null,
        "update:onBeforeSend": null,
        "update:onContentReady": null,
        "update:onDisposing": null,
        "update:onDropZoneEnter": null,
        "update:onDropZoneLeave": null,
        "update:onFilesUploaded": null,
        "update:onInitialized": null,
        "update:onOptionChanged": null,
        "update:onProgress": null,
        "update:onUploadAborted": null,
        "update:onUploaded": null,
        "update:onUploadError": null,
        "update:onUploadStarted": null,
        "update:onValueChanged": null,
        "update:progress": null,
        "update:readOnly": null,
        "update:readyToUploadMessage": null,
        "update:rtlEnabled": null,
        "update:selectButtonText": null,
        "update:showFileList": null,
        "update:tabIndex": null,
        "update:uploadAbortedMessage": null,
        "update:uploadButtonText": null,
        "update:uploadChunk": null,
        "update:uploadCustomData": null,
        "update:uploadedMessage": null,
        "update:uploadFailedMessage": null,
        "update:uploadFile": null,
        "update:uploadHeaders": null,
        "update:uploadMethod": null,
        "update:uploadMode": null,
        "update:uploadUrl": null,
        "update:validationError": null,
        "update:validationErrors": null,
        "update:validationStatus": null,
        "update:value": null,
        "update:visible": null,
        "update:width": null,
    },
    props: {
        abortUpload: Function,
        accept: String,
        accessKey: String,
        activeStateEnabled: Boolean,
        allowCanceling: Boolean,
        allowedFileExtensions: Array,
        chunkSize: Number,
        dialogTrigger: {},
        disabled: Boolean,
        dropZone: {},
        elementAttr: Object,
        focusStateEnabled: Boolean,
        height: [Number, String],
        hint: String,
        hoverStateEnabled: Boolean,
        inputAttr: {},
        invalidFileExtensionMessage: String,
        invalidMaxFileSizeMessage: String,
        invalidMinFileSizeMessage: String,
        isDirty: Boolean,
        isValid: Boolean,
        labelText: String,
        maxFileSize: Number,
        minFileSize: Number,
        multiple: Boolean,
        name: String,
        onBeforeSend: Function,
        onContentReady: Function,
        onDisposing: Function,
        onDropZoneEnter: Function,
        onDropZoneLeave: Function,
        onFilesUploaded: Function,
        onInitialized: Function,
        onOptionChanged: Function,
        onProgress: Function,
        onUploadAborted: Function,
        onUploaded: Function,
        onUploadError: Function,
        onUploadStarted: Function,
        onValueChanged: Function,
        progress: Number,
        readOnly: Boolean,
        readyToUploadMessage: String,
        rtlEnabled: Boolean,
        selectButtonText: String,
        showFileList: Boolean,
        tabIndex: Number,
        uploadAbortedMessage: String,
        uploadButtonText: String,
        uploadChunk: Function,
        uploadCustomData: {},
        uploadedMessage: String,
        uploadFailedMessage: String,
        uploadFile: Function,
        uploadHeaders: {},
        uploadMethod: String,
        uploadMode: String,
        uploadUrl: String,
        validationError: {},
        validationErrors: Array,
        validationStatus: String,
        value: Array,
        visible: Boolean,
        width: [Number, String]
    }
};
prepareConfigurationComponentConfig(DxFileUploaderOptionsConfig);
const DxFileUploaderOptions = defineComponent(DxFileUploaderOptionsConfig);
DxFileUploaderOptions.$_optionName = "fileUploaderOptions";
const DxItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:alt": null,
        "update:attachments": null,
        "update:author": null,
        "update:disabled": null,
        "update:elementAttr": null,
        "update:hint": null,
        "update:icon": null,
        "update:id": null,
        "update:isDeleted": null,
        "update:isEdited": null,
        "update:src": null,
        "update:template": null,
        "update:text": null,
        "update:timestamp": null,
        "update:type": null,
        "update:visible": null,
    },
    props: {
        alt: String,
        attachments: Array,
        author: Object,
        disabled: Boolean,
        elementAttr: Object,
        hint: String,
        icon: String,
        id: [Number, String],
        isDeleted: Boolean,
        isEdited: Boolean,
        src: String,
        template: {},
        text: String,
        timestamp: [Date, Number, String],
        type: String,
        visible: Boolean
    }
};
prepareConfigurationComponentConfig(DxItemConfig);
const DxItem = defineComponent(DxItemConfig);
DxItem.$_optionName = "items";
DxItem.$_isCollectionItem = true;
DxItem.$_expectedChildren = {
    attachment: { isCollectionItem: true, optionName: "attachments" },
    author: { isCollectionItem: false, optionName: "author" }
};
const DxMessageTimestampFormatConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:currency": null,
        "update:formatter": null,
        "update:parser": null,
        "update:precision": null,
        "update:type": null,
        "update:useCurrencyAccountingStyle": null,
    },
    props: {
        currency: String,
        formatter: Function,
        parser: Function,
        precision: Number,
        type: String,
        useCurrencyAccountingStyle: Boolean
    }
};
prepareConfigurationComponentConfig(DxMessageTimestampFormatConfig);
const DxMessageTimestampFormat = defineComponent(DxMessageTimestampFormatConfig);
DxMessageTimestampFormat.$_optionName = "messageTimestampFormat";
const DxSendButtonOptionsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:action": null,
        "update:icon": null,
        "update:onClick": null,
    },
    props: {
        action: String,
        icon: String,
        onClick: Function
    }
};
prepareConfigurationComponentConfig(DxSendButtonOptionsConfig);
const DxSendButtonOptions = defineComponent(DxSendButtonOptionsConfig);
DxSendButtonOptions.$_optionName = "sendButtonOptions";
const DxSpeechRecognitionConfigConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:continuous": null,
        "update:grammars": null,
        "update:interimResults": null,
        "update:lang": null,
        "update:maxAlternatives": null,
    },
    props: {
        continuous: Boolean,
        grammars: Array,
        interimResults: Boolean,
        lang: String,
        maxAlternatives: Number
    }
};
prepareConfigurationComponentConfig(DxSpeechRecognitionConfigConfig);
const DxSpeechRecognitionConfig = defineComponent(DxSpeechRecognitionConfigConfig);
DxSpeechRecognitionConfig.$_optionName = "speechRecognitionConfig";
const DxSpeechToTextOptionsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:accessKey": null,
        "update:activeStateEnabled": null,
        "update:customSpeechRecognizer": null,
        "update:disabled": null,
        "update:elementAttr": null,
        "update:focusStateEnabled": null,
        "update:height": null,
        "update:hint": null,
        "update:hoverStateEnabled": null,
        "update:onContentReady": null,
        "update:onDisposing": null,
        "update:onEnd": null,
        "update:onError": null,
        "update:onInitialized": null,
        "update:onOptionChanged": null,
        "update:onResult": null,
        "update:onStartClick": null,
        "update:onStopClick": null,
        "update:rtlEnabled": null,
        "update:speechRecognitionConfig": null,
        "update:startIcon": null,
        "update:startText": null,
        "update:stopIcon": null,
        "update:stopText": null,
        "update:stylingMode": null,
        "update:tabIndex": null,
        "update:type": null,
        "update:visible": null,
        "update:width": null,
    },
    props: {
        accessKey: String,
        activeStateEnabled: Boolean,
        customSpeechRecognizer: Object,
        disabled: Boolean,
        elementAttr: Object,
        focusStateEnabled: Boolean,
        height: [Number, String],
        hint: String,
        hoverStateEnabled: Boolean,
        onContentReady: Function,
        onDisposing: Function,
        onEnd: Function,
        onError: Function,
        onInitialized: Function,
        onOptionChanged: Function,
        onResult: Function,
        onStartClick: Function,
        onStopClick: Function,
        rtlEnabled: Boolean,
        speechRecognitionConfig: Object,
        startIcon: String,
        startText: String,
        stopIcon: String,
        stopText: String,
        stylingMode: String,
        tabIndex: Number,
        type: String,
        visible: Boolean,
        width: [Number, String]
    }
};
prepareConfigurationComponentConfig(DxSpeechToTextOptionsConfig);
const DxSpeechToTextOptions = defineComponent(DxSpeechToTextOptionsConfig);
DxSpeechToTextOptions.$_optionName = "speechToTextOptions";
DxSpeechToTextOptions.$_expectedChildren = {
    customSpeechRecognizer: { isCollectionItem: false, optionName: "customSpeechRecognizer" },
    speechRecognitionConfig: { isCollectionItem: false, optionName: "speechRecognitionConfig" }
};
const DxSuggestionsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:accessKey": null,
        "update:activeStateEnabled": null,
        "update:buttonTemplate": null,
        "update:disabled": null,
        "update:elementAttr": null,
        "update:focusStateEnabled": null,
        "update:height": null,
        "update:hint": null,
        "update:hoverStateEnabled": null,
        "update:items": null,
        "update:keyExpr": null,
        "update:onContentReady": null,
        "update:onDisposing": null,
        "update:onInitialized": null,
        "update:onItemClick": null,
        "update:onOptionChanged": null,
        "update:onSelectionChanged": null,
        "update:rtlEnabled": null,
        "update:selectedItemKeys": null,
        "update:selectedItems": null,
        "update:selectionMode": null,
        "update:stylingMode": null,
        "update:tabIndex": null,
        "update:visible": null,
        "update:width": null,
    },
    props: {
        accessKey: String,
        activeStateEnabled: Boolean,
        buttonTemplate: {},
        disabled: Boolean,
        elementAttr: Object,
        focusStateEnabled: Boolean,
        height: [Number, String],
        hint: String,
        hoverStateEnabled: Boolean,
        items: Array,
        keyExpr: [Function, String],
        onContentReady: Function,
        onDisposing: Function,
        onInitialized: Function,
        onItemClick: Function,
        onOptionChanged: Function,
        onSelectionChanged: Function,
        rtlEnabled: Boolean,
        selectedItemKeys: Array,
        selectedItems: Array,
        selectionMode: String,
        stylingMode: String,
        tabIndex: Number,
        visible: Boolean,
        width: [Number, String]
    }
};
prepareConfigurationComponentConfig(DxSuggestionsConfig);
const DxSuggestions = defineComponent(DxSuggestionsConfig);
DxSuggestions.$_optionName = "suggestions";
DxSuggestions.$_expectedChildren = {
    item: { isCollectionItem: true, optionName: "items" },
    suggestionsItem: { isCollectionItem: true, optionName: "items" }
};
const DxSuggestionsItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:disabled": null,
        "update:elementAttr": null,
        "update:hint": null,
        "update:icon": null,
        "update:template": null,
        "update:text": null,
        "update:type": null,
        "update:visible": null,
    },
    props: {
        disabled: Boolean,
        elementAttr: Object,
        hint: String,
        icon: String,
        template: {},
        text: String,
        type: String,
        visible: Boolean
    }
};
prepareConfigurationComponentConfig(DxSuggestionsItemConfig);
const DxSuggestionsItem = defineComponent(DxSuggestionsItemConfig);
DxSuggestionsItem.$_optionName = "items";
DxSuggestionsItem.$_isCollectionItem = true;
const DxTypingUserConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:avatarAlt": null,
        "update:avatarUrl": null,
        "update:id": null,
        "update:name": null,
    },
    props: {
        avatarAlt: String,
        avatarUrl: String,
        id: [Number, String],
        name: String
    }
};
prepareConfigurationComponentConfig(DxTypingUserConfig);
const DxTypingUser = defineComponent(DxTypingUserConfig);
DxTypingUser.$_optionName = "typingUsers";
DxTypingUser.$_isCollectionItem = true;
const DxUserConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:avatarAlt": null,
        "update:avatarUrl": null,
        "update:id": null,
        "update:name": null,
    },
    props: {
        avatarAlt: String,
        avatarUrl: String,
        id: [Number, String],
        name: String
    }
};
prepareConfigurationComponentConfig(DxUserConfig);
const DxUser = defineComponent(DxUserConfig);
DxUser.$_optionName = "user";
export default DxChat;
export { DxChat, DxAlert, DxAttachment, DxAuthor, DxChatItem, DxCustomSpeechRecognizer, DxDayHeaderFormat, DxEditing, DxFileUploaderOptions, DxItem, DxMessageTimestampFormat, DxSendButtonOptions, DxSpeechRecognitionConfig, DxSpeechToTextOptions, DxSuggestions, DxSuggestionsItem, DxTypingUser, DxUser };