refactored answer references and added animation

lib/view/pages/talk/components/chatBubbleStyles.dart

@@ -0,0 +1,54 @@
+import 'package:bubble/bubble.dart';
+import 'package:flutter/material.dart';
+
+import '../../../../theming/appTheme.dart';
+
+extension ColorExtensions on Color {
+  Color invert() {
+    final r = 255 - red;
+    final g = 255 - green;
+    final b = 255 - blue;
+
+    return Color.fromARGB((opacity * 255).round(), r, g, b);
+  }
+
+  Color withWhite(int whiteValue) => Color.fromARGB(alpha, whiteValue, whiteValue, whiteValue);
+}
+
+class ChatBubbleStyles {
+  final BuildContext context;
+
+  ChatBubbleStyles(this.context);
+
+  BubbleStyle getSystemStyle() => BubbleStyle(
+    color: AppTheme.isDarkMode(context) ? const Color(0xff182229) : Colors.white,
+    borderWidth: 1,
+    elevation: 2,
+    margin: const BubbleEdges.only(bottom: 20, top: 10),
+    alignment: Alignment.center,
+  );
+
+  BubbleStyle getRemoteStyle(bool seamless) {
+    var color = AppTheme.isDarkMode(context) ? const Color(0xff202c33) : Colors.white;
+    return BubbleStyle(
+      nip: BubbleNip.leftTop,
+      color: seamless ? Colors.transparent : color,
+      borderWidth: seamless ? 0 : 1,
+      elevation: seamless ? 0 : 1,
+      margin: const BubbleEdges.only(bottom: 10, left: 10, right: 50),
+      alignment: Alignment.topLeft,
+    );
+  }
+
+  BubbleStyle getSelfStyle(bool seamless) {
+    var color = AppTheme.isDarkMode(context) ? const Color(0xff005c4b) : const Color(0xffd3d3d3);
+    return BubbleStyle(
+      nip: BubbleNip.rightBottom,
+      color: seamless ? Colors.transparent : color,
+      borderWidth: seamless ? 0 : 1,
+      elevation: seamless ? 0 : 1,
+      margin: const BubbleEdges.only(bottom: 10, right: 10, left: 50),
+      alignment: Alignment.topRight,
+    );
+  }
+}