Skip to content

Feat/create chat screen component#296

Open
mariocodecr wants to merge 7 commits into
Kaizenode:mainfrom
mariocodecr:feat/createChatScreenComponent
Open

Feat/create chat screen component#296
mariocodecr wants to merge 7 commits into
Kaizenode:mainfrom
mariocodecr:feat/createChatScreenComponent

Conversation

@mariocodecr

@mariocodecr mariocodecr commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

📝 feat: add ChatScreen component for P2P chat

🛠️ Issue

📖 Description

Implements the full chat screen between two wallet counterparts. The screen orchestrates three message types (text, payment, request) in chronological order, groups them by day, and ships with a bottom input bar that includes a "Pay" shortcut.

Per the issue instructions:

  • The header shows the truncated wallet address instead of a username (it also drives the avatar initials via the existing WalletBadge).
  • The phone icon was replaced by a copy/paste icon that copies the full address to the clipboard.

This iteration was rewritten to reuse the components recently merged into main instead of duplicating them.

✅ Changes made

  • Extended chat/types.ts with PaymentMessage, PaymentRequestMessage, and the ChatMessage discriminated union (the existing TextMessage from Feat/chat bubble component #299 is kept as-is).
  • Extended chat/utils.ts with truncateAddress, formatDayLabel, and groupMessagesByDay (the existing formatTime from Feat/chat bubble component #299 is kept as-is).
  • Added ChatHeader — uses WalletBadge for the avatar, displays the truncated address with a presence indicator, and exposes a functional copy-to-clipboard action plus optional onBack / onMore callbacks.
  • Added DateSeparator for TODAY / YESTERDAY / localized date dividers.
  • Added ChatInputBar — built on top of the shared Button component (no native tags) with a textarea (Enter to send, Shift+Enter for newline) and a "Pay" shortcut.
  • Added ChatScreen orchestrator — sorts messages chronologically, groups them by day, auto-scrolls to the bottom on new messages, renders text via ChatMessageBubble and payments/requests via PaymentBubble, and exposes the 4 required props from the issue.
  • Updated the chat/ barrel export to expose the new components.

🖼️ Media (screenshots/videos)
Screenshot 2026-06-19 at 5 54 19 PM

📜 Additional Notes

@mariocodecr mariocodecr force-pushed the feat/createChatScreenComponent branch from 015296c to ff87d61 Compare June 18, 2026 05:39
@diegoTech14

diegoTech14 commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Hello sir @mariocodecr, you should to use the bubble chat components created on this issue #298 please update this one.

@mariocodecr mariocodecr force-pushed the feat/createChatScreenComponent branch from ff87d61 to be95401 Compare June 19, 2026 03:23
type="button"
onClick={onSendPayment}
disabled={disabled}
aria-label="Enviar pago"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, use the Button component, not the general button tag

<button
type="submit"
disabled={!canSend}
aria-label="Enviar mensaje"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, use the Button component, not the button tag

);
}

export function ChatMessageBubble({

@diegoTech14 diegoTech14 Jun 19, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component is great, but is part of this issue: #280 I will give a chance of couple of hours to get an update, if not, I'll reassign to you because you have the solution

@mariocodecr mariocodecr force-pushed the feat/createChatScreenComponent branch from 3037e0c to ede21a1 Compare June 19, 2026 23:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create the chat screen component

2 participants