@adatechnology/conversations-ui 0.11.0 → 0.12.0

package/dist/participant/index.d.ts

@@ -190,6 +190,8 @@ type ParticipantConversationsLabels = {
     readonly edit: string;
     /** Name of the menu button on a failed message. Optional; translated hosts should fill it, otherwise the English default shows. */
     readonly messageOptions?: string;
+    /** Toggle that opens the message as received (e.g. the whole email). Optional; the English default shows otherwise. */
+    readonly showOriginalText?: string;
     readonly notFound: string;
     readonly loading: string;
     readonly loadError: string;

package/dist/participant/index.js

@@ -64,6 +64,7 @@ function formatRecordingElapsedLabel(template, elapsed, limit) {
 
 // src/participant/participantLabels.ts
 var DEFAULT_MESSAGE_OPTIONS_LABEL = "Message options";
+var DEFAULT_SHOW_ORIGINAL_TEXT_LABEL = "Show original";
 var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
   inboxTitle: "Conversations",
   sectionAwaiting: "Waiting for your reply",
@@ -101,6 +102,7 @@ var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
   discard: "Discard",
   edit: "Edit",
   messageOptions: DEFAULT_MESSAGE_OPTIONS_LABEL,
+  showOriginalText: DEFAULT_SHOW_ORIGINAL_TEXT_LABEL,
   notFound: "Conversation not found",
   loading: "Loading\u2026",
   loadError: "Could not load. Check your connection and try again.",
@@ -2577,6 +2579,14 @@ function BubbleHeading({ content, labels }) {
   if (!content.authorName) return null;
   return /* @__PURE__ */ jsx27("span", { className: "cv-p-bubble__author", children: content.authorName });
 }
+function OriginalText({ content, labels }) {
+  const original = content.originalText?.trim();
+  if (!original || original === content.text?.trim()) return null;
+  return /* @__PURE__ */ jsxs21("details", { className: "cv-p-bubble__original", children: [
+    /* @__PURE__ */ jsx27("summary", { className: "cv-p-bubble__original-toggle", children: labels.showOriginalText ?? DEFAULT_SHOW_ORIGINAL_TEXT_LABEL }),
+    /* @__PURE__ */ jsx27("div", { className: "cv-p-bubble__original-text", children: original })
+  ] });
+}
 function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit }) {
   return /* @__PURE__ */ jsxs21(Fragment6, { children: [
     /* @__PURE__ */ jsx27(BubbleHeading, { content, labels }),
@@ -2595,7 +2605,8 @@ function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl,
       /* @__PURE__ */ jsx27("time", { className: "cv-p-bubble__time", dateTime: content.createdAt, children: formatTimestamp(content.createdAt) }),
       ownStatus ? /* @__PURE__ */ jsx27(OwnStatus, { status: ownStatus, labels, onRetry }) : null,
       ownStatus === "failed" ? /* @__PURE__ */ jsx27(ParticipantFailedMenu, { labels, onEdit, onDiscard }) : null
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx27(OriginalText, { content, labels })
   ] });
 }
 
@@ -2669,6 +2680,7 @@ function describeItem(item, perspective) {
       isMine: isOwnMessage(message, perspective),
       authorName: message.authorName ?? void 0,
       text: message.text ?? void 0,
+      originalText: message.originalText ?? void 0,
       createdAt: message.createdAt,
       attachments: message.attachments,
       pendingFilenames: [],

package/dist/styles.css

@@ -1978,7 +1978,41 @@
 .cv-p-bubble > .cv-p-attachment {
   flex: 1 0 100%;
 }
+.cv-p-bubble__original {
+  flex: 1 0 100%;
+  margin-top: 0.2rem;
+}
+.cv-p-bubble__original-toggle {
+  display: inline-block;
+  font-size: 0.7rem;
+  color: var(--cv-p-i-text-muted);
+  cursor: pointer;
+  list-style: none;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+}
+.cv-p-bubble__original-toggle::-webkit-details-marker {
+  display: none;
+}
+.cv-p-bubble__original-toggle:focus-visible {
+  outline: 2px solid var(--cv-p-i-accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.cv-p-bubble__original-text {
+  margin-top: 0.3rem;
+  padding-inline-start: 0.5rem;
+  border-inline-start: 2px solid var(--cv-p-i-border);
+  max-height: 16rem;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-size: 0.8rem;
+  color: var(--cv-p-i-text-muted);
+}
 .cv-p-bubble__meta {
+  order: 1;
   display: flex;
   flex: 0 0 auto;
   justify-content: flex-end;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -35,7 +35,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
     "tailwind-merge": "^3.6.0",
-    "@adatechnology/conversation-contracts": "0.6.0",
+    "@adatechnology/conversation-contracts": "0.7.0",
     "@adatechnology/meta-whatsapp-contracts": "0.6.0"
   },
   "peerDependencies": {

package/src/participant/ParticipantBubbleBody.tsx

@@ -4,7 +4,7 @@ import { OwnStatus } from './ParticipantBubbleStatus'
 import { ParticipantFailedMenu } from './ParticipantFailedMenu'
 import type { BubbleContent } from './ParticipantMessageBubble'
 import { ParticipantMessageText } from './ParticipantMessageText'
-import type { ParticipantConversationsLabels } from './participantLabels'
+import { DEFAULT_SHOW_ORIGINAL_TEXT_LABEL, type ParticipantConversationsLabels } from './participantLabels'
 import type { ParticipantOwnMessageStatus } from './participantMessages'
 
 type BubbleBodyProps = {
@@ -24,6 +24,18 @@ function BubbleHeading({ content, labels }: Pick<BubbleBodyProps, 'content' | 'l
   return <span className="cv-p-bubble__author">{content.authorName}</span>
 }
 
+/** Collapsed by default: the trimmed text is what the reader needs, the original is there on demand. */
+function OriginalText({ content, labels }: Pick<BubbleBodyProps, 'content' | 'labels'>) {
+  const original = content.originalText?.trim()
+  if (!original || original === content.text?.trim()) return null
+  return (
+    <details className="cv-p-bubble__original">
+      <summary className="cv-p-bubble__original-toggle">{labels.showOriginalText ?? DEFAULT_SHOW_ORIGINAL_TEXT_LABEL}</summary>
+      <div className="cv-p-bubble__original-text">{original}</div>
+    </details>
+  )
+}
+
 export function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit }: BubbleBodyProps) {
   return (
     <>
@@ -49,6 +61,8 @@ export function BubbleBody({ content, labels, ownStatus, textId, resolveAttachme
         {ownStatus ? <OwnStatus status={ownStatus} labels={labels} onRetry={onRetry} /> : null}
         {ownStatus === 'failed' ? <ParticipantFailedMenu labels={labels} onEdit={onEdit} onDiscard={onDiscard} /> : null}
       </span>
+      {/* Last child so the ids React derives for the siblings above stay as they were; CSS keeps the meta after it. */}
+      <OriginalText content={content} labels={labels} />
     </>
   )
 }

package/src/participant/ParticipantMessageBubble.test.tsx

@@ -70,6 +70,41 @@ describe('ParticipantMessageBubble', () => {
     expect(mine).not.toContain('Marina')
   })
 
+  it('keeps the original text collapsed behind a discreet toggle inside the bubble', () => {
+    const original = 'Pode descarregar.\n\nEm ter., 20 de out. de 2026, Equipe escreveu:\n> Autorizam?'
+    const markup = renderServer(buildMessage({ id: 'a', text: 'Pode descarregar.', originalText: original }))
+
+    expect(markup).toContain('<details class="cv-p-bubble__original">')
+    expect(markup).not.toContain('<details class="cv-p-bubble__original" open')
+    expect(markup).toContain('<summary class="cv-p-bubble__original-toggle">Show original</summary>')
+    expect(markup).toContain('Em ter., 20 de out. de 2026, Equipe escreveu:')
+    expect(findUtilityClassTokens(markup)).toEqual([])
+  })
+
+  it('uses the host label for the original-text toggle', () => {
+    const item: ParticipantTimelineItem = {
+      kind: 'server',
+      message: buildMessage({ id: 'a', text: 'Ok', originalText: 'Ok\n> antes' }),
+    }
+    const markup = renderToStaticMarkup(
+      <ParticipantMessageBubble
+        item={item}
+        labels={{ ...LABELS, showOriginalText: 'ver histórico' }}
+        confirmsRead
+        resolveAttachmentUrl={resolveAttachmentUrl}
+      />,
+    )
+
+    expect(markup).toContain('>ver histórico</summary>')
+  })
+
+  it('shows no toggle when the original is absent, blank or the same as the text', () => {
+    expect(renderServer(buildMessage({ id: 'a', text: 'Ok' }))).not.toContain('<details')
+    expect(renderServer(buildMessage({ id: 'b', text: 'Ok', originalText: null }))).not.toContain('<details')
+    expect(renderServer(buildMessage({ id: 'c', text: 'Ok', originalText: '  ' }))).not.toContain('<details')
+    expect(renderServer(buildMessage({ id: 'd', text: 'Ok', originalText: ' Ok\n' }))).not.toContain('<details')
+  })
+
   it('renders a time element with the ISO dateTime', () => {
     expect(renderServer()).toMatch(/<time[^>]*dateTime="2026-10-01T10:00:00.000Z"/)
   })

package/src/participant/ParticipantMessageBubble.tsx

@@ -37,6 +37,7 @@ export type BubbleContent = {
   readonly isMine: boolean
   readonly authorName?: string
   readonly text?: string
+  readonly originalText?: string
   readonly createdAt: string
   readonly attachments: readonly ParticipantAttachment[]
   readonly pendingFilenames: readonly string[]
@@ -51,6 +52,7 @@ function describeItem(item: ParticipantTimelineItem, perspective?: ParticipantPe
       isMine: isOwnMessage(message, perspective),
       authorName: message.authorName ?? undefined,
       text: message.text ?? undefined,
+      originalText: message.originalText ?? undefined,
       createdAt: message.createdAt,
       attachments: message.attachments,
       pendingFilenames: [],

package/src/participant/participantLabels.ts

@@ -1,6 +1,7 @@
 import { DEFAULT_PARTICIPANT_AUDIO_LABELS, type ParticipantAudioLabels } from './participantAudioLabels'
 
 export const DEFAULT_MESSAGE_OPTIONS_LABEL = 'Message options'
+export const DEFAULT_SHOW_ORIGINAL_TEXT_LABEL = 'Show original'
 
 export type ParticipantConversationsLabels = {
   readonly inboxTitle: string
@@ -43,6 +44,8 @@ export type ParticipantConversationsLabels = {
   readonly edit: string
   /** Name of the menu button on a failed message. Optional; translated hosts should fill it, otherwise the English default shows. */
   readonly messageOptions?: string
+  /** Toggle that opens the message as received (e.g. the whole email). Optional; the English default shows otherwise. */
+  readonly showOriginalText?: string
   readonly notFound: string
   readonly loading: string
   readonly loadError: string
@@ -106,6 +109,7 @@ export const DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS: ParticipantConversationsL
   discard: 'Discard',
   edit: 'Edit',
   messageOptions: DEFAULT_MESSAGE_OPTIONS_LABEL,
+  showOriginalText: DEFAULT_SHOW_ORIGINAL_TEXT_LABEL,
   notFound: 'Conversation not found',
   loading: 'Loading…',
   loadError: 'Could not load. Check your connection and try again.',

package/src/styles.css

@@ -1302,7 +1302,12 @@
 .cv-p-bubble__author { display: block; flex: 1 0 100%; margin-bottom: 0.15rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; text-transform: uppercase; color: var(--cv-p-i-accent); }
 .cv-p-bubble > .cv-p-text { flex: 0 1 auto; min-width: 0; margin-inline-end: auto; }
 .cv-p-bubble > .cv-p-attachment { flex: 1 0 100%; }
-.cv-p-bubble__meta { display: flex; flex: 0 0 auto; justify-content: flex-end; align-items: center; gap: 0.35rem; margin-inline-start: auto; margin-top: 0.25rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; color: var(--cv-p-i-text-muted); }
+.cv-p-bubble__original { flex: 1 0 100%; margin-top: 0.2rem; }
+.cv-p-bubble__original-toggle { display: inline-block; font-size: 0.7rem; color: var(--cv-p-i-text-muted); cursor: pointer; list-style: none; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
+.cv-p-bubble__original-toggle::-webkit-details-marker { display: none; }
+.cv-p-bubble__original-toggle:focus-visible { outline: 2px solid var(--cv-p-i-accent); outline-offset: 2px; border-radius: 2px; }
+.cv-p-bubble__original-text { margin-top: 0.3rem; padding-inline-start: 0.5rem; border-inline-start: 2px solid var(--cv-p-i-border); max-height: 16rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; color: var(--cv-p-i-text-muted); }
+.cv-p-bubble__meta { order: 1; display: flex; flex: 0 0 auto; justify-content: flex-end; align-items: center; gap: 0.35rem; margin-inline-start: auto; margin-top: 0.25rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; color: var(--cv-p-i-text-muted); }
 .cv-p-bubble__status { display: inline-flex; align-items: center; gap: 0.25rem; }
 .cv-p-bubble .cv-status-ticks--queued, .cv-p-bubble .cv-status-ticks--sent, .cv-p-bubble .cv-status-ticks--delivered { color: var(--cv-p-i-tick); }
 .cv-p-bubble .cv-status-ticks--read { color: var(--cv-p-i-tick-read); }