mirror of
https://github.com/open-webui/open-webui
synced 2025-03-06 12:32:58 +00:00
enh: files chat control
This commit is contained in:
Timothy J. Baek
parent
a33b0abbe0
commit
4eecdbadd3
@ -98,6 +98,8 @@
|
||||
|
||||
let title = '';
|
||||
let prompt = '';
|
||||
|
||||
let chatFiles = [];
|
||||
let files = [];
|
||||
let messages = [];
|
||||
let history = {
|
||||
@ -333,6 +335,7 @@
|
||||
}
|
||||
|
||||
params = chatContent?.params ?? {};
|
||||
chatFiles = chatContent?.files ?? {};
|
||||
|
||||
autoScroll = true;
|
||||
await tick();
|
||||
@ -408,7 +411,8 @@
|
||||
models: selectedModels,
|
||||
messages: messages,
|
||||
history: history,
|
||||
params: params
|
||||
params: params,
|
||||
files: chatFiles
|
||||
});
|
||||
await chats.set(await getChatList(localStorage.token));
|
||||
}
|
||||
@ -453,7 +457,8 @@
|
||||
models: selectedModels,
|
||||
messages: messages,
|
||||
history: history,
|
||||
params: params
|
||||
params: params,
|
||||
files: chatFiles
|
||||
});
|
||||
await chats.set(await getChatList(localStorage.token));
|
||||
}
|
||||
@ -514,6 +519,13 @@
|
||||
}
|
||||
|
||||
const _files = JSON.parse(JSON.stringify(files));
|
||||
chatFiles.push(..._files.filter((item) => ['doc', 'file', 'collection'].includes(item.type)));
|
||||
chatFiles = chatFiles.filter(
|
||||
// Remove duplicates
|
||||
(item, index, array) =>
|
||||
array.findIndex((i) => JSON.stringify(i) === JSON.stringify(item)) === index
|
||||
);
|
||||
|
||||
files = [];
|
||||
|
||||
prompt = '';
|
||||
@ -754,25 +766,10 @@
|
||||
}
|
||||
});
|
||||
|
||||
let files = [];
|
||||
let files = JSON.parse(JSON.stringify(chatFiles));
|
||||
if (model?.info?.meta?.knowledge ?? false) {
|
||||
files = model.info.meta.knowledge;
|
||||
files.push(...model.info.meta.knowledge);
|
||||
}
|
||||
const lastUserMessage = messages.filter((message) => message.role === 'user').at(-1);
|
||||
|
||||
files = [
|
||||
...files,
|
||||
...(lastUserMessage?.files?.filter((item) =>
|
||||
['doc', 'file', 'collection', 'web_search_results'].includes(item.type)
|
||||
) ?? []),
|
||||
...(responseMessage?.files?.filter((item) =>
|
||||
['doc', 'file', 'collection', 'web_search_results'].includes(item.type)
|
||||
) ?? [])
|
||||
].filter(
|
||||
// Remove duplicates
|
||||
(item, index, array) =>
|
||||
array.findIndex((i) => JSON.stringify(i) === JSON.stringify(item)) === index
|
||||
);
|
||||
|
||||
eventTarget.dispatchEvent(
|
||||
new CustomEvent('chat:start', {
|
||||
@ -936,7 +933,8 @@
|
||||
messages: messages,
|
||||
history: history,
|
||||
models: selectedModels,
|
||||
params: params
|
||||
params: params,
|
||||
files: chatFiles
|
||||
});
|
||||
await chats.set(await getChatList(localStorage.token));
|
||||
}
|
||||
@ -1003,24 +1001,10 @@
|
||||
let _response = null;
|
||||
const responseMessage = history.messages[responseMessageId];
|
||||
|
||||
let files = [];
|
||||
let files = JSON.parse(JSON.stringify(chatFiles));
|
||||
if (model?.info?.meta?.knowledge ?? false) {
|
||||
files = model.info.meta.knowledge;
|
||||
files.push(...model.info.meta.knowledge);
|
||||
}
|
||||
const lastUserMessage = messages.filter((message) => message.role === 'user').at(-1);
|
||||
files = [
|
||||
...files,
|
||||
...(lastUserMessage?.files?.filter((item) =>
|
||||
['doc', 'file', 'collection', 'web_search_results'].includes(item.type)
|
||||
) ?? []),
|
||||
...(responseMessage?.files?.filter((item) =>
|
||||
['doc', 'file', 'collection', 'web_search_results'].includes(item.type)
|
||||
) ?? [])
|
||||
].filter(
|
||||
// Remove duplicates
|
||||
(item, index, array) =>
|
||||
array.findIndex((i) => JSON.stringify(i) === JSON.stringify(item)) === index
|
||||
);
|
||||
|
||||
scrollToBottom();
|
||||
|
||||
@ -1214,7 +1198,8 @@
|
||||
models: selectedModels,
|
||||
messages: messages,
|
||||
history: history,
|
||||
params: params
|
||||
params: params,
|
||||
files: chatFiles
|
||||
});
|
||||
await chats.set(await getChatList(localStorage.token));
|
||||
}
|
||||
@ -1632,6 +1617,7 @@
|
||||
return a;
|
||||
}, [])}
|
||||
bind:show={showControls}
|
||||
bind:chatFiles
|
||||
bind:params
|
||||
bind:valves
|
||||
/>
|
||||
|
||||
@ -9,8 +9,9 @@
|
||||
export let models = [];
|
||||
|
||||
export let chatId = null;
|
||||
export let valves = {};
|
||||
|
||||
export let chatFiles = [];
|
||||
export let valves = {};
|
||||
export let params = {};
|
||||
|
||||
let largeScreen = false;
|
||||
@ -48,6 +49,7 @@
|
||||
show = false;
|
||||
}}
|
||||
{models}
|
||||
bind:chatFiles
|
||||
bind:valves
|
||||
bind:params
|
||||
/>
|
||||
@ -63,6 +65,7 @@
|
||||
show = false;
|
||||
}}
|
||||
{models}
|
||||
bind:chatFiles
|
||||
bind:valves
|
||||
bind:params
|
||||
/>
|
||||
|
||||
@ -6,8 +6,11 @@
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
import AdvancedParams from '../Settings/Advanced/AdvancedParams.svelte';
|
||||
import Valves from '$lib/components/common/Valves.svelte';
|
||||
import FileItem from '$lib/components/common/FileItem.svelte';
|
||||
|
||||
export let models = [];
|
||||
|
||||
export let chatFiles = [];
|
||||
export let valves = {};
|
||||
export let params = {};
|
||||
</script>
|
||||
@ -26,9 +29,33 @@
|
||||
</div>
|
||||
|
||||
<div class=" dark:text-gray-200 text-sm font-primary">
|
||||
{#if chatFiles.length > 0}
|
||||
<div>
|
||||
<div class="mb-1.5 font-medium">{$i18n.t('Files')}</div>
|
||||
|
||||
<div>
|
||||
{#each chatFiles as file}
|
||||
<FileItem
|
||||
className="w-full"
|
||||
url={`${file?.url}`}
|
||||
name={file.name}
|
||||
type={file.type}
|
||||
dismissible={true}
|
||||
on:dismiss={() => {
|
||||
// Remove the file from the chatFiles array
|
||||
chatFiles = chatFiles.filter((f) => f.id !== file.id);
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-2 border-gray-100 dark:border-gray-800" />
|
||||
{/if}
|
||||
|
||||
{#if models.length === 1 && models[0]?.pipe?.valves_spec}
|
||||
<div>
|
||||
<div class=" font-medium">Valves</div>
|
||||
<div class=" font-medium">{$i18n.t('Valves')}</div>
|
||||
|
||||
<div>
|
||||
<Valves valvesSpec={models[0]?.pipe?.valves_spec} bind:valves />
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
import Headphone from '../icons/Headphone.svelte';
|
||||
import VoiceRecording from './MessageInput/VoiceRecording.svelte';
|
||||
import { transcribeAudio } from '$lib/apis/audio';
|
||||
import FileItem from '../common/FileItem.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@ -502,8 +503,8 @@
|
||||
{#if files.length > 0}
|
||||
<div class="mx-2 mt-2 mb-1 flex flex-wrap gap-2">
|
||||
{#each files as file, fileIdx}
|
||||
<div class=" relative group">
|
||||
{#if file.type === 'image'}
|
||||
<div class=" relative group">
|
||||
<div class="relative">
|
||||
<img
|
||||
src={file.url}
|
||||
@ -534,115 +535,6 @@
|
||||
</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if ['doc', 'file'].includes(file.type)}
|
||||
<div
|
||||
class="h-16 w-[15rem] flex items-center space-x-3 px-2.5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-none"
|
||||
>
|
||||
<div class="p-2.5 bg-red-400 text-white rounded-lg">
|
||||
{#if file.status === 'processed'}
|
||||
<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>
|
||||
{:else}
|
||||
<svg
|
||||
class=" w-6 h-6 translate-y-[0.5px]"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><style>
|
||||
.spinner_qM83 {
|
||||
animation: spinner_8HQG 1.05s infinite;
|
||||
}
|
||||
.spinner_oXPr {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.spinner_ZTLf {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
@keyframes spinner_8HQG {
|
||||
0%,
|
||||
57.14% {
|
||||
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
|
||||
transform: translate(0);
|
||||
}
|
||||
28.57% {
|
||||
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
</style><circle
|
||||
class="spinner_qM83"
|
||||
cx="4"
|
||||
cy="12"
|
||||
r="2.5"
|
||||
/><circle
|
||||
class="spinner_qM83 spinner_oXPr"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="2.5"
|
||||
/><circle
|
||||
class="spinner_qM83 spinner_ZTLf"
|
||||
cx="20"
|
||||
cy="12"
|
||||
r="2.5"
|
||||
/></svg
|
||||
>
|
||||
{/if}
|
||||
</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">
|
||||
{file.name}
|
||||
</div>
|
||||
|
||||
<div class=" text-gray-500 text-sm">{$i18n.t('Document')}</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if file.type === 'collection'}
|
||||
<div
|
||||
class="h-16 w-[15rem] flex items-center space-x-3 px-2.5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-none"
|
||||
>
|
||||
<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
|
||||
d="M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 0 1 3.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0 1 21 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 0 1 7.5 16.125V3.375Z"
|
||||
/>
|
||||
<path
|
||||
d="M15 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 17.25 7.5h-1.875A.375.375 0 0 1 15 7.125V5.25ZM4.875 6H6v10.125A3.375 3.375 0 0 0 9.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625V7.875C3 6.839 3.84 6 4.875 6Z"
|
||||
/>
|
||||
</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">
|
||||
{file?.title ?? `#${file.name}`}
|
||||
</div>
|
||||
|
||||
<div class=" text-gray-500 text-sm">{$i18n.t('Collection')}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class=" absolute -top-1 -right-1">
|
||||
<button
|
||||
class=" bg-gray-400 text-white border border-white rounded-full group-hover:visible invisible transition"
|
||||
@ -665,6 +557,17 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<FileItem
|
||||
name={file.name}
|
||||
type={file.type}
|
||||
dismissible={true}
|
||||
on:dismiss={() => {
|
||||
files.splice(fileIdx, 1);
|
||||
files = files;
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
|
||||
import { user as _user } from '$lib/stores';
|
||||
import { getFileContentById } from '$lib/apis/files';
|
||||
import FileItem from '$lib/components/common/FileItem.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@ -99,106 +100,11 @@
|
||||
{#if file.type === 'image'}
|
||||
<img src={file.url} alt="input" class=" max-h-96 rounded-lg" draggable="false" />
|
||||
{:else if file.type === 'file'}
|
||||
<button
|
||||
class="h-16 w-72 flex items-center space-x-3 px-2.5 dark:bg-gray-850 rounded-xl border border-gray-200 dark:border-none text-left"
|
||||
type="button"
|
||||
on:click={async () => {
|
||||
if (file?.url) {
|
||||
window.open(`${file?.url}/content`, '_blank').focus();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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">
|
||||
{file.name}
|
||||
</div>
|
||||
|
||||
<div class=" text-gray-500 text-sm">{$i18n.t('File')}</div>
|
||||
</div>
|
||||
</button>
|
||||
<FileItem url={`${file?.url}/content`} name={file.name} type={$i18n.t('File')} />
|
||||
{:else if file.type === 'doc'}
|
||||
<button
|
||||
class="h-16 w-72 flex items-center space-x-3 px-2.5 dark:bg-gray-850 rounded-xl border border-gray-200 dark:border-none text-left"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
if (file?.url) {
|
||||
window.open(file?.url, '_blank').focus();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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">
|
||||
{file.name}
|
||||
</div>
|
||||
|
||||
<div class=" text-gray-500 text-sm">{$i18n.t('Document')}</div>
|
||||
</div>
|
||||
</button>
|
||||
<FileItem url={`${file?.url}`} name={file.name} type={$i18n.t('Document')} />
|
||||
{:else if file.type === 'collection'}
|
||||
<button
|
||||
class="h-16 w-72 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"
|
||||
>
|
||||
<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
|
||||
d="M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 0 1 3.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0 1 21 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 0 1 7.5 16.125V3.375Z"
|
||||
/>
|
||||
<path
|
||||
d="M15 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 17.25 7.5h-1.875A.375.375 0 0 1 15 7.125V5.25ZM4.875 6H6v10.125A3.375 3.375 0 0 0 9.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625V7.875C3 6.839 3.84 6 4.875 6Z"
|
||||
/>
|
||||
</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">
|
||||
{file?.title ?? `#${file.name}`}
|
||||
</div>
|
||||
|
||||
<div class=" text-gray-500 text-sm">{$i18n.t('Collection')}</div>
|
||||
</div>
|
||||
</button>
|
||||
<FileItem name={file?.title ?? `#${file.name}`} type={$i18n.t('Collection')} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
130
src/lib/components/common/FileItem.svelte
Normal file
130
src/lib/components/common/FileItem.svelte
Normal file
@ -0,0 +1,130 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, getContext } from 'svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let className = 'w-72';
|
||||
export let url: string | null = null;
|
||||
|
||||
export let dismissible = false;
|
||||
|
||||
export let status = 'processed';
|
||||
|
||||
export let name: string;
|
||||
export let type: string;
|
||||
</script>
|
||||
|
||||
<div class="relative group">
|
||||
<button
|
||||
class="h-14 {className} flex items-center space-x-3 bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-800 text-left"
|
||||
type="button"
|
||||
on:click={async () => {
|
||||
if (url) {
|
||||
if (type === 'file') {
|
||||
window.open(`${url}/content`, '_blank').focus();
|
||||
} else {
|
||||
window.open(`${url}`, '_blank').focus();
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="p-4 py-[1.1rem] bg-red-400 text-white rounded-l-lg">
|
||||
{#if status === 'processed'}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class=" size-5"
|
||||
>
|
||||
<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>
|
||||
{:else}
|
||||
<svg
|
||||
class=" size-5 translate-y-[0.5px]"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><style>
|
||||
.spinner_qM83 {
|
||||
animation: spinner_8HQG 1.05s infinite;
|
||||
}
|
||||
.spinner_oXPr {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.spinner_ZTLf {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
@keyframes spinner_8HQG {
|
||||
0%,
|
||||
57.14% {
|
||||
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
|
||||
transform: translate(0);
|
||||
}
|
||||
28.57% {
|
||||
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle
|
||||
class="spinner_qM83 spinner_oXPr"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="2.5"
|
||||
/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center -space-y-0.5 pl-1.5 pr-4 w-full">
|
||||
<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1">
|
||||
{name}
|
||||
</div>
|
||||
|
||||
<div class=" text-gray-500 text-xs">
|
||||
{#if type === 'file'}
|
||||
{$i18n.t('File')}
|
||||
{:else if type === 'doc'}
|
||||
{$i18n.t('Document')}
|
||||
{:else if type === 'collection'}
|
||||
{$i18n.t('Collection')}
|
||||
{:else}
|
||||
<span class=" capitalize">{type}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{#if dismissible}
|
||||
<div class=" absolute -top-1 -right-1">
|
||||
<button
|
||||
class=" bg-gray-400 text-white border border-white rounded-full group-hover:visible invisible transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
dispatch('dismiss');
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="w-4 h-4"
|
||||
>
|
||||
<path
|
||||
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user