| 1 | import type { ReactNode } from "react"; |
| 2 | |
| 3 | import { InlineButton } from "../ui/button"; |
| 4 | |
| 5 | /** |
| 6 | * One quiet line after the last message for thread state that does not change |
| 7 | * what Enter does: settled, snoozed, or just woke. Sending a message clears each of |
| 8 | * them, so the action is only the explicit way out. |
| 9 | */ |
| 10 | export function ThreadStatusLine(props: { |
| 11 | readonly icon: ReactNode; |
| 12 | readonly label: string; |
| 13 | readonly actionLabel: string; |
| 14 | readonly actionDisabled?: boolean; |
| 15 | readonly onAction: () => void; |
| 16 | }) { |
| 17 | return ( |
| 18 | <div |
| 19 | data-chat-thread-status-line="true" |
| 20 | className="mx-auto flex w-full min-w-0 max-w-(--chat-content-max-width) items-center gap-1.5 px-1 pb-2 text-muted-foreground text-xs [&_svg]:size-3.5 [&_svg]:shrink-0" |
| 21 | > |
| 22 | {props.icon} |
| 23 | <span className="min-w-0 truncate">{props.label}</span> |
| 24 | <span aria-hidden="true">·</span> |
| 25 | <InlineButton tone="muted" disabled={props.actionDisabled} onClick={props.onAction}> |
| 26 | {props.actionLabel} |
| 27 | </InlineButton> |
| 28 | </div> |
| 29 | ); |
| 30 | } |