@erxes/ui 0.0.0-stage → 3.2.20-1

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

@@ -0,0 +1,177 @@
+import type {
+  ChartVizPayload,
+  ChartVizTransformOperation,
+} from '../types/chatVizTypes';
+import { getChartVizTrendDomain } from './chartVizPresentation';
+
+const MAX_ABS_RENDERED_VALUE = 1_000_000_000_000_000;
+
+export type ChartVizControlValues = Record<string, number>;
+
+/** Returns the persisted baseline values for every declarative control. */
+export function getDefaultChartVizControlValues(
+  payload: ChartVizPayload,
+): ChartVizControlValues {
+  return Object.fromEntries(
+    (payload.controls ?? []).map(({ key, defaultValue }) => [
+      key,
+      defaultValue,
+    ]),
+  );
+}
+
+/** Applies one allow-listed operation to a numeric point. */
+const calculateValue = ({
+  baseValue,
+  controlValue,
+  index,
+  operation,
+}: {
+  baseValue: number;
+  controlValue: number;
+  index: number;
+  operation: ChartVizTransformOperation;
+}): number => {
+  switch (operation) {
+    case 'add':
+      return baseValue + controlValue;
+    case 'percent':
+      return baseValue * (1 + controlValue / 100);
+    case 'compoundPercent':
+      return baseValue * Math.pow(1 + controlValue / 100, index + 1);
+    default:
+      return baseValue;
+  }
+};
+
+/** Keeps transformed values finite and within the renderer's numeric budget. */
+const boundRenderedValue = (value: number, fallback: number): number => {
+  if (!Number.isFinite(value)) return fallback;
+  return Math.min(
+    MAX_ABS_RENDERED_VALUE,
+    Math.max(-MAX_ABS_RENDERED_VALUE, value),
+  );
+};
+
+/**
+ * Applies the small allow-listed transform language to an already sanitized
+ * payload. This is deliberately an interpreter over data: it never evaluates
+ * model-authored JavaScript, expressions, HTML, or property paths.
+ */
+export function applyChartVizTransforms(
+  payload: ChartVizPayload,
+  values: ChartVizControlValues,
+): ChartVizPayload {
+  if (!payload.transforms?.length) return payload;
+
+  const data = payload.data.map((point, index) => {
+    const next = { ...point };
+
+    for (const transform of payload.transforms ?? []) {
+      const current = next[transform.seriesKey];
+      const controlValue = values[transform.controlKey];
+
+      if (
+        typeof current !== 'number' ||
+        !Number.isFinite(current) ||
+        typeof controlValue !== 'number' ||
+        !Number.isFinite(controlValue)
+      ) {
+        continue;
+      }
+
+      next[transform.seriesKey] = boundRenderedValue(
+        calculateValue({
+          baseValue: current,
+          controlValue,
+          index,
+          operation: transform.operation,
+        }),
+        current,
+      );
+    }
+
+    return next;
+  });
+
+  return { ...payload, data };
+}
+
+/** Returns control values that can define an interactive domain extreme. */
+const getControlCandidates = ({
+  min,
+  max,
+  defaultValue,
+}: {
+  min: number;
+  max: number;
+  defaultValue: number;
+}): number[] =>
+  Array.from(
+    new Set([
+      min,
+      max,
+      defaultValue,
+      ...(min <= 0 && max >= 0 ? [0] : []),
+      ...(min <= -100 && max >= -100 ? [-100] : []),
+    ]),
+  );
+
+/**
+ * Calculates one axis domain across every meaningful control extreme. Keeping
+ * this domain stable while sliders move makes the geometry visibly move;
+ * auto-scaling each new data set would leave the same-looking curve in place
+ * and change only its tick labels.
+ */
+export function getChartVizInteractiveDomain(
+  payload: ChartVizPayload,
+  { includeZero = false }: { includeZero?: boolean } = {},
+): [number, number] | undefined {
+  const controls = payload.controls ?? [];
+
+  if (!controls.length || !payload.transforms?.length) return undefined;
+
+  const candidates = controls.map(getControlCandidates);
+  const seriesKeys = new Set(payload.series.map(({ key }) => key));
+  let dataMin = Number.POSITIVE_INFINITY;
+  let dataMax = Number.NEGATIVE_INFINITY;
+
+  /** Visits the bounded cartesian product of meaningful control values. */
+  const visit = (index: number, values: ChartVizControlValues) => {
+    if (index < controls.length) {
+      const control = controls[index];
+      if (!control) return;
+
+      for (const value of candidates[index] ?? []) {
+        visit(index + 1, { ...values, [control.key]: value });
+      }
+      return;
+    }
+
+    const scenario = applyChartVizTransforms(payload, values);
+    for (const point of scenario.data) {
+      for (const key of seriesKeys) {
+        const value = point[key];
+        if (typeof value !== 'number' || !Number.isFinite(value)) continue;
+        dataMin = Math.min(dataMin, value);
+        dataMax = Math.max(dataMax, value);
+      }
+    }
+  };
+
+  visit(0, getDefaultChartVizControlValues(payload));
+
+  if (!Number.isFinite(dataMin) || !Number.isFinite(dataMax)) return undefined;
+
+  if (!includeZero) return getChartVizTrendDomain([dataMin, dataMax]);
+
+  dataMin = Math.min(0, dataMin);
+  dataMax = Math.max(0, dataMax);
+  const span = dataMax - dataMin;
+  const padding = Math.max(span * 0.08, 1);
+
+  return [
+    dataMin < 0 ? dataMin - padding : 0,
+    dataMax > 0 ? dataMax + padding : 0,
+  ];
+}

package/src/modules/chat-viz/utils/chatVizInteractive.test.ts

@@ -0,0 +1,152 @@
+import type { ChartVizPayload } from '../types/chatVizTypes';
+import {
+  applyChartVizTransforms,
+  getChartVizInteractiveDomain,
+  getDefaultChartVizControlValues,
+} from './chartVizTransforms';
+import { sanitizeChartVizPayload } from './chatVizSanitize';
+import {
+  formatChartVizAxisValue,
+  getChartVizTrendDomain,
+  getDefaultChartVizColor,
+} from './chartVizPresentation';
+
+const interactivePayload: ChartVizPayload = {
+  type: 'chart-viz',
+  chartType: 'line',
+  title: 'Revenue forecast',
+  data: [
+    { label: 'May', revenue: 100 },
+    { label: 'June', revenue: 100 },
+  ],
+  series: [{ key: 'revenue', label: 'Revenue' }],
+  controls: [
+    {
+      type: 'slider',
+      key: 'growth',
+      label: 'Growth adjustment',
+      min: -20,
+      max: 20,
+      step: 1,
+      defaultValue: 10,
+      valueSuffix: '%',
+    },
+  ],
+  transforms: [
+    {
+      controlKey: 'growth',
+      seriesKey: 'revenue',
+      operation: 'compoundPercent',
+    },
+  ],
+  sentAt: '2026-08-31T00:00:00.000Z',
+};
+
+describe('interactive chart-viz payloads', () => {
+  it('sanitizes controls and admits only allow-listed, referential transforms', () => {
+    const sanitized = sanitizeChartVizPayload({
+      ...interactivePayload,
+      controls: [
+        {
+          ...interactivePayload.controls?.[0],
+          min: 20,
+          max: -20,
+          step: 100,
+          defaultValue: 99,
+          valuePrefix: '1234567890123456789012345',
+        },
+        {
+          type: 'slider',
+          key: 'unused',
+          label: 'Unused control',
+          min: 0,
+          max: 10,
+          step: 1,
+          defaultValue: 5,
+        },
+      ],
+      transforms: [
+        ...(interactivePayload.transforms ?? []),
+        {
+          controlKey: 'growth',
+          seriesKey: 'revenue',
+          operation: 'javascript',
+        },
+        {
+          controlKey: 'missing',
+          seriesKey: 'revenue',
+          operation: 'percent',
+        },
+      ],
+    });
+
+    expect(sanitized?.controls).toEqual([
+      expect.objectContaining({
+        key: 'growth',
+        min: -20,
+        max: 20,
+        step: 40,
+        defaultValue: 20,
+        valuePrefix: '12345678901234567890',
+      }),
+    ]);
+    expect(sanitized?.transforms).toEqual(interactivePayload.transforms);
+  });
+
+  it('uses valid theme colors and pads a constant trend into view', () => {
+    expect(getDefaultChartVizColor(0)).toBe('var(--chart-1)');
+    expect(getDefaultChartVizColor(5)).toBe('var(--chart-1)');
+    expect(getChartVizTrendDomain([100, 100])).toEqual([92, 108]);
+    expect(formatChartVizAxisValue(132_300)).toBe('132.3K');
+  });
+
+  it('recalculates data through the bounded transform interpreter', () => {
+    const defaults = getDefaultChartVizControlValues(interactivePayload);
+    const adjusted = applyChartVizTransforms(interactivePayload, defaults);
+
+    expect(defaults).toEqual({ growth: 10 });
+    expect(adjusted.data[0]?.revenue).toBeCloseTo(110);
+    expect(adjusted.data[1]?.revenue).toBeCloseTo(121);
+    expect(interactivePayload.data).toEqual([
+      { label: 'May', revenue: 100 },
+      { label: 'June', revenue: 100 },
+    ]);
+  });
+
+  it('freezes one axis domain across every control extreme', () => {
+    // Extremes: growth -20% compounds down to 64, +20% up to 144.
+    const domain = getChartVizInteractiveDomain(interactivePayload);
+
+    expect(domain?.[0]).toBeCloseTo(57.6, 5);
+    expect(domain?.[1]).toBeCloseTo(150.4, 5);
+
+    // Every scenario the slider can reach must fit inside the frozen domain,
+    // so moving the slider moves the geometry instead of relabeling ticks.
+    for (const growth of [-20, 0, 10, 20]) {
+      const scenario = applyChartVizTransforms(interactivePayload, { growth });
+      const values = scenario.data.map((d) => d.revenue as number);
+      expect(Math.min(...values)).toBeGreaterThanOrEqual(domain?.[0] ?? 0);
+      expect(Math.max(...values)).toBeLessThanOrEqual(domain?.[1] ?? 0);
+    }
+  });
+
+  it('keeps interactive bar charts zero-based', () => {
+    const domain = getChartVizInteractiveDomain(interactivePayload, {
+      includeZero: true,
+    });
+
+    expect(domain?.[0]).toBe(0);
+    expect(domain?.[1]).toBeCloseTo(155.52, 2);
+  });
+
+  it('leaves non-interactive payloads on the per-chart default domain', () => {
+    const staticPayload = { ...interactivePayload };
+    delete staticPayload.controls;
+    delete staticPayload.transforms;
+
+    expect(getChartVizInteractiveDomain(staticPayload)).toBeUndefined();
+    expect(
+      getChartVizInteractiveDomain(staticPayload, { includeZero: true }),
+    ).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,276 @@
+import type {
+  ChartVizDataPoint,
+  ChartVizPayload,
+  ChartVizSeriesConfig,
+  ChartVizSliderControl,
+  ChartVizTransform,
+  ChartVizTransformOperation,
+  ChartVizType,
+} from '../types/chatVizTypes';
+
+const VALID_CHART_TYPES = new Set<ChartVizType>(['bar', 'line', 'pie', 'area']);
+const MAX_DATA_POINTS = 100;
+const MAX_SERIES = 10;
+const MAX_CONTROLS = 4;
+const MAX_TRANSFORMS = MAX_SERIES * MAX_CONTROLS;
+const MAX_TEXT_LEN = 200;
+const MAX_CONTROL_DECORATION_LEN = 20;
+const MAX_CONTROL_ABS_VALUE = 1_000_000;
+const VALID_TRANSFORM_OPERATIONS = new Set<ChartVizTransformOperation>([
+  'add',
+  'percent',
+  'compoundPercent',
+]);
+
+/**
+ * Allow only the three CSS color notations that carry no executable content:
+ *   #rrggbb / #rgb / #rrggbbaa
+ *   rgb(r, g, b)
+ *   hsl(h, s%, l%)
+ * This blocks url(), expression(), var() with attacker-controlled names, etc.
+ * Used to sanitize values before they flow into ChartStyle's
+ * dangerouslySetInnerHTML (which generates CSS custom properties).
+ */
+const SAFE_CSS_COLOR_RE =
+  /^(#[0-9a-fA-F]{3,8}|rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)|hsl\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\))$/;
+
+/**
+ * CSS variable key restriction: letter-start, alphanumeric + dash + underscore,
+ * max 50 chars. Prevents CSS injection like `key}` breaking out of the
+ * generated CSS block in ChartStyle.
+ */
+const SAFE_CSS_VAR_KEY_RE = /^(?!label$)[a-zA-Z][a-zA-Z0-9_-]{0,49}$/;
+
+/** Strict ISO 8601 UTC timestamp */
+const ISO_DATE_RE =
+  /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})$/;
+
+function sanitizeText(input: unknown): string {
+  if (typeof input !== 'string') return '';
+  // React renders text nodes safely (no innerHTML), but we still strip to
+  // printable ASCII range and cap length for defense-in-depth.
+  return input.slice(0, MAX_TEXT_LEN);
+}
+
+function sanitizeColor(color: unknown): string | undefined {
+  if (typeof color !== 'string') return undefined;
+  const t = color.trim();
+  return SAFE_CSS_COLOR_RE.test(t) ? t : undefined;
+}
+
+function sanitizeCssKey(key: unknown): string | undefined {
+  if (typeof key !== 'string') return undefined;
+  return SAFE_CSS_VAR_KEY_RE.test(key) ? key : undefined;
+}
+
+function sanitizeNumber(value: unknown): number {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : 0;
+}
+
+/** Admits finite control values and clamps them to the wire-format budget. */
+function sanitizeControlNumber(value: unknown): number | null {
+  if (typeof value !== 'number' || !Number.isFinite(value)) return null;
+  return Math.min(
+    MAX_CONTROL_ABS_VALUE,
+    Math.max(-MAX_CONTROL_ABS_VALUE, value),
+  );
+}
+
+/** Bounds display-only slider prefixes and suffixes. */
+function sanitizeDecoration(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined;
+  return value.slice(0, MAX_CONTROL_DECORATION_LEN);
+}
+
+function sanitizeSentAt(value: unknown): string {
+  if (typeof value === 'string' && ISO_DATE_RE.test(value)) return value;
+  return new Date().toISOString();
+}
+
+/**
+ * Validate and sanitize an untrusted chat message payload before rendering.
+ * Returns null if the payload is not a valid chart-viz message.
+ *
+ * XSS: all user-visible string fields are length-capped; CSS color and key
+ * values are regex-validated before being used in CSS custom properties.
+ *
+ * IDOR: no data source IDs are present — only inlined data. Authorization
+ * must be enforced server-side before this payload is stored or delivered.
+ */
+export function sanitizeChartVizPayload(raw: unknown): ChartVizPayload | null {
+  if (!raw || typeof raw !== 'object') return null;
+  const p = raw as Record<string, unknown>;
+
+  if (p['type'] !== 'chart-viz') return null;
+
+  const chartType = p['chartType'];
+  if (!VALID_CHART_TYPES.has(chartType as ChartVizType)) return null;
+
+  const rawSeries = Array.isArray(p['series'])
+    ? (p['series'] as unknown[]).slice(0, MAX_SERIES)
+    : [];
+
+  const series: ChartVizSeriesConfig[] = rawSeries.flatMap((s) => {
+    if (!s || typeof s !== 'object') return [];
+    const item = s as Record<string, unknown>;
+    const key = sanitizeCssKey(item['key']);
+    if (!key) return [];
+    return [
+      {
+        key,
+        label: sanitizeText(item['label']),
+        color: sanitizeColor(item['color']),
+      },
+    ];
+  });
+
+  const validKeys = new Set(series.map((s) => s.key));
+  const controlKeys = new Set<string>();
+  const rawControls = Array.isArray(p['controls'])
+    ? (p['controls'] as unknown[]).slice(0, MAX_CONTROLS)
+    : [];
+  const controls: ChartVizSliderControl[] = rawControls.flatMap((raw) => {
+    if (!raw || typeof raw !== 'object') return [];
+    const item = raw as Record<string, unknown>;
+    const key = sanitizeCssKey(item['key']);
+    const label = sanitizeText(item['label']);
+    const description = sanitizeText(item['description']);
+    const valuePrefix = sanitizeDecoration(item['valuePrefix']);
+    const valueSuffix = sanitizeDecoration(item['valueSuffix']);
+    const rawMin = sanitizeControlNumber(item['min']);
+    const rawMax = sanitizeControlNumber(item['max']);
+    const rawStep = sanitizeControlNumber(item['step']);
+    const rawDefault = sanitizeControlNumber(item['defaultValue']);
+
+    if (
+      item['type'] !== 'slider' ||
+      !key ||
+      !label ||
+      controlKeys.has(key) ||
+      rawMin === null ||
+      rawMax === null ||
+      rawStep === null ||
+      rawStep <= 0 ||
+      rawDefault === null
+    ) {
+      return [];
+    }
+
+    const min = Math.min(rawMin, rawMax);
+    const max = Math.max(rawMin, rawMax);
+
+    if (min === max) return [];
+
+    controlKeys.add(key);
+
+    return [
+      {
+        type: 'slider' as const,
+        key,
+        label,
+        ...(description ? { description } : {}),
+        min,
+        max,
+        step: Math.min(rawStep, max - min),
+        defaultValue: Math.min(max, Math.max(min, rawDefault)),
+        ...(valuePrefix !== undefined ? { valuePrefix } : {}),
+        ...(valueSuffix !== undefined ? { valueSuffix } : {}),
+      },
+    ];
+  });
+
+  const seenTransforms = new Set<string>();
+  const rawTransforms = Array.isArray(p['transforms'])
+    ? (p['transforms'] as unknown[]).slice(0, MAX_TRANSFORMS)
+    : [];
+  const transforms: ChartVizTransform[] = rawTransforms.flatMap((raw) => {
+    if (!raw || typeof raw !== 'object') return [];
+    const item = raw as Record<string, unknown>;
+    const controlKey = sanitizeCssKey(item['controlKey']);
+    const seriesKey = sanitizeCssKey(item['seriesKey']);
+    const operation = item['operation'] as ChartVizTransformOperation;
+    const identity = `${controlKey}:${seriesKey}`;
+
+    if (
+      !controlKey ||
+      !controlKeys.has(controlKey) ||
+      !seriesKey ||
+      !validKeys.has(seriesKey) ||
+      !VALID_TRANSFORM_OPERATIONS.has(operation) ||
+      seenTransforms.has(identity)
+    ) {
+      return [];
+    }
+
+    seenTransforms.add(identity);
+    return [{ controlKey, seriesKey, operation }];
+  });
+  const activeControlKeys = new Set(
+    transforms.map(({ controlKey }) => controlKey),
+  );
+  const activeControls = controls.filter(({ key }) =>
+    activeControlKeys.has(key),
+  );
+
+  const rawData = Array.isArray(p['data'])
+    ? (p['data'] as unknown[]).slice(0, MAX_DATA_POINTS)
+    : [];
+
+  const data: ChartVizDataPoint[] = rawData.map((d) => {
+    if (!d || typeof d !== 'object') return { label: '' };
+    const item = d as Record<string, unknown>;
+    const point: ChartVizDataPoint = { label: sanitizeText(item['label']) };
+    for (const key of validKeys) {
+      point[key] = sanitizeNumber(item[key]);
+    }
+    return point;
+  });
+
+  return {
+    type: 'chart-viz',
+    chartType: chartType as ChartVizType,
+    title: sanitizeText(p['title']),
+    description:
+      p['description'] != null ? sanitizeText(p['description']) : undefined,
+    data,
+    series,
+    ...(activeControls.length ? { controls: activeControls } : {}),
+    ...(transforms.length ? { transforms } : {}),
+    sentAt: sanitizeSentAt(p['sentAt']),
+  };
+}
+
+/**
+ * Sanitize then serialize a chart payload for embedding in a chat message.
+ * Returns null if the payload fails validation.
+ *
+ * Always go through this function when sending — never serialize raw
+ * user-supplied objects directly.
+ */
+export function serializeChartVizPayload(
+  input: Omit<ChartVizPayload, 'type' | 'sentAt'>,
+): string | null {
+  const full: ChartVizPayload = {
+    ...input,
+    type: 'chart-viz',
+    sentAt: new Date().toISOString(),
+  };
+  const sanitized = sanitizeChartVizPayload(full);
+  if (!sanitized) return null;
+  return JSON.stringify(sanitized);
+}
+
+/**
+ * Parse and sanitize a raw JSON string received from a chat message.
+ * Returns null on invalid JSON or invalid payload shape.
+ */
+export function parseChartVizMessage(raw: string): ChartVizPayload | null {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  return sanitizeChartVizPayload(parsed);
+}

package/src/modules/display/components/CurrencyDisplay.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { CURRENCY_CODES } from 'erxes-ui/constants/CurrencyCodes';
+import { FieldCurrencyValue } from 'erxes-ui/types/Displays';
+import { isDefined, isUndefinedOrNull } from 'erxes-ui/utils';
+import { formatAmount } from 'erxes-ui/utils/format';
+import { EllipsisDisplay } from './EllipsisDisplay';
+import { cn } from 'erxes-ui/lib';
+import { CurrencyCode } from 'erxes-ui/types';
+
+type CurrencyFormatedDisplayProps = {
+  currencyValue?: FieldCurrencyValue | null;
+  kind?: 'short' | 'finance'
+};
+
+export const CurrencyFormatedDisplay = ({
+  currencyValue,
+  kind
+}: CurrencyFormatedDisplayProps) => {
+  const shouldDisplayCurrency = isDefined(currencyValue?.currencyCode);
+
+  const CurrencyIcon = isDefined(currencyValue?.currencyCode)
+    ? CURRENCY_CODES[currencyValue?.currencyCode]?.Icon
+    : null;
+
+  const amountToDisplay = isUndefinedOrNull(currencyValue?.amountMicros)
+    ? null
+    : currencyValue?.amountMicros * 1000000 / 1000000;
+
+  if (!shouldDisplayCurrency) {
+    return <EllipsisDisplay>{0}</EllipsisDisplay>;
+  }
+
+  return (
+    <EllipsisDisplay>
+      {isDefined(CurrencyIcon) && amountToDisplay !== null && (
+        <CurrencyIcon className="size-4 text-muted-foreground" />
+      )}
+      {amountToDisplay !== null ? formatAmount(amountToDisplay, kind) : ''}
+    </EllipsisDisplay>
+  );
+};
+
+export interface CurrencyDisplayProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Currency code to display */
+  code?: CurrencyCode;
+  variant?: 'icon' | 'label' | 'code';
+}
+
+export const CurrencyDisplay = React.forwardRef<
+  HTMLDivElement,
+  CurrencyDisplayProps
+>(({ code, variant = 'label', className, ...props }, ref) => {
+  const currency = code ? CURRENCY_CODES[code] : undefined;
+  const CurrencyIcon = currency?.Icon;
+
+  if (variant === 'icon' && CurrencyIcon) {
+    return <CurrencyIcon className="size-4" />;
+  }
+
+  if (variant === 'code' || variant === 'icon') {
+    return <span className="text-muted-foreground mr-auto">{code}</span>;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn('flex items-center gap-2', className)}
+      {...props}
+    >
+      {CurrencyIcon && <CurrencyIcon className="size-4" />}
+      <span className="mr-auto">{currency?.label}</span>
+    </div>
+  );
+});
+
+CurrencyDisplay.displayName = 'CurrencyDisplay';

package/src/modules/display/components/EllipsisDisplay.tsx

@@ -0,0 +1,18 @@
+import { cn } from 'erxes-ui/lib';
+import React from 'react';
+
+export const EllipsisDisplay = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'flex items-center w-full max-w-full overflow-hidden text-ellipsis whitespace-nowrap',
+      className,
+    )}
+    {...props}
+  />
+));
+
+EllipsisDisplay.displayName = 'EllipsisDisplay';