main
/**
* The message stream: grouping, date and unread dividers, live rows, optimistic
* rows, per-message actions, scroll anchoring, and the two navigation
* affordances ("加载更早" upward, "N 条新消息 / 回到最新" downward).
*
* Scroll rules, because this is where chat UIs usually break:
* - the viewport follows the tail **only** while it is pinned there, so a row
* that arrives while you read history never yanks the page;
* - prepending an older page keeps the pixel offset of what you were looking at
* (height delta applied in a layout effect, i.e. before paint);
* - "pinned to the tail" is also what the read cursor is derived from, so a
* scrolled-back window does not mark the room as read.
*/
import {
type Attachment,
type ChatMessage,
clockStamp,
dayKey,
dayLabel,
fullStamp,
isGrouped,
isSystemMessage,
MAX_MESSAGE_LEN,
type PendingMessage,
type ThreadBrief,
textLength,
} from '@app/domains/chat/model'
import { useT } from '@app/i18n'
import {
IconArrowDown as ArrowDown,
IconCheck as Check,
IconCopy as Copy,
IconCornerUpLeft as CornerUpLeft,
IconLoader2 as Loader2,
IconMessage as MessageSquare,
IconDots as MoreHorizontal,
IconPencil as Pencil,
IconPin as Pin,
IconRefresh as RefreshCw,
IconMoodPlus as SmilePlus,
IconTrash as Trash2,
IconAlertTriangle as TriangleAlert,
IconX as X,
} from '@tabler/icons-react'
import { type ReactNode, type UIEvent, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
import type { TranscriptState } from '../model/transcript'
import { EmojiPicker } from './emoji-picker'
import { AttachmentGrid, DayDivider, IconAction, Lightbox, MessageBody, Popover, UserAvatar } from './parts'
import { systemLine } from './system-lines'
/** Distance from the bottom (px) that still counts as "reading the tail". */
const STICK_THRESHOLD = 96
/** Distance from the top that triggers a page fetch. */
// Scroll lookahead for the older-messages page: fires early enough that the
// next page is usually merged before the reader reaches the top.
const LOAD_OLDER_THRESHOLD = 320
export interface MessageInteractions {
onReply: (message: ChatMessage) => void
onOpenThread: (message: ChatMessage) => void
onEdit: (message: ChatMessage) => void
onDelete: (message: ChatMessage) => void
onTogglePin: (message: ChatMessage) => void
onReact: (message: ChatMessage, emoji: string, on: boolean) => void
onJump: (messageId: string) => void
/** Own post, or a channel manager: pin and delete are allowed. */
canModerate: (message: ChatMessage) => boolean
/** False for a read-only room: no reply/thread composer at all. */
canParticipate: boolean
threadOf: (messageId: string) => ThreadBrief | undefined
nameOf: (userId: number | null | undefined) => string
}
export interface TranscriptProps {
state: TranscriptState
viewerId?: number
lastReadSeq: number
missedCount: number
listRef: React.RefObject<HTMLDivElement | null>
interactions: MessageInteractions
editingId: string | null
onSaveEdit: (messageId: string, content: string) => Promise<boolean>
onCancelEdit: () => void
onLoadOlder: () => void
onRetrySeed: () => void
onAtBottom: (atBottom: boolean) => void
/** Back to the newest page; replaces the window when the reader jumped away. */
onReturnToLatest: () => void
atBottom: boolean
retryPending: (localId: string) => void
dismissPending: (localId: string) => void
typingNames: string[]
roomLabel: string
customEmojis?: Parameters<typeof EmojiPicker>[0]['custom']
spaceName?: string
}
export function Transcript({
state,
viewerId,
lastReadSeq,
missedCount,
listRef,
interactions,
editingId,
onSaveEdit,
onCancelEdit,
onLoadOlder,
onRetrySeed,
onAtBottom,
onReturnToLatest,
atBottom,
retryPending,
dismissPending,
typingNames,
roomLabel,
customEmojis,
spaceName,
}: TranscriptProps) {
const { t, tc } = useT()
const anchorHeight = useRef<number | null>(null)
const [preview, setPreview] = useState<Attachment | null>(null)
const [flash, setFlash] = useState<string | null>(null)
// Rows are addressed through their `data-message-id` attribute instead of a
// ref map: a callback ref would be re-created (and re-attached) on every render
// just to look a row up once in a while.
const findRow = useCallback(
(id: string) =>
listRef.current?.querySelector<HTMLElement>(`[data-message-id="${id.replace(/[^\w-]/g, '')}"]`) ?? null,
[listRef],
)
const handleScroll = useCallback(
(event: UIEvent<HTMLDivElement>) => {
const node = event.currentTarget
const distance = node.scrollHeight - node.scrollTop - node.clientHeight
onAtBottom(distance <= STICK_THRESHOLD)
if (node.scrollTop < LOAD_OLDER_THRESHOLD && state.hasOlder && !state.loadingOlder) {
anchorHeight.current = node.scrollHeight
onLoadOlder()
}
},
[onAtBottom, onLoadOlder, state.hasOlder, state.loadingOlder],
)
// Keep the reader's position when an older page is inserted above them.
useLayoutEffect(() => {
const target = anchorHeight.current
if (target === null) return
anchorHeight.current = null
const node = listRef.current
if (!node) return
const delta = node.scrollHeight - target
if (delta > 0) node.scrollTop += delta
}, [listRef, state.rows])
// …and bring a jumped-to row into view, flashing it so it is easy to spot.
useEffect(() => {
const id = state.highlightId
if (!id) return
const frame = requestAnimationFrame(() => {
const node = findRow(id)
if (!node) return
node.scrollIntoView({ block: 'center', behavior: 'smooth' })
setFlash(id)
})
return () => cancelAnimationFrame(frame)
}, [findRow, state.highlightId, state.rows])
useEffect(() => {
if (!flash) return
const timer = setTimeout(() => setFlash(null), 2_400)
return () => clearTimeout(timer)
}, [flash])
if (state.accessRevoked) {
return (
<TranscriptNotice
icon={<TriangleAlert className="h-5 w-5" />}
title={t('chat.transcript.accessDenied')}
body={t('chat.transcript.accessDeniedHint')}
/>
)
}
// The divider sits on the first row the viewer has not seen yet.
const unreadIndex = state.rows.findIndex((row) => row.seq > lastReadSeq)
const atError = state.error !== null && state.rows.length === 0
return (
<div className="chat-transcript relative flex min-h-0 flex-1 flex-col">
<div
ref={listRef}
onScroll={handleScroll}
aria-label={t('chat.transcript.aria')}
className="chat-message-list min-h-0 flex-1 overflow-y-auto overflow-x-hidden pb-3"
>
{state.loadingOlder ? (
<p className="py-2 text-center text-[11.5px] text-shell-ink-muted">
<Loader2 className="mr-1 inline h-3 w-3 animate-spin" />
{t('chat.transcript.loadingOlder')}
</p>
) : state.hasOlder ? null : state.rows.length > 0 ? (
<p className="chat-history-start">
{state.threadId ? t('chat.transcript.threadStart') : t('chat.transcript.start')}
</p>
) : null}
{state.rows.map((message, index) => {
const previous = state.rows[index - 1]
const system = isSystemMessage(message)
const grouped = !system && !previous?.deleted_at && isGrouped(previous, message)
const newDay = !previous || dayKey(previous.created_at) !== dayKey(message.created_at)
return (
<div key={message.id} data-message-id={message.id}>
{newDay ? <DayDivider value={dayLabel(message.created_at)} /> : null}
{index === unreadIndex ? <UnreadMarker count={state.rows.length - index} /> : null}
{system ? (
<SystemRow message={message} nameOf={interactions.nameOf} />
) : (
<MessageRow
message={message}
grouped={grouped}
viewerId={viewerId}
state={state}
interactions={interactions}
editing={editingId === message.id}
onSaveEdit={onSaveEdit}
onCancelEdit={onCancelEdit}
onPreview={setPreview}
flashed={flash === message.id}
customEmojis={customEmojis}
spaceName={spaceName}
/>
)}
</div>
)
})}
{state.pending.map((item) => (
<div key={item.localId} data-message-id={item.localId}>
<PendingRow
item={item}
viewerId={viewerId}
onPreview={setPreview}
onRetry={retryPending}
onDismiss={dismissPending}
/>
</div>
))}
{state.loadingSeed && state.rows.length === 0 ? <SkeletonRows /> : null}
{atError ? (
<TranscriptNotice
icon={<TriangleAlert className="h-5 w-5" />}
title={t('chat.transcript.loadFailed')}
body={state.error ?? ''}
action={{ label: t('common.action.retry'), onClick: onRetrySeed }}
retry
/>
) : null}
{state.seeded && state.rows.length === 0 && state.pending.length === 0 && !state.loadingSeed && !state.error ? (
<TranscriptNotice
icon={<MessageSquare className="h-5 w-5" />}
title={
state.threadId
? t('chat.transcript.threadEmptyTitle')
: t('chat.transcript.roomEmptyTitle', { room: roomLabel })
}
body={state.threadId ? t('chat.transcript.threadEmptyBody') : t('chat.transcript.roomEmptyBody')}
/>
) : null}
{typingNames.length > 0 ? <TypingRow names={typingNames} /> : null}
</div>
{/* Away from the tail for any reason — a jump, a scroll-up, new traffic —
gets the same way back, and the pill counts only what really arrived. */}
{!atBottom ? (
<button
type="button"
onClick={onReturnToLatest}
className="absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-full bg-shell-action px-3.5 py-1.5 text-[12.5px] font-semibold text-white shadow-lg transition-[filter] hover:brightness-95"
>
<ArrowDown className="h-3.5 w-3.5" />
{missedCount > 0 ? tc('chat.transcript.newMessages', missedCount) : t('chat.transcript.backToLatest')}
</button>
) : null}
<Lightbox attachment={preview} onClose={() => setPreview(null)} />
</div>
)
}
function UnreadMarker({ count }: { count: number }) {
const { t } = useT()
return (
<div className="chat-unread-marker flex items-center gap-3 px-3 py-1.5">
<div className="h-px flex-1 bg-shell-tile" />
<span className="shrink-0 rounded-full bg-shell-active px-2 py-px text-[11px] font-semibold text-shell-ink-muted">
{count > 0 ? t('chat.unread.count', { count }) : t('chat.unread.label')}
</span>
<div className="h-px flex-1 bg-shell-tile" />
</div>
)
}
function SystemRow({
message,
nameOf,
}: {
message: ChatMessage
nameOf: (userId: number | null | undefined) => string
}) {
return (
<div className="flex items-start gap-2 px-3 py-0.5 text-[12.5px] text-shell-ink-muted">
<span className="w-10 shrink-0 select-none pt-px text-right text-[10px]">{clockStamp(message.created_at)}</span>
<span className="min-w-0 break-words">{systemLine(message, nameOf)}</span>
</div>
)
}
function MessageRow({
message,
grouped,
viewerId,
state,
interactions,
editing,
onSaveEdit,
onCancelEdit,
onPreview,
flashed,
customEmojis,
spaceName,
}: {
message: ChatMessage
grouped: boolean
viewerId?: number
state: TranscriptState
interactions: MessageInteractions
editing: boolean
onSaveEdit: (messageId: string, content: string) => Promise<boolean>
onCancelEdit: () => void
onPreview: (attachment: Attachment) => void
flashed: boolean
customEmojis?: Parameters<typeof EmojiPicker>[0]['custom']
spaceName?: string
}) {
const { t } = useT()
const mine = Boolean(viewerId && message.author_id === viewerId)
const replyId = message.reply_to_id ?? null
const replyRow = replyId ? state.rows.find((row) => row.id === replyId) : undefined
const replyRef = replyId ? state.refs[replyId] : undefined
const replyMessage = replyRow ?? (replyRef?.state === 'ready' ? replyRef.message : undefined)
const thread = interactions.threadOf(message.id)
const deleted = Boolean(message.deleted_at)
return (
<div
className={`chat-message-row group relative flex gap-3 rounded-md px-3 transition-colors hover:bg-shell-board ${
grouped ? 'py-px' : 'pb-0.5 pt-2.5'
} ${grouped ? 'chat-message-grouped' : ''} ${flashed ? 'bg-shell-active ring-1 ring-inset ring-shell-tile' : ''}`}
>
{grouped ? (
<span className="w-10 shrink-0" aria-hidden="true" />
) : (
<UserAvatar user={message.author} id={message.author_id} size={40} />
)}
<div className="min-w-0 flex-1">
{!grouped ? (
<div className="flex items-baseline gap-2">
<span className="min-w-0 truncate text-[15px] font-semibold">
{message.author?.display_name || message.author?.username || interactions.nameOf(message.author_id)}
</span>
{message.author_type !== 'User' ? (
<span className="shrink-0 rounded bg-shell-tile px-1 text-[9.5px] font-bold uppercase text-shell-ink">
{message.author_type === 'Webhook' ? 'webhook' : 'bot'}
</span>
) : null}
<span className="shrink-0 text-[11px] text-shell-ink-muted" title={fullStamp(message.created_at)}>
{clockStamp(message.created_at)}
</span>
{message.pinned ? (
<span title={t('chat.transcript.pinned')} className="shrink-0 text-shell-ink-muted">
<Pin className="h-3 w-3" />
</span>
) : null}
</div>
) : null}
{replyMessage ? (
<ReplyQuote
message={replyMessage}
nameOf={interactions.nameOf}
onJump={() => replyId && interactions.onJump(replyId)}
/>
) : replyId && replyRef?.state === 'gone' ? (
<p className="text-[12px] text-shell-ink-muted">{t('chat.transcript.replyDeleted')}</p>
) : null}
{editing ? (
<InlineEditor
initial={message.content}
onCancel={onCancelEdit}
onSave={async (content) => {
const saved = await onSaveEdit(message.id, content)
if (saved) onCancelEdit()
return saved
}}
/>
) : deleted ? (
<p className="text-[14px] italic text-shell-ink-muted">{t('chat.transcript.thisDeleted')}</p>
) : (
<>
<MessageBody
message={message}
viewerId={viewerId}
suffix={
message.edited_at ? (
<span className="text-[10.5px] text-shell-ink-muted" title={fullStamp(message.edited_at)}>
{t('chat.message.edited')}
</span>
) : null
}
/>
{message.attachments.length > 0 ? (
<AttachmentGrid attachments={message.attachments} onOpen={onPreview} />
) : null}
</>
)}
{message.reactions && message.reactions.length > 0 ? (
<div className="mt-1 flex flex-wrap gap-1">
{message.reactions.map((reaction) => (
<button
key={reaction.emoji}
type="button"
onClick={() => interactions.onReact(message, reaction.emoji, !reaction.me)}
aria-pressed={reaction.me}
aria-label={
reaction.me
? t('chat.reaction.ariaMine', { emoji: reaction.emoji, count: reaction.count })
: t('chat.reaction.aria', { emoji: reaction.emoji, count: reaction.count })
}
title={t('chat.reaction.title', { count: reaction.count })}
className={`flex items-center gap-1 rounded-full border px-1.5 py-px text-[12px] transition-colors ${
reaction.me
? 'border-shell-tile bg-shell-active text-shell-ink'
: 'border-shell-hairline bg-shell-field text-shell-ink hover:border-shell-ink-muted'
}`}
>
<span className="leading-none">{reaction.emoji}</span>
<span className="font-semibold tabular-nums">{reaction.count}</span>
</button>
))}
</div>
) : null}
{thread && thread.reply_count > 0 ? (
<button
type="button"
onClick={() => interactions.onOpenThread(message)}
className="mt-1 flex max-w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-[12.5px] font-medium text-shell-ink underline-offset-2 transition-colors hover:bg-shell-field hover:underline"
>
<MessageSquare className="h-3.5 w-3.5 shrink-0" />
<span className="shrink-0">{t('chat.thread.replies', { count: thread.reply_count })}</span>
{thread.last_reply_at ? (
<span className="min-w-0 truncate text-shell-ink-muted">
{t('chat.transcript.lastReply', { time: clockStamp(thread.last_reply_at) })}
</span>
) : null}
{thread.locked ? <span className="shrink-0 text-[11px]">· {t('chat.thread.locked')}</span> : null}
</button>
) : null}
</div>
{!editing && !deleted && !message.thread_id ? (
<MessageToolbar
message={message}
mine={mine}
canModerate={interactions.canModerate(message)}
canParticipate={interactions.canParticipate}
interactions={interactions}
customEmojis={customEmojis}
spaceName={spaceName}
/>
) : null}
</div>
)
}
function ReplyQuote({
message,
nameOf,
onJump,
}: {
message: ChatMessage
nameOf: (userId: number | null | undefined) => string
onJump: () => void
}) {
const { t } = useT()
return (
<button
type="button"
onClick={onJump}
title={t('chat.transcript.jumpToOriginal')}
className="mb-0.5 flex max-w-full items-center gap-1.5 text-[12px] text-shell-ink-muted transition-colors hover:text-shell-ink"
>
<CornerUpLeft className="h-3 w-3 shrink-0" />
<span className="shrink-0 font-medium">{nameOf(message.author_id)}</span>
<span className="min-w-0 truncate">
{message.deleted_at
? t('chat.transcript.deletedShort')
: message.content || t('chat.composer.attachmentPlaceholder')}
</span>
</button>
)
}
function MessageToolbar({
message,
mine,
canModerate,
canParticipate,
interactions,
customEmojis,
spaceName,
}: {
message: ChatMessage
mine: boolean
canModerate: boolean
canParticipate: boolean
interactions: MessageInteractions
customEmojis?: Parameters<typeof EmojiPicker>[0]['custom']
spaceName?: string
}) {
const { t } = useT()
const [picker, setPicker] = useState(false)
const [menu, setMenu] = useState(false)
const [copied, setCopied] = useState(false)
const reacted = (message.reactions ?? []).filter((reaction) => reaction.me).map((r) => r.emoji)
const toggle = (emoji: string) => {
const on = !reacted.includes(emoji)
interactions.onReact(message, emoji, on)
}
return (
<div className="chat-message-toolbar" role="group" aria-label={t('chat.transcript.actions')}>
<div className="relative">
<IconAction label={t('chat.transcript.react')} onClick={() => setPicker((value) => !value)} active={picker}>
<SmilePlus className="h-4 w-4" />
</IconAction>
<Popover open={picker} onClose={() => setPicker(false)} align="end" className="w-80">
<EmojiPicker
custom={customEmojis}
spaceName={spaceName}
onPick={(emoji) => {
toggle(emoji)
setPicker(false)
}}
/>
</Popover>
</div>
{canParticipate ? (
<>
<IconAction label={t('chat.transcript.replyInThread')} onClick={() => interactions.onOpenThread(message)}>
<MessageSquare className="h-4 w-4" />
</IconAction>
<IconAction label={t('chat.transcript.quoteReply')} onClick={() => interactions.onReply(message)}>
<CornerUpLeft className="h-4 w-4" />
</IconAction>
</>
) : null}
<IconAction
label={copied ? t('chat.transcript.copied') : t('chat.transcript.copyText')}
onClick={() => {
void navigator.clipboard?.writeText(message.content).then(
() => setCopied(true),
() => setCopied(false),
)
}}
>
{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
</IconAction>
<div className="relative">
<IconAction label={t('chat.transcript.more')} onClick={() => setMenu((value) => !value)} active={menu}>
<MoreHorizontal className="h-4 w-4" />
</IconAction>
<Popover open={menu} onClose={() => setMenu(false)} align="end" className="w-40 py-1">
{mine ? (
<MenuItem
icon={<Pencil className="h-3.5 w-3.5" />}
label={t('common.action.edit')}
onClick={() => {
setMenu(false)
interactions.onEdit(message)
}}
/>
) : null}
<MenuItem
icon={<Pin className="h-3.5 w-3.5" />}
label={message.pinned ? t('chat.message.unpin') : t('chat.message.pin')}
disabled={!canModerate}
onClick={() => {
setMenu(false)
interactions.onTogglePin(message)
}}
/>
{mine || canModerate ? (
<MenuItem
icon={<Trash2 className="h-3.5 w-3.5" />}
label={t('common.action.delete')}
danger
onClick={() => {
setMenu(false)
interactions.onDelete(message)
}}
/>
) : null}
</Popover>
</div>
</div>
)
}
function MenuItem({
icon,
label,
onClick,
danger = false,
disabled = false,
}: {
icon: ReactNode
label: string
onClick: () => void
danger?: boolean
disabled?: boolean
}) {
return (
<button
type="button"
disabled={disabled}
onClick={onClick}
className={`flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-[12.5px] transition-colors hover:bg-shell-board disabled:pointer-events-none disabled:opacity-40 ${
danger ? 'text-[#e5484d]' : ''
}`}
>
{icon}
{label}
</button>
)
}
function PendingRow({
item,
viewerId,
onPreview,
onRetry,
onDismiss,
}: {
item: PendingMessage
viewerId?: number
onPreview: (attachment: Attachment) => void
onRetry: (localId: string) => void
onDismiss: (localId: string) => void
}) {
const { t } = useT()
const failed = item.state === 'failed'
return (
<div className="chat-pending-row flex gap-3 px-3 pb-0.5 pt-2.5">
<UserAvatar id={viewerId ?? 0} size={40} />
<div className="min-w-0 flex-1">
<div className="flex items-baseline gap-2">
<span className="text-[15px] font-semibold">{t('chat.transcript.mine')}</span>
<span className="text-[11px] text-shell-ink-muted">{clockStamp(item.created_at)}</span>
<span
className={`shrink-0 rounded px-1 text-[10px] font-semibold ${
failed ? 'bg-[#e5484d]/12 text-[#e5484d]' : 'bg-shell-field text-shell-ink-muted'
}`}
>
{failed ? t('chat.transcript.unsent') : t('chat.transcript.sending')}
</span>
</div>
<p className="whitespace-pre-wrap break-words text-[15px] leading-[1.5]">{item.content}</p>
{item.attachments.length > 0 ? <AttachmentGrid attachments={item.attachments} onOpen={onPreview} /> : null}
{failed ? (
<div className="mt-1 flex flex-wrap items-center gap-2 text-[12px] text-[#e5484d]">
<span className="min-w-0 truncate">{item.error ?? t('chat.transcript.sendFailed')}</span>
<button
type="button"
onClick={() => onRetry(item.localId)}
className="flex shrink-0 items-center gap-1 rounded border border-shell-hairline px-1.5 py-px text-shell-ink hover:bg-shell-field"
>
<RefreshCw className="h-3 w-3" />
{t('common.action.retry')}
</button>
<button
type="button"
onClick={() => onDismiss(item.localId)}
className="flex shrink-0 items-center gap-1 rounded border border-shell-hairline px-1.5 py-px text-shell-ink-muted hover:bg-shell-field"
>
<X className="h-3 w-3" />
{t('common.action.dismiss')}
</button>
</div>
) : null}
</div>
</div>
)
}
function InlineEditor({
initial,
onSave,
onCancel,
}: {
initial: string
onSave: (content: string) => Promise<unknown>
onCancel: () => void
}) {
const { t } = useT()
const [value, setValue] = useState(initial)
const [busy, setBusy] = useState(false)
const over = textLength(value) > MAX_MESSAGE_LEN
const save = () => {
if (busy || over || !value.trim()) return
setBusy(true)
void Promise.resolve(onSave(value)).finally(() => setBusy(false))
}
return (
<div className="mt-1">
<textarea
autoFocus
aria-label={t('chat.message.edit')}
value={value}
onChange={(event) => setValue(event.target.value)}
onKeyDown={(event) => {
if (event.nativeEvent.isComposing || event.keyCode === 229) return
if (event.key === 'Escape') onCancel()
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault()
save()
}
}}
rows={Math.min(10, value.split('\n').length + 1)}
className="w-full resize-none rounded-md border-2 border-shell-ink bg-shell-surface p-2 text-[14px] outline-none"
/>
<div className="flex items-center gap-2 text-[11.5px] text-shell-ink-muted">
<button
type="button"
disabled={busy || over || !value.trim()}
onClick={save}
className="rounded bg-shell-action px-2.5 py-1 text-[12px] font-semibold text-white disabled:opacity-50"
>
{t('common.action.save')}
</button>
<button type="button" onClick={onCancel} className="rounded px-2 py-1 text-[12px] hover:bg-shell-field">
{t('common.action.cancel')}
</button>
<span>{t('chat.transcript.editHint')}</span>
{over ? (
<span className="text-[#e5484d]">
{t('chat.composer.tooLongBy', { count: textLength(value) - MAX_MESSAGE_LEN })}
</span>
) : null}
</div>
</div>
)
}
function TypingRow({ names }: { names: string[] }) {
const { t } = useT()
const label =
names.length === 1
? t('chat.transcript.typingOne', { name: names[0] })
: names.length === 2
? t('chat.transcript.typingTwo', { first: names[0], second: names[1] })
: t('chat.transcript.typingMany', { names: names.slice(0, 3).join(', ') })
return (
<div className="flex items-center gap-2 px-6 pb-1 pt-1 text-[12px] text-shell-ink-muted">
<span className="flex gap-0.5" aria-hidden>
{[0, 1, 2].map((index) => (
<span
key={index}
className="h-1.5 w-1.5 animate-bounce rounded-full bg-shell-ink-muted"
style={{ animationDelay: `${index * 120}ms` }}
/>
))}
</span>
<span className="truncate">{label}</span>
</div>
)
}
function SkeletonRows() {
return (
<div className="space-y-4 px-3 pt-4">
{[520, 360, 460, 300].map((width) => (
<div key={width} className="flex gap-3">
<span className="h-10 w-10 shrink-0 rounded-full bg-shell-tile" />
<div className="flex-1 space-y-1.5 pt-1">
<span className="block h-3 w-24 rounded-full bg-shell-active" />
<span className="block h-3 max-w-full rounded-full bg-shell-active" style={{ width: width }} />
</div>
</div>
))}
</div>
)
}
function TranscriptNotice({
icon,
title,
body,
action,
retry = false,
}: {
icon: ReactNode
title: string
body: string
action?: { label: string; onClick: () => void }
retry?: boolean
}) {
return (
<div
className="chat-transcript-notice flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-6 py-12 text-center"
role={retry ? 'status' : undefined}
>
<span className="chat-notice-icon">{icon}</span>
<p className="chat-notice-title">{title}</p>
<p className="chat-notice-description">{body}</p>
{action ? (
<button
type="button"
onClick={action.onClick}
className={`mt-1 rounded-md border-2 border-shell-hairline bg-shell-field px-3 py-1.5 text-[12.5px] transition-colors hover:border-shell-ink ${
retry ? 'flex items-center gap-1.5' : ''
}`}
>
{retry ? <RefreshCw className="h-3.5 w-3.5" /> : null}
{action.label}
</button>
) : null}
</div>
)
}