@open-mercato/ui 0.5.1-develop.3036.f02c281f23 → 0.5.1-develop.3045.b4b3320cc2

package/src/ai/records/ProductCard.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from 'react'
+import { Package, Tag as TagIcon } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { KeyValueList, RecordCardShell, TagRow, statusToTagVariant } from './RecordCardShell'
+import type { ProductRecordPayload } from './types'
+
+function formatPrice(price: string | number | null | undefined, currency?: string | null): string | null {
+  if (price === null || price === undefined || price === '') return null
+  const value = typeof price === 'number' ? price : Number(price)
+  if (!Number.isFinite(value)) {
+    return typeof price === 'string' ? price : null
+  }
+  const code = currency && currency.length === 3 ? currency.toUpperCase() : undefined
+  try {
+    if (code) {
+      return new Intl.NumberFormat(undefined, { style: 'currency', currency: code }).format(value)
+    }
+  } catch {
+    // fall through
+  }
+  const formatted = new Intl.NumberFormat().format(value)
+  return code ? `${formatted} ${code}` : formatted
+}
+
+export interface ProductCardProps extends ProductRecordPayload {}
+
+export function ProductCard(props: ProductCardProps) {
+  const t = useT()
+  const status = props.status
+    ? { label: props.status, variant: statusToTagVariant(props.status) }
+    : null
+  const price = formatPrice(props.price, props.currency)
+
+  const leading = props.imageUrl ? (
+    <div className="relative size-12 overflow-hidden rounded-md border border-border bg-muted">
+      <img
+        src={props.imageUrl}
+        alt={props.name}
+        className="size-full object-cover"
+        loading="lazy"
+      />
+    </div>
+  ) : (
+    <div className="flex size-12 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground" aria-hidden>
+      <Package className="size-5" />
+    </div>
+  )
+
+  const items = [
+    props.sku ? { label: t('ai_assistant.chat.records.fields.sku', 'SKU'), value: <span className="font-mono text-[11px]">{props.sku}</span> } : null,
+    price ? { label: t('ai_assistant.chat.records.fields.price', 'Price'), value: <span className="font-medium">{price}</span> } : null,
+    props.category ? { label: t('ai_assistant.chat.records.fields.category', 'Category'), value: props.category } : null,
+  ].filter(Boolean) as { label: string; value: React.ReactNode }[]
+
+  return (
+    <RecordCardShell
+      kindLabel={t('ai_assistant.chat.records.kinds.product', 'Product')}
+      kindIcon={<Package className="size-4" aria-hidden />}
+      leading={leading}
+      title={props.name}
+      subtitle={[props.sku, price].filter(Boolean).join(' • ') || undefined}
+      status={status}
+      href={props.href}
+      id={props.id}
+      className={props.className}
+      dataKind="product"
+    >
+      <div className="space-y-2">
+        <KeyValueList items={items} />
+        {props.description ? (
+          <p className="line-clamp-2 text-muted-foreground">{props.description}</p>
+        ) : null}
+        {props.tags && props.tags.length > 0 ? <TagRow tags={props.tags} /> : null}
+      </div>
+    </RecordCardShell>
+  )
+}
+
+export default ProductCard
+
+export { Package, TagIcon }

package/src/ai/records/RecordCard.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from 'react'
+import { ActivityCard } from './ActivityCard'
+import { CompanyCard } from './CompanyCard'
+import { DealCard } from './DealCard'
+import { PersonCard } from './PersonCard'
+import { ProductCard } from './ProductCard'
+import type { RecordCardPayload } from './types'
+
+export interface RecordCardProps {
+  data: RecordCardPayload
+}
+
+/**
+ * Renders an Open Mercato record card based on the `kind` discriminator.
+ * Used by the AI chat transcript to upgrade fenced ```open-mercato:<kind>```
+ * blocks into rich, interactive widgets.
+ */
+export function RecordCard({ data }: RecordCardProps) {
+  switch (data.kind) {
+    case 'deal':
+      return <DealCard {...data} />
+    case 'person':
+      return <PersonCard {...data} />
+    case 'company':
+      return <CompanyCard {...data} />
+    case 'product':
+      return <ProductCard {...data} />
+    case 'activity':
+      return <ActivityCard {...data} />
+    default:
+      return null
+  }
+}
+
+export default RecordCard

package/src/ai/records/RecordCardShell.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import * as React from 'react'
+import { ExternalLink } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Tag, type TagVariant } from '../../primitives/tag'
+
+export interface RecordCardShellProps {
+  kindLabel: string
+  kindIcon: React.ReactNode
+  title: string
+  subtitle?: React.ReactNode
+  status?: { label: string; variant: TagVariant } | null
+  href?: string
+  id?: string
+  leading?: React.ReactNode
+  children?: React.ReactNode
+  className?: string
+  dataKind?: string
+}
+
+export function RecordCardShell({
+  kindLabel,
+  kindIcon,
+  title,
+  subtitle,
+  status,
+  href,
+  id,
+  leading,
+  children,
+  className,
+  dataKind,
+}: RecordCardShellProps) {
+  const t = useT()
+  return (
+    <div
+      data-ai-record-card={dataKind ?? kindLabel.toLowerCase()}
+      data-record-id={id}
+      className={cn(
+        'group/record relative my-2 flex flex-col gap-3 rounded-lg border border-border bg-card p-3 text-card-foreground shadow-sm transition-colors',
+        href ? 'hover:border-primary/40 hover:bg-accent/40' : '',
+        className,
+      )}
+    >
+      <div className="flex items-start gap-3">
+        {leading ? (
+          <div className="shrink-0">{leading}</div>
+        ) : (
+          <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary" aria-hidden>
+            {kindIcon}
+          </div>
+        )}
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+              {kindLabel}
+            </span>
+            {status ? (
+              <Tag variant={status.variant} dot>
+                {status.label}
+              </Tag>
+            ) : null}
+          </div>
+          <div className="mt-0.5 flex items-start gap-2">
+            <h4 className="min-w-0 flex-1 truncate text-sm font-semibold leading-snug text-foreground">
+              {href ? (
+                <a
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="outline-none hover:underline focus-visible:underline"
+                >
+                  {title}
+                </a>
+              ) : (
+                title
+              )}
+            </h4>
+            {href ? (
+              <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="shrink-0 rounded-md p-1 text-muted-foreground hover:text-foreground"
+                aria-label={t('ai_assistant.chat.records.openRecord', 'Open record')}
+              >
+                <ExternalLink className="size-3.5" aria-hidden />
+              </a>
+            ) : null}
+          </div>
+          {subtitle ? (
+            <div className="mt-0.5 truncate text-xs text-muted-foreground">{subtitle}</div>
+          ) : null}
+        </div>
+      </div>
+      {children ? <div className="text-xs text-foreground">{children}</div> : null}
+    </div>
+  )
+}
+
+export interface KeyValueListItem {
+  label: string
+  value: React.ReactNode
+}
+
+export function KeyValueList({ items }: { items: KeyValueListItem[] }) {
+  if (items.length === 0) return null
+  return (
+    <dl className="grid grid-cols-[minmax(80px,auto)_1fr] gap-x-3 gap-y-1">
+      {items.map((item, idx) => (
+        <React.Fragment key={`${item.label}-${idx}`}>
+          <dt className="truncate text-[11px] uppercase tracking-wide text-muted-foreground">
+            {item.label}
+          </dt>
+          <dd className="min-w-0 truncate text-foreground">{item.value}</dd>
+        </React.Fragment>
+      ))}
+    </dl>
+  )
+}
+
+export function TagRow({ tags }: { tags: string[] }) {
+  if (tags.length === 0) return null
+  return (
+    <div className="flex flex-wrap gap-1">
+      {tags.map((tag, idx) => (
+        <Tag key={`${tag}-${idx}`} variant="brand">
+          {tag}
+        </Tag>
+      ))}
+    </div>
+  )
+}
+
+export function statusToTagVariant(status: string | null | undefined): TagVariant {
+  if (!status) return 'neutral'
+  const s = String(status).toLowerCase().trim()
+  if (
+    s === 'won' ||
+    s === 'win' ||
+    s === 'active' ||
+    s === 'completed' ||
+    s === 'done' ||
+    s === 'paid' ||
+    s === 'success' ||
+    s === 'closed_won' ||
+    s === 'closed-won'
+  )
+    return 'success'
+  if (
+    s === 'lost' ||
+    s === 'failed' ||
+    s === 'cancelled' ||
+    s === 'canceled' ||
+    s === 'overdue' ||
+    s === 'closed_lost' ||
+    s === 'closed-lost'
+  )
+    return 'error'
+  if (s === 'pending' || s === 'in_progress' || s === 'in progress' || s === 'open' || s === 'qualified')
+    return 'info'
+  if (s === 'at_risk' || s === 'at risk' || s === 'review' || s === 'follow_up')
+    return 'warning'
+  if (s === 'draft' || s === 'archived' || s === 'inactive')
+    return 'neutral'
+  return 'info'
+}

package/src/ai/records/index.ts

@@ -0,0 +1,30 @@
+export { RecordCard, type RecordCardProps } from './RecordCard'
+export {
+  registerRecordCardUiParts,
+  RECORD_CARD_COMPONENT_IDS,
+  type RecordCardComponentId,
+} from './registry'
+export { DealCard, type DealCardProps } from './DealCard'
+export { PersonCard, type PersonCardProps } from './PersonCard'
+export { CompanyCard, type CompanyCardProps } from './CompanyCard'
+export { ProductCard, type ProductCardProps } from './ProductCard'
+export { ActivityCard, type ActivityCardProps } from './ActivityCard'
+export {
+  RecordCardShell,
+  KeyValueList,
+  TagRow,
+  statusToTagVariant,
+  type RecordCardShellProps,
+  type KeyValueListItem,
+} from './RecordCardShell'
+export type {
+  RecordCardKind,
+  RecordCardPayload,
+  RecordCardBaseProps,
+  DealRecordPayload,
+  PersonRecordPayload,
+  CompanyRecordPayload,
+  ProductRecordPayload,
+  ActivityRecordPayload,
+  StatusToTag,
+} from './types'

package/src/ai/records/registry.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from 'react'
+import {
+  defaultAiUiPartRegistry,
+  type AiUiPartProps,
+} from '../ui-part-registry'
+import { ActivityCard } from './ActivityCard'
+import { CompanyCard } from './CompanyCard'
+import { DealCard } from './DealCard'
+import { PersonCard } from './PersonCard'
+import { ProductCard } from './ProductCard'
+import type {
+  ActivityRecordPayload,
+  CompanyRecordPayload,
+  DealRecordPayload,
+  PersonRecordPayload,
+  ProductRecordPayload,
+} from './types'
+
+/**
+ * Stable component ids the AI runtime can emit through the typed UI-parts
+ * protocol. Each id renders the same record-card component used by the
+ * inline fenced-block renderer, so a host can opt into either path without
+ * duplicating UI code.
+ */
+export const RECORD_CARD_COMPONENT_IDS = [
+  'open-mercato.deal-card',
+  'open-mercato.person-card',
+  'open-mercato.company-card',
+  'open-mercato.product-card',
+  'open-mercato.activity-card',
+] as const
+
+export type RecordCardComponentId = (typeof RECORD_CARD_COMPONENT_IDS)[number]
+
+function DealCardPart({ payload }: AiUiPartProps) {
+  return <DealCard {...((payload ?? {}) as DealRecordPayload)} />
+}
+
+function PersonCardPart({ payload }: AiUiPartProps) {
+  return <PersonCard {...((payload ?? {}) as PersonRecordPayload)} />
+}
+
+function CompanyCardPart({ payload }: AiUiPartProps) {
+  return <CompanyCard {...((payload ?? {}) as CompanyRecordPayload)} />
+}
+
+function ProductCardPart({ payload }: AiUiPartProps) {
+  return <ProductCard {...((payload ?? {}) as ProductRecordPayload)} />
+}
+
+function ActivityCardPart({ payload }: AiUiPartProps) {
+  return <ActivityCard {...((payload ?? {}) as ActivityRecordPayload)} />
+}
+
+let registered = false
+
+/**
+ * Register the built-in record-card components on the module-global UI-part
+ * registry. Idempotent; safe to call from app bootstrap or from a top-level
+ * `<AiChat>` host. Hosts that need a scoped registry can re-register the
+ * same ids on their own {@link createAiUiPartRegistry} instance.
+ */
+export function registerRecordCardUiParts(): void {
+  if (registered) return
+  registered = true
+  defaultAiUiPartRegistry.register('open-mercato.deal-card', DealCardPart)
+  defaultAiUiPartRegistry.register('open-mercato.person-card', PersonCardPart)
+  defaultAiUiPartRegistry.register('open-mercato.company-card', CompanyCardPart)
+  defaultAiUiPartRegistry.register('open-mercato.product-card', ProductCardPart)
+  defaultAiUiPartRegistry.register(
+    'open-mercato.activity-card',
+    ActivityCardPart,
+  )
+}
+
+// Auto-register at module load so consumers that import from
+// `@open-mercato/ui/ai` get the cards wired up without manual bootstrap.
+registerRecordCardUiParts()

package/src/ai/records/types.ts

@@ -0,0 +1,90 @@
+import type { TagVariant } from '../../primitives/tag'
+
+export type RecordCardKind =
+  | 'deal'
+  | 'person'
+  | 'company'
+  | 'product'
+  | 'activity'
+
+export interface RecordCardBaseProps {
+  id?: string
+  href?: string
+  className?: string
+}
+
+export interface DealRecordPayload extends RecordCardBaseProps {
+  title: string
+  status?: string | null
+  stage?: string | null
+  amount?: string | number | null
+  currency?: string | null
+  closeDate?: string | null
+  ownerName?: string | null
+  personName?: string | null
+  companyName?: string | null
+  description?: string | null
+  tags?: string[] | null
+}
+
+export interface PersonRecordPayload extends RecordCardBaseProps {
+  name: string
+  title?: string | null
+  email?: string | null
+  phone?: string | null
+  companyName?: string | null
+  ownerName?: string | null
+  status?: string | null
+  tags?: string[] | null
+  avatarUrl?: string | null
+}
+
+export interface CompanyRecordPayload extends RecordCardBaseProps {
+  name: string
+  industry?: string | null
+  website?: string | null
+  email?: string | null
+  phone?: string | null
+  city?: string | null
+  country?: string | null
+  ownerName?: string | null
+  status?: string | null
+  tags?: string[] | null
+  logoUrl?: string | null
+}
+
+export interface ProductRecordPayload extends RecordCardBaseProps {
+  name: string
+  sku?: string | null
+  price?: string | number | null
+  currency?: string | null
+  status?: string | null
+  category?: string | null
+  description?: string | null
+  imageUrl?: string | null
+  tags?: string[] | null
+}
+
+export interface ActivityRecordPayload extends RecordCardBaseProps {
+  title: string
+  type?: string | null
+  status?: string | null
+  dueDate?: string | null
+  completedAt?: string | null
+  ownerName?: string | null
+  relatedTo?: string | null
+  description?: string | null
+  tags?: string[] | null
+}
+
+export type RecordCardPayload =
+  | ({ kind: 'deal' } & DealRecordPayload)
+  | ({ kind: 'person' } & PersonRecordPayload)
+  | ({ kind: 'company' } & CompanyRecordPayload)
+  | ({ kind: 'product' } & ProductRecordPayload)
+  | ({ kind: 'activity' } & ActivityRecordPayload)
+
+export interface StatusToTag {
+  variant: TagVariant
+  label: string
+}