@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
110 lines (109 loc) • 3.91 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 e from "react";
import { AIPromptContent as B } from "../AIPromptContent.mjs";
import { AIPromptFooter as q } from "../AIPromptFooter.mjs";
import { SpeechToTextButton as z, Button as F } from "@progress/kendo-react-buttons";
import { InputSeparator as j, InputSuffix as G, TextArea as O } from "@progress/kendo-react-inputs";
import { sparklesIcon as $ } from "@progress/kendo-svg-icons";
import { useCustomComponent as P } from "@progress/kendo-react-common";
import { AIPromptViewRender as H } from "./AIPromptViewRender.mjs";
import { AIPromptExpander as M } from "../AIPromptExpander.mjs";
import { useAIPromptContext as W } from "../AIPromptContext.mjs";
import { SuggestionGroup as _ } from "../../chat/components/SuggestionsGroup.mjs";
import { promptViewDefaults as D } from "./constants.mjs";
const ne = (S) => {
const {
promptInput: A = O,
generateButton: E = F,
enableSpeechToText: n = !1,
promptValue: I,
promptSuggestions: p
} = S, [r, i] = e.useState(I || ""), [s] = W(), [T, g] = P(E), [C, h] = P(A), R = () => {
s.onPromptRequest && s.onPromptRequest.call(null, r), i("");
}, m = e.useRef(null), w = (t) => {
i(t);
};
e.useEffect(() => {
var t, o;
(o = (t = m.current) == null ? void 0 : t.element) != null && o.current && requestAnimationFrame(() => {
var l, c;
if ((c = (l = m.current) == null ? void 0 : l.element) != null && c.current) {
const a = m.current.element.current;
a.style.height = "auto", a.style.height = `${a.scrollHeight}px`;
}
});
}, [r]);
const V = (t) => {
i(t.target.value);
}, b = {
title: "Generate",
children: "Generate",
svgIcon: $
}, y = {
placeholder: "Ask or generate content with AI ...",
rows: 2
}, d = Object.keys(g).length > 0 ? g : b, k = Object.keys(h).length > 0 ? h : y, x = (t) => {
const { isFinal: o, alternatives: l } = t;
if (o && l.length > 0) {
const c = l[0].transcript, a = (() => {
const u = r, v = u && !u.endsWith(" ") && !u.endsWith(`
`);
return u + (v ? " " : "") + c;
})();
i(a);
}
};
let f;
return n && (typeof n == "object" ? f = {
...n,
onResult: n.onResult || x
} : f = {
onResult: x
}), /* @__PURE__ */ e.createElement(H, { name: D.name }, /* @__PURE__ */ e.createElement(B, { streaming: s.streaming, onCancel: s.onCancel }, /* @__PURE__ */ e.createElement(
C,
{
ref: m,
value: r,
flow: "vertical",
textareaStyle: { maxHeight: "110px" },
autoSize: !0,
suffix: n ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(j, { orientation: "horizontal" }), /* @__PURE__ */ e.createElement(G, { orientation: "horizontal" }, /* @__PURE__ */ e.createElement(z, { fillMode: "flat", ...f }))) : void 0,
onChange: V,
...k
}
), p && p.length > 0 && /* @__PURE__ */ e.createElement(M, { title: "Prompt Suggestions" }, /* @__PURE__ */ e.createElement(
_,
{
suggestionsView: s.suggestionsView,
suggestions: p.map((t, o) => ({
id: o,
text: t,
description: t
})),
onSuggestionClick: (t) => {
w(t.text);
}
}
))), /* @__PURE__ */ e.createElement(q, null, /* @__PURE__ */ e.createElement(
T,
{
themeColor: "primary",
fillMode: "solid",
rounded: "full",
size: "medium",
onClick: R,
disabled: !r.trim(),
...d
},
d.children
)));
};
export {
ne as AIPromptView
};