smoothly navigate from new chat screen to chat screen

Dat-TG · Dec 29, 2023 · 21be71a · 21be71a
1 parent 8894c11
commit 21be71a
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 46 deletions.
diff --git a/lib/core/widgets/typing_indicator.dart b/lib/core/widgets/typing_indicator.dart
@@ -128,7 +128,7 @@ class _TypingIndicatorState extends State<TypingIndicator>
  child: Stack(
  children: [
  AnimatedBubble(
- animation: _largeBubbleAnimation,
+ animation: _smallBubbleAnimation,
  left: 12,
  bottom: 12,
  bubble: StatusBubble(

diff --git a/lib/presentation/chat_screen/chat_screen.dart b/lib/presentation/chat_screen/chat_screen.dart
@@ -156,7 +156,15 @@ class _ChatScreenState extends State<ChatScreen> {
  speed: Duration(milliseconds: 20),
  ),
  ],
- onTap: () {},
+ onTap: () {
+ setState(() {
+ if (showTimeAtIndex != index) {
+ showTimeAtIndex = index;
+ } else {
+ showTimeAtIndex = -1;
+ }
+ });
+ },
  ),
  )
  : Text(

diff --git a/lib/presentation/new_chat/new_chat_screen.dart b/lib/presentation/new_chat/new_chat_screen.dart
@@ -1,9 +1,11 @@
 import 'package:boilerplate/core/widgets/chat_input.dart';
+import 'package:boilerplate/core/widgets/typing_indicator.dart';
 import 'package:boilerplate/di/service_locator.dart';
 import 'package:boilerplate/presentation/new_chat/store/new_chat_store.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_dotenv/flutter_dotenv.dart';
+import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:intl/intl.dart';
 
 class NewChatScreen extends StatefulWidget {
  const NewChatScreen({super.key});
@@ -16,52 +18,115 @@ class _NewChatScreenState extends State<NewChatScreen> {
  NewChatStore _newChatStore = getIt<NewChatStore>();
  @override
  Widget build(BuildContext context) {
- return Column(
- mainAxisSize: MainAxisSize.max,
- children: [
- Expanded(
- child: Center(
- child: Transform.translate(
- offset: Offset(0, -20),
- child: Column(
- mainAxisSize: MainAxisSize.min,
- children: [
- Container(
- padding: const EdgeInsets.all(10),
- decoration: BoxDecoration(
- shape: BoxShape.circle,
- color: Theme.of(context).colorScheme.surface,
- border: Border.all(
- color: Theme.of(context).colorScheme.primary,
- width: 1,
+ return Observer(builder: (context) {
+ return _newChatStore.isLoading
+ ? Column(
+ mainAxisAlignment: MainAxisAlignment.end,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Expanded(
+ child: ListView(
+ children: [
+ Container(
+ padding: EdgeInsets.only(
+ left: 56,
+ right: 14,
+ top: 10,
+ bottom: 10,
+ ),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.end,
+ children: [
+ Center(
+ child: Padding(
+ padding: const EdgeInsets.only(
+ bottom: 5,
+ ),
+ child: Text(
+ DateFormat(null, 'en')
+ .format(_newChatStore.userMessage.time),
+ style:
+ Theme.of(context).textTheme.displayMedium,
+ ),
+ ),
+ ),
+ Material(
+ color: Colors.transparent,
+ child: Container(
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.circular(20),
+ color:
+ Theme.of(context).colorScheme.primary),
+ padding: const EdgeInsets.only(
+ left: 16, right: 16, top: 16, bottom: 16),
+ child: Text(
+ _newChatStore.userMessage.message.content,
+ style: TextStyle(color: Colors.white),
+ ),
+ ),
+ ),
+ ],
+ ),
  ),
- ),
- child: SvgPicture.asset(
- 'assets/icons/logo.svg',
- semanticsLabel: 'ChatGPT logo',
- width: 50,
- height: 50,
- ),
+ const TypingIndicator(),
+ ],
+ ),
+ ),
+ Align(
+ alignment: Alignment.bottomCenter,
+ child: ChatInput(
+ onSend: _newChatStore.sendMessage,
  ),
- const SizedBox(
- height: 10,
+ ),
+ ],
+ )
+ : Column(
+ mainAxisSize: MainAxisSize.max,
+ children: [
+ Expanded(
+ child: Center(
+ child: Transform.translate(
+ offset: Offset(0, -20),
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ Container(
+ padding: const EdgeInsets.all(10),
+ decoration: BoxDecoration(
+ shape: BoxShape.circle,
+ color: Theme.of(context).colorScheme.surface,
+ border: Border.all(
+ color: Theme.of(context).colorScheme.primary,
+ width: 1,
+ ),
+ ),
+ child: SvgPicture.asset(
+ 'assets/icons/logo.svg',
+ semanticsLabel: 'ChatGPT logo',
+ width: 50,
+ height: 50,
+ ),
+ ),
+ const SizedBox(
+ height: 10,
+ ),
+ Text(
+ 'How can I help you today?',
+ style: Theme.of(context).textTheme.titleLarge,
+ ),
+ ],
+ ),
+ ),
  ),
- Text(
- 'How can I help you today?',
- style: Theme.of(context).textTheme.titleLarge,
+ ),
+ Align(
+ alignment: Alignment.bottomCenter,
+ child: ChatInput(
+ onSend: _newChatStore.sendMessage,
  ),
- ],
- ),
- ),
- ),
- ),
- Align(
- alignment: Alignment.bottomCenter,
- child: ChatInput(
- onSend: _newChatStore.sendMessage,
- ),
- ),
- ],
- );
+ ),
+ ],
+ );
+ });
  }
 }
diff --git a/lib/presentation/new_chat/store/new_chat_store.dart b/lib/presentation/new_chat/store/new_chat_store.dart
@@ -45,6 +45,10 @@ abstract class _NewChatStore with Store {
  @observable
  bool success = false;
 
+ @observable
+ MessageWithTime userMessage =
+ MessageWithTime(Message(role: Role.user, content: ''), DateTime.now());
+
  @observable
  ObservableFuture<Message?> sendMessageFuture = ObservableFuture.value(null);
 
@@ -56,6 +60,7 @@ abstract class _NewChatStore with Store {
  Future sendMessage(String content) async {
  final Message message = Message(role: Role.user, content: content);
  final time = DateTime.now();
+ userMessage = MessageWithTime(message, time);
  final future = _sendMessageUseCase.call(params: [message]);
  sendMessageFuture = ObservableFuture(future);