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

package/src/components/chat/entity-cards/case-study-card.tsx

@@ -0,0 +1,192 @@
+'use client'
+
+/**
+ * CaseStudyCard (pure presentation). Two densities — `default` (vertical
+ * detail) and `sm` (compact horizontal for chat-inline).
+ *
+ * The card writes NO click logic — callers wrap with their own anchor
+ * and pass the resolved detail URL via `href`.
+ *
+ * Image-fallback chain:
+ *   `study.featured_image` → `placeholderUrl` (caller passes
+ *   `useOgPlaceholder(...)`) → `bg-ods-bg`.
+ */
+
+import React from 'react'
+import Image from '../../../embed-shims/next-image'
+import { Card } from '../../ui/card'
+import { cn } from '../../../utils/cn'
+import type { CaseStudy } from '../../../types/case-study'
+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'
+
+const hideOnError = (e: React.SyntheticEvent<HTMLImageElement>) => {
+  ;(e.currentTarget as HTMLImageElement).style.display = 'none'
+}
+
+export interface CaseStudyCardProps {
+  study: CaseStudy
+  /** Detail URL resolved by the caller. */
+  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 `study.featured_image` is missing. */
+  placeholderUrl?: string | null
+  size?: 'default' | 'sm'
+  className?: string
+}
+
+export function CaseStudyCardSkeleton({ 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}>
+            <span className="h-3.5 w-3/5 rounded bg-ods-bg" />
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className="h-3 w-1/2 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 p-6 flex flex-col gap-6 animate-pulse">
+      <div className="h-[200px] w-full rounded-sm bg-ods-bg" />
+      <div className="h-[72px] flex flex-col gap-2">
+        <div className="h-5 w-3/4 bg-ods-bg rounded" />
+        <div className="h-5 w-1/2 bg-ods-bg rounded" />
+      </div>
+      <div className="h-[60px] flex items-center gap-3">
+        <div className="h-12 w-12 rounded-full bg-ods-bg" />
+        <div className="flex-1 space-y-2">
+          <div className="h-4 w-2/3 bg-ods-bg rounded" />
+          <div className="h-3 w-1/2 bg-ods-bg/60 rounded" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function CaseStudyCard({ study, href, target, rel, placeholderUrl, size = 'default', className }: CaseStudyCardProps) {
+  const coverImage = study.featured_image || placeholderUrl || null
+
+  if (size === 'sm') {
+    return (
+      <a href={href} target={target} rel={rel} className={cn(COMPACT_CARD_OUTER, className)}>
+        <span className={COMPACT_CARD_IMAGE_SLOT}>
+          {coverImage ? (
+            <img
+              src={coverImage}
+              alt={`${study.msp?.name || study.title} cover`}
+              className="absolute inset-0 block w-full h-full object-contain"
+              onError={hideOnError}
+            />
+          ) : null}
+        </span>
+        <span className={COMPACT_CARD_TEXT_COL}>
+          <span className={COMPACT_CARD_TITLE_ROW}>
+            <span className={COMPACT_CARD_TITLE}>{study.title}</span>
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className={COMPACT_CARD_SUBTITLE}>
+              {[study.msp?.name, study.user?.full_name].filter(Boolean).join(' · ') || 'Case study'}
+            </span>
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className={COMPACT_CARD_SUMMARY}>
+              {study.summary || COMPACT_CARD_ROW_FILLER}
+            </span>
+          </span>
+        </span>
+      </a>
+    )
+  }
+
+  return (
+    <a href={href} target={target} rel={rel} className={cn('block h-full', className)}>
+      <Card className="bg-ods-card border border-ods-border hover:border-ods-accent transition-colors p-6 flex flex-col gap-6 overflow-hidden">
+        <div className="relative h-[200px] w-full rounded-sm overflow-hidden bg-ods-bg shrink-0">
+          {coverImage && (
+            <Image
+              src={coverImage}
+              alt={study.msp?.name || study.title}
+              className="w-full h-full object-cover"
+              sizes="(min-width: 1545px) 515px, (min-width: 1280px) 33vw, (min-width: 800px) 50vw, 100vw"
+              fill
+              unoptimized
+              onError={hideOnError}
+            />
+          )}
+        </div>
+
+        <div className="h-[72px] flex items-center shrink-0">
+          <p className="text-h4 text-ods-text-primary line-clamp-3 break-words">{study.title}</p>
+        </div>
+
+        <div className="h-[60px] flex items-center shrink-0">
+          <div className="flex items-center gap-3 min-w-0 w-full">
+            <div className="relative shrink-0 w-12 h-12">
+              {study.user?.avatar_url ? (
+                <Image
+                  src={study.user.avatar_url}
+                  alt={study.user?.full_name || 'User'}
+                  className="w-12 h-12 rounded-full object-cover bg-ods-background border border-ods-border"
+                  width={48}
+                  height={48}
+                  unoptimized
+                />
+              ) : (
+                <div className="w-12 h-12 rounded-full bg-ods-background border border-ods-border flex items-center justify-center">
+                  <span className="text-ods-text-secondary font-medium text-xl">
+                    {(study.user?.full_name || 'A').charAt(0).toUpperCase()}
+                  </span>
+                </div>
+              )}
+              {study.msp?.icon_url && (
+                <div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-ods-text-primary ring-1 ring-ods-bg overflow-hidden flex items-center justify-center">
+                  <Image
+                    src={study.msp.icon_url}
+                    alt={study.msp.name || 'MSP'}
+                    className="w-full h-full object-cover"
+                    width={24}
+                    height={24}
+                    unoptimized
+                  />
+                </div>
+              )}
+            </div>
+            <div className="min-w-0 flex-1">
+              <p className="font-['DM_Sans'] text-[16px] leading-[1.3] text-ods-text-primary truncate">
+                {study.user?.full_name || 'Anonymous'}
+                {study.msp?.name && <span className="text-ods-text-secondary"> • {study.msp.name}</span>}
+              </p>
+              <p className="font-['DM_Sans'] text-[14px] leading-none text-ods-text-secondary truncate">
+                {study.user?.job_title || ' '}
+              </p>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </a>
+  )
+}

package/src/components/chat/{chat-ticket-item.tsx → entity-cards/chat-ticket-item.tsx}

@@ -1,9 +1,9 @@
 'use client'
 
 import * as React from 'react'
-import { cn } from '../../utils/cn'
+import { cn } from '../../../utils/cn'
 import { ChevronRight } from 'lucide-react'
-import { TicketStatusTag, resolveTicketStatus } from '../ui/ticket-status-tag'
+import { TicketStatusTag, resolveTicketStatus } from '../../ui/ticket-status-tag'
 
 export interface ChatTicketItemData {
   id: string

package/src/components/chat/{chat-video-entity-card.tsx → entity-cards/chat-video-entity-card.tsx}

@@ -1,8 +1,8 @@
 "use client"
 
 import React from 'react'
-import { EntityVideoSection } from '../features/entity-video-section'
-import type { ChatRef } from './chat-ref.types'
+import { EntityVideoSection } from '../../features/entity-video-section'
+import type { ChatRef } from '../chat-ref.types'
 
 /**
  * <ChatVideoEntityCard> — chat-side inline render for video-bearing

package/src/components/chat/entity-cards/customer-interview-card.tsx

@@ -0,0 +1,211 @@
+'use client'
+
+/**
+ * CustomerInterviewCard (pure presentation). Two densities — `default`
+ * and `sm` (compact horizontal for chat-inline).
+ *
+ * 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 { Card } from '../../ui/card'
+import { cn } from '../../../utils/cn'
+import { Video } from 'lucide-react'
+import type { CustomerInterview } from '../../../types/customer-interview'
+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'
+
+const hideOnError = (e: React.SyntheticEvent<HTMLImageElement>) => {
+  ;(e.currentTarget as HTMLImageElement).style.display = 'none'
+}
+
+export interface CustomerInterviewCardProps {
+  interview: CustomerInterview
+  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 fallback when `interview.featured_image` is missing. */
+  placeholderUrl?: string | null
+  size?: 'default' | 'sm'
+  className?: string
+}
+
+export function CustomerInterviewCardSkeleton({ 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}>
+            <span className="h-3.5 w-3/5 rounded bg-ods-bg" />
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className="h-3 w-2/5 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 p-6 flex flex-col gap-6 animate-pulse">
+      <div className="h-[200px] w-full rounded-sm bg-ods-bg" />
+      <div className="space-y-2">
+        <div className="h-5 w-3/4 bg-ods-bg rounded" />
+        <div className="h-5 w-1/2 bg-ods-bg rounded" />
+      </div>
+      <div className="space-y-2">
+        <div className="h-3 w-full bg-ods-bg/60 rounded" />
+        <div className="h-3 w-5/6 bg-ods-bg/60 rounded" />
+        <div className="h-3 w-4/5 bg-ods-bg/60 rounded" />
+      </div>
+      <div className="h-[60px] flex items-center gap-3 mt-auto">
+        <div className="h-12 w-12 rounded-full bg-ods-bg" />
+        <div className="flex-1 space-y-2">
+          <div className="h-4 w-2/3 bg-ods-bg rounded" />
+          <div className="h-3 w-1/2 bg-ods-bg/60 rounded" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function CustomerInterviewCard({ interview, href, target, rel, placeholderUrl, size = 'default', className }: CustomerInterviewCardProps) {
+  const thumbnailUrl = interview.featured_image || placeholderUrl || null
+
+  if (size === 'sm') {
+    return (
+      <a href={href} target={target} rel={rel} className={cn(COMPACT_CARD_OUTER, className)}>
+        <span className={COMPACT_CARD_IMAGE_SLOT}>
+          {thumbnailUrl ? (
+            <img
+              src={thumbnailUrl}
+              alt={interview.title}
+              className="absolute inset-0 block w-full h-full object-contain"
+              onError={hideOnError}
+            />
+          ) : null}
+          {interview.main_video_url ? (
+            <span className="absolute inset-0 flex items-center justify-center bg-black/30">
+              <Video className="h-4 w-4 text-white" />
+            </span>
+          ) : null}
+        </span>
+        <span className={COMPACT_CARD_TEXT_COL}>
+          <span className={COMPACT_CARD_TITLE_ROW}>
+            <span className={COMPACT_CARD_TITLE}>{interview.title}</span>
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className={COMPACT_CARD_SUBTITLE}>
+              {[interview.user?.full_name, interview.msp?.name].filter(Boolean).join(' · ') || 'Customer interview'}
+            </span>
+          </span>
+          <span className={COMPACT_CARD_META_ROW_BOX}>
+            <span className={COMPACT_CARD_SUMMARY}>
+              {interview.video_summary || COMPACT_CARD_ROW_FILLER}
+            </span>
+          </span>
+        </span>
+      </a>
+    )
+  }
+
+  return (
+    <a href={href} target={target} rel={rel} className={cn('block h-full', className)}>
+      <Card className="bg-ods-card border border-ods-border hover:border-ods-accent transition-colors p-6 flex flex-col gap-6 overflow-hidden">
+        <div className="h-[200px] w-full rounded-sm overflow-hidden bg-ods-bg shrink-0 relative">
+          {thumbnailUrl ? (
+            <>
+              <img
+                src={thumbnailUrl}
+                alt={interview.title}
+                className="w-full h-full object-cover"
+                onError={hideOnError}
+              />
+              {interview.main_video_url && (
+                <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
+                  <div className="w-16 h-16 rounded-full bg-ods-accent/90 flex items-center justify-center">
+                    <Video className="w-8 h-8 text-black" />
+                  </div>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="w-full h-full flex items-center justify-center bg-ods-bg">
+              <Video className="w-12 h-12 text-ods-text-secondary" />
+            </div>
+          )}
+        </div>
+
+        <div className="shrink-0">
+          <h3 className="font-['DM_Sans'] font-semibold text-[20px] leading-[28px] text-ods-text-primary line-clamp-2 break-words">
+            {interview.title}
+          </h3>
+        </div>
+
+        {interview.video_summary && (
+          <div className="shrink-0">
+            <p className="font-['DM_Sans'] text-[14px] leading-[20px] text-ods-text-secondary line-clamp-3">
+              {interview.video_summary}
+            </p>
+          </div>
+        )}
+
+        <div className="h-[60px] flex items-center shrink-0 mt-auto">
+          <div className="flex items-center gap-3 min-w-0 w-full">
+            <div className="relative shrink-0 w-12 h-12">
+              {interview.user?.avatar_url ? (
+                <img
+                  src={interview.user.avatar_url}
+                  alt={interview.user?.full_name || 'Customer'}
+                  className="w-12 h-12 rounded-full object-cover bg-ods-background border border-ods-border"
+                />
+              ) : (
+                <div className="w-12 h-12 rounded-full bg-ods-background border border-ods-border flex items-center justify-center">
+                  <span className="text-ods-text-secondary font-medium text-xl">
+                    {(interview.user?.full_name || 'A').charAt(0).toUpperCase()}
+                  </span>
+                </div>
+              )}
+              {interview.msp?.icon_url && (
+                <div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-ods-text-primary ring-1 ring-ods-bg overflow-hidden flex items-center justify-center">
+                  <img
+                    src={interview.msp.icon_url}
+                    alt={interview.msp.name || 'MSP'}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+              )}
+            </div>
+            <div className="min-w-0 flex-1">
+              <p className="font-['DM_Sans'] text-[16px] leading-[1.3] text-ods-text-primary truncate">
+                {interview.user?.full_name || 'Anonymous'}
+                {interview.msp?.name && <span className="text-ods-text-secondary"> • {interview.msp.name}</span>}
+              </p>
+              <p className="font-['DM_Sans'] text-[14px] leading-none text-ods-text-secondary truncate">
+                {interview.user?.job_title || ' '}
+              </p>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </a>
+  )
+}

package/src/components/chat/entity-cards/data-room-doc-card.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+/**
+ * Data-room / OpenFrame-docs inline chat card.
+ *
+ * PURE PRESENTATION. The card receives a pre-composed `<a>` prop bundle
+ * (`anchorProps`) plus a pre-resolved badge label — both decisions
+ * (URL composition + cross-app routing) are made in the consumer's
+ * runtime layer, not inside this card.
+ *
+ * Renders `[card://data_room_doc:<id>]` and `[card://markdown:<id>]` markers
+ * — both use this card because their viewer surface is structurally
+ * identical; only the `baseRoute` differs (`/data-room` vs `/knowledge-base`).
+ */
+
+import React from 'react'
+import { ExternalLink } from 'lucide-react'
+import { StatusBadge } from '../../ui/status-badge'
+import {
+  COMPACT_CARD_OUTER,
+  COMPACT_CARD_OUTER_STATIC,
+  COMPACT_CARD_SKELETON_OUTER,
+  COMPACT_CARD_TEXT_COL,
+  COMPACT_CARD_TITLE,
+} from '../utils/compact-card-classes'
+import type { DataRoomDocCardItem } from '../types/entities/data-room-doc'
+
+export interface DataRoomDocCardAnchorProps {
+  href: string
+  target?: '_blank'
+  rel?: 'noopener noreferrer'
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void
+}
+
+export interface DataRoomDocCardProps {
+  item: DataRoomDocCardItem
+  className?: string
+  /** Pre-composed badge label. REQUIRED — the consumer resolves
+   *  `sourceRepo` against its `SOURCE_LABELS_BY_TABLE` registry and
+   *  passes the result here.
+   *
+   *  Why required (no default): if the badge silently defaulted to a
+   *  literal like "Data room", a card sourced from openframe-docs (or
+   *  any other repo) whose `sourceRepo` resolution failed would
+   *  display the wrong provenance label — a real security signal,
+   *  because "Data Room" implies private/internal documents to
+   *  end-users. Forcing the consumer to supply the label means a
+   *  bug at the resolution step surfaces as a TypeScript error
+   *  ("badgeText required") instead of a falsely-labeled production
+   *  card. The hub-side dispatcher already passes
+   *  `getSourceLabel(sourceRepo)` with a non-null fallback. */
+  badgeText: string
+  /** Pre-composed `<a>` prop bundle. When provided, the outer renders
+   *  as `<a {...anchorProps}>`; otherwise the card is non-interactive. */
+  anchorProps?: DataRoomDocCardAnchorProps
+}
+
+export function DataRoomDocCard({ item, className, badgeText, anchorProps }: DataRoomDocCardProps) {
+  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>
+          <StatusBadge text={badgeText} variant="button" colorScheme="cyan" className="shrink-0" />
+        </span>
+        {item.path ? (
+          <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">Path:</span>
+            <span className="min-w-0 truncate font-mono">{item.path}</span>
+          </span>
+        ) : null}
+        {item.preview ? (
+          <span className="flex min-w-0">
+            <span className="line-clamp-2 whitespace-pre-wrap break-words text-[13px] leading-5 text-ods-text-secondary">
+              {item.preview}
+            </span>
+          </span>
+        ) : null}
+      </span>
+      {anchorProps?.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 (
+      <span className={`${COMPACT_CARD_OUTER_STATIC} ${className ?? ''}`} aria-label="No link available">
+        {body}
+      </span>
+    )
+  }
+  return (
+    <a {...anchorProps} className={`${COMPACT_CARD_OUTER} ${className ?? ''}`}>
+      {body}
+    </a>
+  )
+}
+
+export function DataRoomDocCardSkeleton({ className }: { className?: string }) {
+  return (
+    <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
+      <span className={COMPACT_CARD_TEXT_COL}>
+        <span className="flex 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-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-3/4 rounded bg-ods-bg/60" />
+        </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>
+  )
+}