fix: new loadingBuilder for stream message

Author: demchenkoalex

examples/flyer_chat/lib/gemini.dart

@@ -29,6 +29,10 @@ class Gemini extends StatefulWidget {
 }
 
 class GeminiState extends State<Gemini> {
+  // Set to `true` to show a "Thinking..." message immediately.
+  // Set to `false` to wait for the first chunk before showing the message.
+  final bool _isThinkingModel = true;
+
   final _uuid = const Uuid();
   final _crossCache = CrossCache();
   final _scrollController = ScrollController();
@@ -285,7 +289,10 @@ class GeminiState extends State<Gemini> {
     final streamId = _uuid.v4();
     _currentStreamId = streamId;
     TextStreamMessage? streamMessage;
-    var isFirstChunk = true;
+    Timer? thinkingTimer;
+
+    // A flag to ensure the message is created only once.
+    var messageInserted = false;
 
     // Store scroll state per stream ID
     _reachedTargetScroll[streamId] = false;
@@ -295,6 +302,43 @@ class GeminiState extends State<Gemini> {
       _isStreaming = true;
     });
 
+    // Helper to create and insert the message, ensuring it only happens once.
+    Future<void> createAndInsertMessage() async {
+      if (messageInserted || !mounted) return;
+      messageInserted = true;
+
+      // If the timer is still active, we beat it. Cancel it.
+      thinkingTimer?.cancel();
+
+      streamMessage = TextStreamMessage(
+        id: streamId,
+        authorId: _agent.id,
+        createdAt: DateTime.now().toUtc(),
+        streamId: streamId,
+      );
+      await _chatController.insertMessage(streamMessage!);
+      _streamManager.startStream(streamId, streamMessage!);
+    }
+
+    if (_isThinkingModel) {
+      // For thinking models, schedule the message insertion after a delay.
+      thinkingTimer = Timer(const Duration(milliseconds: 300), () async {
+        await createAndInsertMessage();
+        // When timer fires, message is inserted, scroll to the bottom.
+        // This is needed because we use shouldScrollToEndWhenAtBottom: false,
+        // due to custom scroll logic below, so we must also scroll to the
+        // thinking label manually.
+        WidgetsBinding.instance.addPostFrameCallback((_) async {
+          if (!_scrollController.hasClients || !mounted) return;
+          await _scrollController.animateTo(
+            _scrollController.position.maxScrollExtent,
+            duration: const Duration(milliseconds: 250),
+            curve: Curves.linearToEaseOut,
+          );
+        });
+      });
+    }
+
     try {
       final response = _chatSession.sendMessageStream(content);
 
@@ -305,18 +349,11 @@ class GeminiState extends State<Gemini> {
             final textChunk = chunk.text!;
             if (textChunk.isEmpty) return; // Skip empty chunks
 
-            if (isFirstChunk) {
-              isFirstChunk = false;
-
-              // Create and insert the message ON the first chunk
-              streamMessage = TextStreamMessage(
-                id: streamId,
-                authorId: _agent.id,
-                createdAt: DateTime.now().toUtc(),
-                streamId: streamId,
-              );
-              await _chatController.insertMessage(streamMessage!);
-              _streamManager.startStream(streamId, streamMessage!);
+            // On the first valid chunk, ensure the message is inserted.
+            // This handles both non-thinking models and thinking models where
+            // the response arrives before the timer.
+            if (!messageInserted) {
+              await createAndInsertMessage();
             }
 
             // Ensure stream message exists before adding chunk
@@ -369,6 +406,7 @@ class GeminiState extends State<Gemini> {
           }
         },
         onDone: () async {
+          thinkingTimer?.cancel();
           // Stream completed successfully (only if message was created)
           if (streamMessage != null) {
             await _streamManager.completeStream(streamId);
@@ -388,10 +426,12 @@ class GeminiState extends State<Gemini> {
           _reachedTargetScroll.remove(streamId);
         },
         onError: (error) async {
+          thinkingTimer?.cancel();
           _handleStreamError(streamId, error, streamMessage);
         },
       );
     } catch (error) {
+      thinkingTimer?.cancel();
       // Catch other potential errors during stream processing
       _handleStreamError(streamId, error, streamMessage);
     }

packages/flutter_chat_ui/lib/src/chat_animated_list/chat_animated_list.dart

@@ -703,7 +703,8 @@ class _ChatAnimatedListState extends State<ChatAnimatedList>
           },
         );
       } else {
-        if (_scrollToBottomController.status == AnimationStatus.completed) {
+        if (_scrollToBottomController.status == AnimationStatus.completed ||
+            _scrollToBottomController.status == AnimationStatus.forward) {
           _scrollToBottomController.reverse();
         }
       }

packages/flyer_chat_text_stream_message/lib/src/flyer_chat_text_stream_message.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_chat_core/flutter_chat_core.dart';
 import 'package:gpt_markdown/gpt_markdown.dart';
 import 'package:provider/provider.dart';
+import 'package:shimmer/shimmer.dart';
 
 import 'stream_state.dart';
 import 'text_segment.dart';
@@ -91,6 +92,23 @@ class FlyerChatTextStreamMessage extends StatefulWidget {
   /// The callback function to handle link clicks.
   final void Function(String url, String title)? onLinkTap;
 
+  /// The text to display while in the loading state. Defaults to "Thinking".
+  final String loadingText;
+
+  /// The base color for the shimmer loading animation.
+  final Color? shimmerBaseColor;
+
+  /// The highlight color for the shimmer loading animation.
+  final Color? shimmerHighlightColor;
+
+  /// The period of the shimmer loading animation.
+  final Duration shimmerPeriod;
+
+  /// A builder to completely override the default loading widget.
+  /// If provided, `loadingText`, `shimmerBaseColor`, and `shimmerHighlightColor` are ignored.
+  final Widget Function(BuildContext context, TextStyle? paragraphStyle)?
+  loadingBuilder;
+
   /// Creates a widget to display a streaming text message.
   const FlyerChatTextStreamMessage({
     super.key,
@@ -110,6 +128,11 @@ class FlyerChatTextStreamMessage extends StatefulWidget {
     this.chunkAnimationDuration = const Duration(milliseconds: 350),
     this.mode = TextStreamMessageMode.animatedOpacity,
     this.onLinkTap,
+    this.loadingText = 'Thinking',
+    this.shimmerBaseColor,
+    this.shimmerHighlightColor,
+    this.shimmerPeriod = const Duration(milliseconds: 1000),
+    this.loadingBuilder,
   });
 
   @override
@@ -299,7 +322,7 @@ class _FlyerChatTextStreamMessageState extends State<FlyerChatTextStreamMessage>
             : null;
 
     // Build text content based on segments
-    final textContent = _buildTextContent(paragraphStyle);
+    final textContent = _buildTextContent(paragraphStyle, theme);
 
     // Build the message container and layout
     return Container(
@@ -317,15 +340,20 @@ class _FlyerChatTextStreamMessageState extends State<FlyerChatTextStreamMessage>
     );
   }
 
-  Widget _buildTextContent(TextStyle? paragraphStyle) {
+  Widget _buildTextContent(TextStyle? paragraphStyle, _LocalTheme theme) {
     if (widget.streamState is StreamStateLoading) {
-      return SizedBox(
-        width: paragraphStyle?.lineHeight,
-        height: paragraphStyle?.lineHeight,
-        child: CircularProgressIndicator(
-          strokeWidth: 2,
-          color: paragraphStyle?.color,
-        ),
+      if (widget.loadingBuilder != null) {
+        return widget.loadingBuilder!(context, paragraphStyle);
+      }
+
+      return Shimmer.fromColors(
+        baseColor:
+            widget.shimmerBaseColor ?? theme.onSurface.withValues(alpha: 0.3),
+        highlightColor:
+            widget.shimmerHighlightColor ??
+            theme.onSurface.withValues(alpha: 0.8),
+        period: widget.shimmerPeriod,
+        child: Text(widget.loadingText, style: paragraphStyle),
       );
     }
 

packages/flyer_chat_text_stream_message/pubspec.yaml

@@ -15,6 +15,7 @@ dependencies:
   flutter_chat_core: ^2.6.2
   gpt_markdown: ^1.1.1
   provider: ^6.1.5
+  shimmer: ^3.0.0
 
 dev_dependencies:
   flutter_lints: ^6.0.0