@automattic/agenttic-client 0.1.0

package/dist/chunk-LAB4XYXR.js

@@ -0,0 +1,688 @@
+// src/markdown-extensions/charts/BarChart.tsx
+import { BarChart as AutomatticBarChart } from "@automattic/charts";
+
+// src/markdown-extensions/charts/BaseChart.tsx
+import {
+  defaultTheme,
+  ThemeProvider
+} from "@automattic/charts";
+import { useMemo } from "react";
+
+// src/utils/theme.ts
+var getCSSVariable = (variableName, fallback = "") => {
+  try {
+    const value = getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
+    return value || fallback;
+  } catch (error) {
+    console.warn(`Failed to get CSS variable ${variableName}:`, error);
+    return fallback;
+  }
+};
+
+// src/markdown-extensions/charts/ChartError.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChartError = ({ message, details }) => /* @__PURE__ */ jsxs("div", { className: "chart-error", children: [
+  /* @__PURE__ */ jsx("strong", { children: "Chart Error:" }),
+  " ",
+  message,
+  details && /* @__PURE__ */ jsxs("details", { children: [
+    /* @__PURE__ */ jsx("summary", { children: "Show Details" }),
+    /* @__PURE__ */ jsx("pre", { children: details })
+  ] })
+] });
+
+// src/markdown-extensions/charts/BaseChart.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var BaseChart = ({
+  children,
+  error
+}) => {
+  const customTheme = useMemo(() => {
+    const primaryColor = getCSSVariable("--color-primary", "#4F46E5");
+    const colors = [primaryColor, "#f0b849", "#00a32a", "#8c5e94"];
+    return {
+      ...defaultTheme,
+      colors,
+      legendLabelStyles: {
+        fontSize: "11px",
+        fontWeight: "400",
+        lineHeight: "1.2",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif'
+      },
+      legendItemStyles: {
+        padding: "2px 0",
+        display: "flex",
+        alignItems: "center"
+      },
+      legendGlyphSize: 12
+    };
+  }, []);
+  if (error) {
+    return /* @__PURE__ */ jsx2(ChartError, { message: error.message, details: error.details });
+  }
+  return /* @__PURE__ */ jsx2("div", { className: "chart-block", children: /* @__PURE__ */ jsx2("div", { className: "chart-container", children: /* @__PURE__ */ jsx2(ThemeProvider, { theme: customTheme, children }) }) });
+};
+
+// src/markdown-extensions/charts/utils/chartUtils.ts
+var calculateBottomMargin = (minMargin = 80, charWidth = 6, padding = 25, labelLength) => {
+  const calculatedLength = labelLength ?? 5;
+  return Math.max(minMargin, calculatedLength * charWidth + padding);
+};
+var parseDate = (dateValue) => {
+  if (dateValue instanceof Date) {
+    return dateValue;
+  }
+  const dateStr = String(dateValue);
+  if (dateStr.includes("T") || dateStr.includes(" ")) {
+    return new Date(dateStr);
+  }
+  const [year, month, day] = dateStr.split("-").map(Number);
+  return new Date(year, month - 1, day);
+};
+var getTimeAxisConfig = (data) => {
+  const allDataPoints = [];
+  data?.forEach((series) => {
+    if (series?.data) {
+      allDataPoints.push(...series.data);
+    }
+  });
+  if (allDataPoints.length === 0) {
+    return {};
+  }
+  const allDates = allDataPoints.map((point) => {
+    if (point && "date" in point && point.date) {
+      return parseDate(point.date);
+    }
+    if (point && "dateString" in point && point.dateString) {
+      return parseDate(point.dateString);
+    }
+    return null;
+  }).filter(
+    (date) => date !== null && !isNaN(date.getTime())
+  ).sort((a, b) => a.getTime() - b.getTime());
+  const uniqueDates = Array.from(
+    new Set(allDates.map((d) => d.getTime()))
+  ).map((timestamp) => new Date(timestamp));
+  if (uniqueDates.length === 0) {
+    return {};
+  }
+  const indices = [
+    0,
+    Math.floor(uniqueDates.length / 3),
+    Math.floor(2 * uniqueDates.length / 3),
+    uniqueDates.length - 1
+  ];
+  const tickValues = indices.map((i) => uniqueDates[i]).filter(
+    (date) => date !== null && !isNaN(date.getTime())
+  );
+  return {
+    orientation: "bottom",
+    tickValues,
+    tickFormat: (value) => {
+      let date = null;
+      if (value instanceof Date) {
+        date = value;
+      } else if (typeof value === "string") {
+        const parsed = new Date(value);
+        if (!isNaN(parsed.getTime())) {
+          date = parsed;
+        }
+      }
+      if (date) {
+        return `${(date.getMonth() + 1).toString().padStart(2, "0")}/${date.getDate().toString().padStart(2, "0")}`;
+      }
+      return String(value || "");
+    },
+    tickLabelProps: () => ({
+      fontSize: 11,
+      textAnchor: "end",
+      angle: -90,
+      dx: 0,
+      dy: -5
+    })
+  };
+};
+var getDefaultChartMargins = (customMargin) => {
+  const defaultMargin = {
+    top: 15,
+    right: 20,
+    bottom: 100,
+    left: 50
+  };
+  return {
+    ...defaultMargin,
+    ...customMargin,
+    bottom: calculateBottomMargin(120)
+  };
+};
+
+// src/markdown-extensions/charts/BarChart.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var BarChart = (props) => {
+  const {
+    data,
+    currency,
+    showLegend = true,
+    withTooltips = true,
+    renderTooltip,
+    margin: defaultMargin,
+    mode = "time-comparison",
+    truncateLabels = true,
+    maxLabelLength = 15,
+    error,
+    ...restProps
+  } = props;
+  const truncateText = (text, maxLength) => {
+    if (!truncateLabels || text.length <= maxLength) {
+      return text;
+    }
+    return text.substring(0, maxLength - 3) + "...";
+  };
+  const calculateBarChartBottomMargin = () => {
+    if (mode === "item-comparison" && data && data.length > 0) {
+      let longestLabel = "";
+      data.forEach((series) => {
+        if (series?.data) {
+          series.data.forEach((item) => {
+            const label = item.label || "";
+            const truncated = truncateText(label, maxLabelLength);
+            if (truncated.length > longestLabel.length) {
+              longestLabel = truncated;
+            }
+          });
+        }
+      });
+      return calculateBottomMargin(80, 6, 25, longestLabel.length);
+    }
+    return calculateBottomMargin();
+  };
+  const margin = {
+    ...getDefaultChartMargins(defaultMargin),
+    bottom: calculateBarChartBottomMargin()
+  };
+  const getAxisConfig = () => {
+    if (mode === "item-comparison") {
+      return {
+        xScale: {
+          type: "band",
+          padding: 0.2
+        },
+        axis: {
+          x: {
+            orientation: "bottom",
+            tickFormat: (value) => truncateText(value, maxLabelLength),
+            tickLabelProps: {
+              fontSize: 11,
+              textAnchor: "end",
+              angle: -90,
+              dx: 0,
+              dy: -5
+            }
+          }
+        }
+      };
+    }
+    return {
+      xScale: { type: "time" },
+      axis: {
+        x: {
+          ...getTimeAxisConfig(data),
+          dy: -15
+        }
+      }
+    };
+  };
+  const axisConfig = getAxisConfig();
+  const chartProps = {
+    data,
+    withTooltips,
+    renderTooltip,
+    showLegend,
+    legendOrientation: "horizontal",
+    legendAlignmentHorizontal: "center",
+    legendAlignmentVertical: "bottom",
+    margin,
+    // TODO: Fix this inconsistency that seems to be in @automattic/charts
+    // Item-comparison mode requires axis config wrapped in 'options' prop
+    // Time-comparison mode requires axis config spread directly
+    ...mode === "item-comparison" ? { options: axisConfig } : axisConfig,
+    ...currency && { currency },
+    ...restProps
+  };
+  return /* @__PURE__ */ jsx3(BaseChart, { error, children: /* @__PURE__ */ jsx3(AutomatticBarChart, { ...chartProps }) });
+};
+
+// src/markdown-extensions/charts/LineChart.tsx
+import { LineChart as AutomatticLineChart } from "@automattic/charts";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var LineChart = (props) => {
+  const {
+    data,
+    currency,
+    showLegend = true,
+    withTooltips = true,
+    renderTooltip,
+    margin: defaultMargin,
+    withGradientFill = true,
+    error,
+    ...restProps
+  } = props;
+  const margin = {
+    ...getDefaultChartMargins(),
+    bottom: 80
+  };
+  const chartProps = {
+    data,
+    withTooltips,
+    renderTooltip,
+    showLegend,
+    withGradientFill,
+    withLegendGlyph: false,
+    legendOrientation: "horizontal",
+    legendAlignmentHorizontal: "center",
+    legendAlignmentVertical: "bottom",
+    margin,
+    options: {
+      xScale: {
+        type: "time"
+      },
+      axis: {
+        x: {
+          ...getTimeAxisConfig(data)
+        }
+      }
+    },
+    ...currency && { currency },
+    ...restProps
+  };
+  return /* @__PURE__ */ jsx4(BaseChart, { error, children: /* @__PURE__ */ jsx4(AutomatticLineChart, { ...chartProps }) });
+};
+
+// src/markdown-extensions/charts/ChartBlock.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { __, sprintf } from "@wordpress/i18n";
+
+// src/markdown-extensions/charts/ChartErrorBoundary.tsx
+import { Component } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ChartErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error,
+      errorInfo: null
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("Chart rendering error:", error);
+    console.error("Error info:", errorInfo);
+    if (this.props.chartData) {
+      console.error(
+        "Chart data that caused the error:",
+        this.props.chartData
+      );
+      try {
+        const parsed = JSON.parse(this.props.chartData);
+        console.error("Parsed chart data:", parsed);
+      } catch (parseError) {
+        console.error("Could not parse chart data as JSON");
+      }
+    }
+    this.setState({
+      errorInfo
+    });
+  }
+  render() {
+    if (this.state.hasError) {
+      const errorMessage = this.state.error?.message || "An error occurred while rendering the chart";
+      const errorDetails = [
+        "The chart could not be rendered due to an error.",
+        "The error has been logged to the console."
+      ];
+      return /* @__PURE__ */ jsx5(
+        ChartError,
+        {
+          message: errorMessage,
+          details: errorDetails.join("\n")
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+
+// src/markdown-extensions/charts/ChartBlock.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChartBlock = ({
+  data,
+  className = "",
+  config
+}) => {
+  const [error, setError] = useState(null);
+  const [chartData, setChartData] = useState(
+    null
+  );
+  const [containerWidth, setContainerWidth] = useState(300);
+  const resizeObserverRef = useRef(null);
+  const customRenderTooltip = useCallback(
+    (params) => {
+      const { tooltipData } = params;
+      const nearestDatum = tooltipData?.nearestDatum?.datum;
+      if (!nearestDatum) {
+        return null;
+      }
+      const formatValue = (value) => {
+        if (chartData?.currency) {
+          const { symbol, symbolPosition } = chartData.currency;
+          let formattedValue;
+          if (value >= 1e6) {
+            formattedValue = `${(value / 1e6).toFixed(
+              1
+            )}M`;
+          } else if (value >= 1e3) {
+            formattedValue = `${(value / 1e3).toFixed(1)}K`;
+          } else {
+            formattedValue = value.toLocaleString();
+          }
+          return symbolPosition === "right" ? `${formattedValue}${symbol}` : `${symbol}${formattedValue}`;
+        }
+        if (value >= 1e6) {
+          return `${(value / 1e6).toFixed(1)}M`;
+        } else if (value >= 1e3) {
+          return `${(value / 1e3).toFixed(1)}K`;
+        }
+        return value.toLocaleString();
+      };
+      const formatDate = (date) => {
+        const now = /* @__PURE__ */ new Date();
+        const diffInDays = Math.floor(
+          (now.getTime() - date.getTime()) / (1e3 * 60 * 60 * 24)
+        );
+        if (diffInDays === 0) {
+          return __("Today", "a8c-agenttic");
+        } else if (diffInDays === 1) {
+          return __("Yesterday", "a8c-agenttic");
+        } else if (diffInDays < 7) {
+          return sprintf(
+            /* translators: %d: number of days */
+            __("%d days ago", "a8c-agenttic"),
+            diffInDays
+          );
+        }
+        return date.toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "short",
+          day: "numeric"
+        });
+      };
+      const productName = nearestDatum.label;
+      const tooltipPoints = Object.entries(
+        tooltipData?.datumByKey || {}
+      ).map(([key, datumInfo]) => {
+        const datum = datumInfo.datum;
+        return {
+          key,
+          value: datum.value
+        };
+      }).sort((a, b) => b.value - a.value);
+      return /* @__PURE__ */ jsxs2("div", { children: [
+        productName && /* @__PURE__ */ jsx6(
+          "div",
+          {
+            style: {
+              fontSize: "12px",
+              fontWeight: "bold",
+              marginBottom: "4px",
+              color: "#1e1e1e",
+              borderBottom: "1px solid #eee",
+              paddingBottom: "2px"
+            },
+            children: productName
+          }
+        ),
+        nearestDatum.date && /* @__PURE__ */ jsx6(
+          "div",
+          {
+            style: {
+              fontSize: "10px",
+              opacity: 0.8,
+              marginBottom: "4px"
+            },
+            children: formatDate(nearestDatum.date)
+          }
+        ),
+        tooltipPoints.map((point) => /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: { marginBottom: "2px" },
+            children: [
+              /* @__PURE__ */ jsxs2("strong", { children: [
+                point.key,
+                ":"
+              ] }),
+              " ",
+              formatValue(point.value)
+            ]
+          },
+          point.key
+        ))
+      ] });
+    },
+    [chartData?.currency]
+  );
+  useEffect(() => {
+    setError(null);
+    setChartData(null);
+    if (!data || typeof data !== "string") {
+      setError({
+        message: __("Invalid chart data provided", "a8c-agenttic"),
+        details: `Input data: ${data}`
+      });
+      return;
+    }
+    try {
+      const rawData = JSON.parse(data.trim());
+      if (!rawData.chartType) {
+        setError({
+          message: __(
+            "Chart data must include chartType",
+            "a8c-agenttic"
+          ),
+          details: __("Available types: line, bar", "a8c-agenttic")
+        });
+        return;
+      }
+      if (!rawData.data || !Array.isArray(rawData.data)) {
+        setError({
+          message: __(
+            "Chart data must include a data array",
+            "a8c-agenttic"
+          ),
+          details: `Input data: ${data}`
+        });
+        return;
+      }
+      if (rawData.data.length === 0) {
+        setError({
+          message: __(
+            "No data points found for chart",
+            "a8c-agenttic"
+          ),
+          details: `Input data: ${data}`
+        });
+        return;
+      }
+      const processedDataSeries = rawData.data.map((series) => ({
+        ...series,
+        data: series.data.map((point) => {
+          if (point.date) {
+            const parsedDate = new Date(point.date);
+            if (isNaN(parsedDate.getTime())) {
+              console.warn(
+                `Invalid date string: "${point.date}" in series "${series.label}"`
+              );
+              return {
+                label: point.label,
+                value: point.value,
+                date: void 0
+              };
+            }
+            return {
+              label: point.label,
+              value: point.value,
+              date: parsedDate
+            };
+          }
+          return {
+            label: point.label,
+            value: point.value,
+            date: void 0
+          };
+        })
+      }));
+      const processedData = {
+        chartType: rawData.chartType,
+        title: rawData.title,
+        data: processedDataSeries,
+        currency: rawData.currency,
+        mode: rawData.mode || "time-comparison"
+      };
+      setChartData(processedData);
+    } catch (parseError) {
+      setError({
+        message: __(
+          "Failed to parse chart data as JSON",
+          "a8c-agenttic"
+        ),
+        details: `Input data: ${data}`
+      });
+    }
+  }, [data]);
+  const setContainerRef = useCallback((node) => {
+    if (resizeObserverRef.current) {
+      resizeObserverRef.current.disconnect();
+    }
+    if (node) {
+      const { width } = node.getBoundingClientRect();
+      const contentWidth = Math.max(280, width - 4);
+      setContainerWidth(contentWidth);
+      resizeObserverRef.current = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const resizedWidth = entry.contentRect.width;
+          const resizedContentWidth = Math.max(
+            280,
+            resizedWidth - 4
+          );
+          setContainerWidth(resizedContentWidth);
+        }
+      });
+      resizeObserverRef.current.observe(node);
+    }
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+    };
+  }, []);
+  if (error) {
+    return /* @__PURE__ */ jsx6(ChartError, { message: error.message, details: error.details });
+  }
+  if (!chartData) {
+    return /* @__PURE__ */ jsx6(
+      ChartError,
+      {
+        message: __("No chart data available", "a8c-agenttic")
+      }
+    );
+  }
+  const hasMultipleSeries = chartData.data.length > 1;
+  const shouldShowLegend = hasMultipleSeries;
+  const chartWidth = containerWidth;
+  const commonProps = {
+    data: chartData.data,
+    currency: chartData.currency,
+    showLegend: shouldShowLegend,
+    withTooltips: true,
+    renderTooltip: customRenderTooltip,
+    error: null,
+    maxWidth: chartWidth,
+    aspectRatio: 1.2,
+    resizeDebounceTime: 300
+  };
+  const renderChart = () => {
+    switch (chartData.chartType) {
+      case "line":
+        return /* @__PURE__ */ jsx6(LineChart, { ...commonProps });
+      case "bar":
+        return /* @__PURE__ */ jsx6(
+          BarChart,
+          {
+            ...commonProps,
+            mode: chartData.mode
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsx6(
+          ChartError,
+          {
+            message: sprintf(
+              /* translators: %s: chart type name */
+              __("Unsupported chart type: %s", "a8c-agenttic"),
+              chartData.chartType
+            )
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ jsx6(ChartErrorBoundary, { chartData: data, children: /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: setContainerRef,
+      className: `chart-block ${className}`,
+      children: [
+        chartData.title && /* @__PURE__ */ jsx6("h3", { className: "chart-block-title", children: chartData.title }),
+        /* @__PURE__ */ jsx6("div", { className: "chart-container", children: renderChart() })
+      ]
+    }
+  ) });
+};
+
+// src/markdown-extensions/charts/index.ts
+import React2 from "react";
+function createChartBlock(config) {
+  return function ChartCodeBlock(props) {
+    const { children, className, ...rest } = props;
+    const isChartBlock = className?.includes("language-chart");
+    if (!isChartBlock) {
+      return React2.createElement(
+        "code",
+        { className, ...rest },
+        children
+      );
+    }
+    const chartData = typeof children === "string" ? children : "";
+    return React2.createElement(ChartBlock, {
+      data: chartData,
+      className: "markdown-chart",
+      config
+    });
+  };
+}
+
+export {
+  BarChart,
+  LineChart,
+  ChartBlock,
+  createChartBlock
+};