dp-widgets-framework 1.1.6 → 1.1.8

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.
Files changed (3) hide show
  1. package/dist/index.esm.js +177 -36
  2. package/dist/index.js +176 -35
  3. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import React__default, { useState, useEffect, useCallback, forwardRef, useRef, useMemo } from 'react';
3
3
  import * as TabsPrimitive from '@radix-ui/react-tabs';
4
- import { clsx } from 'clsx';
4
+ import clsx$1, { clsx } from 'clsx';
5
5
  import { twMerge } from 'tailwind-merge';
6
6
  import * as LabelPrimitive from '@radix-ui/react-label';
7
7
  import { cva } from 'class-variance-authority';
@@ -1457,6 +1457,9 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
1457
1457
  function cn(...inputs) {
1458
1458
  return twMerge(clsx(inputs));
1459
1459
  }
1460
+ const KEYS = {
1461
+ ESCAPE: 'Escape',
1462
+ TAB: 'Tab'};
1460
1463
 
1461
1464
  const Tabs = TabsPrimitive.Root;
1462
1465
  const TabsList = React.forwardRef((_a, ref) => {
@@ -2043,19 +2046,19 @@ const getStyleValues$2 = (styles = {}) => {
2043
2046
  return {
2044
2047
  backgroundColor: styles.backgroundColor || "transparent",
2045
2048
  borderRadius: borderRadiusMap[borderRadius],
2046
- padding: styles.padding || "1rem",
2049
+ // padding: styles.padding || "1rem",
2047
2050
  color: styles.textColor || "#000000",
2048
2051
  fontSize: styles.fontSize || "1rem",
2049
- textAlign: styles.alignment || "left",
2052
+ textAlign: styles.textAlign || "left",
2050
2053
  fontWeight: styles.fontWeight || "normal",
2051
- lineHeight: styles.lineHeight || "1.5",
2054
+ lineHeight: styles.lineHeight || "1.5"
2052
2055
  };
2053
2056
  };
2054
2057
  function TextWidget({ widget }) {
2055
2058
  var _a, _b;
2056
2059
  const styles = getStyleValues$2((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
2057
2060
  const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
2058
- return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles, children: jsxRuntimeExports.jsx("div", { className: cn("prose max-w-none", content.variant === "title" && "text-2xl font-bold", content.variant === "subtitle" && "text-xl font-semibold", content.variant === "body" && "text-base"), dangerouslySetInnerHTML: { __html: content.text || "Text content" } }) }));
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" } }) }));
2059
2062
  }
2060
2063
 
2061
2064
  const getStyleValues$1 = (styles = {}) => {
@@ -36785,28 +36788,135 @@ function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBack
36785
36788
  return (jsxRuntimeExports.jsxs("div", { className: "text-muted-foreground", children: ["Unknown widget type: ", widget.type] }));
36786
36789
  }
36787
36790
  };
36788
- return (jsxRuntimeExports.jsx("div", { className: "h-full", children: renderWidget() }));
36791
+ return (jsxRuntimeExports.jsx("div", { className: `${(widget === null || widget === void 0 ? void 0 : widget.type) === 'text' ? "" : "h-full"}`, children: renderWidget() }));
36789
36792
  }
36790
36793
 
36791
36794
  const Textarea = React.forwardRef((_a, ref) => {
36792
36795
  var { className } = _a, props = __rest(_a, ["className"]);
36793
- return (jsxRuntimeExports.jsx("textarea", Object.assign({ className: cn("flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className), ref: ref }, props)));
36796
+ return (jsxRuntimeExports.jsx("textarea", Object.assign({ className: cn("flex min-h-[120px] w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-base ring-offset-gray-300 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className), ref: ref }, props)));
36794
36797
  });
36795
36798
  Textarea.displayName = "Textarea";
36796
36799
 
36797
- function EditWidgetDialog({ initialText, isOpen, onClose, onSubmit }) {
36800
+ function Modal({ isOpen, onClose, title, children, size = 'md', initialFocusRef, noOverflowHidden, }) {
36801
+ const modalRef = useRef(null);
36802
+ useEffect(() => {
36803
+ if (!isOpen || !modalRef.current)
36804
+ return;
36805
+ // Custom focus management
36806
+ const focusableElements = modalRef.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])');
36807
+ const firstFocusableElement = focusableElements[0];
36808
+ const lastFocusableElement = focusableElements[focusableElements.length - 1];
36809
+ // Handle tab key for focus trapping
36810
+ const handleKeyDown = (e) => {
36811
+ if (e.key === KEYS.ESCAPE) {
36812
+ onClose();
36813
+ return;
36814
+ }
36815
+ if (e.key === KEYS.TAB) {
36816
+ if (e.shiftKey) {
36817
+ // Shift + Tab
36818
+ if (document.activeElement === firstFocusableElement) {
36819
+ lastFocusableElement.focus();
36820
+ e.preventDefault();
36821
+ }
36822
+ }
36823
+ else {
36824
+ // Tab
36825
+ if (document.activeElement === lastFocusableElement) {
36826
+ firstFocusableElement.focus();
36827
+ e.preventDefault();
36828
+ }
36829
+ }
36830
+ }
36831
+ };
36832
+ document.addEventListener('keydown', handleKeyDown);
36833
+ // Set initial focus
36834
+ setTimeout(() => {
36835
+ if (initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) {
36836
+ initialFocusRef.current.focus();
36837
+ }
36838
+ else {
36839
+ firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
36840
+ }
36841
+ }, 0);
36842
+ // Prevent body scroll
36843
+ document.body.style.overflow = 'hidden';
36844
+ return () => {
36845
+ document.removeEventListener('keydown', handleKeyDown);
36846
+ document.body.style.overflow = '';
36847
+ };
36848
+ }, [isOpen, onClose, initialFocusRef]);
36849
+ if (!isOpen)
36850
+ return null;
36851
+ const sizeClasses = {
36852
+ sm: 'max-w-sm',
36853
+ md: 'max-w-md',
36854
+ lg: 'max-w-lg',
36855
+ xl: 'max-w-xl',
36856
+ };
36857
+ return (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", "aria-labelledby": "modal-title", role: "dialog", "aria-modal": "true", children: jsxRuntimeExports.jsxs("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: [jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity", "aria-hidden": "true", onClick: onClose }), jsxRuntimeExports.jsx("div", { ref: modalRef, className: clsx$1(`relative transform ${noOverflowHidden ? "" : "overflow-hidden"} rounded-lg bg-white dark:bg-gray-900 text-left shadow-xl transition-all sm:my-8 sm:w-full`, sizeClasses[size]), children: jsxRuntimeExports.jsxs("div", { className: `bg-white dark:bg-gray-900 px-4 pb-4 pt-5 ${noOverflowHidden ? "rounded-lg" : ""} sm:p-6 sm:pb-4`, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between mb-4", children: [jsxRuntimeExports.jsx("h3", { id: "modal-title", className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: "p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors", "aria-label": "Close modal", children: jsxRuntimeExports.jsx(X, { className: "w-5 h-5" }) })] }), jsxRuntimeExports.jsx("div", { children: children })] }) })] }) }));
36858
+ }
36859
+
36860
+ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onClose, onSubmit }) {
36798
36861
  const [query, setQuery] = useState("");
36862
+ const [displayText, setDisplayText] = useState("");
36863
+ const [blockType, setBlockType] = useState("");
36864
+ const [alignment, setAlignment] = useState("");
36865
+ const [divider, setDivider] = useState("no");
36866
+ const [styles, setStyles] = useState("");
36799
36867
  useEffect(() => {
36800
36868
  setQuery(initialText);
36801
36869
  }, [initialText]);
36870
+ useEffect(() => {
36871
+ var _a, _b;
36872
+ const content = (_a = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.config) === null || _a === void 0 ? void 0 : _a.content;
36873
+ const cssStyles = (_b = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.config) === null || _b === void 0 ? void 0 : _b.styles;
36874
+ const text = content === null || content === void 0 ? void 0 : content.displayText;
36875
+ if (text === null || text === void 0 ? void 0 : text.length) {
36876
+ setDisplayText(text);
36877
+ }
36878
+ const block = content === null || content === void 0 ? void 0 : content.blockType;
36879
+ if (block === null || block === void 0 ? void 0 : block.length) {
36880
+ setBlockType(block);
36881
+ }
36882
+ const textAlign = cssStyles === null || cssStyles === void 0 ? void 0 : cssStyles.textAlign;
36883
+ if (textAlign === null || textAlign === void 0 ? void 0 : textAlign.length) {
36884
+ setAlignment(textAlign);
36885
+ }
36886
+ const hasDivider = content === null || content === void 0 ? void 0 : content.divider;
36887
+ if (hasDivider === null || hasDivider === void 0 ? void 0 : hasDivider.length) {
36888
+ setDivider(hasDivider);
36889
+ }
36890
+ }, [editingWidget]);
36802
36891
  const handleSubmit = () => {
36803
36892
  if (onSubmit && query.trim()) {
36804
36893
  onSubmit(query);
36805
36894
  }
36895
+ if (editingWidget.type === 'text') {
36896
+ const widgetId = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.id;
36897
+ setWidgets &&
36898
+ setWidgets((prev) => prev.map((w) => {
36899
+ if (w.id === widgetId) {
36900
+ return Object.assign(Object.assign({}, w), { config: Object.assign(Object.assign({}, w.config), { content: Object.assign(Object.assign({}, w.config.content), { displayText,
36901
+ blockType,
36902
+ divider }), styles: Object.assign(Object.assign({}, w.config.styles), (alignment && alignment.length > 0
36903
+ ? { textAlign: alignment }
36904
+ : {})) }) });
36905
+ }
36906
+ return w;
36907
+ }));
36908
+ onClose && onClose();
36909
+ }
36806
36910
  };
36807
36911
  if (!isOpen)
36808
36912
  return null;
36809
- return (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50", children: jsxRuntimeExports.jsxs("div", { className: "dark:text-white dark:bg-gray-800 rounded-xl shadow-lg w-[600px] mx-2 text-black bg-white", children: [jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center p-4 border-b", children: [jsxRuntimeExports.jsx("div", { className: "text-lg font-semibold", children: "Edit Widget" }), jsxRuntimeExports.jsx("button", { className: "p-1 hover:bg-[inherit] rounded", onClick: onClose, children: jsxRuntimeExports.jsx(X, { className: "w-5 h-5 text-[inherit]" }) })] }), jsxRuntimeExports.jsxs("div", { className: "p-6 space-y-4", children: [jsxRuntimeExports.jsx("div", { className: "text-xs", children: jsxRuntimeExports.jsx("p", { children: "Please write a prompt to edit a widget." }) }), jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4", children: jsxRuntimeExports.jsx("div", { className: "text-md font-semibold", children: "Query:" }) }), jsxRuntimeExports.jsx("div", { className: "", children: jsxRuntimeExports.jsx(Textarea, { className: "w-full p-2 text-sm dark:bg-gray-800 dark:border-white", value: query, onChange: (e) => { var _a; return setQuery((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); } }) }), jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] })] }) }));
36913
+ console.log(editingWidget, "==> editingWidget");
36914
+ return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Edit Widget", size: "lg",
36915
+ // initialFocusRef={inputRef}
36916
+ noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700 dark:text-gray-300", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsx("div", { className: "pt-7", children: (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
36917
+ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] })
36918
+ :
36919
+ jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Query:" }), jsxRuntimeExports.jsx(Textarea, { className: "w-full p-2 dark:bg-gray-800 dark:border-white", value: query, onChange: (e) => { var _a; return setQuery((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); } })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end pt-3", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] }) })] }) }));
36810
36920
  }
36811
36921
 
36812
36922
  function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk-construction-project-agent" }) {
@@ -36822,6 +36932,13 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
36822
36932
  // description: 'Create interactive bar charts with custom queries',
36823
36933
  // configRequired: true
36824
36934
  // },
36935
+ {
36936
+ type: 'text',
36937
+ title: 'Text Widget',
36938
+ icon: Type,
36939
+ description: 'Add headings or paragraphs to your dashboard',
36940
+ configRequired: false
36941
+ },
36825
36942
  {
36826
36943
  type: 'series-bar-chart',
36827
36944
  title: 'Bar Chart Widget',
@@ -36879,10 +36996,15 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
36879
36996
  setShowConfigStep(true);
36880
36997
  }
36881
36998
  else {
36882
- // For chatbot widget, create the default config
36883
- const config = {
36884
- agentName: defaultAgentName
36885
- };
36999
+ // For chatbot and text widget, create the default config
37000
+ const config = Object.assign({ agentName: defaultAgentName }, (widgetType === "text" && {
37001
+ content: {
37002
+ displayText: "Text goes here...",
37003
+ blockType: "paragraph",
37004
+ divider: "no",
37005
+ },
37006
+ styles: { textAlign: "left" }
37007
+ }));
36886
37008
  handleAddWidget(widgetType, config);
36887
37009
  }
36888
37010
  };
@@ -36956,6 +37078,11 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
36956
37078
  agentName: defaultAgentName
36957
37079
  };
36958
37080
  }
37081
+ else if (selectedWidgetType === 'text') {
37082
+ config = {
37083
+ agentName: defaultAgentName
37084
+ };
37085
+ }
36959
37086
  else {
36960
37087
  config = {
36961
37088
  agentName: defaultAgentName
@@ -36968,18 +37095,16 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
36968
37095
  setQuery('');
36969
37096
  setShowConfigStep(false);
36970
37097
  };
36971
- const handleClose = () => {
36972
- resetModal();
36973
- onClose();
36974
- };
36975
37098
  if (!isOpen)
36976
37099
  return null;
36977
- return (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50", children: jsxRuntimeExports.jsxs("div", { className: "text-black bg-white rounded-xl shadow-lg w-[600px] mx-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center p-4 border-b", children: [jsxRuntimeExports.jsx("div", { className: "text-lg font-semibold", children: showConfigStep ? `Configure ${(_a = widgetOptions.find(w => w.type === selectedWidgetType)) === null || _a === void 0 ? void 0 : _a.title}` : 'Add Widget' }), jsxRuntimeExports.jsx("button", { className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded", onClick: handleClose, children: jsxRuntimeExports.jsx(X, { className: "w-5 h-5" }) })] }), jsxRuntimeExports.jsx("div", { className: "p-6", children: !showConfigStep ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-4", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Choose a widget to add to your dashboard:" }) }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-3 max-h-[400px] overflow-y-auto", children: widgetOptions.map((widget) => {
36978
- const IconComponent = widget.icon;
36979
- return (jsxRuntimeExports.jsxs("button", { onClick: () => handleWidgetSelect(widget.type), className: "flex items-start gap-3 p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-blue-100 dark:bg-blue-900 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("h3", { className: "font-medium text-sm", children: widget.title }), jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: widget.description })] })] }, widget.type));
36980
- }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-4", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: selectedWidgetType === 'chatbot'
36981
- ? 'Chatbot widget will be configured with the default agent.'
36982
- : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium mb-2", children: "Query" }), jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" })] })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) })] }) }));
37100
+ return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: showConfigStep ? `Configure ${(_a = widgetOptions.find(w => w.type === selectedWidgetType)) === null || _a === void 0 ? void 0 : _a.title}` : 'Add Widget', size: "lg",
37101
+ // initialFocusRef={inputRef}
37102
+ noOverflowHidden: true, children: jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("div", { className: "pt-4", children: !showConfigStep ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-4", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-300", children: "Choose a widget to add to your dashboard:" }) }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-3 max-h-[400px] overflow-y-auto", children: widgetOptions.map((widget) => {
37103
+ const IconComponent = widget.icon;
37104
+ return (jsxRuntimeExports.jsxs("button", { onClick: () => handleWidgetSelect(widget.type), className: "flex items-start gap-3 p-4 border border-slate-200 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-primary-100 dark:bg-primary-900 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-primary-600 dark:text-primary-400" }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("h3", { className: "font-medium text-sm", children: widget.title }), jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 !mt-1", children: widget.description })] })] }, widget.type));
37105
+ }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-2", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-400", children: selectedWidgetType === 'chatbot'
37106
+ ? 'Chatbot widget will be configured with the default agent.'
37107
+ : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsx("div", { className: "mb-6", children: jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" }) })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) }) }) }));
36983
37108
  }
36984
37109
 
36985
37110
  const RGL = WidthProvider(Responsive);
@@ -37401,7 +37526,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
37401
37526
  const widgetNames = {
37402
37527
  'bar-chart': 'Bar Chart Widget',
37403
37528
  'pie-chart': 'Pie Chart Widget',
37404
- 'chatbot': 'Chatbot Widget'
37529
+ 'chatbot': 'Chatbot Widget',
37530
+ 'text': 'Text Widget'
37405
37531
  };
37406
37532
  widgetTypeConfig = {
37407
37533
  type: widgetType,
@@ -37428,6 +37554,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
37428
37554
  config: Object.assign(Object.assign({}, config), { isFirstLoad: true }) || { isFirstLoad: true },
37429
37555
  is_draggable: true,
37430
37556
  is_resizable: true,
37557
+ minH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
37558
+ maxH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
37431
37559
  page_id: pageId,
37432
37560
  };
37433
37561
  setWidgets((prev) => {
@@ -37459,15 +37587,25 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
37459
37587
  processedIds.add(widget.id);
37460
37588
  return true;
37461
37589
  })
37462
- .map((widget) => ({
37463
- i: widget.id, // must match RGL item key
37464
- x: widget.position_x, // grid X position
37465
- y: widget.position_y, // grid Y position
37466
- w: widget.width, // width in grid cols
37467
- h: widget.height, // height in grid rows
37468
- minW: 0,
37469
- minH: 0,
37470
- }));
37590
+ .map((widget) => {
37591
+ const isText = widget.type === "text";
37592
+ return {
37593
+ i: widget.id,
37594
+ x: widget.position_x,
37595
+ y: widget.position_y,
37596
+ w: widget.width,
37597
+ h: isText
37598
+ ? (isEditing ? widget.height : Math.max(widget.height - 1, 1))
37599
+ : widget.height,
37600
+ minW: 0,
37601
+ minH: isText ? widget.height : 0,
37602
+ maxH: isText ? widget.height : undefined,
37603
+ isResizable: isEditing,
37604
+ resizeHandles: isText
37605
+ ? ["w", "e"] // only horizontal
37606
+ : ["sw", "nw", "se", "ne"],
37607
+ };
37608
+ });
37471
37609
  };
37472
37610
  const removeWidget = (widgetId) => {
37473
37611
  setWidgets((prev) => {
@@ -37488,9 +37626,12 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
37488
37626
  return (jsxRuntimeExports.jsxs("div", { className: "w-full max-w-full p-4 bg-accent/5", children: [jsxRuntimeExports.jsx(AddWidgetDialog, { isOpen: openWidgetPallete, onClose: onCloseWidgetPallete, addWidgetFn: (widgetType, config) => {
37489
37627
  addWidget(widgetType, config);
37490
37628
  onCloseWidgetPallete === null || onCloseWidgetPallete === void 0 ? void 0 : onCloseWidgetPallete();
37491
- }, defaultAgentName: defaultAgentName }), jsxRuntimeExports.jsx(EditWidgetDialog, { 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", layouts: { lg: getLayoutFromWidgets() }, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480 }, cols: { lg: 12, md: 8, sm: 6, xs: 2 }, rowHeight: 100, isDraggable: isEditing, isResizable: isEditing, draggableHandle: ".drag-icon", onLayoutChange: handleLayoutChange, compactType: "vertical", containerPadding: [0, 0], resizeHandles: ["sw", "nw", "se", "ne"], children: widgets.map((w) => (jsxRuntimeExports.jsxs("div", { className: `border border-primary-300 rounded-xl p-4 shadow-lg overflow-hidden ${isEditing ? 'pb-20' : 'pb-14'}`, children: [isEditing &&
37492
- jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end mb-4 relative", 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-full h-full relative", children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
37493
- jsxRuntimeExports.jsxs("div", { className: "relative z-50", children: [jsxRuntimeExports.jsx("div", { onClick: () => handleClearChat(w.id), onMouseOver: () => setVisibleClearButton(true), onMouseLeave: () => setVisibleClearButton(false), className: "absolute z-40 flex align-middle justify-center gap-2 text-sm px-4 py-2 border-blue-300 rounded-sm dark:bg-white w-fit bg-gray-900 text-white dark:text-gray-900 cursor-pointer shadow-md transition-all", style: { top: "12px", right: "0", borderTopLeftRadius: "4px", borderBottomLeftRadius: "4px" }, children: jsxRuntimeExports.jsx(MessageCircleX, { className: "w-5 h-5" }) }), jsxRuntimeExports.jsx("span", { className: `absolute z-50 w-max py-1 text-xs px-2 rounded-sm dark:text-gray-900 dark:bg-white text-white bg-gray-900 ${visibleClearButton ? "block" : "hidden"}`, style: { top: "56px", right: "16px", borderRadius: "3px" }, 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))) })) })] }));
37629
+ }, 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) => {
37630
+ var _a, _b;
37631
+ 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 &&
37632
+ 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" &&
37633
+ 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 dark:bg-white w-fit bg-primary-700 text-white dark:text-primary-700 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 dark:text-gray-950 dark:bg-white 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));
37634
+ }) })) })] }));
37494
37635
  }
37495
37636
 
37496
37637
  const Checkbox = React.forwardRef((_a, ref) => {
package/dist/index.js CHANGED
@@ -1484,6 +1484,9 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
1484
1484
  function cn(...inputs) {
1485
1485
  return tailwindMerge.twMerge(clsx.clsx(inputs));
1486
1486
  }
1487
+ const KEYS = {
1488
+ ESCAPE: 'Escape',
1489
+ TAB: 'Tab'};
1487
1490
 
1488
1491
  const Tabs = TabsPrimitive__namespace.Root;
1489
1492
  const TabsList = React__namespace.forwardRef((_a, ref) => {
@@ -2070,19 +2073,19 @@ const getStyleValues$2 = (styles = {}) => {
2070
2073
  return {
2071
2074
  backgroundColor: styles.backgroundColor || "transparent",
2072
2075
  borderRadius: borderRadiusMap[borderRadius],
2073
- padding: styles.padding || "1rem",
2076
+ // padding: styles.padding || "1rem",
2074
2077
  color: styles.textColor || "#000000",
2075
2078
  fontSize: styles.fontSize || "1rem",
2076
- textAlign: styles.alignment || "left",
2079
+ textAlign: styles.textAlign || "left",
2077
2080
  fontWeight: styles.fontWeight || "normal",
2078
- lineHeight: styles.lineHeight || "1.5",
2081
+ lineHeight: styles.lineHeight || "1.5"
2079
2082
  };
2080
2083
  };
2081
2084
  function TextWidget({ widget }) {
2082
2085
  var _a, _b;
2083
2086
  const styles = getStyleValues$2((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
2084
2087
  const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
2085
- return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles, children: jsxRuntimeExports.jsx("div", { className: cn("prose max-w-none", content.variant === "title" && "text-2xl font-bold", content.variant === "subtitle" && "text-xl font-semibold", content.variant === "body" && "text-base"), dangerouslySetInnerHTML: { __html: content.text || "Text content" } }) }));
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" } }) }));
2086
2089
  }
2087
2090
 
2088
2091
  const getStyleValues$1 = (styles = {}) => {
@@ -36812,28 +36815,135 @@ function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBack
36812
36815
  return (jsxRuntimeExports.jsxs("div", { className: "text-muted-foreground", children: ["Unknown widget type: ", widget.type] }));
36813
36816
  }
36814
36817
  };
36815
- return (jsxRuntimeExports.jsx("div", { className: "h-full", children: renderWidget() }));
36818
+ return (jsxRuntimeExports.jsx("div", { className: `${(widget === null || widget === void 0 ? void 0 : widget.type) === 'text' ? "" : "h-full"}`, children: renderWidget() }));
36816
36819
  }
36817
36820
 
36818
36821
  const Textarea = React__namespace.forwardRef((_a, ref) => {
36819
36822
  var { className } = _a, props = __rest(_a, ["className"]);
36820
- return (jsxRuntimeExports.jsx("textarea", Object.assign({ className: cn("flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className), ref: ref }, props)));
36823
+ return (jsxRuntimeExports.jsx("textarea", Object.assign({ className: cn("flex min-h-[120px] w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-base ring-offset-gray-300 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className), ref: ref }, props)));
36821
36824
  });
36822
36825
  Textarea.displayName = "Textarea";
36823
36826
 
36824
- function EditWidgetDialog({ initialText, isOpen, onClose, onSubmit }) {
36827
+ function Modal({ isOpen, onClose, title, children, size = 'md', initialFocusRef, noOverflowHidden, }) {
36828
+ const modalRef = React.useRef(null);
36829
+ React.useEffect(() => {
36830
+ if (!isOpen || !modalRef.current)
36831
+ return;
36832
+ // Custom focus management
36833
+ const focusableElements = modalRef.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])');
36834
+ const firstFocusableElement = focusableElements[0];
36835
+ const lastFocusableElement = focusableElements[focusableElements.length - 1];
36836
+ // Handle tab key for focus trapping
36837
+ const handleKeyDown = (e) => {
36838
+ if (e.key === KEYS.ESCAPE) {
36839
+ onClose();
36840
+ return;
36841
+ }
36842
+ if (e.key === KEYS.TAB) {
36843
+ if (e.shiftKey) {
36844
+ // Shift + Tab
36845
+ if (document.activeElement === firstFocusableElement) {
36846
+ lastFocusableElement.focus();
36847
+ e.preventDefault();
36848
+ }
36849
+ }
36850
+ else {
36851
+ // Tab
36852
+ if (document.activeElement === lastFocusableElement) {
36853
+ firstFocusableElement.focus();
36854
+ e.preventDefault();
36855
+ }
36856
+ }
36857
+ }
36858
+ };
36859
+ document.addEventListener('keydown', handleKeyDown);
36860
+ // Set initial focus
36861
+ setTimeout(() => {
36862
+ if (initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) {
36863
+ initialFocusRef.current.focus();
36864
+ }
36865
+ else {
36866
+ firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
36867
+ }
36868
+ }, 0);
36869
+ // Prevent body scroll
36870
+ document.body.style.overflow = 'hidden';
36871
+ return () => {
36872
+ document.removeEventListener('keydown', handleKeyDown);
36873
+ document.body.style.overflow = '';
36874
+ };
36875
+ }, [isOpen, onClose, initialFocusRef]);
36876
+ if (!isOpen)
36877
+ return null;
36878
+ const sizeClasses = {
36879
+ sm: 'max-w-sm',
36880
+ md: 'max-w-md',
36881
+ lg: 'max-w-lg',
36882
+ xl: 'max-w-xl',
36883
+ };
36884
+ return (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", "aria-labelledby": "modal-title", role: "dialog", "aria-modal": "true", children: jsxRuntimeExports.jsxs("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: [jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity", "aria-hidden": "true", onClick: onClose }), jsxRuntimeExports.jsx("div", { ref: modalRef, className: clsx(`relative transform ${noOverflowHidden ? "" : "overflow-hidden"} rounded-lg bg-white dark:bg-gray-900 text-left shadow-xl transition-all sm:my-8 sm:w-full`, sizeClasses[size]), children: jsxRuntimeExports.jsxs("div", { className: `bg-white dark:bg-gray-900 px-4 pb-4 pt-5 ${noOverflowHidden ? "rounded-lg" : ""} sm:p-6 sm:pb-4`, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between mb-4", children: [jsxRuntimeExports.jsx("h3", { id: "modal-title", className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: "p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors", "aria-label": "Close modal", children: jsxRuntimeExports.jsx(lucideReact.X, { className: "w-5 h-5" }) })] }), jsxRuntimeExports.jsx("div", { children: children })] }) })] }) }));
36885
+ }
36886
+
36887
+ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onClose, onSubmit }) {
36825
36888
  const [query, setQuery] = React.useState("");
36889
+ const [displayText, setDisplayText] = React.useState("");
36890
+ const [blockType, setBlockType] = React.useState("");
36891
+ const [alignment, setAlignment] = React.useState("");
36892
+ const [divider, setDivider] = React.useState("no");
36893
+ const [styles, setStyles] = React.useState("");
36826
36894
  React.useEffect(() => {
36827
36895
  setQuery(initialText);
36828
36896
  }, [initialText]);
36897
+ React.useEffect(() => {
36898
+ var _a, _b;
36899
+ const content = (_a = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.config) === null || _a === void 0 ? void 0 : _a.content;
36900
+ const cssStyles = (_b = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.config) === null || _b === void 0 ? void 0 : _b.styles;
36901
+ const text = content === null || content === void 0 ? void 0 : content.displayText;
36902
+ if (text === null || text === void 0 ? void 0 : text.length) {
36903
+ setDisplayText(text);
36904
+ }
36905
+ const block = content === null || content === void 0 ? void 0 : content.blockType;
36906
+ if (block === null || block === void 0 ? void 0 : block.length) {
36907
+ setBlockType(block);
36908
+ }
36909
+ const textAlign = cssStyles === null || cssStyles === void 0 ? void 0 : cssStyles.textAlign;
36910
+ if (textAlign === null || textAlign === void 0 ? void 0 : textAlign.length) {
36911
+ setAlignment(textAlign);
36912
+ }
36913
+ const hasDivider = content === null || content === void 0 ? void 0 : content.divider;
36914
+ if (hasDivider === null || hasDivider === void 0 ? void 0 : hasDivider.length) {
36915
+ setDivider(hasDivider);
36916
+ }
36917
+ }, [editingWidget]);
36829
36918
  const handleSubmit = () => {
36830
36919
  if (onSubmit && query.trim()) {
36831
36920
  onSubmit(query);
36832
36921
  }
36922
+ if (editingWidget.type === 'text') {
36923
+ const widgetId = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.id;
36924
+ setWidgets &&
36925
+ setWidgets((prev) => prev.map((w) => {
36926
+ if (w.id === widgetId) {
36927
+ return Object.assign(Object.assign({}, w), { config: Object.assign(Object.assign({}, w.config), { content: Object.assign(Object.assign({}, w.config.content), { displayText,
36928
+ blockType,
36929
+ divider }), styles: Object.assign(Object.assign({}, w.config.styles), (alignment && alignment.length > 0
36930
+ ? { textAlign: alignment }
36931
+ : {})) }) });
36932
+ }
36933
+ return w;
36934
+ }));
36935
+ onClose && onClose();
36936
+ }
36833
36937
  };
36834
36938
  if (!isOpen)
36835
36939
  return null;
36836
- return (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50", children: jsxRuntimeExports.jsxs("div", { className: "dark:text-white dark:bg-gray-800 rounded-xl shadow-lg w-[600px] mx-2 text-black bg-white", children: [jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center p-4 border-b", children: [jsxRuntimeExports.jsx("div", { className: "text-lg font-semibold", children: "Edit Widget" }), jsxRuntimeExports.jsx("button", { className: "p-1 hover:bg-[inherit] rounded", onClick: onClose, children: jsxRuntimeExports.jsx(lucideReact.X, { className: "w-5 h-5 text-[inherit]" }) })] }), jsxRuntimeExports.jsxs("div", { className: "p-6 space-y-4", children: [jsxRuntimeExports.jsx("div", { className: "text-xs", children: jsxRuntimeExports.jsx("p", { children: "Please write a prompt to edit a widget." }) }), jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4", children: jsxRuntimeExports.jsx("div", { className: "text-md font-semibold", children: "Query:" }) }), jsxRuntimeExports.jsx("div", { className: "", children: jsxRuntimeExports.jsx(Textarea, { className: "w-full p-2 text-sm dark:bg-gray-800 dark:border-white", value: query, onChange: (e) => { var _a; return setQuery((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); } }) }), jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] })] }) }));
36940
+ console.log(editingWidget, "==> editingWidget");
36941
+ return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Edit Widget", size: "lg",
36942
+ // initialFocusRef={inputRef}
36943
+ noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700 dark:text-gray-300", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsx("div", { className: "pt-7", children: (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
36944
+ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] })
36945
+ :
36946
+ jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Query:" }), jsxRuntimeExports.jsx(Textarea, { className: "w-full p-2 dark:bg-gray-800 dark:border-white", value: query, onChange: (e) => { var _a; return setQuery((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); } })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end pt-3", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] }) })] }) }));
36837
36947
  }
36838
36948
 
36839
36949
  function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk-construction-project-agent" }) {
@@ -36849,6 +36959,13 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
36849
36959
  // description: 'Create interactive bar charts with custom queries',
36850
36960
  // configRequired: true
36851
36961
  // },
36962
+ {
36963
+ type: 'text',
36964
+ title: 'Text Widget',
36965
+ icon: lucideReact.Type,
36966
+ description: 'Add headings or paragraphs to your dashboard',
36967
+ configRequired: false
36968
+ },
36852
36969
  {
36853
36970
  type: 'series-bar-chart',
36854
36971
  title: 'Bar Chart Widget',
@@ -36906,10 +37023,15 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
36906
37023
  setShowConfigStep(true);
36907
37024
  }
36908
37025
  else {
36909
- // For chatbot widget, create the default config
36910
- const config = {
36911
- agentName: defaultAgentName
36912
- };
37026
+ // For chatbot and text widget, create the default config
37027
+ const config = Object.assign({ agentName: defaultAgentName }, (widgetType === "text" && {
37028
+ content: {
37029
+ displayText: "Text goes here...",
37030
+ blockType: "paragraph",
37031
+ divider: "no",
37032
+ },
37033
+ styles: { textAlign: "left" }
37034
+ }));
36913
37035
  handleAddWidget(widgetType, config);
36914
37036
  }
36915
37037
  };
@@ -36983,6 +37105,11 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
36983
37105
  agentName: defaultAgentName
36984
37106
  };
36985
37107
  }
37108
+ else if (selectedWidgetType === 'text') {
37109
+ config = {
37110
+ agentName: defaultAgentName
37111
+ };
37112
+ }
36986
37113
  else {
36987
37114
  config = {
36988
37115
  agentName: defaultAgentName
@@ -36995,18 +37122,16 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
36995
37122
  setQuery('');
36996
37123
  setShowConfigStep(false);
36997
37124
  };
36998
- const handleClose = () => {
36999
- resetModal();
37000
- onClose();
37001
- };
37002
37125
  if (!isOpen)
37003
37126
  return null;
37004
- return (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50", children: jsxRuntimeExports.jsxs("div", { className: "text-black bg-white rounded-xl shadow-lg w-[600px] mx-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center p-4 border-b", children: [jsxRuntimeExports.jsx("div", { className: "text-lg font-semibold", children: showConfigStep ? `Configure ${(_a = widgetOptions.find(w => w.type === selectedWidgetType)) === null || _a === void 0 ? void 0 : _a.title}` : 'Add Widget' }), jsxRuntimeExports.jsx("button", { className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded", onClick: handleClose, children: jsxRuntimeExports.jsx(lucideReact.X, { className: "w-5 h-5" }) })] }), jsxRuntimeExports.jsx("div", { className: "p-6", children: !showConfigStep ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-4", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Choose a widget to add to your dashboard:" }) }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-3 max-h-[400px] overflow-y-auto", children: widgetOptions.map((widget) => {
37005
- const IconComponent = widget.icon;
37006
- return (jsxRuntimeExports.jsxs("button", { onClick: () => handleWidgetSelect(widget.type), className: "flex items-start gap-3 p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-blue-100 dark:bg-blue-900 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("h3", { className: "font-medium text-sm", children: widget.title }), jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: widget.description })] })] }, widget.type));
37007
- }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-4", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: selectedWidgetType === 'chatbot'
37008
- ? 'Chatbot widget will be configured with the default agent.'
37009
- : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium mb-2", children: "Query" }), jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" })] })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) })] }) }));
37127
+ return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: showConfigStep ? `Configure ${(_a = widgetOptions.find(w => w.type === selectedWidgetType)) === null || _a === void 0 ? void 0 : _a.title}` : 'Add Widget', size: "lg",
37128
+ // initialFocusRef={inputRef}
37129
+ noOverflowHidden: true, children: jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("div", { className: "pt-4", children: !showConfigStep ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-4", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-300", children: "Choose a widget to add to your dashboard:" }) }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-3 max-h-[400px] overflow-y-auto", children: widgetOptions.map((widget) => {
37130
+ const IconComponent = widget.icon;
37131
+ return (jsxRuntimeExports.jsxs("button", { onClick: () => handleWidgetSelect(widget.type), className: "flex items-start gap-3 p-4 border border-slate-200 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-primary-100 dark:bg-primary-900 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-primary-600 dark:text-primary-400" }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("h3", { className: "font-medium text-sm", children: widget.title }), jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 !mt-1", children: widget.description })] })] }, widget.type));
37132
+ }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-2", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-400", children: selectedWidgetType === 'chatbot'
37133
+ ? 'Chatbot widget will be configured with the default agent.'
37134
+ : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsx("div", { className: "mb-6", children: jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" }) })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) }) }) }));
37010
37135
  }
37011
37136
 
37012
37137
  const RGL = reactGridLayout.WidthProvider(reactGridLayout.Responsive);
@@ -37428,7 +37553,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
37428
37553
  const widgetNames = {
37429
37554
  'bar-chart': 'Bar Chart Widget',
37430
37555
  'pie-chart': 'Pie Chart Widget',
37431
- 'chatbot': 'Chatbot Widget'
37556
+ 'chatbot': 'Chatbot Widget',
37557
+ 'text': 'Text Widget'
37432
37558
  };
37433
37559
  widgetTypeConfig = {
37434
37560
  type: widgetType,
@@ -37455,6 +37581,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
37455
37581
  config: Object.assign(Object.assign({}, config), { isFirstLoad: true }) || { isFirstLoad: true },
37456
37582
  is_draggable: true,
37457
37583
  is_resizable: true,
37584
+ minH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
37585
+ maxH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
37458
37586
  page_id: pageId,
37459
37587
  };
37460
37588
  setWidgets((prev) => {
@@ -37486,15 +37614,25 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
37486
37614
  processedIds.add(widget.id);
37487
37615
  return true;
37488
37616
  })
37489
- .map((widget) => ({
37490
- i: widget.id, // must match RGL item key
37491
- x: widget.position_x, // grid X position
37492
- y: widget.position_y, // grid Y position
37493
- w: widget.width, // width in grid cols
37494
- h: widget.height, // height in grid rows
37495
- minW: 0,
37496
- minH: 0,
37497
- }));
37617
+ .map((widget) => {
37618
+ const isText = widget.type === "text";
37619
+ return {
37620
+ i: widget.id,
37621
+ x: widget.position_x,
37622
+ y: widget.position_y,
37623
+ w: widget.width,
37624
+ h: isText
37625
+ ? (isEditing ? widget.height : Math.max(widget.height - 1, 1))
37626
+ : widget.height,
37627
+ minW: 0,
37628
+ minH: isText ? widget.height : 0,
37629
+ maxH: isText ? widget.height : undefined,
37630
+ isResizable: isEditing,
37631
+ resizeHandles: isText
37632
+ ? ["w", "e"] // only horizontal
37633
+ : ["sw", "nw", "se", "ne"],
37634
+ };
37635
+ });
37498
37636
  };
37499
37637
  const removeWidget = (widgetId) => {
37500
37638
  setWidgets((prev) => {
@@ -37515,9 +37653,12 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
37515
37653
  return (jsxRuntimeExports.jsxs("div", { className: "w-full max-w-full p-4 bg-accent/5", children: [jsxRuntimeExports.jsx(AddWidgetDialog, { isOpen: openWidgetPallete, onClose: onCloseWidgetPallete, addWidgetFn: (widgetType, config) => {
37516
37654
  addWidget(widgetType, config);
37517
37655
  onCloseWidgetPallete === null || onCloseWidgetPallete === void 0 ? void 0 : onCloseWidgetPallete();
37518
- }, defaultAgentName: defaultAgentName }), jsxRuntimeExports.jsx(EditWidgetDialog, { 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", layouts: { lg: getLayoutFromWidgets() }, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480 }, cols: { lg: 12, md: 8, sm: 6, xs: 2 }, rowHeight: 100, isDraggable: isEditing, isResizable: isEditing, draggableHandle: ".drag-icon", onLayoutChange: handleLayoutChange, compactType: "vertical", containerPadding: [0, 0], resizeHandles: ["sw", "nw", "se", "ne"], children: widgets.map((w) => (jsxRuntimeExports.jsxs("div", { className: `border border-primary-300 rounded-xl p-4 shadow-lg overflow-hidden ${isEditing ? 'pb-20' : 'pb-14'}`, children: [isEditing &&
37519
- jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end mb-4 relative", 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-full h-full relative", children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
37520
- jsxRuntimeExports.jsxs("div", { className: "relative z-50", children: [jsxRuntimeExports.jsx("div", { onClick: () => handleClearChat(w.id), onMouseOver: () => setVisibleClearButton(true), onMouseLeave: () => setVisibleClearButton(false), className: "absolute z-40 flex align-middle justify-center gap-2 text-sm px-4 py-2 border-blue-300 rounded-sm dark:bg-white w-fit bg-gray-900 text-white dark:text-gray-900 cursor-pointer shadow-md transition-all", style: { top: "12px", right: "0", borderTopLeftRadius: "4px", borderBottomLeftRadius: "4px" }, children: jsxRuntimeExports.jsx(lucideReact.MessageCircleX, { className: "w-5 h-5" }) }), jsxRuntimeExports.jsx("span", { className: `absolute z-50 w-max py-1 text-xs px-2 rounded-sm dark:text-gray-900 dark:bg-white text-white bg-gray-900 ${visibleClearButton ? "block" : "hidden"}`, style: { top: "56px", right: "16px", borderRadius: "3px" }, 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))) })) })] }));
37656
+ }, 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) => {
37657
+ var _a, _b;
37658
+ 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 &&
37659
+ 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" &&
37660
+ 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 dark:bg-white w-fit bg-primary-700 text-white dark:text-primary-700 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 dark:text-gray-950 dark:bg-white 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));
37661
+ }) })) })] }));
37521
37662
  }
37522
37663
 
37523
37664
  const Checkbox = React__namespace.forwardRef((_a, ref) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dp-widgets-framework",
3
- "version": "1.1.6",
3
+ "version": "1.1.8",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org"