@flamingo-stack/openframe-frontend-core 0.0.204 → 0.0.205

package/src/components/chat/entity-cards/hubspot-ticket-card.tsx

@@ -0,0 +1,205 @@
+'use client'
+
+/**
+ * HubSpot Ticket Card — unified visual for hubspot-tickets markers.
+ *
+ * PURE PRESENTATION (no internal nav). The card receives the structured
+ * `<a>` prop bundle via `anchorProps` (composed by the caller from a
+ * runtime hook) and renders the rest from the `HubspotTicketItem` shape
+ * directly.
+ */
+
+import React from 'react'
+import { ExternalLink } from 'lucide-react'
+import { StatusBadge } from '../../ui/status-badge'
+import {
+  COMPACT_CARD_META_ROW,
+  COMPACT_CARD_META_ROW_BOX,
+  COMPACT_CARD_OUTER,
+  COMPACT_CARD_OUTER_STATIC,
+  COMPACT_CARD_SKELETON_OUTER,
+  COMPACT_CARD_TEXT_COL,
+  COMPACT_CARD_TITLE,
+  safeHref,
+} from '../utils/compact-card-classes'
+import { formatDateUTC as formatDate } from '../../../utils/format'
+import type { HubspotTicketItem } from '../types/entities/hubspot-ticket'
+
+export interface HubspotTicketCardAnchorProps {
+  href: string
+  target?: '_blank'
+  rel?: 'noopener noreferrer'
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void
+}
+
+export interface HubspotTicketCardProps {
+  item: HubspotTicketItem
+  variant?: 'row' | 'compact'
+  className?: string
+  anchorProps?: HubspotTicketCardAnchorProps
+}
+
+function formatToken(token: string | null | undefined): string | null {
+  if (!token) return null
+  const lower = token.toLowerCase().replace(/_/g, ' ')
+  return lower.charAt(0).toUpperCase() + lower.slice(1)
+}
+
+type BadgeScheme = 'success' | 'error' | 'warning' | 'cyan' | 'default'
+
+function priorityScheme(priority: string | null | undefined): BadgeScheme {
+  const p = (priority || '').toUpperCase()
+  if (p === 'URGENT') return 'error'
+  if (p === 'HIGH') return 'warning'
+  if (p === 'MEDIUM') return 'cyan'
+  return 'default'
+}
+
+function statusScheme(status: string | null | undefined): BadgeScheme {
+  const s = (status || '').toUpperCase()
+  if (s === 'CLOSED') return 'success'
+  if (s === 'OPEN') return 'warning'
+  return 'default'
+}
+
+export function HubspotTicketCard({ item, variant = 'compact', className, anchorProps }: HubspotTicketCardProps) {
+  const statusText = item.statusLabel ?? formatToken(item.status)
+  const priorityText = formatToken(item.priority)
+  const dateText = formatDate(item.dateUpdated, { fallback: '', timezone: 'local' })
+
+  if (variant === 'row') {
+    return (
+      <div className={`flex items-center gap-3 min-w-0 ${className ?? ''}`}>
+        <span className="text-ods-text-primary text-sm font-medium truncate max-w-[260px] shrink-0">{item.title}</span>
+        {item.preview ? (
+          <span className="text-ods-text-secondary text-sm flex-1 min-w-0 truncate">{item.preview}</span>
+        ) : null}
+        {statusText ? (
+          <StatusBadge text={statusText} variant="button" colorScheme={statusScheme(item.status)} />
+        ) : null}
+        {dateText ? (
+          <span className="text-ods-text-secondary text-xs w-24 shrink-0 text-right">{dateText}</span>
+        ) : null}
+      </div>
+    )
+  }
+
+  const metaParts: React.ReactNode[] = []
+  if (item.customerCompany) {
+    metaParts.push(
+      <span key="company" className="min-w-0 truncate">{item.customerCompany}</span>,
+    )
+  }
+  if (dateText) metaParts.push(<span key="date" className="whitespace-nowrap">{dateText}</span>)
+
+  const href = safeHref(item.url)
+  const body = (
+    <>
+      <span className={COMPACT_CARD_TEXT_COL}>
+        <span className="flex flex-wrap items-center gap-1.5 min-w-0">
+          <span className={`${COMPACT_CARD_TITLE} shrink min-w-0`}>{item.title}</span>
+          {priorityText ? (
+            <StatusBadge
+              text={priorityText}
+              variant="button"
+              colorScheme={priorityScheme(item.priority)}
+              className="shrink-0"
+            />
+          ) : null}
+          {statusText ? (
+            <StatusBadge
+              text={statusText}
+              variant="button"
+              colorScheme={statusScheme(item.status)}
+              className="shrink-0"
+            />
+          ) : null}
+        </span>
+        {item.customerEmail ? (
+          <span className="flex min-w-0 items-center gap-1 text-[11px] leading-4 text-ods-text-secondary">
+            <span className="shrink-0 text-ods-text-secondary/70">From:</span>
+            <span className="min-w-0 truncate">{item.customerEmail}</span>
+          </span>
+        ) : null}
+        <span className="flex min-w-0">
+          <span className="line-clamp-4 whitespace-pre-wrap break-words text-[13px] leading-5 text-ods-text-secondary">
+            {item.preview || <span className="italic text-ods-text-secondary/60">No description provided.</span>}
+          </span>
+        </span>
+        {metaParts.length > 0 ? (
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className={COMPACT_CARD_META_ROW}>
+              {metaParts.map((part, i) => (
+                <React.Fragment key={i}>
+                  {i > 0 ? <span className="text-ods-text-secondary/40 shrink-0">·</span> : null}
+                  <span className="min-w-0 truncate">{part}</span>
+                </React.Fragment>
+              ))}
+            </span>
+          </span>
+        ) : null}
+      </span>
+      {href ? (
+        <span className="flex shrink-0 items-center self-start h-5 text-ods-text-secondary">
+          <ExternalLink className="w-3.5 h-3.5" />
+        </span>
+      ) : null}
+    </>
+  )
+  if (anchorProps) {
+    return (
+      <a {...anchorProps} className={`${COMPACT_CARD_OUTER} ${className ?? ''}`}>
+        {body}
+      </a>
+    )
+  }
+  return href ? (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`${COMPACT_CARD_OUTER} ${className ?? ''}`}
+    >
+      {body}
+    </a>
+  ) : (
+    <span className={`${COMPACT_CARD_OUTER_STATIC} ${className ?? ''}`} aria-label="No link available">{body}</span>
+  )
+}
+
+export function HubspotTicketCardSkeleton({ variant = 'compact', className }: { variant?: 'row' | 'compact'; className?: string }) {
+  if (variant === 'row') {
+    return (
+      <div className={`flex items-center gap-3 min-w-0 animate-pulse ${className ?? ''}`}>
+        <div className="h-3 w-40 bg-ods-bg rounded shrink-0" />
+        <div className="h-3 w-2/3 bg-ods-bg/60 rounded flex-1" />
+        <div className="h-3 w-16 bg-ods-bg/60 rounded shrink-0" />
+        <div className="h-3 w-20 bg-ods-bg/60 rounded shrink-0" />
+      </div>
+    )
+  }
+  return (
+    <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
+      <span className={COMPACT_CARD_TEXT_COL}>
+        <span className="flex flex-wrap items-center gap-1.5 min-w-0">
+          <span className="h-3.5 w-2/3 rounded bg-ods-bg" />
+          <span className="h-4 w-12 rounded-full bg-ods-bg/60" />
+          <span className="h-4 w-16 rounded-full bg-ods-bg/60" />
+        </span>
+        <span className="h-4 w-1/2 rounded bg-ods-bg/60" />
+        <span className="flex flex-col gap-0 min-w-0">
+          <span className="h-5 w-5/6 rounded bg-ods-bg/60" />
+          <span className="h-5 w-4/6 rounded bg-ods-bg/60" />
+          <span className="h-5 w-3/4 rounded bg-ods-bg/60" />
+          <span className="h-5 w-2/5 rounded bg-ods-bg/60" />
+        </span>
+        <span className={COMPACT_CARD_META_ROW_BOX}>
+          <span className="h-3 w-1/3 rounded bg-ods-bg/70" />
+        </span>
+      </span>
+      <span className="flex shrink-0 items-center self-start h-5">
+        <span className="h-3.5 w-3.5 rounded bg-ods-bg" />
+      </span>
+    </span>
+  )
+}

package/src/components/chat/entity-cards/index.ts

@@ -0,0 +1,125 @@
+/**
+ * Entity-card barrel — re-exports every chat-surface card under one path.
+ *
+ * Cards in this directory are PURE PRESENTATION: they take a pre-resolved
+ * `href`, optional `placeholderUrl`, and entity data as props. They write
+ * NO internal click logic — consumers wrap the card with their own anchor
+ * (hub's `<NavLinkAnchor>` or lib's `<NavLinkAnchorViaRuntime>`).
+ */
+
+// Existing supporting primitives
+export {
+  EntityAuthorCard,
+  EntityMetadataValueCell,
+  EntityMetadataAuthorCell,
+  EMPTY_AUTHOR_PLACEHOLDER,
+  type EntityAuthorCardProps,
+} from './entity-author-card'
+export { BlogImagePlaceholder } from './blog-image-placeholder'
+export { AdminContentCard } from './admin-content-card'
+
+// Moved-into-subdir flat cards
+export { BlockCard, type BlockCardProps } from './block-card'
+export {
+  ChatTicketItem,
+  type ChatTicketItemData,
+  type ChatTicketItemProps,
+} from './chat-ticket-item'
+export {
+  ChatVideoEntityCard,
+  type ChatVideoEntityCardProps,
+} from './chat-video-entity-card'
+export {
+  ProductReleaseCard,
+  ProductReleaseCardSkeleton,
+  type ProductReleaseCardProps,
+  type ProductReleaseCardSize,
+  type ProductReleaseCardAnchorProps,
+} from './product-release-card'
+
+// Refactored pure-presentation cards
+export { BlogCard, BlogCardSkeleton, type BlogCardProps } from './blog-card'
+export {
+  CaseStudyCard,
+  CaseStudyCardSkeleton,
+  type CaseStudyCardProps,
+} from './case-study-card'
+export {
+  CustomerInterviewCard,
+  CustomerInterviewCardSkeleton,
+  type CustomerInterviewCardProps,
+} from './customer-interview-card'
+export {
+  InvestorUpdateCard,
+  InvestorUpdateCardSkeleton,
+  type InvestorUpdateCardProps,
+} from './investor-update-card'
+export {
+  OnboardingGuideCard,
+  OnboardingGuideCardSkeleton,
+  type OnboardingGuideCardProps,
+} from './onboarding-guide-card'
+export {
+  RoadmapCard,
+  RoadmapCardSkeleton,
+  type RoadmapCardProps,
+  type VoteType,
+} from './roadmap-card'
+export {
+  RoadmapVoteButton,
+  type RoadmapVoteButtonProps,
+} from './roadmap-vote-button'
+export { TaskTypeIcon, type TaskTypeIconProps } from './task-type-icon'
+export {
+  GitHubActivityCard,
+  GitHubActivityCardSkeleton,
+  type GitHubActivityCardProps,
+  type GitHubActivityCardAnchorProps,
+} from './github-activity-card'
+export {
+  SlackMessageCard,
+  SlackMessageCardSkeleton,
+  type SlackMessageCardProps,
+  type SlackMessageCardAnchorProps,
+} from './slack-message-card'
+export {
+  HubspotTicketCard,
+  HubspotTicketCardSkeleton,
+  type HubspotTicketCardProps,
+  type HubspotTicketCardAnchorProps,
+} from './hubspot-ticket-card'
+export {
+  DataRoomDocCard,
+  DataRoomDocCardSkeleton,
+  type DataRoomDocCardProps,
+  type DataRoomDocCardAnchorProps,
+} from './data-room-doc-card'
+export {
+  ProgramCard,
+  ProgramCardSkeleton,
+  type ProgramCardProps,
+} from './program-card'
+export {
+  CampaignCardAdmin,
+  CampaignCardAdminSkeleton,
+  type CampaignCardItem,
+  type CampaignCardAdminProps,
+  type CampaignCardAdminAnchorProps,
+} from './campaign-card-admin'
+export {
+  GenericEntityCard,
+  GenericEntityCardSkeleton,
+  type GenericEntityCardItem,
+  type GenericEntityCardProps,
+  type GenericEntityCardAnchorProps,
+} from './generic-entity-card'
+
+// Per-type dispatch + ChatCardLoader — single switch over canonical
+// chat cards. Adding a new card type = one entry in `CHAT_CARD_REGISTRY`
+// inside `./dispatch.tsx`.
+export {
+  renderChatInlineEntityCard,
+  ChatCardLoader,
+  type ChatCardRenderOptions,
+  type ChatCardDispatchExtras,
+} from './dispatch'

package/src/components/chat/entity-cards/investor-update-card.tsx

@@ -0,0 +1,150 @@
+'use client'
+
+/**
+ * InvestorUpdateCard (pure presentation).
+ *
+ * Two densities — `default` (uses `AdminContentCard`) and `sm` (compact
+ * horizontal). The card writes NO click logic — callers wrap with their
+ * own anchor and pass the resolved detail URL via `href`.
+ */
+
+import React from 'react'
+import { Calendar } from 'lucide-react'
+import { AdminContentCard } from './admin-content-card'
+import { formatInvestorUpdatePeriod, type InvestorUpdate } from '../types/entities/investor-update'
+import {
+  COMPACT_CARD_IMAGE_SLOT,
+  COMPACT_CARD_META_ROW_BOX,
+  COMPACT_CARD_OUTER,
+  COMPACT_CARD_ROW_FILLER,
+  COMPACT_CARD_SKELETON_IMAGE_SLOT,
+  COMPACT_CARD_SKELETON_OUTER,
+  COMPACT_CARD_SUBTITLE,
+  COMPACT_CARD_SUMMARY,
+  COMPACT_CARD_TEXT_COL,
+  COMPACT_CARD_TITLE,
+  COMPACT_CARD_TITLE_ROW,
+} from '../utils/compact-card-classes'
+
+export interface InvestorUpdateCardProps {
+  update: InvestorUpdate
+  href: string
+  /** When `_blank`, opens in a new tab. Set by chat dispatch via
+   *  `computeIsNewTab`. Defaults to same-tab. */
+  target?: '_blank'
+  rel?: 'noopener noreferrer'
+  targetPlatform?: string | null
+  /** OG placeholder URL used when `update.featured_image` is missing. */
+  placeholderUrl?: string | null
+  size?: 'default' | 'sm'
+  className?: string
+}
+
+export function InvestorUpdateCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' }) {
+  if (size === 'sm') {
+    return (
+      <span className={COMPACT_CARD_SKELETON_OUTER}>
+        <span className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
+        <span className={COMPACT_CARD_TEXT_COL}>
+          <span className={`${COMPACT_CARD_TITLE_ROW} flex-nowrap gap-2`}>
+            <span className="h-3.5 w-1/2 rounded bg-ods-bg" />
+            <span className="h-4 w-8 rounded bg-ods-bg/70 shrink-0" />
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className="h-3 w-1/3 rounded bg-ods-bg/70" />
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className="h-3 w-11/12 rounded bg-ods-bg/40" />
+          </span>
+        </span>
+      </span>
+    )
+  }
+  return (
+    <div className="bg-ods-card border border-ods-border rounded-lg overflow-hidden h-full animate-pulse">
+      <div className="aspect-[16/9] bg-ods-bg" />
+      <div className="p-4 space-y-3">
+        <div className="h-5 w-3/4 bg-ods-bg rounded" />
+        <div className="h-3 w-full bg-ods-bg/60 rounded" />
+        <div className="h-3 w-4/5 bg-ods-bg/60 rounded" />
+        <div className="h-4 w-1/3 bg-ods-bg/60 rounded" />
+      </div>
+    </div>
+  )
+}
+
+export function InvestorUpdateCard({ update, href, target, rel, placeholderUrl, size = 'default', className }: InvestorUpdateCardProps) {
+  const coverImage = update.featured_image || placeholderUrl || null
+
+  if (size === 'sm') {
+    const periodText = formatInvestorUpdatePeriod(update.period_start, update.period_end)
+    return (
+      <a href={href} target={target} rel={rel} className={`${COMPACT_CARD_OUTER} ${className ?? ''}`}>
+        <span className={COMPACT_CARD_IMAGE_SLOT}>
+          {coverImage ? (
+            <img
+              src={coverImage}
+              alt={update.title ?? 'Investor update'}
+              className="absolute inset-0 block w-full h-full object-contain"
+              onError={(e) => {
+                ;(e.currentTarget as HTMLImageElement).style.display = 'none'
+              }}
+            />
+          ) : (
+            <span className="flex h-full w-full items-center justify-center text-ods-accent">
+              <Calendar className="h-4 w-4" />
+            </span>
+          )}
+        </span>
+        <span className={COMPACT_CARD_TEXT_COL}>
+          <span className={`${COMPACT_CARD_TITLE_ROW} gap-2`}>
+            <span className={`${COMPACT_CARD_TITLE} min-w-0`}>
+              {update.title || `Update #${update.update_number ?? '?'}`}
+            </span>
+            {update.update_number ? (
+              <span className="shrink-0 rounded bg-ods-accent/10 px-1.5 py-0.5 text-[10px] font-medium text-ods-accent">
+                #{update.update_number}
+              </span>
+            ) : null}
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className={COMPACT_CARD_SUBTITLE}>
+              {periodText || 'Investor update'}
+            </span>
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className={COMPACT_CARD_SUMMARY}>
+              {(update.strategic_update || update.content || '').slice(0, 120) || COMPACT_CARD_ROW_FILLER}
+            </span>
+          </span>
+        </span>
+      </a>
+    )
+  }
+
+  return (
+    <a href={href} target={target} rel={rel} className={`block h-full ${className ?? ''}`}>
+      <AdminContentCard
+        imageUrl={update.featured_image}
+        placeholderUrl={placeholderUrl}
+        title={update.title || `Update #${update.update_number || '?'}`}
+        summary={update.strategic_update?.slice(0, 120) || update.content?.slice(0, 120) || 'No description'}
+        badges={
+          update.update_number ? (
+            <span className="px-2 py-0.5 rounded text-xs font-medium bg-ods-accent/10 text-ods-accent">
+              #{update.update_number}
+            </span>
+          ) : undefined
+        }
+        meta={
+          (update.period_start || update.period_end) ? (
+            <div className="flex items-center gap-1">
+              <Calendar className="h-3 w-3" />
+              <span>{formatInvestorUpdatePeriod(update.period_start, update.period_end)}</span>
+            </div>
+          ) : undefined
+        }
+      />
+    </a>
+  )
+}