Skip to content

feat: add multiline input support for inputfield #2

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

Open
Zfinix wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: add multiline input support for inputfield #2

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c79a277
feat: enable multiline text in starguide_chat_input.dart
Zfinix Sep 11, 2025
4ab3139
chore: clean up fixes to chat input
Zfinix Sep 15, 2025
c916c0d
Merge branch 'main' of https://github.com/serverpod/starguide
Zfinix Sep 15, 2025
8d5ae09
chore: bug fixes to multiline support
Zfinix Sep 15, 2025
a5e6416
Merge branch 'main' into main
Zfinix Sep 15, 2025
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
124 changes: 75 additions & 49 deletions starguide_flutter/lib/chat/starguide_chat_input.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import 'package:starguide_flutter/config/constants.dart';

Expand Down Expand Up @@ -32,23 +33,28 @@ class _StarguideChatInputState extends State<StarguideChatInput> {
final String hintText;

if (widget.numChatRequests >= kMaxChatRequests) {
hintText = 'Clear the chat to start a new conversation.';
hintText = 'Clear the chat to start aR new conversation.';
} else if (widget.numChatRequests == 0) {
hintText = 'Ask me anything about Serverpod...';
} else {
hintText = 'Ask a follow-up question...';
}

return Container(
padding:
const EdgeInsets.only(left: 12.0, right: 8.0, top: 8.0, bottom: 8.0),
child: Column(
padding: const EdgeInsets.only(
left: 12.0,
right: 8.0,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
children: [
Expanded(
Expanded(
child: KeyboardListener(
focusNode: widget.focusNode,
onKeyEvent: (event) => _handleKeyboardEvents(event),
child: Container(
constraints: BoxConstraints(maxHeight: 400.0),
child: TextField(
focusNode: widget.focusNode,
autofocus: true,
enabled: widget.numChatRequests < kMaxChatRequests,
buildCounter: (
Expand All @@ -60,56 +66,76 @@ class _StarguideChatInputState extends State<StarguideChatInput> {
return const SizedBox();
},
maxLength: kMaxChatRequestLength,
maxLines: 1,
decoration: InputDecoration.collapsed(
maxLines: null,
minLines: 1,
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.newline,
textAlignVertical: TextAlignVertical.top,
decoration: InputDecoration(
hintText: hintText,
hintStyle: TextStyle(color: theme.disabledColor),
border: InputBorder.none,
),
controller: widget.textController,
onSubmitted: (value) {
widget.onSend(widget.textController.text);
widget.textController.clear();
widget.focusNode.requestFocus();
},
),
),
if (widget.isGeneratingResponse)
Container(
padding: const EdgeInsets.all(10),
width: 40,
height: 40,
child: CircularProgressIndicator(
color: theme.colorScheme.primary,
),
)
else
TextButton(
style: TextButton.styleFrom(
backgroundColor: widget.focusNode.hasFocus
? theme.colorScheme.primary
: theme.dividerColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Column(
children: [
if (widget.isGeneratingResponse)
Container(
padding: const EdgeInsets.all(10),
width: 40,
height: 40,
child: CircularProgressIndicator(
color: theme.colorScheme.primary,
),
)
else
TextButton(
style: TextButton.styleFrom(
backgroundColor: widget.focusNode.hasFocus
? theme.colorScheme.primary
: theme.dividerColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
padding: const EdgeInsets.all(4),
minimumSize: const Size(48, 48),
),
onPressed: widget.enabled ? _handleSubmit : null,
child: const Icon(
LucideIcons.rocket300,
size: 20,
color: Colors.white,
),
padding: const EdgeInsets.all(4),
minimumSize: const Size(48, 48),
),
onPressed: widget.enabled
? () {
widget.onSend(widget.textController.text);
widget.textController.clear();
}
: null,
child: const Icon(
LucideIcons.rocket300,
size: 20,
color: Colors.white,
),
),
],
),
],
),
)
],
),
);
}
}

void _handleKeyboardEvents(KeyEvent event) {
if (event is KeyDownEvent) {
final isEnterPressed = event.logicalKey == LogicalKeyboardKey.enter;
final isShiftPressed = HardwareKeyboard.instance.isShiftPressed;

if (isEnterPressed && !isShiftPressed && widget.enabled) {
_handleSubmit();
}
}
}

void _handleSubmit() {
if (widget.textController.text.trim().isNotEmpty) {
widget.onSend(widget.textController.text);
widget.textController.clear();
}
}
}