devextreme-react
Version:
DevExtreme UI and Visualization Components for React
302 lines (300 loc) • 10.2 kB
JavaScript
/*!
* devextreme-react
* Version: 26.1.3
* Build date: Wed Jun 10 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
*/
"use client";
import * as React from "react";
import { memo, forwardRef, useImperativeHandle, useRef, useMemo } from "react";
import dxChat from "devextreme/ui/chat";
import { Component as BaseComponent } from "./core/component";
import NestedOption from "./core/nested-option";
const Chat = memo(forwardRef((props, ref) => {
const baseRef = useRef(null);
useImperativeHandle(ref, () => ({
instance() {
return baseRef.current?.getInstance();
}
}), []);
const subscribableOptions = useMemo(() => (["items", "suggestions.selectedItemKeys", "suggestions.selectedItems"]), []);
const independentEvents = useMemo(() => (["onAttachmentDownloadClick", "onDisposing", "onInitialized", "onMessageDeleted", "onMessageDeleting", "onMessageEditCanceled", "onMessageEditingStart", "onMessageEntered", "onMessageUpdated", "onMessageUpdating", "onTypingEnd", "onTypingStart"]), []);
const defaults = useMemo(() => ({
defaultItems: "items",
}), []);
const expectedChildren = useMemo(() => ({
alert: { optionName: "alerts", isCollectionItem: true },
chatItem: { optionName: "items", isCollectionItem: true },
dayHeaderFormat: { optionName: "dayHeaderFormat", isCollectionItem: false },
editing: { optionName: "editing", isCollectionItem: false },
fileUploaderOptions: { optionName: "fileUploaderOptions", isCollectionItem: false },
item: { optionName: "items", isCollectionItem: true },
messageTimestampFormat: { optionName: "messageTimestampFormat", isCollectionItem: false },
sendButtonOptions: { optionName: "sendButtonOptions", isCollectionItem: false },
speechToTextOptions: { optionName: "speechToTextOptions", isCollectionItem: false },
suggestions: { optionName: "suggestions", isCollectionItem: false },
typingUser: { optionName: "typingUsers", isCollectionItem: true },
user: { optionName: "user", isCollectionItem: false }
}), []);
const templateProps = useMemo(() => ([
{
tmplOption: "emptyViewTemplate",
render: "emptyViewRender",
component: "emptyViewComponent"
},
{
tmplOption: "messageTemplate",
render: "messageRender",
component: "messageComponent"
},
]), []);
return (React.createElement((BaseComponent), {
WidgetClass: dxChat,
ref: baseRef,
subscribableOptions,
independentEvents,
defaults,
expectedChildren,
templateProps,
...props,
}));
}));
const _componentAlert = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "alerts",
IsCollectionItem: true,
},
});
};
const Alert = Object.assign(_componentAlert, {
componentType: "option",
});
const _componentAttachment = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "attachments",
IsCollectionItem: true,
},
});
};
const Attachment = Object.assign(_componentAttachment, {
componentType: "option",
});
const _componentAuthor = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "author",
},
});
};
const Author = Object.assign(_componentAuthor, {
componentType: "option",
});
const _componentChatItem = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "items",
IsCollectionItem: true,
ExpectedChildren: {
attachment: { optionName: "attachments", isCollectionItem: true },
author: { optionName: "author", isCollectionItem: false }
},
},
});
};
const ChatItem = Object.assign(_componentChatItem, {
componentType: "option",
});
const _componentCustomSpeechRecognizer = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "customSpeechRecognizer",
},
});
};
const CustomSpeechRecognizer = Object.assign(_componentCustomSpeechRecognizer, {
componentType: "option",
});
const _componentDayHeaderFormat = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "dayHeaderFormat",
},
});
};
const DayHeaderFormat = Object.assign(_componentDayHeaderFormat, {
componentType: "option",
});
const _componentEditing = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "editing",
},
});
};
const Editing = Object.assign(_componentEditing, {
componentType: "option",
});
const _componentFileUploaderOptions = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "fileUploaderOptions",
DefaultsProps: {
defaultValue: "value"
},
},
});
};
const FileUploaderOptions = Object.assign(_componentFileUploaderOptions, {
componentType: "option",
});
const _componentItem = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "items",
IsCollectionItem: true,
ExpectedChildren: {
attachment: { optionName: "attachments", isCollectionItem: true },
author: { optionName: "author", isCollectionItem: false }
},
TemplateProps: [{
tmplOption: "template",
render: "render",
component: "component"
}],
},
});
};
const Item = Object.assign(_componentItem, {
componentType: "option",
});
const _componentMessageTimestampFormat = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "messageTimestampFormat",
},
});
};
const MessageTimestampFormat = Object.assign(_componentMessageTimestampFormat, {
componentType: "option",
});
const _componentSendButtonOptions = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "sendButtonOptions",
},
});
};
const SendButtonOptions = Object.assign(_componentSendButtonOptions, {
componentType: "option",
});
const _componentSpeechRecognitionConfig = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "speechRecognitionConfig",
},
});
};
const SpeechRecognitionConfig = Object.assign(_componentSpeechRecognitionConfig, {
componentType: "option",
});
const _componentSpeechToTextOptions = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "speechToTextOptions",
ExpectedChildren: {
customSpeechRecognizer: { optionName: "customSpeechRecognizer", isCollectionItem: false },
speechRecognitionConfig: { optionName: "speechRecognitionConfig", isCollectionItem: false }
},
},
});
};
const SpeechToTextOptions = Object.assign(_componentSpeechToTextOptions, {
componentType: "option",
});
const _componentSuggestions = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "suggestions",
DefaultsProps: {
defaultSelectedItemKeys: "selectedItemKeys",
defaultSelectedItems: "selectedItems"
},
ExpectedChildren: {
item: { optionName: "items", isCollectionItem: true },
suggestionsItem: { optionName: "items", isCollectionItem: true }
},
TemplateProps: [{
tmplOption: "buttonTemplate",
render: "buttonRender",
component: "buttonComponent"
}],
},
});
};
const Suggestions = Object.assign(_componentSuggestions, {
componentType: "option",
});
const _componentSuggestionsItem = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "items",
IsCollectionItem: true,
TemplateProps: [{
tmplOption: "template",
render: "render",
component: "component"
}],
},
});
};
const SuggestionsItem = Object.assign(_componentSuggestionsItem, {
componentType: "option",
});
const _componentTypingUser = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "typingUsers",
IsCollectionItem: true,
},
});
};
const TypingUser = Object.assign(_componentTypingUser, {
componentType: "option",
});
const _componentUser = (props) => {
return React.createElement((NestedOption), {
...props,
elementDescriptor: {
OptionName: "user",
},
});
};
const User = Object.assign(_componentUser, {
componentType: "option",
});
export default Chat;
export { Chat, Alert, Attachment, Author, ChatItem, CustomSpeechRecognizer, DayHeaderFormat, Editing, FileUploaderOptions, Item, MessageTimestampFormat, SendButtonOptions, SpeechRecognitionConfig, SpeechToTextOptions, Suggestions, SuggestionsItem, TypingUser, User };