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

feat(chat): Refactor chat input styling and remove compact mode

Browse Source
This commit is contained in:
cogwheel0
2025-12-11 11:35:56 +05:30
parent 3ac2cd81ad
commit 8d8ad8478b
2 changed files with 286 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
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';
@@ -968,6 +969,8 @@ 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.
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 +979,11 @@ class _ChatPageState extends ConsumerState<ChatPage> {
cacheExtent: 300, cacheExtent: 300,
slivers: [ slivers: [
SliverPadding( SliverPadding(
padding: const EdgeInsets.fromLTRB( padding: EdgeInsets.fromLTRB(
Spacing.lg, Spacing.lg,
Spacing.md, Spacing.md,
Spacing.lg, Spacing.lg,
Spacing.lg, bottomPadding,
), ),
sliver: SliverList( sliver: SliverList(
delegate: SliverChildBuilderDelegate((context, index) { delegate: SliverChildBuilderDelegate((context, index) {
@@ -1097,6 +1100,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
}); });
} }
// Add bottom padding to account for floating input overlay.
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 +1110,11 @@ class _ChatPageState extends ConsumerState<ChatPage> {
cacheExtent: 600, cacheExtent: 600,
slivers: [ slivers: [
SliverPadding( SliverPadding(
padding: const EdgeInsets.fromLTRB( padding: EdgeInsets.fromLTRB(
Spacing.lg, Spacing.lg,
Spacing.md, Spacing.md,
Spacing.lg, Spacing.lg,
Spacing.lg, bottomPadding,
), ),
sliver: OptimizedSliverList<ChatMessage>( sliver: OptimizedSliverList<ChatMessage>(
items: messages, items: messages,
@@ -1349,6 +1354,8 @@ 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.
final bottomPadding = _inputHeight;
return LayoutBuilder( return LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
final greetingDisplay = greetingText ?? ''; final greetingDisplay = greetingText ?? '';
@@ -1360,7 +1367,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,
0,
Spacing.lg,
bottomPadding,
),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
@@ -1964,94 +1976,120 @@ 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 child: ConduitRefreshIndicator(
Expanded( onRefresh: () async {
child: ConduitRefreshIndicator( // Reload active conversation messages from server
onRefresh: () async { final api = ref.read(apiServiceProvider);
// Reload active conversation messages from server final active = ref.read(activeConversationProvider);
final api = ref.read(apiServiceProvider); if (api != null && active != null) {
final active = ref.read( try {
activeConversationProvider, final full = await api.getConversation(
active.id,
); );
if (api != null && active != null) { ref
try { .read(activeConversationProvider.notifier)
final full = await api.getConversation( .set(full);
active.id, } catch (e) {
); DebugLogger.log(
ref 'Failed to refresh conversation: $e',
.read( scope: 'chat/page',
activeConversationProvider.notifier,
)
.set(full);
} catch (e) {
DebugLogger.log(
'Failed to refresh conversation: $e',
scope: 'chat/page',
);
}
}
// Also refresh the conversations list to reconcile missed events
// and keep timestamps/order in sync with the server.
try {
refreshConversationsCache(ref);
// Best-effort await to stabilize UI; ignore errors.
await ref.read(conversationsProvider.future);
} catch (_) {}
// Add small delay for better UX feedback
await Future.delayed(
const Duration(milliseconds: 300),
); );
}, }
child: GestureDetector( }
behavior: HitTestBehavior.opaque,
onTap: () { // Also refresh the conversations list to reconcile missed events
FocusManager.instance.primaryFocus?.unfocus(); // and keep timestamps/order in sync with the server.
try { try {
SystemChannels.textInput.invokeMethod( refreshConversationsCache(ref);
'TextInput.hide', // Best-effort await to stabilize UI; ignore errors.
); await ref.read(conversationsProvider.future);
} catch (_) {} } catch (_) {}
},
child: RepaintBoundary( // Add small delay for better UX feedback
child: _buildMessagesList(theme), await Future.delayed(
const Duration(milliseconds: 300),
);
},
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
FocusManager.instance.primaryFocus?.unfocus();
try {
SystemChannels.textInput.invokeMethod(
'TextInput.hide',
);
} catch (_) {}
},
child: RepaintBoundary(
child: _buildMessagesList(theme),
),
),
),
),
// Floating input area with attachments and blur background
Positioned(
left: 0,
right: 0,
bottom: 0,
child: RepaintBoundary(
child: MeasureSize(
onChange: (size) {
if (mounted) {
setState(() {
_inputHeight = size.height;
});
}
},
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: [
// File attachments // Top padding for gradient fade area
const FileAttachmentWidget(), const SizedBox(height: Spacing.xl),
const ContextAttachmentWidget(), // File attachments
const FileAttachmentWidget(),
// Modern Input (root matches input background including safe area) const ContextAttachmentWidget(),
RepaintBoundary( // Modern Input
child: MeasureSize( ModernChatInput(
onChange: (size) { onSendMessage: (text) =>
if (mounted) { _handleMessageSend(text, selectedModel),
setState(() { onVoiceInput: null,
_inputHeight = size.height; onVoiceCall: _handleVoiceCall,
}); onFileAttachment: _handleFileAttachment,
} onImageAttachment: _handleImageAttachment,
}, onCameraCapture: () =>
child: ModernChatInput( _handleImageAttachment(
onSendMessage: (text) => fromCamera: true,
_handleMessageSend(text, selectedModel), ),
onVoiceInput: null, onWebAttachment: _promptAttachWebpage,
onVoiceCall: _handleVoiceCall, onPastedAttachments:
onFileAttachment: _handleFileAttachment, _handlePastedAttachments,
onImageAttachment: _handleImageAttachment, ),
onCameraCapture: () => ],
_handleImageAttachment(fromCamera: true),
onWebAttachment: _promptAttachWebpage,
onPastedAttachments: _handlePastedAttachments,
), ),
), ),
), ),
], ),
), ),
// Floating Scroll to Bottom Button with smooth appear/disappear // Floating Scroll to Bottom Button with smooth appear/disappear
@@ -2093,39 +2131,61 @@ class _ChatPageState extends ConsumerState<ChatPage> {
borderRadius: BorderRadius.circular( borderRadius: BorderRadius.circular(
AppBorderRadius.floatingButton, AppBorderRadius.floatingButton,
), ),
child: Container( child: BackdropFilter(
decoration: BoxDecoration( filter: ImageFilter.blur(
color: context sigmaX: 16,
.conduitTheme sigmaY: 16,
.surfaceContainerHighest
.withValues(alpha: 0.75),
border: Border.all(
color: context.conduitTheme.cardBorder
.withValues(alpha: 0.3),
width: BorderWidth.regular,
),
borderRadius: BorderRadius.circular(
AppBorderRadius.floatingButton,
),
boxShadow: ConduitShadows.button(
context,
),
), ),
child: SizedBox( child: Container(
width: TouchTarget.button, decoration: BoxDecoration(
height: TouchTarget.button, // Use same high-contrast colors as floating input
child: IconButton( color:
onPressed: _scrollToBottom, theme.brightness ==
splashRadius: 24, Brightness.dark
icon: Icon( ? Color.lerp(
Platform.isIOS context
? CupertinoIcons.arrow_down .conduitTheme
: Icons.keyboard_arrow_down, .cardBackground,
size: IconSize.lg, 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
.iconPrimary .cardBorder
.withValues(alpha: 0.9), .withValues(alpha: 0.55),
width: BorderWidth.thin,
),
borderRadius: BorderRadius.circular(
AppBorderRadius.floatingButton,
),
boxShadow: ConduitShadows.button(
context,
),
),
child: SizedBox(
width: TouchTarget.button,
height: TouchTarget.button,
child: IconButton(
onPressed: _scrollToBottom,
splashRadius: 24,
icon: Icon(
Platform.isIOS
? CupertinoIcons.arrow_down
: Icons.keyboard_arrow_down,
size: IconSize.lg,
color: context
.conduitTheme
.iconPrimary
.withValues(alpha: 0.9),
),
), ),
), ),
), ),

240
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,21 +1208,17 @@ 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(
boxShadow: showCompactComposer color: shellShadowColor,
? const <BoxShadow>[] blurRadius: 12 + (isActive ? 4 : 0),
: <BoxShadow>[ spreadRadius: -2,
BoxShadow( offset: const Offset(0, -2),
color: shellShadowColor, ),
blurRadius: 12 + (isActive ? 4 : 0), ],
spreadRadius: -2,
offset: const Offset(0, -2),
),
],
); );
final List<Widget> composerChildren = <Widget>[ final List<Widget> composerChildren = <Widget>[
@@ -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(
@@ -1405,29 +1325,91 @@ 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: ConstrainedBox(
child: SafeArea( constraints: BoxConstraints(
top: false, maxHeight: MediaQuery.of(context).size.height * 0.4,
bottom: true, ),
child: ConstrainedBox( child: AnimatedSize(
constraints: BoxConstraints( duration: const Duration(milliseconds: 160),
maxHeight: MediaQuery.of(context).size.height * 0.4, curve: Curves.easeOutCubic,
), alignment: Alignment.topCenter,
child: AnimatedSize( child: SingleChildScrollView(
duration: const Duration(milliseconds: 160), physics: const ClampingScrollPhysics(),
curve: Curves.easeOutCubic, child: RepaintBoundary(
alignment: Alignment.topCenter, child: Column(
child: SingleChildScrollView( mainAxisSize: MainAxisSize.min,
physics: const ClampingScrollPhysics(), children: composerChildren,
child: RepaintBoundary(
child: Column(
mainAxisSize: MainAxisSize.min,
children: composerChildren,
),
), ),
), ),
), ),
@@ -1435,20 +1417,16 @@ 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.sm,
child: shell, 0,
), Spacing.sm,
); bottomPadding + Spacing.md,
} ),
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