@adatechnology/conversations-ui 0.1.0 → 0.2.0

package/src/quickReplies/QuickRepliesPicker.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useRef, type KeyboardEvent } from 'react'
+import { Paperclip } from 'lucide-react'
+import { applyQuickReplyVariables } from '../MessageComposer'
+import { cn } from '../lib/cn'
+import { highlightMatch } from './quickReplySearch'
+import type { QuickReply } from './quickReply.types'
+import { DEFAULT_QUICK_REPLIES_PICKER_LABELS, type QuickRepliesPickerLabels } from './labels'
+
+const LOADING_SKELETON_ROWS = 4
+
+/**
+ * Presente só no modo botão: o picker desenha e é dono da própria busca — focada ao abrir, dona de
+ * seta/Enter/Esc. O campo de mensagem não é tocado (QR-04): abrir pelo raio nunca insere `/` nele.
+ * Ausente, a busca vem do atalho `/termo` digitado no próprio campo, que continua no comando.
+ */
+export type QuickRepliesPickerOwnSearch = {
+  readonly value: string
+  readonly onChange: (value: string) => void
+  readonly onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void
+  readonly label: string
+}
+
+export type QuickRepliesPickerProps = {
+  /** Id do `listbox`, para o campo (ou a busca própria) apontar `aria-activedescendant`. */
+  readonly id: string
+  readonly items: readonly QuickReply[]
+  readonly search: string
+  readonly highlightedIndex: number
+  readonly isLoading: boolean
+  /** Sinalizador puro — o texto exibido é sempre `labels.error`, nunca mensagem crua de exceção. */
+  readonly hasError?: boolean
+  readonly onHover: (index: number) => void
+  readonly onSelect: (quickReply: QuickReply) => void
+  readonly labels?: Partial<QuickRepliesPickerLabels>
+  readonly className?: string
+  readonly ownSearch?: QuickRepliesPickerOwnSearch
+  /** Resolve `{{marcador}}` antes de destacar e mostrar a prévia (QR-04) — quem busca "joão" espera
+   * ver "Olá João" na lista, não o marcador cru. */
+  readonly variables?: Readonly<Record<string, string>>
+  /** Sem `sendStoredAttachments` no host, a linha com anexo avisa em vez de prometer envio (QR-33). */
+  readonly hasAttachmentsCapability?: boolean
+}
+
+/**
+ * Lista flutuante do atalho `/` e do botão de raio. Puramente controlada — todo estado (busca,
+ * destaque, carregamento) vem de `useQuickRepliesPicker`, este componente só desenha.
+ */
+export function QuickRepliesPicker({
+  id,
+  items,
+  search,
+  highlightedIndex,
+  isLoading,
+  hasError,
+  onHover,
+  onSelect,
+  labels,
+  className,
+  ownSearch,
+  variables,
+  hasAttachmentsCapability,
+}: QuickRepliesPickerProps) {
+  const text = { ...DEFAULT_QUICK_REPLIES_PICKER_LABELS, ...labels }
+  const searchInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (ownSearch) searchInputRef.current?.focus()
+    // Só ao montar: o picker do modo botão nasce com a busca já em foco.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const activeOptionId = items.length > 0 ? `${id}-option-${highlightedIndex}` : undefined
+
+  return (
+    <div className={className}>
+      {ownSearch ? (
+        <input
+          ref={searchInputRef}
+          type="text"
+          role="combobox"
+          aria-expanded="true"
+          aria-controls={id}
+          aria-activedescendant={activeOptionId}
+          value={ownSearch.value}
+          onChange={(event) => ownSearch.onChange(event.target.value)}
+          onKeyDown={ownSearch.onKeyDown}
+          placeholder={ownSearch.label}
+          aria-label={ownSearch.label}
+          className="mb-1 w-72 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm outline-none focus:border-gray-400 dark:border-gray-700 dark:bg-gray-900"
+        />
+      ) : null}
+      <ul
+        role="listbox"
+        id={id}
+        className="max-h-64 w-72 overflow-y-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-900"
+      >
+        {isLoading ? (
+          <li aria-busy="true" aria-live="polite">
+            <span className="sr-only">{text.loading}</span>
+            {Array.from({ length: LOADING_SKELETON_ROWS }).map((_, index) => (
+              <span key={index} className="flex flex-col gap-1 px-3 py-2">
+                <span className="cv-skeleton-line" style={{ width: '60%', height: '0.75rem' }} />
+                <span className="cv-skeleton-line" style={{ width: '85%', height: '0.625rem' }} />
+              </span>
+            ))}
+          </li>
+        ) : null}
+        {!isLoading && hasError ? (
+          <li role="alert" className="px-3 py-2 text-sm text-red-600 dark:text-red-400">
+            {text.error}
+          </li>
+        ) : null}
+        {!isLoading && !hasError && items.length === 0 ? (
+          <li className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
+            {search.trim() ? text.noResults : text.empty}
+          </li>
+        ) : null}
+        {!isLoading && !hasError
+          ? items.map((quickReply, index) => {
+              const resolvedBody = applyQuickReplyVariables(quickReply.body, variables)
+              return (
+                <li
+                  key={quickReply.id}
+                  id={`${id}-option-${index}`}
+                  role="option"
+                  aria-selected={index === highlightedIndex}
+                  className={cn(
+                    'flex cursor-pointer flex-col gap-0.5 px-3 py-2 text-sm',
+                    index === highlightedIndex ? 'bg-gray-100 dark:bg-gray-800' : undefined,
+                  )}
+                  onMouseEnter={() => onHover(index)}
+                  // `mousedown` (não `click`): o campo mantém o foco, então o `blur` não fecha o
+                  // picker antes da seleção acontecer.
+                  onMouseDown={(event) => {
+                    event.preventDefault()
+                    onSelect(quickReply)
+                  }}
+                >
+                  <span className="flex items-center gap-2">
+                    <span className="font-mono text-xs text-gray-400">/{quickReply.shortcut}</span>
+                    <span className="truncate font-medium">
+                      {highlightMatch(quickReply.title, search).map((segment, segmentIndex) =>
+                        segment.isMatch ? (
+                          <mark key={segmentIndex} className="rounded-sm bg-yellow-200 dark:bg-yellow-700/60">
+                            {segment.text}
+                          </mark>
+                        ) : (
+                          <span key={segmentIndex}>{segment.text}</span>
+                        ),
+                      )}
+                    </span>
+                    {quickReply.attachments && quickReply.attachments.length > 0 ? (
+                      <span
+                        className={cn(
+                          'flex flex-none items-center gap-0.5 text-xs',
+                          hasAttachmentsCapability
+                            ? 'text-gray-500 dark:text-gray-400'
+                            : 'text-amber-600 dark:text-amber-400',
+                        )}
+                        title={hasAttachmentsCapability ? undefined : text.attachmentsUnavailable}
+                      >
+                        <Paperclip aria-hidden="true" className="h-3 w-3" />
+                        {text.attachmentsCount(quickReply.attachments.length)}
+                      </span>
+                    ) : null}
+                  </span>
+                  {quickReply.attachments && quickReply.attachments.length > 0 && !hasAttachmentsCapability ? (
+                    <span className="text-xs text-amber-600 dark:text-amber-400">{text.attachmentsUnavailable}</span>
+                  ) : null}
+                  <span className="truncate text-xs text-gray-500 dark:text-gray-400">
+                    {highlightMatch(resolvedBody, search).map((segment, segmentIndex) =>
+                      segment.isMatch ? (
+                        <mark key={segmentIndex} className="rounded-sm bg-yellow-200 dark:bg-yellow-700/60">
+                          {segment.text}
+                        </mark>
+                      ) : (
+                        <span key={segmentIndex}>{segment.text}</span>
+                      ),
+                    )}
+                  </span>
+                </li>
+              )
+            })
+          : null}
+      </ul>
+    </div>
+  )
+}

package/src/quickReplies/QuickRepliesWorkspace.test.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { QuickRepliesWorkspace } from './QuickRepliesWorkspace'
+
+describe('QuickRepliesWorkspace', () => {
+  it('sem createQuickReply, fica só leitura — sem "nova mensagem" e sem coluna de ações', () => {
+    const markup = renderToStaticMarkup(<QuickRepliesWorkspace api={{}} />)
+
+    expect(markup).not.toContain('Nova mensagem')
+    expect(markup).not.toContain('Ações')
+    expect(markup).toContain('Você só pode consultar as mensagens prontas.')
+  })
+
+  it('com createQuickReply, mostra o botão de criar e a coluna de ações', () => {
+    const markup = renderToStaticMarkup(
+      <QuickRepliesWorkspace
+        api={{ createQuickReply: async () => ({ id: '1', title: 'T', shortcut: 't', body: 'B' }) }}
+      />,
+    )
+
+    expect(markup).toContain('Nova mensagem')
+    expect(markup).not.toContain('Você só pode consultar as mensagens prontas.')
+  })
+
+  it('deixa o host trocar o título sem mexer no resto dos textos', () => {
+    const markup = renderToStaticMarkup(<QuickRepliesWorkspace api={{}} labels={{ title: 'Respostas rápidas' }} />)
+
+    expect(markup).toContain('Respostas rápidas')
+    expect(markup).toContain('Buscar por título, atalho ou texto')
+  })
+})

package/src/quickReplies/QuickRepliesWorkspace.tsx

@@ -0,0 +1,395 @@
+import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react'
+import { cn } from '../lib/cn'
+import { useQuickRepliesWorkspace, insertAtCursor, type QuickRepliesWorkspaceApi } from './useQuickRepliesWorkspace'
+import { AttachmentsFormSection } from './AttachmentsFormSection'
+import { DEFAULT_QUICK_REPLIES_WORKSPACE_LABELS, type QuickRepliesWorkspaceLabels } from './labels'
+import type { MaxAttachmentSizeBytes } from './quickReplyAttachments'
+import type { ConversationVariable } from './quickReply.types'
+
+const TABLE_SKELETON_ROWS = 3
+
+export interface QuickRepliesWorkspaceProps {
+  readonly api: QuickRepliesWorkspaceApi
+  /** Catálogo de variáveis oferecido pelos botões "Inserir variável" do formulário. */
+  readonly variables?: readonly ConversationVariable[]
+  readonly labels?: Partial<QuickRepliesWorkspaceLabels>
+  readonly className?: string
+  /** Sobrescreve o teto por tipo de arquivo. Ausente, usa `DEFAULT_MAX_ATTACHMENT_SIZE_BYTES`. */
+  readonly attachmentSizeLimits?: MaxAttachmentSizeBytes
+}
+
+/**
+ * Tela de gestão das mensagens prontas: tabela com busca e zebra, formulário de criação/edição, e
+ * exclusão com confirmação. Some o formulário quando o host não passa `createQuickReply` — vira
+ * consulta, a mesma regra de capacidade do resto do pacote.
+ */
+export function QuickRepliesWorkspace({
+  api,
+  variables,
+  labels,
+  className,
+  attachmentSizeLimits,
+}: QuickRepliesWorkspaceProps) {
+  const text = { ...DEFAULT_QUICK_REPLIES_WORKSPACE_LABELS, ...labels }
+  const bodyFieldRef = useRef<HTMLTextAreaElement>(null)
+  const formId = useId()
+  const titleFieldId = `${formId}-title`
+  const shortcutFieldId = `${formId}-shortcut`
+  const bodyFieldId = `${formId}-body`
+  /** Linha da tabela pedindo confirmação antes de excluir — em vez de `window.confirm`, que trava a
+   * aba inteira e não segue os tokens visuais do pacote. */
+  const [confirmingDeleteId, setConfirmingDeleteId] = useState<string | null>(null)
+  /** Um botão "Excluir" por linha — para onde o foco volta quando a confirmação é cancelada. */
+  const deleteButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({})
+  const confirmButtonRef = useRef<HTMLButtonElement>(null)
+
+  // A confirmação nasce sem foco nenhum: sem isto, Tab a partir de onde o operador estava levaria
+  // por cima dela, e quem usa teclado nunca saberia que ela apareceu.
+  useEffect(() => {
+    if (confirmingDeleteId) confirmButtonRef.current?.focus()
+  }, [confirmingDeleteId])
+
+  const cancelDeleteConfirm = (id: string) => {
+    setConfirmingDeleteId(null)
+    deleteButtonRefs.current[id]?.focus()
+  }
+
+  const handleDeleteConfirmKeyDown = (id: string) => (event: KeyboardEvent<HTMLSpanElement>) => {
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      cancelDeleteConfirm(id)
+    }
+  }
+
+  const {
+    quickReplies,
+    filtered,
+    isLoading,
+    loadError,
+    search,
+    setSearch,
+    readOnly,
+    canEdit,
+    canDelete,
+    editing,
+    startCreate,
+    startEdit,
+    cancelEdit,
+    updateField,
+    fieldErrors,
+    isSaving,
+    saveError,
+    submit,
+    remove,
+    deletingId,
+    hasAttachmentsCapability,
+    pendingUploads,
+    addAttachmentFiles,
+    retryAttachmentUpload,
+    cancelAttachmentUpload,
+    removeAttachment,
+    moveAttachmentAt,
+    attachmentRejections,
+    dismissAttachmentRejections,
+  } = useQuickRepliesWorkspace({ api, labels: text, ...(attachmentSizeLimits ? { attachmentSizeLimits } : {}) })
+
+  const hasPendingUploads = pendingUploads.length > 0
+
+  const insertVariableAtCursor = (marker: string) => {
+    const field = bodyFieldRef.current
+    if (!field || !editing) return
+    const { text: nextBody, caret } = insertAtCursor(editing.body, field.selectionStart, field.selectionEnd, marker)
+    updateField('body', nextBody)
+    requestAnimationFrame(() => {
+      field.focus()
+      field.setSelectionRange(caret, caret)
+    })
+  }
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      <header className="space-y-0.5">
+        <h2 className="text-lg font-semibold">{text.title}</h2>
+        {/* Total cadastrado, nunca o filtrado — a busca não deve fazer parecer que sumiram
+            mensagens; a contagem de resultado da busca fica em `noResults`/`empty`. */}
+        <p className="text-sm text-gray-500 dark:text-gray-400">{text.subtitle(quickReplies.length)}</p>
+      </header>
+
+      {readOnly ? <p className="text-sm text-gray-500 dark:text-gray-400">{text.readOnlyNotice}</p> : null}
+
+      <div className="flex flex-wrap items-center gap-2">
+        <input
+          type="search"
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+          placeholder={text.searchPlaceholder}
+          aria-label={text.searchPlaceholder}
+          className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 sm:w-64"
+        />
+
+        {!readOnly ? (
+          <button
+            type="button"
+            onClick={startCreate}
+            className="cv-header-action ml-auto inline-flex items-center gap-1"
+          >
+            {text.create}
+          </button>
+        ) : null}
+      </div>
+
+      {isLoading ? (
+        <span className="sr-only" aria-live="polite">
+          {text.loading}
+        </span>
+      ) : null}
+      {loadError ? (
+        <p role="alert" className="text-sm text-red-600 dark:text-red-400">
+          {loadError || text.failure}
+        </p>
+      ) : null}
+
+      {editing ? (
+        <form
+          className="space-y-3 rounded-lg border border-gray-200 p-4 dark:border-gray-700"
+          onSubmit={(event) => {
+            event.preventDefault()
+            void submit()
+          }}
+        >
+          <div className="space-y-1">
+            <label className="block text-sm font-medium" htmlFor={titleFieldId}>
+              {text.fieldTitle}
+            </label>
+            <input
+              id={titleFieldId}
+              type="text"
+              maxLength={40}
+              value={editing.title}
+              onChange={(event) => updateField('title', event.target.value)}
+              aria-invalid={Boolean(fieldErrors.title)}
+              aria-describedby={fieldErrors.title ? `${titleFieldId}-error` : undefined}
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900"
+            />
+            {fieldErrors.title ? (
+              <p id={`${titleFieldId}-error`} role="alert" className="text-xs text-red-600 dark:text-red-400">
+                {fieldErrors.title}
+              </p>
+            ) : null}
+          </div>
+
+          <div className="space-y-1">
+            <label className="block text-sm font-medium" htmlFor={shortcutFieldId}>
+              {text.fieldShortcut}
+            </label>
+            <input
+              id={shortcutFieldId}
+              type="text"
+              maxLength={20}
+              value={editing.shortcut}
+              onChange={(event) => updateField('shortcut', event.target.value)}
+              aria-invalid={Boolean(fieldErrors.shortcut)}
+              aria-describedby={fieldErrors.shortcut ? `${shortcutFieldId}-error` : `${shortcutFieldId}-hint`}
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm font-mono dark:border-gray-700 dark:bg-gray-900"
+            />
+            {fieldErrors.shortcut ? (
+              <p id={`${shortcutFieldId}-error`} role="alert" className="text-xs text-red-600 dark:text-red-400">
+                {fieldErrors.shortcut}
+              </p>
+            ) : (
+              <p id={`${shortcutFieldId}-hint`} className="text-xs text-gray-400">
+                {text.fieldShortcutHint}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-1">
+            <label className="block text-sm font-medium" htmlFor={bodyFieldId}>
+              {text.fieldBody}
+            </label>
+            <textarea
+              id={bodyFieldId}
+              ref={bodyFieldRef}
+              maxLength={1000}
+              rows={4}
+              value={editing.body}
+              onChange={(event) => updateField('body', event.target.value)}
+              aria-invalid={Boolean(fieldErrors.body)}
+              aria-describedby={fieldErrors.body ? `${bodyFieldId}-error` : undefined}
+              className="w-full resize-none rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900"
+            />
+            {fieldErrors.body ? (
+              <p id={`${bodyFieldId}-error`} role="alert" className="text-xs text-red-600 dark:text-red-400">
+                {fieldErrors.body}
+              </p>
+            ) : null}
+            {variables && variables.length > 0 ? (
+              <div className="flex flex-wrap gap-1 pt-1">
+                {variables.map((variable) => (
+                  <button
+                    key={variable.id}
+                    type="button"
+                    onClick={() => insertVariableAtCursor(variable.marker)}
+                    aria-label={`${text.insertVariable}: ${variable.label}`}
+                    className="rounded-full border border-gray-200 px-2 py-0.5 text-xs text-gray-600 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                  >
+                    {variable.label}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+
+          {hasAttachmentsCapability ? (
+            <AttachmentsFormSection
+              labels={text}
+              attachments={editing.attachments}
+              pendingUploads={pendingUploads}
+              attachmentRejections={attachmentRejections}
+              onAddFiles={addAttachmentFiles}
+              onRetryUpload={retryAttachmentUpload}
+              onCancelUpload={cancelAttachmentUpload}
+              onRemoveAttachment={removeAttachment}
+              onMoveAttachment={moveAttachmentAt}
+              onDismissRejections={dismissAttachmentRejections}
+            />
+          ) : null}
+
+          {saveError ? (
+            <p role="alert" className="text-sm text-red-600 dark:text-red-400">
+              {saveError}
+            </p>
+          ) : null}
+
+          <div className="flex items-center gap-2">
+            <button
+              type="submit"
+              disabled={isSaving || hasPendingUploads}
+              aria-busy={isSaving}
+              title={hasPendingUploads ? text.saveBlockedUploading : undefined}
+              className="cv-header-action inline-flex items-center gap-1 disabled:opacity-40"
+            >
+              {isSaving ? text.saving : hasPendingUploads ? text.saveBlockedUploading : text.save}
+            </button>
+            <button type="button" onClick={cancelEdit} className="text-sm text-gray-500 hover:underline">
+              {text.cancel}
+            </button>
+          </div>
+        </form>
+      ) : null}
+
+      <div className="cv-table-card">
+        <table className="cv-table">
+          <thead>
+            <tr>
+              <th scope="col" className="px-3 py-2 text-left text-xs font-medium">
+                {text.columnTitle}
+              </th>
+              <th scope="col" className="px-3 py-2 text-left text-xs font-medium">
+                {text.columnShortcut}
+              </th>
+              <th scope="col" className="hidden px-3 py-2 text-left text-xs font-medium sm:table-cell">
+                {text.columnBody}
+              </th>
+              {!readOnly ? (
+                <th scope="col" className="px-3 py-2 text-left text-xs font-medium">
+                  {text.columnActions}
+                </th>
+              ) : null}
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading ? (
+              Array.from({ length: TABLE_SKELETON_ROWS }).map((_, index) => (
+                <tr key={index} aria-hidden="true">
+                  <td className="px-3 py-3">
+                    <span className="cv-skeleton-line cv-skeleton-line--title block" />
+                  </td>
+                  <td className="px-3 py-3">
+                    <span className="cv-skeleton-line cv-skeleton-line--shortcut block" />
+                  </td>
+                  <td className="hidden px-3 py-3 sm:table-cell">
+                    <span className="cv-skeleton-line cv-skeleton-line--body block" />
+                  </td>
+                  {!readOnly ? <td className="px-3 py-3" /> : null}
+                </tr>
+              ))
+            ) : filtered.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="px-3 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
+                  {search.trim() ? text.noResults : text.empty}
+                </td>
+              </tr>
+            ) : null}
+            {!isLoading &&
+              filtered.map((quickReply) => (
+                <tr key={quickReply.id} className={cn(deletingId === quickReply.id ? 'cv-row-departing' : undefined)}>
+                  <td className="px-3 py-2 font-medium">{quickReply.title}</td>
+                  <td className="px-3 py-2 font-mono text-xs text-gray-500">/{quickReply.shortcut}</td>
+                  <td className="hidden max-w-sm truncate px-3 py-2 text-gray-500 sm:table-cell">{quickReply.body}</td>
+                  {!readOnly ? (
+                    <td className="flex gap-2 px-3 py-2">
+                      {canEdit ? (
+                        <button
+                          type="button"
+                          onClick={() => startEdit(quickReply)}
+                          className="text-xs text-blue-600 hover:underline dark:text-blue-400"
+                        >
+                          {text.edit}
+                        </button>
+                      ) : null}
+                      {canDelete ? (
+                        confirmingDeleteId === quickReply.id ? (
+                          // Linha de confirmação inline em vez de `window.confirm`: trava a aba
+                          // inteira e não segue os tokens visuais do pacote (`web.md` §14).
+                          <span
+                            role="group"
+                            aria-label={text.removeConfirm(quickReply.title)}
+                            onKeyDown={handleDeleteConfirmKeyDown(quickReply.id)}
+                            className="flex items-center gap-2 text-xs"
+                          >
+                            {text.removeConfirm(quickReply.title)}
+                            <button
+                              ref={confirmButtonRef}
+                              type="button"
+                              onClick={() => {
+                                setConfirmingDeleteId(null)
+                                void remove(quickReply.id)
+                              }}
+                              className="font-medium text-red-600 hover:underline dark:text-red-400"
+                            >
+                              {text.remove}
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => cancelDeleteConfirm(quickReply.id)}
+                              className="text-gray-500 hover:underline dark:text-gray-400"
+                            >
+                              {text.cancel}
+                            </button>
+                          </span>
+                        ) : (
+                          <button
+                            ref={(node) => {
+                              deleteButtonRefs.current[quickReply.id] = node
+                            }}
+                            type="button"
+                            disabled={deletingId === quickReply.id}
+                            aria-busy={deletingId === quickReply.id}
+                            onClick={() => setConfirmingDeleteId(quickReply.id)}
+                            className="text-xs text-red-600 hover:underline disabled:opacity-50 dark:text-red-400"
+                          >
+                            {deletingId === quickReply.id ? text.deleting : text.remove}
+                          </button>
+                        )
+                      ) : null}
+                    </td>
+                  ) : null}
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}