@tuturuuu/ui 0.32.0 → 0.33.0

package/src/components/ui/chat/ai-message-render-utils.ts

@@ -5,7 +5,25 @@ export function normalizeAiMessageParts(
   textFallback?: string
 ) {
   const fallbackText = textFallback?.trim();
-  const normalizedParts = Array.isArray(parts) ? parts : [];
+  const normalizedParts = Array.isArray(parts)
+    ? parts.map((part) => {
+        if (
+          part.type === 'text' &&
+          typeof part.textStart === 'number' &&
+          typeof part.textLength === 'number' &&
+          typeof textFallback === 'string'
+        ) {
+          return {
+            type: 'text',
+            text: textFallback.slice(
+              part.textStart,
+              part.textStart + part.textLength
+            ),
+          };
+        }
+        return part;
+      })
+    : [];
   const hasTextPart = normalizedParts.some(
     (part) => readString(part.type) === 'text' && readString(part.text)
   );

package/src/components/ui/commercial-comparison-style.ts

@@ -0,0 +1,104 @@
+import {
+  BookOpen,
+  Boxes,
+  BrainCircuit,
+  BriefcaseBusiness,
+  Building2,
+  CalendarDays,
+  ChartNoAxesCombined,
+  CircleDollarSign,
+  Code2,
+  Crown,
+  Database,
+  FileText,
+  Folder,
+  Gauge,
+  GraduationCap,
+  LayoutGrid,
+  Link,
+  ListTodo,
+  Mail,
+  MessageSquare,
+  Network,
+  Rocket,
+  Server,
+  ShoppingBag,
+  Sparkles,
+  Timer,
+  Users,
+  Video,
+  Wrench,
+} from '@tuturuuu/icons/lucide';
+import type { ComparisonTier } from '@tuturuuu/utils/commercial-comparison';
+
+interface ComparisonTierStyle {
+  Icon: typeof Rocket;
+  color: string;
+  surface: string;
+  column: string;
+}
+
+export const comparisonTierStyle = {
+  free: {
+    Icon: Rocket,
+    color: 'text-dynamic-green',
+    surface: 'border-dynamic-green/25 bg-dynamic-green/10',
+    column: 'bg-dynamic-green/[0.025]',
+  },
+  plus: {
+    Icon: Sparkles,
+    color: 'text-dynamic-blue',
+    surface: 'border-dynamic-blue/25 bg-dynamic-blue/10',
+    column: 'bg-dynamic-blue/[0.035]',
+  },
+  pro: {
+    Icon: Crown,
+    color: 'text-dynamic-purple',
+    surface: 'border-dynamic-purple/25 bg-dynamic-purple/10',
+    column: 'bg-dynamic-purple/[0.035]',
+  },
+  enterprise: {
+    Icon: Building2,
+    color: 'text-dynamic-orange',
+    surface: 'border-dynamic-orange/25 bg-dynamic-orange/10',
+    column: 'bg-dynamic-orange/[0.025]',
+  },
+} satisfies Record<ComparisonTier, ComparisonTierStyle>;
+
+const appIcons: Record<string, typeof LayoutGrid> = {
+  capacity: Gauge,
+  platform: LayoutGrid,
+  tasks: ListTodo,
+  calendar: CalendarDays,
+  drive: Folder,
+  ai: Sparkles,
+  meet: Video,
+  finance: CircleDollarSign,
+  contacts: Users,
+  inventory: Boxes,
+  forms: FileText,
+  chat: MessageSquare,
+  track: Timer,
+  mail: Mail,
+  learn: BookOpen,
+  teach: GraduationCap,
+  rewise: GraduationCap,
+  mind: BrainCircuit,
+  hive: Network,
+  cms: FileText,
+  storefront: ShoppingBag,
+  pay: CircleDollarSign,
+  git: Code2,
+  tools: Wrench,
+  shortener: Link,
+  nova: ChartNoAxesCombined,
+  colab: Users,
+  infrastructure: Server,
+  database: Database,
+  external: BriefcaseBusiness,
+};
+export function comparisonAppIcon(app: string) {
+  return appIcons[app] ?? LayoutGrid;
+}
+export const comparisonFocus =
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background';

package/src/components/ui/commercial-comparison-table.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { Layers3 } from '@tuturuuu/icons/lucide';
+import {
+  COMPARISON_TIERS,
+  type ComparisonFeature,
+  type ComparisonTier,
+} from '@tuturuuu/utils/commercial-comparison';
+import type { ComparisonCopy } from './commercial-comparison';
+import {
+  comparisonAppIcon,
+  comparisonFocus,
+  comparisonTierStyle,
+} from './commercial-comparison-style';
+import { ComparisonValue } from './comparison-value';
+
+export function ComparisonTable({
+  copy,
+  visible,
+  tiers,
+  appIds,
+  details,
+  valueLabel,
+}: {
+  copy: ComparisonCopy;
+  visible: ComparisonFeature[];
+  tiers: ComparisonTier[];
+  appIds: string[];
+  details: boolean;
+  valueLabel: (value: string) => string;
+}) {
+  return (
+    <section
+      className={`max-h-[72vh] overflow-auto overscroll-contain rounded-2xl border border-foreground/10 bg-background/20 ${comparisonFocus}`}
+      // biome-ignore lint/a11y/noNoninteractiveTabindex: Keyboard users must scroll the comparison region.
+      tabIndex={0}
+      aria-label={copy.title}
+    >
+      <table className="w-full border-separate border-spacing-0 text-left text-sm">
+        <caption className="sr-only">{copy.description}</caption>
+        <thead>
+          <tr>
+            <th
+              scope="col"
+              className="sticky top-0 left-0 z-30 w-40 min-w-40 border-foreground/10 border-b bg-background px-4 py-5 sm:w-[40%] sm:min-w-64 sm:px-6"
+            >
+              <span className="flex items-center gap-2 font-mono-ui text-[0.65rem] text-foreground/50 uppercase tracking-[0.12em]">
+                <Layers3 aria-hidden className="size-3.5 shrink-0" />
+                {copy.feature}
+              </span>
+            </th>
+            {tiers.map((tier) => {
+              const { Icon, color, surface } = comparisonTierStyle[tier];
+              return (
+                <th
+                  key={tier}
+                  scope="col"
+                  className="sticky top-0 z-20 min-w-24 border-foreground/10 border-b bg-background px-3 py-4 text-center sm:min-w-32"
+                >
+                  <span
+                    className={`mx-auto mb-2 flex size-8 items-center justify-center rounded-lg border ${surface} ${color}`}
+                  >
+                    <Icon aria-hidden className="size-4" />
+                  </span>
+                  <span className="font-display font-semibold text-sm tracking-tight">
+                    {copy.tierNames[tier]}
+                  </span>
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        {appIds.map((appId) => {
+          const rows = visible.filter((row) => row.app === appId);
+          if (!rows.length) return null;
+          const Icon = comparisonAppIcon(appId);
+          const tone =
+            comparisonTierStyle[
+              COMPARISON_TIERS[appIds.indexOf(appId) % 4] ?? 'plus'
+            ];
+          return (
+            <tbody key={appId}>
+              <tr>
+                <th
+                  scope="rowgroup"
+                  colSpan={tiers.length + 1}
+                  className="border-foreground/10 border-b bg-background px-4 py-4 sm:px-6"
+                >
+                  <span className="sticky left-4 inline-flex items-center gap-3 sm:left-6">
+                    <span
+                      className={`flex size-8 items-center justify-center rounded-lg border ${tone.surface} ${tone.color}`}
+                    >
+                      <Icon aria-hidden className="size-4" />
+                    </span>
+                    <span className="font-display font-semibold tracking-tight">
+                      {copy.apps[appId]}
+                    </span>
+                    <span
+                      className="rounded-md bg-foreground/5 px-1.5 py-0.5 font-mono-ui text-[0.6rem] text-foreground/40 tabular-nums"
+                      aria-hidden
+                    >
+                      {rows.length.toString().padStart(2, '0')}
+                    </span>
+                  </span>
+                </th>
+              </tr>
+              {rows.map((row) => (
+                <tr key={row.id} className="group">
+                  <th
+                    scope="row"
+                    className="sticky left-0 z-10 max-w-80 border-foreground/[0.06] border-b bg-background px-4 py-3 font-normal transition-colors group-hover:bg-muted sm:px-6"
+                  >
+                    <div className="flex items-start justify-between gap-2">
+                      <span className="py-1.5 text-foreground/75 text-xs leading-relaxed sm:text-sm">
+                        {copy.features[row.id]}
+                      </span>
+                      <ComparisonValue
+                        value={row.pending ? 'pending' : 'info'}
+                        label={
+                          row.pending
+                            ? copy.pending
+                            : (copy.features[row.id] ?? row.id)
+                        }
+                        context={copy.details}
+                        explanation={copy.explanations[row.detail]}
+                      />
+                    </div>
+                    {details && (
+                      <p className="mt-1 max-w-lg text-foreground/50 text-xs leading-relaxed">
+                        {copy.explanations[row.detail]}
+                      </p>
+                    )}
+                  </th>
+                  {tiers.map((tier) => {
+                    const value =
+                      row.values[COMPARISON_TIERS.indexOf(tier)] ?? 'excluded';
+                    return (
+                      <td
+                        key={tier}
+                        className={`border-foreground/[0.06] border-b px-3 py-3 text-center align-middle transition-colors group-hover:bg-foreground/[0.04] ${comparisonTierStyle[tier].column}`}
+                      >
+                        <ComparisonValue
+                          value={value}
+                          label={valueLabel(value)}
+                          context={`${copy.tierNames[tier]}: ${copy.features[row.id]}`}
+                          explanation={copy.explanations[row.detail]}
+                        />
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          );
+        })}
+      </table>
+    </section>
+  );
+}

package/src/components/ui/commercial-comparison-toolbar.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import {
+  ArrowRightLeft,
+  Check,
+  ChevronDown,
+  CircleHelp,
+  Layers3,
+  LayoutGrid,
+  RotateCcw,
+  Search,
+  Server,
+} from '@tuturuuu/icons/lucide';
+import {
+  COMPARISON_TIERS,
+  type ComparisonTier,
+} from '@tuturuuu/utils/commercial-comparison';
+import type { ComponentType } from 'react';
+import type { ComparisonCopy } from './commercial-comparison';
+import {
+  comparisonFocus,
+  comparisonTierStyle,
+} from './commercial-comparison-style';
+
+interface Props {
+  copy: ComparisonCopy;
+  query: string;
+  app: string;
+  category: string;
+  differences: boolean;
+  internal: boolean;
+  details: boolean;
+  tiers: ComparisonTier[];
+  appIds: string[];
+  onQuery: (value: string) => void;
+  onApp: (value: string) => void;
+  onCategory: (value: string) => void;
+  onDifferences: (value: boolean) => void;
+  onInternal: (value: boolean) => void;
+  onDetails: (value: boolean) => void;
+  onTier: (tier: ComparisonTier) => void;
+  onReset: () => void;
+}
+
+function FilterToggle({
+  label,
+  checked,
+  onChange,
+  Icon,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+  Icon: ComponentType<{ className?: string; 'aria-hidden'?: boolean }>;
+}) {
+  return (
+    <label
+      className={`relative inline-flex cursor-pointer items-center gap-2 rounded-full border px-3 py-2 text-xs transition-colors has-focus-visible:ring-2 has-focus-visible:ring-ring ${checked ? 'border-dynamic-blue/25 bg-dynamic-blue/10 text-foreground' : 'border-transparent text-foreground/60 hover:bg-foreground/5 hover:text-foreground'}`}
+    >
+      <input
+        type="checkbox"
+        className="sr-only"
+        checked={checked}
+        onChange={(event) => onChange(event.target.checked)}
+      />
+      <Icon aria-hidden className="size-3.5 shrink-0" />
+      {label}
+      {checked && <Check aria-hidden className="size-3" />}
+    </label>
+  );
+}
+
+export function ComparisonToolbar(p: Props) {
+  const selectClass = `h-12 w-full appearance-none rounded-xl border border-foreground/10 bg-transparent pr-9 pl-10 text-sm text-foreground transition-colors hover:border-foreground/25 ${comparisonFocus}`;
+  return (
+    <div className="relative rounded-2xl border border-foreground/10 bg-foreground/[0.025] p-3 sm:p-5">
+      <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-[1.7fr_1fr_1fr]">
+        <label className="relative block sm:col-span-2 lg:col-span-1">
+          <span className="sr-only">{p.copy.search}</span>
+          <Search
+            aria-hidden
+            className="pointer-events-none absolute top-4 left-4 size-4 text-foreground/45"
+          />
+          <input
+            type="search"
+            className={`h-12 w-full rounded-xl border border-foreground/10 bg-background/40 pr-4 pl-11 text-sm placeholder:text-foreground/45 ${comparisonFocus}`}
+            placeholder={p.copy.search}
+            value={p.query}
+            onChange={(event) => p.onQuery(event.target.value)}
+          />
+        </label>
+        <label className="relative block">
+          <span className="sr-only">{p.copy.app}</span>
+          <LayoutGrid
+            aria-hidden
+            className="pointer-events-none absolute top-4 left-3.5 size-4 text-dynamic-blue"
+          />
+          <select
+            className={selectClass}
+            value={p.app}
+            onChange={(event) => p.onApp(event.target.value)}
+          >
+            <option value="all" className="bg-background">
+              {p.copy.allApps}
+            </option>
+            {p.appIds.map((key) => (
+              <option className="bg-background" key={key} value={key}>
+                {p.copy.apps[key]}
+              </option>
+            ))}
+          </select>
+          <ChevronDown
+            aria-hidden
+            className="pointer-events-none absolute top-4 right-3 size-4 text-foreground/40"
+          />
+        </label>
+        <label className="relative block">
+          <span className="sr-only">{p.copy.category}</span>
+          <Layers3
+            aria-hidden
+            className="pointer-events-none absolute top-4 left-3.5 size-4 text-dynamic-purple"
+          />
+          <select
+            className={selectClass}
+            value={p.category}
+            onChange={(event) => p.onCategory(event.target.value)}
+          >
+            <option value="all" className="bg-background">
+              {p.copy.allCategories}
+            </option>
+            {Object.entries(p.copy.categories)
+              .filter(([key]) => p.internal || key !== 'internal')
+              .map(([key, label]) => (
+                <option className="bg-background" key={key} value={key}>
+                  {label}
+                </option>
+              ))}
+          </select>
+          <ChevronDown
+            aria-hidden
+            className="pointer-events-none absolute top-4 right-3 size-4 text-foreground/40"
+          />
+        </label>
+      </div>
+      <div className="mt-3 flex flex-wrap items-center gap-1">
+        <FilterToggle
+          label={p.copy.differences}
+          checked={p.differences}
+          onChange={p.onDifferences}
+          Icon={ArrowRightLeft}
+        />
+        <FilterToggle
+          label={p.copy.details}
+          checked={p.details}
+          onChange={p.onDetails}
+          Icon={CircleHelp}
+        />
+        <FilterToggle
+          label={p.copy.internal}
+          checked={p.internal}
+          onChange={p.onInternal}
+          Icon={Server}
+        />
+        <button
+          type="button"
+          className={`ml-auto inline-flex items-center gap-2 rounded-full px-3 py-2 text-foreground/50 text-xs transition-colors hover:bg-foreground/5 hover:text-foreground ${comparisonFocus}`}
+          onClick={p.onReset}
+        >
+          <RotateCcw aria-hidden className="size-3.5" />
+          {p.copy.reset}
+        </button>
+      </div>
+      <fieldset className="mt-5 grid grid-cols-2 gap-2 border-foreground/10 border-t pt-4 sm:grid-cols-4">
+        <legend className="pr-3 font-mono-ui text-[0.65rem] text-foreground/45 uppercase tracking-[0.15em]">
+          {p.copy.tiers}
+        </legend>
+        {COMPARISON_TIERS.map((tier) => {
+          const { Icon, color, surface } = comparisonTierStyle[tier];
+          const selected = p.tiers.includes(tier);
+          return (
+            <button
+              type="button"
+              key={tier}
+              aria-pressed={selected}
+              disabled={p.tiers.length === 1 && selected}
+              onClick={() => p.onTier(tier)}
+              className={`flex min-h-12 items-center gap-2.5 rounded-xl border px-3 py-2.5 text-left transition-colors disabled:cursor-default sm:px-4 ${selected ? surface : 'border-foreground/10 bg-transparent opacity-50 hover:opacity-100'} ${comparisonFocus}`}
+            >
+              <Icon aria-hidden className={`size-4 shrink-0 ${color}`} />
+              <span className="min-w-0 flex-1 font-medium text-sm">
+                {p.copy.tierNames[tier]}
+              </span>
+              <span
+                aria-hidden
+                className={`flex size-4 shrink-0 items-center justify-center rounded-full border ${selected ? `${color} border-current` : 'border-foreground/20'}`}
+              >
+                {selected && <Check className="size-2.5" />}
+              </span>
+            </button>
+          );
+        })}
+      </fieldset>
+    </div>
+  );
+}

package/src/components/ui/commercial-comparison.test.tsx

@@ -0,0 +1,86 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { COMPARISON_FEATURES } from '@tuturuuu/utils/commercial-comparison';
+import { describe, expect, it } from 'vitest';
+import en from '../../../../../apps/web/messages/en.json';
+import vi from '../../../../../apps/web/messages/vi.json';
+import { CommercialComparison } from './commercial-comparison';
+
+describe('commercial comparison', () => {
+  it('filters by app and resets an empty search', () => {
+    render(<CommercialComparison copy={en.commercialComparison} />);
+    fireEvent.change(screen.getByLabelText('App'), {
+      target: { value: 'drive' },
+    });
+    expect(
+      screen.getByText(
+        `${COMPARISON_FEATURES.filter((row) => row.app === 'drive' && row.category !== 'internal').length} matching features`
+      )
+    ).toBeTruthy();
+    fireEvent.change(
+      screen.getByPlaceholderText(en.commercialComparison.search),
+      { target: { value: 'no-matching-feature' } }
+    );
+    expect(screen.getByText(en.commercialComparison.empty)).toBeTruthy();
+    fireEvent.click(
+      screen.getAllByRole('button', { name: 'Reset filters' })[0]!
+    );
+    expect(
+      screen.getByText(
+        `${COMPARISON_FEATURES.filter((row) => row.category !== 'internal').length} matching features`
+      )
+    ).toBeTruthy();
+  });
+  it('resets the explanation toggle with the other filters', () => {
+    render(<CommercialComparison copy={en.commercialComparison} />);
+    const details = screen.getByRole('checkbox', {
+      name: en.commercialComparison.details,
+    });
+    fireEvent.click(details);
+    expect(details).toBeChecked();
+    fireEvent.click(
+      screen.getByRole('button', { name: en.commercialComparison.reset })
+    );
+    expect(details).not.toBeChecked();
+  });
+  it('searches displayed capacity values', () => {
+    render(<CommercialComparison copy={en.commercialComparison} />);
+    fireEvent.change(
+      screen.getByPlaceholderText(en.commercialComparison.search),
+      { target: { value: '20 GiB' } }
+    );
+    expect(screen.queryByText(en.commercialComparison.empty)).toBeNull();
+  });
+  it('compares only selected tiers and keeps at least one visible', () => {
+    render(<CommercialComparison copy={en.commercialComparison} />);
+    const controls = screen.getByRole('group', { name: 'Tiers to compare' });
+    for (const name of ['Free', 'Plus', 'Enterprise'])
+      fireEvent.click(within(controls).getByRole('button', { name }));
+    expect(
+      within(controls).getByRole('button', { name: 'Pro' })
+    ).toBeDisabled();
+    expect(screen.getAllByRole('columnheader')).toHaveLength(2);
+  });
+  it('exposes explanations on touch and searches Vietnamese without accents', () => {
+    render(<CommercialComparison copy={vi.commercialComparison} />);
+    fireEvent.change(
+      screen.getByPlaceholderText(vi.commercialComparison.search),
+      { target: { value: 'tin dung AI' } }
+    );
+    expect(screen.getByText('Tín dụng AI hằng tháng')).toBeTruthy();
+    fireEvent.click(screen.getByLabelText(vi.commercialComparison.details));
+    expect(
+      screen.getAllByText(vi.commercialComparison.explanations.aiAllowance)
+        .length
+    ).toBeGreaterThan(0);
+  });
+  it('matches Vietnamese crossed d in unaccented search', () => {
+    render(<CommercialComparison copy={vi.commercialComparison} />);
+    fireEvent.change(
+      screen.getByPlaceholderText(vi.commercialComparison.search),
+      { target: { value: 'dong thoi' } }
+    );
+    expect(
+      screen.getByText(vi.commercialComparison.features.board)
+    ).toBeTruthy();
+  });
+});