Spaces:
Running
Running
File size: 4,003 Bytes
c2299c0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 |
<script lang="ts">
import { getContext, onMount } from 'svelte';
import { formatFileSize, getLineCount } from '$lib/utils';
import { WEBUI_API_BASE_URL } from '$lib/constants';
const i18n = getContext('i18n');
import Modal from './Modal.svelte';
import XMark from '../icons/XMark.svelte';
import Info from '../icons/Info.svelte';
import Switch from './Switch.svelte';
import Tooltip from './Tooltip.svelte';
export let item;
export let show = false;
export let edit = false;
let enableFullContent = false;
let isPdf = false;
let isAudio = false;
$: isPDF =
item?.meta?.content_type === 'application/pdf' ||
(item?.name && item?.name.toLowerCase().endsWith('.pdf'));
$: isAudio =
item?.meta?.content_type.startsWith('audio/') ||
(item?.name && item?.name.toLowerCase().endsWith('.mp3')) ||
(item?.name && item?.name.toLowerCase().endsWith('.wav')) ||
(item?.name && item?.name.toLowerCase().endsWith('.ogg')) ||
(item?.name && item?.name.toLowerCase().endsWith('.m4a')) ||
(item?.name && item?.name.toLowerCase().endsWith('.webm'));
onMount(() => {
console.log(item);
if (item?.context === 'full') {
enableFullContent = true;
}
});
</script>
<Modal bind:show size="lg">
<div class="font-primary px-6 py-5 w-full flex flex-col justify-center dark:text-gray-400">
<div class=" pb-2">
<div class="flex items-start justify-between">
<div>
<div class=" font-medium text-lg dark:text-gray-100">
<a
href="#"
class="hover:underline line-clamp-1"
on:click|preventDefault={() => {
if (!isPDF && item.url) {
window.open(
item.type === 'file' ? `${item.url}/content` : `${item.url}`,
'_blank'
);
}
}}
>
{item?.name ?? 'File'}
</a>
</div>
</div>
<div>
<button
on:click={() => {
show = false;
}}
>
<XMark />
</button>
</div>
</div>
<div>
<div class="flex flex-col items-center md:flex-row gap-1 justify-between w-full">
<div class=" flex flex-wrap text-sm gap-1 text-gray-500">
{#if item.size}
<div class="capitalize shrink-0">{formatFileSize(item.size)}</div>
•
{/if}
{#if item?.file?.data?.content}
<div class="capitalize shrink-0">
{getLineCount(item?.file?.data?.content ?? '')} extracted lines
</div>
<div class="flex items-center gap-1 shrink-0">
<Info />
Formatting may be inconsistent from source.
</div>
{/if}
</div>
{#if edit}
<div>
<Tooltip
content={enableFullContent
? $i18n.t(
'Inject the entire content as context for comprehensive processing, this is recommended for complex queries.'
)
: $i18n.t(
'Default to segmented retrieval for focused and relevant content extraction, this is recommended for most cases.'
)}
>
<div class="flex items-center gap-1.5 text-xs">
{#if enableFullContent}
Using Entire Document
{:else}
Using Focused Retrieval
{/if}
<Switch
bind:state={enableFullContent}
on:change={(e) => {
item.context = e.detail ? 'full' : undefined;
}}
/>
</div>
</Tooltip>
</div>
{/if}
</div>
</div>
</div>
<div class="max-h-[75vh] overflow-auto">
{#if isPDF}
<iframe
title={item?.name}
src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
class="w-full h-[70vh] border-0 rounded-lg mt-4"
/>
{:else}
{#if isAudio}
<audio
src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
class="w-full border-0 rounded-lg mb-2"
controls
playsinline
/>
{/if}
<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
{item?.file?.data?.content ?? 'No content'}
</div>
{/if}
</div>
</div>
</Modal>
|