💫 Add tool call calling hint animation

lib/widgets/thought/function_calls_section.dart

@@ -3,6 +3,7 @@ import 'dart:convert';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter_animate/flutter_animate.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:gap/gap.dart';
 import 'package:google_fonts/google_fonts.dart';
@@ -34,7 +35,7 @@ class FunctionCallsSection extends HookWidget {
     }
     if (functionCallName.isEmpty) functionCallName = 'unknown'.tr();
 
-    final showSpinner = isStreaming && !isFinish;
+    final showSpinner = !(isStreaming && !isFinish);
 
     final isExpanded = useState(false);
 
@@ -51,11 +52,6 @@ class FunctionCallsSection extends HookWidget {
           collapsedShape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(8),
           ),
-          leading: Icon(
-            Symbols.hardware,
-            size: 16,
-            color: Theme.of(context).colorScheme.tertiary,
-          ),
           trailing: SizedBox(
             width: 30, // Specify desired width
             height: 30, // Specify desired height
@@ -70,8 +66,15 @@ class FunctionCallsSection extends HookWidget {
                       : Theme.of(context).colorScheme.tertiaryFixedDim,
             ),
           ),
+          showTrailingIcon: !showSpinner,
           title: Row(
+            spacing: 8,
             children: [
+              Icon(
+                Symbols.hardware,
+                size: 16,
+                color: Theme.of(context).colorScheme.tertiary,
+              ),
               Expanded(
                 child: Text(
                   'thoughtFunctionCall'.tr(args: [functionCallName]),
@@ -81,12 +84,29 @@ class FunctionCallsSection extends HookWidget {
                   ),
                 ),
               ),
-              if (showSpinner)
-                const SizedBox(
-                  height: 14,
-                  width: 14,
-                  child: CircularProgressIndicator(strokeWidth: 2),
+              if (showSpinner) ...[
+                AnimateWidgetExtensions(
+                      Text(
+                        'Calling',
+                        style: Theme.of(context).textTheme.bodySmall!.copyWith(
+                          color: Theme.of(context).colorScheme.primary,
                         ),
+                      ),
+                    )
+                    .animate(
+                      autoPlay: true,
+                      onPlay: (c) => c.repeat(reverse: true),
+                    )
+                    .fade(duration: 1000.ms, begin: 0, end: 1),
+                const SizedBox(
+                  height: 16,
+                  width: 16,
+                  child: CircularProgressIndicator(
+                    strokeWidth: 2,
+                    padding: EdgeInsets.all(3),
+                  ),
+                ).padding(right: 8),
+              ],
             ],
           ),
           childrenPadding: const EdgeInsets.symmetric(
@@ -137,7 +157,9 @@ class FunctionCallsSection extends HookWidget {
         ),
         const Gap(4),
         if (isResult)
-          Row(
+          Opacity(
+            opacity: 0.8,
+            child: Row(
               spacing: 8,
               children: [
                 Icon(Symbols.update, size: 16),
@@ -155,7 +177,8 @@ class FunctionCallsSection extends HookWidget {
                   child: IconButton(
                     iconSize: 16,
                     icon: const Icon(Symbols.content_copy),
-                  onPressed: () => Clipboard.setData(ClipboardData(text: data)),
+                    onPressed:
+                        () => Clipboard.setData(ClipboardData(text: data)),
                     tooltip: 'Copy response',
                     visualDensity: const VisualDensity(
                       horizontal: -4,
@@ -164,7 +187,8 @@ class FunctionCallsSection extends HookWidget {
                   ),
                 ),
               ],
-          ).opacity(0.8)
+            ),
+          )
         else
           Container(
             width: double.infinity,

pubspec.lock

@@ -726,6 +726,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_animate:
+    dependency: "direct main"
+    description:
+      name: flutter_animate
+      sha256: "7befe2d3252728afb77aecaaea1dec88a89d35b9b1d2eea6d04479e8af9117b5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.5.2"
   flutter_app_update:
     dependency: "direct main"
     description:
@@ -1075,6 +1083,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.1.2"
+  flutter_shaders:
+    dependency: transitive
+    description:
+      name: flutter_shaders
+      sha256: "34794acadd8275d971e02df03afee3dee0f98dbfb8c4837082ad0034f612a3e2"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.3"
   flutter_staggered_grid_view:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -168,6 +168,7 @@ dependencies:
   event_bus: ^2.0.1
   convert: ^3.1.2
   desktop_drop: ^0.7.0
+  flutter_animate: ^4.5.0
 
 dev_dependencies:
   flutter_test: