1. Update the background image to high-definition; 2. Disable the swi…

…pe back function on desktop and web platforms; 3. Increase the maximum height of the chat input box when it gains focus to display more input content.
trkjoy · Apr 2, 2024 · d2f817f · d2f817f
1 parent d0e9248
commit d2f817f
Show file tree

Hide file tree

Showing 22 changed files with 141 additions and 99 deletions.
diff --git a/assets/background-creative-island-dark.webp b/assets/background-creative-island-dark.webp
diff --git a/assets/background-creative-island.jpg b/assets/background-creative-island.jpg
diff --git a/assets/background-creative-island.webp b/assets/background-creative-island.webp
diff --git a/assets/background-dark-s1.jpg b/assets/background-dark-s1.jpg
diff --git a/assets/background-dark-s3.jpg b/assets/background-dark-s3.jpg
diff --git a/assets/background-dark.jpg b/assets/background-dark.jpg
diff --git a/assets/background-dark.png b/assets/background-dark.png
diff --git a/assets/background-discovery-dark.jpg b/assets/background-discovery-dark.jpg
diff --git a/assets/background-discovery-dark.webp b/assets/background-discovery-dark.webp
diff --git a/assets/background-discovery.png b/assets/background-discovery.png
diff --git a/assets/background-light-s1.jpg b/assets/background-light-s1.jpg
diff --git a/assets/background-team-dark.png b/assets/background-team-dark.png
diff --git a/assets/background-team.jpg b/assets/background-team.jpg
diff --git a/assets/background-team.png b/assets/background-team.png
diff --git a/assets/background.jpg b/assets/background.jpg
diff --git a/assets/background.png b/assets/background.png
diff --git a/lib/page/chat/home.dart b/lib/page/chat/home.dart
@@ -104,6 +104,9 @@ class _HomePageState extends State<HomePage> {
   /// 促销事件
   PromotionEvent? promotionEvent;
 
+  /// Maximum height of the chat input box
+  int inputMaxLines = 6;
+
   /// 用于监听键盘事件，实现回车发送消息，Shift+Enter换行
   late final FocusNode _focusNode = FocusNode(
     onKeyEvent: (node, event) {
@@ -487,10 +490,21 @@ class _HomePageState extends State<HomePage> {
                           ),
                         Expanded(
                           child: EnhancedTextField(
+                            onFocusChange: (hasFocus) {
+                              if (hasFocus) {
+                                setState(() {
+                                  inputMaxLines = 15;
+                                });
+                              } else {
+                                setState(() {
+                                  inputMaxLines = 6;
+                                });
+                              }
+                            },
                             focusNode: _focusNode,
                             controller: _textController,
                             customColors: customColors,
-                            maxLines: 10,
+                            maxLines: inputMaxLines,
                             minLines: 6,
                             hintText:
                                 AppLocale.askMeAnyQuestion.getString(context),

diff --git a/lib/page/component/background_container.dart b/lib/page/component/background_container.dart
@@ -1,6 +1,7 @@
 import 'dart:ui';
 
 import 'package:askaide/helper/constant.dart';
+import 'package:askaide/helper/platform.dart';
 import 'package:askaide/page/component/image.dart';
 import 'package:askaide/page/component/theme/custom_size.dart';
 import 'package:askaide/page/component/theme/custom_theme.dart';
@@ -75,10 +76,13 @@ class _BackgroundContainerState extends State<BackgroundContainer> {
         FocusScope.of(context).requestFocus(FocusNode());
       },
       onHorizontalDragUpdate: (details) {
-        int sensitivity = 15;
-        if (details.delta.dx > sensitivity) {
-          if (Navigator.of(context).canPop()) {
-            Navigator.of(context).pop();
+        // Only the mobile app supports horizontal swiping to go back to the previous page.
+        if (PlatformTool.isAndroid() || PlatformTool.isIOS()) {
+          int sensitivity = 15;
+          if (details.delta.dx > sensitivity) {
+            if (Navigator.of(context).canPop()) {
+              Navigator.of(context).pop();
+            }
           }
         }
       },

diff --git a/lib/page/component/chat/chat_input.dart b/lib/page/component/chat/chat_input.dart
@@ -30,6 +30,7 @@ class ChatInput extends StatefulWidget {
   final Function()? onVoiceRecordTappedEvent;
   final List<Widget> Function()? leftSideToolsBuilder;
   final Function()? onStopGenerate;
+  final Function(bool hasFocus)? onFocusChange;
 
   const ChatInput({
     super.key,
@@ -44,6 +45,7 @@ class ChatInput extends StatefulWidget {
     this.onImageSelected,
     this.selectedImageFiles,
     this.onStopGenerate,
+    this.onFocusChange,
   });
 
   @override
@@ -71,6 +73,9 @@ class _ChatInputState extends State<ChatInput> with TickerProviderStateMixin {
 
   final maxLength = 150000;
 
+  /// Maximum height of the chat input box
+  var maxLines = 5;
+
   @override
   void initState() {
     super.initState();
@@ -225,21 +230,35 @@ class _ChatInputState extends State<ChatInput> with TickerProviderStateMixin {
                           child: Row(
                             children: [
                               Expanded(
-                                child: TextFormField(
-                                  keyboardType: TextInputType.multiline,
-                                  textInputAction: TextInputAction.newline,
-                                  maxLines: 5,
-                                  minLines: 1,
-                                  maxLength: maxLength,
-                                  focusNode: _focusNode,
-                                  controller: _textController,
-                                  decoration: InputDecoration(
-                                    hintText: widget.hintText,
-                                    hintStyle: const TextStyle(
-                                      fontSize: CustomSize.defaultHintTextSize,
+                                child: Focus(
+                                  onFocusChange: (hasFocus) {
+                                    setState(() {
+                                      if (hasFocus) {
+                                        maxLines = 10;
+                                      } else {
+                                        maxLines = 5;
+                                      }
+                                    });
+
+                                    widget.onFocusChange?.call(hasFocus);
+                                  },
+                                  child: TextFormField(
+                                    keyboardType: TextInputType.multiline,
+                                    textInputAction: TextInputAction.newline,
+                                    maxLines: maxLines,
+                                    minLines: 1,
+                                    maxLength: maxLength,
+                                    focusNode: _focusNode,
+                                    controller: _textController,
+                                    decoration: InputDecoration(
+                                      hintText: widget.hintText,
+                                      hintStyle: const TextStyle(
+                                        fontSize:
+                                            CustomSize.defaultHintTextSize,
+                                      ),
+                                      border: InputBorder.none,
+                                      counterText: '',
                                     ),
-                                    border: InputBorder.none,
-                                    counterText: '',
                                   ),
                                 ),
                               ),

diff --git a/lib/page/component/enhanced_textfield.dart b/lib/page/component/enhanced_textfield.dart
@@ -66,6 +66,8 @@ class EnhancedTextField extends StatefulWidget {
 
   final Widget? middleWidget;
 
+  final Function(bool hasFocus)? onFocusChange;
+
   const EnhancedTextField({
     super.key,
     required this.customColors,
@@ -103,6 +105,7 @@ class EnhancedTextField extends StatefulWidget {
     this.hintTextSize,
     this.labelHelpWidget,
     this.middleWidget,
+    this.onFocusChange,
   });
 
   @override
@@ -232,73 +235,76 @@ class _EnhancedTextFieldState extends State<EnhancedTextField> {
             Column(
               mainAxisSize: MainAxisSize.min,
               children: [
-                TextFormField(
-                  initialValue: widget.initValue,
-                  readOnly: widget.readOnly ?? false,
-                  focusNode: widget.focusNode,
-                  controller: widget.controller,
-                  inputFormatters: widget.inputFormatters,
-                  textDirection: widget.textDirection,
-                  obscureText: widget.obscureText ?? false,
-                  enabled: widget.enabled ?? true,
-                  style: TextStyle(
-                    color: widget.customColors.textfieldValueColor,
-                    fontSize: widget.fontSize ?? 15,
-                  ),
-                  decoration: InputDecoration(
-                    filled: widget.enableBackground,
-                    fillColor: widget.customColors.textfieldBackgroundColor,
-                    hintText: widget.hintText,
-                    hintStyle: TextStyle(
-                      fontSize:
-                          widget.hintTextSize ?? CustomSize.defaultHintTextSize,
-                      color: widget.hintColor ??
-                          widget.customColors.textfieldHintColor,
+                Focus(
+                  onFocusChange: widget.onFocusChange,
+                  child: TextFormField(
+                    initialValue: widget.initValue,
+                    readOnly: widget.readOnly ?? false,
+                    focusNode: widget.focusNode,
+                    controller: widget.controller,
+                    inputFormatters: widget.inputFormatters,
+                    textDirection: widget.textDirection,
+                    obscureText: widget.obscureText ?? false,
+                    enabled: widget.enabled ?? true,
+                    style: TextStyle(
+                      color: widget.customColors.textfieldValueColor,
+                      fontSize: widget.fontSize ?? 15,
                     ),
-                    hintTextDirection: widget.textDirection,
-                    counterText: "",
-                    border: resolveInputBorder(),
-                    enabledBorder: resolveInputBorder(),
-                    focusedBorder: resolveInputBorder(),
-                    // isDense: true,
-                    contentPadding: EdgeInsets.only(
-                      top: widget.labelPosition == LabelPosition.top ? 0 : 10,
-                      left: widget.enableBackground ? 15 : 0,
-                      right: widget.enableBackground ? 15 : 0,
-                      bottom:
-                          (widget.showCounter || widget.bottomButton != null) &&
-                                  widget.middleWidget == null
-                              ? 30
-                              : 10,
-                    ),
-                    labelText: widget.labelPosition == LabelPosition.inner
-                        ? widget.labelText
-                        : null,
-                    labelStyle: TextStyle(
-                      color: widget.customColors.textfieldLabelColor,
+                    decoration: InputDecoration(
+                      filled: widget.enableBackground,
+                      fillColor: widget.customColors.textfieldBackgroundColor,
+                      hintText: widget.hintText,
+                      hintStyle: TextStyle(
+                        fontSize: widget.hintTextSize ??
+                            CustomSize.defaultHintTextSize,
+                        color: widget.hintColor ??
+                            widget.customColors.textfieldHintColor,
+                      ),
+                      hintTextDirection: widget.textDirection,
+                      counterText: "",
+                      border: resolveInputBorder(),
+                      enabledBorder: resolveInputBorder(),
+                      focusedBorder: resolveInputBorder(),
+                      // isDense: true,
+                      contentPadding: EdgeInsets.only(
+                        top: widget.labelPosition == LabelPosition.top ? 0 : 10,
+                        left: widget.enableBackground ? 15 : 0,
+                        right: widget.enableBackground ? 15 : 0,
+                        bottom: (widget.showCounter ||
+                                    widget.bottomButton != null) &&
+                                widget.middleWidget == null
+                            ? 30
+                            : 10,
+                      ),
+                      labelText: widget.labelPosition == LabelPosition.inner
+                          ? widget.labelText
+                          : null,
+                      labelStyle: TextStyle(
+                        color: widget.customColors.textfieldLabelColor,
+                      ),
+                      suffixIcon: widget.suffixIcon ??
+                          (widget.labelPosition == LabelPosition.left
+                              ? widget.inputSelector
+                              : null),
                     ),
-                    suffixIcon: widget.suffixIcon ??
-                        (widget.labelPosition == LabelPosition.left
-                            ? widget.inputSelector
-                            : null),
-                  ),
-                  cursorRadius: const Radius.circular(10),
-                  keyboardType: widget.keyboardType,
-                  autofocus: widget.autofocus ?? false,
-                  maxLength: widget.maxLength,
-                  minLines: widget.minLines,
-                  maxLines: widget.maxLines,
-                  onChanged: widget.controller == null
-                      ? (value) {
-                          setState(() {
-                            textLength = value.length;
-                          });
+                    cursorRadius: const Radius.circular(10),
+                    keyboardType: widget.keyboardType,
+                    autofocus: widget.autofocus ?? false,
+                    maxLength: widget.maxLength,
+                    minLines: widget.minLines,
+                    maxLines: widget.maxLines,
+                    onChanged: widget.controller == null
+                        ? (value) {
+                            setState(() {
+                              textLength = value.length;
+                            });
 
-                          if (widget.onChanged != null) {
-                            widget.onChanged!(value);
+                            if (widget.onChanged != null) {
+                              widget.onChanged!(value);
+                            }
                           }
-                        }
-                      : null,
+                        : null,
+                  ),
                 ),
                 widget.middleWidget ?? const SizedBox(),
               ],

diff --git a/lib/page/component/theme/custom_theme.dart b/lib/page/component/theme/custom_theme.dart
@@ -243,11 +243,11 @@ class CustomColors extends ThemeExtension<CustomColors> {
 
   static const light = CustomColors(
     borderRadius: 8,
-    appBarBackgroundImage: 'assets/background.png',
-    appBarBackgroundImageForRoom: 'assets/background-team.png',
+    appBarBackgroundImage: 'assets/background.jpg',
+    appBarBackgroundImageForRoom: 'assets/background-team.jpg',
     appBarBackgroundImageForCreativeIsland:
-        'assets/background-creative-island.webp',
-    appBarBackgroundImageDiscovery: 'assets/background-discovery.png',
+        'assets/background-creative-island.jpg',
+    appBarBackgroundImageDiscovery: 'assets/background-light-s1.jpg',
     chatRoomBackground: Color.fromARGB(255, 239, 239, 239),
     chatRoomReplyBackground: Colors.white,
     chatRoomReplyBackgroundSecondary: Color.fromARGB(200, 255, 255, 255),
@@ -301,11 +301,10 @@ class CustomColors extends ThemeExtension<CustomColors> {
 
   static const dark = CustomColors(
     borderRadius: 8,
-    appBarBackgroundImage: 'assets/background-dark.png',
-    appBarBackgroundImageForRoom: 'assets/background-team-dark.png',
-    appBarBackgroundImageForCreativeIsland:
-        'assets/background-creative-island-dark.webp',
-    appBarBackgroundImageDiscovery: 'assets/background-discovery-dark.webp',
+    appBarBackgroundImage: 'assets/background-dark.jpg',
+    appBarBackgroundImageForRoom: 'assets/background-discovery-dark.jpg',
+    appBarBackgroundImageForCreativeIsland: 'assets/background-dark-s3.jpg',
+    appBarBackgroundImageDiscovery: 'assets/background-dark-s1.jpg',
     chatRoomBackground: Color.fromARGB(255, 53, 53, 53),
     chatRoomReplyBackground: Color.fromARGB(255, 22, 22, 22),
     chatRoomReplyBackgroundSecondary: Color.fromARGB(200, 39, 39, 39),

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -179,14 +179,14 @@ flutter:
     - assets/app-256-transparent.png
     - assets/light-dark-auto.png
     - assets/openai.png
-    - assets/background.png
-    - assets/background-dark.png
-    - assets/background-team.png
-    - assets/background-team-dark.png
-    - assets/background-creative-island.webp
-    - assets/background-creative-island-dark.webp
-    - assets/background-discovery.png
-    - assets/background-discovery-dark.webp
+    - assets/background.jpg
+    - assets/background-dark.jpg
+    - assets/background-team.jpg
+    - assets/background-creative-island.jpg
+    - assets/background-discovery-dark.jpg
+    - assets/background-dark-s1.jpg
+    - assets/background-dark-s3.jpg
+    - assets/background-light-s1.jpg
     - assets/transport.png
     - assets/weibo.png
     - assets/github.png