feat: ✨ Add customizable timestamp styling for chat bubbles and improve timestamp rendering logic by vasu-nageshri · Pull Request #440 · SimformSolutionsPvtLtd/chatview

vasu-nageshri · 2026-05-13T06:43:24Z

Description

Adaptive layout: inline for short messages, bottom-right for long messages
Image/voice message timestamps overlaid inside the bubble
Add in for per-bubble timestamp styling
Update time format to 12-hour AM/PM (e.g. 04:32 PM)
Add voice message duration display: VoiceDurationFormat.hhmmss/mmss/adaptive
Reduce chat bubble border radius for modern look

Visual Representations:

`showTimestamp: true`	`swipeToSeeTime: true`	`both: true`

Checklist

The title of my PR starts with a Conventional Commit prefix (fix:, feat:, docs: etc).
I have followed the Contributor Guide when preparing my PR.
I have updated/added tests for ALL new/updated/fixed functionality.
I have updated/added relevant documentation in docs and added dartdoc comments with ///.
I have updated/added relevant examples in examples or docs.

Breaking Change?

Yes, this PR is a breaking change.
No, this PR is not a breaking change.

Related Issues

Closes #115

Copilot

Pull request overview

Adds a new “in-bubble timestamp” mode to ChatView, including customizable timestamp text styling per bubble direction, and updates timestamp layout/rendering across text, image, and voice message bubbles. This addresses the request to show message time within/near the bubble rather than only via swipe-to-reveal.

Changes:

Introduce FeatureActiveConfig.showTimestamp (mutually exclusive with enableSwipeToSeeTime) and plumb it into message rendering.
Add ChatBubble.messageTimeTextStyle and apply it when rendering in-bubble timestamps for text/image/voice.
Update DateTime.getTimeFromDateTime formatting to hh:mm a and add adaptive inline vs bottom-right timestamp layout for text messages.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
lib/src/widgets/voice_message_view.dart	Adds in-bubble timestamp rendering for voice messages and plumbs `featureActiveConfig`.
lib/src/widgets/text_message_view.dart	Implements adaptive timestamp layout (inline when it fits, otherwise bottom-right) and per-bubble timestamp styling.
lib/src/widgets/message_view.dart	Passes `featureActiveConfig` through to image/text/voice message views.
lib/src/widgets/image_message_view.dart	Overlays timestamp inside image bubble when `showTimestamp` is enabled.
lib/src/widgets/chat_list_widget.dart	Disables swipe-to-see-time gesture when `showTimestamp` is enabled.
lib/src/widgets/chat_bubble_widget.dart	Prevents swipe-to-see-time stack from activating when `showTimestamp` is enabled; adds safer slideAnimation handling.
lib/src/models/config_models/feature_active_config.dart	Adds `showTimestamp` flag and an assert preventing it from being enabled alongside `enableSwipeToSeeTime`.
lib/src/models/chat_bubble.dart	Adds `messageTimeTextStyle` to support per-bubble timestamp typography.
lib/src/extensions/extensions.dart	Changes time formatting to 12-hour format with AM/PM.
doc/documentation.md	Documents new timestamp styling and the mutual exclusivity of `showTimestamp` and `enableSwipeToSeeTime`.
CHANGELOG.md	Adds an Unreleased entry for issue #115.

Comments suppressed due to low confidence (2)

lib/src/widgets/text_message_view.dart:231

This getter’s indentation suggests the file hasn’t been run through dart format. Since CI enforces formatting (dart format --set-exit-if-changed .), please reformat to avoid failing the build.

    TextStyle? get _messageTimeTextStyle => isMessageBySender
      ? outgoingChatBubbleConfig?.messageTimeTextStyle
      : inComingChatBubbleConfig?.messageTimeTextStyle;

lib/src/widgets/voice_message_view.dart:55

PR description mentions adding voice message duration display and a VoiceDurationFormat (hhmmss/mmss/adaptive), but there’s no corresponding implementation in this PR (no VoiceDurationFormat symbol exists in the repo). Please either add the missing duration feature or update the PR description to match the actual changes.

class VoiceMessageView extends StatefulWidget {
  const VoiceMessageView({
    Key? key,
    required this.screenWidth,
    required this.message,
    required this.isMessageBySender,
    this.inComingChatBubbleConfig,
    this.outgoingChatBubbleConfig,
    this.onMaxDuration,
    this.messageReactionConfig,
    this.config,
    this.featureActiveConfig,
  }) : super(key: key);

  /// Provides configuration related to voice message.
  final VoiceMessageConfiguration? config;

  /// Allow user to set width of chat bubble.
  final double screenWidth;

  /// Provides message instance of chat.
  final Message message;
  final ValueSetter<int>? onMaxDuration;

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

  final TextStyle? textStyle;

+  /// Used for giving text style of in-bubble message timestamp.
+  /// Only has effect when [FeatureActiveConfig.showTimestamp] is `true`.


+  /// throw an [AssertionError] in debug mode.
+  ///
+  /// When `true`, timestamps are displayed inside bubbles for all message types
+  /// (text, image, voice). Use [ChatBubble.messageTimeTextStyle] to customise


+                final canShowInSingleLine = showTimestamp &&
+                  extractedUrls.isEmpty &&
+                  !textMessage.contains('\n') &&
+                  _canRenderTimeInSingleLine(
+                    context: context,
+                    messageText: textMessage,
+                    messageStyle: _textStyle ??
+                        textTheme.bodyMedium?.copyWith(
+                          color: Colors.white,
+                          fontSize: 16,
+                        ) ??
+                        const TextStyle(fontSize: 16),
+                    timeText: timeText,
+                    timeStyle: timestampStyle,
+                    maxContentWidth: constraints.maxWidth,
+                  );


+    final messagePainter = TextPainter(
+      text: TextSpan(text: messageText, style: messageStyle),
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+      textScaler: textScaler,
+    )..layout(maxWidth: maxContentWidth);
+
+    final timePainter = TextPainter(
+      text: TextSpan(text: timeText, style: timeStyle),
+      textDirection: TextDirection.ltr,


+                          padding: const EdgeInsets.symmetric(
+                            horizontal: 6,
+                            vertical: 2,
+                          ),
+                          decoration: BoxDecoration(
+                            color: Colors.black45,
+                            borderRadius: BorderRadius.circular(10),
+                          ),
+                          child: Text(
+                            message.createdAt.getTimeFromDateTime,
+                            style: const TextStyle(
+                              color: Colors.white,
+                              fontSize: 10,
+                              fontWeight: FontWeight.w500,
+                            ).merge(
+                              isMessageBySender
+                                  ? outgoingChatBubbleConfig?.messageTimeTextStyle
+                                  : inComingChatBubbleConfig?.messageTimeTextStyle,
+                            ),
+                          ),
+                        ),
+                      ),


japanshah-simform · 2026-05-15T09:39:10Z

What if we give true both to enableSwipeToReply enableSwipeToSeeTime?

swipe-to-reply will work when swiping directly on the message bubble. Swiping outside the bubble will continue to show the message time UI, so there won’t be any conflict between the two gestures.

japanshah-simform · 2026-05-15T09:58:14Z

  Widget build(BuildContext context) {
    final borderRadius = imageMessageConfig?.borderRadius ??
-        const BorderRadius.all(Radius.circular(14));
+        const BorderRadius.all(Radius.circular(10));


the Bubble UI looking good without timestamp also?

…ve timestamp rendering logic - Adaptive layout: inline for short messages, bottom-right for long messages - Image/voice message timestamps overlaid inside the bubble - Add in for per-bubble timestamp styling - Update time format to 12-hour AM/PM (e.g. 04:32 PM) - Add voice message duration display: (VoiceDurationFormat.hhmmss/mmss/adaptive) - Reduce chat bubble border radius for modern look

vasu-nageshri requested a review from Copilot May 13, 2026 06:43

Copilot started reviewing on behalf of vasu-nageshri May 13, 2026 06:44 View session

Copilot AI reviewed May 13, 2026

View reviewed changes

vasu-nageshri force-pushed the feat/improve-chat-timestamp-rendering branch from ef1f4ff to 5299eb4 Compare May 13, 2026 07:38

vasu-nageshri requested review from dhyash-simform and vatsaltanna-simformsolutions May 13, 2026 07:39

This was referenced May 14, 2026

feat:✨Added a support for showing message time in message bubble. Rem… #123

Closed

feat: display message timestamp in chat bubble #422

Closed

japanshah-simform requested changes May 15, 2026

View reviewed changes

vasu-nageshri force-pushed the feat/improve-chat-timestamp-rendering branch from 5299eb4 to 5217429 Compare May 15, 2026 12:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ✨ Add customizable timestamp styling for chat bubbles and improve timestamp rendering logic#440

feat: ✨ Add customizable timestamp styling for chat bubbles and improve timestamp rendering logic#440
vasu-nageshri wants to merge 1 commit into
mainfrom
feat/improve-chat-timestamp-rendering

vasu-nageshri commented May 13, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

japanshah-simform May 15, 2026

Uh oh!

vasu-nageshri May 15, 2026 •

edited

Loading

Uh oh!

Uh oh!

japanshah-simform May 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

vasu-nageshri commented May 13, 2026

Description

Checklist

Breaking Change?

Related Issues

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

japanshah-simform May 15, 2026

Choose a reason for hiding this comment

Uh oh!

vasu-nageshri May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

japanshah-simform May 15, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vasu-nageshri May 15, 2026 •

edited

Loading