Add sample command section to voice assistant app

Add a section that allows to choose and execute sample commands
and minor improvements to app UI.

Bug-AGL: SPEC-4906
Signed-off-by: Malik Talha <talhamalik727x@gmail.com>
Change-Id: I1a279c6ecd1904c428b8403d3ce0750bc063da3b

4 files changed, 99 insertions, 10 deletions

diff --git a/lib/widgets/assistant_mode_choice.dart b/lib/widgets/assistant_mode_choice.dart
index ec17534..d0c1953 100644
--- a/lib/widgets/assistant_mode_choice.dart
+++ b/lib/widgets/assistant_mode_choice.dart
@@ -132,7 +132,7 @@ class AssistantModeChoiceState extends State<AssistantModeChoice> {
                   'Wake Word',
                   style: TextStyle(
                     fontWeight: FontWeight.bold,
-                    fontSize: 18,
+                    fontSize: 17,
                     color: _selectedMode == AssistantMode.wakeWord
                         ? Colors.white
                         : Colors.green,
@@ -177,7 +177,7 @@ class AssistantModeChoiceState extends State<AssistantModeChoice> {
                   'Manual',
                   style: TextStyle(
                     fontWeight: FontWeight.bold,
-                    fontSize: 18,
+                    fontSize: 17,
                     color: _selectedMode == AssistantMode.manual
                         ? Colors.white
                         : Colors.green,
diff --git a/lib/widgets/chat_section.dart b/lib/widgets/chat_section.dart
index 596b9f3..ca48cab 100644
--- a/lib/widgets/chat_section.dart
+++ b/lib/widgets/chat_section.dart
@@ -20,22 +20,24 @@ class ChatSection extends StatelessWidget {
         borderRadius: BorderRadius.circular(12),
       ),
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           // Chat heading
           Container(
-            padding: EdgeInsets.all(6),
-            alignment: Alignment.center,
+            padding: EdgeInsets.fromLTRB(12, 12, 0, 0),
+            // alignment: Alignment.l,
             child: Text(
-              'Command Logs',
+              'Conversation Logs',
               style: TextStyle(
                 fontWeight: FontWeight.bold,
-                fontSize: 20,
+                fontSize: 18,
               ),
+              textAlign: TextAlign.left,
             ),
           ),
           // Chat messages with fixed height
           Container(
-            padding: EdgeInsets.all(12),
+            padding: EdgeInsets.all(10),
             height: 180, // Adjust the height as needed
             child: ListView.builder(
               controller: scrollController,
@@ -106,7 +108,7 @@ class ChatMessageTile extends StatelessWidget {
                 ),
                 child: Text(
                   message.text,
-                  style: TextStyle(color: Colors.white, fontSize: 18),
+                  style: TextStyle(color: Colors.white, fontSize: 17),
                   maxLines: null,
                 ),
               ),
diff --git a/lib/widgets/nlu_engine_choice.dart b/lib/widgets/nlu_engine_choice.dart
index 1e8ca52..22b7074 100644
--- a/lib/widgets/nlu_engine_choice.dart
+++ b/lib/widgets/nlu_engine_choice.dart
@@ -130,7 +130,7 @@ class _NLUEngineChoiceState extends State<NLUEngineChoice> {
                   'Snips',
                   style: TextStyle(
                     fontWeight: FontWeight.bold,
-                    fontSize: 18,
+                    fontSize: 17,
                     color: _selectedEngine == NLUEngine.snips
                         ? Colors.white
                         : Colors.green,
@@ -175,7 +175,7 @@ class _NLUEngineChoiceState extends State<NLUEngineChoice> {
                   'RASA',
                   style: TextStyle(
                     fontWeight: FontWeight.bold,
-                    fontSize: 18,
+                    fontSize: 17,
                     color: _selectedEngine == NLUEngine.rasa
                         ? Colors.white
                         : Colors.green,
diff --git a/lib/widgets/try_commands.dart b/lib/widgets/try_commands.dart
new file mode 100644
index 0000000..0670bd2
--- /dev/null
+++ b/lib/widgets/try_commands.dart
@@ -0,0 +1,87 @@
+import 'package:flutter/material.dart';
+
+class TryCommandsSection extends StatelessWidget {
+  final Future<void> Function(String) onCommandTap; // Define a callback
+
+  TryCommandsSection({required this.onCommandTap});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+        width: double.infinity,
+        child: Card(
+          // padding: EdgeInsets.all(16),
+          // decoration: BoxDecoration(
+          //   borderRadius: BorderRadius.circular(12),
+          // ),
+          elevation: 4, // Add a subtle shadow
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Container(
+                padding: EdgeInsets.fromLTRB(12, 12, 0, 0),
+                child: Text(
+                  "Try Commands",
+                  style: TextStyle(
+                    fontSize: 18,
+                    fontWeight: FontWeight.bold,
+                  ),
+                  textAlign: TextAlign.left,
+                ),
+              ),
+              Container(
+                padding: EdgeInsets.fromLTRB(12, 0, 12, 0),
+                child: Text(
+                  "(Tap on any of the following commands to try them out)",
+                  style: TextStyle(fontSize: 14, fontStyle: FontStyle.italic),
+                  textAlign: TextAlign.left,
+                ),
+              ),
+              SizedBox(height: 6),
+              Container(
+                padding: EdgeInsets.fromLTRB(12, 0, 12, 12),
+                child: Wrap(
+                  spacing: 10,
+                  children: [
+                    buildCommandButton("Set the volume to fifty percent"),
+                    buildCommandButton("Set the fan speed to max"),
+                    buildCommandButton(
+                        "Increase the temperature by three degrees"),
+                    buildCommandButton(
+                        "Decrease the fan speed by five percent"),
+                    buildCommandButton("Can you reduce the volume"),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ));
+  }
+
+  Widget buildCommandButton(String commandText) {
+    return GestureDetector(
+      onTap: () {
+        onCommandTap(commandText);
+      },
+      child: Container(
+        margin: EdgeInsets.all(6),
+        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        decoration: BoxDecoration(
+          color: Colors.green.withOpacity(0.1),
+          borderRadius: BorderRadius.circular(10),
+          border: Border.all(color: Colors.green, width: 2),
+        ),
+        child: Text(
+          commandText,
+          style: TextStyle(
+            color: Colors.green,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+      ),
+    );
+  }
+}