From b1521cacadb926c3629945b03125674ade1c6e93 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Mon, 23 Sep 2024 14:24:50 +0200 Subject: [PATCH] refac: WIP --- src/lib/components/chat/MessageInput.svelte | 2 +- src/lib/components/chat/Messages.svelte | 54 ++++++++++++------- .../components/chat/Messages/CodeBlock.svelte | 3 +- .../Messages/Markdown/MarkdownTokens.svelte | 2 +- .../components/chat/Messages/Message.svelte | 41 +++++--------- .../chat/Messages/ResponseMessage.svelte | 2 + .../chat/Messages/UserMessage.svelte | 10 +++- 7 files changed, 65 insertions(+), 49 deletions(-) diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte index c027b9158..099f1dcec 100644 --- a/src/lib/components/chat/MessageInput.svelte +++ b/src/lib/components/chat/MessageInput.svelte @@ -271,7 +271,7 @@
- {#if autoScroll === false && !history?.currentId} + {#if autoScroll === false && history?.currentId}
diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index 596458578..7e914ae9d 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -13,7 +13,14 @@ const i18n = getContext('i18n'); export let chatId = ''; - export let readOnly = false; + export let user = $_user; + + export let prompt; + export let history = {}; + export let selectedModels; + + let messages = []; + export let sendPrompt: Function; export let continueResponse: Function; export let regenerateResponse: Function; @@ -21,14 +28,24 @@ export let chatActionHandler: Function; export let showMessage: Function = () => {}; - export let user = $_user; - export let prompt; + export let readOnly = false; + export let bottomPadding = false; export let autoScroll; - export let history = {}; - export let messages = []; - export let selectedModels; + $: if (history.currentId) { + let _messages = []; + + let message = history.messages[history.currentId]; + while (message) { + _messages.unshift({ ...message }); + message = message.parentId !== null ? history.messages[message.parentId] : null; + } + + messages = _messages; + } else { + messages = []; + } $: if (autoScroll && bottomPadding) { (async () => { @@ -312,18 +329,19 @@ {:else}
{#key chatId} - -
- +
+ {#each messages as message, messageIdx (message.id)} + + {/each}
{#if bottomPadding} diff --git a/src/lib/components/chat/Messages/CodeBlock.svelte b/src/lib/components/chat/Messages/CodeBlock.svelte index fdd8d3488..dbe49c232 100644 --- a/src/lib/components/chat/Messages/CodeBlock.svelte +++ b/src/lib/components/chat/Messages/CodeBlock.svelte @@ -226,7 +226,7 @@ __builtins__.input = input`); } }; - $: if (token.raw) { + $: if (token) { if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) { (async () => { await drawMermaidDiagram(); @@ -245,6 +245,7 @@ __builtins__.input = input`); } onMount(async () => { + console.log('codeblock', lang, code); if (document.documentElement.classList.contains('dark')) { mermaid.initialize({ startOnLoad: true, diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte index 33538c9af..8029c0a1b 100644 --- a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte +++ b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte @@ -19,7 +19,7 @@ -{#each tokens as token, tokenIdx} +{#each tokens as token, tokenIdx (tokenIdx)} {#if token.type === 'hr'}
{:else if token.type === 'heading'} diff --git a/src/lib/components/chat/Messages/Message.svelte b/src/lib/components/chat/Messages/Message.svelte index 9a328e0d7..d60e17cc4 100644 --- a/src/lib/components/chat/Messages/Message.svelte +++ b/src/lib/components/chat/Messages/Message.svelte @@ -12,10 +12,8 @@ import UserMessage from './UserMessage.svelte'; import { updateChatById } from '$lib/apis/chats'; - // h here refers to the height of the message graph - export let h; - export let chatId; + export let idx = 0; export let history; export let messageId; @@ -40,12 +38,23 @@ export let readOnly = false; + let message = JSON.parse(JSON.stringify(history.messages[messageId])); + $: if (history.messages) { + if (JSON.stringify(message) !== JSON.stringify(history.messages[messageId])) { + message = JSON.parse(JSON.stringify(history.messages[messageId])); + } + } + const copyToClipboardWithToast = async (text) => { const res = await copyToClipboard(text); if (res) { toast.success($i18n.t('Copying to clipboard was successful!')); } }; + + onMount(() => { + console.log('message', idx); + });
- {#if history.messages[messageId]} - {@const message = history.messages[messageId]} + {#if message} {#if message.role === 'user'} - -{#if history.messages[messageId]?.parentId !== null} - -{/if} diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte index f0a0660e2..c62c20b6b 100644 --- a/src/lib/components/chat/Messages/ResponseMessage.svelte +++ b/src/lib/components/chat/Messages/ResponseMessage.svelte @@ -316,6 +316,8 @@ } onMount(async () => { + console.log('ResponseMessage mounted'); + await tick(); }); diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte index 532f85de2..3f0fd7be9 100644 --- a/src/lib/components/chat/Messages/UserMessage.svelte +++ b/src/lib/components/chat/Messages/UserMessage.svelte @@ -1,7 +1,7 @@