@optifye/dashboard-core 4.3.3 → 4.3.5

package/dist/index.js

@@ -25046,12 +25046,22 @@ var AIAgentView = () => {
     const parseChartPatterns = (text) => {
       const chartElements = [];
       let lastIndex = 0;
+      console.log("[DEBUG] Parsing chart patterns from text:", text);
       const chartRegex = /\[\s*(?:Calling\s+|CALL\s+)?(create_[a-z_]+)\s*\(([\s\S]*?)\)\s*\]/g;
       let match;
       const processedIndices = /* @__PURE__ */ new Set();
+      let matchCount = 0;
       while ((match = chartRegex.exec(text)) !== null) {
+        matchCount++;
         const startIndex = match.index;
         const endIndex = startIndex + match[0].length;
+        console.log(`[DEBUG] Found chart pattern #${matchCount}:`, {
+          fullMatch: match[0],
+          chartType: match[1],
+          argsString: match[2],
+          startIndex,
+          endIndex
+        });
         if (!processedIndices.has(startIndex)) {
           processedIndices.add(startIndex);
           if (startIndex > lastIndex) {
@@ -25072,18 +25082,53 @@ var AIAgentView = () => {
             const args = parseChartArguments(argsString);
             const chartElement = renderChart(chartType, args, startIndex);
             if (chartElement) {
+              console.log(`[DEBUG] Successfully rendered chart: ${chartType}`);
               chartElements.push(chartElement);
+            } else {
+              console.warn(`[DEBUG] Chart element was null for type: ${chartType}`);
+              console.warn(`[DEBUG] Args were:`, args);
+              chartElements.push(
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "text-red-500 text-sm border border-red-300 bg-red-50 p-3 rounded",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Chart Rendering Error:" }),
+                      " Failed to render ",
+                      chartType,
+                      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                      /* @__PURE__ */ jsxRuntime.jsxs("small", { children: [
+                        "Check console for details. Args: ",
+                        JSON.stringify(args, null, 2)
+                      ] })
+                    ]
+                  },
+                  `error-${startIndex}`
+                )
+              );
             }
           } catch (error) {
             console.error(`Failed to parse chart ${chartType}:`, error);
+            console.error(`Args string was:`, argsString);
             chartElements.push(
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: "text-red-500 text-sm",
+                  className: "text-red-500 text-sm border border-red-300 bg-red-50 p-3 rounded",
                   children: [
-                    "Error rendering chart: ",
-                    match[0]
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Chart Parsing Error:" }),
+                    " Failed to parse ",
+                    chartType,
+                    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                    /* @__PURE__ */ jsxRuntime.jsxs("small", { children: [
+                      "Error: ",
+                      error instanceof Error ? error.message : String(error)
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                    /* @__PURE__ */ jsxRuntime.jsxs("small", { children: [
+                      "Original: ",
+                      match[0]
+                    ] })
                   ]
                 },
                 `error-${startIndex}`
@@ -25093,6 +25138,7 @@ var AIAgentView = () => {
           lastIndex = endIndex;
         }
       }
+      console.log(`[DEBUG] Total chart patterns found: ${matchCount}`);
       if (lastIndex < text.length) {
         const remainingText = text.substring(lastIndex);
         chartElements.push(
@@ -25106,47 +25152,139 @@ var AIAgentView = () => {
         );
       }
       if (chartElements.length === 1 && lastIndex === 0) {
+        console.log("[DEBUG] No charts found in text, returning null");
         return null;
       }
+      console.log(`[DEBUG] Returning ${chartElements.length} chart elements`);
       return chartElements;
     };
     const parseChartArguments = (argsString) => {
-      const args = {};
-      const jsonParamRegex = /(\w+)\s*=\s*(\[[\s\S]*?\](?=\s*(?:,|\s*\)|\s*$))|\{[\s\S]*?\}(?=\s*(?:,|\s*\)|\s*$)))/g;
-      let jsonMatch;
-      while ((jsonMatch = jsonParamRegex.exec(argsString)) !== null) {
-        const paramName = jsonMatch[1];
-        const jsonValue = jsonMatch[2];
-        try {
-          args[paramName] = JSON.parse(jsonValue);
-          argsString = argsString.replace(jsonMatch[0], "");
-        } catch (e) {
-          console.error(`Failed to parse ${paramName} JSON:`, e);
-        }
-      }
-      const argRegex = /(\w+)\s*=\s*("([^"]*)"|'([^']*)'|([^,\s\)]+))/g;
-      let argMatch;
-      while ((argMatch = argRegex.exec(argsString)) !== null) {
-        const key = argMatch[1];
-        const value = argMatch[3] || argMatch[4] || argMatch[5];
-        if (key === "data") continue;
-        if (value === "true" || value === "True") {
-          args[key] = true;
-        } else if (value === "false" || value === "False") {
-          args[key] = false;
-        } else if (value === "null" || value === "None") {
-          args[key] = null;
-        } else if (!isNaN(Number(value)) && value !== "") {
-          args[key] = Number(value);
-        } else {
-          args[key] = value;
+      console.log("[DEBUG] Parsing chart arguments:", argsString);
+      const extractParameters = (str) => {
+        const params = {};
+        let currentPos = 0;
+        while (currentPos < str.length) {
+          while (currentPos < str.length && /\s|,/.test(str[currentPos])) {
+            currentPos++;
+          }
+          if (currentPos >= str.length) break;
+          const paramMatch = str.substring(currentPos).match(/^(\w+)\s*=/);
+          if (!paramMatch) {
+            console.warn("[DEBUG] No parameter name found at position", currentPos);
+            break;
+          }
+          const paramName = paramMatch[1];
+          currentPos += paramMatch[0].length;
+          while (currentPos < str.length && /\s/.test(str[currentPos])) {
+            currentPos++;
+          }
+          if (currentPos >= str.length) break;
+          let value;
+          let valueEnd;
+          if (str[currentPos] === "[") {
+            let bracketCount = 0;
+            let arrayStart = currentPos;
+            valueEnd = str.length;
+            for (let i = currentPos; i < str.length; i++) {
+              if (str[i] === "[") bracketCount++;
+              else if (str[i] === "]") bracketCount--;
+              if (bracketCount === 0) {
+                valueEnd = i + 1;
+                break;
+              }
+            }
+            if (bracketCount !== 0) {
+              console.error("[DEBUG] Unmatched brackets in array value");
+              break;
+            }
+            const arrayStr = str.substring(arrayStart, valueEnd);
+            console.log(`[DEBUG] Found array parameter: ${paramName} = ${arrayStr}`);
+            try {
+              value = JSON.parse(arrayStr);
+              console.log(`[DEBUG] Successfully parsed array ${paramName}:`, value);
+            } catch (e) {
+              console.error(`[DEBUG] Failed to parse array ${paramName}:`, e);
+              console.error(`Array value that failed:`, arrayStr);
+              value = arrayStr;
+            }
+          } else if (str[currentPos] === "{") {
+            let braceCount = 0;
+            let objectStart = currentPos;
+            valueEnd = str.length;
+            for (let i = currentPos; i < str.length; i++) {
+              if (str[i] === "{") braceCount++;
+              else if (str[i] === "}") braceCount--;
+              if (braceCount === 0) {
+                valueEnd = i + 1;
+                break;
+              }
+            }
+            if (braceCount !== 0) {
+              console.error("[DEBUG] Unmatched braces in object value");
+              break;
+            }
+            const objectStr = str.substring(objectStart, valueEnd);
+            console.log(`[DEBUG] Found object parameter: ${paramName} = ${objectStr}`);
+            try {
+              value = JSON.parse(objectStr);
+              console.log(`[DEBUG] Successfully parsed object ${paramName}:`, value);
+            } catch (e) {
+              console.error(`[DEBUG] Failed to parse object ${paramName}:`, e);
+              console.error(`Object value that failed:`, objectStr);
+              value = objectStr;
+            }
+          } else if (str[currentPos] === '"') {
+            let stringStart = currentPos + 1;
+            let stringEnd = stringStart;
+            while (stringEnd < str.length) {
+              if (str[stringEnd] === '"' && str[stringEnd - 1] !== "\\") {
+                break;
+              }
+              stringEnd++;
+            }
+            if (stringEnd >= str.length) {
+              console.error("[DEBUG] Unterminated string value");
+              valueEnd = str.length;
+              break;
+            }
+            value = str.substring(stringStart, stringEnd);
+            valueEnd = stringEnd + 1;
+            console.log(`[DEBUG] Found string parameter: ${paramName} = "${value}"`);
+          } else {
+            let valueStart = currentPos;
+            let valueEndPos = valueStart;
+            while (valueEndPos < str.length && str[valueEndPos] !== ",") {
+              valueEndPos++;
+            }
+            const rawValue = str.substring(valueStart, valueEndPos).trim();
+            valueEnd = valueEndPos;
+            if (rawValue === "true" || rawValue === "True") {
+              value = true;
+            } else if (rawValue === "false" || rawValue === "False") {
+              value = false;
+            } else if (rawValue === "null" || rawValue === "None") {
+              value = null;
+            } else if (!isNaN(Number(rawValue)) && rawValue !== "") {
+              value = Number(rawValue);
+            } else {
+              value = rawValue;
+            }
+            console.log(`[DEBUG] Found unquoted parameter: ${paramName} = ${rawValue} (parsed as ${typeof value})`);
+          }
+          params[paramName] = value;
+          currentPos = valueEnd;
         }
-      }
-      return args;
+        return params;
+      };
+      const result = extractParameters(argsString);
+      console.log("[DEBUG] Final parsed arguments:", result);
+      return result;
     };
     const renderChart = (chartType, args, key) => {
+      console.log(`[DEBUG] Attempting to render chart type: ${chartType}`, args);
       switch (chartType) {
         case "create_gauge_chart":
+          console.log("[DEBUG] Rendering gauge chart");
           return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-6 h-64 w-full flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
             GaugeChart,
             {
@@ -25161,8 +25299,9 @@ var AIAgentView = () => {
             }
           ) }, `gauge-${key}`);
         case "create_bar_chart":
+          console.log("[DEBUG] Rendering bar chart");
           if (!args.data || !args.x_field || !args.y_field) {
-            console.error("Bar chart missing required parameters");
+            console.error("Bar chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
             return null;
           }
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", style: { maxWidth: args.max_width || "100%" }, children: [
@@ -25183,8 +25322,9 @@ var AIAgentView = () => {
             args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
           ] }, `bar-${key}`);
         case "create_line_chart":
+          console.log("[DEBUG] Rendering line chart");
           if (!args.data || !args.x_field || !args.y_field) {
-            console.error("Line chart missing required parameters");
+            console.error("Line chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
             return null;
           }
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", style: {
@@ -25208,14 +25348,17 @@ var AIAgentView = () => {
             args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
           ] }, `line-${key}`);
         case "create_pie_chart":
+          console.log("[DEBUG] Rendering pie chart");
           if (!args.data || !args.label_field || !args.value_field) {
-            console.error("Pie chart missing required parameters");
+            console.error("Pie chart missing required parameters:", { data: !!args.data, label_field: !!args.label_field, value_field: !!args.value_field });
+            console.error("Available args:", Object.keys(args));
             return null;
           }
           const pieData = args.data.map((item) => ({
             name: item[args.label_field],
             value: item[args.value_field]
           }));
+          console.log("[DEBUG] Pie chart data transformed:", pieData);
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full flex flex-col items-center", children: [
             args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full max-w-md", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -25227,6 +25370,7 @@ var AIAgentView = () => {
             ) })
           ] }, `pie-${key}`);
         case "create_comparison_table":
+          console.log("[DEBUG] Rendering comparison table");
           if (!args.data) {
             console.error("Comparison table missing required data");
             return null;
@@ -25262,6 +25406,190 @@ var AIAgentView = () => {
               )) }, rowIdx)) })
             ] })
           ] }, `table-${key}`);
+        case "create_multi_line_chart":
+          console.log("[DEBUG] Rendering multi-line chart");
+          if (!args.data || !args.x_field || !args.y_fields || !args.legend) {
+            console.error("Multi-line chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              y_fields: !!args.y_fields,
+              legend: !!args.legend
+            });
+            return null;
+          }
+          const colors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: args.data, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              args.y_fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Line,
+                {
+                  type: "monotone",
+                  dataKey: field,
+                  stroke: colors[index % colors.length],
+                  strokeWidth: 2,
+                  name: args.legend[index] || field,
+                  dot: { r: 4 },
+                  activeDot: { r: 6 }
+                },
+                field
+              ))
+            ] }) }),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `multi-line-${key}`);
+        case "create_stacked_bar_chart":
+          console.log("[DEBUG] Rendering stacked bar chart");
+          if (!args.data || !args.x_field || !args.stack_fields) {
+            console.error("Stacked bar chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              stack_fields: !!args.stack_fields
+            });
+            return null;
+          }
+          const stackColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: args.data, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              args.stack_fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Bar,
+                {
+                  dataKey: field,
+                  stackId: "stack",
+                  fill: stackColors[index % stackColors.length],
+                  name: field
+                },
+                field
+              ))
+            ] }) }),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `stacked-bar-${key}`);
+        case "create_dual_axis_chart":
+          console.log("[DEBUG] Rendering dual-axis chart");
+          if (!args.data || !args.x_field || !args.left_y_field || !args.right_y_field) {
+            console.error("Dual-axis chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              left_y_field: !!args.left_y_field,
+              right_y_field: !!args.right_y_field
+            });
+            return null;
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "left", orientation: "left", label: { value: args.left_label || "", angle: -90, position: "insideLeft" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "right", orientation: "right", label: { value: args.right_label || "", angle: 90, position: "insideRight" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { yAxisId: "left", dataKey: args.left_y_field, fill: "#3b82f6", name: args.left_label || args.left_y_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Line, { yAxisId: "right", type: "monotone", dataKey: args.right_y_field, stroke: "#ef4444", strokeWidth: 2, name: args.right_label || args.right_y_field })
+            ] }) }),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `dual-axis-${key}`);
+        case "create_scatter_plot":
+          console.log("[DEBUG] Rendering scatter plot");
+          if (!args.data || !args.x_field || !args.y_field || !args.group_field) {
+            console.error("Scatter plot missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              y_field: !!args.y_field,
+              group_field: !!args.group_field
+            });
+            return null;
+          }
+          const groupedData = args.data.reduce((acc, item) => {
+            const group = item[args.group_field];
+            if (!acc[group]) {
+              acc[group] = [];
+            }
+            acc[group].push(item);
+            return acc;
+          }, {});
+          const scatterColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field, type: "number", name: args.x_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { dataKey: args.y_field, type: "number", name: args.y_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { cursor: { strokeDasharray: "3 3" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              Object.entries(groupedData).map(([group, data], index) => /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Scatter,
+                {
+                  name: group,
+                  data,
+                  fill: scatterColors[index % scatterColors.length]
+                },
+                group
+              ))
+            ] }) }),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `scatter-${key}`);
+        case "create_combo_chart":
+          console.log("[DEBUG] Rendering combo chart");
+          if (!args.data || !args.x_field || !args.bar_field || !args.line_field) {
+            console.error("Combo chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              bar_field: !!args.bar_field,
+              line_field: !!args.line_field
+            });
+            return null;
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "left", orientation: "left" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "right", orientation: "right" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { yAxisId: "left", dataKey: args.bar_field, fill: "#3b82f6", name: args.bar_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Line, { yAxisId: "right", type: "monotone", dataKey: args.line_field, stroke: "#ef4444", strokeWidth: 2, name: args.line_field })
+            ] }) }),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `combo-${key}`);
+        case "create_area_chart":
+          console.log("[DEBUG] Rendering area chart");
+          if (!args.data || !args.x_field || !args.y_field) {
+            console.error("Area chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              y_field: !!args.y_field
+            });
+            return null;
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Area,
+                {
+                  type: "monotone",
+                  dataKey: args.y_field,
+                  stroke: "#3b82f6",
+                  fill: args.fill ? "#3b82f6" : "none",
+                  fillOpacity: args.fill ? 0.6 : 0,
+                  name: args.y_field
+                }
+              )
+            ] }) }),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `area-${key}`);
         default:
           console.warn(`Unknown chart type: ${chartType}`);
           return null;

package/dist/index.mjs

@@ -10,7 +10,7 @@ import Hls2 from 'hls.js';
 import useSWR from 'swr';
 import { noop, warning, invariant, progress, secondsToMilliseconds, millisecondsToSeconds, memo as memo$1 } from 'motion-utils';
 import { getValueTransition, hover, press, isPrimaryPointer, GroupPlaybackControls, setDragLock, supportsLinearEasing, attachTimeline, isGenerator, calcGeneratorDuration, isWaapiSupportedEasing, mapEasingToNativeEasing, maxGeneratorDuration, generateLinearEasing, isBezierDefinition } from 'motion-dom';
-import { Bar, LabelList, ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Cell, PieChart, Pie, Legend, LineChart as LineChart$1, Line } from 'recharts';
+import { Bar, LabelList, ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Cell, PieChart, Pie, Legend, LineChart as LineChart$1, Line, ComposedChart, Area, ScatterChart, Scatter } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
 import { Camera, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, X, Coffee, Plus, Clock, Minus, ArrowDown, ArrowUp, Search, CheckCircle, AlertTriangle, Info, Share2, Download, User, XCircle, ChevronLeft, ChevronRight, AlertCircle, Sun, Moon, MessageSquare, Trash2, ArrowLeft, RefreshCw, Menu, Send, Copy, Edit2, UserCheck, Save, LogOut, Calendar, Settings, LifeBuoy, Loader2, ArrowLeftIcon as ArrowLeftIcon$1, Settings2, CheckCircle2, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
@@ -25017,12 +25017,22 @@ var AIAgentView = () => {
     const parseChartPatterns = (text) => {
       const chartElements = [];
       let lastIndex = 0;
+      console.log("[DEBUG] Parsing chart patterns from text:", text);
       const chartRegex = /\[\s*(?:Calling\s+|CALL\s+)?(create_[a-z_]+)\s*\(([\s\S]*?)\)\s*\]/g;
       let match;
       const processedIndices = /* @__PURE__ */ new Set();
+      let matchCount = 0;
       while ((match = chartRegex.exec(text)) !== null) {
+        matchCount++;
         const startIndex = match.index;
         const endIndex = startIndex + match[0].length;
+        console.log(`[DEBUG] Found chart pattern #${matchCount}:`, {
+          fullMatch: match[0],
+          chartType: match[1],
+          argsString: match[2],
+          startIndex,
+          endIndex
+        });
         if (!processedIndices.has(startIndex)) {
           processedIndices.add(startIndex);
           if (startIndex > lastIndex) {
@@ -25043,18 +25053,53 @@ var AIAgentView = () => {
             const args = parseChartArguments(argsString);
             const chartElement = renderChart(chartType, args, startIndex);
             if (chartElement) {
+              console.log(`[DEBUG] Successfully rendered chart: ${chartType}`);
               chartElements.push(chartElement);
+            } else {
+              console.warn(`[DEBUG] Chart element was null for type: ${chartType}`);
+              console.warn(`[DEBUG] Args were:`, args);
+              chartElements.push(
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "text-red-500 text-sm border border-red-300 bg-red-50 p-3 rounded",
+                    children: [
+                      /* @__PURE__ */ jsx("strong", { children: "Chart Rendering Error:" }),
+                      " Failed to render ",
+                      chartType,
+                      /* @__PURE__ */ jsx("br", {}),
+                      /* @__PURE__ */ jsxs("small", { children: [
+                        "Check console for details. Args: ",
+                        JSON.stringify(args, null, 2)
+                      ] })
+                    ]
+                  },
+                  `error-${startIndex}`
+                )
+              );
             }
           } catch (error) {
             console.error(`Failed to parse chart ${chartType}:`, error);
+            console.error(`Args string was:`, argsString);
             chartElements.push(
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "text-red-500 text-sm",
+                  className: "text-red-500 text-sm border border-red-300 bg-red-50 p-3 rounded",
                   children: [
-                    "Error rendering chart: ",
-                    match[0]
+                    /* @__PURE__ */ jsx("strong", { children: "Chart Parsing Error:" }),
+                    " Failed to parse ",
+                    chartType,
+                    /* @__PURE__ */ jsx("br", {}),
+                    /* @__PURE__ */ jsxs("small", { children: [
+                      "Error: ",
+                      error instanceof Error ? error.message : String(error)
+                    ] }),
+                    /* @__PURE__ */ jsx("br", {}),
+                    /* @__PURE__ */ jsxs("small", { children: [
+                      "Original: ",
+                      match[0]
+                    ] })
                   ]
                 },
                 `error-${startIndex}`
@@ -25064,6 +25109,7 @@ var AIAgentView = () => {
           lastIndex = endIndex;
         }
       }
+      console.log(`[DEBUG] Total chart patterns found: ${matchCount}`);
       if (lastIndex < text.length) {
         const remainingText = text.substring(lastIndex);
         chartElements.push(
@@ -25077,47 +25123,139 @@ var AIAgentView = () => {
         );
       }
       if (chartElements.length === 1 && lastIndex === 0) {
+        console.log("[DEBUG] No charts found in text, returning null");
         return null;
       }
+      console.log(`[DEBUG] Returning ${chartElements.length} chart elements`);
       return chartElements;
     };
     const parseChartArguments = (argsString) => {
-      const args = {};
-      const jsonParamRegex = /(\w+)\s*=\s*(\[[\s\S]*?\](?=\s*(?:,|\s*\)|\s*$))|\{[\s\S]*?\}(?=\s*(?:,|\s*\)|\s*$)))/g;
-      let jsonMatch;
-      while ((jsonMatch = jsonParamRegex.exec(argsString)) !== null) {
-        const paramName = jsonMatch[1];
-        const jsonValue = jsonMatch[2];
-        try {
-          args[paramName] = JSON.parse(jsonValue);
-          argsString = argsString.replace(jsonMatch[0], "");
-        } catch (e) {
-          console.error(`Failed to parse ${paramName} JSON:`, e);
-        }
-      }
-      const argRegex = /(\w+)\s*=\s*("([^"]*)"|'([^']*)'|([^,\s\)]+))/g;
-      let argMatch;
-      while ((argMatch = argRegex.exec(argsString)) !== null) {
-        const key = argMatch[1];
-        const value = argMatch[3] || argMatch[4] || argMatch[5];
-        if (key === "data") continue;
-        if (value === "true" || value === "True") {
-          args[key] = true;
-        } else if (value === "false" || value === "False") {
-          args[key] = false;
-        } else if (value === "null" || value === "None") {
-          args[key] = null;
-        } else if (!isNaN(Number(value)) && value !== "") {
-          args[key] = Number(value);
-        } else {
-          args[key] = value;
+      console.log("[DEBUG] Parsing chart arguments:", argsString);
+      const extractParameters = (str) => {
+        const params = {};
+        let currentPos = 0;
+        while (currentPos < str.length) {
+          while (currentPos < str.length && /\s|,/.test(str[currentPos])) {
+            currentPos++;
+          }
+          if (currentPos >= str.length) break;
+          const paramMatch = str.substring(currentPos).match(/^(\w+)\s*=/);
+          if (!paramMatch) {
+            console.warn("[DEBUG] No parameter name found at position", currentPos);
+            break;
+          }
+          const paramName = paramMatch[1];
+          currentPos += paramMatch[0].length;
+          while (currentPos < str.length && /\s/.test(str[currentPos])) {
+            currentPos++;
+          }
+          if (currentPos >= str.length) break;
+          let value;
+          let valueEnd;
+          if (str[currentPos] === "[") {
+            let bracketCount = 0;
+            let arrayStart = currentPos;
+            valueEnd = str.length;
+            for (let i = currentPos; i < str.length; i++) {
+              if (str[i] === "[") bracketCount++;
+              else if (str[i] === "]") bracketCount--;
+              if (bracketCount === 0) {
+                valueEnd = i + 1;
+                break;
+              }
+            }
+            if (bracketCount !== 0) {
+              console.error("[DEBUG] Unmatched brackets in array value");
+              break;
+            }
+            const arrayStr = str.substring(arrayStart, valueEnd);
+            console.log(`[DEBUG] Found array parameter: ${paramName} = ${arrayStr}`);
+            try {
+              value = JSON.parse(arrayStr);
+              console.log(`[DEBUG] Successfully parsed array ${paramName}:`, value);
+            } catch (e) {
+              console.error(`[DEBUG] Failed to parse array ${paramName}:`, e);
+              console.error(`Array value that failed:`, arrayStr);
+              value = arrayStr;
+            }
+          } else if (str[currentPos] === "{") {
+            let braceCount = 0;
+            let objectStart = currentPos;
+            valueEnd = str.length;
+            for (let i = currentPos; i < str.length; i++) {
+              if (str[i] === "{") braceCount++;
+              else if (str[i] === "}") braceCount--;
+              if (braceCount === 0) {
+                valueEnd = i + 1;
+                break;
+              }
+            }
+            if (braceCount !== 0) {
+              console.error("[DEBUG] Unmatched braces in object value");
+              break;
+            }
+            const objectStr = str.substring(objectStart, valueEnd);
+            console.log(`[DEBUG] Found object parameter: ${paramName} = ${objectStr}`);
+            try {
+              value = JSON.parse(objectStr);
+              console.log(`[DEBUG] Successfully parsed object ${paramName}:`, value);
+            } catch (e) {
+              console.error(`[DEBUG] Failed to parse object ${paramName}:`, e);
+              console.error(`Object value that failed:`, objectStr);
+              value = objectStr;
+            }
+          } else if (str[currentPos] === '"') {
+            let stringStart = currentPos + 1;
+            let stringEnd = stringStart;
+            while (stringEnd < str.length) {
+              if (str[stringEnd] === '"' && str[stringEnd - 1] !== "\\") {
+                break;
+              }
+              stringEnd++;
+            }
+            if (stringEnd >= str.length) {
+              console.error("[DEBUG] Unterminated string value");
+              valueEnd = str.length;
+              break;
+            }
+            value = str.substring(stringStart, stringEnd);
+            valueEnd = stringEnd + 1;
+            console.log(`[DEBUG] Found string parameter: ${paramName} = "${value}"`);
+          } else {
+            let valueStart = currentPos;
+            let valueEndPos = valueStart;
+            while (valueEndPos < str.length && str[valueEndPos] !== ",") {
+              valueEndPos++;
+            }
+            const rawValue = str.substring(valueStart, valueEndPos).trim();
+            valueEnd = valueEndPos;
+            if (rawValue === "true" || rawValue === "True") {
+              value = true;
+            } else if (rawValue === "false" || rawValue === "False") {
+              value = false;
+            } else if (rawValue === "null" || rawValue === "None") {
+              value = null;
+            } else if (!isNaN(Number(rawValue)) && rawValue !== "") {
+              value = Number(rawValue);
+            } else {
+              value = rawValue;
+            }
+            console.log(`[DEBUG] Found unquoted parameter: ${paramName} = ${rawValue} (parsed as ${typeof value})`);
+          }
+          params[paramName] = value;
+          currentPos = valueEnd;
         }
-      }
-      return args;
+        return params;
+      };
+      const result = extractParameters(argsString);
+      console.log("[DEBUG] Final parsed arguments:", result);
+      return result;
     };
     const renderChart = (chartType, args, key) => {
+      console.log(`[DEBUG] Attempting to render chart type: ${chartType}`, args);
       switch (chartType) {
         case "create_gauge_chart":
+          console.log("[DEBUG] Rendering gauge chart");
           return /* @__PURE__ */ jsx("div", { className: "my-6 h-64 w-full flex justify-center", children: /* @__PURE__ */ jsx(
             GaugeChart,
             {
@@ -25132,8 +25270,9 @@ var AIAgentView = () => {
             }
           ) }, `gauge-${key}`);
         case "create_bar_chart":
+          console.log("[DEBUG] Rendering bar chart");
           if (!args.data || !args.x_field || !args.y_field) {
-            console.error("Bar chart missing required parameters");
+            console.error("Bar chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
             return null;
           }
           return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", style: { maxWidth: args.max_width || "100%" }, children: [
@@ -25154,8 +25293,9 @@ var AIAgentView = () => {
             args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
           ] }, `bar-${key}`);
         case "create_line_chart":
+          console.log("[DEBUG] Rendering line chart");
           if (!args.data || !args.x_field || !args.y_field) {
-            console.error("Line chart missing required parameters");
+            console.error("Line chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
             return null;
           }
           return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", style: {
@@ -25179,14 +25319,17 @@ var AIAgentView = () => {
             args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
           ] }, `line-${key}`);
         case "create_pie_chart":
+          console.log("[DEBUG] Rendering pie chart");
           if (!args.data || !args.label_field || !args.value_field) {
-            console.error("Pie chart missing required parameters");
+            console.error("Pie chart missing required parameters:", { data: !!args.data, label_field: !!args.label_field, value_field: !!args.value_field });
+            console.error("Available args:", Object.keys(args));
             return null;
           }
           const pieData = args.data.map((item) => ({
             name: item[args.label_field],
             value: item[args.value_field]
           }));
+          console.log("[DEBUG] Pie chart data transformed:", pieData);
           return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full flex flex-col items-center", children: [
             args.title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
             /* @__PURE__ */ jsx("div", { className: "h-64 w-full max-w-md", children: /* @__PURE__ */ jsx(
@@ -25198,6 +25341,7 @@ var AIAgentView = () => {
             ) })
           ] }, `pie-${key}`);
         case "create_comparison_table":
+          console.log("[DEBUG] Rendering comparison table");
           if (!args.data) {
             console.error("Comparison table missing required data");
             return null;
@@ -25233,6 +25377,190 @@ var AIAgentView = () => {
               )) }, rowIdx)) })
             ] })
           ] }, `table-${key}`);
+        case "create_multi_line_chart":
+          console.log("[DEBUG] Rendering multi-line chart");
+          if (!args.data || !args.x_field || !args.y_fields || !args.legend) {
+            console.error("Multi-line chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              y_fields: !!args.y_fields,
+              legend: !!args.legend
+            });
+            return null;
+          }
+          const colors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
+          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(LineChart$1, { data: args.data, children: [
+              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsx(YAxis, {}),
+              /* @__PURE__ */ jsx(Tooltip, {}),
+              /* @__PURE__ */ jsx(Legend, {}),
+              args.y_fields.map((field, index) => /* @__PURE__ */ jsx(
+                Line,
+                {
+                  type: "monotone",
+                  dataKey: field,
+                  stroke: colors[index % colors.length],
+                  strokeWidth: 2,
+                  name: args.legend[index] || field,
+                  dot: { r: 4 },
+                  activeDot: { r: 6 }
+                },
+                field
+              ))
+            ] }) }),
+            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `multi-line-${key}`);
+        case "create_stacked_bar_chart":
+          console.log("[DEBUG] Rendering stacked bar chart");
+          if (!args.data || !args.x_field || !args.stack_fields) {
+            console.error("Stacked bar chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              stack_fields: !!args.stack_fields
+            });
+            return null;
+          }
+          const stackColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
+          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(BarChart$1, { data: args.data, children: [
+              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsx(YAxis, {}),
+              /* @__PURE__ */ jsx(Tooltip, {}),
+              /* @__PURE__ */ jsx(Legend, {}),
+              args.stack_fields.map((field, index) => /* @__PURE__ */ jsx(
+                Bar,
+                {
+                  dataKey: field,
+                  stackId: "stack",
+                  fill: stackColors[index % stackColors.length],
+                  name: field
+                },
+                field
+              ))
+            ] }) }),
+            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `stacked-bar-${key}`);
+        case "create_dual_axis_chart":
+          console.log("[DEBUG] Rendering dual-axis chart");
+          if (!args.data || !args.x_field || !args.left_y_field || !args.right_y_field) {
+            console.error("Dual-axis chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              left_y_field: !!args.left_y_field,
+              right_y_field: !!args.right_y_field
+            });
+            return null;
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, children: [
+              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsx(YAxis, { yAxisId: "left", orientation: "left", label: { value: args.left_label || "", angle: -90, position: "insideLeft" } }),
+              /* @__PURE__ */ jsx(YAxis, { yAxisId: "right", orientation: "right", label: { value: args.right_label || "", angle: 90, position: "insideRight" } }),
+              /* @__PURE__ */ jsx(Tooltip, {}),
+              /* @__PURE__ */ jsx(Legend, {}),
+              /* @__PURE__ */ jsx(Bar, { yAxisId: "left", dataKey: args.left_y_field, fill: "#3b82f6", name: args.left_label || args.left_y_field }),
+              /* @__PURE__ */ jsx(Line, { yAxisId: "right", type: "monotone", dataKey: args.right_y_field, stroke: "#ef4444", strokeWidth: 2, name: args.right_label || args.right_y_field })
+            ] }) }),
+            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `dual-axis-${key}`);
+        case "create_scatter_plot":
+          console.log("[DEBUG] Rendering scatter plot");
+          if (!args.data || !args.x_field || !args.y_field || !args.group_field) {
+            console.error("Scatter plot missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              y_field: !!args.y_field,
+              group_field: !!args.group_field
+            });
+            return null;
+          }
+          const groupedData = args.data.reduce((acc, item) => {
+            const group = item[args.group_field];
+            if (!acc[group]) {
+              acc[group] = [];
+            }
+            acc[group].push(item);
+            return acc;
+          }, {});
+          const scatterColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
+          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(ScatterChart, { children: [
+              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field, type: "number", name: args.x_field }),
+              /* @__PURE__ */ jsx(YAxis, { dataKey: args.y_field, type: "number", name: args.y_field }),
+              /* @__PURE__ */ jsx(Tooltip, { cursor: { strokeDasharray: "3 3" } }),
+              /* @__PURE__ */ jsx(Legend, {}),
+              Object.entries(groupedData).map(([group, data], index) => /* @__PURE__ */ jsx(
+                Scatter,
+                {
+                  name: group,
+                  data,
+                  fill: scatterColors[index % scatterColors.length]
+                },
+                group
+              ))
+            ] }) }),
+            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `scatter-${key}`);
+        case "create_combo_chart":
+          console.log("[DEBUG] Rendering combo chart");
+          if (!args.data || !args.x_field || !args.bar_field || !args.line_field) {
+            console.error("Combo chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              bar_field: !!args.bar_field,
+              line_field: !!args.line_field
+            });
+            return null;
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, children: [
+              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsx(YAxis, { yAxisId: "left", orientation: "left" }),
+              /* @__PURE__ */ jsx(YAxis, { yAxisId: "right", orientation: "right" }),
+              /* @__PURE__ */ jsx(Tooltip, {}),
+              /* @__PURE__ */ jsx(Legend, {}),
+              /* @__PURE__ */ jsx(Bar, { yAxisId: "left", dataKey: args.bar_field, fill: "#3b82f6", name: args.bar_field }),
+              /* @__PURE__ */ jsx(Line, { yAxisId: "right", type: "monotone", dataKey: args.line_field, stroke: "#ef4444", strokeWidth: 2, name: args.line_field })
+            ] }) }),
+            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `combo-${key}`);
+        case "create_area_chart":
+          console.log("[DEBUG] Rendering area chart");
+          if (!args.data || !args.x_field || !args.y_field) {
+            console.error("Area chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              y_field: !!args.y_field
+            });
+            return null;
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxs(ComposedChart, { data: args.data, children: [
+              /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsx(XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsx(YAxis, {}),
+              /* @__PURE__ */ jsx(Tooltip, {}),
+              /* @__PURE__ */ jsx(Legend, {}),
+              /* @__PURE__ */ jsx(
+                Area,
+                {
+                  type: "monotone",
+                  dataKey: args.y_field,
+                  stroke: "#3b82f6",
+                  fill: args.fill ? "#3b82f6" : "none",
+                  fillOpacity: args.fill ? 0.6 : 0,
+                  name: args.y_field
+                }
+              )
+            ] }) }),
+            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `area-${key}`);
         default:
           console.warn(`Unknown chart type: ${chartType}`);
           return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optifye/dashboard-core",
-  "version": "4.3.3",
+  "version": "4.3.5",
   "description": "Reusable UI & logic for Optifye dashboard",
   "main": "dist/index.js",
   "module": "dist/index.mjs",