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

Merge pull request #265 from cogwheel0/refactor-chat-input-styling

Browse Source 
refactor-chat-input-styling
This commit is contained in:
cogwheel
2025-12-11 20:13:33 +08:00
committed by GitHub
parent 3ac2cd81ad 289fbcb49e
commit 43ba1bcdc2
3 changed files with 627 additions and 546 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,7 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_animate/flutter_animate.dart'; import 'package:flutter_animate/flutter_animate.dart';
import 'dart:io' show Platform; import 'dart:io' show Platform;
import 'dart:ui' show ImageFilter;
import '../../../shared/widgets/responsive_drawer_layout.dart'; import '../../../shared/widgets/responsive_drawer_layout.dart';
import '../../navigation/widgets/chats_drawer.dart'; import '../../navigation/widgets/chats_drawer.dart';
import 'dart:async'; import 'dart:async';
@@ -937,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(
@@ -968,6 +1030,10 @@ 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 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;
return CustomScrollView( return CustomScrollView(
key: const ValueKey('loading_messages'), key: const ValueKey('loading_messages'),
controller: null, controller: null,
@@ -976,11 +1042,11 @@ class _ChatPageState extends ConsumerState<ChatPage> {
cacheExtent: 300, cacheExtent: 300,
slivers: [ slivers: [
SliverPadding( SliverPadding(
padding: const EdgeInsets.fromLTRB( padding: EdgeInsets.fromLTRB(
Spacing.lg,
Spacing.md,
Spacing.lg, Spacing.lg,
topPadding,
Spacing.lg, Spacing.lg,
bottomPadding,
), ),
sliver: SliverList( sliver: SliverList(
delegate: SliverChildBuilderDelegate((context, index) { delegate: SliverChildBuilderDelegate((context, index) {
@@ -1097,6 +1163,10 @@ class _ChatPageState extends ConsumerState<ChatPage> {
}); });
} }
// 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;
return CustomScrollView( return CustomScrollView(
key: const ValueKey('actual_messages'), key: const ValueKey('actual_messages'),
controller: _scrollController, controller: _scrollController,
@@ -1105,11 +1175,11 @@ class _ChatPageState extends ConsumerState<ChatPage> {
cacheExtent: 600, cacheExtent: 600,
slivers: [ slivers: [
SliverPadding( SliverPadding(
padding: const EdgeInsets.fromLTRB( padding: EdgeInsets.fromLTRB(
Spacing.lg,
Spacing.md,
Spacing.lg, Spacing.lg,
topPadding,
Spacing.lg, Spacing.lg,
bottomPadding,
), ),
sliver: OptimizedSliverList<ChatMessage>( sliver: OptimizedSliverList<ChatMessage>(
items: messages, items: messages,
@@ -1349,6 +1419,10 @@ class _ChatPageState extends ConsumerState<ChatPage> {
final greetingText = resolvedGreetingName != null final greetingText = resolvedGreetingName != null
? l10n.onboardStartTitle(resolvedGreetingName) ? l10n.onboardStartTitle(resolvedGreetingName)
: null; : null;
// 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;
return LayoutBuilder( return LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
final greetingDisplay = greetingText ?? ''; final greetingDisplay = greetingText ?? '';
@@ -1360,7 +1434,12 @@ class _ChatPageState extends ConsumerState<ChatPage> {
width: double.infinity, width: double.infinity,
height: constraints.maxHeight, height: constraints.maxHeight,
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(horizontal: Spacing.lg), padding: EdgeInsets.fromLTRB(
Spacing.lg,
topPadding,
Spacing.lg,
bottomPadding,
),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
@@ -1572,30 +1651,46 @@ 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,
),
child: Center(
child: GestureDetector(
onTap: _clearSelection,
child: _buildAppBarPill(
context: context,
isCircular: true,
child: Icon(
Platform.isIOS
? CupertinoIcons.xmark
: Icons.close,
color: context.conduitTheme.textPrimary, color: context.conduitTheme.textPrimary,
size: IconSize.appBar, 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(
onTap: () {
final layout = ResponsiveDrawerLayout.of(ctx); final layout = ResponsiveDrawerLayout.of(ctx);
if (layout == null) return; if (layout == null) return;
@@ -1617,7 +1712,10 @@ class _ChatPageState extends ConsumerState<ChatPage> {
} }
layout.toggle(); layout.toggle();
}, },
icon: Icon( child: _buildAppBarPill(
context: ctx,
isCircular: true,
child: Icon(
Platform.isIOS Platform.isIOS
? CupertinoIcons.line_horizontal_3 ? CupertinoIcons.line_horizontal_3
: Icons.menu, : Icons.menu,
@@ -1627,29 +1725,86 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
), ),
), ),
),
),
title: _isSelectionMode title: _isSelectionMode
? Text( ? _buildAppBarPill(
context: context,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.sm,
),
child: Text(
'${_selectedMessageIds.length} selected', '${_selectedMessageIds.length} selected',
style: AppTypography.headlineSmallStyle.copyWith( style: AppTypography.headlineSmallStyle.copyWith(
color: context.conduitTheme.textPrimary, color: context.conduitTheme.textPrimary,
fontWeight: FontWeight.w500, 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);
@@ -1661,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);
@@ -1690,139 +1839,21 @@ class _ChatPageState extends ConsumerState<ChatPage> {
} }
} }
}, },
onLongPress: () { child: _buildAppBarPill(
final conversation = ref.read(
activeConversationProvider,
);
if (conversation == null) return;
showConversationContextMenu(
context: context, context: context,
ref: ref, child: Padding(
conversation: conversation, padding: const EdgeInsets.symmetric(
); horizontal: Spacing.sm,
}, vertical: Spacing.xs,
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth,
),
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,
), ),
child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
ConstrainedBox( ConstrainedBox(
constraints: BoxConstraints( constraints: BoxConstraints(
maxWidth: maxWidth:
constraints.maxWidth, constraints.maxWidth -
), Spacing.xxl,
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( child: MiddleEllipsisText(
modelLabel, modelLabel,
@@ -1832,59 +1863,32 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
), ),
const SizedBox(width: Spacing.xs), const SizedBox(width: Spacing.xs),
Container( Icon(
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 Platform.isIOS
? CupertinoIcons ? CupertinoIcons.chevron_down
.chevron_down
: Icons.keyboard_arrow_down, : Icons.keyboard_arrow_down,
color: context color:
.conduitTheme context.conduitTheme.iconSecondary,
.iconSecondary, size: IconSize.small,
size: iconWidth,
),
), ),
], ],
);
final constrainedRow = ConstrainedBox(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth,
), ),
child: row,
);
return hasConversationTitle
? SizedBox(
height: 24,
child: constrainedRow,
)
: constrainedRow;
}(),
), ),
),
);
return Column(
mainAxisSize: MainAxisSize.min,
children: [
if (titlePill != null) ...[
titlePill,
const SizedBox(height: Spacing.xs),
],
modelPill,
if (isReviewerMode) if (isReviewerMode)
Padding( Padding(
padding: const EdgeInsets.only( padding: const EdgeInsets.only(
top: 2.0, top: Spacing.xs,
), ),
child: Container( child: Container(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
@@ -1898,9 +1902,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
AppBorderRadius.badge, AppBorderRadius.badge,
), ),
border: Border.all( border: Border.all(
color: context color: context.conduitTheme.success
.conduitTheme
.success
.withValues(alpha: 0.3), .withValues(alpha: 0.3),
width: BorderWidth.thin, width: BorderWidth.thin,
), ),
@@ -1909,9 +1911,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
'REVIEWER MODE', 'REVIEWER MODE',
style: AppTypography.captionStyle style: AppTypography.captionStyle
.copyWith( .copyWith(
color: context color:
.conduitTheme context.conduitTheme.success,
.success,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
fontSize: 9, fontSize: 9,
), ),
@@ -1919,8 +1920,6 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
), ),
], ],
),
),
); );
}, },
), ),
@@ -1930,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,
child: GestureDetector(
onTap: _handleNewChat,
child: _buildAppBarPill(
context: context,
isCircular: true,
child: Icon(
Platform.isIOS Platform.isIOS
? CupertinoIcons.create ? CupertinoIcons.create
: Icons.add_comment, : Icons.add_comment,
color: context.conduitTheme.textPrimary, color: context.conduitTheme.textPrimary,
size: IconSize.appBar, 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,
),
child: GestureDetector(
onTap: _deleteSelectedMessages,
child: _buildAppBarPill(
context: context,
isCircular: true,
child: Icon(
Platform.isIOS
? CupertinoIcons.delete
: Icons.delete,
color: context.conduitTheme.error, color: context.conduitTheme.error,
size: IconSize.appBar, size: IconSize.appBar,
), ),
onPressed: _deleteSelectedMessages, ),
),
), ),
], ],
], ],
@@ -1964,26 +1980,20 @@ class _ChatPageState extends ConsumerState<ChatPage> {
}, },
child: Stack( child: Stack(
children: [ children: [
Column( // Messages Area fills entire space with pull-to-refresh
children: [ Positioned.fill(
// Messages Area with pull-to-refresh
Expanded(
child: ConduitRefreshIndicator( child: ConduitRefreshIndicator(
onRefresh: () async { onRefresh: () async {
// Reload active conversation messages from server // Reload active conversation messages from server
final api = ref.read(apiServiceProvider); final api = ref.read(apiServiceProvider);
final active = ref.read( final active = ref.read(activeConversationProvider);
activeConversationProvider,
);
if (api != null && active != null) { if (api != null && active != null) {
try { try {
final full = await api.getConversation( final full = await api.getConversation(
active.id, active.id,
); );
ref ref
.read( .read(activeConversationProvider.notifier)
activeConversationProvider.notifier,
)
.set(full); .set(full);
} catch (e) { } catch (e) {
DebugLogger.log( DebugLogger.log(
@@ -2023,12 +2033,12 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
), ),
// File attachments // Floating input area with attachments and blur background
const FileAttachmentWidget(), Positioned(
const ContextAttachmentWidget(), left: 0,
right: 0,
// Modern Input (root matches input background including safe area) bottom: 0,
RepaintBoundary( child: RepaintBoundary(
child: MeasureSize( child: MeasureSize(
onChange: (size) { onChange: (size) {
if (mounted) { if (mounted) {
@@ -2037,7 +2047,34 @@ class _ChatPageState extends ConsumerState<ChatPage> {
}); });
} }
}, },
child: ModernChatInput( child: Container(
decoration: BoxDecoration(
// Gradient fade from transparent to solid background
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: const [0.0, 0.4, 1.0],
colors: [
theme.scaffoldBackgroundColor.withValues(
alpha: 0.0,
),
theme.scaffoldBackgroundColor.withValues(
alpha: 0.85,
),
theme.scaffoldBackgroundColor,
],
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Top padding for gradient fade area
const SizedBox(height: Spacing.xl),
// File attachments
const FileAttachmentWidget(),
const ContextAttachmentWidget(),
// Modern Input
ModernChatInput(
onSendMessage: (text) => onSendMessage: (text) =>
_handleMessageSend(text, selectedModel), _handleMessageSend(text, selectedModel),
onVoiceInput: null, onVoiceInput: null,
@@ -2045,22 +2082,56 @@ class _ChatPageState extends ConsumerState<ChatPage> {
onFileAttachment: _handleFileAttachment, onFileAttachment: _handleFileAttachment,
onImageAttachment: _handleImageAttachment, onImageAttachment: _handleImageAttachment,
onCameraCapture: () => onCameraCapture: () =>
_handleImageAttachment(fromCamera: true), _handleImageAttachment(
fromCamera: true,
),
onWebAttachment: _promptAttachWebpage, onWebAttachment: _promptAttachWebpage,
onPastedAttachments: _handlePastedAttachments, onPastedAttachments:
), _handlePastedAttachments,
),
), ),
], ],
), ),
),
),
),
),
// 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.4, 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: (_inputHeight > 0)
((_inputHeight > 0)
? _inputHeight ? _inputHeight
: (Spacing.xxl + Spacing.xxxl)) + : (Spacing.xxl + Spacing.xxxl),
Spacing.sm,
left: 0, left: 0,
right: 0, right: 0,
child: AnimatedSwitcher( child: AnimatedSwitcher(
@@ -2093,16 +2164,37 @@ class _ChatPageState extends ConsumerState<ChatPage> {
borderRadius: BorderRadius.circular( borderRadius: BorderRadius.circular(
AppBorderRadius.floatingButton, AppBorderRadius.floatingButton,
), ),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 16,
sigmaY: 16,
),
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
// Use same high-contrast colors as floating input
color:
theme.brightness ==
Brightness.dark
? Color.lerp(
context
.conduitTheme
.cardBackground,
Colors.white,
0.08,
)!.withValues(alpha: 0.85)
: Color.lerp(
context
.conduitTheme
.inputBackground,
Colors.black,
0.06,
)!.withValues(alpha: 0.85),
border: Border.all(
color: context color: context
.conduitTheme .conduitTheme
.surfaceContainerHighest .cardBorder
.withValues(alpha: 0.75), .withValues(alpha: 0.55),
border: Border.all( width: BorderWidth.thin,
color: context.conduitTheme.cardBorder
.withValues(alpha: 0.3),
width: BorderWidth.regular,
), ),
borderRadius: BorderRadius.circular( borderRadius: BorderRadius.circular(
AppBorderRadius.floatingButton, AppBorderRadius.floatingButton,
@@ -2131,6 +2223,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
), ),
), ),
),
) )
: const SizedBox.shrink( : const SizedBox.shrink(
key: ValueKey('scroll_to_bottom_hidden'), key: ValueKey('scroll_to_bottom_hidden'),

198
lib/features/chat/widgets/modern_chat_input.dart
View File

@@ -9,7 +9,6 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'dart:io' show Platform; import 'dart:io' show Platform;
import 'dart:async'; import 'dart:async';
import 'dart:ui';
import 'dart:math' as math; import 'dart:math' as math;
import '../providers/chat_providers.dart'; import '../providers/chat_providers.dart';
import '../services/clipboard_attachment_service.dart'; import '../services/clipboard_attachment_service.dart';
@@ -1073,10 +1072,10 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
final Brightness brightness = Theme.of(context).brightness; final Brightness brightness = Theme.of(context).brightness;
final bool isActive = _focusNode.hasFocus || _hasText; final bool isActive = _focusNode.hasFocus || _hasText;
final Color composerSurface = context.conduitTheme.inputBackground; // Use high-contrast background for floating input
final Color composerBackground = brightness == Brightness.dark final Color composerBackground = brightness == Brightness.dark
? composerSurface.withValues(alpha: 0.78) ? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
: context.conduitTheme.surfaceContainerHighest; : Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
final Color placeholderBase = context.conduitTheme.inputText.withValues( final Color placeholderBase = context.conduitTheme.inputText.withValues(
alpha: 0.64, alpha: 0.64,
); );
@@ -1087,7 +1086,7 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
context.conduitTheme.inputBorder, context.conduitTheme.inputBorder,
context.conduitTheme.inputBorderFocused, context.conduitTheme.inputBorderFocused,
isActive ? 1.0 : 0.0, isActive ? 1.0 : 0.0,
)!.withValues(alpha: brightness == Brightness.dark ? 0.55 : 0.45); )!.withValues(alpha: brightness == Brightness.dark ? 0.65 : 0.55);
final Color shellShadowColor = context.conduitTheme.cardShadow.withValues( final Color shellShadowColor = context.conduitTheme.cardShadow.withValues(
alpha: brightness == Brightness.dark alpha: brightness == Brightness.dark
? 0.22 + (isActive ? 0.08 : 0.0) ? 0.22 + (isActive ? 0.08 : 0.0)
@@ -1209,14 +1208,10 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
); );
final BoxDecoration shellDecoration = BoxDecoration( final BoxDecoration shellDecoration = BoxDecoration(
color: showCompactComposer ? Colors.transparent : composerBackground, color: composerBackground,
borderRadius: shellRadius, borderRadius: shellRadius,
border: showCompactComposer border: Border.all(color: outlineColor, width: BorderWidth.thin),
? null boxShadow: <BoxShadow>[
: Border.all(color: outlineColor, width: BorderWidth.thin),
boxShadow: showCompactComposer
? const <BoxShadow>[]
: <BoxShadow>[
BoxShadow( BoxShadow(
color: shellShadowColor, color: shellShadowColor,
blurRadius: 12 + (isActive ? 4 : 0), blurRadius: 12 + (isActive ? 4 : 0),
@@ -1238,82 +1233,7 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
), ),
child: _buildPromptOverlay(context), child: _buildPromptOverlay(context),
), ),
if (showCompactComposer) if (!showCompactComposer) ...[
Padding(
key: const ValueKey('composer-compact'),
padding: const EdgeInsets.fromLTRB(
Spacing.screenPadding,
Spacing.xs,
Spacing.screenPadding,
Spacing.sm,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
_buildOverflowButton(
tooltip: AppLocalizations.of(context)!.more,
webSearchActive: webSearchEnabled,
imageGenerationActive: imageGenEnabled,
toolsActive: selectedToolIds.isNotEmpty,
filtersActive: selectedFilterIds.isNotEmpty,
),
const SizedBox(width: Spacing.sm),
Expanded(
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.25,
),
child: AnimatedContainer(
duration: const Duration(milliseconds: 180),
curve: Curves.easeOutCubic,
padding: const EdgeInsets.symmetric(horizontal: Spacing.md),
constraints: const BoxConstraints(
minHeight: TouchTarget.input,
),
decoration: BoxDecoration(
color: composerSurface.withValues(
alpha: brightness == Brightness.dark ? 0.9 : 0.2,
),
borderRadius: BorderRadius.circular(_composerRadius),
border: Border.all(
color: outlineColor.withValues(
alpha: brightness == Brightness.dark ? 0.32 : 0.2,
),
width: BorderWidth.micro,
),
),
child: Row(
children: [
Expanded(
child: _buildComposerTextField(
brightness: brightness,
sendOnEnter: sendOnEnter,
placeholderBase: placeholderBase,
placeholderFocused: placeholderFocused,
contentPadding: const EdgeInsets.symmetric(
vertical: Spacing.xs,
),
isActive: isActive,
),
),
if (!_hasText && voiceAvailable && !isGenerating)
_buildInlineMicIcon(voiceAvailable),
],
),
),
),
),
const SizedBox(width: Spacing.sm),
_buildPrimaryButton(
_hasText,
isGenerating,
stopGeneration,
voiceAvailable,
),
],
),
)
else ...[
Padding( Padding(
key: const ValueKey('composer-expanded-input'), key: const ValueKey('composer-expanded-input'),
padding: const EdgeInsets.fromLTRB( padding: const EdgeInsets.fromLTRB(
@@ -1359,7 +1279,7 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
Spacing.inputPadding, Spacing.inputPadding,
0, 0,
Spacing.inputPadding, Spacing.inputPadding,
0, Spacing.sm,
), ),
child: Row( child: Row(
children: [ children: [
@@ -1405,14 +1325,77 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
], ],
]; ];
// For compact mode, render text field shell with floating buttons on sides
if (showCompactComposer) {
// Build the text field shell
Widget textFieldShell = AnimatedContainer(
duration: const Duration(milliseconds: 180),
curve: Curves.easeOutCubic,
padding: const EdgeInsets.symmetric(horizontal: Spacing.md),
constraints: const BoxConstraints(minHeight: TouchTarget.input),
decoration: shellDecoration,
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.25,
),
child: Row(
children: [
Expanded(
child: _buildComposerTextField(
brightness: brightness,
sendOnEnter: sendOnEnter,
placeholderBase: placeholderBase,
placeholderFocused: placeholderFocused,
contentPadding: const EdgeInsets.symmetric(
vertical: Spacing.xs,
),
isActive: isActive,
),
),
if (!_hasText && voiceAvailable && !isGenerating)
_buildInlineMicIcon(voiceAvailable),
],
),
),
);
final bottomPadding = MediaQuery.of(context).viewPadding.bottom;
return Padding(
padding: EdgeInsets.fromLTRB(
Spacing.screenPadding,
0,
Spacing.screenPadding,
bottomPadding + Spacing.md,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
_buildOverflowButton(
tooltip: AppLocalizations.of(context)!.more,
webSearchActive: webSearchEnabled,
imageGenerationActive: imageGenEnabled,
toolsActive: selectedToolIds.isNotEmpty,
filtersActive: selectedFilterIds.isNotEmpty,
),
const SizedBox(width: Spacing.sm),
Expanded(child: textFieldShell),
const SizedBox(width: Spacing.sm),
_buildPrimaryButton(
_hasText,
isGenerating,
stopGeneration,
voiceAvailable,
),
],
),
);
}
// For expanded mode with quick pills, use the full shell
Widget shell = AnimatedContainer( Widget shell = AnimatedContainer(
duration: const Duration(milliseconds: 180), duration: const Duration(milliseconds: 180),
curve: Curves.easeOutCubic, curve: Curves.easeOutCubic,
decoration: shellDecoration, decoration: shellDecoration,
width: double.infinity,
child: SafeArea(
top: false,
bottom: true,
child: ConstrainedBox( child: ConstrainedBox(
constraints: BoxConstraints( constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.4, maxHeight: MediaQuery.of(context).size.height * 0.4,
@@ -1432,23 +1415,18 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
), ),
), ),
), ),
),
); );
if (brightness == Brightness.dark && !showCompactComposer) { // Wrap with padding for floating effect, accounting for safe area
shell = ClipRRect( final bottomPadding = MediaQuery.of(context).viewPadding.bottom;
borderRadius: shellRadius, return Padding(
child: BackdropFilter( padding: EdgeInsets.fromLTRB(
filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12), Spacing.screenPadding,
0,
Spacing.screenPadding,
bottomPadding + Spacing.md,
),
child: shell, child: shell,
),
);
}
return Container(
color: Colors.transparent,
padding: EdgeInsets.zero,
child: Column(mainAxisSize: MainAxisSize.min, children: [shell]),
); );
} }
@@ -1688,9 +1666,11 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
: (activeColor ?? : (activeColor ??
context.conduitTheme.textPrimary.withValues(alpha: Alpha.strong)); context.conduitTheme.textPrimary.withValues(alpha: Alpha.strong));
// Use high-contrast background for floating button
final Brightness brightness = Theme.of(context).brightness; final Brightness brightness = Theme.of(context).brightness;
final Color baseBackground = context.conduitTheme.inputBackground final Color baseBackground = brightness == Brightness.dark
.withValues(alpha: brightness == Brightness.dark ? 0.9 : 0.2); ? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
final Color backgroundColor = !enabled final Color backgroundColor = !enabled
? baseBackground.withValues(alpha: Alpha.disabled) ? baseBackground.withValues(alpha: Alpha.disabled)
: isActive : isActive

8
lib/shared/theme/app_theme.dart
View File

@@ -2,6 +2,7 @@ import 'dart:math' as math;
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'package:flutter_animate/flutter_animate.dart'; import 'package:flutter_animate/flutter_animate.dart';
import 'theme_extensions.dart'; import 'theme_extensions.dart';
import 'tweakcn_themes.dart'; import 'tweakcn_themes.dart';
@@ -115,6 +116,13 @@ class AppTheme {
elevation: Elevation.none, elevation: Elevation.none,
backgroundColor: surfaces.background, backgroundColor: surfaces.background,
foregroundColor: tokens.neutralOnSurface, foregroundColor: tokens.neutralOnSurface,
systemOverlayStyle: SystemUiOverlayStyle(
statusBarBrightness: brightness,
statusBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
systemNavigationBarIconBrightness: isDark
? Brightness.light
: Brightness.dark,
),
), ),
bottomSheetTheme: BottomSheetThemeData( bottomSheetTheme: BottomSheetThemeData(
backgroundColor: surfaces.card, backgroundColor: surfaces.card,