@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
209 lines (208 loc) • 6.81 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 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 at } from "../utils/GridContext.mjs";
import { Button as ut } from "@progress/kendo-react-buttons";
import { sparklesIcon as ct } from "@progress/kendo-svg-icons";
import { useLocalization as dt } from "@progress/kendo-react-intl";
import { aIResponseData as x, messages as m, generatedWithAI as y, toolbarAI as g } from "../messages/index.mjs";
import { useCustomComponent as mt, classNames as gt } from "@progress/kendo-react-common";
import { Window as pt } from "@progress/kendo-react-dialogs";
import { GridAIPrompt as ft } from "./ai-tool/GridAIPrompt.mjs";
import { useGridAIRequest as ht } from "../hooks/useGridAIRequest.mjs";
const E = 768, Ct = (a, p) => a.map((i) => {
let l = i;
return p.forEach((n) => {
n.field && l.includes(n.field) && (l = l.replace(new RegExp(n.field, "g"), n.title || n.field));
}), l;
}), kt = () => null, It = o.forwardRef(
(a, p) => {
const t = o.useContext(at), i = dt(), {
requestUrl: l,
requestOptions: n,
onPromptRequest: v,
onResponseSuccess: T,
onResponseError: W,
role: L = "user",
gridAIPrompt: B = ft,
icon: I,
svgIcon: M,
onCloseWindow: f,
promptPlaceHolder: q,
suggestionsList: O,
streaming: z,
loading: D,
outputs: G,
enableSpeechToText: N
} = a, [S, R] = o.useState([]), H = o.useMemo(() => t && Array.isArray(t.columnsRef) && Array.isArray(t.hiddenColumnsRef) ? [...t.columnsRef, ...t.hiddenColumnsRef].map((e) => {
var s;
return {
id: e.id,
field: e.field,
values: (s = e.values) != null ? s : []
};
}) : [], [t]), K = o.useMemo(
() => ({
sort: t.sort,
filter: t.filter,
group: t.group,
highlight: t.highlight,
select: t.select,
columnsState: t.columnsState,
skip: t.skip,
take: t.take
}),
[t]
), j = o.useMemo(
() => ({
getTotal: () => t.getTotal(),
getLeafDataItems: () => t.getLeafDataItems(),
exportAsPdf: () => t.exportAsPdf(),
props: {
dataItemKey: t.dataItemKey
}
}),
[t]
), [h, C] = o.useState(!1), [F, U] = o.useState(), [X, Y] = o.useState(), [A, _] = o.useState(() => {
const e = window.innerWidth;
return e < E ? e * 0.8 : 560;
}), u = o.useRef(null), $ = o.useCallback(
(e) => {
var s, r;
e.sort !== void 0 && e.sort !== t.sort && t.sortChange(e.sort, {}), e.filter !== t.filter && t.filterChange(e.filter, {}), e.group !== void 0 && e.group !== t.group && t.groupChange(e.group, {}), e.highlight !== void 0 && e.highlight !== t.highlight && t.applyHighlightDescriptor(e.highlight), e.select !== void 0 && e.select !== t.select && t.applySelectionDescriptor(e.select), e.columnsState !== void 0 && e.columnsState !== t.columnsState && t.onColumnsStateChange(e.columnsState), (e.skip !== void 0 && e.skip !== t.skip || e.take !== void 0 && e.take !== t.take) && t.pagerPageChange({
skip: (s = e.skip) != null ? s : 0,
take: (r = e.take) != null ? r : 0,
syntheticEvent: {}
});
},
[t]
), w = o.useCallback(
(e, s, r) => {
const k = [i.toLanguageString(x, m[x])];
e.forEach((rt) => {
const lt = Ct([rt], t.columnsRef).join(`
`);
R((P) => [
{
id: P.length + 1,
title: i.toLanguageString(y, m[y]),
subTitle: s,
prompt: s,
responseContent: k.concat(lt).join(""),
isRetry: r
},
...P
]);
});
},
[i, t.columnsRef]
), J = o.useCallback(() => {
t.exportAsPdf();
}, [t]), {
loading: Q,
streaming: V,
sendRequest: Z,
cancelRequest: tt
} = ht({
requestUrl: l,
requestOptions: n,
role: L,
columns: H,
gridState: K,
gridRef: j,
onPromptRequest: v,
onResponseSuccess: T,
onResponseError: W,
onStateChange: $,
onMessages: w,
onExportPdf: J
}), et = (e) => {
e.preventDefault(), C(!h);
}, c = o.useMemo(() => {
var e;
return (e = a.show) != null ? e : h;
}, [a.show, h]), d = o.useCallback(() => {
var e;
f && f(), R([]), C(!1), u.current && ((e = u.current.element) == null || e.focus());
}, [f]), [ot, b] = mt(
B
), st = Object.keys(b).length > 0 ? b : {}, it = /* @__PURE__ */ o.createElement(
ot,
{
onPromptRequest: Z,
onCancel: tt,
onClose: d,
streaming: z || V,
loading: D || Q,
outputs: G || S,
promptPlaceHolder: q,
suggestionsList: O,
enableSpeechToText: N,
...st
}
), nt = /* @__PURE__ */ o.createElement(
ut,
{
ref: u,
togglable: !0,
themeColor: "primary",
rounded: "full",
selected: c,
svgIcon: M || (I ? void 0 : ct),
icon: I,
size: t.mobileMode ? "large" : "medium",
className: gt("k-toolbar-button", { "k-icon-button": t.mobileMode }),
title: i.toLanguageString(g, m[g]),
onClick: et
}
);
return o.useEffect(() => {
var e;
if (u.current && c) {
const s = (e = u.current.element) == null ? void 0 : e.getBoundingClientRect();
if (s) {
U(s.top + window.scrollY + s.height), Y(s.left + window.scrollX + s.width);
const r = window.innerWidth, k = r < E ? r * 0.75 : 560;
_(k);
}
}
}, [c]), o.useImperativeHandle(
p,
() => ({
show: () => C(!0),
hide: () => d()
}),
[d]
), /* @__PURE__ */ o.createElement(o.Fragment, null, nt, c && /* @__PURE__ */ o.createElement(
pt,
{
key: A,
autoFocus: !1,
title: i.toLanguageString(g, m[g]),
initialTop: F,
initialLeft: X,
initialWidth: A,
style: {
height: "auto",
minWidth: "90px",
minHeight: "50px"
},
onClose: d,
resizable: !0,
draggable: !0,
className: "k-grid-assistant-window",
maximizeButton: kt
},
it
));
}
);
It.displayName = "KendoReactGridToolbarAIAssistant";
export {
It as GridToolbarAIAssistant
};