File size: 1,754 Bytes
1b66f8d 5da61b4 4a6603b 77c7055 5da61b4 4a6603b 1b66f8d 3aa8136 7764421 1b66f8d 77c7055 9c038aa 77c7055 1b66f8d 0714764 b2387f6 9a2f641 0714764 b2387f6 3aa8136 4a6603b 1b66f8d 7764421 1b66f8d 3aa8136 4a6603b 3aa8136 1b66f8d 0714764 b2387f6 0714764 1b66f8d |
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 |
<script lang="ts">
import type { Message } from "$lib/types/Message";
import { snapScrollToBottom } from "$lib/actions/snapScrollToBottom";
import ScrollToBottomBtn from "$lib/components/ScrollToBottomBtn.svelte";
import { createEventDispatcher, tick } from "svelte";
import ChatIntroduction from "./ChatIntroduction.svelte";
import ChatMessage from "./ChatMessage.svelte";
import { randomUUID } from "$lib/utils/randomUuid";
const dispatch = createEventDispatcher<{ retry: { id: Message["id"]; content: string } }>();
export let messages: Message[];
export let loading: boolean;
export let pending: boolean;
export let currentModel: { name: string; displayName: string };
let chatContainer: HTMLElement;
async function scrollToBottom() {
await tick();
chatContainer.scrollTop = chatContainer.scrollHeight;
}
// If last message is from user, scroll to bottom
$: if (messages[messages.length - 1]?.from === "user") {
scrollToBottom();
}
</script>
<div
class="scrollbar-custom mr-1 h-full overflow-y-auto"
use:snapScrollToBottom={messages.length ? messages : false}
bind:this={chatContainer}
>
<div class="mx-auto flex h-full max-w-3xl flex-col gap-5 px-5 pt-6 sm:gap-8 xl:max-w-4xl">
{#each messages as message, i}
<ChatMessage
loading={loading && i === messages.length - 1}
{message}
on:retry={() => dispatch("retry", { id: message.id, content: message.content })}
/>
{:else}
<ChatIntroduction on:message {currentModel} />
{/each}
{#if pending}
<ChatMessage message={{ from: "assistant", content: "", id: randomUUID() }} />
{/if}
<div class="h-32 flex-none" />
</div>
<ScrollToBottomBtn
class="bottom-36 right-4 max-md:hidden lg:right-10"
scrollNode={chatContainer}
/>
</div>
|