Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Optimize-the-chat-layout #52

Merged
merged 1 commit into from
Nov 19, 2024
+120 −96
Merged

Optimize-the-chat-layout #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/presentation/chat/viewModels/chat_view_model.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ class ChatViewModel extends ChangeNotifier {
"Calculate laminate 3D properties",
"Calculate laminar strain",
"Calculate laminate stress",
"Calculates the UDFRC (Unidirectional fibre-reinforced composites) properties by rules of mixture",
"Calculates the UDFRC properties by rules of mixture",
// "Give me some math equations.",
];

Expand Down
212 changes: 118 additions & 94 deletions lib/presentation/chat/views/chat_message_list.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import 'dart:math';

import 'package:domain/domain.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

Expand All @@ -23,65 +27,7 @@ class _ChatMessageListState extends State<ChatMessageList> {
children: [
Expanded(
child: messages.isEmpty
? SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Icon(
Icons.chat_bubble_outline,
size: 60,
color: Colors.grey,
),
),
Text(
"Select a tool to get started!",
style: TextStyle(fontSize: 18, color: Colors.grey),
),
SizedBox(height: 20),
// Default questions displayed as cards or buttons
LayoutBuilder(
builder: (context, constraints) {
// Determine the number of columns based on the screen width
double width = constraints.maxWidth;
int crossAxisCount = 2;
if (width >= 800) {
crossAxisCount = 4;
} else if (width >= 500) {
crossAxisCount = 3;
}

return GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
// Number of items in a row
childAspectRatio: 1.2,
// Width to height ratio of each item
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
),
itemCount: chatViewModel.defaultQuestions.length,
padding: EdgeInsets.all(16),
itemBuilder: (context, index) {
return InkWell(
onTap: () async {
await chatViewModel
.onDefaultQuestionsTapped(index);
},
child: _buildDefaultQuestionCard(
chatViewModel.defaultQuestions[index]),
);
},
);
},
),
SizedBox(height: 20),
],
),
)
? defaultQuestionView(chatViewModel)
: ListView.builder(
controller: chatViewModel.scrollController,
itemCount: chatList(chatViewModel).length,
Expand All @@ -90,43 +36,73 @@ class _ChatMessageListState extends State<ChatMessageList> {
},
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: textController,
decoration: InputDecoration(
hintText: 'Ask a question...',
),
onSubmitted: (value) {
if (textController.text.isNotEmpty &&
!chatViewModel.isLoading) {
final text = textController.text;
textController.clear();
chatViewModel.sendInputMessage(text);
}
if (messages.isNotEmpty || !kIsWeb) inputBar(chatViewModel)
],
);
}

Widget defaultQuestionView(ChatViewModel viewModel) {
return SingleChildScrollView(
child: Column(
children: [
SizedBox(height: 20),
Padding(
padding: const EdgeInsets.all(20.0),
child: Icon(
Icons.chat_bubble_outline,
size: 80,
color: Colors.grey,
),
),
Text(
"What can I help with?",
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
),
SizedBox(height: 20),
if (kIsWeb) inputBar(viewModel),
// Default questions displayed as cards or buttons
LayoutBuilder(
builder: (context, constraints) {
// Determine the number of columns based on the screen width
double width = constraints.maxWidth;
int crossAxisCount = 2;
if (width >= 1000) {
crossAxisCount = 5;
} else if (width >= 800) {
crossAxisCount = 4;
} else if (width >= 600) {
crossAxisCount = 3;
}
crossAxisCount = max(width ~/ 200, 2);

return GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
// Number of items in a row
childAspectRatio: 2,
// Width to height ratio of each item
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
),
itemCount: viewModel.defaultQuestions.length,
padding: EdgeInsets.all(12),
itemBuilder: (context, index) {
return InkWell(
onTap: () async {
await viewModel.onDefaultQuestionsTapped(index);
},
onChanged: (value) {
setState(() {});
}),
),
chatViewModel.isLoading
? CircularProgressIndicator() // Show loading indicator
: IconButton(
icon: Icon(Icons.send),
onPressed: textController.text.isEmpty
? null
: () async {
final text = textController.text;
textController.clear();
await chatViewModel.sendInputMessage(text);
}),
],
child: _buildDefaultQuestionCard(
viewModel.defaultQuestions[index]),
);
},
);
},
),
),
],
SizedBox(height: 20),
],
),
);
}

Expand Down Expand Up @@ -182,6 +158,54 @@ class _ChatMessageListState extends State<ChatMessageList> {
return result;
}

Widget inputBar(ChatViewModel viewModel) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(24.0),
),
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: textController,
decoration: InputDecoration(
hintText: 'Ask a question...',
border: InputBorder.none, // Remove the line under the TextField
enabledBorder: InputBorder.none, // No border when active
focusedBorder: InputBorder.none, // No border when focused
),
onSubmitted: (value) {
if (textController.text.isNotEmpty && !viewModel.isLoading) {
final text = textController.text;
textController.clear();
viewModel.sendInputMessage(text);
}
},
onChanged: (value) {
setState(() {});
}),
),
viewModel.isLoading
? CircularProgressIndicator() // Show loading indicator
: IconButton(
icon: Icon(Icons.send),
onPressed: textController.text.isEmpty
? null
: () async {
final text = textController.text;
textController.clear();
await viewModel.sendInputMessage(text);
}),
],
),
),
);
}

Widget streamWidget(AsyncSnapshot<Message> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Text("●"); // Loading indicator while waiting for data
Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ name: swiftcomp
description: A cross-platform composite calculator developed with Flutter, based on SwiftComp, designed for engineers and researchers. Available on iOS, Android, and Web.
publish_to: none

version: 6.2.0+2024091514
version: 6.2.1+2024091514

environment:
sdk: ">=2.15.0 <3.0.0"
Expand Down