ars/iiEsaywebUIapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(chat): Improve model dropdown handling with LayoutBuilder

Browse Source
This commit is contained in:
cogwheel0
2025-11-21 11:59:17 +05:30
parent dc1e4ec14d
commit dd3fe42216
1 changed files with 279 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
lib/features/chat/views/chat_page.dart
View File

@@ -1377,7 +1377,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
), ),
) )
: GestureDetector( : LayoutBuilder(
builder: (context, constraints) {
return GestureDetector(
onTap: () async { onTap: () async {
final modelsAsync = ref.read(modelsProvider); final modelsAsync = ref.read(modelsProvider);
@@ -1388,7 +1390,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
final models = await ref.read( final models = await ref.read(
modelsProvider.future, modelsProvider.future,
); );
// Check mounted and use context immediately together // Check mounted and use context immediately
// together
if (!mounted) return; if (!mounted) return;
// ignore: use_build_context_synchronously // ignore: use_build_context_synchronously
_showModelDropdown(context, ref, models); _showModelDropdown(context, ref, models);
@@ -1400,20 +1403,23 @@ class _ChatPageState extends ConsumerState<ChatPage> {
); );
} }
} else if (modelsAsync.hasValue) { } else if (modelsAsync.hasValue) {
// If we have data, show immediately (no async gap) // If we have data, show immediately (no async
// gap)
_showModelDropdown( _showModelDropdown(
context, context,
ref, ref,
modelsAsync.value!, modelsAsync.value!,
); );
} else if (modelsAsync.hasError) { } else if (modelsAsync.hasError) {
// If there's an error, try to refresh and load // If there's an error, try to refresh and
// load
try { try {
ref.invalidate(modelsProvider); ref.invalidate(modelsProvider);
final models = await ref.read( final models = await ref.read(
modelsProvider.future, modelsProvider.future,
); );
// Check mounted and use context immediately together // Check mounted and use context immediately
// together
if (!mounted) return; if (!mounted) return;
// ignore: use_build_context_synchronously // ignore: use_build_context_synchronously
_showModelDropdown(context, ref, models); _showModelDropdown(context, ref, models);
@@ -1437,12 +1443,22 @@ class _ChatPageState extends ConsumerState<ChatPage> {
conversation: conversation, conversation: conversation,
); );
}, },
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth,
),
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.center,
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment:
CrossAxisAlignment.center,
children: [ children: [
AnimatedSwitcher( AnimatedSwitcher(
duration: const Duration(milliseconds: 250), duration: const Duration(
milliseconds: 250,
),
switchInCurve: Curves.easeOutCubic, switchInCurve: Curves.easeOutCubic,
switchOutCurve: Curves.easeInCubic, switchOutCurve: Curves.easeInCubic,
child: displayConversationTitle != null child: displayConversationTitle != null
@@ -1453,14 +1469,16 @@ class _ChatPageState extends ConsumerState<ChatPage> {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
StreamingTitleText( StreamingTitleText(
title: displayConversationTitle, title:
displayConversationTitle,
style: AppTypography style: AppTypography
.headlineSmallStyle .headlineSmallStyle
.copyWith( .copyWith(
color: context color: context
.conduitTheme .conduitTheme
.textPrimary, .textPrimary,
fontWeight: FontWeight.w600, fontWeight:
FontWeight.w600,
fontSize: 18, fontSize: 18,
height: 1.3, height: 1.3,
), ),
@@ -1469,33 +1487,60 @@ class _ChatPageState extends ConsumerState<ChatPage> {
.textPrimary .textPrimary
.withValues(alpha: 0.8), .withValues(alpha: 0.8),
), ),
const SizedBox(height: Spacing.xs), const SizedBox(
height: Spacing.xs,
),
], ],
) )
: const SizedBox.shrink( : const SizedBox.shrink(
key: ValueKey<String>('empty-title'), key: ValueKey<String>(
'empty-title',
),
), ),
), ),
Transform.translate( Transform.translate(
offset: const Offset(0, 0), offset: const Offset(0, 0),
child: () { child: () {
const double iconPaddingX =
Spacing.xs;
const double iconPaddingY =
Spacing.xxs;
const double iconWidth =
IconSize.small;
const double iconBoxWidth =
(iconPaddingX * 2) +
(BorderWidth.thin * 2) +
iconWidth;
final double maxLabelWidth =
(constraints.maxWidth -
(iconBoxWidth * 2) -
(Spacing.xs * 2))
.clamp(
48.0,
constraints.maxWidth,
);
final row = Row( final row = Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment:
MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Opacity( Opacity(
opacity: 0.0, opacity: 0.0,
child: Container( child: Container(
padding: const EdgeInsets.symmetric( padding:
horizontal: Spacing.xs, const EdgeInsets.symmetric(
vertical: Spacing.xxs, horizontal:
iconPaddingX,
vertical: iconPaddingY,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: context color: context
.conduitTheme .conduitTheme
.surfaceBackground .surfaceBackground
.withValues(alpha: 0.3), .withValues(alpha: 0.3),
borderRadius: BorderRadius.circular( borderRadius:
BorderRadius.circular(
AppBorderRadius.badge, AppBorderRadius.badge,
), ),
border: Border.all( border: Border.all(
@@ -1507,17 +1552,22 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
child: Icon( child: Icon(
Platform.isIOS Platform.isIOS
? CupertinoIcons.chevron_down ? CupertinoIcons
: Icons.keyboard_arrow_down, .chevron_down
: Icons
.keyboard_arrow_down,
color: context color: context
.conduitTheme .conduitTheme
.iconSecondary, .iconSecondary,
size: IconSize.small, size: iconWidth,
), ),
), ),
), ),
const SizedBox(width: Spacing.xs), const SizedBox(width: Spacing.xs),
Flexible( ConstrainedBox(
constraints: BoxConstraints(
maxWidth: maxLabelWidth,
),
child: MiddleEllipsisText( child: MiddleEllipsisText(
modelLabel, modelLabel,
style: modelTextStyle, style: modelTextStyle,
@@ -1527,16 +1577,18 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
const SizedBox(width: Spacing.xs), const SizedBox(width: Spacing.xs),
Container( Container(
padding: const EdgeInsets.symmetric( padding:
horizontal: Spacing.xs, const EdgeInsets.symmetric(
vertical: Spacing.xxs, horizontal: iconPaddingX,
vertical: iconPaddingY,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: context color: context
.conduitTheme .conduitTheme
.surfaceBackground .surfaceBackground
.withValues(alpha: 0.3), .withValues(alpha: 0.3),
borderRadius: BorderRadius.circular( borderRadius:
BorderRadius.circular(
AppBorderRadius.badge, AppBorderRadius.badge,
), ),
border: Border.all( border: Border.all(
@@ -1548,37 +1600,55 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
child: Icon( child: Icon(
Platform.isIOS Platform.isIOS
? CupertinoIcons.chevron_down ? CupertinoIcons
: Icons.keyboard_arrow_down, .chevron_down
: Icons
.keyboard_arrow_down,
color: context color: context
.conduitTheme .conduitTheme
.iconSecondary, .iconSecondary,
size: IconSize.small, size: iconWidth,
), ),
), ),
], ],
); );
final constrainedRow = ConstrainedBox(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth,
),
child: row,
);
return hasConversationTitle return hasConversationTitle
? SizedBox(height: 24, child: row) ? SizedBox(
: row; height: 24,
child: constrainedRow,
)
: constrainedRow;
}(), }(),
), ),
if (isReviewerMode) if (isReviewerMode)
Padding( Padding(
padding: const EdgeInsets.only(top: 2.0), padding: const EdgeInsets.only(
top: 2.0,
),
child: Container( child: Container(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm, horizontal: Spacing.sm,
vertical: 1.0, vertical: 1.0,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: context.conduitTheme.success color: context
.conduitTheme
.success
.withValues(alpha: 0.1), .withValues(alpha: 0.1),
borderRadius: BorderRadius.circular( borderRadius:
BorderRadius.circular(
AppBorderRadius.badge, AppBorderRadius.badge,
), ),
border: Border.all( border: Border.all(
color: context.conduitTheme.success color: context
.conduitTheme
.success
.withValues(alpha: 0.3), .withValues(alpha: 0.3),
width: BorderWidth.thin, width: BorderWidth.thin,
), ),
@@ -1587,7 +1657,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
'REVIEWER MODE', 'REVIEWER MODE',
style: AppTypography.captionStyle style: AppTypography.captionStyle
.copyWith( .copyWith(
color: context.conduitTheme.success, color: context
.conduitTheme
.success,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
fontSize: 9, fontSize: 9,
), ),
@@ -1597,6 +1669,10 @@ class _ChatPageState extends ConsumerState<ChatPage> {
], ],
), ),
), ),
),
);
},
),
actions: [ actions: [
if (!_isSelectionMode) ...[ if (!_isSelectionMode) ...[
Padding( Padding(