File size: 4,664 Bytes
c36067d | 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 | <script lang="ts">
import { getContext, createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import Dropdown from '$lib/components/common/Dropdown.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte';
import BarsArrowUp from '$lib/components/icons/BarsArrowUp.svelte';
import FolderOpen from '$lib/components/icons/FolderOpen.svelte';
import NewFolderAlt from '$lib/components/icons/NewFolderAlt.svelte';
import ArrowPath from '$lib/components/icons/ArrowPath.svelte';
import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import ArrowUturnLeft from '$lib/components/icons/ArrowUturnLeft.svelte';
const i18n = getContext('i18n');
export let onClose: Function = () => {};
export let onSync: Function = () => {};
export let onUpload: Function = (data) => {};
export let onReset: Function = () => {};
let show = false;
</script>
<Dropdown
bind:show
onOpenChange={(state) => {
if (state === false) {
onClose();
}
}}
align="end"
>
<Tooltip content={$i18n.t('Add Content')}>
<button
class=" p-1.5 rounded-xl hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition font-medium text-sm flex items-center space-x-1"
on:click={(e) => {
e.stopPropagation();
show = true;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
</button>
</Tooltip>
<div slot="content">
<div
class="min-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
>
<button
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
on:click={() => {
onUpload({ type: 'new_directory' });
show = false;
}}
>
<NewFolderAlt />
<div class="flex items-center">{$i18n.t('New directory')}</div>
</button>
<hr class="my-1 border-gray-100 dark:border-gray-800" />
<button
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
on:click={() => {
onUpload({ type: 'files' });
}}
>
<ArrowUpCircle strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Upload files')}</div>
</button>
<button
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
on:click={() => {
onUpload({ type: 'directory' });
}}
>
<FolderOpen strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Upload directory')}</div>
</button>
<Tooltip
content={$i18n.t(
'Sync a local directory with this knowledge base. Only new and modified files will be uploaded. The directory structure will be mirrored.'
)}
className="w-full"
>
<button
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
on:click={() => {
onSync();
}}
>
<ArrowPath strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Sync directory')}</div>
</button>
</Tooltip>
<button
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
on:click={() => {
onUpload({ type: 'web' });
}}
>
<GlobeAlt strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Add webpage')}</div>
</button>
<button
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
on:click={() => {
onUpload({ type: 'text' });
}}
>
<BarsArrowUp strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Add text content')}</div>
</button>
<hr class="my-1 border-gray-100 dark:border-gray-800" />
<button
class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
on:click={() => {
onReset();
show = false;
}}
>
<ArrowUturnLeft strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Reset')}</div>
</button>
</div>
</div>
</Dropdown>
|