Spaces:
Runtime error
Runtime error
File size: 4,806 Bytes
f48efbb 058d10c 899d9c6 058d10c f48efbb 899d9c6 f48efbb 899d9c6 f48efbb 899d9c6 f48efbb 899d9c6 f48efbb 899d9c6 f48efbb 899d9c6 058d10c 899d9c6 2a3aa41 899d9c6 058d10c 899d9c6 058d10c 899d9c6 058d10c 899d9c6 f48efbb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<script lang="ts">
import Tooltip from "$lib/components/tooltip.svelte";
import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
import { PipelineTag, type Conversation, type ConversationMessage } from "$lib/types.js";
import { fileToDataURL } from "$lib/utils/file.js";
import { FileUpload } from "melt/builders";
import { fade } from "svelte/transition";
import IconImage from "~icons/carbon/image-reference";
type Props = {
conversation: Conversation;
message: ConversationMessage;
loading?: boolean;
autofocus?: boolean;
onDelete?: () => void;
};
let { message = $bindable(), conversation, loading, autofocus, onDelete }: Props = $props();
let element = $state<HTMLTextAreaElement>();
new TextareaAutosize({
element: () => element,
input: () => message.content ?? "",
});
const canUploadImgs = $derived(
message.role === "user" && conversation.model.pipeline_tag === PipelineTag.ImageTextToText
);
const fileUpload = new FileUpload({
accept: "image/*",
async onAccept(file) {
if (!message.images) message.images = [];
const dataUrl = await fileToDataURL(file);
if (message.images.includes(dataUrl)) return;
message.images.push(await fileToDataURL(file));
// We're dealing with files ourselves, so we don't want fileUpload to have any internal state,
// to avoid conflicts
fileUpload.clear();
},
disabled: () => !canUploadImgs,
});
</script>
<div
class="group/message group relative flex flex-col items-start gap-x-4 gap-y-2 border-b px-3.5 pt-4 pb-6 hover:bg-gray-100/70
@2xl:px-6 dark:border-gray-800 dark:hover:bg-gray-800/30"
class:pointer-events-none={loading}
{...fileUpload.dropzone}
onclick={undefined}
>
<div class=" flex w-full flex-col items-start gap-x-4 gap-y-2 @2xl:flex-row">
{#if fileUpload.isDragging}
<div
class="absolute inset-2 z-10 flex flex-col items-center justify-center rounded-xl bg-gray-800/50 backdrop-blur-md"
transition:fade={{ duration: 100 }}
>
<IconImage />
<p>Drop the image here to upload</p>
</div>
{/if}
<div class="pt-3 text-sm font-semibold uppercase @2xl:basis-[130px]">
{message.role}
</div>
<div class="flex w-full gap-4">
<!-- svelte-ignore a11y_autofocus -->
<!-- svelte-ignore a11y_positive_tabindex -->
<textarea
bind:this={element}
{autofocus}
bind:value={message.content}
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"
tabindex="2"
></textarea>
{#if canUploadImgs}
<Tooltip openDelay={250}>
{#snippet trigger(tooltip)}
<button
tabindex="0"
type="button"
class="mt-1.5 -mr-2 grid size-8 place-items-center rounded-lg border border-gray-200 bg-white text-xs font-medium
text-gray-900 group-focus-within/message:visible group-hover/message:visible
hover:bg-gray-100 hover:text-blue-700 focus:z-10
focus:ring-4 focus:ring-gray-100 focus:outline-hidden sm:invisible 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}
{...fileUpload.trigger}
>
<IconImage />
</button>
<input {...fileUpload.input} />
{/snippet}
Add image
</Tooltip>
{/if}
<Tooltip>
{#snippet trigger(tooltip)}
<button
tabindex="0"
onclick={onDelete}
type="button"
class="mt-1.5 size-8 rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900
group-focus-within/message:visible group-hover/message:visible hover:bg-gray-100
hover:text-blue-700 focus:z-10 focus:ring-4
focus:ring-gray-100 focus:outline-hidden sm:invisible 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}
>
✕
</button>
{/snippet}
Delete
</Tooltip>
</div>
</div>
{#if message.images?.length}
<div class="mt-2">
<div class="flex items-center gap-2">
{#each message.images as img (img)}
<div class="group/img relative">
<img src={img} alt="uploaded" class="size-12 rounded-lg object-cover" />
<button
type="button"
onclick={() => (message.images = message.images?.filter(i => i !== img))}
class="invisible absolute -top-1 -right-1 grid size-5 place-items-center rounded-full bg-gray-800 text-xs text-white group-hover/img:visible hover:bg-gray-700"
>
✕
</button>
</div>
{/each}
</div>
</div>
{/if}
</div>
|