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

feat(chat): Add loading state for conversation title and model selector

Browse Source
This commit is contained in:
cogwheel0
2025-12-15 20:31:40 +05:30
parent 8fa69fc165
commit 9ec7fdadde
1 changed files with 144 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1502,11 +1502,14 @@ class _ChatPageState extends ConsumerState<ChatPage> {
trimmedConversationTitle.isNotEmpty) trimmedConversationTitle.isNotEmpty)
? trimmedConversationTitle ? trimmedConversationTitle
: null; : null;
// Watch loading state for app bar skeleton
final isLoadingConversation = ref.watch(isLoadingConversationProvider);
final formattedModelName = selectedModel != null final formattedModelName = selectedModel != null
? _formatModelDisplayName(selectedModel.name) ? _formatModelDisplayName(selectedModel.name)
: null; : null;
final modelLabel = formattedModelName ?? l10n.chooseModel; final modelLabel = formattedModelName ?? l10n.chooseModel;
final hasConversationTitle = displayConversationTitle != null; final hasConversationTitle =
displayConversationTitle != null || isLoadingConversation;
final TextStyle modelTextStyle = hasConversationTitle final TextStyle modelTextStyle = hasConversationTitle
? AppTypography.small.copyWith( ? AppTypography.small.copyWith(
color: context.conduitTheme.textSecondary, color: context.conduitTheme.textSecondary,
@@ -1746,8 +1749,27 @@ class _ChatPageState extends ConsumerState<ChatPage> {
: LayoutBuilder( : LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
// Build title pill (tappable for context menu) // Build title pill (tappable for context menu)
// Show skeleton when loading, actual title otherwise
Widget? titlePill; Widget? titlePill;
if (displayConversationTitle != null) { if (isLoadingConversation) {
// Show skeleton pill while loading conversation
titlePill = _buildAppBarPill(
context: context,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
child: ConduitLoading.skeleton(
width: 120,
height: 18,
borderRadius: BorderRadius.circular(
AppBorderRadius.sm,
),
),
),
);
} else if (displayConversationTitle != null) {
titlePill = GestureDetector( titlePill = GestureDetector(
onTap: () { onTap: () {
final conversation = ref.read( final conversation = ref.read(
@@ -1795,95 +1817,141 @@ class _ChatPageState extends ConsumerState<ChatPage> {
} }
// Build model selector pill // Build model selector pill
final modelPill = GestureDetector( // Show skeleton when loading, actual model selector otherwise
onTap: () async { final Widget modelPill;
final modelsAsync = ref.read(modelsProvider); if (isLoadingConversation) {
// Show skeleton pill while loading conversation
if (modelsAsync.isLoading) { modelPill = _buildAppBarPill(
try {
final models = await ref.read(
modelsProvider.future,
);
if (!mounted) return;
// ignore: use_build_context_synchronously
_showModelDropdown(context, ref, models);
} catch (e) {
DebugLogger.error(
'model-load-failed',
scope: 'chat/model-selector',
error: e,
);
}
} else if (modelsAsync.hasValue) {
_showModelDropdown(
context,
ref,
modelsAsync.value!,
);
} else if (modelsAsync.hasError) {
try {
ref.invalidate(modelsProvider);
final models = await ref.read(
modelsProvider.future,
);
if (!mounted) return;
// ignore: use_build_context_synchronously
_showModelDropdown(context, ref, models);
} catch (e) {
DebugLogger.error(
'model-refresh-failed',
scope: 'chat/model-selector',
error: e,
);
}
}
},
child: _buildAppBarPill(
context: context, context: context,
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm, horizontal: Spacing.sm,
vertical: Spacing.xs, vertical: Spacing.xs,
), ),
child: Row( child: ConduitLoading.skeleton(
mainAxisSize: MainAxisSize.min, width: 80,
children: [ height: 14,
ConstrainedBox( borderRadius: BorderRadius.circular(
constraints: BoxConstraints( AppBorderRadius.sm,
maxWidth: ),
constraints.maxWidth -
Spacing.xxl,
),
child: MiddleEllipsisText(
modelLabel,
style: modelTextStyle,
textAlign: TextAlign.center,
semanticsLabel: modelLabel,
),
),
const SizedBox(width: Spacing.xs),
Icon(
Platform.isIOS
? CupertinoIcons.chevron_down
: Icons.keyboard_arrow_down,
color:
context.conduitTheme.iconSecondary,
size: IconSize.small,
),
],
), ),
), ),
), );
); } else {
modelPill = GestureDetector(
onTap: () async {
final modelsAsync = ref.read(modelsProvider);
if (modelsAsync.isLoading) {
try {
final models = await ref.read(
modelsProvider.future,
);
if (!mounted) return;
// ignore: use_build_context_synchronously
_showModelDropdown(context, ref, models);
} catch (e) {
DebugLogger.error(
'model-load-failed',
scope: 'chat/model-selector',
error: e,
);
}
} else if (modelsAsync.hasValue) {
_showModelDropdown(
context,
ref,
modelsAsync.value!,
);
} else if (modelsAsync.hasError) {
try {
ref.invalidate(modelsProvider);
final models = await ref.read(
modelsProvider.future,
);
if (!mounted) return;
// ignore: use_build_context_synchronously
_showModelDropdown(context, ref, models);
} catch (e) {
DebugLogger.error(
'model-refresh-failed',
scope: 'chat/model-selector',
error: e,
);
}
}
},
child: _buildAppBarPill(
context: context,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm,
vertical: Spacing.xs,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
ConstrainedBox(
constraints: BoxConstraints(
maxWidth:
constraints.maxWidth -
Spacing.xxl,
),
child: MiddleEllipsisText(
modelLabel,
style: modelTextStyle,
textAlign: TextAlign.center,
semanticsLabel: modelLabel,
),
),
const SizedBox(width: Spacing.xs),
Icon(
Platform.isIOS
? CupertinoIcons.chevron_down
: Icons.keyboard_arrow_down,
color:
context.conduitTheme.iconSecondary,
size: IconSize.small,
),
],
),
),
),
);
}
return Column( return Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
if (titlePill != null) ...[ if (titlePill != null) ...[
titlePill, AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
switchInCurve: Curves.easeOut,
switchOutCurve: Curves.easeIn,
child: KeyedSubtree(
key: ValueKey(
isLoadingConversation
? 'loading'
: 'title-$displayConversationTitle',
),
child: titlePill,
),
),
const SizedBox(height: Spacing.xs), const SizedBox(height: Spacing.xs),
], ],
modelPill, AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
switchInCurve: Curves.easeOut,
switchOutCurve: Curves.easeIn,
child: KeyedSubtree(
key: ValueKey(
isLoadingConversation
? 'model-loading'
: 'model-$modelLabel',
),
child: modelPill,
),
),
if (isReviewerMode) if (isReviewerMode)
Padding( Padding(
padding: const EdgeInsets.only( padding: const EdgeInsets.only(