@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
187 lines (186 loc) • 5.54 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 { Card as re, CardBody as se, CardActions as le, ContextMenu as ce } from "@progress/kendo-react-layout";
import { Button as E } from "@progress/kendo-react-buttons";
import { TextArea as me } from "@progress/kendo-react-inputs";
import { checkIcon as ie, copyIcon as de, cancelOutlineIcon as pe } from "@progress/kendo-svg-icons";
import { validatePackage as fe, getLicenseMessage as Ce, classNames as he, WatermarkOverlay as ue } from "@progress/kendo-react-common";
import { packageMetadata as x } from "../package-metadata.mjs";
import { InlineAIPromptPopup as ge } from "./InlineAIPromptPopup.mjs";
import { InlineAIPromptInput as ke } from "./InlineAIPromptInput.mjs";
import { AIPromptContent as ye } from "../ai-prompt/AIPromptContent.mjs";
const Ae = (v) => {
const M = !fe(x, { component: "InlineAIPrompt" }), b = Ce(x), {
outputs: i = [],
outputCard: w,
promptInput: O = me,
generateButton: P = E,
promptPlaceholder: S = "Ask or generate content with AI...",
promptValue: T,
onPromptRequest: A,
onCopy: d,
onDiscard: p,
outputActions: B,
onOutputAction: f,
enableSpeechToText: D = !1,
streaming: r,
onPromptCancel: s,
show: N = !1,
anchor: R,
width: l,
height: c,
onOpen: F,
onClose: m,
animate: _ = !0,
appendTo: K,
commands: u,
onCommandExecute: g,
style: W,
className: $,
popupOptions: q = {},
...z
} = v, [V, k] = t.useState(""), [j, C] = t.useState(!1), [G, H] = t.useState({
left: 0,
top: 0
}), h = t.useRef(null), { body: y, actions: I } = w || {}, J = B || [
{
id: "copy",
text: "Copy",
svgIcon: de,
themeColor: "primary",
title: "Copy"
},
{
id: "discard",
text: "Discard",
svgIcon: pe,
themeColor: "base",
title: "Discard"
}
], Q = (e) => {
e.responseContent && (navigator.clipboard.writeText(e.responseContent), k(e.id), setTimeout(() => k(""), 1e3)), d == null || d(e);
}, U = (e) => {
p == null || p(e);
}, X = (e, n) => {
switch (e.id) {
case "copy":
Q(n);
break;
case "discard":
U(n);
break;
default:
f == null || f(e, n);
break;
}
}, Y = (e) => {
if (!h.current)
return;
const n = h.current.getBoundingClientRect();
H({
left: n.left,
top: n.bottom
}), C(!0);
}, Z = () => {
C(!1);
}, L = (e) => {
C(!1), g && g(e);
}, ee = (e) => e == null ? void 0 : e.map((n) => ({
text: n.text,
svgIcon: n.svgIcon,
data: n,
items: n.children ? n.children.map((a) => ({
text: a.text,
data: a
})) : void 0
})), te = t.useCallback(
(e) => {
e.key === "Escape" && (r && s ? s() : !r && m && m({ target: null }));
},
[r, s, m]
), ne = {
...W,
...l && { width: l },
...c && { height: c }
}, ae = {
...l && { width: l },
...c && { height: c }
}, oe = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
"div",
{
className: he("k-prompt", $),
style: ne,
onKeyDown: te,
...z
},
/* @__PURE__ */ t.createElement(ye, { ref: h }, i && i.length > 0 && /* @__PURE__ */ t.createElement("div", { className: "k-card-list" }, i.map((e, n) => /* @__PURE__ */ t.createElement(re, { key: `${e.id}_${n}` }, /* @__PURE__ */ t.createElement(se, null, y ? y(e) : e.responseContent), /* @__PURE__ */ t.createElement(le, null, I ? I(e) : /* @__PURE__ */ t.createElement(t.Fragment, null, J.map(
(a) => {
var o;
return a.spacer ? /* @__PURE__ */ t.createElement("span", { key: a.id, className: "k-spacer" }) : /* @__PURE__ */ t.createElement(
E,
{
key: a.id,
size: "medium",
themeColor: a.themeColor || "primary",
fillMode: "flat",
rounded: "medium",
title: (o = a.title) != null ? o : a.text,
svgIcon: a.id === "copy" && V === e.id ? ie : a.svgIcon,
onClick: () => X(a, e)
},
a.text
);
}
)))))), /* @__PURE__ */ t.createElement(
ke,
{
promptValue: T,
placeholder: S,
onPromptRequest: A,
onMenuClick: Y,
onPromptCancel: s,
promptInput: O,
generateButton: P,
enableSpeechToText: D,
streaming: r,
commands: u
}
))
), M && /* @__PURE__ */ t.createElement(ue, { message: b }));
return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
ge,
{
show: N,
anchor: R,
onOpen: F,
onClose: m,
animate: _,
appendTo: K,
popupOptions: q,
style: ae
},
oe
), /* @__PURE__ */ t.createElement(
ce,
{
show: j,
offset: G,
onClose: Z,
items: ee(u),
onSelect: (e) => {
var a, o;
const n = (a = e.item) == null ? void 0 : a.data;
n && !((o = n.children) != null && o.length) && L(n);
}
}
));
};
export {
Ae as InlineAIPrompt
};