Merge pull request #265 from cogwheel0/refactor-chat-input-styling
refactor-chat-input-styling
This commit is contained in:
cogwheel
@@ -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';
|
||||
@@ -937,6 +938,67 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
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) {
|
||||
// Use select to watch only the messages list to reduce rebuilds
|
||||
final messages = ref.watch(
|
||||
@@ -968,6 +1030,10 @@ 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 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(
|
||||
key: const ValueKey('loading_messages'),
|
||||
controller: null,
|
||||
@@ -976,11 +1042,11 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
cacheExtent: 300,
|
||||
slivers: [
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
Spacing.lg,
|
||||
Spacing.md,
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
Spacing.lg,
|
||||
topPadding,
|
||||
Spacing.lg,
|
||||
bottomPadding,
|
||||
),
|
||||
sliver: SliverList(
|
||||
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(
|
||||
key: const ValueKey('actual_messages'),
|
||||
controller: _scrollController,
|
||||
@@ -1105,11 +1175,11 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
cacheExtent: 600,
|
||||
slivers: [
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
Spacing.lg,
|
||||
Spacing.md,
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
Spacing.lg,
|
||||
topPadding,
|
||||
Spacing.lg,
|
||||
bottomPadding,
|
||||
),
|
||||
sliver: OptimizedSliverList<ChatMessage>(
|
||||
items: messages,
|
||||
@@ -1349,6 +1419,10 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
final greetingText = resolvedGreetingName != null
|
||||
? l10n.onboardStartTitle(resolvedGreetingName)
|
||||
: 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(
|
||||
builder: (context, constraints) {
|
||||
final greetingDisplay = greetingText ?? '';
|
||||
@@ -1360,7 +1434,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,
|
||||
topPadding,
|
||||
Spacing.lg,
|
||||
bottomPadding,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.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.
|
||||
drawerEnableOpenDragGesture: false,
|
||||
drawerDragStartBehavior: DragStartBehavior.down,
|
||||
extendBodyBehindAppBar: true,
|
||||
appBar: AppBar(
|
||||
backgroundColor: context.conduitTheme.surfaceBackground,
|
||||
backgroundColor: Colors.transparent,
|
||||
elevation: Elevation.none,
|
||||
surfaceTintColor: Colors.transparent,
|
||||
shadowColor: Colors.transparent,
|
||||
toolbarHeight: kToolbarHeight + 8,
|
||||
centerTitle: true,
|
||||
titleSpacing: 0.0,
|
||||
leadingWidth: 44 + Spacing.inputPadding + Spacing.xs,
|
||||
leading: _isSelectionMode
|
||||
? IconButton(
|
||||
icon: Icon(
|
||||
Platform.isIOS ? CupertinoIcons.xmark : Icons.close,
|
||||
? Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
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,
|
||||
size: IconSize.appBar,
|
||||
),
|
||||
onPressed: _clearSelection,
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: Builder(
|
||||
builder: (ctx) => Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: Spacing.inputPadding,
|
||||
),
|
||||
child: IconButton(
|
||||
onPressed: () {
|
||||
child: Center(
|
||||
child: GestureDetector(
|
||||
onTap: () {
|
||||
final layout = ResponsiveDrawerLayout.of(ctx);
|
||||
if (layout == null) return;
|
||||
|
||||
@@ -1617,7 +1712,10 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
}
|
||||
layout.toggle();
|
||||
},
|
||||
icon: Icon(
|
||||
child: _buildAppBarPill(
|
||||
context: ctx,
|
||||
isCircular: true,
|
||||
child: Icon(
|
||||
Platform.isIOS
|
||||
? CupertinoIcons.line_horizontal_3
|
||||
: Icons.menu,
|
||||
@@ -1627,29 +1725,86 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
title: _isSelectionMode
|
||||
? Text(
|
||||
? _buildAppBarPill(
|
||||
context: context,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: Spacing.md,
|
||||
vertical: Spacing.sm,
|
||||
),
|
||||
child: Text(
|
||||
'${_selectedMessageIds.length} selected',
|
||||
style: AppTypography.headlineSmallStyle.copyWith(
|
||||
color: context.conduitTheme.textPrimary,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: LayoutBuilder(
|
||||
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 {
|
||||
final modelsAsync = ref.read(modelsProvider);
|
||||
|
||||
// Handle all async states properly
|
||||
if (modelsAsync.isLoading) {
|
||||
// If still loading, wait for it to complete
|
||||
try {
|
||||
final models = await ref.read(
|
||||
modelsProvider.future,
|
||||
);
|
||||
// Check mounted and use context immediately
|
||||
// together
|
||||
if (!mounted) return;
|
||||
// ignore: use_build_context_synchronously
|
||||
_showModelDropdown(context, ref, models);
|
||||
@@ -1661,23 +1816,17 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
);
|
||||
}
|
||||
} else if (modelsAsync.hasValue) {
|
||||
// If we have data, show immediately (no async
|
||||
// gap)
|
||||
_showModelDropdown(
|
||||
context,
|
||||
ref,
|
||||
modelsAsync.value!,
|
||||
);
|
||||
} else if (modelsAsync.hasError) {
|
||||
// If there's an error, try to refresh and
|
||||
// load
|
||||
try {
|
||||
ref.invalidate(modelsProvider);
|
||||
final models = await ref.read(
|
||||
modelsProvider.future,
|
||||
);
|
||||
// Check mounted and use context immediately
|
||||
// together
|
||||
if (!mounted) return;
|
||||
// ignore: use_build_context_synchronously
|
||||
_showModelDropdown(context, ref, models);
|
||||
@@ -1690,139 +1839,21 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
}
|
||||
}
|
||||
},
|
||||
onLongPress: () {
|
||||
final conversation = ref.read(
|
||||
activeConversationProvider,
|
||||
);
|
||||
if (conversation == null) return;
|
||||
showConversationContextMenu(
|
||||
child: _buildAppBarPill(
|
||||
context: context,
|
||||
ref: ref,
|
||||
conversation: conversation,
|
||||
);
|
||||
},
|
||||
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: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: Spacing.sm,
|
||||
vertical: Spacing.xs,
|
||||
),
|
||||
child: Row(
|
||||
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,
|
||||
constraints.maxWidth -
|
||||
Spacing.xxl,
|
||||
),
|
||||
child: MiddleEllipsisText(
|
||||
modelLabel,
|
||||
@@ -1832,59 +1863,32 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
),
|
||||
),
|
||||
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(
|
||||
Icon(
|
||||
Platform.isIOS
|
||||
? CupertinoIcons
|
||||
.chevron_down
|
||||
? CupertinoIcons.chevron_down
|
||||
: Icons.keyboard_arrow_down,
|
||||
color: context
|
||||
.conduitTheme
|
||||
.iconSecondary,
|
||||
size: iconWidth,
|
||||
),
|
||||
color:
|
||||
context.conduitTheme.iconSecondary,
|
||||
size: IconSize.small,
|
||||
),
|
||||
],
|
||||
);
|
||||
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)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
top: 2.0,
|
||||
top: Spacing.xs,
|
||||
),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
@@ -1898,9 +1902,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
AppBorderRadius.badge,
|
||||
),
|
||||
border: Border.all(
|
||||
color: context
|
||||
.conduitTheme
|
||||
.success
|
||||
color: context.conduitTheme.success
|
||||
.withValues(alpha: 0.3),
|
||||
width: BorderWidth.thin,
|
||||
),
|
||||
@@ -1909,9 +1911,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
'REVIEWER MODE',
|
||||
style: AppTypography.captionStyle
|
||||
.copyWith(
|
||||
color: context
|
||||
.conduitTheme
|
||||
.success,
|
||||
color:
|
||||
context.conduitTheme.success,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 9,
|
||||
),
|
||||
@@ -1919,8 +1920,6 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
@@ -1930,26 +1929,43 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
padding: const EdgeInsets.only(
|
||||
right: Spacing.inputPadding,
|
||||
),
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
child: Tooltip(
|
||||
message: AppLocalizations.of(context)!.newChat,
|
||||
child: GestureDetector(
|
||||
onTap: _handleNewChat,
|
||||
child: _buildAppBarPill(
|
||||
context: context,
|
||||
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 ...[
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Platform.isIOS ? CupertinoIcons.delete : Icons.delete,
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
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,
|
||||
size: IconSize.appBar,
|
||||
),
|
||||
onPressed: _deleteSelectedMessages,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
@@ -1964,26 +1980,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 +2033,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 +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) =>
|
||||
_handleMessageSend(text, selectedModel),
|
||||
onVoiceInput: null,
|
||||
@@ -2045,22 +2082,56 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
onFileAttachment: _handleFileAttachment,
|
||||
onImageAttachment: _handleImageAttachment,
|
||||
onCameraCapture: () =>
|
||||
_handleImageAttachment(fromCamera: true),
|
||||
_handleImageAttachment(
|
||||
fromCamera: true,
|
||||
),
|
||||
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
|
||||
Positioned(
|
||||
bottom:
|
||||
((_inputHeight > 0)
|
||||
bottom: (_inputHeight > 0)
|
||||
? _inputHeight
|
||||
: (Spacing.xxl + Spacing.xxxl)) +
|
||||
Spacing.sm,
|
||||
: (Spacing.xxl + Spacing.xxxl),
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: AnimatedSwitcher(
|
||||
@@ -2093,16 +2164,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 +2223,7 @@ class _ChatPageState extends ConsumerState<ChatPage> {
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: const SizedBox.shrink(
|
||||
key: ValueKey('scroll_to_bottom_hidden'),
|
||||
|
||||
@@ -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(
|
||||
@@ -1359,7 +1279,7 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
|
||||
Spacing.inputPadding,
|
||||
0,
|
||||
Spacing.inputPadding,
|
||||
0,
|
||||
Spacing.sm,
|
||||
),
|
||||
child: Row(
|
||||
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(
|
||||
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.screenPadding,
|
||||
0,
|
||||
Spacing.screenPadding,
|
||||
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
|
||||
|
||||
@@ -2,6 +2,7 @@ import 'dart:math' as math;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter_animate/flutter_animate.dart';
|
||||
import 'theme_extensions.dart';
|
||||
import 'tweakcn_themes.dart';
|
||||
@@ -115,6 +116,13 @@ class AppTheme {
|
||||
elevation: Elevation.none,
|
||||
backgroundColor: surfaces.background,
|
||||
foregroundColor: tokens.neutralOnSurface,
|
||||
systemOverlayStyle: SystemUiOverlayStyle(
|
||||
statusBarBrightness: brightness,
|
||||
statusBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
|
||||
systemNavigationBarIconBrightness: isDark
|
||||
? Brightness.light
|
||||
: Brightness.dark,
|
||||
),
|
||||
),
|
||||
bottomSheetTheme: BottomSheetThemeData(
|
||||
backgroundColor: surfaces.card,
|
||||
|
||||
Reference in New Issue
Block a user