Skip to content

GitLab

Commit 3f4eb6ca authored by Ido Henri Mamia's avatar Ido Henri Mamia
Browse files

Merge branch 'dev' of https://github.com/open-webui/open-webui into feat/rtl-layout-chat-support

parents 2e77ad87 e29a999d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 424 additions and 439 deletions
src/lib/components/chat/ModelSelector/Selector.svelte
View file @ 3f4eb6ca
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
import { cancelOllamaRequest, deleteModel, getOllamaVersion, pullModel } from '$lib/apis/ollama'; import { cancelOllamaRequest, deleteModel, getOllamaVersion, pullModel } from '$lib/apis/ollama';
import { user, MODEL_DOWNLOAD_POOL, models } from '$lib/stores'; import { user, MODEL_DOWNLOAD_POOL, models, mobile } from '$lib/stores';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { capitalizeFirstLetter, getModels, splitStream } from '$lib/utils'; import { capitalizeFirstLetter, getModels, splitStream } from '$lib/utils';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
export let items = [{ value: 'mango', label: 'Mango' }]; export let items = [{ value: 'mango', label: 'Mango' }];
export let className = ' w-[32rem]'; export let className = ' w-[30rem]';
let show = false; let show = false;
...@@ -201,10 +201,11 @@ ...@@ -201,10 +201,11 @@
<ChevronDown className=" self-center ml-2 size-3" strokeWidth="2.5" /> <ChevronDown className=" self-center ml-2 size-3" strokeWidth="2.5" />
</div> </div>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content <DropdownMenu.Content
class=" z-40 {className} max-w-[calc(100vw-1rem)] justify-start rounded-lg bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/50 outline-none " class=" z-40 {className} max-w-[calc(100vw-1rem)] justify-start rounded-xl bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/50 outline-none "
transition={flyAndScale} transition={flyAndScale}
side={'bottom-start'} side={$mobile ? 'bottom' : 'bottom-start'}
sideOffset={4} sideOffset={4}
> >
<slot> <slot>
...@@ -224,11 +225,11 @@ ...@@ -224,11 +225,11 @@
<hr class="border-gray-100 dark:border-gray-800" /> <hr class="border-gray-100 dark:border-gray-800" />
{/if} {/if}
<div class="px-3 my-2 max-h-72 overflow-y-auto scrollbar-none"> <div class="px-3 my-2 max-h-64 overflow-y-auto scrollbar-hidden">
{#each filteredItems as item} {#each filteredItems as item}
<button <button
aria-label="model-item" aria-label="model-item"
class="flex w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg cursor-pointer data-[highlighted]:bg-muted" class="flex w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-[highlighted]:bg-muted"
on:click={() => { on:click={() => {
value = item.value; value = item.value;
...@@ -312,7 +313,7 @@ ...@@ -312,7 +313,7 @@
{#if !(searchValue.trim() in $MODEL_DOWNLOAD_POOL) && searchValue && ollamaVersion && $user.role === 'admin'} {#if !(searchValue.trim() in $MODEL_DOWNLOAD_POOL) && searchValue && ollamaVersion && $user.role === 'admin'}
<button <button
class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg cursor-pointer data-[highlighted]:bg-muted" class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-[highlighted]:bg-muted"
on:click={() => { on:click={() => {
pullModelHandler(); pullModelHandler();
}} }}
...@@ -406,12 +407,12 @@ ...@@ -406,12 +407,12 @@
</DropdownMenu.Root> </DropdownMenu.Root>
<style> <style>
.scrollbar-none:active::-webkit-scrollbar-thumb, .scrollbar-hidden:active::-webkit-scrollbar-thumb,
.scrollbar-none:focus::-webkit-scrollbar-thumb, .scrollbar-hidden:focus::-webkit-scrollbar-thumb,
.scrollbar-none:hover::-webkit-scrollbar-thumb { .scrollbar-hidden:hover::-webkit-scrollbar-thumb {
visibility: visible; visibility: visible;
} }
.scrollbar-none::-webkit-scrollbar-thumb { .scrollbar-hidden::-webkit-scrollbar-thumb {
visibility: hidden; visibility: hidden;
} }
</style> </style>
src/lib/components/chat/Settings/Account.svelte
View file @ 3f4eb6ca
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
</script> </script>
<div class="flex flex-col h-full justify-between text-sm"> <div class="flex flex-col h-full justify-between text-sm">
<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[22rem]"> <div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[25rem]">
<input <input
id="profile-image-input" id="profile-image-input"
bind:this={profileImageInputElement} bind:this={profileImageInputElement}
......
src/lib/components/chat/Settings/Advanced.svelte
View file @ 3f4eb6ca
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
{#if keepAlive !== null} {#if keepAlive !== null}
<div class="flex mt-1 space-x-2"> <div class="flex mt-1 space-x-2">
<input <input
class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
type="text" type="text"
placeholder={$i18n.t("e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.")} placeholder={$i18n.t("e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.")}
bind:value={keepAlive} bind:value={keepAlive}
......
src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
View file @ 3f4eb6ca
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<div class=" w-20 text-xs font-medium self-center">{$i18n.t('Seed')}</div> <div class=" w-20 text-xs font-medium self-center">{$i18n.t('Seed')}</div>
<div class=" flex-1 self-center"> <div class=" flex-1 self-center">
<input <input
class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
type="number" type="number"
placeholder="Enter Seed" placeholder="Enter Seed"
bind:value={options.seed} bind:value={options.seed}
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<div class=" w-20 text-xs font-medium self-center">{$i18n.t('Stop Sequence')}</div> <div class=" w-20 text-xs font-medium self-center">{$i18n.t('Stop Sequence')}</div>
<div class=" flex-1 self-center"> <div class=" flex-1 self-center">
<input <input
class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
type="text" type="text"
placeholder={$i18n.t('Enter stop sequence')} placeholder={$i18n.t('Enter stop sequence')}
bind:value={options.stop} bind:value={options.stop}
......
src/lib/components/chat/Settings/Audio.svelte
View file @ 3f4eb6ca
...@@ -147,7 +147,7 @@ ...@@ -147,7 +147,7 @@
dispatch('save'); dispatch('save');
}} }}
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[22rem]"> <div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[25rem]">
<div> <div>
<div class=" mb-1 text-sm font-medium">{$i18n.t('STT Settings')}</div> <div class=" mb-1 text-sm font-medium">{$i18n.t('STT Settings')}</div>
...@@ -345,7 +345,7 @@ ...@@ -345,7 +345,7 @@
{/if} {/if}
</div> </div>
<div class="flex justify-end pt-3 text-sm font-medium"> <div class="flex justify-end text-sm font-medium">
<button <button
class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg" class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
type="submit" type="submit"
......
src/lib/components/chat/Settings/Connections.svelte
View file @ 3f4eb6ca
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
dispatch('save'); dispatch('save');
}} }}
> >
<div class=" pr-1.5 overflow-y-scroll max-h-[22rem] space-y-3"> <div class=" pr-1.5 overflow-y-scroll max-h-[25rem] space-y-3">
<div class=" space-y-3"> <div class=" space-y-3">
<div class="mt-2 space-y-2 pr-1.5"> <div class="mt-2 space-y-2 pr-1.5">
<div class="flex justify-between items-center text-sm"> <div class="flex justify-between items-center text-sm">
......
src/lib/components/chat/Settings/General.svelte
View file @ 3f4eb6ca
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
</script> </script>
<div class="flex flex-col h-full justify-between text-sm"> <div class="flex flex-col h-full justify-between text-sm">
<div class=" pr-1.5 overflow-y-scroll max-h-[22rem]"> <div class=" pr-1.5 overflow-y-scroll max-h-[25rem]">
<div class=""> <div class="">
<div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Settings')}</div> <div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Settings')}</div>
...@@ -253,7 +253,7 @@ ...@@ -253,7 +253,7 @@
{#if keepAlive !== null} {#if keepAlive !== null}
<div class="flex mt-1 space-x-2"> <div class="flex mt-1 space-x-2">
<input <input
class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
type="text" type="text"
placeholder={$i18n.t("e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.")} placeholder={$i18n.t("e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.")}
bind:value={keepAlive} bind:value={keepAlive}
......
src/lib/components/chat/Settings/Interface.svelte
View file @ 3f4eb6ca
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
// Interface // Interface
let promptSuggestions = []; let promptSuggestions = [];
let showUsername = false; let showUsername = false;
let chatBubble = true;
let chatDirection: 'LTR' | 'RTL' = 'LTR'; let chatDirection: 'LTR' | 'RTL' = 'LTR';
const toggleSplitLargeChunks = async () => { const toggleSplitLargeChunks = async () => {
...@@ -34,6 +35,11 @@ ...@@ -34,6 +35,11 @@
saveSettings({ fullScreenMode: fullScreenMode }); saveSettings({ fullScreenMode: fullScreenMode });
}; };
const toggleChatBubble = async () => {
chatBubble = !chatBubble;
saveSettings({ chatBubble: chatBubble });
};
const toggleShowUsername = async () => { const toggleShowUsername = async () => {
showUsername = !showUsername; showUsername = !showUsername;
saveSettings({ showUsername: showUsername }); saveSettings({ showUsername: showUsername });
...@@ -111,6 +117,7 @@ ...@@ -111,6 +117,7 @@
responseAutoCopy = settings.responseAutoCopy ?? false; responseAutoCopy = settings.responseAutoCopy ?? false;
showUsername = settings.showUsername ?? false; showUsername = settings.showUsername ?? false;
chatBubble = settings.chatBubble ?? true;
fullScreenMode = settings.fullScreenMode ?? false; fullScreenMode = settings.fullScreenMode ?? false;
splitLargeChunks = settings.splitLargeChunks ?? false; splitLargeChunks = settings.splitLargeChunks ?? false;
chatDirection = settings.chatDirection ?? 'LTR'; chatDirection = settings.chatDirection ?? 'LTR';
...@@ -124,10 +131,30 @@ ...@@ -124,10 +131,30 @@
dispatch('save'); dispatch('save');
}} }}
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[22rem]"> <div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[25rem]">
<div> <div>
<div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Add-ons')}</div> <div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Add-ons')}</div>
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs font-medium">{$i18n.t('Chat Bubble UI')}</div>
<button
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
toggleChatBubble();
}}
type="button"
>
{#if chatBubble === true}
<span class="ml-2 self-center">{$i18n.t('On')}</span>
{:else}
<span class="ml-2 self-center">{$i18n.t('Off')}</span>
{/if}
</button>
</div>
</div>
<div> <div>
<div class=" py-0.5 flex w-full justify-between"> <div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs font-medium">{$i18n.t('Title Auto-Generation')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Title Auto-Generation')}</div>
...@@ -308,7 +335,7 @@ ...@@ -308,7 +335,7 @@
{#if $user.role === 'admin'} {#if $user.role === 'admin'}
<hr class=" dark:border-gray-700" /> <hr class=" dark:border-gray-700" />
<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80"> <div class=" space-y-3 pr-1.5">
<div class="flex w-full justify-between mb-2"> <div class="flex w-full justify-between mb-2">
<div class=" self-center text-sm font-semibold"> <div class=" self-center text-sm font-semibold">
{$i18n.t('Default Prompt Suggestions')} {$i18n.t('Default Prompt Suggestions')}
......
src/lib/components/common/Modal.svelte
View file @ 3f4eb6ca
...@@ -16,9 +16,9 @@ ...@@ -16,9 +16,9 @@
} else if (size === 'sm') { } else if (size === 'sm') {
return 'w-[30rem]'; return 'w-[30rem]';
} else if (size === 'md') { } else if (size === 'md') {
return 'w-[44rem]';
} else {
return 'w-[48rem]'; return 'w-[48rem]';
} else {
return 'w-[50rem]';
} }
}; };
......
src/lib/components/common/Switch.svelte 0 → 100644
View file @ 3f4eb6ca
This diff is collapsed.
src/lib/components/icons/MenuLines.svelte 0 → 100644
View file @ 3f4eb6ca
This diff is collapsed.
src/lib/components/icons/User.svelte 0 → 100644
View file @ 3f4eb6ca
This diff is collapsed.
src/lib/components/layout/Navbar.svelte
View file @ 3f4eb6ca
This diff is collapsed.
src/lib/components/layout/Sidebar.svelte
View file @ 3f4eb6ca
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment