@open-mercato/core 0.4.5-develop-5191db4ef3 → 0.4.5-develop-033a719bf2

package/src/modules/messages/components/message-detail/panels/objects-panel.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import type { MessageObjectAction } from '@open-mercato/shared/modules/messages/types'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  getMessageUiComponentRegistry,
+} from '../../utils/typeUiRegistry'
+import type { MessageAction, MessageDetail } from '../types'
+import { toObjectAction } from '../utils'
+
+type ObjectsPanelProps = {
+  detail: MessageDetail
+  objectActionsByObjectId: Map<string, Map<string, MessageAction>>
+  onExecuteAction: (action: MessageAction, payload?: Record<string, unknown>) => Promise<void>
+}
+
+export function MessageDetailObjectsSection(props: ObjectsPanelProps) {
+  const t = useT()
+  const messageUiRegistry = getMessageUiComponentRegistry()
+
+  if ((props.detail.objects ?? []).length === 0) return null
+
+  return (
+    <section className="space-y-3 pl-4 py-2">
+      <h2 className="text-base font-semibold">{t('messages.attachedObjects', 'Attached objects')}</h2>
+      <div className="space-y-2">
+        {(props.detail.objects ?? []).map((item) => {
+          const componentKey = `${item.entityModule}:${item.entityType}`
+          const DetailComponent = messageUiRegistry.objectDetailComponents[componentKey] ?? null
+          const objectActions = props.objectActionsByObjectId.get(item.id)
+
+          if (DetailComponent) {
+            const actions: MessageObjectAction[] = objectActions
+              ? Array.from(objectActions.entries()).map(([actionId, action]) => toObjectAction(actionId, action))
+              : []
+
+            return (
+              <DetailComponent
+                key={item.id}
+                entityId={item.entityId}
+                entityModule={item.entityModule}
+                entityType={item.entityType}
+                snapshot={item.snapshot ?? undefined}
+                previewData={item.preview ?? undefined}
+                actionRequired={item.actionRequired}
+                actionType={item.actionType ?? undefined}
+                actionLabel={item.actionLabel ?? undefined}
+                actionTaken={props.detail.actionTaken ?? null}
+                actionTakenAt={props.detail.actionTakenAt ? new Date(props.detail.actionTakenAt) : null}
+                actionTakenByUserId={props.detail.actionTakenByUserId ?? null}
+                actions={actions}
+                onAction={async (actionId, payload) => {
+                  const action = objectActions?.get(actionId)
+                  if (!action) return
+                  await props.onExecuteAction(action, payload)
+                }}
+              />
+            )
+          }
+          return null
+        })}
+      </div>
+    </section>
+  )
+}

package/src/modules/messages/components/message-detail/panels/thread-panel.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { MarkdownContent } from '@open-mercato/ui/backend/markdown/MarkdownContent'
+import { getMessageUiComponentRegistry } from '../../utils/typeUiRegistry'
+import type { MessageDetail, MessageDetailObject } from '../types'
+import { formatDateTime } from '../utils'
+
+export function MessageDetailThreadSection({ detail }: { detail: MessageDetail }) {
+  const t = useT()
+  const messageUiRegistry = getMessageUiComponentRegistry()
+
+  if ((detail.thread ?? []).length === 0) return null
+
+  return (
+    <section className="space-y-3 border-l pl-4 py-2">
+      <h2 className="text-base font-semibold">{t('messages.detail.thread', 'Thread')}</h2>
+      <div className="space-y-3">
+        {(detail.thread ?? []).map((threadItem) => (
+          <article key={threadItem.id} className="rounded border p-3">
+            <p className="text-xs text-muted-foreground">
+              {(threadItem.senderName || threadItem.senderEmail || threadItem.senderUserId)} • {formatDateTime(threadItem.sentAt)}
+            </p>
+            <div className="mt-2 max-h-[60vh] overflow-y-auto pr-1">
+              <MarkdownContent
+                body={threadItem.body}
+                format={threadItem.bodyFormat ?? 'text'}
+                className="text-sm whitespace-pre-wrap [&>*]:mb-2 [&>*:last-child]:mb-0 [&_ul]:ml-4 [&_ul]:list-disc [&_ol]:ml-4 [&_ol]:list-decimal [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-xs"
+              />
+            </div>
+
+            {(threadItem.objects ?? []).length > 0 && (
+              <div className="mt-3 space-y-2">
+                <p className="text-xs text-muted-foreground font-medium">
+                  {t('messages.attachedObjects', 'Attached objects')}
+                </p>
+                {(threadItem.objects ?? []).map((obj: MessageDetailObject) => {
+                  const componentKey = `${obj.entityModule}:${obj.entityType}`
+                  const PreviewComponent = messageUiRegistry.objectPreviewComponents[componentKey]
+                    ?? messageUiRegistry.objectPreviewComponents['messages:default']
+                  if (!PreviewComponent) return null
+
+                  return (
+                    <div key={obj.id} className="scale-95 origin-left">
+                      <PreviewComponent
+                        entityId={obj.entityId}
+                        entityModule={obj.entityModule}
+                        entityType={obj.entityType}
+                        snapshot={obj.snapshot ?? undefined}
+                        previewData={obj.preview ?? undefined}
+                        actionRequired={obj.actionRequired}
+                        actionType={obj.actionType ?? undefined}
+                        actionLabel={obj.actionLabel ?? undefined}
+                      />
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </article>
+        ))}
+      </div>
+    </section>
+  )
+}

package/src/modules/messages/components/message-detail/types.ts

@@ -0,0 +1,114 @@
+import type {
+  MessageActionsProps,
+  MessageContentProps,
+  ObjectPreviewData,
+} from '@open-mercato/shared/modules/messages/types'
+
+export type MessageDetailRecipient = {
+  userId: string
+  type: 'to' | 'cc' | 'bcc'
+  status: string
+  readAt?: string | null
+}
+
+export type MessageDetailObject = {
+  id: string
+  entityModule: string
+  entityType: string
+  entityId: string
+  actionRequired: boolean
+  actionType?: string | null
+  actionLabel?: string | null
+  snapshot?: Record<string, unknown> | null
+  preview?: ObjectPreviewData | null
+}
+
+export type MessageAttachment = {
+  id: string
+  fileName: string
+  fileSize: number
+  mimeType: string
+  url: string
+}
+
+export type MessageAction = {
+  id: string
+  label: string
+  labelKey?: string
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost'
+  icon?: string
+  commandId?: string
+  href?: string
+  isTerminal?: boolean
+  confirmRequired?: boolean
+  confirmMessage?: string
+}
+
+export type MessageDetail = {
+  id: string
+  type: string
+  isDraft: boolean
+  canEditDraft: boolean
+  visibility?: 'public' | 'internal' | null
+  sourceEntityType?: string | null
+  sourceEntityId?: string | null
+  externalEmail?: string | null
+  externalName?: string | null
+  typeDefinition: {
+    labelKey: string
+    icon: string
+    color?: string | null
+    allowReply: boolean
+    allowForward: boolean
+    ui?: {
+      listItemComponent?: string | null
+      contentComponent?: string | null
+      actionsComponent?: string | null
+    } | null
+  }
+  threadId?: string | null
+  parentMessageId?: string | null
+  senderUserId: string
+  senderName?: string | null
+  senderEmail?: string | null
+  subject: string
+  body: string
+  bodyFormat: 'text' | 'markdown'
+  priority: string
+  sentAt?: string | null
+  actionData?: {
+    actions: MessageAction[]
+    primaryActionId?: string
+    expiresAt?: string
+  } | null
+  actionTaken?: string | null
+  actionTakenAt?: string | null
+  actionTakenByUserId?: string | null
+  recipients: MessageDetailRecipient[]
+  objects: MessageDetailObject[]
+  thread: Array<{
+    id: string
+    senderUserId: string
+    senderName?: string | null
+    senderEmail?: string | null
+    body: string
+    bodyFormat?: 'text' | 'markdown'
+    sentAt?: string | null
+    objects?: MessageDetailObject[]
+  }>
+  isRead: boolean
+}
+
+export type ActionResult = {
+  ok?: boolean
+  actionId?: string
+  result?: Record<string, unknown>
+}
+
+export type PendingActionConfirmation = {
+  action: MessageAction
+  payload?: Record<string, unknown>
+}
+
+export type DetailContentProps = MessageContentProps
+export type ExecuteActionById = MessageActionsProps['onExecuteAction']

package/src/modules/messages/components/message-detail/utils.ts

@@ -0,0 +1,62 @@
+import type { MessageObjectAction } from '@open-mercato/shared/modules/messages/types'
+import type { MessageAction } from './types'
+
+export function toErrorMessage(payload: unknown): string | null {
+  if (!payload) return null
+  if (typeof payload === 'string') return payload
+  if (Array.isArray(payload)) {
+    for (const item of payload) {
+      const nested = toErrorMessage(item)
+      if (nested) return nested
+    }
+    return null
+  }
+  if (typeof payload === 'object') {
+    const record = payload as Record<string, unknown>
+    return (
+      toErrorMessage(record.error)
+      ?? toErrorMessage(record.message)
+      ?? toErrorMessage(record.detail)
+      ?? toErrorMessage(record.details)
+      ?? null
+    )
+  }
+  return null
+}
+
+export function formatDateTime(value: string | null | undefined): string {
+  if (!value) return '—'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '—'
+  return date.toLocaleString()
+}
+
+export function parseObjectActionId(value: string): { objectId: string; actionId: string } | null {
+  if (!value.startsWith('object:')) return null
+  const [, objectId, ...rest] = value.split(':')
+  if (!objectId || rest.length === 0) return null
+  return { objectId, actionId: rest.join(':') }
+}
+
+function resolveObjectActionVariant(
+  variant: MessageAction['variant'],
+): MessageObjectAction['variant'] | undefined {
+  if (variant === 'default' || variant === 'secondary' || variant === 'destructive' || variant === 'outline') {
+    return variant
+  }
+  return undefined
+}
+
+export function toObjectAction(actionId: string, action: MessageAction): MessageObjectAction {
+  return {
+    id: actionId,
+    labelKey: action.labelKey ?? action.label ?? actionId,
+    variant: resolveObjectActionVariant(action.variant),
+    icon: action.icon,
+    commandId: action.commandId,
+    href: action.href,
+    isTerminal: action.isTerminal,
+    confirmRequired: action.confirmRequired,
+    confirmMessage: action.confirmMessage,
+  }
+}

package/src/modules/messages/components/utils/PriorityBadge.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from 'react'
+import { ArrowDown, ArrowUp, Circle, TriangleAlert } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { SimpleTooltip, TooltipProvider } from '@open-mercato/ui/primitives/tooltip'
+import type { MessagePriority } from '../../lib/priorityUtils'
+import {
+  getPriorityBadgeClassName,
+  getPriorityLabelKey,
+  getPriorityFallbackLabel,
+} from '../../lib/priorityUtils'
+
+export type PriorityBadgeProps = {
+  priority: MessagePriority
+  className?: string
+}
+
+export function PriorityBadge({ priority, className }: PriorityBadgeProps) {
+  const t = useT()
+  const priorityTitle = t('messages.priority', 'Priority')
+
+  const priorityLabel = React.useMemo(() => {
+    return t(getPriorityLabelKey(priority), getPriorityFallbackLabel(priority))
+  }, [priority, t])
+
+  const tooltipText = `${priorityTitle}: ${priorityLabel}`
+
+  const Icon = React.useMemo(() => {
+    switch (priority) {
+      case 'low':
+        return ArrowDown
+      case 'high':
+        return ArrowUp
+      case 'urgent':
+        return TriangleAlert
+      case 'normal':
+      default:
+        return Circle
+    }
+  }, [priority])
+
+  return (
+    <TooltipProvider delayDuration={250}>
+      <SimpleTooltip content={tooltipText}>
+        <span
+          className={cn(
+            'inline-flex h-6 w-6 items-center justify-center rounded-md border',
+            getPriorityBadgeClassName(priority),
+            className,
+          )}
+          aria-label={tooltipText}
+          title={tooltipText}
+        >
+          <Icon className="h-3.5 w-3.5" aria-hidden="true" />
+        </span>
+      </SimpleTooltip>
+    </TooltipProvider>
+  )
+}
+
+export default PriorityBadge

package/src/modules/messages/components/utils/typeUiRegistry.ts

@@ -0,0 +1,106 @@
+"use client"
+
+import type { ComponentType } from 'react'
+import type {
+  MessageActionsProps,
+  MessageContentProps,
+  MessageListItemProps,
+  ObjectPreviewProps,
+  ObjectDetailProps,
+} from '@open-mercato/shared/modules/messages/types'
+import { MessageRecordObjectDetail } from '../defaults/MessageRecordObjectDetail'
+import { MessageRecordObjectPreview } from './../defaults/MessageRecordObjectPreview'
+
+export type MessageUiComponentRegistry = {
+  listItemComponents: Record<string, ComponentType<MessageListItemProps>>
+  contentComponents: Record<string, ComponentType<MessageContentProps>>
+  actionsComponents: Record<string, ComponentType<MessageActionsProps>>
+  objectDetailComponents: Record<string, ComponentType<ObjectDetailProps>>
+  objectPreviewComponents: Record<string, ComponentType<ObjectPreviewProps>>
+}
+
+const listItemComponents = new Map<string, ComponentType<MessageListItemProps>>()
+const contentComponents = new Map<string, ComponentType<MessageContentProps>>()
+const actionsComponents = new Map<string, ComponentType<MessageActionsProps>>()
+const objectDetailComponents = new Map<string, ComponentType<ObjectDetailProps>>()
+const objectPreviewComponents = new Map<string, ComponentType<ObjectPreviewProps>>()
+
+function getObjectDetailComponentKey(entityModule: string, entityType: string): string {
+  return `${entityModule}:${entityType}`
+}
+
+export function configureMessageUiComponentRegistry(registry: MessageUiComponentRegistry): void {
+  listItemComponents.clear()
+  contentComponents.clear()
+  actionsComponents.clear()
+  objectDetailComponents.clear()
+  objectPreviewComponents.clear()
+
+  for (const [key, component] of Object.entries(registry.listItemComponents ?? {})) {
+    listItemComponents.set(key, component)
+  }
+  for (const [key, component] of Object.entries(registry.contentComponents ?? {})) {
+    contentComponents.set(key, component)
+  }
+  for (const [key, component] of Object.entries(registry.actionsComponents ?? {})) {
+    actionsComponents.set(key, component)
+  }
+  for (const [key, component] of Object.entries(registry.objectDetailComponents ?? {})) {
+    objectDetailComponents.set(key, component)
+  }
+  for (const [key, component] of Object.entries(registry.objectPreviewComponents ?? {})) {
+    objectPreviewComponents.set(key, component)
+  }
+}
+
+export function getMessageUiComponentRegistry(): MessageUiComponentRegistry {
+  return {
+    listItemComponents: Object.fromEntries(listItemComponents.entries()),
+    contentComponents: Object.fromEntries(contentComponents.entries()),
+    actionsComponents: Object.fromEntries(actionsComponents.entries()),
+    objectDetailComponents: Object.fromEntries(objectDetailComponents.entries()),
+    objectPreviewComponents: Object.fromEntries(objectPreviewComponents.entries()),
+  }
+}
+
+export function getMessageUiComponentForListItem(
+  key: string | null | undefined,
+): ComponentType<MessageListItemProps> | null {
+  if (!key) return null
+  return listItemComponents.get(key) ?? null
+}
+
+export function getMessageUiComponentForContent(
+  key: string | null | undefined,
+): ComponentType<MessageContentProps> | null {
+  if (!key) return null
+  return contentComponents.get(key) ?? null
+}
+
+export function getMessageUiComponentForActions(
+  key: string | null | undefined,
+): ComponentType<MessageActionsProps> | null {
+  if (!key) return null
+  return actionsComponents.get(key) ?? null
+}
+
+export function getMessageUiComponentForObjectDetail(
+  entityModule: string | null | undefined,
+  entityType: string | null | undefined,
+): ComponentType<ObjectDetailProps> | null {
+  if (!entityModule || !entityType) return MessageRecordObjectDetail
+  const key = getObjectDetailComponentKey(entityModule, entityType)
+  return objectDetailComponents.get(key) ?? MessageRecordObjectDetail
+}
+
+export function getMessageUiComponentForObjectPreview(
+  entityModule: string | null | undefined,
+  entityType: string | null | undefined,
+): ComponentType<ObjectPreviewProps> | null {
+  if (!entityModule || !entityType) {
+    return objectPreviewComponents.get('messages:default') ?? MessageRecordObjectPreview
+  }
+  const key = getObjectDetailComponentKey(entityModule, entityType)
+  const component = objectPreviewComponents.get(key)
+  return component ?? objectPreviewComponents.get('messages:default') ?? MessageRecordObjectPreview
+}