Merge pull request #808 from pangeachat/conversation-bot-design

switch form dropdowns to new wigget type to make options appear below…

assets/l10n/intl_en.arb

@@ -4016,9 +4016,9 @@
   "conversationBotModeSelectOption_storyGame": "Story Game",
   "conversationBotDiscussionZone_title": "Discussion Settings",
   "conversationBotDiscussionZone_discussionTopicLabel": "Discussion Topic",
-  "conversationBotDiscussionZone_discussionTopicPlaceholder": "Set Discussion Topic",
+  "conversationBotDiscussionZone_discussionTopicPlaceholder": "Set discussion topic",
   "conversationBotDiscussionZone_discussionKeywordsLabel": "Discussion Keywords",
-  "conversationBotDiscussionZone_discussionKeywordsPlaceholder": "Set Discussion Keywords",
+  "conversationBotDiscussionZone_discussionKeywordsPlaceholder": "Set discussion keywords",
   "conversationBotDiscussionZone_discussionKeywordsHintText": "Comma separated list of keywords to guide the discussion",
   "conversationBotDiscussionZone_discussionTriggerScheduleEnabledLabel": "Send discussion prompt on a schedule",
   "conversationBotDiscussionZone_discussionTriggerScheduleHourIntervalLabel": "Hours between discussion prompts",
@@ -4364,5 +4364,6 @@
   "selectBotLanguage": "Select bot language",
   "chooseVoice": "Choose a voice",
   "enterLanguageLevel": "Please enter a language level",
-  "enterDiscussionTopic": "Please enter a discussion topic"
+  "enterDiscussionTopic": "Please enter a discussion topic",
+  "selectBotChatMode": "Select chat mode"
 }

lib/pangea/widgets/conversation_bot/conversation_bot_mode_dynamic_zone.dart

@@ -27,6 +27,8 @@ class ConversationBotModeDynamicZone extends StatelessWidget {
         decoration: InputDecoration(
           hintText: L10n.of(context)!
               .conversationBotDiscussionZone_discussionTopicPlaceholder,
+          contentPadding:
+              const EdgeInsets.symmetric(horizontal: 28.0, vertical: 12.0),
         ),
         controller: discussionTopicController,
         validator: (value) => enabled &&
@@ -44,6 +46,7 @@ class ConversationBotModeDynamicZone extends StatelessWidget {
         decoration: InputDecoration(
           hintText: L10n.of(context)!
               .conversationBotDiscussionZone_discussionKeywordsPlaceholder,
+          contentPadding: const EdgeInsets.symmetric(horizontal: 28.0),
         ),
         controller: discussionKeywordsController,
         enabled: enabled,
@@ -58,6 +61,7 @@ class ConversationBotModeDynamicZone extends StatelessWidget {
         decoration: InputDecoration(
           hintText: L10n.of(context)!
               .conversationBotCustomZone_customSystemPromptPlaceholder,
+          contentPadding: const EdgeInsets.symmetric(horizontal: 28.0),
         ),
         validator: (value) => enabled &&
                 botOptions.mode == BotMode.custom &&

lib/pangea/widgets/conversation_bot/conversation_bot_mode_select.dart

@@ -1,3 +1,4 @@
+import 'package:dropdown_button2/dropdown_button2.dart';
 import 'package:fluffychat/pangea/constants/bot_mode.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -26,23 +27,8 @@ class ConversationBotModeSelect extends StatelessWidget {
       //     L10n.of(context)!.conversationBotModeSelectOption_storyGame,
     };
 
-    String? mode = initialMode;
+    return DropdownButtonFormField2(
-    if (!options.containsKey(initialMode)) {
+      hint: Text(L10n.of(context)!.selectBotChatMode),
-      mode = null;
-    }
-
-    return DropdownButtonFormField(
-      // Initial Value
-      hint: Text(
-        options[mode ?? BotMode.discussion]!,
-        overflow: TextOverflow.clip,
-        textAlign: TextAlign.center,
-      ),
-      // ),
-      isExpanded: true,
-      // Down Arrow Icon
-      icon: const Icon(Icons.keyboard_arrow_down),
-      // Array list of items
       items: [
         for (final entry in options.entries)
           DropdownMenuItem(

lib/pangea/widgets/conversation_bot/conversation_bot_settings_form.dart

@@ -1,3 +1,4 @@
+import 'package:dropdown_button2/dropdown_button2.dart';
 import 'package:fluffychat/pangea/models/bot_options_model.dart';
 import 'package:fluffychat/pangea/widgets/conversation_bot/conversation_bot_mode_dynamic_zone.dart';
 import 'package:fluffychat/pangea/widgets/conversation_bot/conversation_bot_mode_select.dart';
@@ -36,8 +37,10 @@ class ConversationBotSettingsForm extends StatelessWidget {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        DropdownButtonFormField(
+        DropdownButtonFormField2(
-          // Initial Value
+          dropdownStyleData: const DropdownStyleData(
+            padding: EdgeInsets.zero,
+          ),
           hint: Text(
             L10n.of(context)!.selectBotLanguage,
             overflow: TextOverflow.clip,
@@ -45,7 +48,6 @@ class ConversationBotSettingsForm extends StatelessWidget {
           ),
           value: botOptions.targetLanguage,
           isExpanded: true,
-          icon: const Icon(Icons.keyboard_arrow_down),
           items: MatrixState.pangeaController.pLanguageStore.targetOptions
               .map((language) {
             return DropdownMenuItem(
@@ -60,8 +62,7 @@ class ConversationBotSettingsForm extends StatelessWidget {
           onChanged: enabled ? onUpdateBotLanguage : null,
         ),
         const SizedBox(height: 12),
-        DropdownButtonFormField<String>(
+        DropdownButtonFormField2<String>(
-          // Initial Value
           hint: Text(
             L10n.of(context)!.chooseVoice,
             overflow: TextOverflow.clip,
@@ -69,7 +70,6 @@ class ConversationBotSettingsForm extends StatelessWidget {
           ),
           value: botOptions.targetVoice,
           isExpanded: true,
-          icon: const Icon(Icons.keyboard_arrow_down),
           items: const [],
           onChanged: enabled ? onUpdateBotVoice : null,
         ),

lib/pangea/widgets/space/language_level_dropdown.dart

@@ -1,3 +1,4 @@
+import 'package:dropdown_button2/dropdown_button2.dart';
 import 'package:fluffychat/pangea/constants/language_constants.dart';
 import 'package:fluffychat/pangea/utils/language_level_copy.dart';
 import 'package:flutter/material.dart';
@@ -19,18 +20,13 @@ class LanguageLevelDropdown extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return DropdownButtonFormField(
+    return DropdownButtonFormField2(
-      // Initial Value
       hint: Text(
         L10n.of(context)!.selectLanguageLevel,
         overflow: TextOverflow.clip,
         textAlign: TextAlign.center,
       ),
       value: initialLevel,
-      isExpanded: true,
-      // Down Arrow Icon
-      icon: const Icon(Icons.keyboard_arrow_down),
-      // Array list of items
       items: LanguageLevelType.allInts.map((int levelOption) {
         return DropdownMenuItem(
           value: levelOption,

pubspec.lock

@@ -345,6 +345,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "7.0.0"
+  dropdown_button2:
+    dependency: "direct main"
+    description:
+      name: dropdown_button2
+      sha256: b0fe8d49a030315e9eef6c7ac84ca964250155a6224d491c1365061bc974a9e1
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.9"
   dynamic_color:
     dependency: "direct main"
     description:
@@ -2642,14 +2650,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.3.1"
-  visibility_detector:
-    dependency: transitive
-    description:
-      name: visibility_detector
-      sha256: "15c54a459ec2c17b4705450483f3d5a2858e733aee893dcee9d75fd04814940d"
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.3.3"
   vm_service:
     dependency: transitive
     description:
@@ -2723,7 +2723,7 @@ packages:
     source: hosted
     version: "1.2.0"
   win32:
-    dependency: "direct overridden"
+    dependency: transitive
     description:
       name: win32
       sha256: "015002c060f1ae9f41a818f2d5640389cc05283e368be19dc8d77cecb43c40c9"

pubspec.yaml

@@ -113,6 +113,7 @@ dependencies:
   android_intent_plus: ^5.2.0
   country_picker: ^2.0.25
   csv: ^6.0.0
+  dropdown_button2: ^2.3.9
   fl_chart: ^0.67.0
   firebase_analytics: ^11.0.1
   firebase_core: ^3.1.0