@erxes/ui 0.0.0-stage → 3.2.20-1

package/src/modules/chat-viz/components/ChatVizCartesianDecorations.tsx

@@ -0,0 +1,42 @@
+import { Fragment } from 'react';
+import { CartesianGrid, XAxis, YAxis, type YAxisProps } from 'recharts';
+
+import {
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from 'erxes-ui/components/charts';
+import { formatChartVizAxisValue } from '../utils/chartVizPresentation';
+
+interface Props {
+  domain?: YAxisProps['domain'];
+}
+
+/** Shared axes, grid, tooltip, and legend for cartesian chat charts. */
+export function ChatVizCartesianDecorations({ domain }: Readonly<Props>) {
+  return (
+    <Fragment>
+      <CartesianGrid vertical={false} />
+      <XAxis dataKey="label" tickLine={false} axisLine={false} tickMargin={8} />
+      <YAxis
+        type="number"
+        domain={domain}
+        tickLine={false}
+        axisLine={false}
+        tickMargin={6}
+        tickFormatter={formatChartVizAxisValue}
+        width={52}
+      />
+      <ChartTooltip content={<ChartTooltipContent />} />
+      <ChartLegend
+        content={(props) => (
+          <ChartLegendContent
+            payload={props.payload ?? []}
+            verticalAlign={props.verticalAlign}
+          />
+        )}
+      />
+    </Fragment>
+  );
+}

package/src/modules/chat-viz/components/ChatVizLine.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Line, LineChart } from 'recharts';
+
+import { ChartContainer, type ChartConfig } from 'erxes-ui/components/charts';
+import { useIsClient } from '../hooks/useIsClient';
+import type { ChartVizPayload } from '../types/chatVizTypes';
+import {
+  getChartVizTrendDomain,
+  getDefaultChartVizColor,
+} from '../utils/chartVizPresentation';
+import { ChatVizCartesianDecorations } from './ChatVizCartesianDecorations';
+
+interface Props {
+  payload: ChartVizPayload;
+  className?: string;
+  /** Frozen axis domain for interactive charts; falls back to a padded fit. */
+  domain?: [number, number];
+}
+
+export function ChatVizLine({ payload, className, domain }: Readonly<Props>) {
+  const isClient = useIsClient();
+
+  const config = React.useMemo<ChartConfig>(
+    () =>
+      Object.fromEntries(
+        payload.series.map((s, i) => [
+          s.key,
+          { label: s.label, color: s.color ?? getDefaultChartVizColor(i) },
+        ]),
+      ),
+    [payload.series],
+  );
+
+  if (!isClient) return <ChartSkeleton />;
+
+  return (
+    <ChartContainer config={config} className={className}>
+      <LineChart
+        data={payload.data}
+        margin={{ top: 8, right: 12, left: 4, bottom: 0 }}
+      >
+        <ChatVizCartesianDecorations
+          domain={domain ?? getChartVizTrendDomain}
+        />
+        {payload.series.map((s) => (
+          <Line
+            key={s.key}
+            dataKey={s.key}
+            type="monotone"
+            stroke={`var(--color-${s.key})`}
+            strokeWidth={2}
+            dot={payload.data.length <= 20}
+          />
+        ))}
+      </LineChart>
+    </ChartContainer>
+  );
+}
+
+function ChartSkeleton() {
+  return (
+    <div
+      className="animate-pulse rounded-md bg-muted"
+      style={{ width: '100%', aspectRatio: '16/9' }}
+      aria-hidden
+    />
+  );
+}

package/src/modules/chat-viz/components/ChatVizMessage.tsx

@@ -0,0 +1,210 @@
+import * as React from 'react';
+
+import { Slider } from 'erxes-ui/components/slider';
+import { cn } from 'erxes-ui/lib/utils';
+
+import {
+  applyChartVizTransforms,
+  getChartVizInteractiveDomain,
+  getDefaultChartVizControlValues,
+  type ChartVizControlValues,
+} from '../utils/chartVizTransforms';
+import { sanitizeChartVizPayload } from '../utils/chatVizSanitize';
+import { ChatVizArea } from './ChatVizArea';
+import { ChatVizBar } from './ChatVizBar';
+import { ChatVizLine } from './ChatVizLine';
+import { ChatVizPie } from './ChatVizPie';
+import type {
+  ChartVizPayload,
+  ChartVizSliderControl,
+} from '../types/chatVizTypes';
+
+interface Props {
+  /**
+   * Raw parsed value from a chat message (e.g. JSON.parse of message.content).
+   * Will be fully sanitized before any rendering occurs.
+   *
+   * XSS: all fields are validated/escaped inside sanitizeChartVizPayload.
+   * SSR: chart components are client-only — a skeleton is shown until mount.
+   * IDOR: this component renders only data embedded in the payload; it never
+   *   fetches data by ID. Server-side authorization must gate what data may
+   *   be embedded when the message is created.
+   */
+  rawPayload: unknown;
+  className?: string;
+}
+
+export function ChatVizMessage({ rawPayload, className }: Readonly<Props>) {
+  const payload = React.useMemo(
+    () => sanitizeChartVizPayload(rawPayload),
+    [rawPayload],
+  );
+
+  if (!payload) return null;
+
+  return <SanitizedChatVizMessage payload={payload} className={className} />;
+}
+
+/** Owns local controls for one payload that has crossed the sanitizer boundary. */
+function SanitizedChatVizMessage({
+  payload,
+  className,
+}: Readonly<{
+  payload: ChartVizPayload;
+  className?: string;
+}>) {
+  const defaultValues = React.useMemo(
+    () => getDefaultChartVizControlValues(payload),
+    [payload],
+  );
+  const [controlValues, setControlValues] =
+    React.useState<ChartVizControlValues>(defaultValues);
+
+  React.useEffect(() => {
+    setControlValues(defaultValues);
+  }, [defaultValues]);
+
+  const renderedPayload = React.useMemo(
+    () => applyChartVizTransforms(payload, controlValues),
+    [controlValues, payload],
+  );
+
+  // One axis domain covering every control extreme, computed from the
+  // BASELINE payload. Freezing this while sliders move makes the chart
+  // geometry visibly move; scaling per render would only relabel the ticks.
+  const interactiveDomain = React.useMemo(
+    () => getChartVizInteractiveDomain(payload),
+    [payload],
+  );
+  const interactiveBarDomain = React.useMemo(
+    () => getChartVizInteractiveDomain(payload, { includeZero: true }),
+    [payload],
+  );
+  const controls = payload.controls ?? [];
+
+  return (
+    <figure
+      className={cn(
+        'rounded-xl border bg-card p-4 shadow-sm space-y-3 max-w-lg w-full',
+        className,
+      )}
+      aria-label={payload.title}
+    >
+      <figcaption className="space-y-0.5">
+        <h4 className="font-semibold text-sm leading-tight">{payload.title}</h4>
+        {payload.description && (
+          <p className="text-muted-foreground text-xs">{payload.description}</p>
+        )}
+      </figcaption>
+      {controls.length > 0 && (
+        <ChartVizControls
+          controls={controls}
+          values={controlValues}
+          onChange={(key, value) =>
+            setControlValues((current) => ({ ...current, [key]: value }))
+          }
+        />
+      )}
+      <ChartRouter
+        payload={renderedPayload}
+        domain={interactiveDomain}
+        barDomain={interactiveBarDomain}
+      />
+    </figure>
+  );
+}
+
+const VALUE_FORMATTER = new Intl.NumberFormat('en-US', {
+  maximumFractionDigits: 6,
+});
+
+/** Renders the bounded slider controls admitted by the payload sanitizer. */
+function ChartVizControls({
+  controls,
+  values,
+  onChange,
+}: Readonly<{
+  controls: ChartVizSliderControl[];
+  values: ChartVizControlValues;
+  onChange: (key: string, value: number) => void;
+}>) {
+  return (
+    <div
+      className="space-y-3 rounded-lg border bg-muted/30 p-3"
+      aria-label="What-if controls"
+    >
+      {controls.map((control) => {
+        const value = values[control.key] ?? control.defaultValue;
+
+        return (
+          <div key={control.key} className="space-y-2">
+            <div className="flex items-start justify-between gap-3 text-xs">
+              <div>
+                <p className="font-medium text-foreground">{control.label}</p>
+                {control.description && (
+                  <p className="mt-0.5 text-muted-foreground">
+                    {control.description}
+                  </p>
+                )}
+              </div>
+              <output
+                className="shrink-0 rounded-md border bg-background px-2 py-0.5 font-mono font-medium tabular-nums"
+                aria-live="polite"
+              >
+                {control.valuePrefix}
+                {VALUE_FORMATTER.format(value)}
+                {control.valueSuffix}
+              </output>
+            </div>
+            <Slider
+              value={[value]}
+              min={control.min}
+              max={control.max}
+              step={control.step}
+              aria-label={control.label}
+              onValueChange={([nextValue]) => {
+                if (nextValue !== undefined) onChange(control.key, nextValue);
+              }}
+            />
+            <div className="flex justify-between font-mono text-[10px] text-muted-foreground">
+              <span>
+                {control.valuePrefix}
+                {VALUE_FORMATTER.format(control.min)}
+                {control.valueSuffix}
+              </span>
+              <span>
+                {control.valuePrefix}
+                {VALUE_FORMATTER.format(control.max)}
+                {control.valueSuffix}
+              </span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Selects the trusted renderer registered for the sanitized chart type. */
+function ChartRouter({
+  payload,
+  domain,
+  barDomain,
+}: Readonly<{
+  payload: ChartVizPayload;
+  domain?: [number, number];
+  barDomain?: [number, number];
+}>) {
+  switch (payload.chartType) {
+    case 'bar':
+      return <ChatVizBar payload={payload} domain={barDomain} />;
+    case 'line':
+      return <ChatVizLine payload={payload} domain={domain} />;
+    case 'area':
+      return <ChatVizArea payload={payload} domain={domain} />;
+    case 'pie':
+      return <ChatVizPie payload={payload} />;
+    default:
+      return null;
+  }
+}

package/src/modules/chat-viz/components/ChatVizPie.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { Cell, Pie, PieChart } from 'recharts';
+
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from 'erxes-ui/components/charts';
+import { useIsClient } from '../hooks/useIsClient';
+import type { ChartVizPayload } from '../types/chatVizTypes';
+import { getDefaultChartVizColor } from '../utils/chartVizPresentation';
+
+interface Props {
+  payload: ChartVizPayload;
+  className?: string;
+}
+
+/**
+ * Pie chart variant.
+ *
+ * For pie charts, each data row is a slice. The first series key is used as the
+ * value field; `label` is used as the slice name. Additional series are ignored.
+ */
+export function ChatVizPie({ payload, className }: Readonly<Props>) {
+  const isClient = useIsClient();
+
+  const valueKey = payload.series[0]?.key ?? 'value';
+
+  const config = React.useMemo<ChartConfig>(
+    () =>
+      Object.fromEntries(
+        payload.data.map((d) => [
+          d.label,
+          {
+            // Labels are untrusted text, so they must never become CSS custom
+            // property names in ChartStyle. Slice colors are applied directly
+            // to the sanitized Recharts Cell below.
+            label: d.label,
+          },
+        ]),
+      ),
+    [payload.data],
+  );
+  const cells = React.useMemo(() => {
+    const occurrences = new Map<string, number>();
+    const seriesColor = payload.series[0]?.color;
+
+    return payload.data.map((point, paletteIndex) => {
+      const identity = JSON.stringify([point.label, point[valueKey]]);
+      const occurrence = occurrences.get(identity) ?? 0;
+      occurrences.set(identity, occurrence + 1);
+
+      return {
+        key: JSON.stringify([identity, occurrence]),
+        fill: seriesColor ?? getDefaultChartVizColor(paletteIndex),
+      };
+    });
+  }, [payload.data, payload.series, valueKey]);
+
+  if (!isClient) return <ChartSkeleton />;
+
+  return (
+    <ChartContainer config={config} className={className}>
+      <PieChart>
+        <ChartTooltip content={<ChartTooltipContent nameKey="label" />} />
+        <Pie
+          data={payload.data}
+          dataKey={valueKey}
+          nameKey="label"
+          cx="50%"
+          cy="50%"
+          outerRadius="80%"
+          strokeWidth={2}
+        >
+          {cells.map((cell) => (
+            <Cell key={cell.key} fill={cell.fill} />
+          ))}
+        </Pie>
+        <ChartLegend
+          content={(props) => (
+            <ChartLegendContent
+              payload={props.payload ?? []}
+              verticalAlign={props.verticalAlign}
+              nameKey="label"
+            />
+          )}
+        />
+      </PieChart>
+    </ChartContainer>
+  );
+}
+
+function ChartSkeleton() {
+  return (
+    <div
+      className="animate-pulse rounded-md bg-muted"
+      style={{ width: '100%', aspectRatio: '1/1', maxWidth: 300 }}
+      aria-hidden
+    />
+  );
+}

package/src/modules/chat-viz/components/ChatVizSendButton.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import { IconChartBar } from '@tabler/icons-react';
+
+import { Button } from 'erxes-ui/components/button';
+
+import { serializeChartVizPayload } from '../utils/chatVizSanitize';
+import type { ChartVizPayload } from '../types/chatVizTypes';
+
+interface Props {
+  /**
+   * The chart data to send. `type` and `sentAt` are set automatically.
+   *
+   * Security: the payload is run through serializeChartVizPayload (sanitize
+   * then JSON.stringify) before being handed to onSend. Never bypass this by
+   * passing a pre-serialized string directly to onSend.
+   */
+  payload: Omit<ChartVizPayload, 'type' | 'sentAt'>;
+  /** Receives the sanitized JSON string to embed in a chat message */
+  onSend: (serialized: string) => void;
+  disabled?: boolean;
+  label?: string;
+}
+
+export function ChatVizSendButton({
+  payload,
+  onSend,
+  disabled,
+  label = 'Send chart',
+}: Props) {
+  const handleClick = () => {
+    const serialized = serializeChartVizPayload(payload);
+    if (serialized) onSend(serialized);
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      onClick={handleClick}
+      disabled={disabled}
+      aria-label={label}
+    >
+      <IconChartBar className="size-4 mr-1.5" aria-hidden />
+      {label}
+    </Button>
+  );
+}

package/src/modules/chat-viz/hooks/useChatVizSend.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import { serializeChartVizPayload } from '../utils/chatVizSanitize';
+import type { ChartVizPayload } from '../types/chatVizTypes';
+
+type SendFn = (serialized: string) => void | Promise<void>;
+
+/**
+ * Returns a stable callback that sanitizes + serializes a chart payload and
+ * hands the resulting JSON string to `onSend` (e.g. a chat mutation).
+ *
+ * Security: always go through serializeChartVizPayload — callers must not
+ * bypass this by pre-serializing the payload themselves.
+ */
+export function useChatVizSend(onSend: SendFn) {
+  return useCallback(
+    (payload: Omit<ChartVizPayload, 'type' | 'sentAt'>) => {
+      const serialized = serializeChartVizPayload(payload);
+      if (serialized) return onSend(serialized);
+    },
+    [onSend],
+  );
+}

package/src/modules/chat-viz/hooks/useIsClient.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Returns true only after the component has mounted on the client.
+ *
+ * SSR guard: Recharts accesses window/document at render time and will throw
+ * during server-side rendering or static generation. Wrap Recharts trees in
+ * a check of this hook before rendering them.
+ */
+export function useIsClient(): boolean {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  return isClient;
+}

package/src/modules/chat-viz/index.ts

@@ -0,0 +1,31 @@
+export { ChatVizMessage } from './components/ChatVizMessage';
+export { ChatVizSendButton } from './components/ChatVizSendButton';
+export { ChatVizBar } from './components/ChatVizBar';
+export { ChatVizLine } from './components/ChatVizLine';
+export { ChatVizArea } from './components/ChatVizArea';
+export { ChatVizPie } from './components/ChatVizPie';
+
+export { useChatVizSend } from './hooks/useChatVizSend';
+export { useIsClient } from './hooks/useIsClient';
+
+export {
+  sanitizeChartVizPayload,
+  serializeChartVizPayload,
+  parseChartVizMessage,
+} from './utils/chatVizSanitize';
+export {
+  applyChartVizTransforms,
+  getChartVizInteractiveDomain,
+  getDefaultChartVizControlValues,
+} from './utils/chartVizTransforms';
+
+export type {
+  ChartVizType,
+  ChartVizDataPoint,
+  ChartVizSeriesConfig,
+  ChartVizSliderControl,
+  ChartVizTransformOperation,
+  ChartVizTransform,
+  ChartVizPayload,
+} from './types/chatVizTypes';
+export type { ChartVizControlValues } from './utils/chartVizTransforms';

package/src/modules/chat-viz/types/chatVizTypes.ts

@@ -0,0 +1,59 @@
+export type ChartVizType = 'bar' | 'line' | 'pie' | 'area';
+
+export type ChartVizDataPoint = {
+  label: string;
+  [key: string]: string | number;
+};
+
+export type ChartVizSeriesConfig = {
+  /** CSS-safe key — validated to /^[a-zA-Z][a-zA-Z0-9_-]{0,49}$/ */
+  key: string;
+  label: string;
+  /** Optional override; must be hex, rgb(), or hsl() — validated on ingest */
+  color?: string;
+};
+
+export type ChartVizSliderControl = {
+  type: 'slider';
+  /** Stable CSS-safe key referenced by transforms. */
+  key: string;
+  label: string;
+  description?: string;
+  min: number;
+  max: number;
+  step: number;
+  defaultValue: number;
+  /** Display-only decorations; they never participate in calculations. */
+  valuePrefix?: string;
+  valueSuffix?: string;
+};
+
+export type ChartVizTransformOperation = 'add' | 'percent' | 'compoundPercent';
+
+export type ChartVizTransform = {
+  controlKey: string;
+  seriesKey: string;
+  operation: ChartVizTransformOperation;
+};
+
+/**
+ * Wire format for a chart embedded in a chat message.
+ *
+ * IDOR contract: data is embedded directly — no IDs that trigger server
+ * fetches are stored here. Authorization for which data a user may see must
+ * be enforced on the server *before* this payload is created and stored in
+ * the message log.
+ */
+export type ChartVizPayload = {
+  type: 'chart-viz';
+  chartType: ChartVizType;
+  title: string;
+  description?: string;
+  data: ChartVizDataPoint[];
+  series: ChartVizSeriesConfig[];
+  /** Optional declarative interactivity. No model-authored code is executed. */
+  controls?: ChartVizSliderControl[];
+  transforms?: ChartVizTransform[];
+  /** ISO 8601 timestamp of when the sender composed the chart */
+  sentAt: string;
+};

package/src/modules/chat-viz/utils/chartVizPresentation.ts

@@ -0,0 +1,34 @@
+const CHART_VIZ_PALETTE_SIZE = 5;
+
+const AXIS_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+});
+
+/** Core theme chart values are complete CSS colors (currently oklch). */
+export const getDefaultChartVizColor = (index: number): string =>
+  `var(--chart-${(index % CHART_VIZ_PALETTE_SIZE) + 1})`;
+
+/** Formats numeric axis ticks compactly without changing chart values. */
+export const formatChartVizAxisValue = (value: number): string =>
+  AXIS_NUMBER_FORMATTER.format(value);
+
+/**
+ * Adds breathing room around line/area data, especially a constant series.
+ * Recharts' default zero-based domain pins a flat, large-value line against
+ * the top edge and makes it look missing.
+ */
+export const getChartVizTrendDomain = ([dataMin, dataMax]: [number, number]): [
+  number,
+  number,
+] => {
+  if (!Number.isFinite(dataMin) || !Number.isFinite(dataMax)) return [0, 1];
+
+  const span = dataMax - dataMin;
+  const padding =
+    span === 0
+      ? Math.max(Math.abs(dataMax) * 0.08, 1)
+      : Math.max(Math.abs(span) * 0.08, Number.EPSILON);
+
+  return [dataMin - padding, dataMax + padding];
+};