dp-widgets-framework 1.1.5 → 1.1.7

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { useState, useEffect, useCallback, forwardRef, useRef, useMemo } from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { clsx } from 'clsx';
+import clsx$1, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
@@ -1457,6 +1457,9 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
+const KEYS = {
+    ESCAPE: 'Escape',
+    TAB: 'Tab'};
 
 const Tabs = TabsPrimitive.Root;
 const TabsList = React.forwardRef((_a, ref) => {
@@ -2043,19 +2046,19 @@ const getStyleValues$2 = (styles = {}) => {
     return {
         backgroundColor: styles.backgroundColor || "transparent",
         borderRadius: borderRadiusMap[borderRadius],
-        padding: styles.padding || "1rem",
+        // padding: styles.padding || "1rem",
         color: styles.textColor || "#000000",
         fontSize: styles.fontSize || "1rem",
-        textAlign: styles.alignment || "left",
+        textAlign: styles.textAlign || "left",
         fontWeight: styles.fontWeight || "normal",
-        lineHeight: styles.lineHeight || "1.5",
+        lineHeight: styles.lineHeight || "1.5"
     };
 };
 function TextWidget({ widget }) {
     var _a, _b;
     const styles = getStyleValues$2((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
-    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" } }) }));
+    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" } }) }));
 }
 
 const getStyleValues$1 = (styles = {}) => {
@@ -36075,15 +36078,13 @@ const createInitialChartState = (agentType, widgetIds, datasetId) => {
     const baseState = { dataset_id: datasetId || "home_generation_dataset" };
     switch (agentType) {
         case "Pie Chart Agent":
-            return {
-                pie_chart_data: {
+            return Object.assign({ pie_chart_data: {
                     title: "",
                     type: "pie",
                     chart_type: "financial",
                     data: { labels: [], values: [], percentages: [], total: 0 },
                     metadata: { categories: 0, largest_category: "", largest_value: 0, largest_percentage: 0 }
-                }
-            };
+                } }, baseState);
         case "Line Chart Agent":
         case "Bar Chart Agent":
             return Object.assign({ bar_chart_data: {
@@ -36124,7 +36125,7 @@ const createInitialChartState = (agentType, widgetIds, datasetId) => {
                     metadata: { created_at: "", content_type: "text", is_multiline: false }
                 } }, baseState);
         default:
-            return { widget_ids: widgetIds };
+            return Object.assign({ widget_ids: widgetIds }, baseState);
     }
 };
 const loadAgentState = async (widgetBackendUrl, threadId, agentName) => {
@@ -36682,7 +36683,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
     // Listen for triggerAgent events for this widget
     useEffect(() => {
         const handleTriggerAgent = (event) => {
-            const { widgetId, query, agentType: eventAgentType, datesetId } = event.detail;
+            const { widgetId, query, agentType: eventAgentType, datasetId } = event.detail;
             console.log('event.detail==>', event.detail);
             if (widgetId === widget.id) {
                 let messageContent = query;
@@ -36787,28 +36788,135 @@ function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBack
                 return (jsxRuntimeExports.jsxs("div", { className: "text-muted-foreground", children: ["Unknown widget type: ", widget.type] }));
         }
     };
-    return (jsxRuntimeExports.jsx("div", { className: "h-full", children: renderWidget() }));
+    return (jsxRuntimeExports.jsx("div", { className: `${(widget === null || widget === void 0 ? void 0 : widget.type) === 'text' ? "" : "h-full"}`, children: renderWidget() }));
 }
 
 const Textarea = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    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)));
+    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)));
 });
 Textarea.displayName = "Textarea";
 
-function EditWidgetDialog({ initialText, isOpen, onClose, onSubmit }) {
+function Modal({ isOpen, onClose, title, children, size = 'md', initialFocusRef, noOverflowHidden, }) {
+    const modalRef = useRef(null);
+    useEffect(() => {
+        if (!isOpen || !modalRef.current)
+            return;
+        // Custom focus management
+        const focusableElements = modalRef.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])');
+        const firstFocusableElement = focusableElements[0];
+        const lastFocusableElement = focusableElements[focusableElements.length - 1];
+        // Handle tab key for focus trapping
+        const handleKeyDown = (e) => {
+            if (e.key === KEYS.ESCAPE) {
+                onClose();
+                return;
+            }
+            if (e.key === KEYS.TAB) {
+                if (e.shiftKey) {
+                    // Shift + Tab
+                    if (document.activeElement === firstFocusableElement) {
+                        lastFocusableElement.focus();
+                        e.preventDefault();
+                    }
+                }
+                else {
+                    // Tab
+                    if (document.activeElement === lastFocusableElement) {
+                        firstFocusableElement.focus();
+                        e.preventDefault();
+                    }
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        // Set initial focus
+        setTimeout(() => {
+            if (initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) {
+                initialFocusRef.current.focus();
+            }
+            else {
+                firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
+            }
+        }, 0);
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = '';
+        };
+    }, [isOpen, onClose, initialFocusRef]);
+    if (!isOpen)
+        return null;
+    const sizeClasses = {
+        sm: 'max-w-sm',
+        md: 'max-w-md',
+        lg: 'max-w-lg',
+        xl: 'max-w-xl',
+    };
+    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 })] }) })] }) }));
+}
+
+function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onClose, onSubmit }) {
     const [query, setQuery] = useState("");
+    const [displayText, setDisplayText] = useState("");
+    const [blockType, setBlockType] = useState("");
+    const [alignment, setAlignment] = useState("");
+    const [divider, setDivider] = useState("no");
+    const [styles, setStyles] = useState("");
     useEffect(() => {
         setQuery(initialText);
     }, [initialText]);
+    useEffect(() => {
+        var _a, _b;
+        const content = (_a = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.config) === null || _a === void 0 ? void 0 : _a.content;
+        const cssStyles = (_b = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.config) === null || _b === void 0 ? void 0 : _b.styles;
+        const text = content === null || content === void 0 ? void 0 : content.displayText;
+        if (text === null || text === void 0 ? void 0 : text.length) {
+            setDisplayText(text);
+        }
+        const block = content === null || content === void 0 ? void 0 : content.blockType;
+        if (block === null || block === void 0 ? void 0 : block.length) {
+            setBlockType(block);
+        }
+        const textAlign = cssStyles === null || cssStyles === void 0 ? void 0 : cssStyles.textAlign;
+        if (textAlign === null || textAlign === void 0 ? void 0 : textAlign.length) {
+            setAlignment(textAlign);
+        }
+        const hasDivider = content === null || content === void 0 ? void 0 : content.divider;
+        if (hasDivider === null || hasDivider === void 0 ? void 0 : hasDivider.length) {
+            setDivider(hasDivider);
+        }
+    }, [editingWidget]);
     const handleSubmit = () => {
         if (onSubmit && query.trim()) {
             onSubmit(query);
         }
+        if (editingWidget.type === 'text') {
+            const widgetId = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.id;
+            setWidgets &&
+                setWidgets((prev) => prev.map((w) => {
+                    if (w.id === widgetId) {
+                        return Object.assign(Object.assign({}, w), { config: Object.assign(Object.assign({}, w.config), { content: Object.assign(Object.assign({}, w.config.content), { displayText,
+                                    blockType,
+                                    divider }), styles: Object.assign(Object.assign({}, w.config.styles), (alignment && alignment.length > 0
+                                    ? { textAlign: alignment }
+                                    : {})) }) });
+                    }
+                    return w;
+                }));
+            onClose && onClose();
+        }
     };
     if (!isOpen)
         return null;
-    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" }) })] })] }) }));
+    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 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" ?
+                        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" }) })] })
+                        :
+                            jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Prompt:" }), 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" }) })] }) })] }) }));
 }
 
 function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk-construction-project-agent" }) {
@@ -36824,6 +36932,13 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         //   description: 'Create interactive bar charts with custom queries',
         //   configRequired: true
         // },
+        {
+            type: 'text',
+            title: 'Text Widget',
+            icon: Type,
+            description: 'Add headings or paragraphs to your dashboard',
+            configRequired: false
+        },
         {
             type: 'series-bar-chart',
             title: 'Bar Chart Widget',
@@ -36881,10 +36996,15 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
             setShowConfigStep(true);
         }
         else {
-            // For chatbot widget, create the default config
-            const config = {
-                agentName: defaultAgentName
-            };
+            // 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" }
+            }));
             handleAddWidget(widgetType, config);
         }
     };
@@ -36958,6 +37078,11 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
                 agentName: defaultAgentName
             };
         }
+        else if (selectedWidgetType === 'text') {
+            config = {
+                agentName: defaultAgentName
+            };
+        }
         else {
             config = {
                 agentName: defaultAgentName
@@ -36970,15 +37095,13 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         setQuery('');
         setShowConfigStep(false);
     };
-    const handleClose = () => {
-        resetModal();
-        onClose();
-    };
     if (!isOpen)
         return null;
-    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) => {
+    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", 
+        // initialFocusRef={inputRef}
+        noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700 dark:text-gray-300", children: "Choose a widget to add to your dashboard:" }), 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-600 dark:text-gray-400" }) }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-3 max-h-[400px] overflow-y-auto", children: widgetOptions.map((widget) => {
                                     const IconComponent = widget.icon;
-                                    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));
+                                    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-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));
                                 }) })] })) : (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'
                                         ? '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.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" })] })] })) })] }) }));
@@ -37095,7 +37218,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                     widgetId: editingWidget.id,
                     query: newQuery,
                     agentType: (_a = editingWidget.config) === null || _a === void 0 ? void 0 : _a.agentType,
-                    datesetId: datasetId
+                    datasetId: datasetId
                 }
             });
             window.dispatchEvent(event);
@@ -37403,7 +37526,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
             const widgetNames = {
                 'bar-chart': 'Bar Chart Widget',
                 'pie-chart': 'Pie Chart Widget',
-                'chatbot': 'Chatbot Widget'
+                'chatbot': 'Chatbot Widget',
+                'text': 'Text Widget'
             };
             widgetTypeConfig = {
                 type: widgetType,
@@ -37430,6 +37554,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 config: Object.assign(Object.assign({}, config), { isFirstLoad: true }) || { isFirstLoad: true },
                 is_draggable: true,
                 is_resizable: true,
+                minH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
+                maxH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
                 page_id: pageId,
             };
             setWidgets((prev) => {
@@ -37461,15 +37587,25 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
             processedIds.add(widget.id);
             return true;
         })
-            .map((widget) => ({
-            i: widget.id, // must match RGL item key
-            x: widget.position_x, // grid X position
-            y: widget.position_y, // grid Y position
-            w: widget.width, // width in grid cols
-            h: widget.height, // height in grid rows
-            minW: 0,
-            minH: 0,
-        }));
+            .map((widget) => {
+            const isText = widget.type === "text";
+            return {
+                i: widget.id,
+                x: widget.position_x,
+                y: widget.position_y,
+                w: widget.width,
+                h: isText
+                    ? (isEditing ? widget.height : Math.max(widget.height - 1, 1))
+                    : widget.height,
+                minW: 0,
+                minH: isText ? widget.height : 0,
+                maxH: isText ? widget.height : undefined,
+                isResizable: isEditing,
+                resizeHandles: isText
+                    ? ["w", "e"] // only horizontal
+                    : ["sw", "nw", "se", "ne"],
+            };
+        });
     };
     const removeWidget = (widgetId) => {
         setWidgets((prev) => {
@@ -37490,9 +37626,12 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
     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) => {
                     addWidget(widgetType, config);
                     onCloseWidgetPallete === null || onCloseWidgetPallete === void 0 ? void 0 : onCloseWidgetPallete();
-                }, 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 &&
-                                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" &&
-                                        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))) })) })] }));
+                }, 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", 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], children: widgets.map((w) => {
+                        var _a, _b;
+                        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 &&
+                                    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" &&
+                                            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));
+                    }) })) })] }));
 }
 
 const Checkbox = React.forwardRef((_a, ref) => {

package/dist/index.js

@@ -1484,6 +1484,9 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 function cn(...inputs) {
     return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+const KEYS = {
+    ESCAPE: 'Escape',
+    TAB: 'Tab'};
 
 const Tabs = TabsPrimitive__namespace.Root;
 const TabsList = React__namespace.forwardRef((_a, ref) => {
@@ -2070,19 +2073,19 @@ const getStyleValues$2 = (styles = {}) => {
     return {
         backgroundColor: styles.backgroundColor || "transparent",
         borderRadius: borderRadiusMap[borderRadius],
-        padding: styles.padding || "1rem",
+        // padding: styles.padding || "1rem",
         color: styles.textColor || "#000000",
         fontSize: styles.fontSize || "1rem",
-        textAlign: styles.alignment || "left",
+        textAlign: styles.textAlign || "left",
         fontWeight: styles.fontWeight || "normal",
-        lineHeight: styles.lineHeight || "1.5",
+        lineHeight: styles.lineHeight || "1.5"
     };
 };
 function TextWidget({ widget }) {
     var _a, _b;
     const styles = getStyleValues$2((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
-    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" } }) }));
+    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" } }) }));
 }
 
 const getStyleValues$1 = (styles = {}) => {
@@ -36102,15 +36105,13 @@ const createInitialChartState = (agentType, widgetIds, datasetId) => {
     const baseState = { dataset_id: datasetId || "home_generation_dataset" };
     switch (agentType) {
         case "Pie Chart Agent":
-            return {
-                pie_chart_data: {
+            return Object.assign({ pie_chart_data: {
                     title: "",
                     type: "pie",
                     chart_type: "financial",
                     data: { labels: [], values: [], percentages: [], total: 0 },
                     metadata: { categories: 0, largest_category: "", largest_value: 0, largest_percentage: 0 }
-                }
-            };
+                } }, baseState);
         case "Line Chart Agent":
         case "Bar Chart Agent":
             return Object.assign({ bar_chart_data: {
@@ -36151,7 +36152,7 @@ const createInitialChartState = (agentType, widgetIds, datasetId) => {
                     metadata: { created_at: "", content_type: "text", is_multiline: false }
                 } }, baseState);
         default:
-            return { widget_ids: widgetIds };
+            return Object.assign({ widget_ids: widgetIds }, baseState);
     }
 };
 const loadAgentState = async (widgetBackendUrl, threadId, agentName) => {
@@ -36709,7 +36710,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
     // Listen for triggerAgent events for this widget
     React.useEffect(() => {
         const handleTriggerAgent = (event) => {
-            const { widgetId, query, agentType: eventAgentType, datesetId } = event.detail;
+            const { widgetId, query, agentType: eventAgentType, datasetId } = event.detail;
             console.log('event.detail==>', event.detail);
             if (widgetId === widget.id) {
                 let messageContent = query;
@@ -36814,28 +36815,135 @@ function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBack
                 return (jsxRuntimeExports.jsxs("div", { className: "text-muted-foreground", children: ["Unknown widget type: ", widget.type] }));
         }
     };
-    return (jsxRuntimeExports.jsx("div", { className: "h-full", children: renderWidget() }));
+    return (jsxRuntimeExports.jsx("div", { className: `${(widget === null || widget === void 0 ? void 0 : widget.type) === 'text' ? "" : "h-full"}`, children: renderWidget() }));
 }
 
 const Textarea = React__namespace.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    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)));
+    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)));
 });
 Textarea.displayName = "Textarea";
 
-function EditWidgetDialog({ initialText, isOpen, onClose, onSubmit }) {
+function Modal({ isOpen, onClose, title, children, size = 'md', initialFocusRef, noOverflowHidden, }) {
+    const modalRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!isOpen || !modalRef.current)
+            return;
+        // Custom focus management
+        const focusableElements = modalRef.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])');
+        const firstFocusableElement = focusableElements[0];
+        const lastFocusableElement = focusableElements[focusableElements.length - 1];
+        // Handle tab key for focus trapping
+        const handleKeyDown = (e) => {
+            if (e.key === KEYS.ESCAPE) {
+                onClose();
+                return;
+            }
+            if (e.key === KEYS.TAB) {
+                if (e.shiftKey) {
+                    // Shift + Tab
+                    if (document.activeElement === firstFocusableElement) {
+                        lastFocusableElement.focus();
+                        e.preventDefault();
+                    }
+                }
+                else {
+                    // Tab
+                    if (document.activeElement === lastFocusableElement) {
+                        firstFocusableElement.focus();
+                        e.preventDefault();
+                    }
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        // Set initial focus
+        setTimeout(() => {
+            if (initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) {
+                initialFocusRef.current.focus();
+            }
+            else {
+                firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
+            }
+        }, 0);
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = '';
+        };
+    }, [isOpen, onClose, initialFocusRef]);
+    if (!isOpen)
+        return null;
+    const sizeClasses = {
+        sm: 'max-w-sm',
+        md: 'max-w-md',
+        lg: 'max-w-lg',
+        xl: 'max-w-xl',
+    };
+    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 })] }) })] }) }));
+}
+
+function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onClose, onSubmit }) {
     const [query, setQuery] = React.useState("");
+    const [displayText, setDisplayText] = React.useState("");
+    const [blockType, setBlockType] = React.useState("");
+    const [alignment, setAlignment] = React.useState("");
+    const [divider, setDivider] = React.useState("no");
+    const [styles, setStyles] = React.useState("");
     React.useEffect(() => {
         setQuery(initialText);
     }, [initialText]);
+    React.useEffect(() => {
+        var _a, _b;
+        const content = (_a = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.config) === null || _a === void 0 ? void 0 : _a.content;
+        const cssStyles = (_b = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.config) === null || _b === void 0 ? void 0 : _b.styles;
+        const text = content === null || content === void 0 ? void 0 : content.displayText;
+        if (text === null || text === void 0 ? void 0 : text.length) {
+            setDisplayText(text);
+        }
+        const block = content === null || content === void 0 ? void 0 : content.blockType;
+        if (block === null || block === void 0 ? void 0 : block.length) {
+            setBlockType(block);
+        }
+        const textAlign = cssStyles === null || cssStyles === void 0 ? void 0 : cssStyles.textAlign;
+        if (textAlign === null || textAlign === void 0 ? void 0 : textAlign.length) {
+            setAlignment(textAlign);
+        }
+        const hasDivider = content === null || content === void 0 ? void 0 : content.divider;
+        if (hasDivider === null || hasDivider === void 0 ? void 0 : hasDivider.length) {
+            setDivider(hasDivider);
+        }
+    }, [editingWidget]);
     const handleSubmit = () => {
         if (onSubmit && query.trim()) {
             onSubmit(query);
         }
+        if (editingWidget.type === 'text') {
+            const widgetId = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.id;
+            setWidgets &&
+                setWidgets((prev) => prev.map((w) => {
+                    if (w.id === widgetId) {
+                        return Object.assign(Object.assign({}, w), { config: Object.assign(Object.assign({}, w.config), { content: Object.assign(Object.assign({}, w.config.content), { displayText,
+                                    blockType,
+                                    divider }), styles: Object.assign(Object.assign({}, w.config.styles), (alignment && alignment.length > 0
+                                    ? { textAlign: alignment }
+                                    : {})) }) });
+                    }
+                    return w;
+                }));
+            onClose && onClose();
+        }
     };
     if (!isOpen)
         return null;
-    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" }) })] })] }) }));
+    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 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" ?
+                        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" }) })] })
+                        :
+                            jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Prompt:" }), 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" }) })] }) })] }) }));
 }
 
 function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk-construction-project-agent" }) {
@@ -36851,6 +36959,13 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         //   description: 'Create interactive bar charts with custom queries',
         //   configRequired: true
         // },
+        {
+            type: 'text',
+            title: 'Text Widget',
+            icon: lucideReact.Type,
+            description: 'Add headings or paragraphs to your dashboard',
+            configRequired: false
+        },
         {
             type: 'series-bar-chart',
             title: 'Bar Chart Widget',
@@ -36908,10 +37023,15 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
             setShowConfigStep(true);
         }
         else {
-            // For chatbot widget, create the default config
-            const config = {
-                agentName: defaultAgentName
-            };
+            // 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" }
+            }));
             handleAddWidget(widgetType, config);
         }
     };
@@ -36985,6 +37105,11 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
                 agentName: defaultAgentName
             };
         }
+        else if (selectedWidgetType === 'text') {
+            config = {
+                agentName: defaultAgentName
+            };
+        }
         else {
             config = {
                 agentName: defaultAgentName
@@ -36997,15 +37122,13 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         setQuery('');
         setShowConfigStep(false);
     };
-    const handleClose = () => {
-        resetModal();
-        onClose();
-    };
     if (!isOpen)
         return null;
-    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) => {
+    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", 
+        // initialFocusRef={inputRef}
+        noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700 dark:text-gray-300", children: "Choose a widget to add to your dashboard:" }), 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-600 dark:text-gray-400" }) }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-3 max-h-[400px] overflow-y-auto", children: widgetOptions.map((widget) => {
                                     const IconComponent = widget.icon;
-                                    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));
+                                    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-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));
                                 }) })] })) : (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'
                                         ? '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.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" })] })] })) })] }) }));
@@ -37122,7 +37245,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                     widgetId: editingWidget.id,
                     query: newQuery,
                     agentType: (_a = editingWidget.config) === null || _a === void 0 ? void 0 : _a.agentType,
-                    datesetId: datasetId
+                    datasetId: datasetId
                 }
             });
             window.dispatchEvent(event);
@@ -37430,7 +37553,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
             const widgetNames = {
                 'bar-chart': 'Bar Chart Widget',
                 'pie-chart': 'Pie Chart Widget',
-                'chatbot': 'Chatbot Widget'
+                'chatbot': 'Chatbot Widget',
+                'text': 'Text Widget'
             };
             widgetTypeConfig = {
                 type: widgetType,
@@ -37457,6 +37581,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 config: Object.assign(Object.assign({}, config), { isFirstLoad: true }) || { isFirstLoad: true },
                 is_draggable: true,
                 is_resizable: true,
+                minH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
+                maxH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
                 page_id: pageId,
             };
             setWidgets((prev) => {
@@ -37488,15 +37614,25 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
             processedIds.add(widget.id);
             return true;
         })
-            .map((widget) => ({
-            i: widget.id, // must match RGL item key
-            x: widget.position_x, // grid X position
-            y: widget.position_y, // grid Y position
-            w: widget.width, // width in grid cols
-            h: widget.height, // height in grid rows
-            minW: 0,
-            minH: 0,
-        }));
+            .map((widget) => {
+            const isText = widget.type === "text";
+            return {
+                i: widget.id,
+                x: widget.position_x,
+                y: widget.position_y,
+                w: widget.width,
+                h: isText
+                    ? (isEditing ? widget.height : Math.max(widget.height - 1, 1))
+                    : widget.height,
+                minW: 0,
+                minH: isText ? widget.height : 0,
+                maxH: isText ? widget.height : undefined,
+                isResizable: isEditing,
+                resizeHandles: isText
+                    ? ["w", "e"] // only horizontal
+                    : ["sw", "nw", "se", "ne"],
+            };
+        });
     };
     const removeWidget = (widgetId) => {
         setWidgets((prev) => {
@@ -37517,9 +37653,12 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
     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) => {
                     addWidget(widgetType, config);
                     onCloseWidgetPallete === null || onCloseWidgetPallete === void 0 ? void 0 : onCloseWidgetPallete();
-                }, 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 &&
-                                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" &&
-                                        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))) })) })] }));
+                }, 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", 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], children: widgets.map((w) => {
+                        var _a, _b;
+                        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 &&
+                                    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" &&
+                                            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));
+                    }) })) })] }));
 }
 
 const Checkbox = React__namespace.forwardRef((_a, ref) => {

package/package.json

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