File size: 1,629 Bytes
502cb81 5213b80 1189124 a979074 0ffe6c3 502cb81 0ffe6c3 502cb81 eb79b3d 502cb81 5213b80 f2e5687 502cb81 5213b80 502cb81 5213b80 d5e14b5 5213b80 502cb81 5213b80 f2e5687 5213b80 f2e5687 b34b73b 5213b80 502cb81 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 { createEventDispatcher } from 'svelte';
import CodeSnippets from './InferencePlaygroundCodeSnippets.svelte';
import Message from './InferencePlaygroundMessage.svelte';
import IconPlus from '../Icons/IconPlus.svelte';
import type { Conversation } from '$lib/types';
export let loading;
export let conversation: Conversation;
export let viewCode;
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}
{messageIdx}
on:messageValueChanged
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>
|