@adatechnology/conversations-ui 0.10.0 → 0.11.0

package/README.md

@@ -334,6 +334,7 @@ import { ConversationThread } from '@adatechnology/conversations-ui/participant'
 | `status?` | `'open' \| 'closed'` | `closed` tira o compositor e mostra `labels.closedNotice` |
 | `counterpartLabel?` | `string` | linha curta sob o título, montada pelo host |
 | `headerActions?` | `ReactNode` | slot à direita do cabeçalho; ausente não desenha nada. Espera botões curtos ou só ícone, cada um com `aria-label`: com ações, a barra quebra de linha e o título mantém no mínimo `6rem` |
+| `renderComposerLock?` | `(conversation) => ReactNode \| undefined` | devolver um nó troca o compositor por ele (aviso + ações do host), dentro de `cv-p-thread__lock`; `undefined` mantém o compositor. `closed` continua tendo prioridade. Avaliado a cada render; o rascunho fica no controlador e volta ao destravar. Também existe em `ParticipantConversations` |
 | `onBack?` | `() => void` | ausente = sem seta (o diálogo do host já tem o próprio fechar) |
 | `quickReplies?` | `QuickReply[]` | chips acima do campo; tocar **preenche**, nunca envia |
 | `renderSubjectIcon?`, `subjectGroups?` | | ícone do assunto no cabeçalho, como na lista |

package/dist/participant/index.d.ts

@@ -244,6 +244,8 @@ type ParticipantConversationsProps = {
     tail?: boolean;
     /** Absent draws no microphone. Present lets the user record and send an audio as a message of its own. */
     audioRecording?: ParticipantAudioRecordingOptions;
+    /** Return a node to replace the composer for this conversation (notice + host actions); undefined keeps the composer. `closed` still wins. Evaluated every render. */
+    renderComposerLock?: (conversation: ParticipantConversationSummary) => ReactNode | undefined;
 };
 declare function ParticipantConversations(props: ParticipantConversationsProps): react.JSX.Element;
 
@@ -287,6 +289,8 @@ type ConversationThreadProps = {
     readonly renderAuthorAvatar?: ParticipantAuthorAvatarRenderer;
     /** Absent draws no microphone. Present lets the user record and send an audio as a message of its own. */
     readonly audioRecording?: ParticipantAudioRecordingOptions;
+    /** Return a node to replace the composer (notice + host actions); undefined keeps the composer. `closed` still wins. Evaluated every render. */
+    readonly renderComposerLock?: (conversation: ParticipantConversationSummary) => ReactNode | undefined;
 };
 /** One conversation about one subject, drawn like the participant app and seen from either side. */
 declare function ConversationThread(props: ConversationThreadProps): react.JSX.Element;

package/dist/participant/index.js

@@ -2908,6 +2908,10 @@ function Footer({ props }) {
   if (conversation.status === "closed") {
     return /* @__PURE__ */ jsx33("p", { className: "cv-p-thread__closed", children: labels.closedNotice });
   }
+  const lock = props.renderComposerLock?.(conversation);
+  if (lock !== void 0 && lock !== null) {
+    return /* @__PURE__ */ jsx33("div", { className: "cv-p-thread__lock", role: "region", "aria-live": "polite", children: lock });
+  }
   return /* @__PURE__ */ jsx33(
     ParticipantComposer,
     {
@@ -3675,7 +3679,8 @@ function LoadedThread(props) {
       avatars: props.avatars,
       renderAuthorAvatar: props.renderAuthorAvatar,
       tail: props.tail,
-      audioRecording: props.audioRecording
+      audioRecording: props.audioRecording,
+      renderComposerLock: props.renderComposerLock
     }
   );
 }
@@ -4043,7 +4048,8 @@ function ConversationThreadBody(props) {
           tail: props.tail,
           counterpartLabel: props.counterpartLabel,
           headerActions: props.headerActions,
-          audioRecording: props.audioRecording
+          audioRecording: props.audioRecording,
+          renderComposerLock: props.renderComposerLock
         }
       ) })
     }

package/dist/styles.css

@@ -1812,6 +1812,11 @@
   white-space: nowrap;
   border: 0;
 }
+.cv-p-thread__lock {
+  padding: 1rem;
+  color: var(--cv-p-i-text-muted);
+  border-top: 1px solid var(--cv-p-i-border);
+}
 .cv-p-thread__closed {
   margin: 0;
   padding: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/participant/ConversationThread.tsx

@@ -53,6 +53,8 @@ export type ConversationThreadProps = {
   readonly renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
   /** Absent draws no microphone. Present lets the user record and send an audio as a message of its own. */
   readonly audioRecording?: ParticipantAudioRecordingOptions
+  /** Return a node to replace the composer (notice + host actions); undefined keeps the composer. `closed` still wins. Evaluated every render. */
+  readonly renderComposerLock?: (conversation: ParticipantConversationSummary) => ReactNode | undefined
 }
 
 function useConversationThreadCore(props: ConversationThreadProps): ParticipantThreadCoreProps {
@@ -109,6 +111,7 @@ function ConversationThreadBody(props: ConversationThreadProps) {
           counterpartLabel={props.counterpartLabel}
           headerActions={props.headerActions}
           audioRecording={props.audioRecording}
+          renderComposerLock={props.renderComposerLock}
         />
       </div>
     </div>

package/src/participant/ParticipantConversations.tsx

@@ -44,6 +44,8 @@ export type ParticipantConversationsProps = {
   tail?: boolean
   /** Absent draws no microphone. Present lets the user record and send an audio as a message of its own. */
   audioRecording?: ParticipantAudioRecordingOptions
+  /** Return a node to replace the composer for this conversation (notice + host actions); undefined keeps the composer. `closed` still wins. Evaluated every render. */
+  renderComposerLock?: (conversation: ParticipantConversationSummary) => ReactNode | undefined
 }
 
 export function ParticipantConversations(props: ParticipantConversationsProps) {

package/src/participant/ParticipantThread.test.tsx

@@ -128,6 +128,52 @@ describe('ParticipantThread', () => {
     expect(markup).not.toContain('<textarea')
   })
 
+  it('replaces the composer with the lock node inside the lock region', () => {
+    const markup = render({ renderComposerLock: () => <p>Assumed by Ana</p> })
+
+    expect(markup).toContain(
+      '<div class="cv-p-thread__lock" role="region" aria-live="polite"><p>Assumed by Ana</p></div>',
+    )
+    expect(markup).not.toContain('<form')
+    expect(markup).not.toContain('<textarea')
+  })
+
+  it('keeps the composer when renderComposerLock returns undefined or null', () => {
+    expect(render({ renderComposerLock: () => undefined })).toContain('<form')
+    expect(render({ renderComposerLock: () => null })).toContain('<form')
+    expect(render({ renderComposerLock: () => undefined })).not.toContain('cv-p-thread__lock')
+  })
+
+  it('lets the closed notice win over the lock', () => {
+    const markup = render({
+      conversation: buildConversation({ subjectId: '1', status: 'closed' }),
+      renderComposerLock: () => <p>Assumed by Ana</p>,
+    })
+
+    expect(markup).toContain('This conversation is closed')
+    expect(markup).not.toContain('Assumed by Ana')
+  })
+
+  it('passes the conversation to renderComposerLock and brings the draft back when it unlocks', () => {
+    const draft = { value: 'half typed', onChange: () => undefined, files: [], onFilesChange: () => undefined }
+    const conversation = buildConversation({ subjectId: '7' })
+    const seen: string[] = []
+
+    const locked = render({
+      draft,
+      conversation,
+      renderComposerLock: (received) => {
+        seen.push(received.subjectId)
+        return <p>Locked</p>
+      },
+    })
+    const unlocked = render({ draft, conversation, renderComposerLock: () => undefined })
+
+    expect(seen).toEqual(['7'])
+    expect(locked).not.toContain('half typed')
+    expect(unlocked).toContain('half typed')
+  })
+
   it('shows the composer when the conversation is open', () => {
     const markup = render()
 

package/src/participant/ParticipantThread.tsx

@@ -76,6 +76,8 @@ export type ParticipantThreadProps = {
   readonly audioRecording?: ParticipantAudioRecordingOptions
   /** Receives the recorded audio; the controller sends it as a message of its own. */
   readonly onSendAudio?: (file: File) => void
+  /** Return a node to replace the composer for this conversation (notice + host actions); undefined keeps the composer. Evaluated every render. */
+  readonly renderComposerLock?: (conversation: ParticipantConversationSummary) => ReactNode | undefined
 }
 
 function Footer({ props }: { readonly props: ParticipantThreadProps }) {
@@ -83,6 +85,14 @@ function Footer({ props }: { readonly props: ParticipantThreadProps }) {
   if (conversation.status === 'closed') {
     return <p className="cv-p-thread__closed">{labels.closedNotice}</p>
   }
+  const lock = props.renderComposerLock?.(conversation)
+  if (lock !== undefined && lock !== null) {
+    return (
+      <div className="cv-p-thread__lock" role="region" aria-live="polite">
+        {lock}
+      </div>
+    )
+  }
   return (
     <ParticipantComposer
       value={draft.value}

package/src/participant/ParticipantThreadScreen.tsx

@@ -105,6 +105,7 @@ function LoadedThread(props: LoadedThreadProps) {
       renderAuthorAvatar={props.renderAuthorAvatar}
       tail={props.tail}
       audioRecording={props.audioRecording}
+      renderComposerLock={props.renderComposerLock}
     />
   )
 }

package/src/styles.css

@@ -1275,6 +1275,7 @@
 .cv-p-thread__messages { display: flex; flex-direction: column; gap: 0.5rem; }
 .cv-p-thread__live { padding: 0 1rem; font-size: 0.75rem; color: var(--cv-p-i-accent); background: var(--cv-p-i-surface-raised); }
 .cv-p-thread__live:empty { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.cv-p-thread__lock { padding: 1rem; color: var(--cv-p-i-text-muted); border-top: 1px solid var(--cv-p-i-border); }
 .cv-p-thread__closed { margin: 0; padding: 1rem; text-align: center; color: var(--cv-p-i-text-muted); border-top: 1px solid var(--cv-p-i-border); }
 .cv-p-day { align-self: center; margin: 0.5rem 0; padding: 0.25rem 0.75rem; background: var(--cv-p-i-surface-raised); border: 1px solid var(--cv-p-i-border); border-radius: var(--cv-p-i-radius); font: 0.65rem 'SFMono-Regular', Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cv-p-i-text-muted); }