tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

feat: sidebar styling

Browse source
This commit is contained in:
Timothy J. Baek 2024-02-15 14:43:10 -08:00
parent 7e2508e426
commit 9c082f1ba0
6 changed files with 97 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -371,7 +371,7 @@
</div> </div>
{/if} {/if}
<div class="fixed bottom-0 w-full"> <div class="w-full pt-2 md:pt-0">
<div class="px-2.5 pt-2.5 -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center"> <div class="px-2.5 pt-2.5 -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
<div class="flex flex-col max-w-3xl w-full"> <div class="flex flex-col max-w-3xl w-full">
<div> <div>

4
src/lib/components/chat/Messages/ResponseMessage.svelte
View file

@ -270,9 +270,7 @@
{#if message.model in modelfiles} {#if message.model in modelfiles}
{modelfiles[message.model]?.title} {modelfiles[message.model]?.title}
{:else} {:else}
Ollama <span class=" text-gray-500 text-sm font-medium" {message.model ? ` ${message.model}` : ''}
>{message.model ? ` ${message.model}` : ''}</span
>
{/if} {/if}
{#if message.timestamp} {#if message.timestamp}

2
src/lib/components/layout/Navbar.svelte
View file

@ -69,7 +69,7 @@
<ShareChatModal bind:show={showShareChatModal} {downloadChat} {shareChat} /> <ShareChatModal bind:show={showShareChatModal} {downloadChat} {shareChat} />
<nav <nav
id="nav" id="nav"
class=" fixed py-2.5 top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-900/90 dark:text-gray-200 backdrop-blur-xl w-screen z-30" class=" sticky py-2.5 top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-900/90 dark:text-gray-200 backdrop-blur-xl z-30"
> >
<div <div
class=" flex {$settings?.fullScreenMode ?? null class=" flex {$settings?.fullScreenMode ?? null

2
src/lib/components/layout/Sidebar.svelte
View file

@ -89,7 +89,7 @@
bind:this={navElement} bind:this={navElement}
class="h-screen {show class="h-screen {show
? '' ? ''
: '-translate-x-[260px]'} w-[260px] fixed top-0 left-0 z-40 transition bg-black text-gray-200 shadow-2xl text-sm : '-translate-x-[260px] w-[0px]'} w-[260px] bg-black text-gray-200 shadow-2xl text-sm transition z-40 fixed top-0 left-0 lg:relative
" "
> >
<div class="py-2.5 my-auto flex flex-col justify-between h-screen"> <div class="py-2.5 my-auto flex flex-col justify-between h-screen">

14
src/routes/(app)/+page.svelte
View file

@ -440,7 +440,7 @@
selectedModelfile.title.charAt(0).toUpperCase() + selectedModelfile.title.charAt(0).toUpperCase() +
selectedModelfile.title.slice(1) selectedModelfile.title.slice(1)
}` }`
: `Ollama - ${model}`, : `${model}`,
{ {
body: responseMessage.content, body: responseMessage.content,
icon: selectedModelfile?.imageUrl ?? '/favicon.png' icon: selectedModelfile?.imageUrl ?? '/favicon.png'
@ -789,18 +789,19 @@
}} }}
/> />
<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} {tags} {addTag} {deleteTag} /> <div class="min-h-screen w-full flex flex-col">
<div class="min-h-screen w-full flex justify-center"> <Navbar {title} shareEnabled={messages.length > 0} {initNewChat} {tags} {addTag} {deleteTag} />
<div class=" py-2.5 flex flex-col justify-between w-full"> <div class="flex flex-col justify-center h-full">
<div class=" pb-2.5 flex flex-1 flex-col justify-between w-full overflow-hidden">
<div <div
class="{$settings?.fullScreenMode ?? null class="{$settings?.fullScreenMode ?? null
? 'max-w-full' ? 'max-w-full'
: 'max-w-2xl md:px-0'} mx-auto w-full px-4 mt-10" : 'max-w-2xl md:px-0'} mx-auto w-full px-4"
> >
<ModelSelector bind:selectedModels disabled={messages.length > 0} /> <ModelSelector bind:selectedModels disabled={messages.length > 0} />
</div> </div>
<div class=" h-full mt-10 mb-32 w-full flex flex-col"> <div class=" h-full mt-10 w-full flex flex-col">
<Messages <Messages
chatId={$chatId} chatId={$chatId}
{selectedModels} {selectedModels}
@ -826,4 +827,5 @@
{submitPrompt} {submitPrompt}
{stopResponse} {stopResponse}
/> />
</div>
</div> </div>

13
src/routes/(app)/c/[id]/+page.svelte
View file

@ -454,7 +454,7 @@
selectedModelfile.title.charAt(0).toUpperCase() + selectedModelfile.title.charAt(0).toUpperCase() +
selectedModelfile.title.slice(1) selectedModelfile.title.slice(1)
}` }`
: `Ollama - ${model}`, : `${model}`,
{ {
body: responseMessage.content, body: responseMessage.content,
icon: selectedModelfile?.imageUrl ?? '/favicon.png' icon: selectedModelfile?.imageUrl ?? '/favicon.png'
@ -804,6 +804,7 @@
/> />
{#if loaded} {#if loaded}
<div class="min-h-screen w-full flex flex-col">
<Navbar <Navbar
{title} {title}
shareEnabled={messages.length > 0} shareEnabled={messages.length > 0}
@ -819,12 +820,12 @@
{addTag} {addTag}
{deleteTag} {deleteTag}
/> />
<div class="min-h-screen w-full flex justify-center"> <div class="justify-center">
<div class=" py-2.5 flex flex-col justify-between w-full"> <div class=" pb-2.5 flex flex-col justify-between w-full">
<div <div
class="{$settings?.fullScreenMode ?? null class="{$settings?.fullScreenMode ?? null
? 'max-w-full' ? 'max-w-full'
: 'max-w-2xl md:px-0'} mx-auto w-full px-4 mt-10" : 'max-w-2xl md:px-0'} mx-auto w-full px-4"
> >
<ModelSelector <ModelSelector
bind:selectedModels bind:selectedModels
@ -853,10 +854,12 @@
bind:files bind:files
bind:prompt bind:prompt
bind:autoScroll bind:autoScroll
suggestionPrompts={selectedModelfile?.suggestionPrompts ?? $config.default_prompt_suggestions} suggestionPrompts={selectedModelfile?.suggestionPrompts ??
$config.default_prompt_suggestions}
{messages} {messages}
{submitPrompt} {submitPrompt}
{stopResponse} {stopResponse}
/> />
</div> </div>
</div>
{/if} {/if}