Initial commit
This commit is contained in:
Zhongwei Li
230
templates/use-chat-attachments.tsx
Normal file
230
templates/use-chat-attachments.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* AI SDK UI - Chat with File Attachments
|
||||
*
|
||||
* Demonstrates:
|
||||
* - File upload with experimental_attachments
|
||||
* - Image preview
|
||||
* - Multiple file support
|
||||
* - Sending files with messages
|
||||
*
|
||||
* Requires:
|
||||
* - API route that handles multimodal inputs (GPT-4 Vision, Claude 3.5, etc.)
|
||||
* - experimental_attachments feature (v5)
|
||||
*
|
||||
* Usage:
|
||||
* 1. Set up API route with vision model
|
||||
* 2. Copy this component
|
||||
* 3. Customize file handling as needed
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { useChat } from 'ai/react';
|
||||
import { useState, FormEvent } from 'react';
|
||||
|
||||
export default function ChatWithAttachments() {
|
||||
const { messages, sendMessage, isLoading, error } = useChat({
|
||||
api: '/api/chat',
|
||||
});
|
||||
const [input, setInput] = useState('');
|
||||
const [files, setFiles] = useState<FileList | null>(null);
|
||||
const [previewUrls, setPreviewUrls] = useState<string[]>([]);
|
||||
|
||||
// Handle file selection
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFiles = e.target.files;
|
||||
setFiles(selectedFiles);
|
||||
|
||||
if (selectedFiles) {
|
||||
// Create preview URLs
|
||||
const urls = Array.from(selectedFiles).map((file) =>
|
||||
URL.createObjectURL(file)
|
||||
);
|
||||
setPreviewUrls(urls);
|
||||
} else {
|
||||
setPreviewUrls([]);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle form submission
|
||||
const handleSubmit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!input.trim() && !files) return;
|
||||
|
||||
sendMessage({
|
||||
content: input || 'Please analyze these images',
|
||||
experimental_attachments: files
|
||||
? Array.from(files).map((file) => ({
|
||||
name: file.name,
|
||||
contentType: file.type,
|
||||
url: URL.createObjectURL(file),
|
||||
}))
|
||||
: undefined,
|
||||
});
|
||||
|
||||
// Clean up
|
||||
setInput('');
|
||||
setFiles(null);
|
||||
previewUrls.forEach((url) => URL.revokeObjectURL(url));
|
||||
setPreviewUrls([]);
|
||||
};
|
||||
|
||||
// Remove file
|
||||
const removeFile = (index: number) => {
|
||||
if (!files) return;
|
||||
|
||||
const newFiles = Array.from(files).filter((_, i) => i !== index);
|
||||
const dataTransfer = new DataTransfer();
|
||||
newFiles.forEach((file) => dataTransfer.items.add(file));
|
||||
|
||||
setFiles(dataTransfer.files);
|
||||
|
||||
// Update preview URLs
|
||||
URL.revokeObjectURL(previewUrls[index]);
|
||||
setPreviewUrls(previewUrls.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen max-w-3xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b">
|
||||
<h1 className="text-2xl font-bold">AI Chat with File Attachments</h1>
|
||||
<p className="text-sm text-gray-600">
|
||||
Upload images and ask questions about them
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{messages.map((message) => (
|
||||
<div key={message.id} className="space-y-2">
|
||||
{/* Text content */}
|
||||
<div
|
||||
className={`flex ${
|
||||
message.role === 'user' ? 'justify-end' : 'justify-start'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[70%] p-3 rounded-lg ${
|
||||
message.role === 'user'
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-200 text-gray-900'
|
||||
}`}
|
||||
>
|
||||
{message.content}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Attachments */}
|
||||
{message.experimental_attachments &&
|
||||
message.experimental_attachments.length > 0 && (
|
||||
<div
|
||||
className={`flex ${
|
||||
message.role === 'user' ? 'justify-end' : 'justify-start'
|
||||
}`}
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-2 max-w-[70%]">
|
||||
{message.experimental_attachments.map(
|
||||
(attachment, idx) => (
|
||||
<div key={idx} className="relative">
|
||||
{attachment.contentType?.startsWith('image/') ? (
|
||||
<img
|
||||
src={attachment.url}
|
||||
alt={attachment.name}
|
||||
className="rounded-lg max-h-40 object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="p-2 bg-gray-100 rounded-lg text-sm">
|
||||
{attachment.name}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex justify-start">
|
||||
<div className="bg-gray-200 p-3 rounded-lg">Processing...</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="p-4 bg-red-50 border-t border-red-200 text-red-700">
|
||||
<strong>Error:</strong> {error.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* File preview */}
|
||||
{previewUrls.length > 0 && (
|
||||
<div className="p-4 border-t bg-gray-50">
|
||||
<p className="text-sm text-gray-700 mb-2">
|
||||
Selected files ({previewUrls.length}):
|
||||
</p>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{previewUrls.map((url, idx) => (
|
||||
<div key={idx} className="relative">
|
||||
<img
|
||||
src={url}
|
||||
alt={`Preview ${idx + 1}`}
|
||||
className="rounded-lg h-20 w-full object-cover"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeFile(idx)}
|
||||
className="absolute top-1 right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs hover:bg-red-600"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Input */}
|
||||
<form onSubmit={handleSubmit} className="p-4 border-t">
|
||||
<div className="space-y-2">
|
||||
{/* File input */}
|
||||
<label className="flex items-center space-x-2 cursor-pointer">
|
||||
<div className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">
|
||||
📎 Attach Files
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
{files && <span className="text-sm text-gray-600">{files.length} file(s)</span>}
|
||||
</label>
|
||||
|
||||
{/* Text input */}
|
||||
<div className="flex space-x-2">
|
||||
<input
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Ask a question about the images..."
|
||||
disabled={isLoading}
|
||||
className="flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || (!input.trim() && !files)}
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded-lg disabled:bg-gray-300 disabled:cursor-not-allowed"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user