---
id: "0149"
title: "matrix-client-pc composer: markdown, reply, edit, reactions, media"
status: pending
priority: high
created: 2026-05-24
related_flows: ["0010"]
related_issues: ["0148", "0150"]
dependencies: ["0148"]
tags: [matrix, composer, markdown, media, reactions, threads]
---

## Objetivo

Composer del room: markdown rendering, replies con quote, edits, reactions emoji, threads (Matrix MSC3440), upload de media (imagenes, files, voice msg). Drag&drop archivos. Slash commands placeholder (`/me`, `/shrug`, `/widget` — este ultimo para issue 0152).

## Tareas

1. Backend Go:
   - `MatrixService.SendMessage(roomID, body, format)` — text + markdown -> HTML via `goldmark`.
   - `MatrixService.SendReply(roomID, parentEventID, body)`.
   - `MatrixService.EditMessage(roomID, eventID, newBody)`.
   - `MatrixService.SendReaction(roomID, eventID, key)`.
   - `MatrixService.UploadMedia(roomID, filePath) -> mxc://`.
   - `MatrixService.SendThreadReply(roomID, threadRootID, body)`.
2. Frontend React:
   - Componente `Composer` con Mantine `Textarea` + toolbar markdown.
   - Hotkeys: Cmd+B/I/K, Cmd+Enter para enviar, Esc cancel edit.
   - Drag&drop zone over Composer + paste image desde clipboard.
   - `EmojiPicker` (reusar `@emoji-mart/react` o componente propio `@fn_library`).
   - `ReactionBar` debajo de EventBubble con aggregates.
   - Thread panel lateral (abrir click en evento "X replies").
   - Voice messages: graba con `MediaRecorder` (opus codec), upload + send con `org.matrix.msc3245.voice` flag.
3. Tests:
   - `e2e/test_send_markdown.sh` — `**bold**` aparece negrita en otro cliente.
   - `e2e/test_edit_message.sh` — edicion aparece in-place en Element Web.
   - `e2e/test_reaction.sh` — reaccion emoji propagada bidireccional.

## Funciones del registry a crear

- `markdown_to_matrix_html_go_core` — `goldmark` con sanitizer Matrix-compatible.
- `Composer_ts_ui` — componente Mantine + dropzone.
- `EmojiPicker_ts_ui` — wrapper picker emoji.
- `ReactionBar_ts_ui` — componente reactions aggregadas.

## Acceptance

- [ ] Mensaje markdown `**negrita** _cursiva_` se ve formateado en Element Web.
- [ ] Reply quote aparece referenciando el msg padre.
- [ ] Edit cambia el msg in-place en ambos clientes.
- [ ] Reaccion emoji con click aparece como counter agregado.
- [ ] Upload imagen (PNG 2MB) se ve thumbnail + click abre full.
- [ ] Voice msg grabado 5s reproduce OK en Element Web.
- [ ] Thread: 5 replies anidados se muestran en panel lateral.

## Notas

- Sanitizer HTML: usar allowlist Matrix (b, i, em, strong, a[href], code, pre, blockquote, ul, ol, li, br, p, h1-h6). NO permitir `<script>`, `<iframe>`, event handlers.
- mxc:// uploads: validar size limit (Synapse default 50MB).
- Voice msg: encode opus 32kbps, max 5min.