feat(chat): Add prompt variables
This commit is contained in:
cogwheel0
351
lib/features/prompts/widgets/prompt_variable_dialog.dart
Normal file
351
lib/features/prompts/widgets/prompt_variable_dialog.dart
Normal file
@@ -0,0 +1,351 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
|
||||
import 'package:conduit/core/utils/prompt_variable_parser.dart';
|
||||
import 'package:conduit/l10n/app_localizations.dart';
|
||||
import 'package:conduit/shared/theme/theme_extensions.dart';
|
||||
|
||||
// Use AppTypography constants for font sizes
|
||||
|
||||
/// A dialog that collects user input for prompt variables.
|
||||
///
|
||||
/// Displays input fields for each variable based on their type (text, textarea,
|
||||
/// select, number) and validates required fields before submission.
|
||||
class PromptVariableDialog extends StatefulWidget {
|
||||
const PromptVariableDialog({
|
||||
super.key,
|
||||
required this.variables,
|
||||
required this.promptTitle,
|
||||
});
|
||||
|
||||
/// The variables that require user input.
|
||||
final List<PromptVariable> variables;
|
||||
|
||||
/// The title of the prompt being used.
|
||||
final String promptTitle;
|
||||
|
||||
/// Shows the dialog and returns a map of variable name to user-provided value.
|
||||
/// Returns null if the user cancels the dialog.
|
||||
static Future<Map<String, String>?> show(
|
||||
BuildContext context, {
|
||||
required List<PromptVariable> variables,
|
||||
required String promptTitle,
|
||||
}) {
|
||||
return showDialog<Map<String, String>>(
|
||||
context: context,
|
||||
barrierDismissible: false,
|
||||
builder: (ctx) =>
|
||||
PromptVariableDialog(variables: variables, promptTitle: promptTitle),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
State<PromptVariableDialog> createState() => _PromptVariableDialogState();
|
||||
}
|
||||
|
||||
class _PromptVariableDialogState extends State<PromptVariableDialog> {
|
||||
late final Map<String, TextEditingController> _controllers;
|
||||
late final Map<String, String?> _selectValues;
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
bool _isSubmitting = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controllers = {};
|
||||
_selectValues = {};
|
||||
|
||||
for (final variable in widget.variables) {
|
||||
if (variable.type == PromptVariableType.select) {
|
||||
_selectValues[variable.name] = variable.defaultValue;
|
||||
} else {
|
||||
_controllers[variable.name] = TextEditingController(
|
||||
text: variable.defaultValue ?? '',
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
for (final controller in _controllers.values) {
|
||||
controller.dispose();
|
||||
}
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _submit() {
|
||||
if (_isSubmitting) return;
|
||||
|
||||
if (!_formKey.currentState!.validate()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setState(() => _isSubmitting = true);
|
||||
|
||||
final values = <String, String>{};
|
||||
for (final variable in widget.variables) {
|
||||
if (variable.type == PromptVariableType.select) {
|
||||
values[variable.name] = _selectValues[variable.name] ?? '';
|
||||
} else {
|
||||
values[variable.name] = _controllers[variable.name]?.text ?? '';
|
||||
}
|
||||
}
|
||||
|
||||
Navigator.of(context).pop(values);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = context.conduitTheme;
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
|
||||
return AlertDialog(
|
||||
backgroundColor: theme.surfaceBackground,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.dialog),
|
||||
),
|
||||
title: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
widget.promptTitle.isNotEmpty
|
||||
? widget.promptTitle
|
||||
: l10n.promptVariablesTitle,
|
||||
style: TextStyle(
|
||||
color: theme.textPrimary,
|
||||
fontSize: AppTypography.bodyLarge,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: Spacing.xs),
|
||||
Text(
|
||||
l10n.promptVariablesDescription,
|
||||
style: TextStyle(
|
||||
color: theme.textSecondary,
|
||||
fontSize: AppTypography.bodySmall,
|
||||
fontWeight: FontWeight.normal,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
content: SizedBox(
|
||||
width: double.maxFinite,
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
for (var i = 0; i < widget.variables.length; i++) ...[
|
||||
if (i > 0) const SizedBox(height: Spacing.md),
|
||||
_buildField(widget.variables[i]),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(null),
|
||||
child: Text(
|
||||
l10n.cancel,
|
||||
style: TextStyle(color: theme.textSecondary),
|
||||
),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: _isSubmitting ? null : _submit,
|
||||
child: Text(
|
||||
l10n.continueAction,
|
||||
style: TextStyle(
|
||||
color: _isSubmitting ? theme.textSecondary : theme.buttonPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildField(PromptVariable variable) {
|
||||
final theme = context.conduitTheme;
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
variable.displayLabel,
|
||||
style: TextStyle(
|
||||
color: theme.textPrimary,
|
||||
fontSize: AppTypography.bodySmall,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (variable.isRequired)
|
||||
Text(
|
||||
' *',
|
||||
style: TextStyle(
|
||||
color: theme.error,
|
||||
fontSize: AppTypography.bodySmall,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: Spacing.xs),
|
||||
_buildInputWidget(variable),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildInputWidget(PromptVariable variable) {
|
||||
switch (variable.type) {
|
||||
case PromptVariableType.textarea:
|
||||
return _buildTextareaField(variable);
|
||||
case PromptVariableType.select:
|
||||
return _buildSelectField(variable);
|
||||
case PromptVariableType.number:
|
||||
return _buildNumberField(variable);
|
||||
case PromptVariableType.text:
|
||||
return _buildTextField(variable);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildTextField(PromptVariable variable) {
|
||||
final theme = context.conduitTheme;
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
|
||||
return TextFormField(
|
||||
controller: _controllers[variable.name],
|
||||
style: TextStyle(color: theme.inputText),
|
||||
decoration: _inputDecoration(theme, variable.placeholder),
|
||||
validator: (value) {
|
||||
if (variable.isRequired && (value == null || value.trim().isEmpty)) {
|
||||
return l10n.requiredFieldHelper;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
onFieldSubmitted: (_) => _submit(),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTextareaField(PromptVariable variable) {
|
||||
final theme = context.conduitTheme;
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
|
||||
return TextFormField(
|
||||
controller: _controllers[variable.name],
|
||||
style: TextStyle(color: theme.inputText),
|
||||
decoration: _inputDecoration(theme, variable.placeholder),
|
||||
minLines: 3,
|
||||
maxLines: 6,
|
||||
validator: (value) {
|
||||
if (variable.isRequired && (value == null || value.trim().isEmpty)) {
|
||||
return l10n.requiredFieldHelper;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSelectField(PromptVariable variable) {
|
||||
final theme = context.conduitTheme;
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
final options = variable.options;
|
||||
|
||||
return DropdownButtonFormField<String>(
|
||||
initialValue: _selectValues[variable.name],
|
||||
decoration: _inputDecoration(theme, variable.placeholder),
|
||||
dropdownColor: theme.surfaceBackground,
|
||||
style: TextStyle(color: theme.inputText),
|
||||
items: options.map((option) {
|
||||
return DropdownMenuItem<String>(value: option, child: Text(option));
|
||||
}).toList(),
|
||||
onChanged: (value) {
|
||||
setState(() {
|
||||
_selectValues[variable.name] = value;
|
||||
});
|
||||
},
|
||||
validator: (value) {
|
||||
if (variable.isRequired && (value == null || value.isEmpty)) {
|
||||
return l10n.requiredFieldHelper;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildNumberField(PromptVariable variable) {
|
||||
final theme = context.conduitTheme;
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
|
||||
return TextFormField(
|
||||
controller: _controllers[variable.name],
|
||||
style: TextStyle(color: theme.inputText),
|
||||
decoration: _inputDecoration(theme, variable.placeholder),
|
||||
keyboardType: TextInputType.numberWithOptions(
|
||||
decimal: variable.step != null && variable.step! < 1,
|
||||
signed: variable.min != null && variable.min! < 0,
|
||||
),
|
||||
inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'[\d.-]'))],
|
||||
validator: (value) {
|
||||
if (variable.isRequired && (value == null || value.trim().isEmpty)) {
|
||||
return l10n.requiredFieldHelper;
|
||||
}
|
||||
if (value != null && value.isNotEmpty) {
|
||||
final num = double.tryParse(value);
|
||||
if (num == null) {
|
||||
return l10n.validationFormatError;
|
||||
}
|
||||
if (variable.min != null && num < variable.min!) {
|
||||
return l10n.promptVariableNumberMin(variable.min!);
|
||||
}
|
||||
if (variable.max != null && num > variable.max!) {
|
||||
return l10n.promptVariableNumberMax(variable.max!);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
onFieldSubmitted: (_) => _submit(),
|
||||
);
|
||||
}
|
||||
|
||||
InputDecoration _inputDecoration(ConduitThemeExtension theme, String? hint) {
|
||||
return InputDecoration(
|
||||
hintText: hint,
|
||||
hintStyle: TextStyle(color: theme.inputPlaceholder),
|
||||
filled: true,
|
||||
fillColor: theme.inputBackground,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
||||
borderSide: BorderSide(color: theme.inputBorder, width: 1),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
||||
borderSide: BorderSide(color: theme.buttonPrimary, width: 1),
|
||||
),
|
||||
errorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
||||
borderSide: BorderSide(color: theme.error, width: 1),
|
||||
),
|
||||
focusedErrorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
||||
borderSide: BorderSide(color: theme.error, width: 1.5),
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: Spacing.md,
|
||||
vertical: Spacing.md,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user