@echothink-ui/inbox 0.1.0

package/src/components/MessagePreview.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import type { Attachment, ThreadMessage } from "../types";
+import { formatDateTime } from "../utils";
+import { AttachmentList } from "./AttachmentList";
+
+export interface MessagePreviewProps extends React.HTMLAttributes<HTMLElement> {
+  message: ThreadMessage;
+  showSubject?: boolean;
+  onPreviewAttachment?: (attachment: Attachment) => void;
+  onDownloadAttachment?: (attachment: Attachment) => void;
+}
+
+export function MessagePreview({
+  message,
+  showSubject = true,
+  onPreviewAttachment,
+  onDownloadAttachment,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: MessagePreviewProps) {
+  const subjectId = React.useId();
+  const attachmentsHeadingId = React.useId();
+  const visibleSubject = showSubject ? message.subject : undefined;
+  const labelledBy = ariaLabel
+    ? ariaLabelledBy
+    : ariaLabelledBy ?? (visibleSubject ? subjectId : undefined);
+  const computedAriaLabel = ariaLabel ?? (labelledBy ? undefined : "Message preview");
+  const hasAttachments = Boolean(message.attachments?.length);
+
+  return (
+    <article
+      {...props}
+      className={["eth-inbox-message-preview", className].filter(Boolean).join(" ")}
+      data-eth-component="MessagePreview"
+      aria-label={computedAriaLabel}
+      aria-labelledby={labelledBy}
+    >
+      <header className="eth-inbox-message-preview__header">
+        <div className="eth-inbox-message-preview__heading">
+          {visibleSubject ? <h3 id={subjectId}>{visibleSubject}</h3> : null}
+          <dl className="eth-inbox-message-preview__recipients" aria-label="Message routing">
+            <div>
+              <dt>From</dt>
+              <dd>{message.from}</dd>
+            </div>
+            <div>
+              <dt>To</dt>
+              <dd>{formatRecipients(message.to)}</dd>
+            </div>
+            {message.cc?.length ? (
+              <div>
+                <dt>Cc</dt>
+                <dd>{formatRecipients(message.cc)}</dd>
+              </div>
+            ) : null}
+          </dl>
+        </div>
+        <time dateTime={message.date}>{formatDateTime(message.date)}</time>
+      </header>
+      <div className="eth-inbox-message-preview__body">
+        <p>{message.body}</p>
+      </div>
+      {hasAttachments ? (
+        <section
+          className="eth-inbox-message-preview__attachments"
+          aria-labelledby={attachmentsHeadingId}
+        >
+          <h4 id={attachmentsHeadingId}>Attachments</h4>
+          <AttachmentList
+            attachments={message.attachments}
+            onPreview={onPreviewAttachment}
+            onDownload={onDownloadAttachment}
+          />
+        </section>
+      ) : null}
+    </article>
+  );
+}
+
+function formatRecipients(recipients: string[]) {
+  return recipients.length ? recipients.join(", ") : "No recipients";
+}

package/src/components/MessageSearch.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { IconButton, SearchInput } from "@echothink-ui/core";
+import { ChevronRightIcon } from "@echothink-ui/icons";
+
+export interface MessageSearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  resultCount?: number;
+  activeResultIndex?: number;
+  onPreviousResult?: () => void;
+  onNextResult?: () => void;
+}
+
+export function MessageSearch({
+  value = "",
+  onChange,
+  placeholder = "Search messages",
+  resultCount,
+  activeResultIndex = 0,
+  onPreviousResult,
+  onNextResult,
+  className,
+  role,
+  "aria-label": ariaLabel,
+  ...props
+}: MessageSearchProps) {
+  const hasResultCount = typeof resultCount === "number";
+  const normalizedResultCount =
+    hasResultCount && Number.isFinite(resultCount) ? Math.max(0, Math.trunc(resultCount)) : 0;
+  const normalizedResultIndex = Number.isFinite(activeResultIndex)
+    ? Math.trunc(activeResultIndex)
+    : 0;
+  const hasResults = normalizedResultCount > 0;
+  const currentResult = hasResults
+    ? Math.min(Math.max(normalizedResultIndex, 0), normalizedResultCount - 1) + 1
+    : 0;
+  const canGoPrevious = hasResults && currentResult > 1 && Boolean(onPreviousResult);
+  const canGoNext = hasResults && currentResult < normalizedResultCount && Boolean(onNextResult);
+  const resultNoun = normalizedResultCount === 1 ? "result" : "results";
+  const resultLabel = hasResults
+    ? `${currentResult} of ${normalizedResultCount} ${resultNoun}`
+    : "No results";
+
+  return (
+    <div
+      {...props}
+      className={["eth-inbox-search", className].filter(Boolean).join(" ")}
+      data-eth-component="MessageSearch"
+      role={role ?? "search"}
+      aria-label={ariaLabel ?? "Message search"}
+    >
+      <div className="eth-inbox-search__input">
+        <SearchInput
+          value={value}
+          placeholder={placeholder}
+          labelText={placeholder}
+          onChange={(event) => onChange?.(event.currentTarget.value)}
+          onClear={() => onChange?.("")}
+          className="eth-inbox-search__control"
+        />
+      </div>
+      {hasResultCount ? (
+        <div className="eth-inbox-search__results">
+          <span className="eth-inbox-search__count" aria-live="polite">
+            {resultLabel}
+          </span>
+          <div
+            className="eth-inbox-search__nav"
+            role="group"
+            aria-label="Search result navigation"
+          >
+            <IconButton
+              className="eth-inbox-search__nav-button eth-inbox-search__nav-button--previous"
+              density="compact"
+              intent="ghost"
+              label="Previous result"
+              icon={<ChevronRightIcon size={16} />}
+              disabled={!canGoPrevious}
+              onClick={onPreviousResult}
+            />
+            <IconButton
+              className="eth-inbox-search__nav-button"
+              density="compact"
+              intent="ghost"
+              label="Next result"
+              icon={<ChevronRightIcon size={16} />}
+              disabled={!canGoNext}
+              onClick={onNextResult}
+            />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/MessageThread.tsx

@@ -0,0 +1,173 @@
+import * as React from "react";
+import { Badge, Button, StatusDot } from "@echothink-ui/core";
+import type { EthDensity, EthIntent, EthOperationalStatus } from "@echothink-ui/core";
+import type { Attachment, MessageThreadModel, ThreadMessage } from "../types";
+import { formatDateTime } from "../utils";
+import { MessagePreview } from "./MessagePreview";
+
+export interface MessageThreadAction {
+  id: string;
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  intent?: EthIntent;
+  density?: EthDensity;
+  disabled?: boolean;
+  onSelect?: () => void;
+}
+
+export interface MessageThreadProps extends React.HTMLAttributes<HTMLElement> {
+  thread?: MessageThreadModel;
+  summaryRef?: React.ReactNode;
+  status?: EthOperationalStatus;
+  statusLabel?: React.ReactNode;
+  actions?: MessageThreadAction[];
+  onPreviewAttachment?: (attachment: Attachment) => void;
+  onDownloadAttachment?: (attachment: Attachment) => void;
+}
+
+export function MessageThread({
+  thread,
+  summaryRef,
+  status,
+  statusLabel,
+  actions = [],
+  onPreviewAttachment,
+  onDownloadAttachment,
+  className,
+  ...props
+}: MessageThreadProps) {
+  const messages = React.useMemo(
+    () =>
+      [...(thread?.messages ?? [])].sort(
+        (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
+      ),
+    [thread?.messages]
+  );
+  const older = messages.slice(0, Math.max(0, messages.length - 3));
+  const recent = messages.slice(Math.max(0, messages.length - 3));
+  const participantCount = countParticipants(messages);
+  const attachmentCount = messages.reduce(
+    (count, message) => count + (message.attachments?.length ?? 0),
+    0
+  );
+  const latestMessage = messages.at(-1);
+  const messageLabel = formatCount(messages.length, "message");
+  const participantLabel = formatCount(participantCount, "participant");
+  const attachmentLabel = formatCount(attachmentCount, "attachment");
+
+  return (
+    <article
+      {...props}
+      className={`eth-inbox-thread ${className ?? ""}`}
+      data-eth-component="MessageThread"
+    >
+      <header className="eth-inbox-thread__header">
+        <div className="eth-inbox-thread__heading">
+          <span className="eth-inbox-thread__eyebrow">Conversation thread</span>
+          <h2>{thread?.subject ?? "Thread"}</h2>
+          <ul className="eth-inbox-thread__meta" aria-label="Thread metadata">
+            <li>
+              <Badge severity="neutral">{messageLabel}</Badge>
+            </li>
+            <li>
+              <Badge severity="neutral">{participantLabel}</Badge>
+            </li>
+            {attachmentCount ? (
+              <li>
+                <Badge severity="info">{attachmentLabel}</Badge>
+              </li>
+            ) : null}
+            {status ? (
+              <li>
+                <StatusDot status={status} label={statusLabel ?? statusToLabel(status)} />
+              </li>
+            ) : null}
+            {latestMessage ? (
+              <li className="eth-inbox-thread__updated">
+                Last activity{" "}
+                <time dateTime={latestMessage.date}>{formatDateTime(latestMessage.date)}</time>
+              </li>
+            ) : null}
+          </ul>
+        </div>
+        {actions.length ? (
+          <div className="eth-inbox-thread__actions" role="group" aria-label="Thread actions">
+            {actions.map((action) => (
+              <Button
+                key={action.id}
+                intent={action.intent ?? "secondary"}
+                density={action.density ?? "compact"}
+                disabled={action.disabled}
+                icon={action.icon}
+                onClick={action.onSelect}
+              >
+                {action.label}
+              </Button>
+            ))}
+          </div>
+        ) : null}
+      </header>
+      {summaryRef ? (
+        <aside className="eth-inbox-thread__summary" aria-label="Thread summary">
+          <span className="eth-inbox-thread__summary-label">Thread summary</span>
+          <div className="eth-inbox-thread__summary-body">{summaryRef}</div>
+        </aside>
+      ) : null}
+      {!messages.length ? (
+        <div className="eth-inbox-thread__empty" role="status">
+          <strong>No messages in this thread</strong>
+          <span>Replies, summaries, and attachment activity will appear here.</span>
+        </div>
+      ) : null}
+      {older.length ? (
+        <details className="eth-inbox-thread__older">
+          <summary>{formatCount(older.length, "older message")}</summary>
+          {older.map((message) => (
+            <MessagePreview
+              key={message.id}
+              message={message}
+              showSubject={false}
+              onPreviewAttachment={onPreviewAttachment}
+              onDownloadAttachment={onDownloadAttachment}
+            />
+          ))}
+        </details>
+      ) : null}
+      <div className="eth-inbox-thread__messages">
+        {recent.map((message) => (
+          <MessagePreview
+            key={message.id}
+            message={message}
+            showSubject={false}
+            onPreviewAttachment={onPreviewAttachment}
+            onDownloadAttachment={onDownloadAttachment}
+          />
+        ))}
+      </div>
+    </article>
+  );
+}
+
+function countParticipants(messages: ThreadMessage[]) {
+  const participants = new Set<string>();
+
+  messages.forEach((message) => {
+    participants.add(message.from);
+    message.to.forEach((recipient) => participants.add(recipient));
+    message.cc?.forEach((recipient) => participants.add(recipient));
+    message.bcc?.forEach((recipient) => participants.add(recipient));
+  });
+
+  return participants.size;
+}
+
+function formatCount(value: number, singular: string) {
+  return `${value} ${value === 1 ? singular : `${singular}s`}`;
+}
+
+function statusToLabel(status: EthOperationalStatus) {
+  return status
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}

package/src/components/PriorityInboxView.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import type { InboxThread } from "../types";
+import { MessageList } from "./MessageList";
+
+export interface PriorityInboxGroup {
+  id: string;
+  title: string;
+  description?: React.ReactNode;
+  threads: InboxThread[];
+}
+
+export interface PriorityInboxViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  groups?: PriorityInboxGroup[];
+  selectedThreadId?: string;
+  onSelect?: (threadId: string) => void;
+}
+
+export function PriorityInboxView({
+  groups = [],
+  selectedThreadId,
+  onSelect,
+  className,
+  ...props
+}: PriorityInboxViewProps) {
+  const hasGroups = groups.length > 0;
+  const idBase = React.useId();
+
+  return (
+    <div
+      {...props}
+      className={`eth-inbox-priority ${className ?? ""}`}
+      data-eth-component="PriorityInboxView"
+    >
+      {hasGroups ? (
+        groups.map((group, index) => {
+          const headingId = `${idBase}-group-${index}-heading`;
+
+          return (
+            <section
+              key={group.id}
+              className="eth-inbox-priority__group"
+              aria-labelledby={headingId}
+            >
+              <header className="eth-inbox-priority__group-header">
+                <div className="eth-inbox-priority__heading">
+                  <h3 id={headingId}>{group.title}</h3>
+                  {group.description ? (
+                    <p className="eth-inbox-priority__description">{group.description}</p>
+                  ) : null}
+                </div>
+                <span className="eth-inbox-priority__count">
+                  {formatThreadCount(group.threads.length)}
+                </span>
+              </header>
+              <MessageList
+                threads={group.threads}
+                selectedThreadId={selectedThreadId}
+                onSelect={onSelect}
+              />
+            </section>
+          );
+        })
+      ) : (
+        <div className="eth-inbox-priority__empty" role="status" aria-label="No priority threads">
+          No priority threads
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatThreadCount(count: number) {
+  return `${count} ${count === 1 ? "thread" : "threads"}`;
+}

package/src/components/RecipientPicker.tsx

@@ -0,0 +1,181 @@
+import * as React from "react";
+import { Button, SearchInput, Tag, TextInput } from "@echothink-ui/core";
+import type { RecipientSuggestion } from "../types";
+
+export interface RecipientPickerProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  onSearch?: (q: string) => void;
+  suggestions?: RecipientSuggestion[];
+  defaultSuggestionsOpen?: boolean;
+}
+
+export function RecipientPicker({
+  value = [],
+  onChange,
+  onSearch,
+  suggestions = [],
+  defaultSuggestionsOpen = false,
+  className,
+  ...props
+}: RecipientPickerProps) {
+  const listboxId = React.useId().replace(/:/g, "");
+  const [query, setQuery] = React.useState("");
+  const [manualValue, setManualValue] = React.useState("");
+  const [suggestionsOpen, setSuggestionsOpen] = React.useState(defaultSuggestionsOpen);
+
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  const visibleSuggestions = normalizedQuery
+    ? suggestions.filter((suggestion) =>
+        [suggestion.label, suggestion.email].some((field) =>
+          field.toLocaleLowerCase().includes(normalizedQuery)
+        )
+      )
+    : suggestions;
+  const showSuggestions = suggestionsOpen && (visibleSuggestions.length > 0 || Boolean(query));
+
+  const add = (email: string) => {
+    const normalizedEmail = email.trim();
+
+    if (!normalizedEmail || value.includes(normalizedEmail)) return false;
+
+    onChange?.([...value, normalizedEmail]);
+    setManualValue("");
+    setQuery("");
+    return true;
+  };
+
+  const updateQuery = (nextQuery: string) => {
+    setQuery(nextQuery);
+    onSearch?.(nextQuery);
+    setSuggestionsOpen(Boolean(nextQuery || suggestions.length));
+  };
+
+  return (
+    <div
+      {...props}
+      className={`eth-inbox-recipient-picker ${className ?? ""}`}
+      data-eth-component="RecipientPicker"
+      onBlur={(event) => {
+        props.onBlur?.(event);
+
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+          setSuggestionsOpen(false);
+        }
+      }}
+      onKeyDown={(event) => {
+        props.onKeyDown?.(event);
+
+        if (!event.defaultPrevented && event.key === "Escape") {
+          setSuggestionsOpen(false);
+        }
+      }}
+    >
+      <div className="eth-inbox-recipient-picker__selected" aria-label="Selected recipients">
+        <span className="eth-inbox-recipient-picker__label">To</span>
+        <div className="eth-inbox-recipient-picker__chips">
+          {value.length ? (
+            value.map((email) => (
+              <Tag
+                key={email}
+                removable
+                onRemove={() => onChange?.(value.filter((item) => item !== email))}
+              >
+                {email}
+              </Tag>
+            ))
+          ) : (
+            <span className="eth-inbox-recipient-picker__placeholder">No recipients selected</span>
+          )}
+        </div>
+      </div>
+      <SearchInput
+        aria-controls={showSuggestions ? listboxId : undefined}
+        aria-expanded={showSuggestions}
+        aria-haspopup="listbox"
+        className="eth-inbox-recipient-picker__search"
+        labelText="Search recipients"
+        value={query}
+        placeholder="Search recipients"
+        onFocus={() => setSuggestionsOpen(Boolean(suggestions.length))}
+        onChange={(event) => updateQuery(event.currentTarget.value)}
+        onClear={() => {
+          updateQuery("");
+          setSuggestionsOpen(false);
+        }}
+      />
+      <div className="eth-inbox-recipient-picker__manual">
+        <TextInput
+          className="eth-inbox-recipient-picker__manual-input"
+          density="compact"
+          hideLabel
+          labelText="Recipient email"
+          type="email"
+          value={manualValue}
+          placeholder="name@company.com"
+          onChange={(event) => setManualValue(event.currentTarget.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              add(manualValue);
+            }
+          }}
+        />
+        <Button
+          density="compact"
+          disabled={!manualValue.trim()}
+          intent="primary"
+          onClick={() => add(manualValue)}
+        >
+          Add recipient
+        </Button>
+      </div>
+      {showSuggestions ? (
+        <div
+          className="eth-inbox-recipient-picker__suggestions"
+          id={listboxId}
+          role="listbox"
+          aria-label="Recipient suggestions"
+          aria-multiselectable
+        >
+          <div className="eth-inbox-recipient-picker__suggestions-header">
+            <span>Suggested recipients</span>
+            <strong>
+              {visibleSuggestions.length} result{visibleSuggestions.length === 1 ? "" : "s"}
+            </strong>
+          </div>
+          {visibleSuggestions.length ? (
+            <ul className="eth-inbox-recipient-picker__suggestions-list">
+              {visibleSuggestions.map((suggestion) => {
+                const isSelected = value.includes(suggestion.email);
+
+                return (
+                  <li key={suggestion.id}>
+                    <button
+                      type="button"
+                      role="option"
+                      aria-selected={isSelected}
+                      aria-disabled={isSelected ? true : undefined}
+                      onClick={() => add(suggestion.email)}
+                    >
+                      <span className="eth-inbox-recipient-picker__suggestion-copy">
+                        <strong>{suggestion.label}</strong>
+                        <span>{suggestion.email}</span>
+                      </span>
+                      <span className="eth-inbox-recipient-picker__suggestion-status">
+                        {isSelected ? "Selected" : "Add"}
+                      </span>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <p className="eth-inbox-recipient-picker__empty">No matching recipients</p>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}