OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-04 03:37:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-05-06 15:04:37 -07:00
parent 4c6567c46f
commit e70cdf118b
2 changed files with 454 additions and 475 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/components/chat/Messages/CitationsModal.svelte
View File

@ -23,7 +23,7 @@
<Modal size="lg" bind:show>
<div>
<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4">
<div class=" text-lg font-medium self-center capitalize">
{$i18n.t('Citation')}
</div>
@ -45,12 +45,10 @@
</svg>
</button>
</div>
<hr class=" dark:border-gray-850" />
<div class="flex flex-col w-full px-5 py-4 dark:text-gray-200 overflow-y-scroll max-h-[22rem]">
{#each mergedDocuments as document}
{#each mergedDocuments as document, documentIdx}
<div class="flex flex-col w-full">
<div class="text-lg font-medium dark:text-gray-300">
<div class=" font-medium dark:text-gray-300">
{$i18n.t('Source')}
</div>
<div class="text-sm dark:text-gray-400">
@ -58,14 +56,17 @@
</div>
</div>
<div class="flex flex-col w-full">
<div class="text-lg font-medium dark:text-gray-300">
<div class=" font-medium dark:text-gray-300">
{$i18n.t('Content')}
</div>
<pre class="text-sm dark:text-gray-400">
{document.document}
</pre>
</div>
{#if documentIdx !== mergedDocuments.length - 1}
<hr class=" dark:border-gray-850" />
{/if}
{/each}
</div>
</div>

98
src/lib/components/chat/Messages/ResponseMessage.svelte
View File

@ -387,52 +387,6 @@
{/each}
</div>
{/if}
{#if flattenedCitations}
<div class="my-2.5 w-full flex overflow-x-auto gap-2 flex-wrap">
{#each [...Object.keys(flattenedCitations)] as source}
<div>
<CitationsModal
bind:show={showCitations[source]}
citation={flattenedCitations[source]}
/>
<button
class="h-16 w-[15rem] flex items-center space-x-3 px-2.5 dark:bg-gray-600 rounded-xl border border-gray-200 dark:border-none text-left"
type="button"
on:click={() => {
showCitations[source] = !showCitations[source];
}}
>
<div class="p-2.5 bg-red-400 text-white rounded-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-6 h-6"
>
<path
fill-rule="evenodd"
d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
clip-rule="evenodd"
/>
<path
d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
/>
</svg>
</div>
<div class="flex flex-col justify-center -space-y-0.5">
<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1">
{source}
</div>
<div class=" text-gray-500 text-sm">{$i18n.t('Document')}</div>
</div>
</button>
</div>
{/each}
</div>
{/if}
<div
class="prose chat-{message.role} w-full max-w-full dark:prose-invert prose-headings:my-0 prose-p:m-0 prose-p:-mb-6 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-img:my-0 prose-ul:-my-4 prose-ol:-my-4 prose-li:-my-3 prose-ul:-mb-6 prose-ol:-mb-8 prose-ol:p-0 prose-li:-mb-4 whitespace-pre-line"
>
@ -513,6 +467,38 @@
{/each}
<!-- {@html marked(message.content.replaceAll('\\', '\\\\'))} -->
{/if}
</div>
{/if}
</div>
</div>
{#if flattenedCitations}
<hr class=" dark:border-gray-800" />
<div class="my-2.5 w-full flex overflow-x-auto gap-2 flex-wrap">
{#each [...Object.keys(flattenedCitations)] as source, idx}
<CitationsModal
bind:show={showCitations[source]}
citation={flattenedCitations[source]}
/>
<div class="flex gap-1 text-xs font-semibold">
<div>
[{idx + 1}]
</div>
<button
class="dark:text-gray-500 underline"
on:click={() => {
showCitations[source] = !showCitations[source];
}}
>
{source}
</button>
</div>
{/each}
</div>
{/if}
{#if message.done}
<div
@ -625,8 +611,8 @@
<button
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded {message?.annotation
?.rating === 1
: 'invisible group-hover:visible'} p-1 rounded {message?.annotation?.rating ===
1
? 'bg-gray-100 dark:bg-gray-800'
: ''} dark:hover:text-white hover:text-black transition"
on:click={() => {
@ -634,9 +620,7 @@
showRateComment = true;
window.setTimeout(() => {
document
.getElementById(`message-feedback-${message.id}`)
?.scrollIntoView();
document.getElementById(`message-feedback-${message.id}`)?.scrollIntoView();
}, 0);
}}
>
@ -661,17 +645,15 @@
<button
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1 rounded {message?.annotation
?.rating === -1
: 'invisible group-hover:visible'} p-1 rounded {message?.annotation?.rating ===
-1
? 'bg-gray-100 dark:bg-gray-800'
: ''} dark:hover:text-white hover:text-black transition"
on:click={() => {
rateMessage(message.id, -1);
showRateComment = true;
window.setTimeout(() => {
document
.getElementById(`message-feedback-${message.id}`)
?.scrollIntoView();
document.getElementById(`message-feedback-${message.id}`)?.scrollIntoView();
}, 0);
}}
>
@ -935,10 +917,6 @@
}}
/>
{/if}
</div>
{/if}
</div>
</div>
{/if}
</div>
</div>