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

fix: image and files previews on the web

Browse Source
This commit is contained in:
cogwheel0
2025-09-22 23:17:23 +05:30
parent 66a28958ed
commit 7ab1ec3acf
5 changed files with 336 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
lib/features/chat/providers/chat_providers.dart
View File

@@ -525,9 +525,6 @@ Future<String> _preseedAssistantAndPersist(
required String modelId,
String? systemPrompt,
}) async {
final api = ref.read(apiServiceProvider);
final activeConv = ref.read(activeConversationProvider);
// Choose id: reuse existing if provided, else create new
final String assistantMessageId =
(existingAssistantId != null && existingAssistantId.isNotEmpty)
@@ -564,22 +561,26 @@ Future<String> _preseedAssistantAndPersist(
} catch (_) {}
}
// Persist the skeleton to the server so the web client sees a correct chain
// Sync conversation state to ensure WebUI can load conversation history
try {
final api = ref.read(apiServiceProvider);
final activeConv = ref.read(activeConversationProvider);
if (api != null && activeConv != null) {
final resolvedSystemPrompt =
(systemPrompt != null && systemPrompt.trim().isNotEmpty)
? systemPrompt.trim()
: activeConv.systemPrompt;
final current = ref.read(chatMessagesProvider);
await api.updateConversationWithMessages(
await api.syncConversationMessages(
activeConv.id,
current,
model: modelId,
systemPrompt: resolvedSystemPrompt,
);
}
} catch (_) {}
} catch (_) {
// Non-critical - continue if sync fails
}
return assistantMessageId;
}
@@ -708,6 +709,47 @@ bool validateFileCount(int currentCount, int newFilesCount, int? maxCount) {
return (currentCount + newFilesCount) <= maxCount;
}
// Helper function to build files array from attachment IDs
Future<List<Map<String, dynamic>>?> _buildFilesArrayFromAttachments(
dynamic api,
List<String> attachmentIds,
) async {
final filesArray = <Map<String, dynamic>>[];
for (final attachmentId in attachmentIds) {
try {
final fileInfo = await api.getFileInfo(attachmentId);
final fileName = fileInfo['filename'] ?? fileInfo['name'] ?? 'Unknown';
final fileSize = fileInfo['size'];
// Check if it's an image
final ext = fileName.toLowerCase().split('.').last;
final isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp'].contains(ext);
// Add all files to the files array for WebUI display
// Note: This is for storage/display, not for API message sending
filesArray.add({
'type': isImage ? 'image' : 'file',
'id': attachmentId, // Required for RAG system to lookup file content
'url': '/api/v1/files/$attachmentId/content',
'name': fileName,
if (fileSize != null) 'size': fileSize,
});
} catch (_) {
// If we can't get file info, assume it's a non-image file
// Images should be handled in the content array anyway
filesArray.add({
'type': 'file',
'id': attachmentId, // Required for RAG system to lookup file content
'url': '/api/v1/files/$attachmentId/content',
'name': 'Unknown',
});
}
}
return filesArray.isNotEmpty ? filesArray : null;
}
// Helper function to get file content as base64
Future<String?> _getFileAsBase64(dynamic api, String fileId) async {
// Check if this is already a data URL (for images)
@@ -758,44 +800,57 @@ Future<Map<String, dynamic>> _buildMessagePayloadWithAttachments({
required List<String> attachmentIds,
}) async {
final List<Map<String, dynamic>> contentArray = [];
final List<Map<String, dynamic>> nonImageFiles = [];
if (cleanedText.isNotEmpty) {
contentArray.add({'type': 'text', 'text': cleanedText});
}
// Collect all files in OpenWebUI format for the files array
final allFiles = <Map<String, dynamic>>[];
for (final attachmentId in attachmentIds) {
try {
final fileInfo = await api.getFileInfo(attachmentId);
final fileName = fileInfo['filename'] ?? fileInfo['name'] ?? 'Unknown';
final fileSize = fileInfo['size'];
final base64Data = await _getFileAsBase64(api, attachmentId);
if (base64Data != null) {
// This is an image file - add to content array only
if (base64Data.startsWith('data:')) {
contentArray.add({
'type': 'image_url',
'image_url': {'url': base64Data},
});
} else {
if (!attachmentId.startsWith('data:')) {
final fileInfo = await api.getFileInfo(attachmentId);
final fileName = fileInfo['filename'] ?? '';
final ext = fileName.toLowerCase().split('.').last;
String mimeType = 'image/png';
if (ext == 'jpg' || ext == 'jpeg') {
mimeType = 'image/jpeg';
} else if (ext == 'gif') {
mimeType = 'image/gif';
} else if (ext == 'webp') {
mimeType = 'image/webp';
}
contentArray.add({
'type': 'image_url',
'image_url': {'url': 'data:$mimeType;base64,$base64Data'},
});
final ext = fileName.toLowerCase().split('.').last;
String mimeType = 'image/png';
if (ext == 'jpg' || ext == 'jpeg') {
mimeType = 'image/jpeg';
} else if (ext == 'gif') {
mimeType = 'image/gif';
} else if (ext == 'webp') {
mimeType = 'image/webp';
}
final dataUrl = 'data:$mimeType;base64,$base64Data';
contentArray.add({
'type': 'image_url',
'image_url': {'url': dataUrl},
});
}
// Note: Images are handled in content array above, no need to duplicate in files array
// This prevents duplicate display in the WebUI
} else {
nonImageFiles.add({'id': attachmentId, 'type': 'file'});
// This is a non-image file
allFiles.add({
'type': 'file',
'id': attachmentId, // Required for RAG system to lookup file content
'url': '/api/v1/files/$attachmentId/content',
'name': fileName,
if (fileSize != null) 'size': fileSize,
});
}
} catch (_) {
// Swallow and continue to keep regeneration robust
@@ -806,8 +861,8 @@ Future<Map<String, dynamic>> _buildMessagePayloadWithAttachments({
'role': role,
'content': contentArray.isNotEmpty ? contentArray : cleanedText,
};
if (nonImageFiles.isNotEmpty) {
messageMap['files'] = nonImageFiles;
if (allFiles.isNotEmpty) {
messageMap['files'] = allFiles;
}
return messageMap;
}
@@ -1221,6 +1276,13 @@ Future<void> _sendMessageInternal(
var activeConversation = ref.read(activeConversationProvider);
// Create user message first
List<Map<String, dynamic>>? userFiles;
if (attachments != null &&
attachments.isNotEmpty &&
!reviewerMode &&
api != null) {
userFiles = await _buildFilesArrayFromAttachments(api, attachments);
}
final userMessage = ChatMessage(
id: const Uuid().v4(),
@@ -1229,6 +1291,7 @@ Future<void> _sendMessageInternal(
timestamp: DateTime.now(),
model: selectedModel.id,
attachmentIds: attachments,
files: userFiles,
);
if (activeConversation == null) {
@@ -1450,19 +1513,21 @@ Future<void> _sendMessageInternal(
);
ref.read(chatMessagesProvider.notifier).addMessage(assistantPlaceholder);
// Persist skeleton chain to server so web can load correct history
// Sync conversation state to ensure WebUI can load conversation history
try {
final activeConvForSeed = ref.read(activeConversationProvider);
if (activeConvForSeed != null) {
final msgsForSeed = ref.read(chatMessagesProvider);
await api.updateConversationWithMessages(
await api.syncConversationMessages(
activeConvForSeed.id,
msgsForSeed,
model: selectedModel.id,
systemPrompt: effectiveSystemPrompt,
);
}
} catch (_) {}
} catch (_) {
// Non-critical - continue if sync fails
}
// Use the model's actual supported parameters if available
final supportedParams =
selectedModel.supportedParameters ??

88
lib/features/chat/widgets/assistant_message_widget.dart
View File

@@ -561,17 +561,14 @@ class _AssistantMessageWidgetState extends ConsumerState<AssistantMessageWidget>
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Display attachments (images use EnhancedImageAttachment; non-images use card)
if (widget.message.attachmentIds != null &&
widget.message.attachmentIds!.isNotEmpty) ...[
_buildAttachmentItems(),
const SizedBox(height: Spacing.md),
],
// Display generated images from files property - OUTSIDE AnimatedSwitcher to prevent fade issues
// Display attachments - prioritize files array over attachmentIds to avoid duplication
if (widget.message.files != null &&
widget.message.files!.isNotEmpty) ...[
_buildGeneratedImages(),
_buildFilesFromArray(),
const SizedBox(height: Spacing.md),
] else if (widget.message.attachmentIds != null &&
widget.message.attachmentIds!.isNotEmpty) ...[
_buildAttachmentItems(),
const SizedBox(height: Spacing.md),
],
@@ -767,30 +764,57 @@ class _AssistantMessageWidgetState extends ConsumerState<AssistantMessageWidget>
);
}
Widget _buildGeneratedImages() {
Widget _buildFilesFromArray() {
if (widget.message.files == null || widget.message.files!.isEmpty) {
return const SizedBox.shrink();
}
// Filter for image files
final imageFiles = widget.message.files!
final allFiles = widget.message.files!;
// Separate images and non-image files
final imageFiles = allFiles
.where((file) => file['type'] == 'image')
.toList();
final nonImageFiles = allFiles
.where((file) => file['type'] != 'image')
.toList();
if (imageFiles.isEmpty) {
final widgets = <Widget>[];
// Add images first
if (imageFiles.isNotEmpty) {
widgets.add(_buildImagesFromFiles(imageFiles));
}
// Add non-image files
if (nonImageFiles.isNotEmpty) {
if (widgets.isNotEmpty) {
widgets.add(const SizedBox(height: Spacing.sm));
}
widgets.add(_buildNonImageFiles(nonImageFiles));
}
if (widgets.isEmpty) {
return const SizedBox.shrink();
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: widgets,
);
}
Widget _buildImagesFromFiles(List<dynamic> imageFiles) {
final imageCount = imageFiles.length;
// Display generated images using EnhancedImageAttachment for consistency
// Display images using EnhancedImageAttachment for consistency
// Use AnimatedSwitcher for smooth transitions
return AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
switchInCurve: Curves.easeInOut,
child: imageCount == 1
? Container(
key: ValueKey('gen_single_${imageFiles[0]['url']}'),
key: ValueKey('file_single_${imageFiles[0]['url']}'),
child: Builder(
builder: (context) {
final imageUrl = imageFiles[0]['url'] as String?;
@@ -812,7 +836,7 @@ class _AssistantMessageWidgetState extends ConsumerState<AssistantMessageWidget>
)
: Wrap(
key: ValueKey(
'gen_multi_${imageFiles.map((f) => f['url']).join('_')}',
'file_multi_${imageFiles.map((f) => f['url']).join('_')}',
),
spacing: Spacing.sm,
runSpacing: Spacing.sm,
@@ -836,6 +860,38 @@ class _AssistantMessageWidgetState extends ConsumerState<AssistantMessageWidget>
);
}
Widget _buildNonImageFiles(List<dynamic> nonImageFiles) {
return Wrap(
spacing: Spacing.sm,
runSpacing: Spacing.sm,
children: nonImageFiles.map<Widget>((file) {
final fileUrl = file['url'] as String?;
if (fileUrl == null) return const SizedBox.shrink();
// Extract file ID from URL if it's in the format /api/v1/files/{id}/content
String attachmentId = fileUrl;
if (fileUrl.contains('/api/v1/files/') &&
fileUrl.contains('/content')) {
final fileIdMatch = RegExp(
r'/api/v1/files/([^/]+)/content',
).firstMatch(fileUrl);
if (fileIdMatch != null) {
attachmentId = fileIdMatch.group(1)!;
}
}
return EnhancedAttachment(
key: ValueKey('file_attachment_$attachmentId'),
attachmentId: attachmentId,
isMarkdownFormat: true,
constraints: const BoxConstraints(maxWidth: 300, maxHeight: 100),
disableAnimation: widget.isStreaming,
);
}).toList(),
);
}
Widget _buildTypingIndicator() {
return Consumer(
builder: (context, ref, child) {

173
lib/features/chat/widgets/user_message_bubble.dart
View File

@@ -64,7 +64,9 @@ class _UserMessageBubbleState extends ConsumerState<UserMessageBubble>
duration: AnimationDuration.messageSlide,
vsync: this,
);
_editController = TextEditingController(text: widget.message?.content ?? '');
_editController = TextEditingController(
text: widget.message?.content ?? '',
);
}
Widget _buildUserAttachmentImages() {
@@ -88,23 +90,50 @@ class _UserMessageBubbleState extends ConsumerState<UserMessageBubble>
return const SizedBox.shrink();
}
final imageFiles = widget.message.files!
final allFiles = widget.message.files!;
// Separate images and non-image files
final imageFiles = allFiles
.where(
(file) =>
file is Map && file['type'] == 'image' && file['url'] != null,
)
.toList();
final nonImageFiles = allFiles
.where(
(file) =>
file is Map && file['type'] != 'image' && file['url'] != null,
)
.toList();
if (imageFiles.isEmpty) {
final widgets = <Widget>[];
// Add images first
if (imageFiles.isNotEmpty) {
widgets.add(
AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
switchInCurve: Curves.easeInOut,
child: _buildFileImageLayout(imageFiles, imageFiles.length),
),
);
}
// Add non-image files
if (nonImageFiles.isNotEmpty) {
if (widgets.isNotEmpty) {
widgets.add(const SizedBox(height: Spacing.xs));
}
widgets.add(_buildUserNonImageFiles(nonImageFiles));
}
if (widgets.isEmpty) {
return const SizedBox.shrink();
}
final imageCount = imageFiles.length;
return AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
switchInCurve: Curves.easeInOut,
child: _buildFileImageLayout(imageFiles, imageCount),
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: widgets,
);
}
@@ -394,6 +423,47 @@ class _UserMessageBubbleState extends ConsumerState<UserMessageBubble>
}
}
Widget _buildUserNonImageFiles(List<dynamic> nonImageFiles) {
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
child: Wrap(
alignment: WrapAlignment.end,
spacing: Spacing.xs,
runSpacing: Spacing.xs,
children: nonImageFiles.map<Widget>((file) {
final fileUrl = file['url'] as String?;
if (fileUrl == null) return const SizedBox.shrink();
// Extract file ID from URL if it's in the format /api/v1/files/{id}/content
String attachmentId = fileUrl;
if (fileUrl.contains('/api/v1/files/') &&
fileUrl.contains('/content')) {
final fileIdMatch = RegExp(
r'/api/v1/files/([^/]+)/content',
).firstMatch(fileUrl);
if (fileIdMatch != null) {
attachmentId = fileIdMatch.group(1)!;
}
}
return EnhancedAttachment(
key: ValueKey('user_file_attachment_$attachmentId'),
attachmentId: attachmentId,
isMarkdownFormat: false,
isUserMessage: true,
constraints: const BoxConstraints(maxWidth: 280, maxHeight: 80),
disableAnimation: widget.isStreaming,
);
}).toList(),
),
),
],
);
}
// Assistant-only helpers removed; this widget renders only user bubbles.
@override
@@ -429,14 +499,14 @@ class _UserMessageBubbleState extends ConsumerState<UserMessageBubble>
widget.message.attachmentIds != null &&
widget.message.attachmentIds!.isNotEmpty;
final hasText = widget.message.content.isNotEmpty;
final hasGeneratedImages =
final hasFilesFromArray =
widget.message.files != null &&
(widget.message.files as List).any(
(f) => f is Map && f['type'] == 'image' && f['url'] != null,
);
(widget.message.files as List).any((f) => f is Map && f['url'] != null);
// Prefer input/textPrimary colors during inline editing to avoid low contrast
final inlineEditTextColor = context.conduitTheme.textPrimary;
final inlineEditFill = context.conduitTheme.surfaceContainer.withValues(alpha: 0.92);
final inlineEditFill = context.conduitTheme.surfaceContainer.withValues(
alpha: 0.92,
);
return GestureDetector(
onLongPress: () => _toggleActions(),
@@ -452,8 +522,12 @@ class _UserMessageBubbleState extends ConsumerState<UserMessageBubble>
crossAxisAlignment: CrossAxisAlignment.end,
children: [
// Display images outside and above the text bubble (iMessage style)
if (hasImages) ...[_buildUserAttachmentImages()],
if (hasGeneratedImages) ...[_buildUserFileImages()],
// Prioritize files array over attachmentIds to avoid duplication
if (hasFilesFromArray) ...[
_buildUserFileImages(),
] else if (hasImages) ...[
_buildUserAttachmentImages(),
],
// Display text bubble if there's text content
if (hasText) const SizedBox(height: Spacing.xs),
@@ -504,9 +578,14 @@ class _UserMessageBubbleState extends ConsumerState<UserMessageBubble>
child: DecoratedBox(
decoration: BoxDecoration(
color: inlineEditFill,
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
borderRadius: BorderRadius.circular(
AppBorderRadius.sm,
),
border: Border.all(
color: context.conduitTheme.inputBorderFocused.withValues(alpha: 0.6),
color: context
.conduitTheme
.inputBorderFocused
.withValues(alpha: 0.6),
width: BorderWidth.thin,
),
),
@@ -520,38 +599,41 @@ class _UserMessageBubbleState extends ConsumerState<UserMessageBubble>
controller: _editController,
maxLines: null,
padding: EdgeInsets.zero,
autofillHints:
const <String>[],
autofillHints: const <String>[],
style: AppTypography
.chatMessageStyle
.copyWith(
color: inlineEditTextColor,
),
decoration: const BoxDecoration(),
color:
inlineEditTextColor,
),
decoration:
const BoxDecoration(),
cursorColor: context
.conduitTheme.buttonPrimary,
.conduitTheme
.buttonPrimary,
onSubmitted: (_) =>
_saveInlineEdit(),
)
: TextField(
controller: _editController,
maxLines: null,
autofillHints:
const <String>[],
autofillHints: const <String>[],
style: AppTypography
.chatMessageStyle
.copyWith(
color: inlineEditTextColor,
),
color:
inlineEditTextColor,
),
decoration:
const InputDecoration(
isCollapsed: true,
border: InputBorder.none,
contentPadding:
EdgeInsets.zero,
),
isCollapsed: true,
border: InputBorder.none,
contentPadding:
EdgeInsets.zero,
),
cursorColor: context
.conduitTheme.buttonPrimary,
.conduitTheme
.buttonPrimary,
onSubmitted: (_) =>
_saveInlineEdit(),
),
@@ -562,18 +644,19 @@ class _UserMessageBubbleState extends ConsumerState<UserMessageBubble>
widget.message.content,
style: AppTypography.chatMessageStyle
.copyWith(
color: context
.conduitTheme.chatBubbleUserText,
),
color: context
.conduitTheme
.chatBubbleUserText,
),
softWrap: true,
textAlign: TextAlign.left,
textHeightBehavior:
const TextHeightBehavior(
applyHeightToFirstAscent: false,
applyHeightToLastDescent: false,
leadingDistribution:
TextLeadingDistribution.even,
),
applyHeightToFirstAscent: false,
applyHeightToLastDescent: false,
leadingDistribution:
TextLeadingDistribution.even,
),
),
),
),
@@ -633,8 +716,7 @@ class _UserMessageBubbleState extends ConsumerState<UserMessageBubble>
),
] else ...[
_buildActionButton(
icon:
Platform.isIOS ? CupertinoIcons.pencil : Icons.edit_outlined,
icon: Platform.isIOS ? CupertinoIcons.pencil : Icons.edit_outlined,
label: AppLocalizations.of(context)!.edit,
onTap: widget.onEdit ?? _startInlineEdit,
),
@@ -693,7 +775,8 @@ class _UserMessageBubbleState extends ConsumerState<UserMessageBubble>
// Enqueue edited text as a new message
final activeConv = ref.read(activeConversationProvider);
final List<String>? attachments = (widget.message.attachmentIds != null &&
final List<String>? attachments =
(widget.message.attachmentIds != null &&
(widget.message.attachmentIds as List).isNotEmpty)
? List<String>.from(widget.message.attachmentIds as List)
: null;