feat: customize quick pills
This commit is contained in:
cogwheel0
@@ -13,7 +13,9 @@ import 'dart:math' as math;
|
||||
import '../providers/chat_providers.dart';
|
||||
import '../../tools/widgets/unified_tools_modal.dart';
|
||||
import '../../tools/providers/tools_providers.dart';
|
||||
import '../../../core/models/tool.dart';
|
||||
import '../../../core/providers/app_providers.dart';
|
||||
import '../../../core/services/settings_service.dart';
|
||||
import '../../chat/services/voice_input_service.dart';
|
||||
|
||||
import '../../../shared/utils/platform_utils.dart';
|
||||
@@ -372,6 +374,15 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
|
||||
final webSearchEnabled = ref.watch(webSearchEnabledProvider);
|
||||
final imageGenEnabled = ref.watch(imageGenerationEnabledProvider);
|
||||
final imageGenAvailable = ref.watch(imageGenerationAvailableProvider);
|
||||
final selectedQuickPills =
|
||||
ref.watch(appSettingsProvider.select((s) => s.quickPills));
|
||||
final toolsAsync = ref.watch(toolsListProvider);
|
||||
final List<Tool> availableTools = toolsAsync.maybeWhen<List<Tool>>(
|
||||
data: (t) => t,
|
||||
orElse: () => const <Tool>[],
|
||||
);
|
||||
final bool showWebPill = selectedQuickPills.contains('web');
|
||||
final bool showImagePillPref = selectedQuickPills.contains('image');
|
||||
final voiceAvailableAsync = ref.watch(voiceInputAvailableProvider);
|
||||
final bool voiceAvailable = voiceAvailableAsync.maybeWhen(
|
||||
data: (v) => v,
|
||||
@@ -603,103 +614,158 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final double total = constraints.maxWidth;
|
||||
const double toolsWidth = TouchTarget.comfortable;
|
||||
const double gapBeforeTools = Spacing.xs;
|
||||
final double gapBetweenPills = imageGenAvailable ? Spacing.xs : 0;
|
||||
final bool showImage = imageGenAvailable && showImagePillPref;
|
||||
final bool showWeb = showWebPill;
|
||||
// Tools button is always shown
|
||||
final double toolsWidth = TouchTarget.comfortable;
|
||||
final double gapBeforeTools = Spacing.xs;
|
||||
|
||||
final double availableForPills =
|
||||
math.max(0.0, total - toolsWidth - gapBeforeTools);
|
||||
|
||||
// Measure natural widths (text + horizontal padding)
|
||||
// Compose selected pill entries in order
|
||||
final List<Map<String, dynamic>> entries = [];
|
||||
final textStyle = AppTypography.labelStyle;
|
||||
const double horizontalPadding = Spacing.md * 2;
|
||||
|
||||
String webLabel = AppLocalizations.of(context)!.web;
|
||||
final webTp = TextPainter(
|
||||
text: TextSpan(text: webLabel, style: textStyle),
|
||||
maxLines: 1,
|
||||
textDirection: Directionality.of(context),
|
||||
)..layout();
|
||||
final double webNatural = webTp.width + horizontalPadding;
|
||||
|
||||
double imageNatural = 0;
|
||||
if (imageGenAvailable) {
|
||||
final imgLabel = AppLocalizations.of(context)!.imageGen;
|
||||
final imgTp = TextPainter(
|
||||
text: TextSpan(text: imgLabel, style: textStyle),
|
||||
maxLines: 1,
|
||||
textDirection: Directionality.of(context),
|
||||
)..layout();
|
||||
imageNatural = imgTp.width + horizontalPadding;
|
||||
for (final id in selectedQuickPills) {
|
||||
if (id == 'web' && showWeb) {
|
||||
final lbl = AppLocalizations.of(context)!.web;
|
||||
final tp = TextPainter(
|
||||
text: TextSpan(text: lbl, style: textStyle),
|
||||
maxLines: 1,
|
||||
textDirection: Directionality.of(context),
|
||||
)..layout();
|
||||
entries.add({
|
||||
'id': id,
|
||||
'label': lbl,
|
||||
'width': tp.width + horizontalPadding,
|
||||
'widgetBuilder': () => _buildPillButton(
|
||||
icon: Platform.isIOS ? CupertinoIcons.search : Icons.search,
|
||||
label: lbl,
|
||||
isActive: webSearchEnabled,
|
||||
onTap: widget.enabled && !_isRecording
|
||||
? () {
|
||||
ref.read(webSearchEnabledProvider.notifier).state = !webSearchEnabled;
|
||||
}
|
||||
: null,
|
||||
),
|
||||
});
|
||||
} else if (id == 'image' && showImage) {
|
||||
final lbl = AppLocalizations.of(context)!.imageGen;
|
||||
final tp = TextPainter(
|
||||
text: TextSpan(text: lbl, style: textStyle),
|
||||
maxLines: 1,
|
||||
textDirection: Directionality.of(context),
|
||||
)..layout();
|
||||
entries.add({
|
||||
'id': id,
|
||||
'label': lbl,
|
||||
'width': tp.width + horizontalPadding,
|
||||
'widgetBuilder': () => _buildPillButton(
|
||||
icon: Platform.isIOS ? CupertinoIcons.photo : Icons.image,
|
||||
label: lbl,
|
||||
isActive: imageGenEnabled,
|
||||
onTap: widget.enabled && !_isRecording
|
||||
? () {
|
||||
ref
|
||||
.read(imageGenerationEnabledProvider.notifier)
|
||||
.state = !imageGenEnabled;
|
||||
}
|
||||
: null,
|
||||
),
|
||||
});
|
||||
} else {
|
||||
// Tool ID from server
|
||||
Tool? tool;
|
||||
for (final t in availableTools) {
|
||||
if (t.id == id) { tool = t; break; }
|
||||
}
|
||||
if (tool != null) {
|
||||
final lbl = tool!.name;
|
||||
final tp = TextPainter(
|
||||
text: TextSpan(text: lbl, style: textStyle),
|
||||
maxLines: 1,
|
||||
textDirection: Directionality.of(context),
|
||||
)..layout();
|
||||
final selectedIds = ref.watch(selectedToolIdsProvider);
|
||||
final isActive = selectedIds.contains(id);
|
||||
entries.add({
|
||||
'id': id,
|
||||
'label': lbl,
|
||||
'width': tp.width + horizontalPadding,
|
||||
'widgetBuilder': () => _buildPillButton(
|
||||
icon: Icons.extension,
|
||||
label: lbl,
|
||||
isActive: isActive,
|
||||
onTap: widget.enabled && !_isRecording
|
||||
? () {
|
||||
final current = List<String>.from(
|
||||
ref.read(selectedToolIdsProvider));
|
||||
if (current.contains(id)) {
|
||||
current.remove(id);
|
||||
} else {
|
||||
current.add(id);
|
||||
}
|
||||
ref.read(selectedToolIdsProvider.notifier).state = current;
|
||||
}
|
||||
: null,
|
||||
),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
List<Widget> rowChildren = [];
|
||||
|
||||
Widget webPill = _buildPillButton(
|
||||
icon: Platform.isIOS
|
||||
? CupertinoIcons.search
|
||||
: Icons.search,
|
||||
label: webLabel,
|
||||
isActive: webSearchEnabled,
|
||||
onTap: widget.enabled && !_isRecording
|
||||
? () {
|
||||
ref.read(
|
||||
webSearchEnabledProvider.notifier,
|
||||
).state = !webSearchEnabled;
|
||||
}
|
||||
: null,
|
||||
);
|
||||
|
||||
if (!imageGenAvailable) {
|
||||
if (webNatural <= availableForPills) {
|
||||
rowChildren.add(webPill);
|
||||
// Build rowChildren according to measured widths and available space
|
||||
final List<Widget> rowChildren = [];
|
||||
if (entries.isEmpty) {
|
||||
// no quick pills, will just show tools later
|
||||
} else if (entries.length == 1) {
|
||||
final e = entries.first;
|
||||
final pill = e['widgetBuilder']() as Widget;
|
||||
final w = (e['width'] as double);
|
||||
if (w <= availableForPills) {
|
||||
rowChildren.add(pill);
|
||||
} else {
|
||||
rowChildren.add(Flexible(fit: FlexFit.loose, child: webPill));
|
||||
rowChildren.add(Flexible(fit: FlexFit.loose, child: pill));
|
||||
}
|
||||
} else {
|
||||
Widget imagePill = _buildPillButton(
|
||||
icon: Platform.isIOS
|
||||
? CupertinoIcons.photo
|
||||
: Icons.image,
|
||||
label: AppLocalizations.of(context)!.imageGen,
|
||||
isActive: imageGenEnabled,
|
||||
onTap: widget.enabled && !_isRecording
|
||||
? () {
|
||||
ref.read(
|
||||
imageGenerationEnabledProvider.notifier,
|
||||
).state = !imageGenEnabled;
|
||||
}
|
||||
: null,
|
||||
);
|
||||
// up to 2 based on settings enforcement; if more, take first 2
|
||||
final e1 = entries[0];
|
||||
final e2 = entries[1];
|
||||
final w1 = (e1['width'] as double);
|
||||
final w2 = (e2['width'] as double);
|
||||
const double gapBetweenPills = Spacing.xs;
|
||||
final combined = w1 + gapBetweenPills + w2;
|
||||
final pill1 = e1['widgetBuilder']() as Widget;
|
||||
final pill2 = e2['widgetBuilder']() as Widget;
|
||||
|
||||
final double combined = webNatural + gapBetweenPills + imageNatural;
|
||||
if (combined <= availableForPills) {
|
||||
// Both fit naturally
|
||||
rowChildren..add(webPill)..add(const SizedBox(width: Spacing.xs))..add(imagePill);
|
||||
} else if (webNatural < availableForPills) {
|
||||
// Keep web natural, let image take remaining
|
||||
rowChildren
|
||||
..add(webPill)
|
||||
..add(pill1)
|
||||
..add(const SizedBox(width: Spacing.xs))
|
||||
..add(Flexible(fit: FlexFit.loose, child: imagePill));
|
||||
} else if (imageNatural < availableForPills) {
|
||||
// Keep image natural, let web take remaining
|
||||
..add(pill2);
|
||||
} else if (w1 < availableForPills) {
|
||||
rowChildren
|
||||
..add(Flexible(fit: FlexFit.loose, child: webPill))
|
||||
..add(pill1)
|
||||
..add(const SizedBox(width: Spacing.xs))
|
||||
..add(imagePill);
|
||||
..add(Flexible(fit: FlexFit.loose, child: pill2));
|
||||
} else if (w2 < availableForPills) {
|
||||
rowChildren
|
||||
..add(Flexible(fit: FlexFit.loose, child: pill1))
|
||||
..add(const SizedBox(width: Spacing.xs))
|
||||
..add(pill2);
|
||||
} else {
|
||||
// Both too large: apportion space proportional to their natural widths
|
||||
final int webFlex = math.max(1, webNatural.round());
|
||||
final int imgFlex = math.max(1, imageNatural.round());
|
||||
final int f1 = math.max(1, w1.round());
|
||||
final int f2 = math.max(1, w2.round());
|
||||
rowChildren
|
||||
..add(Flexible(fit: FlexFit.loose, flex: webFlex, child: webPill))
|
||||
..add(Flexible(fit: FlexFit.loose, flex: f1, child: pill1))
|
||||
..add(const SizedBox(width: Spacing.xs))
|
||||
..add(Flexible(fit: FlexFit.loose, flex: imgFlex, child: imagePill));
|
||||
..add(Flexible(fit: FlexFit.loose, flex: f2, child: pill2));
|
||||
}
|
||||
}
|
||||
|
||||
// Append tools button at the end
|
||||
// Append tools button at the end (always visible)
|
||||
rowChildren
|
||||
..add(const SizedBox(width: Spacing.xs))
|
||||
..add(_buildRoundButton(
|
||||
|
||||
@@ -6,6 +6,8 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../../../core/services/settings_service.dart';
|
||||
import '../../../shared/theme/theme_extensions.dart';
|
||||
import '../../tools/providers/tools_providers.dart';
|
||||
import '../../../core/models/tool.dart';
|
||||
import '../../../shared/widgets/conduit_components.dart';
|
||||
import '../../../shared/utils/ui_utils.dart';
|
||||
import '../../../core/providers/app_providers.dart';
|
||||
@@ -257,6 +259,134 @@ class AppCustomizationPage extends ConsumerWidget {
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: Spacing.lg),
|
||||
// Quick pills (Web / Image Gen)
|
||||
Text(
|
||||
AppLocalizations.of(context)!.onboardQuickTitle,
|
||||
style: context.conduitTheme.headingSmall?.copyWith(
|
||||
color: context.conduitTheme.textPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: Spacing.md),
|
||||
Consumer(
|
||||
builder: (context, ref, _) {
|
||||
final selectedRaw = ref.watch(
|
||||
appSettingsProvider.select((s) => s.quickPills),
|
||||
);
|
||||
final toolsAsync = ref.watch(toolsListProvider);
|
||||
final tools = toolsAsync.maybeWhen(
|
||||
data: (t) => t,
|
||||
orElse: () => const <Tool>[],
|
||||
);
|
||||
final allowed = <String>{
|
||||
'web',
|
||||
'image',
|
||||
...tools.map((t) => t.id),
|
||||
};
|
||||
// Sanitize persisted selection
|
||||
final selected =
|
||||
selectedRaw.where((id) => allowed.contains(id)).take(2).toList();
|
||||
if (selected.length != selectedRaw.length) {
|
||||
// Persist sanitized list asynchronously
|
||||
Future.microtask(() => ref
|
||||
.read(appSettingsProvider.notifier)
|
||||
.setQuickPills(selected));
|
||||
}
|
||||
final int selectedCount = selected.length;
|
||||
|
||||
void toggle(String id) async {
|
||||
final current = List<String>.from(selected);
|
||||
if (current.contains(id)) {
|
||||
current.remove(id);
|
||||
} else {
|
||||
if (current.length >= 2) return; // enforce max 2
|
||||
current.add(id);
|
||||
}
|
||||
await ref.read(appSettingsProvider.notifier).setQuickPills(current);
|
||||
}
|
||||
|
||||
// Build dynamic tool chips list once
|
||||
final List<Widget> dynamicToolChips = ref
|
||||
.watch(toolsListProvider)
|
||||
.maybeWhen<List<Widget>>(
|
||||
data: (tools) => tools.map((Tool t) {
|
||||
final isSel = selected.contains(t.id);
|
||||
final canSelect = selectedCount < 2 || isSel;
|
||||
return ConduitChip(
|
||||
label: t.name,
|
||||
icon: Icons.extension,
|
||||
isSelected: isSel,
|
||||
onTap: canSelect ? () => toggle(t.id) : null,
|
||||
);
|
||||
}).toList(),
|
||||
orElse: () => const <Widget>[],
|
||||
);
|
||||
|
||||
return ConduitCard(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: Spacing.listItemPadding,
|
||||
vertical: Spacing.sm,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
AppLocalizations.of(context)!.appCustomizationSubtitle,
|
||||
style: context.conduitTheme.bodySmall?.copyWith(
|
||||
color: context.conduitTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: selected.isEmpty
|
||||
? null
|
||||
: () async {
|
||||
await ref
|
||||
.read(appSettingsProvider.notifier)
|
||||
.setQuickPills(const []);
|
||||
},
|
||||
child: Text(AppLocalizations.of(context)!.clear),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: Spacing.sm),
|
||||
Wrap(
|
||||
spacing: Spacing.sm,
|
||||
runSpacing: Spacing.sm,
|
||||
children: [
|
||||
ConduitChip(
|
||||
label: AppLocalizations.of(context)!.web,
|
||||
icon: Platform.isIOS
|
||||
? CupertinoIcons.search
|
||||
: Icons.search,
|
||||
isSelected: selected.contains('web'),
|
||||
onTap: (selectedCount < 2 || selected.contains('web'))
|
||||
? () => toggle('web')
|
||||
: null,
|
||||
),
|
||||
ConduitChip(
|
||||
label: AppLocalizations.of(context)!.imageGen,
|
||||
icon: Platform.isIOS
|
||||
? CupertinoIcons.photo
|
||||
: Icons.image,
|
||||
isSelected: selected.contains('image'),
|
||||
onTap: (selectedCount < 2 || selected.contains('image'))
|
||||
? () => toggle('image')
|
||||
: null,
|
||||
),
|
||||
// Dynamic tools from server
|
||||
...dynamicToolChips,
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
||||
const SizedBox(height: Spacing.lg),
|
||||
Text(
|
||||
AppLocalizations.of(context)!.realtime,
|
||||
|
||||
Reference in New Issue
Block a user