@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
206 lines (205 loc) • 7.16 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 * as o from "react";
import { GridContext as de } from "../utils/GridContext.mjs";
import { Button as pe } from "@progress/kendo-react-buttons";
import { sparklesIcon as me } from "@progress/kendo-svg-icons";
import v from "axios";
import { useLocalization as fe } from "@progress/kendo-react-intl";
import { toolbarAI as S, messages as k, aIResponseData as B, generatedWithAI as D } from "../messages/index.mjs";
import { useCustomComponent as ge, classNames as he } from "@progress/kendo-react-common";
import { Window as Ce } from "@progress/kendo-react-dialogs";
import { GridAIPrompt as Se } from "./ai-tool/GridAIPrompt.mjs";
import { handleAIResponse as ke } from "../utils/handleAIResponse.mjs";
const M = 768, we = (u, w) => u.map((l) => {
let c = l;
return w.forEach((i) => {
i.field && c.includes(i.field) && (c = c.replace(new RegExp(i.field, "g"), i.title || i.field));
}), c;
}), Ie = () => null, Ae = o.forwardRef(
(u, w) => {
const e = o.useContext(de), l = fe(), {
requestUrl: c,
requestOptions: i,
onPromptRequest: y,
onResponseSuccess: P,
onResponseError: I,
role: j = "user",
gridAIPrompt: z = Se,
icon: E,
svgIcon: G,
onCloseWindow: A,
promptPlaceHolder: N,
suggestionsList: q,
streaming: H,
loading: K,
outputs: F,
enableSpeechToText: U
} = u, [R, L] = o.useState([]), X = o.useMemo(() => e && Array.isArray(e.columnsRef) && Array.isArray(e.hiddenColumnsRef) ? [...e.columnsRef, ...e.hiddenColumnsRef].map((t) => {
var n;
return {
id: t.id,
field: t.field,
values: (n = t.values) != null ? n : []
};
}) : [], [e]), [Y, p] = o.useState(!1), [_, m] = o.useState(!1), [T, b] = o.useState(!1), [$, J] = o.useState(), [Q, V] = o.useState(), [W, Z] = o.useState(() => {
const t = window.innerWidth;
return t < M ? t * 0.8 : 560;
}), d = o.useRef(null), x = o.useRef(null), ee = (t) => {
t.preventDefault(), b(!T);
}, f = o.useMemo(() => {
var t;
return (t = u.show) != null ? t : T;
}, [u.show, T]), g = o.useCallback(() => {
var t;
A && A(), L([]), b(!1), d.current && ((t = d.current.element) == null || t.focus());
}, [A]), te = (t, n, r) => {
const a = [l.toLanguageString(B, k[B])], s = we([t], e.columnsRef).join(`
`);
L([
{
id: R.length + 1,
title: l.toLanguageString(D, k[D]),
subTitle: n,
prompt: n,
responseContent: a.concat(s).join(""),
isRetry: r
},
...R
]);
}, se = (t, n, r) => {
var h, C;
p(!1), m(!1);
const a = {
getTotal: () => e.getTotal(),
getLeafDataItems: () => e.getLeafDataItems(),
exportAsPdf: () => e.exportAsPdf(),
props: {
dataItemKey: e.dataItemKey
}
}, s = ke(t, e, a);
s.state.sort !== e.sort && e.sortChange(s.state.sort, t), s.state.filter !== e.filter && e.filterChange(s.state.filter, t), s.state.group !== e.group && e.groupChange(s.state.group, t), s.state.highlight !== e.highlight && e.applyHighlightDescriptor(s.state.highlight), s.state.select !== e.select && e.applySelectionDescriptor(s.state.select), s.state.columnsState !== e.columnsState && e.onColumnsStateChange(s.state.columnsState), (s.state.skip !== e.skip || s.state.take !== e.take) && e.pagerPageChange({
skip: (h = s.state.skip) != null ? h : 0,
take: (C = s.state.take) != null ? C : 0,
syntheticEvent: t
}), s.shouldExportPdf && e.exportAsPdf(), s.messages.length > 0 && s.messages.forEach((ue) => {
te(ue, n, r);
}), P && P(t, n, r);
}, oe = (t) => {
I == null || I(t), p(!1), m(!1);
}, ne = (t, n) => {
const r = v.CancelToken.source(), a = {
role: j || "user",
columns: X || [],
headers: {
Accept: "*/*",
"Content-Type": "application/json"
},
promptMessage: t,
requestOptions: {
url: c,
method: "POST",
withCredentials: !1,
responseType: "json",
cancelToken: r.token,
...i
}
};
if (y && y(a, n), a.requestOptions.url !== void 0) {
p(!0), m(!0);
const { url: s, ...h } = a.requestOptions;
s && (v(s, {
...h,
headers: a.headers,
data: {
columns: a.columns,
contents: [{ text: a.promptMessage }]
},
responseType: "json"
// Ensure correct type
}).then((C) => se(C, a.promptMessage, n)).catch(oe), x.current = r);
}
}, ae = o.useCallback(() => {
x.current && x.current.cancel("Request cancelled by user."), p(!1), m(!1);
}, []), [re, O] = ge(
z
), ie = Object.keys(O).length > 0 ? O : {}, le = /* @__PURE__ */ o.createElement(
re,
{
onPromptRequest: ne,
onCancel: ae,
onClose: g,
streaming: H || Y,
loading: K || _,
outputs: F || R,
promptPlaceHolder: N,
suggestionsList: q,
enableSpeechToText: U,
...ie
}
), ce = /* @__PURE__ */ o.createElement(
pe,
{
ref: d,
togglable: !0,
themeColor: "primary",
rounded: "full",
selected: f,
svgIcon: G || (E ? void 0 : me),
icon: E,
size: e.mobileMode ? "large" : "medium",
className: he("k-toolbar-button", { "k-icon-button": e.mobileMode }),
title: l.toLanguageString(S, k[S]),
onClick: ee
}
);
return o.useEffect(() => {
var t;
if (d.current && f) {
const n = (t = d.current.element) == null ? void 0 : t.getBoundingClientRect();
if (n) {
J(n.top + window.scrollY + n.height), V(n.left + window.scrollX + n.width);
const r = window.innerWidth, a = r < M ? r * 0.75 : 560;
Z(a);
}
}
}, [f]), o.useImperativeHandle(
w,
() => ({
show: () => b(!0),
hide: () => g()
}),
[g]
), /* @__PURE__ */ o.createElement(o.Fragment, null, ce, f && /* @__PURE__ */ o.createElement(
Ce,
{
key: W,
autoFocus: !1,
title: l.toLanguageString(S, k[S]),
initialTop: $,
initialLeft: Q,
initialWidth: W,
style: {
height: "auto",
minWidth: "90px",
minHeight: "50px"
},
onClose: g,
resizable: !0,
draggable: !0,
className: "k-grid-assistant-window",
maximizeButton: Ie
},
le
));
}
);
Ae.displayName = "KendoReactGridToolbarAIAssistant";
export {
Ae as GridToolbarAIAssistant
};