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

Browse source
This commit is contained in:
Timothy J. Baek 2023-11-07 23:23:27 -08:00
parent 1b35af1c62
commit 8386b286e2
1 changed files with 193 additions and 183 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
src/routes/+page.svelte
View file

@ -857,7 +857,7 @@
</div> </div>
</div> </div>
<div class=" h-full mb-48 w-full flex flex-col"> <div class=" h-full mt-10 mb-48 w-full flex flex-col">
{#if messages.length == 0} {#if messages.length == 0}
<div class="m-auto text-center max-w-md pb-16"> <div class="m-auto text-center max-w-md pb-16">
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
@ -873,22 +873,27 @@
</div> </div>
{:else} {:else}
{#each messages as message, messageIdx} {#each messages as message, messageIdx}
<div class=" w-full {message.role == 'user' ? '' : ' bg-gray-100 dark:bg-gray-700'}"> <div class=" w-full">
<div class="flex justify-between p-5 py-10 max-w-3xl mx-auto rounded-lg group"> <div class="flex justify-between px-5 mb-4 max-w-3xl mx-auto rounded-lg group">
<div class="space-x-7 flex w-full"> <div class=" flex w-full">
<div class=""> <div class=" mr-4">
<img <img
src="{message.role == 'user' src="{message.role == 'user'
? settings.gravatarUrl ? settings.gravatarUrl
? settings.gravatarUrl ? settings.gravatarUrl
: '/user' : '/user'
: '/favicon'}.png" : '/favicon'}.png"
class=" max-w-[32px] object-cover rounded-full" class=" max-w-[28px] object-cover rounded-full"
/> />
</div> </div>
{#if message.role != 'user' && message.content == ''} <div class="w-full">
<div class="w-full pr-28"> <div class=" self-center font-bold mb-0.5">
{message.role === 'user' ? 'You' : 'Ollama'}
</div>
{#if message.role !== 'user' && message.content === ''}
<div class="w-full mt-3">
<div class="animate-pulse flex w-full"> <div class="animate-pulse flex w-full">
<div class="space-y-2 w-full"> <div class="space-y-2 w-full">
<div class="h-2 bg-gray-200 dark:bg-gray-600 rounded mr-14" /> <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded mr-14" />
@ -915,7 +920,7 @@
> >
{#if message.role == 'user'} {#if message.role == 'user'}
{#if message?.edit === true} {#if message?.edit === true}
<div> <div class=" w-full">
<textarea <textarea
class=" bg-transparent outline-none w-full resize-none" class=" bg-transparent outline-none w-full resize-none"
bind:value={message.editedContent} bind:value={message.editedContent}
@ -950,15 +955,43 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="w-full">
{message.content} {message.content}
<div class=" flex justify-start space-x-1">
<button
class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-900 transition"
on:click={() => {
editMessage(messageIdx);
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<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>
</button>
</div>
</div>
{/if} {/if}
{:else} {:else}
<div class="w-full">
{@html marked(message.content.replace('\\\\', '\\\\\\'))} {@html marked(message.content.replace('\\\\', '\\\\\\'))}
{#if message.done} {#if message.done}
<div class=" flex justify-start space-x-1"> <div class=" flex justify-start space-x-1 -mt-2">
<button <button
class="p-1 rounded dark:hover:bg-gray-800 transition" class="{messageIdx + 1 === messages.length
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
on:click={() => { on:click={() => {
copyToClipboard(message.content); copyToClipboard(message.content);
}} }}
@ -980,9 +1013,9 @@
</button> </button>
<button <button
class="p-1 rounded dark:hover:bg-gray-800 {message.rating === 1 class="{messageIdx + 1 === messages.length
? ' bg-gray-200 dark:bg-gray-800' ? 'visible'
: ''} transition" : 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
on:click={() => { on:click={() => {
rateMessage(messageIdx, 1); rateMessage(messageIdx, 1);
}} }}
@ -1002,9 +1035,9 @@
> >
</button> </button>
<button <button
class="p-1 rounded dark:hover:bg-gray-800 {message.rating === -1 class="{messageIdx + 1 === messages.length
? 'bg-gray-200 dark:bg-gray-800' ? 'visible'
: ''} transition" : 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
on:click={() => { on:click={() => {
rateMessage(messageIdx, -1); rateMessage(messageIdx, -1);
}} }}
@ -1026,7 +1059,9 @@
{#if messageIdx + 1 === messages.length} {#if messageIdx + 1 === messages.length}
<button <button
class="p-1 rounded dark:hover:bg-gray-800 transition" class="{messageIdx + 1 === messages.length
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded dark:hover:bg-gray-800 transition"
on:click={regenerateResponse} on:click={regenerateResponse}
> >
<svg <svg
@ -1047,38 +1082,13 @@
{/if} {/if}
</div> </div>
{/if} {/if}
</div>
{/if} {/if}
</div> </div>
{/if} {/if}
</div>
<!-- {} --> <!-- {} -->
</div> </div>
<div>
{#if message.role == 'user'}
{#if message?.edit !== true}
<button
class="invisible group-hover:visible p-1 rounded dark:hover:bg-gray-700 transition"
on:click={() => {
editMessage(messageIdx);
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<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>
</button>
{/if}
{/if}
</div>
</div> </div>
</div> </div>
{/each} {/each}