v_chat_bubbles 1.2.7

A comprehensive Flutter chat bubble library supporting Telegram, WhatsApp, Messenger, and iMessage styles with full theming, callbacks, text formatting, and custom bubble support.

Changelog

All notable changes to this project will be documented in this file.

1.2.7

New Features

Built-in Emoji Picker

• Added "+" button at the end of reactions row in context menu
• Tapping "+" opens a full emoji picker bottom sheet (using emoji_picker_flutter)
• Users can browse categories (Recent, Smileys, Animals, Food, etc.) and search for emojis
• Selected emoji triggers onReaction callback with VReactionAction.add
• Emoji picker respects theme colors (light/dark mode)

Custom Emoji Picker Override

• Optionally provide onMoreReactions callback to show your own emoji picker instead
• If onMoreReactions is set, built-in picker is bypassed

Telegram Default Reactions Updated

• Added 😂 (laugh emoji) to Telegram's default reactions
• Updated reactions: ['👍', '👎', '❤️', '🔥', '🎉', '😂', '💩']

New Dependencies

• Added emoji_picker_flutter: ^4.4.0 for full emoji picker support

---

1.2.6

Bug Fixes

Telegram Dark Mode Status Icon Color

• Fixed delivered/sent status icon showing blue instead of grey in dark mode
• sentColor and deliveredColor now use grey (#8696A0) to distinguish from readColor (blue #5EADEA)
• Status icons now clearly differentiate: grey for sent/delivered, blue for read

Web Text Selection Support

• Added SelectionArea wrapper for text bubbles on web platform
• Users can now select and copy text from messages on web
• Automatically disabled during message selection mode to avoid conflicts

---

1.2.5

Config Defaults Updated

VSpacingConfig Tuning

• bubbleRadius: 10 → 13 (more rounded bubbles matching Telegram iOS)
• sameSenderSpacing: 2 → 4 (slightly more space between same-sender messages)
• differentSenderSpacing: 8 → 1 (tighter grouping when sender changes)

Preset Adjustments

• compact: sameSenderSpacing 1→0, differentSenderSpacing 4→3
• loose: sameSenderSpacing 4→2, differentSenderSpacing 12→8

Example App Updates

• Updated demo pages with improved message samples
• Enhanced message builder examples

---

1.2.4

Bug Fixes

Fixed Extra Space Under Single-Line Text Bubbles

• Removed minHeight: minTapTargetSize constraint from BaseBubble that was forcing 48px minimum height
• Single-line text messages now size naturally without extra padding below

Telegram Bubble Painter Improvements

• Consistent Corner Radius: Updated VTelegramBubblePainter to use configurable radius parameter instead of hardcoded 18px
• Bubbles with tails and without tails now have matching corner radii
• All corners (top-left, top-right, bottom-left, bottom-right) use the same bubbleRadius from VSpacingConfig

Telegram iOS Tail Shape

• Redesigned tail bezier curves to match authentic Telegram iOS style
• The corner before the tail now flows smoothly into the tail (no "cut off" appearance)
• Right edge curves directly into tail as one continuous smooth curve
• Applied to both outgoing (bottom-right tail) and incoming (bottom-left tail) bubbles

Improvements

Selection Mode Tap Target

• Full-width tap target in selection mode - tap anywhere on the row to select/deselect
• GestureDetector now wraps entire row content instead of just the bubble

---

1.2.3

Improvements

Telegram iOS Typography

Updated Telegram theme to match authentic iOS Telegram typography:

• messageTextStyle: 17pt, w400, height 1.35, letterSpacing -0.4
• timeTextStyle: 11pt, w400, letterSpacing -0.1
• senderNameStyle: 13pt, w600, letterSpacing -0.1
• replyTextStyle: 14pt, w400, letterSpacing -0.2
• captionTextStyle: 15pt, w400, height 1.3, letterSpacing -0.3
• linkTextStyle: 17pt, w400, letterSpacing -0.4

Inline Meta for All Bubble Types

Consistent inline meta (timestamp + status) rendering across all bubbles:

• VBubbleFooter: Updated indicator order (pinned → starred), cleaner Row structure
• VLocationBubble: Address text + meta now inline with Flexible wrapper
• VContactBubble: Phone number + meta now inline
• VCallBubble: Added missing meta display with Expanded wrapper for proper layout
• VTextBubble: Block content now wrapped in Flexible(Column(...)) for better overflow handling

New Features

Text Expansion i18n

• Added seeMore and seeLess translation fields to VTranslationConfig
• "See more" / "See less" buttons now fully translatable

New Translations Added

All language presets updated with text expansion translations:

• English: See more, See less
• Spanish: Ver más, Ver menos
• French: Voir plus, Voir moins
• German: Mehr sehen, Weniger sehen
• Arabic: عرض المزيد, عرض أقل

---

1.2.2

Improvements

• Context Menu i18n: Context menu items now use VTranslationConfig for localization
  • All menu item labels (Reply, Forward, Copy, Delete, etc.) are now translatable
  • Added new translation fields: actionUnpin, actionUnstar, actionSelect, actionShare, actionSave, actionInfo, actionTranslate, actionSpeak
  • Custom menu items fall back to their original label property
  • Added labelForMenuItemId() method to VTranslationConfig for dynamic label lookup

New Translations Added

All language presets updated with new context menu translations:

• English: Select, Share, Save, Info, Translate, Speak, Unpin, Unstar
• Spanish: Seleccionar, Compartir, Guardar, Información, Traducir, Hablar, Desfijar, Desmarcar
• French: Sélectionner, Partager, Enregistrer, Infos, Traduire, Lire, Désépingler, Démarquer
• German: Auswählen, Teilen, Speichern, Info, Übersetzen, Vorlesen, Lösen, Markierung aufheben
• Arabic: تحديد, مشاركة, حفظ, معلومات, ترجمة, نطق, إلغاء التثبيت, إلغاء التمييز

---

1.2.1

Bug Fixes

• Fixed: RenderFlex overflow by 0.124 pixels in VBubbleFooter row (meta/timestamp display)
  • Wrapped footer Row in FittedBox(fit: BoxFit.scaleDown) to handle floating-point precision issues
• Fixed: VFileBubble now filters out "null" and "undefined" file extensions
  • Prevents displaying literal "NULL" or "UNDEFINED" text from improper serialization
• fix file type name overflow
• set back background color for video not have thumbnails

---

1.2.0

Breaking Changes - Theme System Refactor

The VBubbleTheme has been refactored from a flat 49-property class into a nested architecture with 12 specialized sub-theme models. This provides better organization and more granular customization.

New Nested Theme Structure

VBubbleTheme (root - 12 nested models)
├── core: VBubbleCoreTheme (bubble colors)
├── text: VBubbleTextTheme (text colors & styles)
├── status: VBubbleStatusTheme (message status icons & colors)
├── reply: VBubbleReplyTheme (reply preview styling)
├── forward: VBubbleForwardTheme (forward header styling)
├── voice: VBubbleVoiceTheme (voice message styling)
├── media: VBubbleMediaTheme (media shimmer & progress)
├── reaction: VBubbleReactionTheme (reaction pills)
├── menu: VBubbleMenuTheme (context menu)
├── selection: VBubbleSelectionTheme (selection mode)
├── systemMessages: VBubbleSystemTheme (system messages)
└── dateChip: VBubbleDateChipTheme (date separators)

Migration Guide

// Before (1.1.0) - flat properties
theme.outgoingBubbleColor
theme.incomingTextColor

// After (1.2.0) - nested access
theme.core.outgoing.bubbleColor
theme.text.incoming.primaryColor

// Or use convenience helpers
theme.bubbleColor(isMeSender)
theme.textColor(isMeSender)

New Features

Complete Sizing Properties

All theme models now include hardcoded sizing properties for full customization:

• VBubbleMenuTheme: fontSize, iconSize, itemPadding, borderRadius, elevation
• VBubbleReactionTheme: countFontSize, emojiSize, pillPadding, pillBorderRadius, pillSpacing, rowHeight
• VBubbleSelectionTheme: checkmarkSize, checkmarkBackgroundSize, overlayBorderRadius
• VBubbleForwardTheme: textStyle, iconSize, padding, borderRadius
• VBubbleReplyTheme: barWidth, padding, borderRadius, senderNameStyle, messageStyle, maxLines

Selection Mode Behavior

When isSelectionMode is enabled, all interactive elements inside bubbles are now properly disabled:

• Pattern taps (links, mentions, emails, phones)
• Reaction taps
• Avatar taps
• Reply preview taps
• Media taps
• Gallery image taps

Only the tap to select/unselect the message works in selection mode.

New Pattern Config Option

• Added enableMentionWithId to VPatternConfig for enabling/disabling mention patterns with embedded user IDs

Other Changes

• Renamed system property to systemMessages in VBubbleTheme for clarity
• All theme presets (Telegram, WhatsApp, Messenger, iMessage - light/dark) updated with nested structure
• Backward compatibility getters maintained for common properties

---

1.1.0

Breaking Changes - Callback Renames

The following callbacks have been renamed for improved clarity:

Old Name	New Name	Reason
onSelect	onSelectionChanged	Better reflects state change semantics
onReplyTap	onReplyPreviewTap	Clarifies it's for tapping the reply preview widget
onReactionInfoTap	onReactionTap	Simplified, clearer naming
onMenuItemTap	onMenuItemSelected	More semantic - item is "selected" not just "tapped"
onMediaTransferAction	onTransferStateChanged	Reflects state change pattern

VReplyData now requires originalMessageId field (for navigating to original message when tapping reply preview).

Migration Guide

Update your VBubbleCallbacks usage:

// Before (1.0.0)
VBubbleCallbacks(
  onSelect: (messageId, isSelected) { },
  onReplyTap: (originalMessageId) { },
  onReactionInfoTap: (messageId, emoji, position) { },
  onMenuItemTap: (messageId, item) { },
  onMediaTransferAction: (messageId, action) { },
)

// After (1.1.0)
VBubbleCallbacks(
  onSelectionChanged: (messageId, isSelected) { },
  onReplyPreviewTap: (originalMessageId) { },
  onReactionTap: (messageId, emoji, position) { },
  onMenuItemSelected: (messageId, item) { },
  onTransferStateChanged: (messageId, action) { },
)

// VReplyData now requires originalMessageId
VReplyData(
  originalMessageId: 'msg_123',  // NEW - required
  senderId: 'user_1',
  senderName: 'John',
  previewText: 'Original message text',
)

Other Changes

• Fixed: CupertinoContextMenu animation lifecycle error when tapping reactions
• Fixed: RenderFlex overflow issues in file, call, and poll bubbles
• Fixed: onLongPress callback now properly replaces built-in context menu when set
• Removed: customBubbleBuilders and menuItems parameters from VBubbleScope (use menuItemsBuilder instead)

---

1.0.0

Initial stable release of v_chat_bubbles.

Features

Bubble Styles

• Telegram - Gradient bubbles with distinctive curved tails
• WhatsApp - Classic green/white bubbles with triangular tails
• Messenger - Blue gradient outgoing, gray incoming bubbles
• iMessage - Minimal design with subtle tails
• Custom - Fully customizable styling

Bubble Widgets

• VTextBubble - Text messages with link preview support
• VImageBubble - Single image messages
• VVideoBubble - Video messages with thumbnail and duration
• VVoiceBubble - Voice messages with waveform visualization
• VFileBubble - File attachments with type icons
• VLocationBubble - Location sharing with map preview
• VContactBubble - Contact card sharing
• VPollBubble - Interactive polls (single/multiple choice)
• VCallBubble - Voice/video call history
• VGalleryBubble - Multi-image gallery grid
• VStickerBubble - Sticker messages
• VQuotedContentBubble - Quoted/shared content
• VSystemBubble - System messages
• VDateChip - Date separator chips
• VDeletedBubble - Deleted message placeholder
• VCustomBubble<T> - Extensible custom bubble types

Text Formatting

• Inline formatting: *bold*, _italic_, ~strikethrough~, `code`
• Block formatting: code blocks, blockquotes, bullet lists, numbered lists
• Pattern detection: URLs, emails, phone numbers, mentions, hashtags
• Custom patterns with regex support

Configuration System

• VBubbleConfig - Master configuration object
• VPatternConfig - Text pattern settings
• VGestureConfig - Touch gesture settings
• VAvatarConfig - Avatar display settings
• VSizingConfig - Bubble dimension settings
• VSpacingConfig - Spacing and padding settings
• VMediaConfig - Media display settings
• VTextExpansionConfig - Expandable text settings
• VAnimationConfig - Animation timing settings
• VAccessibilityConfig - Accessibility settings
• VTranslationConfig - Localization strings

Theming

• Pre-built themes for all styles (light/dark variants)
• VBubbleTheme.custom() for easy custom theming
• Full color, typography, and gradient customization
• Style-specific reaction emoji sets

Callbacks

• Core: tap, long press, swipe reply, select, avatar tap, reply tap
• Grouped: reactions, pattern tap, media tap, menu item tap
• Type-specific: poll vote, location tap, contact tap, call tap, expand toggle, download

Custom Bubbles

• VCustomBubbleData base class for custom data models
• CustomBubbleBuilder typedef for builder functions
• customBubbleBuilders map for registering builders
• Built-in examples: VProductBubble, VReceiptBubble

Selection Mode

• Multi-select support with isSelectionMode and selectedIds
• VDefaultMenuItems.select for triggering selection from context menu
• Visual selection indicators on bubbles

Performance

• Span caching for parsed text
• Pattern list caching
• Block widget caching
• Text direction caching
• Optimized shouldRepaint in all painters
• IntrinsicWidth for proper bubble sizing

Accessibility

• Semantic labels for screen readers
• Configurable minimum tap target sizes
• High contrast mode support
• RTL text direction detection

Localization

• Built-in English and Arabic translations
• VTranslationConfig.forLocale() factory
• All user-facing strings configurable

Dependencies

• v_platform - Cross-platform file handling
• v_chat_voice_player - Voice message playback
• video_player - Video playback support
• intl - Date/time formatting