@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
205 lines (204 loc) • 6.77 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 e from "react";
import { GridContext as at } from "../utils/GridContext.mjs";
import { Button as it } from "@progress/kendo-react-buttons";
import { sparklesIcon as lt } from "@progress/kendo-svg-icons";
import G from "axios";
import { useLocalization as ut } from "@progress/kendo-react-intl";
import { toolbarAI as S, messages as w, aIResponseData as F, generatedWithAI as W } from "../messages/index.mjs";
import { useCustomComponent as ct, classNames as pt } from "@progress/kendo-react-common";
import { Window as dt } from "@progress/kendo-react-dialogs";
import { GridAIPrompt as ft } from "./ai-tool/GridAIPrompt.mjs";
import { combineSmartFilters as mt, parseFilterDates as gt } from "../filterCommon.mjs";
const ht = (l, b) => l.map((u) => {
let c = u;
return b.forEach((i) => {
i.field && c.includes(i.field) && (c = c.replace(new RegExp(i.field, "g"), i.title || i.field));
}), c;
}), Ct = e.forwardRef(
(l, b) => {
const o = e.useContext(at), u = ut(), {
requestUrl: c,
requestOptions: i,
onPromptRequest: P,
onResponseSuccess: E,
onResponseError: O,
role: j = "user",
gridAIPrompt: B = ft,
icon: x,
svgIcon: D,
onCloseWindow: A,
promptPlaceHolder: H,
suggestionsList: z,
streaming: M,
loading: N,
outputs: $,
enableSpeechToText: K
} = l, [R, L] = e.useState([]), U = e.useMemo(() => o && Array.isArray(o.columnsRef) ? o.columnsRef.map((t) => ({ field: t.field })) : [], [o]), [X, m] = e.useState(!1), [T, k] = e.useState(!1), [Y, J] = e.useState(), [Q, V] = e.useState(), p = e.useRef(null), I = e.useRef(null), Z = (t) => {
t.preventDefault(), k(!T);
}, g = e.useMemo(() => {
var t;
return (t = l.show) != null ? t : T;
}, [l.show, T]), h = e.useCallback(() => {
var t;
A && A(), L([]), k(!1), p.current && ((t = p.current.element) == null || t.focus());
}, [A]), _ = (t, n, d) => {
var a, C;
if (m(!1), t != null && t.data) {
if (o.sortable && t.data.sort)
if (t.data.sort.length === 0)
o.sortChange([], t);
else {
const r = (a = o.sort) != null ? a : [], s = [];
r.forEach((f) => {
t.data.sort.some((y) => y.field === f.field) || s.push(f);
}), s.push(...t.data.sort), o.sortChange(s, t);
}
if (t.data.filter) {
const r = mt(t.data.filter, o.filter);
o.filterChange(r, t);
}
if (t.data.highlight) {
let r = t.data.highlight;
Array.isArray(r) && (r = r.map((s) => (s != null && s.filters && Array.isArray(s.filters) && gt(s), s))), o.applyHighlightDescriptor(r);
}
if (o && t.data.group)
if (t.data.group.length === 0)
o.groupChange([], t);
else {
const r = (C = o.group) != null ? C : [], s = [];
r.forEach((f) => {
t.data.group.some((y) => y.field === f.field) || s.push(f);
}), s.push(...t.data.group), o.groupChange(s, t);
}
if (t.data.messages) {
const r = [
u.toLanguageString(F, w[F])
], s = ht(t.data.messages, o.columnsRef).join(
`
`
);
L([
{
id: R.length + 1,
title: u.toLanguageString(W, w[W]),
subTitle: n,
prompt: n,
responseContent: r.concat(s).join(""),
isRetry: d
},
...R
]);
}
}
E && E(t, n, d);
}, q = (t) => {
O && O(t), m(!1);
}, tt = (t, n) => {
const d = G.CancelToken.source(), a = {
role: "user",
columns: U || [],
headers: {
Accept: "*/*",
"Content-Type": "application/json"
},
promptMessage: t,
requestOptions: {
url: c,
method: "POST",
withCredentials: !1,
responseType: "json",
cancelToken: d.token,
...i
}
};
P && P(a, n), a.requestOptions.url !== void 0 && (m(!0), G({
...a.requestOptions,
headers: a.headers,
data: {
role: j || a.role,
contents: [
{
$type: "text",
text: a.promptMessage
}
],
columns: a.columns || []
},
...l.requestOptions
}).then((C) => _(C, a.promptMessage, n)).catch(q), I.current = d);
}, et = e.useCallback(() => {
I.current && I.current.cancel("Request cancelled by user."), m(!1);
}, []), [ot, v] = ct(
B
), st = Object.keys(v).length > 0 ? v : {}, nt = /* @__PURE__ */ e.createElement(
ot,
{
onPromptRequest: tt,
onCancel: et,
onClose: h,
streaming: M || X,
loading: N,
outputs: $ || R,
promptPlaceHolder: H,
suggestionsList: z,
enableSpeechToText: K,
...st
}
), rt = /* @__PURE__ */ e.createElement(
it,
{
ref: p,
togglable: !0,
themeColor: "primary",
rounded: "full",
selected: g,
svgIcon: D || (x ? void 0 : lt),
icon: x,
size: o.mobileMode ? "large" : "medium",
className: pt("k-toolbar-button", { "k-icon-button": o.mobileMode }),
title: u.toLanguageString(S, w[S]),
onClick: Z
}
);
return e.useEffect(() => {
var t;
if (p.current && g) {
const n = (t = p.current.element) == null ? void 0 : t.getBoundingClientRect();
n && (J(n.top + window.scrollY + n.height), V(n.left + window.scrollX + n.width));
}
}, [g]), e.useImperativeHandle(
b,
() => ({
show: () => k(!0),
hide: () => h()
}),
[h]
), /* @__PURE__ */ e.createElement(e.Fragment, null, rt, g && /* @__PURE__ */ e.createElement(
dt,
{
autoFocus: !1,
title: u.toLanguageString(S, w[S]),
initialTop: Y,
initialLeft: Q,
initialWidth: 520,
initialHeight: 500,
onClose: h,
resizable: !0,
draggable: !0,
className: "k-grid-assistant-window"
},
nt
));
}
);
Ct.displayName = "KendoReactGridToolbarAIAssistant";
export {
Ct as GridToolbarAIAssistant
};