File size: 1,605 Bytes
502cb81 4b8b411 60216ec 4b8b411 60216ec 502cb81 0ffe6c3 0bcf467 502cb81 eb79b3d 502cb81 5213b80 f2e5687 502cb81 5213b80 502cb81 5213b80 d5e14b5 5213b80 502cb81 5213b80 f2e5687 5213b80 60216ec b34b73b 5213b80 502cb81 5213b80 60216ec 5213b80 502cb81 5213b80 a979074 5213b80 502cb81 5213b80 79d3242 5213b80 |
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 |
<script lang="ts">
import type { Conversation } from "$lib/types";
import { createEventDispatcher } from "svelte";
import CodeSnippets from "./InferencePlaygroundCodeSnippets.svelte";
import Message from "./InferencePlaygroundMessage.svelte";
import IconPlus from "../Icons/IconPlus.svelte";
export let conversation: Conversation;
export let loading: boolean;
export let viewCode: boolean;
const dispatch = createEventDispatcher<{
addMessage: void;
deleteMessage: number;
}>();
let messageContainer: HTMLDivElement | null = null;
function scrollToBottom() {
if (messageContainer) {
messageContainer.scrollTop = messageContainer.scrollHeight;
}
}
$: {
if (conversation.messages.at(-1)) {
scrollToBottom();
}
}
</script>
<div
class="flex max-h-[calc(100dvh-5.8rem)] flex-col overflow-y-auto overflow-x-hidden @container"
class:pointer-events-none={loading}
class:animate-pulse={loading && !conversation.streaming}
bind:this={messageContainer}
>
{#if !viewCode}
{#each conversation.messages as message, messageIdx}
<Message
class="border-b"
{message}
on:delete={() => dispatch("deleteMessage", messageIdx)}
autofocus={!loading && messageIdx === conversation.messages.length - 1}
/>
{/each}
<button
class="flex px-6 py-6 hover:bg-gray-50 dark:hover:bg-gray-800/50"
on:click={() => dispatch("addMessage")}
disabled={loading}
>
<div class="flex items-center gap-2 !p-0 text-sm font-semibold">
<IconPlus classNames="text-lg" /> Add message
</div>
</button>
{:else}
<CodeSnippets {conversation} />
{/if}
</div>
|