@progress/kendo-react-conversational-ui
Version:
React Chat component allows the user to participate in chat sessions with users or chat bots. KendoReact Conversational UI components
64 lines (63 loc) • 2.71 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as e from "react";
import { classNames as r } from "@progress/kendo-react-common";
import { provideIntlService as p, registerForIntl as a } from "@progress/kendo-react-intl";
import { FocusableUponSelection as n } from "./base/FocusableUponSelection.mjs";
const i = class i extends n {
/**
* @hidden
*/
render() {
return /* @__PURE__ */ e.createElement(
"div",
{
className: this.getClassNames(),
tabIndex: this.props.tabIndex,
onClick: () => this.props.onRequestSelection(this.props.item.selectionIndex),
onFocus: () => this.props.onRequestSelection(this.props.item.selectionIndex),
ref: (t) => {
this.elementToFocus = t;
}
},
this.getTimestampView(),
this.getMainView(),
this.getStatusView()
);
}
getMainView() {
return this.props.item.typing ? /* @__PURE__ */ e.createElement("div", { className: "k-chat-bubble" }, /* @__PURE__ */ e.createElement("div", { className: "k-typing-indicator" }, /* @__PURE__ */ e.createElement("span", null), /* @__PURE__ */ e.createElement("span", null), /* @__PURE__ */ e.createElement("span", null))) : this.props.template ? /* @__PURE__ */ e.createElement(this.props.template, { item: this.props.item }) : this.props.item.text ? /* @__PURE__ */ e.createElement("div", { className: "k-chat-bubble" }, this.props.item.text) : null;
}
getTimestampView() {
let t = null;
return this.props.item.timestamp && (t = /* @__PURE__ */ e.createElement("time", { className: "k-message-time", "aria-hidden": !this.props.selected }, p(this).formatDate(this.props.item.timestamp, this.props.dateFormat))), t;
}
getStatusView() {
let t = null;
return this.props.item.status && (t = /* @__PURE__ */ e.createElement("span", { className: "k-message-status" }, this.props.item.status)), t;
}
getClassNames() {
return r(
{ "k-only": this.props.isOnlyItemInGroup },
{ "k-first": this.props.isFirstItemInGroup && !this.props.isOnlyItemInGroup },
{ "k-last": this.props.isLastItemInGroup && !this.props.isOnlyItemInGroup },
{ "k-selected": this.props.selected },
{ "k-focus": this.props.selected },
"k-message"
);
}
};
i.defaultProps = {
dateFormat: "g",
tabIndex: -1
};
let s = i;
a(s);
export {
s as ChatMessage
};