Message Draft

1"use client";
2 
3import * as React from "react";
4import { cn, Button } from "./_adapter";
5import type {
6  MessageDraftProps,
7  SerializableEmailDraft,
8  SerializableSlackDraft,
9} from "./schema";
10import { ActionButtons } from "../shared/action-buttons";
11import type { Action } from "../shared/schema";
12import { Check, ChevronDown } from "lucide-react";
13 
14type DraftState = "review" | "sending" | "sent" | "cancelled";
15type DraftOutcome = MessageDraftProps["outcome"];
16 
17const DEFAULT_GRACE_PERIOD = 5000;
18const COLLAPSED_BODY_HEIGHT = 280;
19 
20interface RecipientRowProps {
21  label: string;
22  recipients: string[];
23  maxVisible?: number;
24  muted?: boolean;
25}
26 
27function RecipientRow({
28  label,
29  recipients,
30  maxVisible = 3,
31  muted = false,
32}: RecipientRowProps) {
33  const visibleRecipients = recipients.slice(0, maxVisible);
34  const overflowCount = recipients.length - maxVisible;
35 
36  return (
37    <tr className="text-sm">
38      <td className="text-muted-foreground w-0 pr-4 pb-1 text-right align-top font-medium whitespace-nowrap">
39        {label}
40      </td>
41      <td className={cn("pb-1 align-top", muted && "text-muted-foreground")}>
42        {visibleRecipients.join(", ")}
43        {overflowCount > 0 && (
44          <span className="text-muted-foreground"> +{overflowCount} more</span>
45        )}
46      </td>
47    </tr>
48  );
49}
50 
51interface SingleFieldRowProps {
52  label: string;
53  value: string;
54}
55 
56function SingleFieldRow({ label, value }: SingleFieldRowProps) {
57  return (
58    <tr className="text-sm">
59      <td className="text-muted-foreground w-0 pr-4 pb-1 text-right align-top font-medium whitespace-nowrap">
60        {label}
61      </td>
62      <td className="pb-1 align-top">{value}</td>
63    </tr>
64  );
65}
66 
67interface ExpandableBodyProps {
68  body: string;
69  isExpanded: boolean;
70  onNeedsExpansionChange?: (needsExpansion: boolean) => void;
71}
72 
73function ExpandableBody({
74  body,
75  isExpanded,
76  onNeedsExpansionChange,
77}: ExpandableBodyProps) {
78  const [needsExpansion, setNeedsExpansion] = React.useState<boolean | null>(
79    null,
80  );
81  const contentRef = React.useRef<HTMLDivElement>(null);
82 
83  React.useLayoutEffect(() => {
84    if (contentRef.current) {
85      const needs = contentRef.current.scrollHeight > COLLAPSED_BODY_HEIGHT;
86      setNeedsExpansion(needs);
87      onNeedsExpansionChange?.(needs);
88    }
89  }, [body, onNeedsExpansionChange]);
90 
91  return (
92    <div className="relative">
93      <div
94        ref={contentRef}
95        className={cn(
96// … truncated