From 8ad44cd69052cc29df7cefa44c3e7215984dbae6 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Sun, 6 Oct 2024 11:45:13 -0700 Subject: [PATCH] enh: chat landing ui option --- src/lib/components/chat/Chat.svelte | 4 +- ...ceholder.svelte => ChatPlaceholder.svelte} | 6 ++- src/lib/components/chat/Messages.svelte | 41 ++++++++++++++++++- .../chat/{Messages => }/Placeholder.svelte | 4 +- .../components/chat/Settings/Interface.svelte | 27 ++++++++++++ .../{MessageInput => }/Suggestions.svelte | 0 6 files changed, 74 insertions(+), 8 deletions(-) rename src/lib/components/chat/{Messages/OldPlaceholder.svelte => ChatPlaceholder.svelte} (97%) rename src/lib/components/chat/{Messages => }/Placeholder.svelte (98%) rename src/lib/components/chat/{MessageInput => }/Suggestions.svelte (100%) diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte index 10193a063..eca806181 100644 --- a/src/lib/components/chat/Chat.svelte +++ b/src/lib/components/chat/Chat.svelte @@ -70,7 +70,7 @@ import Navbar from '$lib/components/layout/Navbar.svelte'; import ChatControls from './ChatControls.svelte'; import EventConfirmDialog from '../common/ConfirmDialog.svelte'; - import Placeholder from './Messages/Placeholder.svelte'; + import Placeholder from './Placeholder.svelte'; export let chatIdProp = ''; @@ -1954,7 +1954,7 @@ {/if}
- {#if history.currentId} + {#if $settings?.landingPageMode === 'chat' || createMessagesList(history.currentId).length > 0}
diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index a8152e71a..a83502075 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -8,11 +8,12 @@ import { getChatList, updateChatById } from '$lib/apis/chats'; import { copyToClipboard, findWordIndices } from '$lib/utils'; - import Placeholder from './Messages/Placeholder.svelte'; import Message from './Messages/Message.svelte'; import Loader from '../common/Loader.svelte'; import Spinner from '../common/Spinner.svelte'; + import ChatPlaceholder from './ChatPlaceholder.svelte'; + const i18n = getContext('i18n'); export let chatId = ''; @@ -311,7 +312,43 @@
{#if Object.keys(history?.messages ?? {}).length == 0} - + { + let text = p; + + if (p.includes('{{CLIPBOARD}}')) { + const clipboardText = await navigator.clipboard.readText().catch((err) => { + toast.error($i18n.t('Failed to read clipboard contents')); + return '{{CLIPBOARD}}'; + }); + + text = p.replaceAll('{{CLIPBOARD}}', clipboardText); + } + + prompt = text; + + await tick(); + + const chatInputElement = document.getElementById('chat-textarea'); + if (chatInputElement) { + prompt = p; + + chatInputElement.style.height = ''; + chatInputElement.style.height = Math.min(chatInputElement.scrollHeight, 200) + 'px'; + chatInputElement.focus(); + + const words = findWordIndices(prompt); + + if (words.length > 0) { + const word = words.at(0); + chatInputElement.setSelectionRange(word?.startIndex, word.endIndex + 1); + } + } + + await tick(); + }} + /> {:else}
{#key chatId} diff --git a/src/lib/components/chat/Messages/Placeholder.svelte b/src/lib/components/chat/Placeholder.svelte similarity index 98% rename from src/lib/components/chat/Messages/Placeholder.svelte rename to src/lib/components/chat/Placeholder.svelte index 3dd62e111..e0fb39a0f 100644 --- a/src/lib/components/chat/Messages/Placeholder.svelte +++ b/src/lib/components/chat/Placeholder.svelte @@ -11,10 +11,10 @@ import { sanitizeResponseContent, findWordIndices } from '$lib/utils'; import { WEBUI_BASE_URL } from '$lib/constants'; - import Suggestions from '../MessageInput/Suggestions.svelte'; + import Suggestions from './Suggestions.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte'; import EyeSlash from '$lib/components/icons/EyeSlash.svelte'; - import MessageInput from '../MessageInput.svelte'; + import MessageInput from './MessageInput.svelte'; const i18n = getContext('i18n'); diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte index 58de9be4c..50cdc0559 100644 --- a/src/lib/components/chat/Settings/Interface.svelte +++ b/src/lib/components/chat/Settings/Interface.svelte @@ -29,6 +29,7 @@ let defaultModelId = ''; let showUsername = false; + let landingPageMode = ''; let chatBubble = true; let chatDirection: 'LTR' | 'RTL' = 'LTR'; @@ -56,6 +57,11 @@ saveSettings({ chatBubble: chatBubble }); }; + const toggleLandingPageMode = async () => { + landingPageMode = landingPageMode === '' ? 'chat' : ''; + saveSettings({ landingPageMode: landingPageMode }); + }; + const toggleShowUsername = async () => { showUsername = !showUsername; saveSettings({ showUsername: showUsername }); @@ -150,6 +156,7 @@ showEmojiInCall = $settings.showEmojiInCall ?? false; voiceInterruption = $settings.voiceInterruption ?? false; + landingPageMode = $settings.landingPageMode ?? ''; chatBubble = $settings.chatBubble ?? true; widescreenMode = $settings.widescreenMode ?? false; splitLargeChunks = $settings.splitLargeChunks ?? false; @@ -229,6 +236,26 @@
{$i18n.t('UI')}
+
+
+
{$i18n.t('Landing Page Mode')}
+ + +
+
+
{$i18n.t('Chat Bubble UI')}
diff --git a/src/lib/components/chat/MessageInput/Suggestions.svelte b/src/lib/components/chat/Suggestions.svelte similarity index 100% rename from src/lib/components/chat/MessageInput/Suggestions.svelte rename to src/lib/components/chat/Suggestions.svelte