@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
81 lines (80 loc) • 4.74 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 O } from "../AIPromptContent.mjs";
import { useAIPromptContext as z } from "../AIPromptContext.mjs";
import { aIPromptNoOutputs as E, messages as A } from "../../messages/index.mjs";
import { AIPromptViewRender as q } from "./AIPromptViewRender.mjs";
import { Card as s, CardHeader as g, CardTitle as f, CardSubtitle as y, CardBody as i, CardActions as R } from "@progress/kendo-react-layout";
import { checkIcon as M, copyIcon as F, arrowRotateCwIcon as S, thumbUpOutlineIcon as V, thumbDownOutlineIcon as _ } from "@progress/kendo-svg-icons";
import { Button as r } from "@progress/kendo-react-buttons";
import { useLocalization as B } from "@progress/kendo-react-intl";
import { outputViewDefaults as D } from "./constants.mjs";
const X = (h) => {
const [b, c] = e.useState(""), l = e.useRef(null), [n] = z(), { outputs: o, showOutputRating: I, outputCard: T } = h, { header: d, body: p, actions: k } = T || {}, w = B(), v = (t) => {
n.onPromptRequest && n.onPromptRequest.call(null, t.prompt, { ...t, isRetry: !0 }), C();
}, P = (t) => {
t != null && t.responseContent && navigator.clipboard.writeText(t.responseContent), c(t.id), setTimeout(() => {
c("");
}, 1e3);
}, u = (t, m) => {
n.onPromptRequest && n.onPromptRequest.call(null, t.prompt, { ...t, ratingType: m, isRetry: !1 }), C();
}, C = () => {
l && l.current && l.current.scrollTo({ top: 0, behavior: "smooth" });
}, x = /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement(g, null, /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement("span", { className: "k-skeleton k-skeleton-text k-skeleton-pulse", style: { width: "200px" } })), /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement("span", { className: "k-skeleton k-skeleton-text k-skeleton-pulse", style: { width: "100%" } }))), /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement("span", { className: "k-skeleton k-skeleton-rect k-skeleton-pulse", style: { height: "80px" } })), /* @__PURE__ */ e.createElement(R, null, /* @__PURE__ */ e.createElement("span", { className: "k-skeleton k-skeleton-text k-skeleton-pulse", style: { width: "100%" } }))), a = o == null ? void 0 : o.map((t, m) => /* @__PURE__ */ e.createElement(s, { key: `${t.id}_${m}` }, /* @__PURE__ */ e.createElement(g, null, d ? d(t) : /* @__PURE__ */ e.createElement(e.Fragment, null, t.title && /* @__PURE__ */ e.createElement(f, null, t.title), t.subTitle && /* @__PURE__ */ e.createElement(y, null, t.subTitle))), /* @__PURE__ */ e.createElement(i, null, p ? p(t) : t.responseContent), /* @__PURE__ */ e.createElement(R, null, k ? k(t) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
r,
{
size: "medium",
themeColor: "primary",
fillMode: "flat",
rounded: "medium",
title: "Copy",
svgIcon: b === t.id ? M : F,
onClick: () => P(t)
},
"Copy"
), /* @__PURE__ */ e.createElement(
r,
{
size: "medium",
themeColor: "base",
fillMode: "flat",
rounded: "medium",
title: "Retry",
svgIcon: S,
onClick: () => v(t)
},
"Retry"
), I && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: "k-spacer" }), /* @__PURE__ */ e.createElement(
r,
{
size: "medium",
themeColor: t.ratingType === "positive" ? "primary" : "base",
fillMode: "flat",
rounded: "medium",
title: "Rate up",
svgIcon: V,
onClick: () => u(t, "positive")
}
), /* @__PURE__ */ e.createElement(
r,
{
size: "medium",
themeColor: t.ratingType === "negative" ? "primary" : "base",
fillMode: "flat",
rounded: "medium",
title: "Rate down",
svgIcon: _,
onClick: () => u(t, "negative")
}
)))))), N = /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement(i, null, w.toLanguageString(E, A[E])));
return /* @__PURE__ */ e.createElement(q, { name: D.name }, /* @__PURE__ */ e.createElement(O, { ref: l, streaming: n.streaming, onCancel: n.onCancel }, /* @__PURE__ */ e.createElement("div", { className: "k-card-list" }, n.loading && x, a, (!a || a.length === 0) && !n.loading && N)));
};
export {
X as AIPromptOutputView
};