@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
103 lines (102 loc) • 3.19 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 t from "react";
import { Button as G, SpeechToTextButton as M } from "@progress/kendo-react-buttons";
import { InputPrefix as R, InputSeparator as D, InputSuffix as F, TextArea as K } from "@progress/kendo-react-inputs";
import { stopSmIcon as O, paperPlaneIcon as W, menuIcon as _ } from "@progress/kendo-svg-icons";
import { useCustomComponent as I, classNames as z } from "@progress/kendo-react-common";
const U = ({
placeholder: g = "Ask or generate content with AI...",
promptValue: h,
onMenuClick: B,
promptInput: P = K,
generateButton: v,
enableSpeechToText: a = !1,
streaming: e = !1,
commands: l,
onPromptRequest: c,
onPromptCancel: C
}) => {
const [o, i] = t.useState(h || ""), [E, u] = I(
v
), [S, m] = I(P), x = {
svgIcon: e ? O : W,
active: (!!e).toString(),
title: "Send Button",
"aria-label": "Send Button",
disabled: !o.trim() && !e,
"aria-disabled": !o.trim() && !e
}, A = {
placeholder: g,
className: "!k-flex-row",
autoSize: !0,
rows: 1
}, f = l && l.length > 0, w = Object.keys(u).length > 0 ? u : x, y = Object.keys(m).length > 0 ? m : A, p = (n) => {
const { isFinal: s, alternatives: k } = n;
if (s && k.length > 0) {
const b = k[0].transcript, V = (() => {
const r = o, j = r && !r.endsWith(" ") && !r.endsWith(`
`);
return r + (j ? " " : "") + b;
})();
i(V);
}
}, N = (n) => {
const s = n.target.value;
i(s);
}, d = () => {
o.trim() && c && c(o.trim());
};
return /* @__PURE__ */ t.createElement(
S,
{
value: o,
onChange: N,
onKeyDown: (n) => {
n.key === "Enter" && !n.shiftKey && (n.preventDefault(), d());
},
prefix: f || a ? /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(R, { className: "!k-align-items-start" }, f && /* @__PURE__ */ t.createElement(
G,
{
"aria-label": "Commands Button",
title: "Commands Button",
fillMode: "flat",
svgIcon: _,
onClick: B
}
), a && /* @__PURE__ */ t.createElement(
M,
{
fillMode: "flat",
...typeof a == "object" ? {
...a,
onResult: a.onResult || p
} : {
onResult: p
}
}
)), /* @__PURE__ */ t.createElement(D, null)) : void 0,
suffix: /* @__PURE__ */ t.createElement(F, { className: "!k-align-items-start" }, /* @__PURE__ */ t.createElement(
E,
{
className: z("k-prompt-send", {
"k-generating": e,
"k-active": e
}),
fillMode: "flat",
onClick: e ? C : d,
...w
}
)),
...y
}
);
};
export {
U as InlineAIPromptInput
};