@adatechnology/conversations-ui 0.2.0 → 0.3.0

package/src/quickReplies/QuickRepliesWorkspace.tsx

@@ -1,6 +1,21 @@
 import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react'
+import { Pencil, Plus, Trash2 } from 'lucide-react'
 import { cn } from '../lib/cn'
-import { useQuickRepliesWorkspace, insertAtCursor, type QuickRepliesWorkspaceApi } from './useQuickRepliesWorkspace'
+import {
+  useQuickRepliesWorkspace,
+  insertAtCursor,
+  BODY_MAX_LENGTH,
+  type QuickRepliesWorkspaceApi,
+} from './useQuickRepliesWorkspace'
+import { canExecuteFormattingCommand } from '../lib/composer-formatting'
+import {
+  changedRange,
+  computeFormattingEdit,
+  formattingActionForShortcut,
+  type QuickReplyFormattingAction,
+} from './quickReplyFormatting'
+import { QuickReplyFormattingToolbar } from './QuickReplyFormattingToolbar'
+import { QuickReplyWhatsAppPreview } from './QuickReplyWhatsAppPreview'
 import { AttachmentsFormSection } from './AttachmentsFormSection'
 import { DEFAULT_QUICK_REPLIES_WORKSPACE_LABELS, type QuickRepliesWorkspaceLabels } from './labels'
 import type { MaxAttachmentSizeBytes } from './quickReplyAttachments'
@@ -8,6 +23,21 @@ import type { ConversationVariable } from './quickReply.types'
 
 const TABLE_SKELETON_ROWS = 3
 
+/** Troca o trecho pelo navegador para o Ctrl+Z desfazer a formatação; `false` quando não dá. */
+function replaceWithNativeUndo(field: HTMLTextAreaElement, previous: string, next: string): boolean {
+  if (!canExecuteFormattingCommand()) return false
+  const range = changedRange(previous, next)
+  field.focus()
+  field.setSelectionRange(range.start, range.end)
+  try {
+    return range.insertedText
+      ? document.execCommand('insertText', false, range.insertedText)
+      : document.execCommand('delete')
+  } catch {
+    return false
+  }
+}
+
 export interface QuickRepliesWorkspaceProps {
   readonly api: QuickRepliesWorkspaceApi
   /** Catálogo de variáveis oferecido pelos botões "Inserir variável" do formulário. */
@@ -106,6 +136,42 @@ export function QuickRepliesWorkspace({
     })
   }
 
+  const applyFormatting = (action: QuickReplyFormattingAction) => {
+    const field = bodyFieldRef.current
+    if (!field || !editing) return
+    const next = computeFormattingEdit({
+      text: editing.body,
+      selectionStart: field.selectionStart,
+      selectionEnd: field.selectionEnd,
+      action,
+      maximumLength: BODY_MAX_LENGTH,
+    })
+    if (!next) return
+    // O execCommand dispara o `input` nativo, e o onChange mantém o estado do React em dia.
+    // Se o navegador aplicou só parte (ou nada), o estado vence o DOM.
+    if (!replaceWithNativeUndo(field, editing.body, next.text) || field.value !== next.text) {
+      updateField('body', next.text)
+    }
+    requestAnimationFrame(() => {
+      field.focus()
+      field.setSelectionRange(next.selectionStart, next.selectionEnd)
+    })
+  }
+
+  const handleBodyKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    const action = formattingActionForShortcut({
+      key: event.key,
+      ctrlKey: event.ctrlKey,
+      metaKey: event.metaKey,
+      shiftKey: event.shiftKey,
+      altKey: event.altKey,
+      isComposing: event.nativeEvent.isComposing,
+    })
+    if (!action) return
+    event.preventDefault()
+    applyFormatting(action)
+  }
+
   return (
     <div className={cn('space-y-4', className)}>
       <header className="space-y-0.5">
@@ -131,8 +197,9 @@ export function QuickRepliesWorkspace({
           <button
             type="button"
             onClick={startCreate}
-            className="cv-header-action ml-auto inline-flex items-center gap-1"
+            className="cv-header-action cv-header-action--primary ml-auto inline-flex items-center gap-1"
           >
+            <Plus size={14} aria-hidden="true" />
             {text.create}
           </button>
         ) : null}
@@ -151,130 +218,141 @@ export function QuickRepliesWorkspace({
 
       {editing ? (
         <form
-          className="space-y-3 rounded-lg border border-gray-200 p-4 dark:border-gray-700"
+          className="grid gap-4 rounded-lg border border-gray-200 p-4 dark:border-gray-700 lg:grid-cols-[minmax(0,1fr)_minmax(0,22rem)]"
           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-3">
+            <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={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>
+            <div className="space-y-1">
+              <label className="block text-sm font-medium" htmlFor={bodyFieldId}>
+                {text.fieldBody}
+              </label>
+              <QuickReplyFormattingToolbar labels={text} onFormat={applyFormatting} />
+              <textarea
+                id={bodyFieldId}
+                ref={bodyFieldRef}
+                maxLength={BODY_MAX_LENGTH}
+                rows={4}
+                value={editing.body}
+                onChange={(event) => updateField('body', event.target.value)}
+                onKeyDown={handleBodyKeyDown}
+                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}
+            {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}
+            {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 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>
           </div>
+
+          <QuickReplyWhatsAppPreview
+            body={editing.body}
+            {...(variables ? { variables } : {})}
+            attachments={editing.attachments}
+            labels={text}
+          />
         </form>
       ) : null}
 
@@ -328,61 +406,68 @@ export function QuickRepliesWorkspace({
                   <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"
+                    <td className="px-3 py-2">
+                      <div className="flex items-center gap-1">
+                        {canEdit ? (
+                          <button
+                            type="button"
+                            onClick={() => startEdit(quickReply)}
+                            data-cv-tooltip={text.edit}
+                            aria-label={`${text.edit}: ${quickReply.title}`}
+                            className="cv-header-icon"
                           >
-                            {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"
+                            <Pencil size={14} aria-hidden="true" />
+                          </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.remove}
-                            </button>
+                              {text.removeConfirm(quickReply.title)}
+                              <button
+                                ref={confirmButtonRef}
+                                type="button"
+                                onClick={() => {
+                                  setConfirmingDeleteId(null)
+                                  void remove(quickReply.id)
+                                }}
+                                className="cv-header-action cv-header-action--danger inline-flex items-center gap-1"
+                              >
+                                <Trash2 size={12} aria-hidden="true" />
+                                {text.remove}
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => cancelDeleteConfirm(quickReply.id)}
+                                className="cv-header-action"
+                              >
+                                {text.cancel}
+                              </button>
+                            </span>
+                          ) : (
                             <button
+                              ref={(node) => {
+                                deleteButtonRefs.current[quickReply.id] = node
+                              }}
                               type="button"
-                              onClick={() => cancelDeleteConfirm(quickReply.id)}
-                              className="text-gray-500 hover:underline dark:text-gray-400"
+                              disabled={deletingId === quickReply.id}
+                              aria-busy={deletingId === quickReply.id}
+                              onClick={() => setConfirmingDeleteId(quickReply.id)}
+                              data-cv-tooltip={deletingId === quickReply.id ? text.deleting : text.remove}
+                              aria-label={`${deletingId === quickReply.id ? text.deleting : text.remove}: ${quickReply.title}`}
+                              className="cv-header-icon disabled:opacity-40"
                             >
-                              {text.cancel}
+                              <Trash2 size={14} aria-hidden="true" className="text-red-500" />
                             </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}
+                          )
+                        ) : null}
+                      </div>
                     </td>
                   ) : null}
                 </tr>

package/src/quickReplies/QuickReplyFormattingToolbar.tsx

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ */
+
+import { Bold, Code, Italic, List, ListOrdered, Quote, SquareCode, Strikethrough } from 'lucide-react'
+
+import { COMPOSER_TOOL_BUTTON_CLASS, COMPOSER_TOOL_BUTTON_IDLE_CLASS } from '../composer.constant'
+import { cn } from '../lib/cn'
+import type { ResolvedQuickRepliesWorkspaceLabels } from './labels'
+import {
+  FORMATTING_SHORTCUT_HINT,
+  QUICK_REPLY_FORMATTING_ACTION as ACTION,
+  type QuickReplyFormattingAction,
+} from './quickReplyFormatting'
+
+export interface QuickReplyFormattingToolbarProps {
+  readonly labels: Pick<
+    ResolvedQuickRepliesWorkspaceLabels,
+    | 'formatBold'
+    | 'formatItalic'
+    | 'formatStrikethrough'
+    | 'formatMonospace'
+    | 'formatInlineCode'
+    | 'formatBulletedList'
+    | 'formatNumberedList'
+    | 'formatQuote'
+    | 'formattingToolbar'
+  >
+  readonly onFormat: (action: QuickReplyFormattingAction) => void
+}
+
+export function QuickReplyFormattingToolbar({ labels, onFormat }: QuickReplyFormattingToolbarProps) {
+  const buttons = [
+    { action: ACTION.BOLD, label: labels.formatBold, Icon: Bold },
+    { action: ACTION.ITALIC, label: labels.formatItalic, Icon: Italic },
+    { action: ACTION.STRIKETHROUGH, label: labels.formatStrikethrough, Icon: Strikethrough },
+    { action: ACTION.MONOSPACE, label: labels.formatMonospace, Icon: SquareCode },
+    { action: ACTION.INLINE_CODE, label: labels.formatInlineCode, Icon: Code },
+    { action: ACTION.BULLETED_LIST, label: labels.formatBulletedList, Icon: List },
+    { action: ACTION.NUMBERED_LIST, label: labels.formatNumberedList, Icon: ListOrdered },
+    { action: ACTION.QUOTE, label: labels.formatQuote, Icon: Quote },
+  ] as const
+
+  return (
+    <div role="toolbar" aria-label={labels.formattingToolbar} className="flex flex-wrap gap-1">
+      {buttons.map(({ action, label, Icon }) => (
+        <button
+          key={action}
+          type="button"
+          aria-label={label}
+          title={FORMATTING_SHORTCUT_HINT[action] ? `${label} (${FORMATTING_SHORTCUT_HINT[action]})` : label}
+          // Clicar tiraria o foco do campo e perderia a seleção antes do wrap.
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => onFormat(action)}
+          className={cn(COMPOSER_TOOL_BUTTON_CLASS, COMPOSER_TOOL_BUTTON_IDLE_CLASS)}
+        >
+          <Icon size={16} aria-hidden="true" />
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/quickReplies/QuickReplyWhatsAppPreview.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ */
+
+import { Paperclip } from 'lucide-react'
+
+import { parseWhatsAppFormatting } from '../lib/whatsapp-formatting'
+import { WhatsAppMessagePreview } from '../lib/WhatsAppMessagePreview'
+import type { ResolvedQuickRepliesWorkspaceLabels } from './labels'
+import type { ConversationVariable, QuickReplyAttachment } from './quickReply.types'
+
+export interface QuickReplyWhatsAppPreviewProps {
+  readonly body: string
+  readonly variables?: readonly ConversationVariable[]
+  readonly attachments?: readonly QuickReplyAttachment[]
+  readonly labels: Pick<ResolvedQuickRepliesWorkspaceLabels, 'previewTitle' | 'previewEmptyBody'>
+}
+
+/** Troca cada marcador pelo exemplo da variável (ou o rótulo, sem exemplo); sem catálogo, fica o marcador. */
+export function resolvePreviewVariables(body: string, variables: readonly ConversationVariable[] = []): string {
+  return variables.reduce(
+    (resolved, variable) =>
+      variable.marker ? resolved.split(variable.marker).join(variable.value || variable.label) : resolved,
+    body,
+  )
+}
+
+export function QuickReplyWhatsAppPreview({ body, variables, attachments, labels }: QuickReplyWhatsAppPreviewProps) {
+  const resolvedBody = resolvePreviewVariables(body, variables)
+  const hasAttachments = (attachments?.length ?? 0) > 0
+
+  return (
+    <section aria-label={labels.previewTitle} className="space-y-1">
+      <h3 className="text-sm font-medium">{labels.previewTitle}</h3>
+      <WhatsAppMessagePreview>
+        {hasAttachments ? (
+          <ul className="mb-1.5 flex flex-wrap gap-1 whitespace-normal">
+            {attachments?.map((attachment) => (
+              <li
+                key={attachment.uploadId}
+                className="inline-flex max-w-full items-center gap-1 rounded-md bg-black/5 px-1.5 py-0.5 text-xs dark:bg-white/10"
+              >
+                <Paperclip size={12} aria-hidden="true" className="shrink-0" />
+                <span className="truncate">{attachment.filename}</span>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+        {resolvedBody ? (
+          parseWhatsAppFormatting(resolvedBody)
+        ) : (
+          <span className="italic text-gray-400">{labels.previewEmptyBody}</span>
+        )}
+      </WhatsAppMessagePreview>
+    </section>
+  )
+}

package/src/quickReplies/labels.ts

@@ -74,9 +74,24 @@ export interface QuickRepliesWorkspaceLabels {
   readonly attachmentLimitReached: string
   readonly attachmentTooLarge: (filename: string) => string
   readonly saveBlockedUploading: string
+  /** Barra de formatação acima do campo de texto — notação do WhatsApp. */
+  readonly formatBold?: string
+  readonly formatItalic?: string
+  readonly formatStrikethrough?: string
+  readonly formatMonospace?: string
+  readonly formatInlineCode?: string
+  readonly formatBulletedList?: string
+  readonly formatNumberedList?: string
+  readonly formatQuote?: string
+  readonly formattingToolbar?: string
+  readonly previewTitle?: string
+  readonly previewEmptyBody?: string
 }
 
-export const DEFAULT_QUICK_REPLIES_WORKSPACE_LABELS: QuickRepliesWorkspaceLabels = {
+/** Os rótulos já completados pelos padrões — as chaves novas são opcionais no tipo público. */
+export type ResolvedQuickRepliesWorkspaceLabels = Required<QuickRepliesWorkspaceLabels>
+
+export const DEFAULT_QUICK_REPLIES_WORKSPACE_LABELS: ResolvedQuickRepliesWorkspaceLabels = {
   title: 'Mensagens prontas',
   subtitle: (total) => `${total} ${total === 1 ? 'mensagem cadastrada' : 'mensagens cadastradas'}`,
   searchPlaceholder: 'Buscar por título, atalho ou texto',
@@ -121,4 +136,15 @@ export const DEFAULT_QUICK_REPLIES_WORKSPACE_LABELS: QuickRepliesWorkspaceLabels
   attachmentLimitReached: 'Limite de 10 anexos por mensagem.',
   attachmentTooLarge: (filename) => `${filename}: excede o tamanho máximo para o tipo de arquivo.`,
   saveBlockedUploading: 'Aguardando o envio dos anexos…',
+  formatBold: 'Negrito',
+  formatItalic: 'Itálico',
+  formatStrikethrough: 'Tachado',
+  formatMonospace: 'Monoespaçado',
+  formatInlineCode: 'Código',
+  formatBulletedList: 'Lista',
+  formatNumberedList: 'Lista numerada',
+  formatQuote: 'Citação',
+  formattingToolbar: 'Formatação do texto',
+  previewTitle: 'Pré-visualização no WhatsApp',
+  previewEmptyBody: 'Digite o texto para ver como a mensagem chega ao cliente.',
 }