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

refac: styling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-02-06 01:28:33 -08:00
parent 8ca21ea838
commit 14398ab628
1 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/lib/components/chat/Messages/Citations.svelte
View File

@ -97,7 +97,7 @@
{#if citations.length > 0} {#if citations.length > 0}
<div class=" py-0.5 -mx-0.5 w-full flex gap-1 items-center flex-wrap"> <div class=" py-0.5 -mx-0.5 w-full flex gap-1 items-center flex-wrap">
{#if citations.length <= 3} {#if citations.length <= 3}
<div class="flex text-xs font-medium"> <div class="flex text-xs font-medium flex-wrap">
{#each citations as citation, idx} {#each citations as citation, idx}
<button <button
id={`source-${citation.source.name}`} id={`source-${citation.source.name}`}
@ -113,7 +113,7 @@
</div> </div>
{/if} {/if}
<div <div
class="flex-1 mx-1 line-clamp-1 text-black/60 hover:text-black dark:text-white/60 dark:hover:text-white transition" class="flex-1 mx-1 truncate text-black/60 hover:text-black dark:text-white/60 dark:hover:text-white transition"
> >
{citation.source.name} {citation.source.name}
</div> </div>
@ -121,13 +121,21 @@
{/each} {/each}
</div> </div>
{:else} {:else}
<Collapsible bind:open={isCollapsibleOpen} className="w-full"> <Collapsible
bind:open={isCollapsibleOpen}
className="w-full max-w-full "
buttonClassName="w-fit max-w-full"
>
<div <div
class="flex items-center gap-2 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition cursor-pointer" class="flex w-full overflow-auto items-center gap-2 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition cursor-pointer"
> >
<div class="flex-grow flex items-center gap-1 overflow-hidden"> <div
<span class="whitespace-nowrap hidden sm:inline">{$i18n.t('References from')}</span> class="flex-1 flex items-center gap-1 overflow-auto scrollbar-none w-full max-w-full"
<div class="flex items-center"> >
<span class="whitespace-nowrap hidden sm:inline flex-shrink-0"
>{$i18n.t('References from')}</span
>
<div class="flex items-center overflow-auto scrollbar-none w-full max-w-full flex-1">
<div class="flex text-xs font-medium items-center"> <div class="flex text-xs font-medium items-center">
{#each citations.slice(0, 2) as citation, idx} {#each citations.slice(0, 2) as citation, idx}
<button <button
@ -145,14 +153,14 @@
{idx + 1} {idx + 1}
</div> </div>
{/if} {/if}
<div class="flex-1 mx-1 line-clamp-1 truncate"> <div class="flex-1 mx-1 truncate">
{citation.source.name} {citation.source.name}
</div> </div>
</button> </button>
{/each} {/each}
</div> </div>
</div> </div>
<div class="flex items-center gap-1 whitespace-nowrap"> <div class="flex items-center gap-1 whitespace-nowrap flex-shrink-0">
<span class="hidden sm:inline">{$i18n.t('and')}</span> <span class="hidden sm:inline">{$i18n.t('and')}</span>
{citations.length - 2} {citations.length - 2}
<span>{$i18n.t('more')}</span> <span>{$i18n.t('more')}</span>
@ -167,7 +175,7 @@
</div> </div>
</div> </div>
<div slot="content"> <div slot="content">
<div class="flex text-xs font-medium"> <div class="flex text-xs font-medium flex-wrap">
{#each citations as citation, idx} {#each citations as citation, idx}
<button <button
class="no-toggle outline-none flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96" class="no-toggle outline-none flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
@ -181,7 +189,7 @@
{idx + 1} {idx + 1}
</div> </div>
{/if} {/if}
<div class="flex-1 mx-1 line-clamp-1 truncate"> <div class="flex-1 mx-1 truncate">
{citation.source.name} {citation.source.name}
</div> </div>
</button> </button>