@startsimpli/ui 0.4.13 → 0.4.15

package/src/components/calendar/meetings-list.tsx

@@ -0,0 +1,202 @@
+"use client"
+
+/**
+ * MeetingsList — table-style meeting list with status badges, join links,
+ * and an optional delete action.
+ *
+ * Distinct from UpcomingMeetings (sidebar card-stack); this is the
+ * full-width table-row layout used by /calendar's "All Meetings" section
+ * and /fundraises/[id]/outreach's MeetingsTab (Upcoming + Past lists).
+ *
+ * Pure presentational. The consumer owns sort, filter, fetch, and delete
+ * confirmation.
+ *
+ * lifecycle:calendar-ui (raise-simpli-9cp)
+ */
+
+import * as React from "react"
+import { CalendarDays, ExternalLink, Plus, Trash2 } from "lucide-react"
+import { Button } from "../ui/button"
+import { cn } from "../../utils"
+
+export type MeetingsListStatus = "pending" | "confirmed" | "cancelled" | "completed"
+
+export interface MeetingsListItem {
+  id: string | number
+  title: string
+  /** ISO 8601 timestamp string */
+  scheduled_at: string
+  status: MeetingsListStatus
+  duration_minutes?: number
+  investor_name?: string
+  investor_email?: string
+  meeting_link?: string
+}
+
+export interface MeetingsListProps<T extends MeetingsListItem = MeetingsListItem> {
+  meetings: T[]
+  /** Whether the list is still loading. */
+  loading?: boolean
+  /** Number of skeleton rows to show while loading. Defaults to 4. */
+  loadingRowCount?: number
+  /** If set, each row gets a delete (trash) button that calls this with the id. */
+  onDelete?: (id: string | number) => void
+  /** If set, the whole row becomes clickable. */
+  onRowClick?: (meeting: T) => void
+  /** If set, the empty state shows a "Schedule First Meeting" CTA wired to this. */
+  onSchedule?: () => void
+  /** Empty-state copy. Defaults to "No meetings scheduled yet." */
+  emptyMessage?: string
+  /** className passed to the wrapping div. */
+  className?: string
+}
+
+const STATUS_BADGE: Record<MeetingsListStatus, { label: string; className: string }> = {
+  pending: { label: "Pending", className: "bg-yellow-100 text-yellow-800" },
+  confirmed: { label: "Confirmed", className: "bg-green-100 text-green-800" },
+  cancelled: { label: "Cancelled", className: "bg-red-100 text-red-800" },
+  completed: { label: "Completed", className: "bg-gray-100 text-gray-800" },
+}
+
+function formatDate(isoStr: string): string {
+  return new Date(isoStr).toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  })
+}
+
+function formatTime(isoStr: string): string {
+  return new Date(isoStr).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" })
+}
+
+/**
+ * @example
+ * <MeetingsList
+ *   meetings={meetings}
+ *   loading={loading}
+ *   onDelete={id => deleteMeeting(id)}
+ *   onSchedule={() => setShowSchedule(true)}
+ * />
+ */
+export function MeetingsList<T extends MeetingsListItem = MeetingsListItem>({
+  meetings,
+  loading = false,
+  loadingRowCount = 4,
+  onDelete,
+  onRowClick,
+  onSchedule,
+  emptyMessage = "No meetings scheduled yet.",
+  className,
+}: MeetingsListProps<T>) {
+  if (loading) {
+    return (
+      <div className={cn("p-4 space-y-2", className)}>
+        {Array.from({ length: loadingRowCount }).map((_, i) => (
+          <div key={i} className="h-12 bg-muted animate-pulse rounded" />
+        ))}
+      </div>
+    )
+  }
+
+  if (meetings.length === 0) {
+    return (
+      <div className={cn("text-center py-12 text-muted-foreground", className)}>
+        <CalendarDays className="h-10 w-10 mx-auto mb-3 opacity-40" />
+        <p>{emptyMessage}</p>
+        {onSchedule && (
+          <Button className="mt-3" onClick={onSchedule}>
+            <Plus className="mr-2 h-4 w-4" />
+            Schedule First Meeting
+          </Button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("divide-y", className)}>
+      {meetings.map(m => {
+        const badge = STATUS_BADGE[m.status]
+        const interactive = !!onRowClick
+        return (
+          <div
+            key={m.id}
+            role={interactive ? "button" : undefined}
+            tabIndex={interactive ? 0 : undefined}
+            onClick={interactive ? () => onRowClick(m) : undefined}
+            onKeyDown={
+              interactive
+                ? e => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      onRowClick(m)
+                    }
+                  }
+                : undefined
+            }
+            className={cn(
+              "flex items-center justify-between px-4 py-3 transition-colors",
+              interactive && "hover:bg-muted/50 cursor-pointer",
+              !interactive && "hover:bg-muted/50",
+            )}
+          >
+            <div className="flex items-center gap-4 min-w-0">
+              <div className="min-w-0">
+                <p className="font-medium text-sm truncate">{m.title}</p>
+                {(m.investor_name || m.investor_email) && (
+                  <p className="text-xs text-muted-foreground truncate">
+                    {m.investor_name || m.investor_email}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4 shrink-0 ml-4">
+              <div className="text-right text-xs text-muted-foreground hidden sm:block">
+                <p>{formatDate(m.scheduled_at)}</p>
+                <p>
+                  {formatTime(m.scheduled_at)}
+                  {m.duration_minutes ? ` · ${m.duration_minutes}min` : ""}
+                </p>
+              </div>
+
+              <span className={cn("text-xs px-2 py-0.5 rounded font-medium", badge.className)}>
+                {badge.label}
+              </span>
+
+              {m.meeting_link && (
+                <a
+                  href={m.meeting_link}
+                  target="_blank"
+                  rel="noreferrer"
+                  onClick={e => e.stopPropagation()}
+                  className="text-primary"
+                  title="Join meeting"
+                >
+                  <ExternalLink className="h-4 w-4" />
+                </a>
+              )}
+
+              {onDelete && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={e => {
+                    e.stopPropagation()
+                    onDelete(m.id)
+                  }}
+                  className="h-7 w-7 p-0 text-muted-foreground hover:text-red-600"
+                  aria-label="Delete meeting"
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/calendar/upcoming-meetings.tsx

@@ -0,0 +1,211 @@
+"use client"
+
+/**
+ * UpcomingMeetings — sidebar/widget listing the next N meetings with status,
+ * date, time, and an optional join-link.
+ *
+ * Pure presentational. The consumer owns the data fetch + filtering — pass
+ * the already-filtered, already-sorted meetings via the `meetings` prop. This
+ * keeps the component decoupled from any specific API client or data shape
+ * beyond the small interface declared below.
+ *
+ * lifecycle:calendar-ui (raise-simpli-azc)
+ */
+
+import * as React from "react"
+import { CalendarDays, Clock, ExternalLink, Plus } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"
+import { Button } from "../ui/button"
+import { cn } from "../../utils"
+
+export type UpcomingMeetingStatus = "pending" | "confirmed" | "cancelled" | "completed"
+
+export interface UpcomingMeeting {
+  id: string | number
+  title: string
+  /** ISO 8601 timestamp string */
+  scheduled_at: string
+  status: UpcomingMeetingStatus
+  investor_name?: string
+  investor_email?: string
+  meeting_link?: string
+}
+
+export interface UpcomingMeetingsProps<T extends UpcomingMeeting = UpcomingMeeting> {
+  meetings: T[]
+  /** Whether the list is still loading. Renders skeletons. */
+  loading?: boolean
+  /** Optional click handler when a meeting row is clicked (whole row). */
+  onMeetingClick?: (meeting: T) => void
+  /** Optional URL for the "View all" header link. Hidden if absent. */
+  viewAllHref?: string
+  /** Optional click handler for the "View all" header link. Used instead of href if provided. */
+  onViewAll?: () => void
+  /** Optional click handler for the empty-state "Schedule one" CTA. Hidden if absent. */
+  onSchedule?: () => void
+  /** Custom class name for the outer Card. */
+  className?: string
+  /** Title shown in the card header. Defaults to "Upcoming Meetings". */
+  title?: string
+  /** Number of skeleton rows to show while loading. Defaults to 3. */
+  loadingRowCount?: number
+}
+
+const STATUS_BADGE: Record<UpcomingMeetingStatus, { label: string; className: string }> = {
+  pending: { label: "Pending", className: "bg-yellow-100 text-yellow-800" },
+  confirmed: { label: "Confirmed", className: "bg-green-100 text-green-800" },
+  cancelled: { label: "Cancelled", className: "bg-red-100 text-red-800" },
+  completed: { label: "Completed", className: "bg-gray-100 text-gray-800" },
+}
+
+function formatDate(isoStr: string): string {
+  return new Date(isoStr).toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+  })
+}
+
+function formatTime(isoStr: string): string {
+  return new Date(isoStr).toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+/**
+ * @example
+ * <UpcomingMeetings
+ *   meetings={upcoming}
+ *   loading={isLoading}
+ *   viewAllHref="/calendar"
+ *   onSchedule={() => setShowSchedule(true)}
+ * />
+ */
+export function UpcomingMeetings<T extends UpcomingMeeting = UpcomingMeeting>({
+  meetings,
+  loading = false,
+  onMeetingClick,
+  viewAllHref,
+  onViewAll,
+  onSchedule,
+  className,
+  title = "Upcoming Meetings",
+  loadingRowCount = 3,
+}: UpcomingMeetingsProps<T>) {
+  return (
+    <Card className={className}>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-semibold flex items-center gap-2">
+            <CalendarDays className="h-4 w-4" />
+            {title}
+          </CardTitle>
+          {(viewAllHref || onViewAll) && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              asChild={!!viewAllHref && !onViewAll}
+              onClick={onViewAll}
+            >
+              {viewAllHref && !onViewAll ? <a href={viewAllHref}>View all</a> : <span>View all</span>}
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="pt-0">
+        {loading ? (
+          <div className="space-y-2">
+            {Array.from({ length: loadingRowCount }).map((_, i) => (
+              <div key={i} className="h-14 bg-muted animate-pulse rounded-md" />
+            ))}
+          </div>
+        ) : meetings.length === 0 ? (
+          <div className="text-center py-6 text-muted-foreground">
+            <CalendarDays className="h-8 w-8 mx-auto mb-2 opacity-40" />
+            <p className="text-xs">No upcoming meetings</p>
+            {onSchedule && (
+              <Button variant="outline" size="sm" className="mt-3 h-7 text-xs" onClick={onSchedule}>
+                <Plus className="mr-1 h-3 w-3" />
+                Schedule one
+              </Button>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {meetings.map(m => {
+              const badge = STATUS_BADGE[m.status]
+              const interactive = !!onMeetingClick
+              return (
+                <div
+                  key={m.id}
+                  role={interactive ? "button" : undefined}
+                  tabIndex={interactive ? 0 : undefined}
+                  onClick={interactive ? () => onMeetingClick(m) : undefined}
+                  onKeyDown={
+                    interactive
+                      ? e => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault()
+                            onMeetingClick(m)
+                          }
+                        }
+                      : undefined
+                  }
+                  className={cn(
+                    "border rounded-lg p-2.5 space-y-1 transition-colors",
+                    interactive && "hover:bg-muted/40 cursor-pointer",
+                  )}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <p className="font-medium text-xs leading-tight line-clamp-1">{m.title}</p>
+                    <span
+                      className={cn(
+                        "text-[10px] px-1.5 py-0.5 rounded font-medium whitespace-nowrap shrink-0",
+                        badge.className,
+                      )}
+                    >
+                      {badge.label}
+                    </span>
+                  </div>
+
+                  {(m.investor_name || m.investor_email) && (
+                    <p className="text-[11px] text-muted-foreground truncate">
+                      {m.investor_name || m.investor_email}
+                    </p>
+                  )}
+
+                  <div className="flex items-center gap-3 text-[11px] text-muted-foreground">
+                    <span className="flex items-center gap-1">
+                      <CalendarDays className="h-3 w-3" />
+                      {formatDate(m.scheduled_at)}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Clock className="h-3 w-3" />
+                      {formatTime(m.scheduled_at)}
+                    </span>
+                  </div>
+
+                  {m.meeting_link && (
+                    <a
+                      href={m.meeting_link}
+                      target="_blank"
+                      rel="noreferrer"
+                      onClick={e => e.stopPropagation()}
+                      className="flex items-center gap-1 text-[11px] text-primary hover:underline"
+                    >
+                      <ExternalLink className="h-3 w-3" />
+                      Join
+                    </a>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/chat/ChatComposer.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import * as React from 'react'
+import { SendHorizonal } from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+export interface ChatComposerProps {
+  /** Controlled value. Omit for uncontrolled usage. */
+  value?: string
+  onChange?: (value: string) => void
+  /** Called with the trimmed message text on submit. */
+  onSubmit: (text: string) => void
+  placeholder?: string
+  /** Disables input entirely. */
+  disabled?: boolean
+  /** Submission in flight — input stays editable but submit is blocked. */
+  busy?: boolean
+  submitLabel?: string
+  /** Max rows the textarea grows to before scrolling. Default 10. */
+  maxRows?: number
+  className?: string
+}
+
+/**
+ * Chat input with auto-growing textarea. Enter submits, Shift+Enter inserts a
+ * newline, and large pastes are accepted as-is. Controlled or uncontrolled.
+ */
+export function ChatComposer({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = 'Message…',
+  disabled = false,
+  busy = false,
+  submitLabel = 'Send',
+  maxRows = 10,
+  className,
+}: ChatComposerProps) {
+  const isControlled = value !== undefined
+  const [internal, setInternal] = React.useState('')
+  const text = isControlled ? value! : internal
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+
+  const setText = (next: string) => {
+    if (!isControlled) setInternal(next)
+    onChange?.(next)
+  }
+
+  // auto-grow
+  React.useEffect(() => {
+    const el = textareaRef.current
+    if (!el) return
+    el.style.height = 'auto'
+    const lineHeight = 24
+    el.style.height = `${Math.min(el.scrollHeight, lineHeight * maxRows)}px`
+  }, [text, maxRows])
+
+  const canSubmit = !disabled && !busy && text.trim().length > 0
+
+  const submit = () => {
+    if (!canSubmit) return
+    onSubmit(text.trim())
+    if (!isControlled) setInternal('')
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key !== 'Enter') return
+    // Cmd/Ctrl+Enter always submits (handy for multi-line content).
+    if (e.metaKey || e.ctrlKey) {
+      e.preventDefault()
+      submit()
+      return
+    }
+    if (e.shiftKey) return // explicit newline
+    // Bare Enter submits ONLY single-line content. When the value already
+    // spans multiple lines (e.g. a pasted outline) Enter inserts a newline so
+    // the multi-line block stays intact — submit via the button or Cmd+Enter.
+    if (text.includes('\n')) return
+    e.preventDefault()
+    submit()
+  }
+
+  return (
+    <div className={cn('flex items-end gap-2 border-t border-border bg-background p-3', className)}>
+      <textarea
+        ref={textareaRef}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={1}
+        className={cn(
+          'flex-1 resize-none rounded-lg border border-input bg-background px-3 py-2 text-sm shadow-sm',
+          'placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50'
+        )}
+      />
+      <button
+        type="button"
+        onClick={submit}
+        disabled={!canSubmit}
+        aria-label={submitLabel}
+        className={cn(
+          'inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm transition-opacity',
+          'hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40'
+        )}
+      >
+        <SendHorizonal className="h-4 w-4" aria-hidden="true" />
+      </button>
+    </div>
+  )
+}

package/src/components/chat/ChatMessage.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import * as React from 'react'
+import { Wrench } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import type { ChatMessageData } from './types'
+
+export interface ChatMessageProps {
+  message: ChatMessageData
+  /** Optional custom renderer for the message body (e.g. markdown). */
+  renderContent?: (content: string, message: ChatMessageData) => React.ReactNode
+  className?: string
+}
+
+function StreamingDots() {
+  return (
+    <span className="ml-1 inline-flex gap-0.5 align-middle" aria-hidden="true">
+      <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.3s]" />
+      <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.15s]" />
+      <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-current" />
+    </span>
+  )
+}
+
+/**
+ * A single chat row. Text messages render as aligned bubbles (user right,
+ * assistant left); `tool` / `status` kinds render as compact centered system
+ * rows. Fully generic — no presentation-specific knowledge.
+ */
+export function ChatMessage({ message, renderContent, className }: ChatMessageProps) {
+  const { role, content, status, kind = 'text', toolName } = message
+  const isStreaming = status === 'streaming'
+  const isError = status === 'error'
+
+  if (kind === 'tool' || kind === 'status') {
+    return (
+      <div
+        data-role={role}
+        data-kind={kind}
+        data-status={status}
+        aria-busy={isStreaming || undefined}
+        className={cn(
+          'mx-auto flex max-w-[90%] items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-1.5 text-xs text-muted-foreground',
+          isError && 'border-red-300 bg-red-50 text-red-700',
+          className
+        )}
+      >
+        {kind === 'tool' && <Wrench className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />}
+        {toolName && <span className="font-medium text-foreground">{toolName}</span>}
+        <span className="truncate">{content}</span>
+        {isStreaming && <StreamingDots />}
+      </div>
+    )
+  }
+
+  const isUser = role === 'user'
+  const body = renderContent ? renderContent(content, message) : content
+
+  return (
+    <div
+      data-role={role}
+      data-kind={kind}
+      data-status={status}
+      aria-busy={isStreaming || undefined}
+      className={cn('flex w-full', isUser ? 'justify-end' : 'justify-start', className)}
+    >
+      <div
+        className={cn(
+          'max-w-[85%] whitespace-pre-wrap break-words rounded-2xl px-4 py-2 text-sm shadow-sm',
+          isUser
+            ? 'rounded-br-sm bg-primary text-primary-foreground'
+            : 'rounded-bl-sm bg-muted text-foreground',
+          isError && 'border border-red-300 bg-red-50 text-red-700'
+        )}
+      >
+        {body}
+        {isStreaming && <StreamingDots />}
+      </div>
+    </div>
+  )
+}

package/src/components/chat/ChatThread.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { ChatMessage } from './ChatMessage'
+import type { ChatMessageData } from './types'
+
+export interface ChatThreadProps {
+  messages: ChatMessageData[]
+  /** Rendered when there are no messages. */
+  emptyState?: React.ReactNode
+  /** Custom message renderer; defaults to <ChatMessage>. */
+  renderMessage?: (message: ChatMessageData) => React.ReactNode
+  /** Auto-scroll to the newest message on change. Default true. */
+  autoScroll?: boolean
+  renderContent?: (content: string, message: ChatMessageData) => React.ReactNode
+  className?: string
+}
+
+/**
+ * Scrollable, auto-scrolling list of chat messages. App-agnostic.
+ */
+export function ChatThread({
+  messages,
+  emptyState,
+  renderMessage,
+  autoScroll = true,
+  renderContent,
+  className,
+}: ChatThreadProps) {
+  const anchorRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (autoScroll) anchorRef.current?.scrollIntoView({ block: 'end' })
+  }, [messages, autoScroll])
+
+  if (messages.length === 0 && emptyState) {
+    return (
+      <div className={cn('flex h-full items-center justify-center p-6 text-center', className)}>
+        {emptyState}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex h-full flex-col gap-3 overflow-y-auto p-4', className)} role="log" aria-live="polite">
+      {messages.map((m) =>
+        renderMessage ? (
+          <React.Fragment key={m.id}>{renderMessage(m)}</React.Fragment>
+        ) : (
+          <ChatMessage key={m.id} message={m} renderContent={renderContent} />
+        )
+      )}
+      <div ref={anchorRef} data-testid="chat-thread-anchor" />
+    </div>
+  )
+}

package/src/components/chat/index.ts

@@ -0,0 +1,12 @@
+export { ChatMessage } from './ChatMessage'
+export type { ChatMessageProps } from './ChatMessage'
+export { ChatThread } from './ChatThread'
+export type { ChatThreadProps } from './ChatThread'
+export { ChatComposer } from './ChatComposer'
+export type { ChatComposerProps } from './ChatComposer'
+export type {
+  ChatMessageData,
+  ChatRole,
+  ChatMessageStatus,
+  ChatMessageKind,
+} from './types'