'use client'; import { Card } from '@/app/components'; /* eslint-disable @next/next/no-img-element */ import { useChat } from '@ai-sdk/react'; import { useRef, useState } from 'react'; export default function Page() { const [input, setInput] = useState(''); const { messages, sendMessage, status } = useChat(); const [files, setFiles] = useState(undefined); const fileInputRef = useRef(null); return (

{messages.map(message => (

{`${message.role}: `}

{message.parts.map((part, index) => { if (part.type === 'text') { return

{part.text}

; } if ( part.type === 'file' && part.mediaType?.startsWith('image/') ) { return (

); } })}

))}

{messages.length === 0 && }

{ sendMessage({ text: input, files }); setInput(''); setFiles(undefined); if (fileInputRef.current) { fileInputRef.current.value = ''; } }} className="fixed bottom-0 flex flex-col w-full gap-3 p-4 border-t h-28" >

{files ? Array.from(files).map(attachment => { const { type } = attachment; if (type.startsWith('image/')) { return (

{attachment.name}

); } else if (type.startsWith('text/')) { return (

{attachment.name}

); } }) : ''}

{ if (event.target.files) { setFiles(event.target.files); } }} multiple ref={fileInputRef} /> setInput(e.target.value)} className="w-full bg-transparent outline-none" disabled={status !== 'ready'} />

); }