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

feat(attachments): Optimize file ID extraction and image conversion

Browse Source
This commit is contained in:
cogwheel0
2025-12-10 19:40:38 +05:30
parent 0fc82d36f7
commit da63e3cbff
7 changed files with 266 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1116,7 +1116,7 @@ Future<String?> _getFileAsBase64(dynamic api, String fileId) async {
// Small internal helper to convert a message with attachments into the
// OpenWebUI content payload format (text + image_url + files).
// - Adds text first (if non-empty)
// - Converts image attachments to image_url with data URLs (resolving MIME type when needed)
// - Handles images as inline base64 data URLs (matching web client behavior)
// - Includes non-image attachments in a 'files' array for server-side resolution
Future<Map<String, dynamic>> _buildMessagePayloadWithAttachments({
required dynamic api,
@@ -1135,13 +1135,25 @@ Future<Map<String, dynamic>> _buildMessagePayloadWithAttachments({
for (final attachmentId in attachmentIds) {
try {
// Check if this is an image data URL (stored locally, matching web client)
// Web client stores images as base64 data URLs, not server file IDs
if (attachmentId.startsWith('data:image/')) {
// This is an inline image data URL - add directly to content array
contentArray.add({
'type': 'image_url',
'image_url': {'url': attachmentId},
});
continue;
}
// For server-stored files, fetch info
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
// This is an image file from server - add to content array only
if (base64Data.startsWith('data:')) {
contentArray.add({
'type': 'image_url',
@@ -1170,11 +1182,11 @@ Future<Map<String, dynamic>> _buildMessagePayloadWithAttachments({
// Note: Images are handled in content array above, no need to duplicate in files array
// This prevents duplicate display in the WebUI
} else {
// This is a non-image file
// This is a non-image file - match web client format
allFiles.add({
'type': 'file',
'id': attachmentId, // Required for RAG system to lookup file content
'url': '/api/v1/files/$attachmentId/content',
'url': '/api/v1/files/$attachmentId',
'name': fileName,
if (fileSize != null) 'size': fileSize,
});
@@ -1799,14 +1811,67 @@ Future<void> _sendMessageInternal(
var activeConversation = ref.read(activeConversationProvider);
// Create user message first
// Note: We only store context attachments (web/youtube/knowledge) in msg.files.
// Uploaded files are tracked via attachmentIds and will be rebuilt by
// _buildMessagePayloadWithAttachments when constructing the API payload.
// This prevents uploaded files from being duplicated in the final message.
// Build the files array to match web client format for persistence:
// - Images stored as {type: 'image', url: 'data:...'} (matching web client)
// - Server files stored as {type: 'file', id: '...', name: '...', url: '...'}
// - Context attachments (web/youtube/knowledge)
final contextAttachments = ref.read(contextAttachmentsProvider);
final contextFiles = _contextAttachmentsToFiles(contextAttachments);
final List<Map<String, dynamic>>? userFiles = contextFiles.isNotEmpty
? contextFiles
// Convert attachments to files format for web client compatibility
final attachmentFiles = <Map<String, dynamic>>[];
if (attachments != null && !reviewerMode && api != null) {
for (final attachment in attachments) {
// Data URLs are images - store inline
if (attachment.startsWith('data:image/')) {
attachmentFiles.add({'type': 'image', 'url': attachment});
} else {
// Server file ID - fetch info and create file entry
// Match web client format: {type, id, name, url, size, collection_name}
try {
final fileInfo = await api.getFileInfo(attachment);
final fileName = fileInfo['filename'] ?? fileInfo['name'] ?? 'file';
final fileSize = fileInfo['size'] ?? fileInfo['meta']?['size'];
final collectionName =
fileInfo['meta']?['collection_name'] ??
fileInfo['collection_name'];
attachmentFiles.add({
'type': 'file',
'id': attachment,
'name': fileName,
'url': '/api/v1/files/$attachment',
if (fileSize != null) 'size': fileSize,
if (collectionName != null) 'collection_name': collectionName,
});
} catch (_) {
// If we can't fetch info, store minimal file entry with placeholder name
attachmentFiles.add({
'type': 'file',
'id': attachment,
'name': 'file',
'url': '/api/v1/files/$attachment',
});
}
}
}
} else if (attachments != null) {
// Reviewer mode or no API - only handle images (server files need API)
for (final attachment in attachments) {
if (attachment.startsWith('data:image/')) {
attachmentFiles.add({'type': 'image', 'url': attachment});
} else {
DebugLogger.log(
'Ignoring non-image attachment in reviewer mode: $attachment',
scope: 'chat/providers',
);
}
}
}
// Combine attachment files and context files
final List<Map<String, dynamic>>? userFiles =
(attachmentFiles.isNotEmpty || contextFiles.isNotEmpty)
? [...attachmentFiles, ...contextFiles]
: null;
final userMessage = ChatMessage(
@@ -1969,8 +2034,13 @@ Future<void> _sendMessageInternal(
attachmentIds: ids,
);
if (msg.files != null && msg.files!.isNotEmpty) {
messageMap['files'] = [
...?messageMap['files'] as List<dynamic>?,
// Safe cast - messageMap['files'] may be List<dynamic> after storage
final rawFiles = messageMap['files'];
final existingFiles = rawFiles is List
? rawFiles.whereType<Map<String, dynamic>>().toList()
: <Map<String, dynamic>>[];
messageMap['files'] = <Map<String, dynamic>>[
...existingFiles,
...msg.files!,
];
}

245
lib/features/chat/services/file_attachment_service.dart
View File

@@ -6,10 +6,33 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:file_picker/file_picker.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path/path.dart' as path;
import '../../../core/services/api_service.dart';
import '../../../core/providers/app_providers.dart';
import '../../../core/utils/debug_logger.dart';
/// Converts an image file to a base64 data URL.
/// This is a standalone utility used by both FileAttachmentService and TaskWorker.
/// Returns null if conversion fails.
Future<String?> convertImageFileToDataUrl(File imageFile) async {
try {
final bytes = await imageFile.readAsBytes();
final ext = path.extension(imageFile.path).toLowerCase();
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';
}
return 'data:$mimeType;base64,${base64Encode(bytes)}';
} catch (e) {
DebugLogger.error('convert-image-failed', scope: 'attachments', error: e);
return null;
}
}
String _deriveDisplayName({
required String? preferredName,
required String filePath,
@@ -73,10 +96,9 @@ class LocalAttachment {
}
class FileAttachmentService {
final ApiService _apiService;
final ImagePicker _imagePicker = ImagePicker();
FileAttachmentService(this._apiService);
FileAttachmentService();
// Pick files from device
Future<List<LocalAttachment>> pickFiles({
@@ -269,139 +291,23 @@ class FileAttachmentService {
}
}
// Convert image file to base64 data URL with compression
// Convert image file to base64 data URL with optional compression
Future<String?> convertImageToDataUrl(
File imageFile, {
bool enableCompression = false,
int? maxWidth,
int? maxHeight,
}) async {
try {
DebugLogger.log(
'convert-start',
scope: 'attachments/image',
data: {'path': imageFile.path},
);
// Use the shared utility for basic conversion
String? dataUrl = await convertImageFileToDataUrl(imageFile);
if (dataUrl == null) return null;
// Read the file as bytes
final bytes = await imageFile.readAsBytes();
// Determine MIME type based on file extension
final ext = path.extension(imageFile.path).toLowerCase();
String mimeType = 'image/png'; // default
if (ext == '.jpg' || ext == '.jpeg') {
mimeType = 'image/jpeg';
} else if (ext == '.gif') {
mimeType = 'image/gif';
} else if (ext == '.webp') {
mimeType = 'image/webp';
}
// Convert to base64
final base64String = base64Encode(bytes);
String dataUrl = 'data:$mimeType;base64,$base64String';
// Apply compression if enabled
if (enableCompression && (maxWidth != null || maxHeight != null)) {
dataUrl = await compressImage(dataUrl, maxWidth, maxHeight);
}
DebugLogger.log(
'convert-done',
scope: 'attachments/image',
data: {'mime': mimeType},
);
return dataUrl;
} catch (e) {
DebugLogger.error('convert-failed', scope: 'attachments/image', error: e);
return null;
// Apply compression if enabled
if (enableCompression && (maxWidth != null || maxHeight != null)) {
dataUrl = await compressImage(dataUrl, maxWidth, maxHeight);
}
}
// Upload file with progress tracking
Stream<FileUploadState> uploadFile(LocalAttachment attachment) async* {
DebugLogger.log(
'upload-start',
scope: 'attachments/file',
data: {
'path': attachment.file.path,
'displayName': attachment.displayName,
},
);
try {
final file = attachment.file;
final fileName = attachment.displayName;
final fileSize = await file.length();
final ext = path.extension(fileName).toLowerCase();
final isImage = ['.jpg', '.jpeg', '.png', '.gif', '.webp'].contains(ext);
DebugLogger.log(
'file-details',
scope: 'attachments/file',
data: {'name': fileName, 'bytes': fileSize},
);
yield FileUploadState(
file: file,
fileName: fileName,
fileSize: fileSize,
progress: 0.0,
status: FileUploadStatus.uploading,
isImage: isImage,
);
// Upload ALL files (including images) to server for consistency with web client
DebugLogger.log('upload-progress', scope: 'attachments/file');
final fileId = await _apiService.uploadFile(file.path, fileName);
DebugLogger.log(
'upload-complete',
scope: 'attachments/file',
data: {'fileId': fileId},
);
yield FileUploadState(
file: file,
fileName: fileName,
fileSize: fileSize,
progress: 1.0,
status: FileUploadStatus.completed,
fileId: fileId,
isImage: isImage,
);
} catch (e) {
DebugLogger.error('upload-failed', scope: 'attachments/file', error: e);
final file = attachment.file;
final fileName = attachment.displayName;
final fileSize = await file.length();
final ext = path.extension(fileName).toLowerCase();
final isImage = ['.jpg', '.jpeg', '.png', '.gif', '.webp'].contains(ext);
yield FileUploadState(
file: file,
fileName: fileName,
fileSize: fileSize,
progress: 0.0,
status: FileUploadStatus.failed,
error: e.toString(),
isImage: isImage,
);
}
}
// Upload multiple files
Stream<List<FileUploadState>> uploadMultipleFiles(
List<LocalAttachment> attachments,
) async* {
final states = <String, FileUploadState>{};
for (final attachment in attachments) {
final uploadStream = uploadFile(attachment);
await for (final state in uploadStream) {
states[attachment.file.path] = state;
yield states.values.toList();
}
}
return dataUrl;
}
// Format file size for display
@@ -452,7 +358,11 @@ class FileUploadState {
final FileUploadStatus status;
final String? fileId;
final String? error;
final bool? isImage; // Added for image files
final bool? isImage;
/// For images: stores the base64 data URL (e.g., "data:image/png;base64,...")
/// This matches web client behavior where images are not uploaded to server.
final String? base64DataUrl;
FileUploadState({
required this.file,
@@ -462,7 +372,8 @@ class FileUploadState {
required this.status,
this.fileId,
this.error,
this.isImage, // Added for image files
this.isImage,
this.base64DataUrl,
});
String get formattedSize {
@@ -578,78 +489,6 @@ class MockFileAttachmentService {
throw Exception('Failed to take photo: $e');
}
}
// Mock upload file with progress tracking
Stream<FileUploadState> uploadFile(LocalAttachment attachment) async* {
DebugLogger.log(
'mock-upload',
scope: 'attachments/mock',
data: {
'path': attachment.file.path,
'displayName': attachment.displayName,
},
);
final file = attachment.file;
final fileName = attachment.displayName;
final fileSize = await file.length();
// Yield initial state
yield FileUploadState(
file: file,
fileName: fileName,
fileSize: fileSize,
progress: 0.0,
status: FileUploadStatus.uploading,
isImage: attachment.isImage,
);
// Simulate upload progress
for (int i = 1; i <= 10; i++) {
await Future.delayed(const Duration(milliseconds: 100));
yield FileUploadState(
file: file,
fileName: fileName,
fileSize: fileSize,
progress: i / 10,
status: FileUploadStatus.uploading,
isImage: attachment.isImage,
);
}
// Yield completed state with mock file ID
yield FileUploadState(
file: file,
fileName: fileName,
fileSize: fileSize,
progress: 1.0,
status: FileUploadStatus.completed,
fileId: 'mock_file_${DateTime.now().millisecondsSinceEpoch}',
isImage: attachment.isImage,
);
DebugLogger.log('mock-complete', scope: 'attachments/mock');
}
Future<List<String>> uploadFiles(
List<LocalAttachment> attachments, {
Function(int, int)? onProgress,
required String conversationId,
}) async {
final uploadIds = <String>[];
for (int i = 0; i < attachments.length; i++) {
if (onProgress != null) {
for (int j = 0; j <= 100; j += 10) {
await Future.delayed(const Duration(milliseconds: 50));
onProgress(i, j);
}
}
uploadIds.add('mock_upload_${DateTime.now().millisecondsSinceEpoch}_$i');
}
return uploadIds;
}
}
// Providers
@@ -660,9 +499,11 @@ final fileAttachmentServiceProvider = Provider<dynamic>((ref) {
return MockFileAttachmentService();
}
// Guard: only provide service when user is logged in
final apiService = ref.watch(apiServiceProvider);
if (apiService == null) return null;
return FileAttachmentService(apiService);
return FileAttachmentService();
});
// State notifier for managing attached files

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

@@ -30,7 +30,8 @@ import 'streaming_status_widget.dart';
// Pre-compiled regex patterns for image processing (performance optimization)
final _base64ImagePattern = RegExp(r'data:image/[^;]+;base64,[A-Za-z0-9+/]+=*');
final _fileIdPattern = RegExp(r'/api/v1/files/([^/]+)/content');
// Handle both URL formats: /api/v1/files/{id} and /api/v1/files/{id}/content
final _fileIdPattern = RegExp(r'/api/v1/files/([^/]+)(?:/content)?$');
class AssistantMessageWidget extends ConsumerStatefulWidget {
final dynamic message;
@@ -1116,10 +1117,10 @@ class _AssistantMessageWidgetState extends ConsumerState<AssistantMessageWidget>
if (fileUrl == null) return const SizedBox.shrink();
// Extract file ID from URL if it's in the format /api/v1/files/{id}/content
// Extract file ID from URL - handle both formats:
// /api/v1/files/{id} and /api/v1/files/{id}/content
String attachmentId = fileUrl;
if (fileUrl.contains('/api/v1/files/') &&
fileUrl.contains('/content')) {
if (fileUrl.contains('/api/v1/files/')) {
final fileIdMatch = _fileIdPattern.firstMatch(fileUrl);
if (fileIdMatch != null) {
attachmentId = fileIdMatch.group(1)!;

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

@@ -14,6 +14,10 @@ import '../../../shared/services/tasks/task_queue.dart';
import '../../../shared/utils/conversation_context_menu.dart';
import '../../tools/providers/tools_providers.dart';
// Pre-compiled regex for extracting file IDs from URLs (performance optimization)
// Handles both /api/v1/files/{id} and /api/v1/files/{id}/content formats
final _fileIdPattern = RegExp(r'/api/v1/files/([^/]+)(?:/content)?$');
class UserMessageBubble extends ConsumerStatefulWidget {
final dynamic message;
final bool isUser;
@@ -377,13 +381,11 @@ class _UserMessageBubbleState extends ConsumerState<UserMessageBubble> {
if (fileUrl == null) return const SizedBox.shrink();
// Extract file ID from URL if it's in the format /api/v1/files/{id}/content
// Extract file ID from URL - handle both formats:
// /api/v1/files/{id} and /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 (fileUrl.contains('/api/v1/files/')) {
final fileIdMatch = _fileIdPattern.firstMatch(fileUrl);
if (fileIdMatch != null) {
attachmentId = fileIdMatch.group(1)!;
}