Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix the attachment preview in historical messages #642

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+46 −1
Open

Fix the attachment preview in historical messages #642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
084d2f8
Fix the attachment preview in historical messages
sailxjx Dec 12, 2024
92e6f2d
Get mimetype from extension name
sailxjx Dec 13, 2024
fac5995
Fix empty attachment
sailxjx Dec 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const PurePreviewMessage = ({
)}

<div className="flex flex-col gap-2 w-full">
{message.experimental_attachments && (
{message.experimental_attachments && message.experimental_attachments.length > 0 && (
<div className="flex flex-row justify-end gap-2">
{message.experimental_attachments.map((attachment) => (
<PreviewAttachment
Expand Down
45 changes: 45 additions & 0 deletions lib/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type {
Attachment,
CoreAssistantMessage,
CoreMessage,
CoreToolMessage,
Expand Down Expand Up @@ -97,6 +98,7 @@ export function convertToUIMessages(

let textContent = '';
const toolInvocations: Array<ToolInvocation> = [];
const experimental_attachments: Array<Attachment> = [];

if (typeof message.content === 'string') {
textContent = message.content;
Expand All @@ -111,6 +113,14 @@ export function convertToUIMessages(
toolName: content.toolName,
args: content.args,
});
} else if (content.type === 'image') {
experimental_attachments.push({
url: content.image,
name: content.name || '',
contentType:
content.contentType ||
getContentTypeFromExtension(content.image),
});
}
}
}
Expand All @@ -120,6 +130,7 @@ export function convertToUIMessages(
role: message.role as Message['role'],
content: textContent,
toolInvocations,
experimental_attachments,
});

return chatMessages;
Expand Down Expand Up @@ -222,3 +233,37 @@ export function getMessageIdFromAnnotations(message: Message) {
// @ts-expect-error messageIdFromServer is not defined in MessageAnnotation
return annotation.messageIdFromServer;
}

export function getContentTypeFromExtension(url: string): string {
// Remove query parameters and hash fragments
const cleanUrl = url.split(/[?#]/)[0];

// Get the file extension from cleaned url
const extension = cleanUrl.split('.').pop()?.toLowerCase() || '';

// Common MIME type mapping
const mimeTypes: Record<string, string> = {
// Images
'png': 'image/png',
'jpg': 'image/jpeg',
'jpeg': 'image/jpeg',
'gif': 'image/gif',
'webp': 'image/webp',
'svg': 'image/svg+xml',
// Documents
'pdf': 'application/pdf',
'doc': 'application/msword',
'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
// Audio
'mp3': 'audio/mpeg',
'wav': 'audio/wav',
// Video
'mp4': 'video/mp4',
'webm': 'video/webm',
// Other
'json': 'application/json',
'txt': 'text/plain',
};

return mimeTypes[extension] || 'application/octet-stream';
}