Spaces:
Paused
Paused
File size: 2,752 Bytes
55bd140 |
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 |
<script lang="ts">
import { getContext } from 'svelte';
const i18n = getContext('i18n');
import XMark from '$lib/components/icons/XMark.svelte';
import { models } from '$lib/stores';
import Collapsible from '$lib/components/common/Collapsible.svelte';
import FileItem from '$lib/components/common/FileItem.svelte';
import Image from '$lib/components/common/Image.svelte';
export let show = false;
export let selectedModelId = '';
export let files = [];
export let onUpdate = (files: any[]) => {
// Default no-op function
};
</script>
<div class="flex items-center mb-1.5 pt-1.5">
<div class=" mr-1 flex items-center">
<button
class="p-0.5 bg-transparent transition rounded-lg"
on:click={() => {
show = !show;
}}
>
<XMark className="size-5" strokeWidth="2.5" />
</button>
</div>
<div class=" font-medium text-base flex items-center gap-1">
<div>
{$i18n.t('Controls')}
</div>
</div>
</div>
<div class="mt-1 px-1.5">
<div class="pb-10">
{#if files.length > 0}
<div class=" text-xs font-medium mb-2">{$i18n.t('Files')}</div>
<div class="flex flex-col gap-1">
{#each files.filter((file) => file.type !== 'image') as file, fileIdx}
<FileItem
className="w-full"
item={file}
small={true}
edit={true}
dismissible={true}
url={file.url}
name={file.name}
type={file.type}
size={file?.size}
loading={file.status === 'uploading'}
on:dismiss={() => {
// Remove the file from the files array
files = files.filter((item) => item.id !== file.id);
files = files;
onUpdate(files);
}}
on:click={() => {
console.log(file);
}}
/>
{/each}
<div class="flex items-center flex-wrap gap-2 mt-1.5">
{#each files.filter((file) => file.type === 'image') as file, fileIdx}
<Image
src={file.url}
imageClassName=" size-14 rounded-xl object-cover"
dismissible={true}
onDismiss={() => {
files = files.filter((item) => item.id !== file.id);
files = files;
onUpdate(files);
}}
/>
{/each}
</div>
</div>
<hr class="my-2 border-gray-50 dark:border-gray-700/10" />
{/if}
<div class=" text-xs font-medium mb-1">{$i18n.t('Model')}</div>
<div class="w-full">
<select class="w-full bg-transparent text-sm outline-hidden" bind:value={selectedModelId}>
<option value="" class="bg-gray-50 dark:bg-gray-700" disabled>
{$i18n.t('Select a model')}
</option>
{#each $models.filter((model) => !(model?.info?.meta?.hidden ?? false)) as model}
<option value={model.id} class="bg-gray-50 dark:bg-gray-700">{model.name}</option>
{/each}
</select>
</div>
</div>
</div>
|