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

124
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_animate/flutter_animate.dart';
import 'dart:io' show Platform;
import 'dart:ui' show ImageFilter;
import '../../../shared/widgets/responsive_drawer_layout.dart';
import '../../navigation/widgets/chats_drawer.dart';
import 'dart:async';
@@ -968,6 +969,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
// Use slivers to align with the actual messages view.
// Do not attach the primary scroll controller here to avoid
// AnimatedSwitcher attaching the same controller twice.
// Add bottom padding to account for floating input overlay.
final bottomPadding = Spacing.lg + _inputHeight;
return CustomScrollView(
key: const ValueKey('loading_messages'),
controller: null,
@@ -976,11 +979,11 @@ class _ChatPageState extends ConsumerState<ChatPage> {
cacheExtent: 300,
slivers: [
SliverPadding(
padding: const EdgeInsets.fromLTRB(
padding: EdgeInsets.fromLTRB(
Spacing.lg,
Spacing.md,
Spacing.lg,
Spacing.lg,
bottomPadding,
),
sliver: SliverList(
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(
key: const ValueKey('actual_messages'),
controller: _scrollController,
@@ -1105,11 +1110,11 @@ class _ChatPageState extends ConsumerState<ChatPage> {
cacheExtent: 600,
slivers: [
SliverPadding(
padding: const EdgeInsets.fromLTRB(
padding: EdgeInsets.fromLTRB(
Spacing.lg,
Spacing.md,
Spacing.lg,
Spacing.lg,
bottomPadding,
),
sliver: OptimizedSliverList<ChatMessage>(
items: messages,
@@ -1349,6 +1354,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
final greetingText = resolvedGreetingName != null
? l10n.onboardStartTitle(resolvedGreetingName)
: null;
// Add bottom padding to account for floating input overlay.
final bottomPadding = _inputHeight;
return LayoutBuilder(
builder: (context, constraints) {
final greetingDisplay = greetingText ?? '';
@@ -1360,7 +1367,12 @@ class _ChatPageState extends ConsumerState<ChatPage> {
width: double.infinity,
height: constraints.maxHeight,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: Spacing.lg),
padding: EdgeInsets.fromLTRB(
Spacing.lg,
0,
Spacing.lg,
bottomPadding,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
@@ -1964,26 +1976,20 @@ class _ChatPageState extends ConsumerState<ChatPage> {
},
child: Stack(
children: [
Column(
children: [
// Messages Area with pull-to-refresh
Expanded(
// Messages Area fills entire space with pull-to-refresh
Positioned.fill(
child: ConduitRefreshIndicator(
onRefresh: () async {
// Reload active conversation messages from server
final api = ref.read(apiServiceProvider);
final active = ref.read(
activeConversationProvider,
);
final active = ref.read(activeConversationProvider);
if (api != null && active != null) {
try {
final full = await api.getConversation(
active.id,
);
ref
.read(
activeConversationProvider.notifier,
)
.read(activeConversationProvider.notifier)
.set(full);
} catch (e) {
DebugLogger.log(
@@ -2023,12 +2029,12 @@ class _ChatPageState extends ConsumerState<ChatPage> {
),
),
// File attachments
const FileAttachmentWidget(),
const ContextAttachmentWidget(),
// Modern Input (root matches input background including safe area)
RepaintBoundary(
// Floating input area with attachments and blur background
Positioned(
left: 0,
right: 0,
bottom: 0,
child: RepaintBoundary(
child: MeasureSize(
onChange: (size) {
if (mounted) {
@@ -2037,7 +2043,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) =>
_handleMessageSend(text, selectedModel),
onVoiceInput: null,
@@ -2045,14 +2078,19 @@ class _ChatPageState extends ConsumerState<ChatPage> {
onFileAttachment: _handleFileAttachment,
onImageAttachment: _handleImageAttachment,
onCameraCapture: () =>
_handleImageAttachment(fromCamera: true),
_handleImageAttachment(
fromCamera: true,
),
onWebAttachment: _promptAttachWebpage,
onPastedAttachments: _handlePastedAttachments,
),
),
onPastedAttachments:
_handlePastedAttachments,
),
],
),
),
),
),
),
// Floating Scroll to Bottom Button with smooth appear/disappear
Positioned(
@@ -2093,16 +2131,37 @@ class _ChatPageState extends ConsumerState<ChatPage> {
borderRadius: BorderRadius.circular(
AppBorderRadius.floatingButton,
),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 16,
sigmaY: 16,
),
child: Container(
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
.conduitTheme
.surfaceContainerHighest
.withValues(alpha: 0.75),
border: Border.all(
color: context.conduitTheme.cardBorder
.withValues(alpha: 0.3),
width: BorderWidth.regular,
.cardBorder
.withValues(alpha: 0.55),
width: BorderWidth.thin,
),
borderRadius: BorderRadius.circular(
AppBorderRadius.floatingButton,
@@ -2131,6 +2190,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
),
),
),
),
)
: const SizedBox.shrink(
key: ValueKey('scroll_to_bottom_hidden'),

196
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:async';
import 'dart:ui';
import 'dart:math' as math;
import '../providers/chat_providers.dart';
import '../services/clipboard_attachment_service.dart';
@@ -1073,10 +1072,10 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
final Brightness brightness = Theme.of(context).brightness;
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
? composerSurface.withValues(alpha: 0.78)
: context.conduitTheme.surfaceContainerHighest;
? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
final Color placeholderBase = context.conduitTheme.inputText.withValues(
alpha: 0.64,
);
@@ -1087,7 +1086,7 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
context.conduitTheme.inputBorder,
context.conduitTheme.inputBorderFocused,
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(
alpha: brightness == Brightness.dark
? 0.22 + (isActive ? 0.08 : 0.0)
@@ -1209,14 +1208,10 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
);
final BoxDecoration shellDecoration = BoxDecoration(
color: showCompactComposer ? Colors.transparent : composerBackground,
color: composerBackground,
borderRadius: shellRadius,
border: showCompactComposer
? null
: Border.all(color: outlineColor, width: BorderWidth.thin),
boxShadow: showCompactComposer
? const <BoxShadow>[]
: <BoxShadow>[
border: Border.all(color: outlineColor, width: BorderWidth.thin),
boxShadow: <BoxShadow>[
BoxShadow(
color: shellShadowColor,
blurRadius: 12 + (isActive ? 4 : 0),
@@ -1238,82 +1233,7 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
),
child: _buildPromptOverlay(context),
),
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 ...[
if (!showCompactComposer) ...[
Padding(
key: const ValueKey('composer-expanded-input'),
padding: const EdgeInsets.fromLTRB(
@@ -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(
duration: const Duration(milliseconds: 180),
curve: Curves.easeOutCubic,
decoration: shellDecoration,
width: double.infinity,
child: SafeArea(
top: false,
bottom: true,
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.4,
@@ -1432,23 +1415,18 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
),
),
),
),
);
if (brightness == Brightness.dark && !showCompactComposer) {
shell = ClipRRect(
borderRadius: shellRadius,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
// Wrap with padding for floating effect, accounting for safe area
final bottomPadding = MediaQuery.of(context).viewPadding.bottom;
return Padding(
padding: EdgeInsets.fromLTRB(
Spacing.sm,
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 ??
context.conduitTheme.textPrimary.withValues(alpha: Alpha.strong));
// Use high-contrast background for floating button
final Brightness brightness = Theme.of(context).brightness;
final Color baseBackground = context.conduitTheme.inputBackground
.withValues(alpha: brightness == Brightness.dark ? 0.9 : 0.2);
final Color baseBackground = brightness == Brightness.dark
? Color.lerp(context.conduitTheme.cardBackground, Colors.white, 0.08)!
: Color.lerp(context.conduitTheme.inputBackground, Colors.black, 0.06)!;
final Color backgroundColor = !enabled
? baseBackground.withValues(alpha: Alpha.disabled)
: isActive