code2024/bingo

1import Image from 'next/image'2import ClearIcon from '@/assets/images/clear.svg'3import RefreshIcon from '@/assets/images/refresh.svg'4import { FileItem } from '@/lib/bots/bing/types'5import { cn } from '@/lib/utils'6import { useBing } from '@/lib/hooks/use-bing'7 8type ChatAttachmentsProps = Pick<ReturnType<typeof useBing>, 'attachmentList' | 'setAttachmentList' | 'uploadImage'>9 10export function ChatAttachments({ attachmentList = [], setAttachmentList, uploadImage }: ChatAttachmentsProps) {11  return attachmentList.length ? (12    <div className="attachment-list">13      {attachmentList.map(file => (14        <div className="file-item" key={file.url}>15          {file.status === 'loading' && (16            <div className="loading">17              <div className="bar" />18            </div>)19          }20          {file.status !== 'error' && (21            <div className="thumbnail">22              <img draggable="false" src={file.url} />23            </div>)24          }25          {file.status === 'error' && (26            <div className="error">27              <Image alt="refresh" src={RefreshIcon} width={18} onClick={() => uploadImage(file.url)} />28            </div>29          )}30          <button className={cn('dismiss', { 'no-file': file.status === 'error' })} type="button">31            <Image alt="clear" src={ClearIcon} width={16} onClick={() => setAttachmentList([])} />32          </button>33        </div>34      ))}35    </div>36  ) : null37}38