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: ui update

Browse source
This commit is contained in:
Timothy J. Baek 2023-11-17 13:17:30 -08:00
parent 0ed1460844
commit 7f47718a69
4 changed files with 92 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,65 +45,41 @@
</script> </script>
<div <div
class=" fixed top-0 flex flex-row justify-center dark:bg-stone-100/5 dark:text-gray-200 backdrop-blur-xl w-full z-30" class=" fixed top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-800/90 dark:text-gray-200 backdrop-blur-xl w-full z-30"
> >
<div class="basis-full px-5"> <div class="basis-full">
<nav class="py-3" id="nav"> <nav class="py-3" id="nav">
<div class="flex flex-row justify-between"> <div class=" flex max-w-3xl mx-auto px-3">
<div class="pl-2"> <div class="flex w-full max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
<button <div class="pr-2">
class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition" <button
on:click={() => { class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
show = !show; on:click={() => {
}} createNewChat();
}}
>
<div class=" m-auto self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-5 h-5"
>
<path
d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
/>
<path
d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
/>
</svg>
</div>
</button>
</div>
<div
class=" flex-1 self-center font-medium overflow-hidden text-ellipsis whitespace-nowrap w-[80vw] pr-4"
> >
<div class=" m-auto self-center"> {title != '' ? title : 'Ollama Web UI'}
<svg </div>
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"
/>
</svg>
</div>
</button>
</div>
<div class=" self-center">
{title != '' ? title.split(' ').slice(0, 6).join(' ') : 'Ollama Web UI'}
</div>
<div class="pr-2">
<button
class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
on:click={() => {
createNewChat();
}}
>
<div class=" m-auto self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
/>
</svg>
</div>
</button>
</div> </div>
</div> </div>
</nav> </nav>
@ -114,35 +90,44 @@
bind:this={navElement} bind:this={navElement}
class="h-screen {show class="h-screen {show
? '' ? ''
: '-translate-x-72'} w-72 fixed top-0 left-0 z-40 transition bg-[#0a0a0a] text-gray-200 shadow-2xl text-sm : '-translate-x-[260px]'} w-[260px] fixed top-0 left-0 z-40 transition bg-[#0a0a0a] text-gray-200 shadow-2xl text-sm
" "
> >
<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">
<div class="px-2.5 flex justify-center space-x-2"> <div class="px-2.5 flex justify-center space-x-2">
<button <button
class=" cursor-pointer flex-grow rounded-md border border-gray-600 p-3 flex" class="flex-grow flex justify-between rounded-md px-3 py-1.5 my-2 hover:bg-gray-900 transition"
on:click={() => { on:click={() => {
createNewChat(); createNewChat();
}} }}
> >
<div class="self-center mr-2"> <div class="flex self-center">
<div class="self-center mr-3.5">
<img src="/ollama.png" class=" w-5 invert-[100%] rounded-full" />
</div>
<div class=" self-center font-medium text-sm">New Chat</div>
</div>
<div class="self-center">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
class="w-5 h-5" class="w-4 h-4"
> >
<path <path
d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
/>
<path
d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
/> />
</svg> </svg>
</div> </div>
<div class=" self-center">New Chat</div>
</button> </button>
<button <!-- <button
class=" cursor-pointer w-12 rounded-md border border-gray-600 flex" class=" cursor-pointer w-12 rounded-md flex"
on:click={() => { on:click={() => {
show = !show; show = !show;
}} }}
@ -166,16 +151,16 @@
/> />
</svg> </svg>
</div> </div>
</button> </button> -->
</div> </div>
<div class="pl-2.5 my-3 flex-1 flex flex-col space-y-1 overflow-y-auto"> <div class="pl-2.5 my-3 flex-1 flex flex-col space-y-1 overflow-y-auto">
{#each _chats as chat, i} {#each _chats as chat, i}
<div class=" w-full pr-2 relative"> <div class=" w-full pr-2 relative">
<button <button
class=" w-full flex justify-between rounded-md px-4 py-3 hover:bg-gray-800 {chat.id === class=" w-full flex justify-between rounded-md px-3 py-2 hover:bg-gray-900 {chat.id ===
selectedChatId selectedChatId
? 'bg-gray-800' ? 'bg-gray-900'
: ''} transition whitespace-nowrap text-ellipsis" : ''} transition whitespace-nowrap text-ellipsis"
on:click={() => { on:click={() => {
if (chat.id !== chatTitleEditIdx) { if (chat.id !== chatTitleEditIdx) {
@ -205,8 +190,8 @@
</div> </div>
<div <div
class=" text-left self-center overflow-hidden {chat.id === selectedChatId class=" text-left self-center overflow-hidden {chat.id === selectedChatId
? 'w-[150px]' ? 'w-[120px]'
: 'w-[200px]'} " : 'w-[180px]'} "
> >
{#if chatTitleEditIdx === chat.id} {#if chatTitleEditIdx === chat.id}
<input bind:value={chatTitle} class=" bg-transparent w-full" /> <input bind:value={chatTitle} class=" bg-transparent w-full" />
@ -218,7 +203,7 @@
</button> </button>
{#if chat.id === selectedChatId} {#if chat.id === selectedChatId}
<div class=" absolute right-[22px] top-[14px]"> <div class=" absolute right-[22px] top-[10px]">
{#if chatTitleEditIdx === chat.id} {#if chatTitleEditIdx === chat.id}
<div class="flex self-center space-x-1.5"> <div class="flex self-center space-x-1.5">
<button <button
@ -322,7 +307,7 @@
<div class="flex"> <div class="flex">
<input bind:this={importFileInputElement} bind:files={importFiles} type="file" hidden /> <input bind:this={importFileInputElement} bind:files={importFiles} type="file" hidden />
<button <button
class=" flex rounded-md p-3.5 w-full hover:bg-gray-800 transition" class=" flex rounded-md py-3 px-3.5 w-full hover:bg-gray-900 transition"
on:click={() => { on:click={() => {
importFileInputElement.click(); importFileInputElement.click();
// importChatHistory(); // importChatHistory();
@ -347,7 +332,7 @@
<div class=" self-center">Import</div> <div class=" self-center">Import</div>
</button> </button>
<button <button
class=" flex rounded-md p-3.5 w-full hover:bg-gray-800 transition" class=" flex rounded-md py-3 px-3.5 w-full hover:bg-gray-900 transition"
on:click={() => { on:click={() => {
exportChatHistory(); exportChatHistory();
}} }}
@ -372,7 +357,7 @@
</button> </button>
</div> </div>
<button <button
class=" flex rounded-md p-3.5 w-full hover:bg-gray-800 transition" class=" flex rounded-md py-3 px-3.5 w-full hover:bg-gray-900 transition"
on:click={() => { on:click={() => {
deleteChatHistory(); deleteChatHistory();
}} }}
@ -396,7 +381,7 @@
<div class=" self-center">Clear conversations</div> <div class=" self-center">Clear conversations</div>
</button> </button>
<button <button
class=" flex rounded-md p-3.5 w-full hover:bg-gray-800 transition" class=" flex rounded-md py-3 px-3.5 w-full hover:bg-gray-900 transition"
on:click={() => { on:click={() => {
openSettings(); openSettings();
}} }}
@ -427,4 +412,33 @@
</div> </div>
</div> </div>
</div> </div>
<div
class="fixed left-0 top-[50dvh] z-40 -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0"
>
<button
class=" group"
on:click={() => {
show = !show;
}}
><span class="" data-state="closed"
><div
class="flex h-[72px] w-8 items-center justify-center opacity-20 group-hover:opacity-100 transition"
>
<div class="flex h-6 w-6 flex-col items-center">
<div
class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[0.15rem] {show
? 'group-hover:rotate-[15deg]'
: 'group-hover:rotate-[-15deg]'}"
/>
<div
class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[-0.15rem] {show
? 'group-hover:rotate-[-15deg]'
: 'group-hover:rotate-[15deg]'}"
/>
</div>
</div>
</span>
</button>
</div>
</div> </div>

2
src/lib/constants.ts
View file

@ -8,7 +8,7 @@ export const API_BASE_URL =
: `http://localhost:11434/api` : `http://localhost:11434/api`
: PUBLIC_API_BASE_URL; : PUBLIC_API_BASE_URL;
export const WEB_UI_VERSION = 'v1.0.0-alpha.6'; export const WEB_UI_VERSION = 'v1.0.0-alpha.8';
// Source: https://kit.svelte.dev/docs/modules#$env-static-public // Source: https://kit.svelte.dev/docs/modules#$env-static-public
// This feature, akin to $env/static/private, exclusively incorporates environment variables // This feature, akin to $env/static/private, exclusively incorporates environment variables

47
src/routes/+page.svelte
View file

@ -1093,52 +1093,7 @@
<div class="min-h-screen w-full flex justify-center"> <div class="min-h-screen w-full flex justify-center">
<div class=" py-2.5 flex flex-col justify-between w-full"> <div class=" py-2.5 flex flex-col justify-between w-full">
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-14"> <div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">
<!-- <div class="flex justify-between my-2 text-sm">
<select
id="models"
class="outline-none bg-transparent text-lg font-semibold rounded-lg block w-full placeholder-gray-800"
bind:value={selectedModel}
disabled={messages.length != 0}
>
<option class=" text-gray-700" value="" selected>Select a model</option>
{#each models as model}
{#if model.name === 'hr'}
<hr />
{:else}
<option value={model.name} class="text-gray-700 text-lg">{model.name}</option>
{/if}
{/each}
</select>
<button
class=" self-center dark:hover:text-gray-300"
on:click={() => {
openSettings();
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
</button>
</div> -->
<div class="flex flex-col my-2"> <div class="flex flex-col my-2">
{#each selectedModels as selectedModel, selectedModelIdx} {#each selectedModels as selectedModel, selectedModelIdx}
<div class="flex"> <div class="flex">

2
tailwind.config.js
View file

@ -14,7 +14,7 @@ export default {
500: '#8e8ea0', 500: '#8e8ea0',
600: '#565869', 600: '#565869',
700: '#40414f', 700: '#40414f',
800: '#33353E', 800: '#343541',
900: '#202123', 900: '#202123',
950: '#050509' 950: '#050509'
} }