Spaces:
Runtime error
Runtime error
File size: 2,905 Bytes
936176c 502cb81 5851d63 4b8b411 5851d63 4b8b411 b2170a7 b1426d3 f48efbb 502cb81 5851d63 502cb81 5851d63 25a5986 5851d63 502cb81 5851d63 de2ec19 502cb81 25a5986 502cb81 5851d63 f2e5687 25a5986 502cb81 5851d63 5c869f5 5851d63 b2170a7 9b4caaa b2170a7 502cb81 5213b80 502cb81 73b6f4f 92f7aa1 d5e14b5 5213b80 5851d63 25a5986 502cb81 5213b80 f48efbb 5213b80 502cb81 eeca96c 5851d63 5213b80 502cb81 8c5a2cf 64cfbce b2170a7 5213b80 502cb81 5213b80 25c63d0 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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<!-- @migration-task Error while migrating Svelte code: Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
https://svelte.dev/e/bind_invalid_expression -->
<script lang="ts">
import { run } from "svelte/legacy";
import type { Conversation } from "$lib/types.js";
import IconPlus from "~icons/carbon/add";
import CodeSnippets from "./code-snippets.svelte";
import Message from "./message.svelte";
interface Props {
conversation: Conversation;
loading: boolean;
viewCode: boolean;
compareActive: boolean;
}
let { conversation = $bindable(), loading, viewCode, compareActive }: Props = $props();
let shouldScrollToBottom = $state(true);
let isProgrammaticScroll = $state(true);
let conversationLength = $state(conversation.messages.length);
let messageContainer: HTMLDivElement | null = $state(null);
function scrollToBottom() {
if (messageContainer) {
isProgrammaticScroll = true;
messageContainer.scrollTop = messageContainer.scrollHeight;
}
}
run(() => {
if (conversation.messages.at(-1)) {
if (shouldScrollToBottom) {
scrollToBottom();
}
}
});
run(() => {
if (conversation.messages.length !== conversationLength) {
// enable automatic scrolling when new message was added
conversationLength = conversation.messages.length;
shouldScrollToBottom = true;
}
});
function addMessage() {
const msgs = conversation.messages.slice();
conversation.messages = [
...msgs,
{
role: msgs.at(-1)?.role === "user" ? "assistant" : "user",
content: "",
},
];
conversation = conversation;
}
function deleteMessage(idx: number) {
conversation.messages = conversation.messages.slice(0, idx);
}
</script>
<div
class="@container flex flex-col overflow-x-hidden overflow-y-auto {compareActive
? 'max-h-[calc(100dvh-5.8rem-2.5rem-75px)] md:max-h-[calc(100dvh-5.8rem-2.5rem)]'
: 'max-h-[calc(100dvh-5.8rem-2.5rem-75px)] md:max-h-[calc(100dvh-5.8rem)]'}"
class:animate-pulse={loading && !conversation.streaming}
bind:this={messageContainer}
onscroll={() => {
// disable automatic scrolling is user initiates scroll
if (!isProgrammaticScroll) {
shouldScrollToBottom = false;
}
isProgrammaticScroll = false;
}}
>
{#if !viewCode}
{#each conversation.messages as _msg, idx}
<Message
bind:content={conversation.messages[idx]!.content}
role={conversation.messages[idx]!.role}
autofocus={idx === conversation.messages.length - 1}
{loading}
onDelete={() => deleteMessage(idx)}
/>
{/each}
<button
class="flex px-3.5 py-6 hover:bg-gray-50 md:px-6 dark:hover:bg-gray-800/50"
onclick={addMessage}
disabled={loading}
>
<div class="flex items-center gap-2 p-0! text-sm font-semibold">
<div class="text-lg">
<IconPlus />
</div>
Add message
</div>
</button>
{:else}
<CodeSnippets {conversation} on:closeCode />
{/if}
</div>
|