{#if fileUpload.isDragging}
Drop the image here to upload
{/if}
{message?.role}
{ const el = e.target as HTMLTextAreaElement; const content = el?.value; if (!message || !content) return; conversation.updateMessage({ index, message: { ...message, content } }); }} onkeydown={e => { if ((e.ctrlKey || e.metaKey) && e.key === "g") { e.preventDefault(); e.stopPropagation(); onRegen?.(); } }} placeholder="Enter {message?.role} message" class="grow resize-none overflow-hidden rounded-lg bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:bg-white focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900" rows="1" data-message data-test-id={TEST_IDS.message} {@attach autosized.attachment} >
{#if canUploadImgs}
{#snippet trigger(tooltip)}
{/snippet} Add image
{/if}
{#snippet trigger(tooltip)}
{#snippet children({ trigger, addToast })}
{ copyToClipboard(message.content ?? ""); addToast({ data: { content: "✓", variant: "info" } }); }} type="button" class="grid size-7 place-items-center border border-gray-200 bg-white text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700" {...tooltip.trigger} {...trigger} >
{/snippet}
{/snippet} Copy
{#snippet trigger(tooltip)}
{/snippet}
{regenLabel}
{cmdOrCtrl}
G
{#snippet trigger(tooltip)}
✕
{/snippet} Delete
{#each message.images ?? [] as imgKey (imgKey)} {#await images.get(imgKey)} {:then imgSrc}
(previewImg = imgSrc)} >
{ e.stopPropagation(); await conversation.updateMessage({ index, message: { images: message.images?.filter(i => i !== imgKey) }, }); images.delete(imgKey); }} class="invisible absolute -top-1 -right-1 z-20 grid size-5 place-items-center rounded-full bg-gray-800 text-xs text-white group-hover/img:visible hover:bg-gray-700" > ✕
{/await} {/each}