Spaces:
Runtime error
Runtime error
File size: 2,843 Bytes
f48efbb 058d10c f48efbb 058d10c f48efbb 058d10c f48efbb 058d10c 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 |
<script lang="ts">
import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
import type { ConversationMessage } from "$lib/types.js";
import Tooltip from "$lib/components/tooltip.svelte";
import IconImage from "~icons/carbon/image-reference";
type Props = {
content: ConversationMessage["content"];
role: ConversationMessage["role"];
loading?: boolean;
autofocus?: boolean;
onDelete?: () => void;
};
let { content = $bindable(""), role, loading, autofocus, onDelete }: Props = $props();
let element = $state<HTMLTextAreaElement>();
new TextareaAutosize({
element: () => element,
input: () => content,
});
</script>
<div
class="group/message group 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:flex-row @2xl:px-6 dark:border-gray-800 dark:hover:bg-gray-800/30"
class:pointer-events-none={loading}
>
<div class="pt-3 text-sm font-semibold uppercase @2xl:basis-[130px]">
{role}
</div>
<div class="flex w-full items-center gap-4">
<!-- svelte-ignore a11y_autofocus -->
<!-- svelte-ignore a11y_positive_tabindex -->
<textarea
bind:this={element}
{autofocus}
bind:value={content}
placeholder="Enter {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>
<Tooltip openDelay={250}>
{#snippet trigger(tooltip)}
<button
tabindex="0"
onclick={onDelete}
type="button"
class="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}
>
<IconImage />
</button>
{/snippet}
Add image
</Tooltip>
<Tooltip>
{#snippet trigger(tooltip)}
<button
tabindex="0"
onclick={onDelete}
type="button"
class="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>
|