feat(chat): Add floating app bar with blurred background styling
This commit is contained in:
cogwheel0
@@ -938,6 +938,67 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
return messages.where((m) => _selectedMessageIds.contains(m.id)).toList();
|
return messages.where((m) => _selectedMessageIds.contains(m.id)).toList();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Builds a styled container with high-contrast background for app bar
|
||||||
|
/// widgets, matching the floating chat input styling.
|
||||||
|
Widget _buildAppBarPill({
|
||||||
|
required BuildContext context,
|
||||||
|
required Widget child,
|
||||||
|
bool isCircular = false,
|
||||||
|
}) {
|
||||||
|
final theme = Theme.of(context);
|
||||||
|
final isDark = theme.brightness == Brightness.dark;
|
||||||
|
|
||||||
|
// Use same high-contrast colors as the floating chat input
|
||||||
|
final backgroundColor = isDark
|
||||||
|
? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
|
||||||
|
: Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
|
||||||
|
|
||||||
|
final borderColor = context.conduitTheme.cardBorder.withValues(
|
||||||
|
alpha: isDark ? 0.65 : 0.55,
|
||||||
|
);
|
||||||
|
|
||||||
|
final borderRadius = isCircular
|
||||||
|
? BorderRadius.circular(100)
|
||||||
|
: BorderRadius.circular(AppBorderRadius.pill);
|
||||||
|
|
||||||
|
// For circular buttons, ensure the entire widget is constrained to a square
|
||||||
|
if (isCircular) {
|
||||||
|
return SizedBox(
|
||||||
|
width: 44,
|
||||||
|
height: 44,
|
||||||
|
child: ClipRRect(
|
||||||
|
borderRadius: borderRadius,
|
||||||
|
child: BackdropFilter(
|
||||||
|
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
|
||||||
|
child: Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: backgroundColor.withValues(alpha: 0.85),
|
||||||
|
borderRadius: borderRadius,
|
||||||
|
border: Border.all(color: borderColor, width: BorderWidth.thin),
|
||||||
|
),
|
||||||
|
child: Center(child: child),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return ClipRRect(
|
||||||
|
borderRadius: borderRadius,
|
||||||
|
child: BackdropFilter(
|
||||||
|
filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
|
||||||
|
child: Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: backgroundColor.withValues(alpha: 0.85),
|
||||||
|
borderRadius: borderRadius,
|
||||||
|
border: Border.all(color: borderColor, width: BorderWidth.thin),
|
||||||
|
),
|
||||||
|
child: child,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
Widget _buildMessagesList(ThemeData theme) {
|
Widget _buildMessagesList(ThemeData theme) {
|
||||||
// Use select to watch only the messages list to reduce rebuilds
|
// Use select to watch only the messages list to reduce rebuilds
|
||||||
final messages = ref.watch(
|
final messages = ref.watch(
|
||||||
@@ -969,7 +1030,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
// Use slivers to align with the actual messages view.
|
// Use slivers to align with the actual messages view.
|
||||||
// Do not attach the primary scroll controller here to avoid
|
// Do not attach the primary scroll controller here to avoid
|
||||||
// AnimatedSwitcher attaching the same controller twice.
|
// AnimatedSwitcher attaching the same controller twice.
|
||||||
// Add bottom padding to account for floating input overlay.
|
// Add top padding for floating app bar, bottom padding for floating input.
|
||||||
|
final topPadding =
|
||||||
|
MediaQuery.of(context).padding.top + kToolbarHeight + Spacing.md;
|
||||||
final bottomPadding = Spacing.lg + _inputHeight;
|
final bottomPadding = Spacing.lg + _inputHeight;
|
||||||
return CustomScrollView(
|
return CustomScrollView(
|
||||||
key: const ValueKey('loading_messages'),
|
key: const ValueKey('loading_messages'),
|
||||||
@@ -981,7 +1044,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
SliverPadding(
|
SliverPadding(
|
||||||
padding: EdgeInsets.fromLTRB(
|
padding: EdgeInsets.fromLTRB(
|
||||||
Spacing.lg,
|
Spacing.lg,
|
||||||
Spacing.md,
|
topPadding,
|
||||||
Spacing.lg,
|
Spacing.lg,
|
||||||
bottomPadding,
|
bottomPadding,
|
||||||
),
|
),
|
||||||
@@ -1100,7 +1163,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add bottom padding to account for floating input overlay.
|
// Add top padding for floating app bar, bottom padding for floating input.
|
||||||
|
final topPadding =
|
||||||
|
MediaQuery.of(context).padding.top + kToolbarHeight + Spacing.md;
|
||||||
final bottomPadding = Spacing.lg + _inputHeight;
|
final bottomPadding = Spacing.lg + _inputHeight;
|
||||||
return CustomScrollView(
|
return CustomScrollView(
|
||||||
key: const ValueKey('actual_messages'),
|
key: const ValueKey('actual_messages'),
|
||||||
@@ -1112,7 +1177,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
SliverPadding(
|
SliverPadding(
|
||||||
padding: EdgeInsets.fromLTRB(
|
padding: EdgeInsets.fromLTRB(
|
||||||
Spacing.lg,
|
Spacing.lg,
|
||||||
Spacing.md,
|
topPadding,
|
||||||
Spacing.lg,
|
Spacing.lg,
|
||||||
bottomPadding,
|
bottomPadding,
|
||||||
),
|
),
|
||||||
@@ -1354,7 +1419,9 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
final greetingText = resolvedGreetingName != null
|
final greetingText = resolvedGreetingName != null
|
||||||
? l10n.onboardStartTitle(resolvedGreetingName)
|
? l10n.onboardStartTitle(resolvedGreetingName)
|
||||||
: null;
|
: null;
|
||||||
// Add bottom padding to account for floating input overlay.
|
// Add top padding for floating app bar, bottom padding for floating input.
|
||||||
|
final topPadding =
|
||||||
|
MediaQuery.of(context).padding.top + kToolbarHeight + Spacing.md;
|
||||||
final bottomPadding = _inputHeight;
|
final bottomPadding = _inputHeight;
|
||||||
return LayoutBuilder(
|
return LayoutBuilder(
|
||||||
builder: (context, constraints) {
|
builder: (context, constraints) {
|
||||||
@@ -1369,7 +1436,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
child: Padding(
|
child: Padding(
|
||||||
padding: EdgeInsets.fromLTRB(
|
padding: EdgeInsets.fromLTRB(
|
||||||
Spacing.lg,
|
Spacing.lg,
|
||||||
0,
|
topPadding,
|
||||||
Spacing.lg,
|
Spacing.lg,
|
||||||
bottomPadding,
|
bottomPadding,
|
||||||
),
|
),
|
||||||
@@ -1584,84 +1651,160 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
// Replace Scaffold drawer with a tunable slide drawer for gentler snap behavior.
|
// Replace Scaffold drawer with a tunable slide drawer for gentler snap behavior.
|
||||||
drawerEnableOpenDragGesture: false,
|
drawerEnableOpenDragGesture: false,
|
||||||
drawerDragStartBehavior: DragStartBehavior.down,
|
drawerDragStartBehavior: DragStartBehavior.down,
|
||||||
|
extendBodyBehindAppBar: true,
|
||||||
appBar: AppBar(
|
appBar: AppBar(
|
||||||
backgroundColor: context.conduitTheme.surfaceBackground,
|
backgroundColor: Colors.transparent,
|
||||||
elevation: Elevation.none,
|
elevation: Elevation.none,
|
||||||
surfaceTintColor: Colors.transparent,
|
surfaceTintColor: Colors.transparent,
|
||||||
shadowColor: Colors.transparent,
|
shadowColor: Colors.transparent,
|
||||||
toolbarHeight: kToolbarHeight + 8,
|
toolbarHeight: kToolbarHeight + 8,
|
||||||
centerTitle: true,
|
centerTitle: true,
|
||||||
titleSpacing: 0.0,
|
titleSpacing: 0.0,
|
||||||
|
leadingWidth: 44 + Spacing.inputPadding + Spacing.xs,
|
||||||
leading: _isSelectionMode
|
leading: _isSelectionMode
|
||||||
? IconButton(
|
? Padding(
|
||||||
icon: Icon(
|
padding: const EdgeInsets.only(
|
||||||
Platform.isIOS ? CupertinoIcons.xmark : Icons.close,
|
left: Spacing.inputPadding,
|
||||||
color: context.conduitTheme.textPrimary,
|
),
|
||||||
size: IconSize.appBar,
|
child: Center(
|
||||||
|
child: GestureDetector(
|
||||||
|
onTap: _clearSelection,
|
||||||
|
child: _buildAppBarPill(
|
||||||
|
context: context,
|
||||||
|
isCircular: true,
|
||||||
|
child: Icon(
|
||||||
|
Platform.isIOS
|
||||||
|
? CupertinoIcons.xmark
|
||||||
|
: Icons.close,
|
||||||
|
color: context.conduitTheme.textPrimary,
|
||||||
|
size: IconSize.appBar,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
onPressed: _clearSelection,
|
|
||||||
)
|
)
|
||||||
: Builder(
|
: Builder(
|
||||||
builder: (ctx) => Padding(
|
builder: (ctx) => Padding(
|
||||||
padding: const EdgeInsets.only(
|
padding: const EdgeInsets.only(
|
||||||
left: Spacing.inputPadding,
|
left: Spacing.inputPadding,
|
||||||
),
|
),
|
||||||
child: IconButton(
|
child: Center(
|
||||||
onPressed: () {
|
child: GestureDetector(
|
||||||
final layout = ResponsiveDrawerLayout.of(ctx);
|
onTap: () {
|
||||||
if (layout == null) return;
|
final layout = ResponsiveDrawerLayout.of(ctx);
|
||||||
|
if (layout == null) return;
|
||||||
|
|
||||||
final isDrawerOpen = layout.isOpen;
|
final isDrawerOpen = layout.isOpen;
|
||||||
if (!isDrawerOpen) {
|
if (!isDrawerOpen) {
|
||||||
try {
|
try {
|
||||||
ref
|
ref
|
||||||
.read(
|
.read(
|
||||||
composerAutofocusEnabledProvider
|
composerAutofocusEnabledProvider
|
||||||
.notifier,
|
.notifier,
|
||||||
)
|
)
|
||||||
.set(false);
|
.set(false);
|
||||||
FocusManager.instance.primaryFocus
|
FocusManager.instance.primaryFocus
|
||||||
?.unfocus();
|
?.unfocus();
|
||||||
SystemChannels.textInput.invokeMethod(
|
SystemChannels.textInput.invokeMethod(
|
||||||
'TextInput.hide',
|
'TextInput.hide',
|
||||||
);
|
);
|
||||||
} catch (_) {}
|
} catch (_) {}
|
||||||
}
|
}
|
||||||
layout.toggle();
|
layout.toggle();
|
||||||
},
|
},
|
||||||
icon: Icon(
|
child: _buildAppBarPill(
|
||||||
Platform.isIOS
|
context: ctx,
|
||||||
? CupertinoIcons.line_horizontal_3
|
isCircular: true,
|
||||||
: Icons.menu,
|
child: Icon(
|
||||||
color: context.conduitTheme.textPrimary,
|
Platform.isIOS
|
||||||
size: IconSize.appBar,
|
? CupertinoIcons.line_horizontal_3
|
||||||
|
: Icons.menu,
|
||||||
|
color: context.conduitTheme.textPrimary,
|
||||||
|
size: IconSize.appBar,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
title: _isSelectionMode
|
title: _isSelectionMode
|
||||||
? Text(
|
? _buildAppBarPill(
|
||||||
'${_selectedMessageIds.length} selected',
|
context: context,
|
||||||
style: AppTypography.headlineSmallStyle.copyWith(
|
child: Padding(
|
||||||
color: context.conduitTheme.textPrimary,
|
padding: const EdgeInsets.symmetric(
|
||||||
fontWeight: FontWeight.w500,
|
horizontal: Spacing.md,
|
||||||
|
vertical: Spacing.sm,
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
'${_selectedMessageIds.length} selected',
|
||||||
|
style: AppTypography.headlineSmallStyle.copyWith(
|
||||||
|
color: context.conduitTheme.textPrimary,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
: LayoutBuilder(
|
: LayoutBuilder(
|
||||||
builder: (context, constraints) {
|
builder: (context, constraints) {
|
||||||
return GestureDetector(
|
// Build title pill (tappable for context menu)
|
||||||
|
Widget? titlePill;
|
||||||
|
if (displayConversationTitle != null) {
|
||||||
|
titlePill = GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
final conversation = ref.read(
|
||||||
|
activeConversationProvider,
|
||||||
|
);
|
||||||
|
if (conversation == null) return;
|
||||||
|
showConversationContextMenu(
|
||||||
|
context: context,
|
||||||
|
ref: ref,
|
||||||
|
conversation: conversation,
|
||||||
|
);
|
||||||
|
},
|
||||||
|
child: _buildAppBarPill(
|
||||||
|
context: context,
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.symmetric(
|
||||||
|
horizontal: Spacing.md,
|
||||||
|
vertical: Spacing.xs,
|
||||||
|
),
|
||||||
|
child: ConstrainedBox(
|
||||||
|
constraints: BoxConstraints(
|
||||||
|
maxWidth:
|
||||||
|
constraints.maxWidth - Spacing.xxxl,
|
||||||
|
),
|
||||||
|
child: StreamingTitleText(
|
||||||
|
title: displayConversationTitle,
|
||||||
|
style: AppTypography.headlineSmallStyle
|
||||||
|
.copyWith(
|
||||||
|
color: context
|
||||||
|
.conduitTheme
|
||||||
|
.textPrimary,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
fontSize: 16,
|
||||||
|
height: 1.3,
|
||||||
|
),
|
||||||
|
cursorColor: context
|
||||||
|
.conduitTheme
|
||||||
|
.textPrimary
|
||||||
|
.withValues(alpha: 0.8),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build model selector pill
|
||||||
|
final modelPill = GestureDetector(
|
||||||
onTap: () async {
|
onTap: () async {
|
||||||
final modelsAsync = ref.read(modelsProvider);
|
final modelsAsync = ref.read(modelsProvider);
|
||||||
|
|
||||||
// Handle all async states properly
|
|
||||||
if (modelsAsync.isLoading) {
|
if (modelsAsync.isLoading) {
|
||||||
// If still loading, wait for it to complete
|
|
||||||
try {
|
try {
|
||||||
final models = await ref.read(
|
final models = await ref.read(
|
||||||
modelsProvider.future,
|
modelsProvider.future,
|
||||||
);
|
);
|
||||||
// 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);
|
||||||
@@ -1673,23 +1816,17 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
} else if (modelsAsync.hasValue) {
|
} else if (modelsAsync.hasValue) {
|
||||||
// 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
|
|
||||||
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
|
|
||||||
if (!mounted) return;
|
if (!mounted) return;
|
||||||
// ignore: use_build_context_synchronously
|
// ignore: use_build_context_synchronously
|
||||||
_showModelDropdown(context, ref, models);
|
_showModelDropdown(context, ref, models);
|
||||||
@@ -1702,238 +1839,88 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLongPress: () {
|
child: _buildAppBarPill(
|
||||||
final conversation = ref.read(
|
context: context,
|
||||||
activeConversationProvider,
|
child: Padding(
|
||||||
);
|
padding: const EdgeInsets.symmetric(
|
||||||
if (conversation == null) return;
|
horizontal: Spacing.sm,
|
||||||
showConversationContextMenu(
|
vertical: Spacing.xs,
|
||||||
context: context,
|
),
|
||||||
ref: ref,
|
child: Row(
|
||||||
conversation: conversation,
|
mainAxisSize: MainAxisSize.min,
|
||||||
);
|
children: [
|
||||||
},
|
ConstrainedBox(
|
||||||
child: ConstrainedBox(
|
constraints: BoxConstraints(
|
||||||
constraints: BoxConstraints(
|
maxWidth:
|
||||||
maxWidth: constraints.maxWidth,
|
constraints.maxWidth -
|
||||||
),
|
Spacing.xxl,
|
||||||
child: Column(
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
|
||||||
children: [
|
|
||||||
AnimatedSwitcher(
|
|
||||||
duration: const Duration(
|
|
||||||
milliseconds: 250,
|
|
||||||
),
|
|
||||||
switchInCurve: Curves.easeOutCubic,
|
|
||||||
switchOutCurve: Curves.easeInCubic,
|
|
||||||
child: displayConversationTitle != null
|
|
||||||
? Column(
|
|
||||||
key: ValueKey<String>(
|
|
||||||
displayConversationTitle,
|
|
||||||
),
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
children: [
|
|
||||||
ConstrainedBox(
|
|
||||||
constraints: BoxConstraints(
|
|
||||||
maxWidth:
|
|
||||||
constraints.maxWidth,
|
|
||||||
),
|
|
||||||
child: StreamingTitleText(
|
|
||||||
title:
|
|
||||||
displayConversationTitle,
|
|
||||||
style: AppTypography
|
|
||||||
.headlineSmallStyle
|
|
||||||
.copyWith(
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.textPrimary,
|
|
||||||
fontWeight:
|
|
||||||
FontWeight.w600,
|
|
||||||
fontSize: 18,
|
|
||||||
height: 1.3,
|
|
||||||
),
|
|
||||||
cursorColor: context
|
|
||||||
.conduitTheme
|
|
||||||
.textPrimary
|
|
||||||
.withValues(alpha: 0.8),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(
|
|
||||||
height: Spacing.xs,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
)
|
|
||||||
: const SizedBox.shrink(
|
|
||||||
key: ValueKey<String>(
|
|
||||||
'empty-title',
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Transform.translate(
|
|
||||||
offset: const Offset(0, 0),
|
|
||||||
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(
|
|
||||||
mainAxisAlignment:
|
|
||||||
MainAxisAlignment.center,
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
children: [
|
|
||||||
Opacity(
|
|
||||||
opacity: 0.0,
|
|
||||||
child: Container(
|
|
||||||
padding:
|
|
||||||
const EdgeInsets.symmetric(
|
|
||||||
horizontal: iconPaddingX,
|
|
||||||
vertical: iconPaddingY,
|
|
||||||
),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.surfaceBackground
|
|
||||||
.withValues(alpha: 0.3),
|
|
||||||
borderRadius:
|
|
||||||
BorderRadius.circular(
|
|
||||||
AppBorderRadius.badge,
|
|
||||||
),
|
|
||||||
border: Border.all(
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.dividerColor,
|
|
||||||
width: BorderWidth.thin,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Icon(
|
|
||||||
Platform.isIOS
|
|
||||||
? CupertinoIcons
|
|
||||||
.chevron_down
|
|
||||||
: Icons
|
|
||||||
.keyboard_arrow_down,
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.iconSecondary,
|
|
||||||
size: iconWidth,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(width: Spacing.xs),
|
|
||||||
ConstrainedBox(
|
|
||||||
constraints: BoxConstraints(
|
|
||||||
maxWidth: maxLabelWidth,
|
|
||||||
),
|
|
||||||
child: MiddleEllipsisText(
|
|
||||||
modelLabel,
|
|
||||||
style: modelTextStyle,
|
|
||||||
textAlign: TextAlign.center,
|
|
||||||
semanticsLabel: modelLabel,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(width: Spacing.xs),
|
|
||||||
Container(
|
|
||||||
padding:
|
|
||||||
const EdgeInsets.symmetric(
|
|
||||||
horizontal: iconPaddingX,
|
|
||||||
vertical: iconPaddingY,
|
|
||||||
),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.surfaceBackground
|
|
||||||
.withValues(alpha: 0.3),
|
|
||||||
borderRadius:
|
|
||||||
BorderRadius.circular(
|
|
||||||
AppBorderRadius.badge,
|
|
||||||
),
|
|
||||||
border: Border.all(
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.dividerColor,
|
|
||||||
width: BorderWidth.thin,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Icon(
|
|
||||||
Platform.isIOS
|
|
||||||
? CupertinoIcons
|
|
||||||
.chevron_down
|
|
||||||
: Icons.keyboard_arrow_down,
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.iconSecondary,
|
|
||||||
size: iconWidth,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
);
|
|
||||||
final constrainedRow = ConstrainedBox(
|
|
||||||
constraints: BoxConstraints(
|
|
||||||
maxWidth: constraints.maxWidth,
|
|
||||||
),
|
|
||||||
child: row,
|
|
||||||
);
|
|
||||||
return hasConversationTitle
|
|
||||||
? SizedBox(
|
|
||||||
height: 24,
|
|
||||||
child: constrainedRow,
|
|
||||||
)
|
|
||||||
: constrainedRow;
|
|
||||||
}(),
|
|
||||||
),
|
|
||||||
if (isReviewerMode)
|
|
||||||
Padding(
|
|
||||||
padding: const EdgeInsets.only(
|
|
||||||
top: 2.0,
|
|
||||||
),
|
),
|
||||||
child: Container(
|
child: MiddleEllipsisText(
|
||||||
padding: const EdgeInsets.symmetric(
|
modelLabel,
|
||||||
horizontal: Spacing.sm,
|
style: modelTextStyle,
|
||||||
vertical: 1.0,
|
textAlign: TextAlign.center,
|
||||||
),
|
semanticsLabel: modelLabel,
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: context.conduitTheme.success
|
|
||||||
.withValues(alpha: 0.1),
|
|
||||||
borderRadius: BorderRadius.circular(
|
|
||||||
AppBorderRadius.badge,
|
|
||||||
),
|
|
||||||
border: Border.all(
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.success
|
|
||||||
.withValues(alpha: 0.3),
|
|
||||||
width: BorderWidth.thin,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
'REVIEWER MODE',
|
|
||||||
style: AppTypography.captionStyle
|
|
||||||
.copyWith(
|
|
||||||
color: context
|
|
||||||
.conduitTheme
|
|
||||||
.success,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
fontSize: 9,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
const SizedBox(width: Spacing.xs),
|
||||||
|
Icon(
|
||||||
|
Platform.isIOS
|
||||||
|
? CupertinoIcons.chevron_down
|
||||||
|
: Icons.keyboard_arrow_down,
|
||||||
|
color:
|
||||||
|
context.conduitTheme.iconSecondary,
|
||||||
|
size: IconSize.small,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
return Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
if (titlePill != null) ...[
|
||||||
|
titlePill,
|
||||||
|
const SizedBox(height: Spacing.xs),
|
||||||
|
],
|
||||||
|
modelPill,
|
||||||
|
if (isReviewerMode)
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(
|
||||||
|
top: Spacing.xs,
|
||||||
|
),
|
||||||
|
child: Container(
|
||||||
|
padding: const EdgeInsets.symmetric(
|
||||||
|
horizontal: Spacing.sm,
|
||||||
|
vertical: 1.0,
|
||||||
|
),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: context.conduitTheme.success
|
||||||
|
.withValues(alpha: 0.1),
|
||||||
|
borderRadius: BorderRadius.circular(
|
||||||
|
AppBorderRadius.badge,
|
||||||
|
),
|
||||||
|
border: Border.all(
|
||||||
|
color: context.conduitTheme.success
|
||||||
|
.withValues(alpha: 0.3),
|
||||||
|
width: BorderWidth.thin,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
'REVIEWER MODE',
|
||||||
|
style: AppTypography.captionStyle
|
||||||
|
.copyWith(
|
||||||
|
color:
|
||||||
|
context.conduitTheme.success,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
fontSize: 9,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
actions: [
|
actions: [
|
||||||
@@ -1942,26 +1929,43 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
padding: const EdgeInsets.only(
|
padding: const EdgeInsets.only(
|
||||||
right: Spacing.inputPadding,
|
right: Spacing.inputPadding,
|
||||||
),
|
),
|
||||||
child: IconButton(
|
child: Tooltip(
|
||||||
icon: Icon(
|
message: AppLocalizations.of(context)!.newChat,
|
||||||
Platform.isIOS
|
child: GestureDetector(
|
||||||
? CupertinoIcons.create
|
onTap: _handleNewChat,
|
||||||
: Icons.add_comment,
|
child: _buildAppBarPill(
|
||||||
color: context.conduitTheme.textPrimary,
|
context: context,
|
||||||
size: IconSize.appBar,
|
isCircular: true,
|
||||||
|
child: Icon(
|
||||||
|
Platform.isIOS
|
||||||
|
? CupertinoIcons.create
|
||||||
|
: Icons.add_comment,
|
||||||
|
color: context.conduitTheme.textPrimary,
|
||||||
|
size: IconSize.appBar,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
onPressed: _handleNewChat,
|
|
||||||
tooltip: AppLocalizations.of(context)!.newChat,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
] else ...[
|
] else ...[
|
||||||
IconButton(
|
Padding(
|
||||||
icon: Icon(
|
padding: const EdgeInsets.only(
|
||||||
Platform.isIOS ? CupertinoIcons.delete : Icons.delete,
|
right: Spacing.inputPadding,
|
||||||
color: context.conduitTheme.error,
|
),
|
||||||
size: IconSize.appBar,
|
child: GestureDetector(
|
||||||
|
onTap: _deleteSelectedMessages,
|
||||||
|
child: _buildAppBarPill(
|
||||||
|
context: context,
|
||||||
|
isCircular: true,
|
||||||
|
child: Icon(
|
||||||
|
Platform.isIOS
|
||||||
|
? CupertinoIcons.delete
|
||||||
|
: Icons.delete,
|
||||||
|
color: context.conduitTheme.error,
|
||||||
|
size: IconSize.appBar,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
onPressed: _deleteSelectedMessages,
|
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
@@ -2092,6 +2096,37 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
||||||
|
// Floating app bar gradient overlay
|
||||||
|
Positioned(
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
child: IgnorePointer(
|
||||||
|
child: Container(
|
||||||
|
height:
|
||||||
|
MediaQuery.of(context).padding.top +
|
||||||
|
kToolbarHeight +
|
||||||
|
Spacing.xl,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
gradient: LinearGradient(
|
||||||
|
begin: Alignment.topCenter,
|
||||||
|
end: Alignment.bottomCenter,
|
||||||
|
stops: const [0.0, 0.6, 1.0],
|
||||||
|
colors: [
|
||||||
|
theme.scaffoldBackgroundColor,
|
||||||
|
theme.scaffoldBackgroundColor.withValues(
|
||||||
|
alpha: 0.85,
|
||||||
|
),
|
||||||
|
theme.scaffoldBackgroundColor.withValues(
|
||||||
|
alpha: 0.0,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
|
||||||
// Floating Scroll to Bottom Button with smooth appear/disappear
|
// Floating Scroll to Bottom Button with smooth appear/disappear
|
||||||
Positioned(
|
Positioned(
|
||||||
bottom:
|
bottom:
|
||||||
|
|||||||
Reference in New Issue
Block a user