Chat UI redesign, splash screen, and onboarding carousel

- Redesign chat screens (both apps) to match Figma: pink theme with doodle pattern background, white app bar with centered name and chevron back, rose sender bubbles, white receiver bubbles, entry banners, and session-ended bottom bar - Add splash_chat_hebat.png as native Android splash screen with Android 12+ support (values-v31) - Add Flutter splash screen using splash_chat_hebat.png - Add onboarding carousel (client_app only): 3 pages with 1s auto-advance, last page manual "Mulai" button, first-launch only - Register image assets in both pubspec.yaml files Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-17 22:05:15 +08:00
parent 50d31260dc
commit 97d50a8e08
26 changed files with 547 additions and 175 deletions
--- a/mitra_app/android/app/src/main/res/drawable-v21/launch_background.xml
+++ b/mitra_app/android/app/src/main/res/drawable-v21/launch_background.xml
@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Modify this file to customize your launch splash screen -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:drawable="?android:colorBackground" />
-
-    <!-- You can insert your own image assets here -->
-    <!-- <item>
+    <item android:drawable="@android:color/white" />
+    <item
+        android:width="200dp"
+        android:height="168dp"
+        android:gravity="center">
        <bitmap
-            android:gravity="center"
-            android:src="@mipmap/launch_image" />
-    </item> -->
+            android:gravity="fill"
+            android:src="@drawable/splash_chat_hebat" />
+    </item>
 </layer-list>
--- a/mitra_app/android/app/src/main/res/drawable/launch_background.xml
+++ b/mitra_app/android/app/src/main/res/drawable/launch_background.xml
@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Modify this file to customize your launch splash screen -->
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />
-
-    <!-- You can insert your own image assets here -->
-    <!-- <item>
+    <item
+        android:width="200dp"
+        android:height="168dp"
+        android:gravity="center">
        <bitmap
-            android:gravity="center"
-            android:src="@mipmap/launch_image" />
-    </item> -->
+            android:gravity="fill"
+            android:src="@drawable/splash_chat_hebat" />
+    </item>
 </layer-list>
--- a/mitra_app/android/app/src/main/res/drawable/splash_chat_hebat.png
+++ b/mitra_app/android/app/src/main/res/drawable/splash_chat_hebat.png
--- a/mitra_app/android/app/src/main/res/values-v31/styles.xml
+++ b/mitra_app/android/app/src/main/res/values-v31/styles.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
+        <item name="android:windowSplashScreenBackground">@android:color/white</item>
+        <item name="android:windowSplashScreenAnimatedIcon">@drawable/splash_chat_hebat</item>
+    </style>
+    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
+        <item name="android:windowBackground">?android:colorBackground</item>
+    </style>
+</resources>
--- a/mitra_app/assets/images/chat_pattern.png
+++ b/mitra_app/assets/images/chat_pattern.png
--- a/mitra_app/assets/images/splash/splash_1.png
+++ b/mitra_app/assets/images/splash/splash_1.png
--- a/mitra_app/assets/images/splash/splash_2.png
+++ b/mitra_app/assets/images/splash/splash_2.png
--- a/mitra_app/assets/images/splash/splash_3.png
+++ b/mitra_app/assets/images/splash/splash_3.png
--- a/mitra_app/assets/images/splash_chat_hebat.png
+++ b/mitra_app/assets/images/splash_chat_hebat.png
--- a/mitra_app/lib/features/chat/screens/mitra_chat_screen.dart
+++ b/mitra_app/lib/features/chat/screens/mitra_chat_screen.dart
@@ -6,6 +6,12 @@ import '../../../core/chat/mitra_chat_notifier.dart';
 import '../../../core/chat/extension_notifier.dart';
 import '../../../core/constants.dart';

+// Chat theme colors
+const _kUserBubbleColor = Color(0xFFD4929A);
+const _kBgTint = Color(0xFFF5D0D6);
+const _kBannerColor = Color(0xFFC4868F);
+const _kAccentPink = Color(0xFFBE7C8A);
+
 class MitraChatScreen extends ConsumerStatefulWidget {
  final String sessionId;
  final String customerName;
@@ -20,6 +26,8 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
  final _messageController = TextEditingController();
  final _scrollController = ScrollController();
  Timer? _typingThrottle;
+  bool _showBestieBanner = true;
+  bool _showUserBanner = true;

  @override
  void initState() {
@@ -70,7 +78,7 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
    final chatState = ref.watch(mitraChatProvider);
    final extState = ref.watch(mitraExtensionProvider);

-    // Listen for extension complete → navigate home
+    // Listen for extension complete -> navigate home
    ref.listen(mitraExtensionProvider, (prev, next) {
      if (next is ExtensionCompleteData) {
        context.go('/home');
@@ -93,6 +101,14 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {

    return Scaffold(
      appBar: AppBar(
+        backgroundColor: Colors.white,
+        foregroundColor: Colors.black,
+        elevation: 0.5,
+        centerTitle: true,
+        leading: IconButton(
+          icon: const Icon(Icons.chevron_left, size: 28),
+          onPressed: () => context.pop(),
+        ),
        title: Text(widget.customerName),
        actions: [
          if (chatState is MitraChatConnectedData && chatState.remainingSeconds != null)
@@ -102,7 +118,7 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
                child: Text(
                  '${chatState.remainingSeconds}s',
                  style: TextStyle(
-                    color: chatState.remainingSeconds! < 30 ? Colors.red : null,
+                    color: chatState.remainingSeconds! < 30 ? Colors.red : Colors.black,
                    fontWeight: FontWeight.bold,
                  ),
                ),
@@ -138,33 +154,83 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
      return _buildGoodbyeView(extState);
    }

-    return Column(
+    return Stack(
      children: [
-        Expanded(
-          child: ListView.builder(
-            controller: _scrollController,
-            padding: const EdgeInsets.all(16),
-            itemCount: state.messages.length,
-            itemBuilder: (context, index) {
-              final msg = state.messages[index];
-              final isMe = msg.senderType == UserType.mitra;
-              return _buildMessageBubble(msg, isMe);
-            },
-          ),
-        ),
-        if (state.isOtherTyping)
-          const Padding(
-            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
-            child: Align(
-              alignment: Alignment.centerLeft,
-              child: Text('Customer sedang mengetik...', style: TextStyle(color: Colors.grey, fontSize: 12)),
+        // Background pattern
+        Positioned.fill(
+          child: Container(
+            color: _kBgTint,
+            child: Image.asset(
+              'assets/images/chat_pattern.png',
+              repeat: ImageRepeat.repeat,
+              fit: BoxFit.none,
            ),
          ),
-        _buildInputBar(),
+        ),
+        // Content
+        Column(
+          children: [
+            // Entry banners
+            if (_showBestieBanner)
+              _buildEntryBanner(
+                '[Bestie] Sudah Memasuki Ruangan',
+                () => setState(() => _showBestieBanner = false),
+              ),
+            if (_showUserBanner)
+              _buildEntryBanner(
+                '[User] Sudah Memasuki Ruangan',
+                () => setState(() => _showUserBanner = false),
+              ),
+            // Messages
+            Expanded(
+              child: ListView.builder(
+                controller: _scrollController,
+                padding: const EdgeInsets.all(16),
+                itemCount: state.messages.length,
+                itemBuilder: (context, index) {
+                  final msg = state.messages[index];
+                  final isMe = msg.senderType == UserType.mitra;
+                  return _buildMessageBubble(msg, isMe);
+                },
+              ),
+            ),
+            // Typing indicator
+            if (state.isOtherTyping)
+              const Padding(
+                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+                child: Align(
+                  alignment: Alignment.centerLeft,
+                  child: Text('Customer sedang mengetik...', style: TextStyle(color: Colors.grey, fontSize: 12)),
+                ),
+              ),
+            // Input bar
+            _buildInputBar(),
+          ],
+        ),
      ],
    );
  }

+  Widget _buildEntryBanner(String text, VoidCallback onDismiss) {
+    return Container(
+      color: _kBannerColor,
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+      child: Row(
+        children: [
+          const Icon(Icons.volume_up, color: Colors.white, size: 18),
+          const SizedBox(width: 8),
+          Expanded(
+            child: Text(text, style: const TextStyle(color: Colors.white, fontSize: 13)),
+          ),
+          GestureDetector(
+            onTap: onDismiss,
+            child: const Icon(Icons.close, color: Colors.white, size: 18),
+          ),
+        ],
+      ),
+    );
+  }
+
  Widget _buildMessageBubble(MitraChatMessage msg, bool isMe) {
    return Align(
      alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
@@ -173,7 +239,7 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
        constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.75),
        decoration: BoxDecoration(
-          color: isMe ? Colors.green.shade100 : Colors.grey.shade200,
+          color: isMe ? _kUserBubbleColor : Colors.white,
          borderRadius: BorderRadius.circular(16),
        ),
        child: Column(
@@ -186,7 +252,7 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
              children: [
                Text(
                  '${msg.createdAt.hour.toString().padLeft(2, '0')}:${msg.createdAt.minute.toString().padLeft(2, '0')}',
-                  style: const TextStyle(fontSize: 10, color: Colors.grey),
+                  style: TextStyle(fontSize: 10, color: isMe ? Colors.white70 : Colors.grey),
                ),
                if (isMe) ...[
                  const SizedBox(width: 4),
@@ -203,13 +269,13 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
  Widget _buildStatusIcon(String status) {
    switch (status) {
      case 'sending':
-        return const Icon(Icons.access_time, size: 14, color: Colors.grey);
+        return const Icon(Icons.access_time, size: 14, color: Colors.white70);
      case MessageStatus.sent:
-        return const Icon(Icons.check, size: 14, color: Colors.grey);
+        return const Icon(Icons.check, size: 14, color: Colors.white70);
      case MessageStatus.delivered:
-        return const Icon(Icons.done_all, size: 14, color: Colors.grey);
+        return const Icon(Icons.done_all, size: 14, color: Colors.white70);
      case MessageStatus.read:
-        return const Icon(Icons.done_all, size: 14, color: Colors.blue);
+        return const Icon(Icons.done_all, size: 14, color: Colors.white);
      default:
        return const SizedBox.shrink();
    }
@@ -217,8 +283,9 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {

  Widget _buildInputBar() {
    return SafeArea(
-      child: Padding(
+      child: Container(
        padding: const EdgeInsets.all(8),
+        color: Colors.white,
        child: Row(
          children: [
            Expanded(
@@ -228,16 +295,28 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
                textInputAction: TextInputAction.send,
                onSubmitted: (_) => _sendMessage(),
                decoration: InputDecoration(
-                  hintText: 'Ketik pesan...',
-                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(24)),
+                  hintText: 'Ketik Pesan',
+                  hintStyle: TextStyle(color: Colors.grey.shade400),
+                  filled: true,
+                  fillColor: Colors.grey.shade100,
+                  border: OutlineInputBorder(
+                    borderRadius: BorderRadius.circular(24),
+                    borderSide: BorderSide.none,
+                  ),
                  contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                ),
              ),
            ),
            const SizedBox(width: 8),
-            IconButton(
-              icon: const Icon(Icons.send, color: Colors.green),
-              onPressed: _sendMessage,
+            Container(
+              decoration: const BoxDecoration(
+                color: _kAccentPink,
+                shape: BoxShape.circle,
+              ),
+              child: IconButton(
+                icon: const Icon(Icons.send, color: Colors.white, size: 20),
+                onPressed: _sendMessage,
+              ),
            ),
          ],
        ),
--- a/mitra_app/lib/features/splash/splash_screen.dart
+++ b/mitra_app/lib/features/splash/splash_screen.dart
@@ -5,20 +5,12 @@ class SplashScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    return const Scaffold(
+    return Scaffold(
+      backgroundColor: Colors.white,
      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(Icons.favorite, size: 80, color: Colors.blue),
-            SizedBox(height: 24),
-            Text(
-              'Halo Bestie Mitra',
-              style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
-            ),
-            SizedBox(height: 32),
-            CircularProgressIndicator(),
-          ],
+        child: Image.asset(
+          'assets/images/splash_chat_hebat.png',
+          width: 200,
        ),
      ),
    );
--- a/mitra_app/pubspec.yaml
+++ b/mitra_app/pubspec.yaml
@@ -41,3 +41,6 @@ dev_dependencies:

 flutter:
  uses-material-design: true
+  assets:
+    - assets/images/
+    - assets/images/splash/