@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
105 lines (104 loc) • 4.03 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 { classNames as c } from "@progress/kendo-react-common";
import * as e from "react";
import { ChatToolbar as h } from "./ChatToolbar.mjs";
import { Button as i } from "@progress/kendo-react-buttons";
import { paperPlaneIcon as m, moreHorizontalIcon as f } from "@progress/kendo-svg-icons";
import { provideLocalizationService as g } from "@progress/kendo-react-intl";
import { newMessageMessageInput as l, messages as a, newMessageSendButton as p, newMessageOptionsButton as u } from "../messages/index.mjs";
class x extends e.Component {
constructor() {
super(...arguments), this.state = { focused: !1 }, this.inputEl = null, this.toolbarBtnRef = e.createRef(), this.onInputKeyDown = (t) => {
switch (t.key) {
case "Enter":
return this.sendMessage(t);
case "F10":
return this.openToolbar(t);
default:
return;
}
}, this.sendMessage = (t) => {
if (this.props.onMessageSend && this.inputEl !== null) {
const s = this.inputEl.value;
if (s) {
const o = {
author: this.props.user,
text: s,
timestamp: /* @__PURE__ */ new Date()
};
this.props.onMessageSend(o, t);
}
}
this.inputEl !== null && (this.inputEl.value = null);
}, this.openToolbar = (t) => {
this.toolbarBtnRef.current !== null && (t.preventDefault(), this.props.onToolbarActionButtonClick(!this.props.showToolbar, t));
};
}
render() {
const t = g(this), s = /* @__PURE__ */ e.createElement(
"input",
{
type: "text",
className: this.getClassNames(),
placeholder: this.props.placeholder,
onKeyDown: this.onInputKeyDown,
onFocus: () => this.setState({ focused: !0 }),
onBlur: () => this.setState({ focused: !1 }),
ref: (n) => this.inputEl = n,
"aria-label": t.toLanguageString(
l,
a[l]
)
}
), o = /* @__PURE__ */ e.createElement(
i,
{
fillMode: "flat",
themeColor: "base",
className: "k-chat-send",
icon: "paper-plane",
svgIcon: m,
onClick: this.sendMessage,
"aria-label": t.toLanguageString(p, a[p]),
dir: this.props.isDirectionRightToLeft ? "rtl" : void 0
}
), r = /* @__PURE__ */ e.createElement(
i,
{
ref: this.toolbarBtnRef,
fillMode: "flat",
themeColor: "base",
icon: "more-horizontal",
svgIcon: f,
onClick: (n) => this.props.onToolbarActionButtonClick(!this.props.showToolbar, n),
"aria-label": t.toLanguageString(
u,
a[u]
)
}
);
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: "k-message-box k-textbox k-input k-input-md k-rounded-md k-input-solid" }, this.props.MessageBox ? /* @__PURE__ */ e.createElement(
this.props.MessageBox,
{
messageInput: s,
sendButton: o,
toolbarButton: r
}
) : /* @__PURE__ */ e.createElement(e.Fragment, null, s, /* @__PURE__ */ e.createElement("span", { className: "k-input-separator k-input-separator-vertical" }), /* @__PURE__ */ e.createElement("span", { className: "k-input-suffix k-input-suffix-horizontal" }, this.props.toolbar && r, o))), this.props.showToolbar && /* @__PURE__ */ e.createElement(h, null, this.props.toolbar));
}
focusInput() {
this.inputEl !== null && this.inputEl.focus();
}
getClassNames() {
return c("k-input-inner", { "k-focus": this.state.focused });
}
}
export {
x as default
};