UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-02-22 21:32:32 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2024-11-10 19:47:55 -08:00
parent 3435de5af6
commit 655745ee0c
2 changed files with 41 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,9 +89,9 @@
/> />
{#if _citations.length > 0} {#if _citations.length > 0}
<div class="my-1 -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 gap-2 text-xs font-semibold"> <div class="flex text-xs font-medium">
{#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"
@ -114,69 +114,39 @@
{:else} {:else}
<Collapsible bind:open={isCollapsibleOpen} className="w-full"> <Collapsible bind:open={isCollapsibleOpen} className="w-full">
<div <div
class="flex items-center gap-1 text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 transition cursor-pointer" class="flex 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 class="flex-grow flex items-center gap-1 overflow-hidden">
<span class="whitespace-nowrap hidden sm:inline">{$i18n.t('References from')}</span> <span class="whitespace-nowrap hidden sm:inline">{$i18n.t('References from')}</span>
<div class="flex items-center"> <div class="flex items-center">
{#if _citations.length > 1 && _citations <div class="flex text-xs font-medium items-center">
.slice(0, 2)
.reduce((acc, citation) => acc + citation.source.name.length, 0) <= 50}
{#each _citations.slice(0, 2) as citation, idx} {#each _citations.slice(0, 2) as citation, idx}
<div class="flex items-center"> <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 flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96 text-xs font-semibold" on:click={() => {
on:click={() => { showCitationModal = true;
showCitationModal = true; selectedCitation = citation;
selectedCitation = citation; }}
}} on:pointerup={(e) => {
> e.stopPropagation();
{#if _citations.every((c) => c.distances !== undefined)} }}
<div class="bg-white dark:bg-gray-700 rounded-full size-4"> >
{idx + 1} {#if _citations.every((c) => c.distances !== undefined)}
</div> <div class="bg-gray-50 dark:bg-gray-800 rounded-full size-4">
{/if} {idx + 1}
<div class="flex-1 mx-2 line-clamp-1">
{citation.source.name}
</div> </div>
</button>
{#if idx === 0}<span class="mr-1">,</span>
{/if} {/if}
</div> <div class="flex-1 mx-1 line-clamp-1 truncate">
{citation.source.name}
</div>
</button>
{/each} {/each}
{:else} </div>
{#each _citations.slice(0, 1) as citation, idx}
<div class="flex items-center">
<button
class="no-toggle flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96 text-xs font-semibold"
on:click={() => {
showCitationModal = true;
selectedCitation = citation;
}}
>
{#if _citations.every((c) => c.distances !== undefined)}
<div class="bg-white dark:bg-gray-700 rounded-full size-4">
{idx + 1}
</div>
{/if}
<div class="flex-1 mx-2 line-clamp-1">
{citation.source.name}
</div>
</button>
</div>
{/each}
{/if}
</div> </div>
<div class="flex items-center gap-1 whitespace-nowrap"> <div class="flex items-center gap-1 whitespace-nowrap">
<span class="hidden sm:inline">{$i18n.t('and')}</span> <span class="hidden sm:inline">{$i18n.t('and')}</span>
<span class="text-gray-600 dark:text-gray-400"> <span class="text-gray-600 dark:text-gray-400">
{_citations.length - {_citations.length - 2}
(_citations.length > 1 &&
_citations
.slice(0, 2)
.reduce((acc, citation) => acc + citation.source.name.length, 0) <= 50
? 2
: 1)}
</span> </span>
<span>{$i18n.t('more')}</span> <span>{$i18n.t('more')}</span>
</div> </div>
@ -189,27 +159,25 @@
{/if} {/if}
</div> </div>
</div> </div>
<div slot="content" class="mt-2"> <div slot="content">
<div class="flex flex-wrap gap-2"> <div class="flex text-xs font-medium">
{#each _citations as citation, idx} {#each _citations as citation, idx}
<div class="flex gap-1 text-xs font-semibold"> <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 flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96" on:click={() => {
on:click={() => { showCitationModal = true;
showCitationModal = true; selectedCitation = citation;
selectedCitation = citation; }}
}} >
> {#if _citations.every((c) => c.distances !== undefined)}
{#if _citations.every((c) => c.distances !== undefined)} <div class="bg-gray-50 dark:bg-gray-800 rounded-full size-4">
<div class="bg-white dark:bg-gray-700 rounded-full size-4"> {idx + 1}
{idx + 1}
</div>
{/if}
<div class="flex-1 mx-2 line-clamp-1">
{citation.source.name}
</div> </div>
</button> {/if}
</div> <div class="flex-1 mx-1 line-clamp-1 truncate">
{citation.source.name}
</div>
</button>
{/each} {/each}
</div> </div>
</div> </div>

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

@ -520,7 +520,7 @@
{@const status = ( {@const status = (
message?.statusHistory ?? [...(message?.status ? [message?.status] : [])] message?.statusHistory ?? [...(message?.status ? [message?.status] : [])]
).at(-1)} ).at(-1)}
<div class="status-description flex items-center gap-2 pt-0.5 pb-1"> <div class="status-description flex items-center gap-2 py-0.5">
{#if status?.done === false} {#if status?.done === false}
<div class=""> <div class="">
<Spinner className="size-4" /> <Spinner className="size-4" />