File size: 1,759 Bytes
39eb06d 4b8b411 631cc27 39eb06d 631cc27 25a5986 9885691 39eb06d de2ec19 39eb06d 8c5a2cf 25a5986 39eb06d c32d95e 9885691 0093ee3 81f6b3e 39eb06d 9885691 251818f 39eb06d 8c5a2cf 39eb06d 803e314 de2ec19 39eb06d 0093ee3 39eb06d 60216ec 39eb06d 8c5a2cf 39eb06d |
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 |
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { ConversationMessage } from "./types";
export let message: ConversationMessage;
export let loading: boolean = false;
export let autofocus: boolean = false;
const dispatch = createEventDispatcher<{ delete: void; input: void }>();
</script>
<div
class="group/message group grid grid-cols-[1fr_2.5rem] items-start gap-2 px-3.5 pb-6 pt-4 hover:bg-gray-100/70 @-2xl:grid-cols-[130px_1fr_2.5rem] @2xl:grid-rows-1 @2xl:gap-4 @2xl:px-6 dark:border-gray-800 dark:hover:bg-gray-800/30 {$$props.class}"
class:pointer-events-none={loading}
>
<div class="col-span-2 pb-1 pt-3 text-sm font-semibold uppercase @2xl:col-span-1 @2xl:pb-2">
{message.role}
</div>
<!-- svelte-ignore a11y-autofocus -->
<!-- svelte-ignore a11y-positive-tabindex -->
<textarea
{autofocus}
bind:value={message.content}
placeholder="Enter {message.role} message"
class="resize-none overflow-hidden rounded-sm bg-transparent px-2 py-2.5 ring-gray-100 hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring-3 group-hover/message:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
rows="1"
tabindex="2"
on:input={() => {
dispatch("input");
}}
></textarea>
<button
tabindex="0"
on:click={() => {
dispatch("delete");
}}
type="button"
class="mt-1.5 size-8 rounded-lg 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:outline-hidden focus:ring-4 focus:ring-gray-100 group-hover/message:block sm: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"
>✕</button
>
</div>
|