UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-06 08:56:39 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

refac: rich text input styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-19 03:15:40 -07:00
parent 6d25d23326
commit e252ca1dc4
6 changed files with 21 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.css
View File

@ -189,7 +189,7 @@ input[type='number'] {
} }
.ProseMirror { .ProseMirror {
@apply h-full -translate-y-[1px]; @apply h-full min-h-fit max-h-full;
} }
.ProseMirror:focus { .ProseMirror:focus {

8
src/lib/components/chat/Chat.svelte
View File

@ -823,11 +823,11 @@
); );
} else { } else {
// Reset chat input textarea // Reset chat input textarea
const chatTextAreaElement = document.getElementById('chat-input'); const chatInputContainer = document.getElementById('chat-input-container');
if (chatTextAreaElement) { if (chatInputContainer) {
chatTextAreaElement.value = ''; chatInputContainer.value = '';
chatTextAreaElement.style.height = ''; chatInputContainer.style.height = '';
} }
const _files = JSON.parse(JSON.stringify(files)); const _files = JSON.parse(JSON.stringify(files));

2
src/lib/components/chat/MessageInput.svelte
View File

@ -512,7 +512,7 @@
<div <div
bind:this={chatInputContainerElement} bind:this={chatInputContainerElement}
id="chat-input-container" id="chat-input-container"
class="scrollbar-hidden text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-3 px-1 rounded-xl resize-none h-[48px] overflow-auto" class="scrollbar-hidden text-left bg-gray-50 dark:bg-gray-850 dark:text-gray-100 outline-none w-full py-2.5 px-1 rounded-xl resize-none h-[48px] overflow-auto"
> >
<RichTextInput <RichTextInput
bind:this={chatInputElement} bind:this={chatInputElement}

18
src/lib/components/chat/Messages.svelte
View File

@ -330,20 +330,14 @@
await tick(); await tick();
const chatInputElement = document.getElementById('chat-input'); const chatInputContainerElement = document.getElementById('chat-input-container');
if (chatInputElement) { if (chatInputContainerElement) {
prompt = p; prompt = p;
chatInputElement.style.height = ''; chatInputContainerElement.style.height = '';
chatInputElement.style.height = Math.min(chatInputElement.scrollHeight, 200) + 'px'; chatInputContainerElement.style.height =
chatInputElement.focus(); Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
chatInputContainerElement.focus();
const words = findWordIndices(prompt);
if (words.length > 0) {
const word = words.at(0);
chatInputElement.setSelectionRange(word?.startIndex, word.endIndex + 1);
}
} }
await tick(); await tick();

18
src/lib/components/chat/Placeholder.svelte
View File

@ -57,18 +57,14 @@
console.log(prompt); console.log(prompt);
await tick(); await tick();
const chatInputElement = document.getElementById('chat-input'); const chatInputContainerElement = document.getElementById('chat-input-container');
if (chatInputElement) { if (chatInputContainerElement) {
chatInputElement.style.height = ''; chatInputContainerElement.style.height = '';
chatInputElement.style.height = Math.min(chatInputElement.scrollHeight, 200) + 'px'; chatInputContainerElement.style.height =
chatInputElement.focus(); Math.min(chatInputContainerElement.scrollHeight, 200) + 'px';
const words = findWordIndices(prompt); const chatInputElement = document.getElementById('chat-input');
chatInputElement?.focus();
if (words.length > 0) {
const word = words.at(0);
chatInputElement.setSelectionRange(word?.startIndex, word.endIndex + 1);
}
} }
await tick(); await tick();

4
src/lib/components/common/RichTextInput.svelte
View File

@ -226,7 +226,7 @@
} }
return true; return true;
} }
return true; return false;
} }
onMount(() => { onMount(() => {
@ -412,4 +412,4 @@
}); });
</script> </script>
<div bind:this={element} class="relative w-full h-full {className}"></div> <div bind:this={element} class="relative w-full h-full min-h-fit {className}"></div>