dp-widgets-framework 1.2.5 → 1.2.6

package/dist/index.esm.js

@@ -36093,7 +36093,7 @@ const clearChat = async (widgetBackendUrl, widgetId) => {
         console.error('Failed to clear chat:', error);
     }
 };
-const createLoadingComponent = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(RefreshCw, { className: "h-6 w-6 animate-spin text-blue-500" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
+const createLoadingComponent = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(RefreshCw, { className: "h-6 w-6 animate-spin text-gray-800" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
 const createInitialChartState = (agentType, widgetIds, datasetId) => {
     const baseState = { dataset_id: datasetId || "home_generation_dataset" };
     switch (agentType) {
@@ -36949,7 +36949,6 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
     };
     if (!isOpen)
         return null;
-    console.log(editingWidget, "==> editingWidget");
     return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Edit Widget", size: "lg", 
         // initialFocusRef={inputRef}
         noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsx("div", { className: "pt-7", children: (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
@@ -36963,6 +36962,10 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
     const [selectedWidgetType, setSelectedWidgetType] = useState(null);
     const [query, setQuery] = useState('');
     const [showConfigStep, setShowConfigStep] = useState(false);
+    const [displayText, setDisplayText] = useState("Text goes here...");
+    const [blockType, setBlockType] = useState("paragraph");
+    const [alignment, setAlignment] = useState("left");
+    const [divider, setDivider] = useState("no");
     const widgetOptions = [
         // {
         //   type: 'bar-chart',
@@ -36976,7 +36979,7 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
             title: 'Text Widget',
             icon: Type,
             description: 'Add headings or paragraphs to your dashboard',
-            configRequired: false
+            configRequired: true
         },
         {
             type: 'spacer',
@@ -37043,14 +37046,9 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         }
         else {
             // For chatbot and text widget, create the default config
-            const config = Object.assign({ agentName: defaultAgentName }, (widgetType === "text" && {
-                content: {
-                    displayText: "Text goes here...",
-                    blockType: "paragraph",
-                    divider: "no",
-                },
-                styles: { textAlign: "left" }
-            }));
+            const config = {
+                agentName: defaultAgentName,
+            };
             handleAddWidget(widgetType, config);
         }
     };
@@ -37126,7 +37124,16 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         }
         else if (selectedWidgetType === 'text') {
             config = {
-                agentName: defaultAgentName
+                agentName: defaultAgentName,
+                agentType: "Text Agent",
+                content: {
+                    displayText,
+                    blockType,
+                    divider
+                },
+                styles: Object.assign({}, (alignment && alignment.length > 0
+                    ? { textAlign: alignment }
+                    : {})),
             };
         }
         else {
@@ -37134,7 +37141,8 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
                 agentName: defaultAgentName
             };
         }
-        handleAddWidget('agent', config);
+        const type = selectedWidgetType === 'text' ? selectedWidgetType : "agent";
+        handleAddWidget(type, config);
     };
     const resetModal = () => {
         setSelectedWidgetType(null);
@@ -37150,7 +37158,7 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
                                 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 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-primary-100 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-primary-600" }) }), 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 !mt-1", children: widget.description })] })] }, widget.type));
                             }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-2", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: selectedWidgetType === 'chatbot'
                                     ? 'Chatbot widget will be configured with the default agent.'
-                                    : '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" })] })] })) }) }) }));
+                                    : selectedWidgetType === 'text' ? "Customize the widget's appearance" : '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" }) })), selectedWidgetType === 'text' && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5 pb-5 pt-2", 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.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" })] })] })) }) }) }));
 }
 
 const RGL = WidthProvider(Responsive);
@@ -37323,7 +37331,6 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 throw new Error("Failed to load page data");
             }
             const data = await response.json();
-            console.log(data);
             setPageData(data);
             setWidgets(data.widgets || []);
             setDatasetId(data === null || data === void 0 ? void 0 : data.dataset_id);

package/dist/index.js

@@ -36120,7 +36120,7 @@ const clearChat = async (widgetBackendUrl, widgetId) => {
         console.error('Failed to clear chat:', error);
     }
 };
-const createLoadingComponent = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.RefreshCw, { className: "h-6 w-6 animate-spin text-blue-500" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
+const createLoadingComponent = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.RefreshCw, { className: "h-6 w-6 animate-spin text-gray-800" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
 const createInitialChartState = (agentType, widgetIds, datasetId) => {
     const baseState = { dataset_id: datasetId || "home_generation_dataset" };
     switch (agentType) {
@@ -36976,7 +36976,6 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
     };
     if (!isOpen)
         return null;
-    console.log(editingWidget, "==> editingWidget");
     return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Edit Widget", size: "lg", 
         // initialFocusRef={inputRef}
         noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsx("div", { className: "pt-7", children: (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
@@ -36990,6 +36989,10 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
     const [selectedWidgetType, setSelectedWidgetType] = React.useState(null);
     const [query, setQuery] = React.useState('');
     const [showConfigStep, setShowConfigStep] = React.useState(false);
+    const [displayText, setDisplayText] = React.useState("Text goes here...");
+    const [blockType, setBlockType] = React.useState("paragraph");
+    const [alignment, setAlignment] = React.useState("left");
+    const [divider, setDivider] = React.useState("no");
     const widgetOptions = [
         // {
         //   type: 'bar-chart',
@@ -37003,7 +37006,7 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
             title: 'Text Widget',
             icon: lucideReact.Type,
             description: 'Add headings or paragraphs to your dashboard',
-            configRequired: false
+            configRequired: true
         },
         {
             type: 'spacer',
@@ -37070,14 +37073,9 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         }
         else {
             // For chatbot and text widget, create the default config
-            const config = Object.assign({ agentName: defaultAgentName }, (widgetType === "text" && {
-                content: {
-                    displayText: "Text goes here...",
-                    blockType: "paragraph",
-                    divider: "no",
-                },
-                styles: { textAlign: "left" }
-            }));
+            const config = {
+                agentName: defaultAgentName,
+            };
             handleAddWidget(widgetType, config);
         }
     };
@@ -37153,7 +37151,16 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         }
         else if (selectedWidgetType === 'text') {
             config = {
-                agentName: defaultAgentName
+                agentName: defaultAgentName,
+                agentType: "Text Agent",
+                content: {
+                    displayText,
+                    blockType,
+                    divider
+                },
+                styles: Object.assign({}, (alignment && alignment.length > 0
+                    ? { textAlign: alignment }
+                    : {})),
             };
         }
         else {
@@ -37161,7 +37168,8 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
                 agentName: defaultAgentName
             };
         }
-        handleAddWidget('agent', config);
+        const type = selectedWidgetType === 'text' ? selectedWidgetType : "agent";
+        handleAddWidget(type, config);
     };
     const resetModal = () => {
         setSelectedWidgetType(null);
@@ -37177,7 +37185,7 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
                                 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 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-primary-100 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-primary-600" }) }), 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 !mt-1", children: widget.description })] })] }, widget.type));
                             }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-2", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: selectedWidgetType === 'chatbot'
                                     ? 'Chatbot widget will be configured with the default agent.'
-                                    : '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" })] })] })) }) }) }));
+                                    : selectedWidgetType === 'text' ? "Customize the widget's appearance" : '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" }) })), selectedWidgetType === 'text' && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5 pb-5 pt-2", 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.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" })] })] })) }) }) }));
 }
 
 const RGL = reactGridLayout.WidthProvider(reactGridLayout.Responsive);
@@ -37350,7 +37358,6 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 throw new Error("Failed to load page data");
             }
             const data = await response.json();
-            console.log(data);
             setPageData(data);
             setWidgets(data.widgets || []);
             setDatasetId(data === null || data === void 0 ? void 0 : data.dataset_id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dp-widgets-framework",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"