From e99d69bfe24fe8d76fcf56bd7fbfb90b791d550b Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Thu, 15 Feb 2024 16:20:46 -0800 Subject: [PATCH] refac: styling --- src/lib/components/chat/MessageInput.svelte | 23 ++- .../chat/MessageInput/Documents.svelte | 2 +- .../chat/MessageInput/Models.svelte | 2 +- .../chat/MessageInput/PromptCommands.svelte | 2 +- src/lib/components/chat/Messages.svelte | 187 +++++++++--------- .../chat/Messages/Placeholder.svelte | 2 +- src/routes/(app)/+page.svelte | 40 ++-- src/routes/(app)/c/[id]/+page.svelte | 37 ++-- 8 files changed, 163 insertions(+), 132 deletions(-) diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte index 8c354856..bb03cdac 100644 --- a/src/lib/components/chat/MessageInput.svelte +++ b/src/lib/components/chat/MessageInput.svelte @@ -55,6 +55,11 @@ let isRecording = false; const MIN_DECIBELS = -45; + const scrollToBottom = () => { + const element = document.getElementById('messages-container'); + element.scrollTop = element.scrollHeight; + }; + const startRecording = async () => { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); mediaRecorder = new MediaRecorder(stream); @@ -371,17 +376,17 @@ {/if} -
-
+
+
-
+
{#if autoScroll === false && messages.length > 0} -
+
-
+
{#if filteredItems.length > 0 || prompt.split(' ')?.at(0)?.substring(1).startsWith('http')} -
+
#
diff --git a/src/lib/components/chat/MessageInput/Models.svelte b/src/lib/components/chat/MessageInput/Models.svelte index 0dbb71c8..b7bd7bac 100644 --- a/src/lib/components/chat/MessageInput/Models.svelte +++ b/src/lib/components/chat/MessageInput/Models.svelte @@ -120,7 +120,7 @@ {#if filteredModels.length > 0} -
+
@
diff --git a/src/lib/components/chat/MessageInput/PromptCommands.svelte b/src/lib/components/chat/MessageInput/PromptCommands.svelte index ddf35360..83e38561 100644 --- a/src/lib/components/chat/MessageInput/PromptCommands.svelte +++ b/src/lib/components/chat/MessageInput/PromptCommands.svelte @@ -47,7 +47,7 @@ {#if filteredPromptCommands.length > 0} -
+
/
diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index 3b2e3f62..3bca2efd 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -29,10 +29,16 @@ $: if (autoScroll && bottomPadding) { (async () => { await tick(); - window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); + + scrollToBottom(); })(); } + const scrollToBottom = () => { + const element = document.getElementById('messages-container'); + element.scrollTop = element.scrollHeight; + }; + const copyToClipboard = (text) => { if (!navigator.clipboard) { var textArea = document.createElement('textarea'); @@ -160,10 +166,11 @@ await tick(); - autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40; + const element = document.getElementById('messages-container'); + autoScroll = element.scrollHeight - element.scrollTop === element.clientHeight - 40; setTimeout(() => { - window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); + scrollToBottom(); }, 100); }; @@ -208,9 +215,11 @@ await tick(); - autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40; + const element = document.getElementById('messages-container'); + autoScroll = element.scrollHeight - element.scrollTop === element.clientHeight - 40; + setTimeout(() => { - window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' }); + scrollToBottom(); }, 100); }; @@ -218,95 +227,97 @@ {#if messages.length == 0} {:else} - {#key chatId} - {#each messages as message, messageIdx} -
-
- {#if message.role === 'user'} - message.parentId === null) - .map((message) => message.id) ?? []} - {confirmEditMessage} - {showPreviousMessage} - {showNextMessage} - {copyToClipboard} - /> +
+ {#key chatId} + {#each messages as message, messageIdx} +
+
+ {#if message.role === 'user'} + message.parentId === null) + .map((message) => message.id) ?? []} + {confirmEditMessage} + {showPreviousMessage} + {showNextMessage} + {copyToClipboard} + /> - {#if messages.length - 1 === messageIdx && processing !== ''} -
-
-
+
+ + @keyframes spinner_8HQG { + 0%, + 57.14% { + animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); + transform: translate(0); + } + 28.57% { + animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); + transform: translateY(-6px); + } + 100% { + transform: translate(0); + } + } +
+
+ {processing} +
-
- {processing} -
-
+ {/if} + {:else} + {/if} - {:else} - - {/if} +
-
- {/each} + {/each} - {#if bottomPadding} -
- {/if} - {/key} + {#if bottomPadding} +
+ {/if} + {/key} +
{/if} diff --git a/src/lib/components/chat/Messages/Placeholder.svelte b/src/lib/components/chat/Messages/Placeholder.svelte index e62fb41a..39abf6c5 100644 --- a/src/lib/components/chat/Messages/Placeholder.svelte +++ b/src/lib/components/chat/Messages/Placeholder.svelte @@ -16,7 +16,7 @@ {#if models.length > 0} -
+
{#each models as model, modelIdx} diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte index 0cc63a5b..8de0c66a 100644 --- a/src/routes/(app)/+page.svelte +++ b/src/routes/(app)/+page.svelte @@ -137,6 +137,11 @@ }); }; + const scrollToBottom = () => { + const element = document.getElementById('messages-container'); + element.scrollTop = element.scrollHeight; + }; + ////////////////////////// // Ollama functions ////////////////////////// @@ -316,7 +321,7 @@ await tick(); // Scroll down - window.scrollTo({ top: document.body.scrollHeight }); + scrollToBottom(); const messagesBody = [ $settings.system @@ -469,7 +474,7 @@ } if (autoScroll) { - window.scrollTo({ top: document.body.scrollHeight }); + scrollToBottom(); } } @@ -508,7 +513,7 @@ await tick(); if (autoScroll) { - window.scrollTo({ top: document.body.scrollHeight }); + scrollToBottom(); } if (messages.length == 2 && messages.at(1).content !== '') { @@ -519,8 +524,7 @@ const sendPromptOpenAI = async (model, userPrompt, responseMessageId, _chatId) => { const responseMessage = history.messages[responseMessageId]; - - window.scrollTo({ top: document.body.scrollHeight }); + scrollToBottom(); const res = await generateOpenAIChatCompletion(localStorage.token, { model: model, @@ -628,7 +632,7 @@ } if (autoScroll) { - window.scrollTo({ top: document.body.scrollHeight }); + scrollToBottom(); } } @@ -672,7 +676,7 @@ await tick(); if (autoScroll) { - window.scrollTo({ top: document.body.scrollHeight }); + scrollToBottom(); } if (messages.length == 2) { @@ -783,16 +787,18 @@ }; - { - autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40; - }} -/> - -
+
0} {initNewChat} {tags} {addTag} {deleteTag} /> -
-
+
+
{ + console.log(e.target.scrollHeight, e.target.scrollTop, e.target.clientHeight); + console.log(e.target.scrollHeight - e.target.scrollTop, e.target.clientHeight); + autoScroll = e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 50; + }} + >
+
{ + const element = document.getElementById('messages-container'); + element.scrollTop = element.scrollHeight; + }; + ////////////////////////// // Ollama functions ////////////////////////// @@ -330,7 +335,7 @@ await tick(); // Scroll down - window.scrollTo({ top: document.body.scrollHeight }); + scrollToBottom(); const messagesBody = [ $settings.system @@ -483,7 +488,7 @@ } if (autoScroll) { - window.scrollTo({ top: document.body.scrollHeight }); + scrollToBottom(); } } @@ -522,7 +527,7 @@ await tick(); if (autoScroll) { - window.scrollTo({ top: document.body.scrollHeight }); + scrollToBottom(); } if (messages.length == 2 && messages.at(1).content !== '') { @@ -534,7 +539,7 @@ const sendPromptOpenAI = async (model, userPrompt, responseMessageId, _chatId) => { const responseMessage = history.messages[responseMessageId]; - window.scrollTo({ top: document.body.scrollHeight }); + scrollToBottom(); const res = await generateOpenAIChatCompletion(localStorage.token, { model: model, @@ -642,7 +647,7 @@ } if (autoScroll) { - window.scrollTo({ top: document.body.scrollHeight }); + scrollToBottom(); } } @@ -686,7 +691,7 @@ await tick(); if (autoScroll) { - window.scrollTo({ top: document.body.scrollHeight }); + scrollToBottom(); } if (messages.length == 2) { @@ -797,14 +802,8 @@ }); - { - autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40; - }} -/> - {#if loaded} -
+
0} @@ -820,8 +819,16 @@ {addTag} {deleteTag} /> -
-
+
+