dp-widgets-framework 1.2.2 → 1.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +46 -23
- package/dist/index.js +45 -22
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -7,7 +7,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
|
|
|
7
7
|
import { cva } from 'class-variance-authority';
|
|
8
8
|
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
9
9
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
10
|
-
import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart as BarChart$1, Filter, Search, ArrowUp, ArrowDown, ChevronRight, RefreshCw, X, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, Loader2, GripHorizontal, Edit, MessageCircleX, Edit2 } from 'lucide-react';
|
|
10
|
+
import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart as BarChart$1, Filter, Search, ArrowUp, ArrowDown, ChevronRight, RefreshCw, X, AlignVerticalSpaceAround, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, Loader2, GripHorizontal, Edit, MessageCircleX, Edit2 } from 'lucide-react';
|
|
11
11
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
12
12
|
import { Slot } from '@radix-ui/react-slot';
|
|
13
13
|
import { debounce as debounce$1 } from 'lodash';
|
|
@@ -1993,7 +1993,7 @@ const borderRadiusMap$2 = {
|
|
|
1993
1993
|
large: "0.5rem",
|
|
1994
1994
|
"extra-large": "0.75rem",
|
|
1995
1995
|
};
|
|
1996
|
-
const getStyleValues$
|
|
1996
|
+
const getStyleValues$5 = (styles = {}) => {
|
|
1997
1997
|
return {
|
|
1998
1998
|
backgroundColor: styles.backgroundColor || "transparent",
|
|
1999
1999
|
borderRadius: borderRadiusMap$2[styles.borderRadius || "rounded"],
|
|
@@ -2006,7 +2006,7 @@ const getStyleValues$4 = (styles = {}) => {
|
|
|
2006
2006
|
};
|
|
2007
2007
|
function HeaderWidget({ widget }) {
|
|
2008
2008
|
var _a, _b;
|
|
2009
|
-
const styles = getStyleValues$
|
|
2009
|
+
const styles = getStyleValues$5((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
2010
2010
|
const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
|
|
2011
2011
|
return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles, children: jsxRuntimeExports.jsxs("div", { className: cn("flex items-center justify-between"), children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [content.showLogo && content.logoUrl && (jsxRuntimeExports.jsx("img", { src: content.logoUrl, alt: "Logo", className: "h-8 w-auto" })), jsxRuntimeExports.jsx("h1", { className: cn("font-semibold", content.titleSize || "text-xl"), children: content.title || "Header" })] }), content.showRightContent && (jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4", children: content.rightContent }))] }) }));
|
|
2012
2012
|
}
|
|
@@ -2017,7 +2017,7 @@ const borderRadiusMap$1 = {
|
|
|
2017
2017
|
large: "0.5rem",
|
|
2018
2018
|
"extra-large": "0.75rem",
|
|
2019
2019
|
};
|
|
2020
|
-
const getStyleValues$
|
|
2020
|
+
const getStyleValues$4 = (styles = {}) => {
|
|
2021
2021
|
return {
|
|
2022
2022
|
backgroundColor: styles.backgroundColor || "transparent",
|
|
2023
2023
|
borderRadius: borderRadiusMap$1[styles.borderRadius || "rounded"],
|
|
@@ -2030,7 +2030,7 @@ const getStyleValues$3 = (styles = {}) => {
|
|
|
2030
2030
|
};
|
|
2031
2031
|
function FooterWidget({ widget }) {
|
|
2032
2032
|
var _a, _b;
|
|
2033
|
-
const styles = getStyleValues$
|
|
2033
|
+
const styles = getStyleValues$4((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
2034
2034
|
const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
|
|
2035
2035
|
return (jsxRuntimeExports.jsx("footer", { className: "w-full", style: styles, children: jsxRuntimeExports.jsxs("div", { className: cn("flex items-center", content.layout === "centered" ? "justify-center" : "justify-between"), children: [jsxRuntimeExports.jsx("div", { className: "text-sm", children: content.leftContent || "© 2024 Your Company" }), content.showCenterContent && (jsxRuntimeExports.jsx("div", { className: "text-sm", children: content.centerContent })), content.showRightContent && (jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4 text-sm", children: content.rightContent }))] }) }));
|
|
2036
2036
|
}
|
|
@@ -2041,7 +2041,7 @@ const borderRadiusMap = {
|
|
|
2041
2041
|
large: "0.5rem",
|
|
2042
2042
|
"extra-large": "0.75rem",
|
|
2043
2043
|
};
|
|
2044
|
-
const getStyleValues$
|
|
2044
|
+
const getStyleValues$3 = (styles = {}) => {
|
|
2045
2045
|
const borderRadius = (styles.borderRadius || "rounded");
|
|
2046
2046
|
return {
|
|
2047
2047
|
backgroundColor: styles.backgroundColor || "transparent",
|
|
@@ -2056,12 +2056,12 @@ const getStyleValues$2 = (styles = {}) => {
|
|
|
2056
2056
|
};
|
|
2057
2057
|
function TextWidget({ widget }) {
|
|
2058
2058
|
var _a, _b;
|
|
2059
|
-
const styles = getStyleValues$
|
|
2059
|
+
const styles = getStyleValues$3((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
2060
2060
|
const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
|
|
2061
2061
|
return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles, children: jsxRuntimeExports.jsx("div", { className: cn("prose max-w-none", content.blockType === "heading-1" && "text-[24px] font-bold", content.blockType === "heading-2" && "text-[22px] font-bold", content.blockType === "heading-3" && "text-[18px] font-bold", content.blockType === "paragraph" && "text-base"), dangerouslySetInnerHTML: { __html: content.displayText || "Text content" } }) }));
|
|
2062
2062
|
}
|
|
2063
2063
|
|
|
2064
|
-
const getStyleValues$
|
|
2064
|
+
const getStyleValues$2 = (styles = {}) => {
|
|
2065
2065
|
return {
|
|
2066
2066
|
borderColor: styles.color || "#e5e7eb",
|
|
2067
2067
|
borderStyle: styles.style || "solid",
|
|
@@ -2071,7 +2071,7 @@ const getStyleValues$1 = (styles = {}) => {
|
|
|
2071
2071
|
};
|
|
2072
2072
|
function DividerWidget({ widget }) {
|
|
2073
2073
|
var _a, _b;
|
|
2074
|
-
const styles = getStyleValues$
|
|
2074
|
+
const styles = getStyleValues$2((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
2075
2075
|
const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
|
|
2076
2076
|
return (jsxRuntimeExports.jsxs("div", { className: "w-full", style: { margin: styles.margin }, children: [jsxRuntimeExports.jsx("hr", { className: cn("w-full", content.variant === "dashed" && "border-dashed", content.variant === "dotted" && "border-dotted"), style: {
|
|
2077
2077
|
borderColor: styles.borderColor,
|
|
@@ -36221,7 +36221,7 @@ const parseAndUpdateChartState = (apiResponse, setChartState) => {
|
|
|
36221
36221
|
console.error('Failed to parse and update chart state:', error);
|
|
36222
36222
|
}
|
|
36223
36223
|
};
|
|
36224
|
-
const getStyleValues = (styles = {}) => {
|
|
36224
|
+
const getStyleValues$1 = (styles = {}) => {
|
|
36225
36225
|
const borderRadiusMap = {
|
|
36226
36226
|
none: "0px",
|
|
36227
36227
|
rounded: "0.375rem",
|
|
@@ -36409,11 +36409,10 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
|
|
|
36409
36409
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
|
|
36410
36410
|
const hasCalledRef = useRef(false);
|
|
36411
36411
|
const labels = ((_b = (_a = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _c === void 0 ? void 0 : _c.pie_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
|
|
36412
|
-
const
|
|
36413
|
-
|
|
36414
|
-
|
|
36415
|
-
const
|
|
36416
|
-
const units = ((_z = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _z === void 0 ? void 0 : _z.units) || ((_1 = (_0 = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _0 === void 0 ? void 0 : _0.pie_chart_data) === null || _1 === void 0 ? void 0 : _1.units) || "";
|
|
36412
|
+
const values = ((_g = (_f = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.values) || ((_k = (_j = (_h = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _h === void 0 ? void 0 : _h.pie_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.values) || [];
|
|
36413
|
+
((_m = (_l = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.percentages) || ((_q = (_p = (_o = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _o === void 0 ? void 0 : _o.pie_chart_data) === null || _p === void 0 ? void 0 : _p.data) === null || _q === void 0 ? void 0 : _q.percentages) || [];
|
|
36414
|
+
const chartTitle = ((_r = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _r === void 0 ? void 0 : _r.title) || ((_t = (_s = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _s === void 0 ? void 0 : _s.pie_chart_data) === null || _t === void 0 ? void 0 : _t.title) || "";
|
|
36415
|
+
const units = ((_u = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _u === void 0 ? void 0 : _u.units) || ((_w = (_v = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _v === void 0 ? void 0 : _v.pie_chart_data) === null || _w === void 0 ? void 0 : _w.units) || "";
|
|
36417
36416
|
const isEmpty = labels.length === 0 || values.length === 0;
|
|
36418
36417
|
const handleRefresh = async () => {
|
|
36419
36418
|
if (query) {
|
|
@@ -36448,13 +36447,14 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
|
|
|
36448
36447
|
if (isEmpty) {
|
|
36449
36448
|
return createLoadingComponent();
|
|
36450
36449
|
}
|
|
36450
|
+
const colors = ((_y = (_x = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _x === void 0 ? void 0 : _x.data) === null || _y === void 0 ? void 0 : _y.colors) || ((_1 = (_0 = (_z = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _z === void 0 ? void 0 : _z.pie_chart_data) === null || _0 === void 0 ? void 0 : _0.data) === null || _1 === void 0 ? void 0 : _1.colors) || labels.map((_, index) => backgroundColors[index % backgroundColors.length]);
|
|
36451
36451
|
const transformedData = {
|
|
36452
36452
|
labels: labels,
|
|
36453
36453
|
datasets: [
|
|
36454
36454
|
{
|
|
36455
36455
|
label: chartTitle || "Data",
|
|
36456
36456
|
data: values,
|
|
36457
|
-
backgroundColor: colors
|
|
36457
|
+
backgroundColor: colors,
|
|
36458
36458
|
borderWidth: 0,
|
|
36459
36459
|
},
|
|
36460
36460
|
],
|
|
@@ -36773,7 +36773,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
|
|
|
36773
36773
|
}
|
|
36774
36774
|
function AgentWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
|
|
36775
36775
|
var _a, _b;
|
|
36776
|
-
const styles = getStyleValues((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
36776
|
+
const styles = getStyleValues$1((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
36777
36777
|
// Construct the runtime URL using the configurable backend URL
|
|
36778
36778
|
const getRuntimeUrl = () => {
|
|
36779
36779
|
var _a;
|
|
@@ -36784,6 +36784,19 @@ function AgentWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady
|
|
|
36784
36784
|
return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "widget_assistant", children: jsxRuntimeExports.jsx(CopilotKitAgent, { widget: widget, showHeader: showHeader, styles: styles, onResetReady: onResetReady, widgetIds: widgetIds, widgetBackendUrl: widgetBackendUrl, datasetId: datasetId }) }) }));
|
|
36785
36785
|
}
|
|
36786
36786
|
|
|
36787
|
+
const getStyleValues = (styles = {}) => {
|
|
36788
|
+
(styles.borderRadius || "rounded");
|
|
36789
|
+
return {
|
|
36790
|
+
// backgroundColor: styles.backgroundColor || "10px",
|
|
36791
|
+
};
|
|
36792
|
+
};
|
|
36793
|
+
function SpacerWidget({ widget }) {
|
|
36794
|
+
var _a, _b;
|
|
36795
|
+
const styles = getStyleValues((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
36796
|
+
((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
|
|
36797
|
+
return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles }));
|
|
36798
|
+
}
|
|
36799
|
+
|
|
36787
36800
|
function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
|
|
36788
36801
|
const handleConfigUpdate = (config) => {
|
|
36789
36802
|
if (onConfigUpdate) {
|
|
@@ -36801,6 +36814,8 @@ function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBack
|
|
|
36801
36814
|
return jsxRuntimeExports.jsx(FooterWidget, { widget: widget, showHeader: false });
|
|
36802
36815
|
case "text":
|
|
36803
36816
|
return jsxRuntimeExports.jsx(TextWidget, { widget: widget, showHeader: false });
|
|
36817
|
+
case "spacer":
|
|
36818
|
+
return jsxRuntimeExports.jsx(SpacerWidget, { widget: widget, showHeader: false });
|
|
36804
36819
|
case "divider":
|
|
36805
36820
|
return jsxRuntimeExports.jsx(DividerWidget, { widget: widget, showHeader: false });
|
|
36806
36821
|
case "facet":
|
|
@@ -36963,6 +36978,13 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
|
|
|
36963
36978
|
description: 'Add headings or paragraphs to your dashboard',
|
|
36964
36979
|
configRequired: false
|
|
36965
36980
|
},
|
|
36981
|
+
{
|
|
36982
|
+
type: 'spacer',
|
|
36983
|
+
title: 'Spacer Widget',
|
|
36984
|
+
icon: AlignVerticalSpaceAround,
|
|
36985
|
+
description: 'Add empty space to adjust layout and improve visual balance',
|
|
36986
|
+
configRequired: false
|
|
36987
|
+
},
|
|
36966
36988
|
{
|
|
36967
36989
|
type: 'series-bar-chart',
|
|
36968
36990
|
title: 'Bar Chart Widget',
|
|
@@ -37491,7 +37513,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
37491
37513
|
w: widget.width,
|
|
37492
37514
|
h: widget.height,
|
|
37493
37515
|
minW: 0,
|
|
37494
|
-
minH:
|
|
37516
|
+
minH: widget.minH,
|
|
37495
37517
|
}));
|
|
37496
37518
|
// Create a grid map to track occupied spaces
|
|
37497
37519
|
const gridMap = [];
|
|
@@ -37551,7 +37573,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
37551
37573
|
'bar-chart': 'Bar Chart Widget',
|
|
37552
37574
|
'pie-chart': 'Pie Chart Widget',
|
|
37553
37575
|
'chatbot': 'Chatbot Widget',
|
|
37554
|
-
'text': 'Text Widget'
|
|
37576
|
+
'text': 'Text Widget',
|
|
37577
|
+
'spacer': 'Spacer Widget'
|
|
37555
37578
|
};
|
|
37556
37579
|
widgetTypeConfig = {
|
|
37557
37580
|
type: widgetType,
|
|
@@ -37578,7 +37601,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
37578
37601
|
config: config ? Object.assign(Object.assign({}, config), { isFirstLoad: true }) : { isFirstLoad: true },
|
|
37579
37602
|
is_draggable: true,
|
|
37580
37603
|
is_resizable: true,
|
|
37581
|
-
minH: widgetType === "text" ? widgetTypeConfig.defaultSize.h :
|
|
37604
|
+
minH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : 1,
|
|
37582
37605
|
maxH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
|
|
37583
37606
|
page_id: pageId,
|
|
37584
37607
|
};
|
|
@@ -37622,7 +37645,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
37622
37645
|
? (isEditing ? widget.height : Math.max(widget.height - 1, 1))
|
|
37623
37646
|
: widget.height,
|
|
37624
37647
|
minW: 0,
|
|
37625
|
-
minH: isText ? widget.height :
|
|
37648
|
+
minH: isText ? widget.height : 1,
|
|
37626
37649
|
maxH: isText ? widget.height : undefined,
|
|
37627
37650
|
isResizable: isEditing,
|
|
37628
37651
|
resizeHandles: isText
|
|
@@ -37652,8 +37675,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
37652
37675
|
onCloseWidgetPallete && onCloseWidgetPallete();
|
|
37653
37676
|
}, defaultAgentName: defaultAgentName }), jsxRuntimeExports.jsx(EditWidgetDialog, { editingWidget: editingWidget, setWidgets: setWidgets, initialText: editInitialQuery, isOpen: showEditModal, onClose: () => setShowEditModal(false), onSubmit: handleEditSubmit }), jsxRuntimeExports.jsx("div", { className: "min-h-full", onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, onClick: () => setSelectedWidget(null), children: isLoading ? (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsx(Loader2, { className: "h-8 w-8 animate-spin" }) })) : (jsxRuntimeExports.jsx(RGL, { className: "layout m-0 p-0 gap-2", layouts: { lg: getLayoutFromWidgets() }, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480 }, cols: { lg: 12, md: 8, sm: 6, xs: 2 }, rowHeight: 60, isDraggable: isEditing, isResizable: isEditing, draggableHandle: ".drag-icon", onLayoutChange: handleLayoutChange, compactType: "vertical", containerPadding: [0, 0], margin: [16, 16], children: widgets.map((w) => {
|
|
37654
37677
|
var _a, _b;
|
|
37655
|
-
return (jsxRuntimeExports.jsxs("div", { className: `${w.type === "text" ? `${((_b = (_a = w === null || w === void 0 ? void 0 : w.config) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? 'shadow-lg rounded-xl border border-primary-300' : 'flex items-center'}` : `shadow-lg rounded-xl border border-primary-300 p-4 ${isEditing ? 'pb-20' : 'pb-14'}`} overflow-hidden`, children: [isEditing &&
|
|
37656
|
-
jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-end mb-4 relative ${w.type === "text" ? "pl-4 pr-4 pt-4" : ""}`, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center drag-icon cursor-grab absolute left-1/2 -translate-x-1/2", children: [jsxRuntimeExports.jsx(GripHorizontal, { className: "" }), jsxRuntimeExports.jsx(GripHorizontal, { className: "-ml-[3px]" }), jsxRuntimeExports.jsx(GripHorizontal, { className: "-ml-[3px]" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 cursor-pointer justify-end", children: [jsxRuntimeExports.jsx(Trash2, { onClick: () => removeWidget(w.id), className: "w-5 h-5 text-red-700" }), jsxRuntimeExports.jsx(Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })] })] }), jsxRuntimeExports.jsxs("div", { className: `${(w === null || w === void 0 ? void 0 : w.type) === 'text' ? `${isEditing ? 'px-4' : ''}` : "h-full"} w-full relative`, children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
|
|
37678
|
+
return (jsxRuntimeExports.jsxs("div", { className: `${(w.type === "text" || w.type === "spacer") ? `${((_b = (_a = w === null || w === void 0 ? void 0 : w.config) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? 'shadow-lg rounded-xl border border-primary-300' : 'flex items-center'}` : `shadow-lg rounded-xl border border-primary-300 p-4 ${isEditing ? 'pb-20' : 'pb-14'}`} overflow-hidden`, children: [isEditing &&
|
|
37679
|
+
jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-end mb-4 relative ${(w.type === "text" || w.type === "spacer") ? "pl-4 pr-4 pt-4" : ""}`, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center drag-icon cursor-grab absolute left-1/2 -translate-x-1/2", children: [jsxRuntimeExports.jsx(GripHorizontal, { className: "" }), jsxRuntimeExports.jsx(GripHorizontal, { className: "-ml-[3px]" }), jsxRuntimeExports.jsx(GripHorizontal, { className: "-ml-[3px]" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 cursor-pointer justify-end", children: [jsxRuntimeExports.jsx(Trash2, { onClick: () => removeWidget(w.id), className: "w-5 h-5 text-red-700" }), w.type !== "spacer" && jsxRuntimeExports.jsx(Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })] })] }), jsxRuntimeExports.jsxs("div", { className: `${((w === null || w === void 0 ? void 0 : w.type) === 'text' || (w === null || w === void 0 ? void 0 : w.type) === 'spacer') ? `${isEditing ? 'px-4' : ''}` : "h-full"} w-full relative`, children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
|
|
37657
37680
|
jsxRuntimeExports.jsxs("div", { className: "relative z-50", children: [jsxRuntimeExports.jsx("div", { onClick: () => handleClearChat(w.id), onMouseOver: () => setVisibleClearButton(true), onMouseLeave: () => setVisibleClearButton(false), className: "absolute top-[12px] right-0 z-40 flex align-middle justify-center gap-2 text-sm px-4 py-2 border-primary-300 rounded-l-sm w-fit bg-primary-700 text-white cursor-pointer shadow-md transition-all", children: jsxRuntimeExports.jsx(MessageCircleX, { className: "w-5 h-5" }) }), jsxRuntimeExports.jsx("span", { className: `absolute top-[56px] right-[16px] z-50 w-max py-1 text-xs px-2 rounded-sm text-white bg-gray-950 ${visibleClearButton ? "block" : "hidden"}`, children: "Clear Chat" })] }), jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl: widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter(widget => widget.type !== 'chatbot').map(widget => widget.id), datasetId: datasetId })] })] }, w.id));
|
|
37658
37681
|
}) })) })] }));
|
|
37659
37682
|
}
|
package/dist/index.js
CHANGED
|
@@ -2020,7 +2020,7 @@ const borderRadiusMap$2 = {
|
|
|
2020
2020
|
large: "0.5rem",
|
|
2021
2021
|
"extra-large": "0.75rem",
|
|
2022
2022
|
};
|
|
2023
|
-
const getStyleValues$
|
|
2023
|
+
const getStyleValues$5 = (styles = {}) => {
|
|
2024
2024
|
return {
|
|
2025
2025
|
backgroundColor: styles.backgroundColor || "transparent",
|
|
2026
2026
|
borderRadius: borderRadiusMap$2[styles.borderRadius || "rounded"],
|
|
@@ -2033,7 +2033,7 @@ const getStyleValues$4 = (styles = {}) => {
|
|
|
2033
2033
|
};
|
|
2034
2034
|
function HeaderWidget({ widget }) {
|
|
2035
2035
|
var _a, _b;
|
|
2036
|
-
const styles = getStyleValues$
|
|
2036
|
+
const styles = getStyleValues$5((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
2037
2037
|
const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
|
|
2038
2038
|
return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles, children: jsxRuntimeExports.jsxs("div", { className: cn("flex items-center justify-between"), children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [content.showLogo && content.logoUrl && (jsxRuntimeExports.jsx("img", { src: content.logoUrl, alt: "Logo", className: "h-8 w-auto" })), jsxRuntimeExports.jsx("h1", { className: cn("font-semibold", content.titleSize || "text-xl"), children: content.title || "Header" })] }), content.showRightContent && (jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4", children: content.rightContent }))] }) }));
|
|
2039
2039
|
}
|
|
@@ -2044,7 +2044,7 @@ const borderRadiusMap$1 = {
|
|
|
2044
2044
|
large: "0.5rem",
|
|
2045
2045
|
"extra-large": "0.75rem",
|
|
2046
2046
|
};
|
|
2047
|
-
const getStyleValues$
|
|
2047
|
+
const getStyleValues$4 = (styles = {}) => {
|
|
2048
2048
|
return {
|
|
2049
2049
|
backgroundColor: styles.backgroundColor || "transparent",
|
|
2050
2050
|
borderRadius: borderRadiusMap$1[styles.borderRadius || "rounded"],
|
|
@@ -2057,7 +2057,7 @@ const getStyleValues$3 = (styles = {}) => {
|
|
|
2057
2057
|
};
|
|
2058
2058
|
function FooterWidget({ widget }) {
|
|
2059
2059
|
var _a, _b;
|
|
2060
|
-
const styles = getStyleValues$
|
|
2060
|
+
const styles = getStyleValues$4((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
2061
2061
|
const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
|
|
2062
2062
|
return (jsxRuntimeExports.jsx("footer", { className: "w-full", style: styles, children: jsxRuntimeExports.jsxs("div", { className: cn("flex items-center", content.layout === "centered" ? "justify-center" : "justify-between"), children: [jsxRuntimeExports.jsx("div", { className: "text-sm", children: content.leftContent || "© 2024 Your Company" }), content.showCenterContent && (jsxRuntimeExports.jsx("div", { className: "text-sm", children: content.centerContent })), content.showRightContent && (jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4 text-sm", children: content.rightContent }))] }) }));
|
|
2063
2063
|
}
|
|
@@ -2068,7 +2068,7 @@ const borderRadiusMap = {
|
|
|
2068
2068
|
large: "0.5rem",
|
|
2069
2069
|
"extra-large": "0.75rem",
|
|
2070
2070
|
};
|
|
2071
|
-
const getStyleValues$
|
|
2071
|
+
const getStyleValues$3 = (styles = {}) => {
|
|
2072
2072
|
const borderRadius = (styles.borderRadius || "rounded");
|
|
2073
2073
|
return {
|
|
2074
2074
|
backgroundColor: styles.backgroundColor || "transparent",
|
|
@@ -2083,12 +2083,12 @@ const getStyleValues$2 = (styles = {}) => {
|
|
|
2083
2083
|
};
|
|
2084
2084
|
function TextWidget({ widget }) {
|
|
2085
2085
|
var _a, _b;
|
|
2086
|
-
const styles = getStyleValues$
|
|
2086
|
+
const styles = getStyleValues$3((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
2087
2087
|
const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
|
|
2088
2088
|
return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles, children: jsxRuntimeExports.jsx("div", { className: cn("prose max-w-none", content.blockType === "heading-1" && "text-[24px] font-bold", content.blockType === "heading-2" && "text-[22px] font-bold", content.blockType === "heading-3" && "text-[18px] font-bold", content.blockType === "paragraph" && "text-base"), dangerouslySetInnerHTML: { __html: content.displayText || "Text content" } }) }));
|
|
2089
2089
|
}
|
|
2090
2090
|
|
|
2091
|
-
const getStyleValues$
|
|
2091
|
+
const getStyleValues$2 = (styles = {}) => {
|
|
2092
2092
|
return {
|
|
2093
2093
|
borderColor: styles.color || "#e5e7eb",
|
|
2094
2094
|
borderStyle: styles.style || "solid",
|
|
@@ -2098,7 +2098,7 @@ const getStyleValues$1 = (styles = {}) => {
|
|
|
2098
2098
|
};
|
|
2099
2099
|
function DividerWidget({ widget }) {
|
|
2100
2100
|
var _a, _b;
|
|
2101
|
-
const styles = getStyleValues$
|
|
2101
|
+
const styles = getStyleValues$2((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
2102
2102
|
const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
|
|
2103
2103
|
return (jsxRuntimeExports.jsxs("div", { className: "w-full", style: { margin: styles.margin }, children: [jsxRuntimeExports.jsx("hr", { className: cn("w-full", content.variant === "dashed" && "border-dashed", content.variant === "dotted" && "border-dotted"), style: {
|
|
2104
2104
|
borderColor: styles.borderColor,
|
|
@@ -36248,7 +36248,7 @@ const parseAndUpdateChartState = (apiResponse, setChartState) => {
|
|
|
36248
36248
|
console.error('Failed to parse and update chart state:', error);
|
|
36249
36249
|
}
|
|
36250
36250
|
};
|
|
36251
|
-
const getStyleValues = (styles = {}) => {
|
|
36251
|
+
const getStyleValues$1 = (styles = {}) => {
|
|
36252
36252
|
const borderRadiusMap = {
|
|
36253
36253
|
none: "0px",
|
|
36254
36254
|
rounded: "0.375rem",
|
|
@@ -36436,11 +36436,10 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
|
|
|
36436
36436
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
|
|
36437
36437
|
const hasCalledRef = React.useRef(false);
|
|
36438
36438
|
const labels = ((_b = (_a = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _c === void 0 ? void 0 : _c.pie_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
|
|
36439
|
-
const
|
|
36440
|
-
|
|
36441
|
-
|
|
36442
|
-
const
|
|
36443
|
-
const units = ((_z = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _z === void 0 ? void 0 : _z.units) || ((_1 = (_0 = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _0 === void 0 ? void 0 : _0.pie_chart_data) === null || _1 === void 0 ? void 0 : _1.units) || "";
|
|
36439
|
+
const values = ((_g = (_f = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.values) || ((_k = (_j = (_h = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _h === void 0 ? void 0 : _h.pie_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.values) || [];
|
|
36440
|
+
((_m = (_l = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.percentages) || ((_q = (_p = (_o = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _o === void 0 ? void 0 : _o.pie_chart_data) === null || _p === void 0 ? void 0 : _p.data) === null || _q === void 0 ? void 0 : _q.percentages) || [];
|
|
36441
|
+
const chartTitle = ((_r = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _r === void 0 ? void 0 : _r.title) || ((_t = (_s = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _s === void 0 ? void 0 : _s.pie_chart_data) === null || _t === void 0 ? void 0 : _t.title) || "";
|
|
36442
|
+
const units = ((_u = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _u === void 0 ? void 0 : _u.units) || ((_w = (_v = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _v === void 0 ? void 0 : _v.pie_chart_data) === null || _w === void 0 ? void 0 : _w.units) || "";
|
|
36444
36443
|
const isEmpty = labels.length === 0 || values.length === 0;
|
|
36445
36444
|
const handleRefresh = async () => {
|
|
36446
36445
|
if (query) {
|
|
@@ -36475,13 +36474,14 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
|
|
|
36475
36474
|
if (isEmpty) {
|
|
36476
36475
|
return createLoadingComponent();
|
|
36477
36476
|
}
|
|
36477
|
+
const colors = ((_y = (_x = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _x === void 0 ? void 0 : _x.data) === null || _y === void 0 ? void 0 : _y.colors) || ((_1 = (_0 = (_z = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _z === void 0 ? void 0 : _z.pie_chart_data) === null || _0 === void 0 ? void 0 : _0.data) === null || _1 === void 0 ? void 0 : _1.colors) || labels.map((_, index) => backgroundColors[index % backgroundColors.length]);
|
|
36478
36478
|
const transformedData = {
|
|
36479
36479
|
labels: labels,
|
|
36480
36480
|
datasets: [
|
|
36481
36481
|
{
|
|
36482
36482
|
label: chartTitle || "Data",
|
|
36483
36483
|
data: values,
|
|
36484
|
-
backgroundColor: colors
|
|
36484
|
+
backgroundColor: colors,
|
|
36485
36485
|
borderWidth: 0,
|
|
36486
36486
|
},
|
|
36487
36487
|
],
|
|
@@ -36800,7 +36800,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
|
|
|
36800
36800
|
}
|
|
36801
36801
|
function AgentWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
|
|
36802
36802
|
var _a, _b;
|
|
36803
|
-
const styles = getStyleValues((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
36803
|
+
const styles = getStyleValues$1((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
36804
36804
|
// Construct the runtime URL using the configurable backend URL
|
|
36805
36805
|
const getRuntimeUrl = () => {
|
|
36806
36806
|
var _a;
|
|
@@ -36811,6 +36811,19 @@ function AgentWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady
|
|
|
36811
36811
|
return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(reactCore.CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "widget_assistant", children: jsxRuntimeExports.jsx(CopilotKitAgent, { widget: widget, showHeader: showHeader, styles: styles, onResetReady: onResetReady, widgetIds: widgetIds, widgetBackendUrl: widgetBackendUrl, datasetId: datasetId }) }) }));
|
|
36812
36812
|
}
|
|
36813
36813
|
|
|
36814
|
+
const getStyleValues = (styles = {}) => {
|
|
36815
|
+
(styles.borderRadius || "rounded");
|
|
36816
|
+
return {
|
|
36817
|
+
// backgroundColor: styles.backgroundColor || "10px",
|
|
36818
|
+
};
|
|
36819
|
+
};
|
|
36820
|
+
function SpacerWidget({ widget }) {
|
|
36821
|
+
var _a, _b;
|
|
36822
|
+
const styles = getStyleValues((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
|
|
36823
|
+
((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
|
|
36824
|
+
return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles }));
|
|
36825
|
+
}
|
|
36826
|
+
|
|
36814
36827
|
function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
|
|
36815
36828
|
const handleConfigUpdate = (config) => {
|
|
36816
36829
|
if (onConfigUpdate) {
|
|
@@ -36828,6 +36841,8 @@ function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBack
|
|
|
36828
36841
|
return jsxRuntimeExports.jsx(FooterWidget, { widget: widget, showHeader: false });
|
|
36829
36842
|
case "text":
|
|
36830
36843
|
return jsxRuntimeExports.jsx(TextWidget, { widget: widget, showHeader: false });
|
|
36844
|
+
case "spacer":
|
|
36845
|
+
return jsxRuntimeExports.jsx(SpacerWidget, { widget: widget, showHeader: false });
|
|
36831
36846
|
case "divider":
|
|
36832
36847
|
return jsxRuntimeExports.jsx(DividerWidget, { widget: widget, showHeader: false });
|
|
36833
36848
|
case "facet":
|
|
@@ -36990,6 +37005,13 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
|
|
|
36990
37005
|
description: 'Add headings or paragraphs to your dashboard',
|
|
36991
37006
|
configRequired: false
|
|
36992
37007
|
},
|
|
37008
|
+
{
|
|
37009
|
+
type: 'spacer',
|
|
37010
|
+
title: 'Spacer Widget',
|
|
37011
|
+
icon: lucideReact.AlignVerticalSpaceAround,
|
|
37012
|
+
description: 'Add empty space to adjust layout and improve visual balance',
|
|
37013
|
+
configRequired: false
|
|
37014
|
+
},
|
|
36993
37015
|
{
|
|
36994
37016
|
type: 'series-bar-chart',
|
|
36995
37017
|
title: 'Bar Chart Widget',
|
|
@@ -37518,7 +37540,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
37518
37540
|
w: widget.width,
|
|
37519
37541
|
h: widget.height,
|
|
37520
37542
|
minW: 0,
|
|
37521
|
-
minH:
|
|
37543
|
+
minH: widget.minH,
|
|
37522
37544
|
}));
|
|
37523
37545
|
// Create a grid map to track occupied spaces
|
|
37524
37546
|
const gridMap = [];
|
|
@@ -37578,7 +37600,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
37578
37600
|
'bar-chart': 'Bar Chart Widget',
|
|
37579
37601
|
'pie-chart': 'Pie Chart Widget',
|
|
37580
37602
|
'chatbot': 'Chatbot Widget',
|
|
37581
|
-
'text': 'Text Widget'
|
|
37603
|
+
'text': 'Text Widget',
|
|
37604
|
+
'spacer': 'Spacer Widget'
|
|
37582
37605
|
};
|
|
37583
37606
|
widgetTypeConfig = {
|
|
37584
37607
|
type: widgetType,
|
|
@@ -37605,7 +37628,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
37605
37628
|
config: config ? Object.assign(Object.assign({}, config), { isFirstLoad: true }) : { isFirstLoad: true },
|
|
37606
37629
|
is_draggable: true,
|
|
37607
37630
|
is_resizable: true,
|
|
37608
|
-
minH: widgetType === "text" ? widgetTypeConfig.defaultSize.h :
|
|
37631
|
+
minH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : 1,
|
|
37609
37632
|
maxH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
|
|
37610
37633
|
page_id: pageId,
|
|
37611
37634
|
};
|
|
@@ -37649,7 +37672,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
37649
37672
|
? (isEditing ? widget.height : Math.max(widget.height - 1, 1))
|
|
37650
37673
|
: widget.height,
|
|
37651
37674
|
minW: 0,
|
|
37652
|
-
minH: isText ? widget.height :
|
|
37675
|
+
minH: isText ? widget.height : 1,
|
|
37653
37676
|
maxH: isText ? widget.height : undefined,
|
|
37654
37677
|
isResizable: isEditing,
|
|
37655
37678
|
resizeHandles: isText
|
|
@@ -37679,8 +37702,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
37679
37702
|
onCloseWidgetPallete && onCloseWidgetPallete();
|
|
37680
37703
|
}, defaultAgentName: defaultAgentName }), jsxRuntimeExports.jsx(EditWidgetDialog, { editingWidget: editingWidget, setWidgets: setWidgets, initialText: editInitialQuery, isOpen: showEditModal, onClose: () => setShowEditModal(false), onSubmit: handleEditSubmit }), jsxRuntimeExports.jsx("div", { className: "min-h-full", onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, onClick: () => setSelectedWidget(null), children: isLoading ? (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsx(lucideReact.Loader2, { className: "h-8 w-8 animate-spin" }) })) : (jsxRuntimeExports.jsx(RGL, { className: "layout m-0 p-0 gap-2", layouts: { lg: getLayoutFromWidgets() }, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480 }, cols: { lg: 12, md: 8, sm: 6, xs: 2 }, rowHeight: 60, isDraggable: isEditing, isResizable: isEditing, draggableHandle: ".drag-icon", onLayoutChange: handleLayoutChange, compactType: "vertical", containerPadding: [0, 0], margin: [16, 16], children: widgets.map((w) => {
|
|
37681
37704
|
var _a, _b;
|
|
37682
|
-
return (jsxRuntimeExports.jsxs("div", { className: `${w.type === "text" ? `${((_b = (_a = w === null || w === void 0 ? void 0 : w.config) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? 'shadow-lg rounded-xl border border-primary-300' : 'flex items-center'}` : `shadow-lg rounded-xl border border-primary-300 p-4 ${isEditing ? 'pb-20' : 'pb-14'}`} overflow-hidden`, children: [isEditing &&
|
|
37683
|
-
jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-end mb-4 relative ${w.type === "text" ? "pl-4 pr-4 pt-4" : ""}`, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center drag-icon cursor-grab absolute left-1/2 -translate-x-1/2", children: [jsxRuntimeExports.jsx(lucideReact.GripHorizontal, { className: "" }), jsxRuntimeExports.jsx(lucideReact.GripHorizontal, { className: "-ml-[3px]" }), jsxRuntimeExports.jsx(lucideReact.GripHorizontal, { className: "-ml-[3px]" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 cursor-pointer justify-end", children: [jsxRuntimeExports.jsx(lucideReact.Trash2, { onClick: () => removeWidget(w.id), className: "w-5 h-5 text-red-700" }), jsxRuntimeExports.jsx(lucideReact.Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })] })] }), jsxRuntimeExports.jsxs("div", { className: `${(w === null || w === void 0 ? void 0 : w.type) === 'text' ? `${isEditing ? 'px-4' : ''}` : "h-full"} w-full relative`, children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
|
|
37705
|
+
return (jsxRuntimeExports.jsxs("div", { className: `${(w.type === "text" || w.type === "spacer") ? `${((_b = (_a = w === null || w === void 0 ? void 0 : w.config) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? 'shadow-lg rounded-xl border border-primary-300' : 'flex items-center'}` : `shadow-lg rounded-xl border border-primary-300 p-4 ${isEditing ? 'pb-20' : 'pb-14'}`} overflow-hidden`, children: [isEditing &&
|
|
37706
|
+
jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-end mb-4 relative ${(w.type === "text" || w.type === "spacer") ? "pl-4 pr-4 pt-4" : ""}`, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center drag-icon cursor-grab absolute left-1/2 -translate-x-1/2", children: [jsxRuntimeExports.jsx(lucideReact.GripHorizontal, { className: "" }), jsxRuntimeExports.jsx(lucideReact.GripHorizontal, { className: "-ml-[3px]" }), jsxRuntimeExports.jsx(lucideReact.GripHorizontal, { className: "-ml-[3px]" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 cursor-pointer justify-end", children: [jsxRuntimeExports.jsx(lucideReact.Trash2, { onClick: () => removeWidget(w.id), className: "w-5 h-5 text-red-700" }), w.type !== "spacer" && jsxRuntimeExports.jsx(lucideReact.Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })] })] }), jsxRuntimeExports.jsxs("div", { className: `${((w === null || w === void 0 ? void 0 : w.type) === 'text' || (w === null || w === void 0 ? void 0 : w.type) === 'spacer') ? `${isEditing ? 'px-4' : ''}` : "h-full"} w-full relative`, children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
|
|
37684
37707
|
jsxRuntimeExports.jsxs("div", { className: "relative z-50", children: [jsxRuntimeExports.jsx("div", { onClick: () => handleClearChat(w.id), onMouseOver: () => setVisibleClearButton(true), onMouseLeave: () => setVisibleClearButton(false), className: "absolute top-[12px] right-0 z-40 flex align-middle justify-center gap-2 text-sm px-4 py-2 border-primary-300 rounded-l-sm w-fit bg-primary-700 text-white cursor-pointer shadow-md transition-all", children: jsxRuntimeExports.jsx(lucideReact.MessageCircleX, { className: "w-5 h-5" }) }), jsxRuntimeExports.jsx("span", { className: `absolute top-[56px] right-[16px] z-50 w-max py-1 text-xs px-2 rounded-sm text-white bg-gray-950 ${visibleClearButton ? "block" : "hidden"}`, children: "Clear Chat" })] }), jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl: widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter(widget => widget.type !== 'chatbot').map(widget => widget.id), datasetId: datasetId })] })] }, w.id));
|
|
37685
37708
|
}) })) })] }));
|
|
37686
37709
|
}
|