Skip to content

Commit

Permalink
chore: move all mobile input actions to the bottom
Browse files Browse the repository at this point in the history
  • Loading branch information
@richardshiue
richardshiue committed Jan 3, 2025
1 parent 31a756b commit c9bca30
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 89 deletions.
114 changes: 27 additions & 87 deletions .../appflowy_flutter/lib/plugins/ai_chat/presentation/chat_input/mobile_ai_prompt_input.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/ai_chat/application/ai_prompt_input_bloc.dart';
import 'package:appflowy/plugins/ai_chat/application/chat_entity.dart';
Expand Down Expand Up @@ -143,24 +142,15 @@ class _MobileAIPromptInputState extends State<MobileAIPromptInput> {
),
),
),
Container(
constraints: const BoxConstraints(
minHeight: MobileAIPromptSizes.textFieldMinHeight,
maxHeight: 220,
),
child: IntrinsicHeight(
child: Row(
children: [
const HSpace(8.0),
leadingButtons(context),
Expanded(
child: inputTextField(context),
),
sendButton(),
const HSpace(12.0),
],
),
),
inputTextField(context),
Row(
children: [
const HSpace(8.0),
leadingButtons(context),
const Spacer(),
sendButton(),
const HSpace(12.0),
],
),
],
),
Expand Down Expand Up @@ -267,6 +257,7 @@ class _MobileAIPromptInputState extends State<MobileAIPromptInput> {
return ExtendedTextField(
controller: textController,
focusNode: focusNode,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
border: InputBorder.none,
enabledBorder: InputBorder.none,
Expand All @@ -283,7 +274,8 @@ class _MobileAIPromptInputState extends State<MobileAIPromptInput> {
textCapitalization: TextCapitalization.sentences,
minLines: 1,
maxLines: null,
style: Theme.of(context).textTheme.bodyMedium,
style:
Theme.of(context).textTheme.bodyMedium?.copyWith(height: 20 / 14),
specialTextSpanBuilder: ChatInputTextSpanBuilder(
inputControlCubit: inputControlCubit,
specialTextStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
Expand All @@ -298,10 +290,8 @@ class _MobileAIPromptInputState extends State<MobileAIPromptInput> {

Widget leadingButtons(BuildContext context) {
return Container(
alignment: Alignment.bottomCenter,
padding: const EdgeInsets.only(bottom: 8.0),
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: _LeadingActions(
textController: textController,
// onMention: () {
// textController.text += '@';
// if (!focusNode.hasFocus) {
Expand Down Expand Up @@ -329,7 +319,6 @@ class _MobileAIPromptInputState extends State<MobileAIPromptInput> {
Widget sendButton() {
return Container(
alignment: Alignment.bottomCenter,
padding: const EdgeInsets.only(bottom: 8.0),
child: PromptInputSendButton(
buttonSize: MobileAIPromptSizes.sendButtonSize,
iconSize: MobileAIPromptSizes.sendButtonSize,
Expand All @@ -341,85 +330,36 @@ class _MobileAIPromptInputState extends State<MobileAIPromptInput> {
}
}

class _LeadingActions extends StatefulWidget {
class _LeadingActions extends StatelessWidget {
const _LeadingActions({
required this.textController,
required this.showPredefinedFormatSection,
required this.predefinedFormat,
required this.onTogglePredefinedFormatSection,
required this.onUpdateSelectedSources,
});

final TextEditingController textController;
final bool showPredefinedFormatSection;
final PredefinedFormat predefinedFormat;
final void Function() onTogglePredefinedFormatSection;
final void Function(List<String>) onUpdateSelectedSources;

@override
State<_LeadingActions> createState() => _LeadingActionsState();
}

class _LeadingActionsState extends State<_LeadingActions> {
bool inputNotEmpty = false;
bool userExpandOverride = false;

@override
void initState() {
super.initState();
widget.textController.addListener(onTextChanged);
}

@override
void dispose() {
widget.textController.removeListener(onTextChanged);
super.dispose();
}

@override
Widget build(BuildContext context) {
return Material(
color: Theme.of(context).colorScheme.surface,
child: !inputNotEmpty || userExpandOverride
? SeparatedRow(
mainAxisSize: MainAxisSize.min,
separatorBuilder: () => const HSpace(4.0),
children: [
PromptInputMobileSelectSourcesButton(
onUpdateSelectedSources: widget.onUpdateSelectedSources,
),
PromptInputMobileToggleFormatButton(
showFormatBar: widget.showPredefinedFormatSection,
onTap: widget.onTogglePredefinedFormatSection,
),
],
)
: SizedBox.square(
dimension: 32.0,
child: FlowyButton(
expandText: false,
margin: EdgeInsets.zero,
text: const FlowySvg(
FlowySvgs.arrow_right_m,
size: Size.square(24),
),
onTap: () {
setState(() => userExpandOverride = true);
},
),
),
child: SeparatedRow(
mainAxisSize: MainAxisSize.min,
separatorBuilder: () => const HSpace(4.0),
children: [
PromptInputMobileSelectSourcesButton(
onUpdateSelectedSources: onUpdateSelectedSources,
),
PromptInputMobileToggleFormatButton(
showFormatBar: showPredefinedFormatSection,
onTap: onTogglePredefinedFormatSection,
),
],
),
);
}

void onTextChanged() {
final actual = widget.textController.text.isNotEmpty;
if (inputNotEmpty != actual) {
setState(() {
inputNotEmpty = actual;
if (!inputNotEmpty) {
userExpandOverride = false;
}
});
}
}
}
5 changes: 3 additions & 2 deletions frontend/appflowy_flutter/lib/plugins/ai_chat/presentation/layout_define.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,9 @@ class MobileAIPromptSizes {
static const predefinedFormatBarButtonSpacing = 8.0;
static const predefinedFormatBarPadding = EdgeInsets.all(8.0);

static const textFieldMinHeight = 48.0;
static const textFieldContentPadding = EdgeInsets.all(8.0);
static const textFieldMinHeight = 32.0;
static const textFieldContentPadding =
EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0);

static const mentionIconSize = 20.0;
static const sendButtonSize = 32.0;
Expand Down

0 comments on commit c9bca30

Please sign in to comment.