ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-12 04:15:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac: styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-09-12 13:49:53 +04:00
parent fbf9b3f1bb
commit 042191372a
1 changed files with 43 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/lib/components/chat/Messages/Citations.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import CitationsModal from '$lib/components/chat/Messages/Citations/CitationsModal.svelte'; import CitationModal from './Citations/CitationModal.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -12,15 +12,17 @@
let showRelevance = true; let showRelevance = true;
let citationModal = null; let citationModal = null;
let showCitations = false;
let showCitationModal = false; let showCitationModal = false;
let selectedCitation: any = null; let selectedCitation: any = null;
let isCollapsibleOpen = false;
export const showSourceModal = (sourceIdx) => { export const showSourceModal = (sourceIdx) => {
if (citations[sourceIdx]) { if (citations[sourceIdx]) {
console.log('Showing citation modal for:', citations[sourceIdx]); console.log('Showing citation modal for:', citations[sourceIdx]);
citationModal?.showCitation(citations[sourceIdx]); selectedCitation = citations[sourceIdx];
// showCitationModal = true; showCitationModal = true;
} }
}; };
@ -94,13 +96,19 @@
showRelevance = calculateShowRelevance(citations); showRelevance = calculateShowRelevance(citations);
showPercentage = shouldShowPercentage(citations); showPercentage = shouldShowPercentage(citations);
} }
const decodeString = (str: string) => {
try {
return decodeURIComponent(str);
} catch (e) {
return str;
}
};
</script> </script>
<CitationsModal <CitationModal
bind:this={citationModal}
bind:show={showCitationModal} bind:show={showCitationModal}
{id} citation={selectedCitation}
{citations}
{showPercentage} {showPercentage}
{showRelevance} {showRelevance}
/> />
@ -111,7 +119,7 @@
<button <button
class="text-xs font-medium text-gray-600 dark:text-gray-300 px-3.5 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition flex items-center gap-1 border border-gray-50 dark:border-gray-850" class="text-xs font-medium text-gray-600 dark:text-gray-300 px-3.5 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition flex items-center gap-1 border border-gray-50 dark:border-gray-850"
on:click={() => { on:click={() => {
showCitationModal = true; showCitations = !showCitations;
}} }}
> >
{#if urlCitations.length > 0} {#if urlCitations.length > 0}
@ -137,3 +145,29 @@
</button> </button>
</div> </div>
{/if} {/if}
{#if showCitations}
<div class="py-1.5">
<div class="text-xs gap-2 flex flex-col">
{#each citations as citation, idx}
<button
id={`source-${id}-${idx + 1}`}
class="no-toggle outline-hidden flex dark:text-gray-300 bg-white dark:bg-gray-900 text-gray-600 rounded-xl gap-1.5 items-center"
on:click={() => {
showCitationModal = true;
selectedCitation = citation;
}}
>
<div class=" font-medium bg-gray-50 rounded-md px-1.5">
{idx + 1}
</div>
<div
class="flex-1 truncate hover:text-black dark:text-white/60 dark:hover:text-white transition text-left"
>
{decodeString(citation.source.name)}
</div>
</button>
{/each}
</div>
</div>
{/if}