dp-widgets-framework 1.4.2 → 1.4.5

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart as BarChart$1, Filter, Search, ArrowUp, ArrowDown, ChevronRight, RefreshCw, X, AlignVerticalSpaceAround, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, Loader2, GripHorizontal, Edit, MessageCircleX, Edit2 } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart as BarChart$1, Filter, Search, ArrowUp, ArrowDown, ChevronRight, RefreshCw, Send, X, AlignVerticalSpaceAround, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, Loader2, GripHorizontal, Edit, MessageCircleX, Edit2 } from 'lucide-react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { Slot } from '@radix-ui/react-slot';
 import { debounce as debounce$1 } from 'lodash';
@@ -15,7 +15,6 @@ import Editor from '@monaco-editor/react';
 import { WidthProvider, Responsive } from 'react-grid-layout';
 import { v4 } from 'uuid';
 import { CopilotKit, useCopilotContext, useCoAgent, useCopilotChat } from '@copilotkit/react-core';
-import { CopilotChat } from '@copilotkit/react-ui';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
@@ -16603,7 +16602,6 @@ var plugin$1 = {
 Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
 function SeriesLineChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title }) {
     var _a, _b;
-    console.log('x_axis_title==>', x_axis_title);
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
         if (!isNaN(numValue)) {
@@ -17651,6 +17649,8 @@ function LineChart({ title, data, options, className, units, content }) {
 function DataGrid({ title, data, className }) {
     var _a;
     const { columns, rows, units, grouped = false, grouping } = data;
+    console.log('title==>', title);
+    console.log('grouping==>', grouping);
     const [expandedGroups, setExpandedGroups] = useState(new Set(((_a = grouping === null || grouping === void 0 ? void 0 : grouping.sections) === null || _a === void 0 ? void 0 : _a.filter(s => s.expanded).map(s => s.group_value)) || []));
     const toggleGroup = (groupValue) => {
         const newExpanded = new Set(expandedGroups);
@@ -39154,7 +39154,25 @@ function CopilotKitChatbot({ widget, showHeader, styles, onResetReady, widgetIds
             dataset_id: datasetId
         },
     });
-    const { reset } = useCopilotChat();
+    const { reset, visibleMessages, appendMessage, isLoading } = useCopilotChat();
+    const [inputValue, setInputValue] = useState("");
+    const [chatMessages, setChatMessages] = useState([]);
+    const messagesEndRef = React__default.useRef(null);
+    const scrollToBottom = () => {
+        var _a;
+        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+    };
+    useEffect(() => {
+        console.log('visibleMessages==>', visibleMessages);
+        if (visibleMessages.length) {
+            const nonEmptyMessages = visibleMessages.filter((msg) => (msg === null || msg === void 0 ? void 0 : msg.content) && (msg === null || msg === void 0 ? void 0 : msg.content.trim()) !== "");
+            setChatMessages(nonEmptyMessages);
+        }
+    }, [visibleMessages]);
+    // Auto-scroll when messages change or loading state changes
+    useEffect(() => {
+        scrollToBottom();
+    }, [chatMessages, isLoading]);
     // Register the reset function with the parent component
     useEffect(() => {
         if (onResetReady && reset && widget.id) {
@@ -39182,12 +39200,25 @@ function CopilotKitChatbot({ widget, showHeader, styles, onResetReady, widgetIds
             window.removeEventListener('clearChartState', handleClearChartState);
         };
     }, [widget.id, widgetIds, datasetId, setChatbotState]);
-    return (jsxRuntimeExports.jsxs("div", { className: cn("flex flex-col h-full"), children: [showHeader && (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between pb-2 border-b", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Bot, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: widget.title })] }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 h-full", children: jsxRuntimeExports.jsx(CopilotChat, { className: "h-full text-xs [&_.copilot-chat-message]:text-xs [&_.copilot-chat-input]:text-xs", labels: {
-                        title: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.copilotTitle) || widget.title,
-                        initial: ((_c = widget.config) === null || _c === void 0 ? void 0 : _c.copilotInitialMessage) || ((_d = widget.config) === null || _d === void 0 ? void 0 : _d.placeholder) || "How can I help you today?"
-                    }, onSubmitMessage: () => {
-                        setChatbotState(prevState => (Object.assign(Object.assign({}, prevState), { widget_ids: widgetIds, dataset_id: datasetId })));
-                    } }) })] }));
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (!inputValue.trim())
+            return;
+        // Update chatbot state before sending message
+        setChatbotState(prevState => (Object.assign(Object.assign({}, prevState), { widget_ids: widgetIds, dataset_id: datasetId })));
+        // Append the user message
+        appendMessage(new TextMessage({
+            content: inputValue,
+            role: Role.User,
+        }));
+        // Clear input
+        setInputValue("");
+    };
+    return (jsxRuntimeExports.jsxs("div", { className: cn("flex flex-col h-full"), children: [showHeader && (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between pb-2 border-b", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Bot, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: widget.title })] }) })), jsxRuntimeExports.jsxs("div", { className: "flex-1 h-full flex flex-col", children: [jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: chatMessages.length === 0 ? (jsxRuntimeExports.jsx("div", { className: "text-center text-gray-500 text-xs mt-8", children: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.copilotInitialMessage) || ((_c = widget.config) === null || _c === void 0 ? void 0 : _c.placeholder) || "How can I help you today?" })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [chatMessages.map((message) => (jsxRuntimeExports.jsx("div", { className: cn("flex", message.role === "user" ? "justify-end" : "justify-start"), children: jsxRuntimeExports.jsxs("div", { className: cn("max-w-[80%] rounded-lg px-4 py-2 text-xs", message.role === "user"
+                                            ? "bg-blue-500 text-white"
+                                            : "bg-gray-100 text-gray-900"), children: [jsxRuntimeExports.jsx("div", { className: "whitespace-pre-wrap", children: jsxRuntimeExports.jsx(Markdown, { children: message.content }) }), message.createdAt && (jsxRuntimeExports.jsx("div", { className: cn("text-[10px] mt-1", message.role === "user" ? "text-blue-100" : "text-gray-500"), children: new Date(message.createdAt).toLocaleTimeString() }))] }) }, message.id))), isLoading && (jsxRuntimeExports.jsx("div", { className: "flex justify-start", children: jsxRuntimeExports.jsx("div", { className: "bg-gray-100 rounded-lg px-4 py-2 text-xs", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex space-x-1", children: [jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: '0ms' } }), jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: '150ms' } }), jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: '300ms' } })] }), jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: "Thinking..." })] }) }) })), jsxRuntimeExports.jsx("div", { ref: messagesEndRef })] })) }), jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, className: "border-t p-4", children: jsxRuntimeExports.jsxs("div", { className: "flex gap-2 relative", children: [jsxRuntimeExports.jsx("textarea", { value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: ((_d = widget.config) === null || _d === void 0 ? void 0 : _d.placeholder) || "Type a message...", className: "resize-none h-20 overflow-y-auto flex-1 px-3 py-2 text-xs border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" }), jsxRuntimeExports.jsx("button", { type: "submit", disabled: !inputValue.trim(), className: cn("absolute bottom-0 right-0 p-2 rounded-lg text-white flex items-center justify-center bg-transparent"), children: jsxRuntimeExports.jsx(Send, { className: cn("h-4 w-4", inputValue.trim()
+                                            ? "text-primary-600"
+                                            : "text-gray-600 cursor-not-allowed") }) })] }) })] })] }));
 }
 function ChatbotWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
     var _a, _b;
@@ -39377,7 +39408,6 @@ function CopilotKitPieChart({ widget, showHeader, styles, onResetReady, widgetBa
     const isFirstLoad = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.isFirstLoad;
     const content = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.content;
     const widget_data = (_c = widget.widget_data) === null || _c === void 0 ? void 0 : _c.pie_chart_data;
-    console.log('widget_data===>', widget_data);
     const { threadId, setThreadId } = useCopilotContext();
     const timeoutRef = useRef(null);
     const [apiCallCount, setApiCallCount] = useState(0);
@@ -39689,7 +39719,6 @@ function CopilotKitSeriesBarChart$1({ widget, showHeader, styles, onResetReady,
     const isFirstLoad = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.isFirstLoad;
     const content = (_c = widget.config) === null || _c === void 0 ? void 0 : _c.content;
     const widget_data = (_d = widget.widget_data) === null || _d === void 0 ? void 0 : _d.series_bar_chart_data;
-    console.log('widget_data===>', widget_data);
     const { threadId, setThreadId } = useCopilotContext();
     const timeoutRef = useRef(null);
     const [apiCallCount, setApiCallCount] = useState(0);
@@ -40001,7 +40030,6 @@ function CopilotKitSeriesBarChart({ widget, showHeader, styles, onResetReady, wi
     const isFirstLoad = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.isFirstLoad;
     const content = (_c = widget.config) === null || _c === void 0 ? void 0 : _c.content;
     const widget_data = (_d = widget.widget_data) === null || _d === void 0 ? void 0 : _d.series_bar_chart_data;
-    console.log('widget_data===>', widget_data);
     const { threadId, setThreadId } = useCopilotContext();
     const timeoutRef = useRef(null);
     const [apiCallCount, setApiCallCount] = useState(0);
@@ -40161,7 +40189,8 @@ const createInitialChartState = (datasetId, dataGridState) => {
                 total_rows: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.metadata.total_rows) || 0,
                 total_columns: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.metadata.total_columns) || 0,
                 numeric_columns: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.metadata.numeric_columns) || []
-            }
+            },
+            grouping: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.grouping) || undefined
         },
         dataset_id: datasetId || "home_generation_dataset"
     };
@@ -40295,7 +40324,6 @@ function CopilotKitDataGrid({ widget, showHeader, styles, onResetReady, widgetBa
     const isFirstLoad = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.isFirstLoad;
     const content = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.content;
     const widget_data = (_c = widget.widget_data) === null || _c === void 0 ? void 0 : _c.matrix_grid_data;
-    console.log('widget_data===>', widget_data);
     const { threadId, setThreadId } = useCopilotContext();
     const timeoutRef = useRef(null);
     const [apiCallCount, setApiCallCount] = useState(0);
@@ -41308,7 +41336,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                     onCloseWidgetPallete && onCloseWidgetPallete();
                 }, defaultAgentName: defaultAgentName }), jsxRuntimeExports.jsx(EditWidgetDialog, { editingWidget: editingWidget, setWidgets: setWidgets, initialText: editInitialQuery, isOpen: showEditModal, onClose: () => setShowEditModal(false), onSubmit: handleEditSubmit }), jsxRuntimeExports.jsx("div", { className: "min-h-full", onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, onClick: () => setSelectedWidget(null), children: isLoading ? (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsx(Loader2, { className: "h-8 w-8 animate-spin" }) })) : (jsxRuntimeExports.jsx(RGL, { className: "layout m-0 p-0 gap-2", layouts: { lg: getLayoutFromWidgets() }, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480 }, cols: { lg: 12, md: 8, sm: 6, xs: 2 }, rowHeight: 60, isDraggable: isEditing, isResizable: isEditing, draggableHandle: ".drag-icon", onLayoutChange: handleLayoutChange, compactType: "vertical", containerPadding: [0, 0], margin: [16, 16], children: widgets.map((w) => {
                         var _a, _b;
-                        return (jsxRuntimeExports.jsxs("div", { className: `${(w.type === "text" || w.type === "spacer") ? `${((_b = (_a = w === null || w === void 0 ? void 0 : w.config) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? 'shadow-lg rounded-xl border border-primary-300' : 'flex items-center'}` : `shadow-lg rounded-xl border border-primary-300 p-4 ${isEditing ? 'pb-20' : 'pb-14'}`} overflow-hidden`, children: [isEditing &&
+                        return (jsxRuntimeExports.jsxs("div", { className: `${(w.type === "text" || w.type === "spacer") ? `${((_b = (_a = w === null || w === void 0 ? void 0 : w.config) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? 'shadow-lg rounded-xl border border-primary-300' : 'flex items-center'}` : `shadow-lg rounded-xl border border-primary-300 p-4 ${isEditing ? 'pb-14' : 'pb-5'}`}`, children: [isEditing &&
                                     jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-end mb-4 relative ${(w.type === "text" || w.type === "spacer") ? "pl-4 pr-4 pt-4" : ""}`, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center drag-icon cursor-grab absolute left-1/2 -translate-x-1/2", children: [jsxRuntimeExports.jsx(GripHorizontal, { className: "" }), jsxRuntimeExports.jsx(GripHorizontal, { className: "-ml-[3px]" }), jsxRuntimeExports.jsx(GripHorizontal, { className: "-ml-[3px]" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 cursor-pointer justify-end", children: [jsxRuntimeExports.jsx(Trash2, { onClick: () => removeWidget(w.id), className: "w-5 h-5 text-red-700" }), w.type !== "spacer" && jsxRuntimeExports.jsx(Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })] })] }), jsxRuntimeExports.jsxs("div", { className: `${((w === null || w === void 0 ? void 0 : w.type) === 'text' || (w === null || w === void 0 ? void 0 : w.type) === 'spacer') ? `${isEditing ? 'px-4' : ''}` : "h-full"} w-full relative`, children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
                                             jsxRuntimeExports.jsxs("div", { className: "relative z-50", children: [jsxRuntimeExports.jsx("div", { onClick: () => handleClearChat(w.id), onMouseOver: () => setVisibleClearButton(true), onMouseLeave: () => setVisibleClearButton(false), className: "absolute top-[12px] right-0 z-40 flex align-middle justify-center gap-2 text-sm px-4 py-2 border-primary-300 rounded-l-sm w-fit bg-primary-700 text-white cursor-pointer shadow-md transition-all", children: jsxRuntimeExports.jsx(MessageCircleX, { className: "w-5 h-5" }) }), jsxRuntimeExports.jsx("span", { className: `absolute top-[56px] right-[16px] z-50 w-max py-1 text-xs px-2 rounded-sm text-white bg-gray-950 ${visibleClearButton ? "block" : "hidden"}`, children: "Clear Chat" })] }), jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl: widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter(widget => widget.type !== 'chatbot').map(widget => widget.id), datasetId: datasetId })] })] }, w.id));
                     }) })) })] }));

package/dist/index.js

@@ -16,7 +16,6 @@ var Editor = require('@monaco-editor/react');
 var reactGridLayout = require('react-grid-layout');
 var uuid = require('uuid');
 var reactCore = require('@copilotkit/react-core');
-var reactUi = require('@copilotkit/react-ui');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 
@@ -16630,7 +16629,6 @@ var plugin$1 = {
 Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
 function SeriesLineChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title }) {
     var _a, _b;
-    console.log('x_axis_title==>', x_axis_title);
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
         if (!isNaN(numValue)) {
@@ -17678,6 +17676,8 @@ function LineChart({ title, data, options, className, units, content }) {
 function DataGrid({ title, data, className }) {
     var _a;
     const { columns, rows, units, grouped = false, grouping } = data;
+    console.log('title==>', title);
+    console.log('grouping==>', grouping);
     const [expandedGroups, setExpandedGroups] = React.useState(new Set(((_a = grouping === null || grouping === void 0 ? void 0 : grouping.sections) === null || _a === void 0 ? void 0 : _a.filter(s => s.expanded).map(s => s.group_value)) || []));
     const toggleGroup = (groupValue) => {
         const newExpanded = new Set(expandedGroups);
@@ -39181,7 +39181,25 @@ function CopilotKitChatbot({ widget, showHeader, styles, onResetReady, widgetIds
             dataset_id: datasetId
         },
     });
-    const { reset } = reactCore.useCopilotChat();
+    const { reset, visibleMessages, appendMessage, isLoading } = reactCore.useCopilotChat();
+    const [inputValue, setInputValue] = React.useState("");
+    const [chatMessages, setChatMessages] = React.useState([]);
+    const messagesEndRef = React.useRef(null);
+    const scrollToBottom = () => {
+        var _a;
+        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+    };
+    React.useEffect(() => {
+        console.log('visibleMessages==>', visibleMessages);
+        if (visibleMessages.length) {
+            const nonEmptyMessages = visibleMessages.filter((msg) => (msg === null || msg === void 0 ? void 0 : msg.content) && (msg === null || msg === void 0 ? void 0 : msg.content.trim()) !== "");
+            setChatMessages(nonEmptyMessages);
+        }
+    }, [visibleMessages]);
+    // Auto-scroll when messages change or loading state changes
+    React.useEffect(() => {
+        scrollToBottom();
+    }, [chatMessages, isLoading]);
     // Register the reset function with the parent component
     React.useEffect(() => {
         if (onResetReady && reset && widget.id) {
@@ -39209,12 +39227,25 @@ function CopilotKitChatbot({ widget, showHeader, styles, onResetReady, widgetIds
             window.removeEventListener('clearChartState', handleClearChartState);
         };
     }, [widget.id, widgetIds, datasetId, setChatbotState]);
-    return (jsxRuntimeExports.jsxs("div", { className: cn("flex flex-col h-full"), children: [showHeader && (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between pb-2 border-b", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.Bot, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: widget.title })] }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 h-full", children: jsxRuntimeExports.jsx(reactUi.CopilotChat, { className: "h-full text-xs [&_.copilot-chat-message]:text-xs [&_.copilot-chat-input]:text-xs", labels: {
-                        title: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.copilotTitle) || widget.title,
-                        initial: ((_c = widget.config) === null || _c === void 0 ? void 0 : _c.copilotInitialMessage) || ((_d = widget.config) === null || _d === void 0 ? void 0 : _d.placeholder) || "How can I help you today?"
-                    }, onSubmitMessage: () => {
-                        setChatbotState(prevState => (Object.assign(Object.assign({}, prevState), { widget_ids: widgetIds, dataset_id: datasetId })));
-                    } }) })] }));
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (!inputValue.trim())
+            return;
+        // Update chatbot state before sending message
+        setChatbotState(prevState => (Object.assign(Object.assign({}, prevState), { widget_ids: widgetIds, dataset_id: datasetId })));
+        // Append the user message
+        appendMessage(new TextMessage({
+            content: inputValue,
+            role: Role.User,
+        }));
+        // Clear input
+        setInputValue("");
+    };
+    return (jsxRuntimeExports.jsxs("div", { className: cn("flex flex-col h-full"), children: [showHeader && (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between pb-2 border-b", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.Bot, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: widget.title })] }) })), jsxRuntimeExports.jsxs("div", { className: "flex-1 h-full flex flex-col", children: [jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: chatMessages.length === 0 ? (jsxRuntimeExports.jsx("div", { className: "text-center text-gray-500 text-xs mt-8", children: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.copilotInitialMessage) || ((_c = widget.config) === null || _c === void 0 ? void 0 : _c.placeholder) || "How can I help you today?" })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [chatMessages.map((message) => (jsxRuntimeExports.jsx("div", { className: cn("flex", message.role === "user" ? "justify-end" : "justify-start"), children: jsxRuntimeExports.jsxs("div", { className: cn("max-w-[80%] rounded-lg px-4 py-2 text-xs", message.role === "user"
+                                            ? "bg-blue-500 text-white"
+                                            : "bg-gray-100 text-gray-900"), children: [jsxRuntimeExports.jsx("div", { className: "whitespace-pre-wrap", children: jsxRuntimeExports.jsx(Markdown, { children: message.content }) }), message.createdAt && (jsxRuntimeExports.jsx("div", { className: cn("text-[10px] mt-1", message.role === "user" ? "text-blue-100" : "text-gray-500"), children: new Date(message.createdAt).toLocaleTimeString() }))] }) }, message.id))), isLoading && (jsxRuntimeExports.jsx("div", { className: "flex justify-start", children: jsxRuntimeExports.jsx("div", { className: "bg-gray-100 rounded-lg px-4 py-2 text-xs", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex space-x-1", children: [jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: '0ms' } }), jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: '150ms' } }), jsxRuntimeExports.jsx("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce", style: { animationDelay: '300ms' } })] }), jsxRuntimeExports.jsx("span", { className: "text-gray-500", children: "Thinking..." })] }) }) })), jsxRuntimeExports.jsx("div", { ref: messagesEndRef })] })) }), jsxRuntimeExports.jsx("form", { onSubmit: handleSubmit, className: "border-t p-4", children: jsxRuntimeExports.jsxs("div", { className: "flex gap-2 relative", children: [jsxRuntimeExports.jsx("textarea", { value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: ((_d = widget.config) === null || _d === void 0 ? void 0 : _d.placeholder) || "Type a message...", className: "resize-none h-20 overflow-y-auto flex-1 px-3 py-2 text-xs border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" }), jsxRuntimeExports.jsx("button", { type: "submit", disabled: !inputValue.trim(), className: cn("absolute bottom-0 right-0 p-2 rounded-lg text-white flex items-center justify-center bg-transparent"), children: jsxRuntimeExports.jsx(lucideReact.Send, { className: cn("h-4 w-4", inputValue.trim()
+                                            ? "text-primary-600"
+                                            : "text-gray-600 cursor-not-allowed") }) })] }) })] })] }));
 }
 function ChatbotWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
     var _a, _b;
@@ -39404,7 +39435,6 @@ function CopilotKitPieChart({ widget, showHeader, styles, onResetReady, widgetBa
     const isFirstLoad = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.isFirstLoad;
     const content = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.content;
     const widget_data = (_c = widget.widget_data) === null || _c === void 0 ? void 0 : _c.pie_chart_data;
-    console.log('widget_data===>', widget_data);
     const { threadId, setThreadId } = reactCore.useCopilotContext();
     const timeoutRef = React.useRef(null);
     const [apiCallCount, setApiCallCount] = React.useState(0);
@@ -39716,7 +39746,6 @@ function CopilotKitSeriesBarChart$1({ widget, showHeader, styles, onResetReady,
     const isFirstLoad = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.isFirstLoad;
     const content = (_c = widget.config) === null || _c === void 0 ? void 0 : _c.content;
     const widget_data = (_d = widget.widget_data) === null || _d === void 0 ? void 0 : _d.series_bar_chart_data;
-    console.log('widget_data===>', widget_data);
     const { threadId, setThreadId } = reactCore.useCopilotContext();
     const timeoutRef = React.useRef(null);
     const [apiCallCount, setApiCallCount] = React.useState(0);
@@ -40028,7 +40057,6 @@ function CopilotKitSeriesBarChart({ widget, showHeader, styles, onResetReady, wi
     const isFirstLoad = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.isFirstLoad;
     const content = (_c = widget.config) === null || _c === void 0 ? void 0 : _c.content;
     const widget_data = (_d = widget.widget_data) === null || _d === void 0 ? void 0 : _d.series_bar_chart_data;
-    console.log('widget_data===>', widget_data);
     const { threadId, setThreadId } = reactCore.useCopilotContext();
     const timeoutRef = React.useRef(null);
     const [apiCallCount, setApiCallCount] = React.useState(0);
@@ -40188,7 +40216,8 @@ const createInitialChartState = (datasetId, dataGridState) => {
                 total_rows: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.metadata.total_rows) || 0,
                 total_columns: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.metadata.total_columns) || 0,
                 numeric_columns: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.metadata.numeric_columns) || []
-            }
+            },
+            grouping: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.grouping) || undefined
         },
         dataset_id: datasetId || "home_generation_dataset"
     };
@@ -40322,7 +40351,6 @@ function CopilotKitDataGrid({ widget, showHeader, styles, onResetReady, widgetBa
     const isFirstLoad = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.isFirstLoad;
     const content = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.content;
     const widget_data = (_c = widget.widget_data) === null || _c === void 0 ? void 0 : _c.matrix_grid_data;
-    console.log('widget_data===>', widget_data);
     const { threadId, setThreadId } = reactCore.useCopilotContext();
     const timeoutRef = React.useRef(null);
     const [apiCallCount, setApiCallCount] = React.useState(0);
@@ -41335,7 +41363,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                     onCloseWidgetPallete && onCloseWidgetPallete();
                 }, defaultAgentName: defaultAgentName }), jsxRuntimeExports.jsx(EditWidgetDialog, { editingWidget: editingWidget, setWidgets: setWidgets, initialText: editInitialQuery, isOpen: showEditModal, onClose: () => setShowEditModal(false), onSubmit: handleEditSubmit }), jsxRuntimeExports.jsx("div", { className: "min-h-full", onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, onClick: () => setSelectedWidget(null), children: isLoading ? (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsx(lucideReact.Loader2, { className: "h-8 w-8 animate-spin" }) })) : (jsxRuntimeExports.jsx(RGL, { className: "layout m-0 p-0 gap-2", layouts: { lg: getLayoutFromWidgets() }, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480 }, cols: { lg: 12, md: 8, sm: 6, xs: 2 }, rowHeight: 60, isDraggable: isEditing, isResizable: isEditing, draggableHandle: ".drag-icon", onLayoutChange: handleLayoutChange, compactType: "vertical", containerPadding: [0, 0], margin: [16, 16], children: widgets.map((w) => {
                         var _a, _b;
-                        return (jsxRuntimeExports.jsxs("div", { className: `${(w.type === "text" || w.type === "spacer") ? `${((_b = (_a = w === null || w === void 0 ? void 0 : w.config) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? 'shadow-lg rounded-xl border border-primary-300' : 'flex items-center'}` : `shadow-lg rounded-xl border border-primary-300 p-4 ${isEditing ? 'pb-20' : 'pb-14'}`} overflow-hidden`, children: [isEditing &&
+                        return (jsxRuntimeExports.jsxs("div", { className: `${(w.type === "text" || w.type === "spacer") ? `${((_b = (_a = w === null || w === void 0 ? void 0 : w.config) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? 'shadow-lg rounded-xl border border-primary-300' : 'flex items-center'}` : `shadow-lg rounded-xl border border-primary-300 p-4 ${isEditing ? 'pb-14' : 'pb-5'}`}`, children: [isEditing &&
                                     jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-end mb-4 relative ${(w.type === "text" || w.type === "spacer") ? "pl-4 pr-4 pt-4" : ""}`, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center drag-icon cursor-grab absolute left-1/2 -translate-x-1/2", children: [jsxRuntimeExports.jsx(lucideReact.GripHorizontal, { className: "" }), jsxRuntimeExports.jsx(lucideReact.GripHorizontal, { className: "-ml-[3px]" }), jsxRuntimeExports.jsx(lucideReact.GripHorizontal, { className: "-ml-[3px]" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 cursor-pointer justify-end", children: [jsxRuntimeExports.jsx(lucideReact.Trash2, { onClick: () => removeWidget(w.id), className: "w-5 h-5 text-red-700" }), w.type !== "spacer" && jsxRuntimeExports.jsx(lucideReact.Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })] })] }), jsxRuntimeExports.jsxs("div", { className: `${((w === null || w === void 0 ? void 0 : w.type) === 'text' || (w === null || w === void 0 ? void 0 : w.type) === 'spacer') ? `${isEditing ? 'px-4' : ''}` : "h-full"} w-full relative`, children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
                                             jsxRuntimeExports.jsxs("div", { className: "relative z-50", children: [jsxRuntimeExports.jsx("div", { onClick: () => handleClearChat(w.id), onMouseOver: () => setVisibleClearButton(true), onMouseLeave: () => setVisibleClearButton(false), className: "absolute top-[12px] right-0 z-40 flex align-middle justify-center gap-2 text-sm px-4 py-2 border-primary-300 rounded-l-sm w-fit bg-primary-700 text-white cursor-pointer shadow-md transition-all", children: jsxRuntimeExports.jsx(lucideReact.MessageCircleX, { className: "w-5 h-5" }) }), jsxRuntimeExports.jsx("span", { className: `absolute top-[56px] right-[16px] z-50 w-max py-1 text-xs px-2 rounded-sm text-white bg-gray-950 ${visibleClearButton ? "block" : "hidden"}`, children: "Clear Chat" })] }), jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl: widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter(widget => widget.type !== 'chatbot').map(widget => widget.id), datasetId: datasetId })] })] }, w.id));
                     }) })) })] }));

package/package.json

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