mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-12 04:15:25 +00:00
refac: prompt suggestions component
Co-Authored-By: Classic298 <27028174+Classic298@users.noreply.github.com>
This commit is contained in:
Timothy Jaeryang Baek
parent
5b1fa9dd0d
commit
2e1ddf823b
3 changed files with 228 additions and 250 deletions
|
|
@ -21,6 +21,7 @@
|
||||||
import Textarea from '$lib/components/common/Textarea.svelte';
|
import Textarea from '$lib/components/common/Textarea.svelte';
|
||||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||||
import Banners from './Interface/Banners.svelte';
|
import Banners from './Interface/Banners.svelte';
|
||||||
|
import PromptSuggestions from '$lib/components/workspace/Models/PromptSuggestions.svelte';
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
|
@ -466,201 +467,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if $user?.role === 'admin'}
|
{#if $user?.role === 'admin'}
|
||||||
<div class=" space-y-3">
|
<PromptSuggestions bind:promptSuggestions />
|
||||||
<div class="flex w-full justify-between mb-2">
|
|
||||||
<div class=" self-center text-xs">
|
|
||||||
{$i18n.t('Default Prompt Suggestions')}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
{#if promptSuggestions.length > 0}
|
||||||
class="p-1 px-3 text-xs flex rounded-sm transition"
|
<div class="text-xs text-left w-full mt-2">
|
||||||
type="button"
|
{$i18n.t('Adjusting these settings will apply changes universally to all users.')}
|
||||||
on:click={() => {
|
|
||||||
if (promptSuggestions.length === 0 || promptSuggestions.at(-1).content !== '') {
|
|
||||||
promptSuggestions = [...promptSuggestions, { content: '', title: ['', ''] }];
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
class="w-4 h-4"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="grid lg:grid-cols-2 flex-col gap-1.5">
|
{/if}
|
||||||
{#each promptSuggestions as prompt, promptIdx}
|
|
||||||
<div
|
|
||||||
class=" flex border rounded-xl border-gray-50 dark:border-none dark:bg-gray-850 py-1.5"
|
|
||||||
>
|
|
||||||
<div class="flex flex-col flex-1 pl-1">
|
|
||||||
<div class="py-1 gap-1">
|
|
||||||
<input
|
|
||||||
class="px-3 text-sm font-medium w-full bg-transparent outline-hidden"
|
|
||||||
placeholder={$i18n.t('Title (e.g. Tell me a fun fact)')}
|
|
||||||
bind:value={prompt.title[0]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<input
|
|
||||||
class="px-3 text-xs w-full bg-transparent outline-hidden text-gray-600 dark:text-gray-400"
|
|
||||||
placeholder={$i18n.t('Subtitle (e.g. about the Roman Empire)')}
|
|
||||||
bind:value={prompt.title[1]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="border-gray-50 dark:border-gray-850 my-1" />
|
|
||||||
|
|
||||||
<textarea
|
|
||||||
class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden resize-none"
|
|
||||||
placeholder={$i18n.t(
|
|
||||||
'Prompt (e.g. Tell me a fun fact about the Roman Empire)'
|
|
||||||
)}
|
|
||||||
rows="3"
|
|
||||||
bind:value={prompt.content}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="">
|
|
||||||
<button
|
|
||||||
class="p-3"
|
|
||||||
type="button"
|
|
||||||
on:click={() => {
|
|
||||||
promptSuggestions.splice(promptIdx, 1);
|
|
||||||
promptSuggestions = promptSuggestions;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if promptSuggestions.length > 0}
|
|
||||||
<div class="text-xs text-left w-full mt-2">
|
|
||||||
{$i18n.t('Adjusting these settings will apply changes universally to all users.')}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="flex items-center justify-end space-x-2 mt-2">
|
|
||||||
<input
|
|
||||||
id="prompt-suggestions-import-input"
|
|
||||||
type="file"
|
|
||||||
accept=".json"
|
|
||||||
hidden
|
|
||||||
on:change={(e) => {
|
|
||||||
const files = e.target.files;
|
|
||||||
if (!files || files.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(files);
|
|
||||||
|
|
||||||
let reader = new FileReader();
|
|
||||||
reader.onload = async (event) => {
|
|
||||||
try {
|
|
||||||
let suggestions = JSON.parse(event.target.result);
|
|
||||||
|
|
||||||
suggestions = suggestions.map((s) => {
|
|
||||||
if (typeof s.title === 'string') {
|
|
||||||
s.title = [s.title, ''];
|
|
||||||
} else if (!Array.isArray(s.title)) {
|
|
||||||
s.title = ['', ''];
|
|
||||||
}
|
|
||||||
|
|
||||||
return s;
|
|
||||||
});
|
|
||||||
|
|
||||||
promptSuggestions = [...promptSuggestions, ...suggestions];
|
|
||||||
} catch (error) {
|
|
||||||
toast.error($i18n.t('Invalid JSON file'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
reader.readAsText(files[0]);
|
|
||||||
|
|
||||||
e.target.value = ''; // Reset the input value
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
|
|
||||||
type="button"
|
|
||||||
on:click={() => {
|
|
||||||
const input = document.getElementById('prompt-suggestions-import-input');
|
|
||||||
if (input) {
|
|
||||||
input.click();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class=" self-center mr-2 font-medium line-clamp-1">
|
|
||||||
{$i18n.t('Import Prompt Suggestions')}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=" self-center">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
fill="currentColor"
|
|
||||||
class="w-3.5 h-3.5"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 9.5a.75.75 0 0 1-.75-.75V8.06l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-.75.75Z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{#if promptSuggestions.length}
|
|
||||||
<button
|
|
||||||
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
|
|
||||||
type="button"
|
|
||||||
on:click={async () => {
|
|
||||||
let blob = new Blob([JSON.stringify(promptSuggestions)], {
|
|
||||||
type: 'application/json'
|
|
||||||
});
|
|
||||||
saveAs(blob, `prompt-suggestions-export-${Date.now()}.json`);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class=" self-center mr-2 font-medium line-clamp-1">
|
|
||||||
{$i18n.t('Export Prompt Suggestions')} ({promptSuggestions.length})
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=" self-center">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
fill="currentColor"
|
|
||||||
class="w-3.5 h-3.5"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 3.5a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 0 1 1.06-1.06l.72.72V6.25A.75.75 0 0 1 8 5.5Z"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@
|
||||||
import XMark from '$lib/components/icons/XMark.svelte';
|
import XMark from '$lib/components/icons/XMark.svelte';
|
||||||
import DefaultFiltersSelector from './DefaultFiltersSelector.svelte';
|
import DefaultFiltersSelector from './DefaultFiltersSelector.svelte';
|
||||||
import DefaultFeatures from './DefaultFeatures.svelte';
|
import DefaultFeatures from './DefaultFeatures.svelte';
|
||||||
|
import PromptSuggestions from './PromptSuggestions.svelte';
|
||||||
|
|
||||||
const i18n = getContext('i18n');
|
const i18n = getContext('i18n');
|
||||||
|
|
||||||
|
|
@ -653,7 +654,7 @@
|
||||||
<div class="flex w-full justify-between items-center">
|
<div class="flex w-full justify-between items-center">
|
||||||
<div class="flex w-full justify-between items-center">
|
<div class="flex w-full justify-between items-center">
|
||||||
<div class=" self-center text-sm font-semibold">
|
<div class=" self-center text-sm font-semibold">
|
||||||
{$i18n.t('Prompt suggestions')}
|
{$i18n.t('Prompts')}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
|
|
@ -661,7 +662,7 @@
|
||||||
type="button"
|
type="button"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
if ((info?.meta?.suggestion_prompts ?? null) === null) {
|
if ((info?.meta?.suggestion_prompts ?? null) === null) {
|
||||||
info.meta.suggestion_prompts = [{ content: '' }];
|
info.meta.suggestion_prompts = [{ content: '', title: ['', ''] }];
|
||||||
} else {
|
} else {
|
||||||
info.meta.suggestion_prompts = null;
|
info.meta.suggestion_prompts = null;
|
||||||
}
|
}
|
||||||
|
|
@ -674,64 +675,10 @@
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if (info?.meta?.suggestion_prompts ?? null) !== null}
|
|
||||||
<button
|
|
||||||
class="p-1 px-2 text-xs flex rounded-sm transition"
|
|
||||||
type="button"
|
|
||||||
on:click={() => {
|
|
||||||
if (
|
|
||||||
info.meta.suggestion_prompts.length === 0 ||
|
|
||||||
info.meta.suggestion_prompts.at(-1).content !== ''
|
|
||||||
) {
|
|
||||||
info.meta.suggestion_prompts = [
|
|
||||||
...info.meta.suggestion_prompts,
|
|
||||||
{ content: '' }
|
|
||||||
];
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
class="w-4 h-4"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if info?.meta?.suggestion_prompts}
|
{#if info?.meta?.suggestion_prompts}
|
||||||
<div class="flex flex-col space-y-1 mt-1 mb-3">
|
<PromptSuggestions bind:promptSuggestions={info.meta.suggestion_prompts} />
|
||||||
{#if info.meta.suggestion_prompts.length > 0}
|
|
||||||
{#each info.meta.suggestion_prompts as prompt, promptIdx}
|
|
||||||
<div class=" flex rounded-lg">
|
|
||||||
<input
|
|
||||||
class=" text-sm w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-850"
|
|
||||||
placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')}
|
|
||||||
bind:value={prompt.content}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="px-2"
|
|
||||||
type="button"
|
|
||||||
on:click={() => {
|
|
||||||
info.meta.suggestion_prompts.splice(promptIdx, 1);
|
|
||||||
info.meta.suggestion_prompts = info.meta.suggestion_prompts;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<XMark className={'size-4'} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
{:else}
|
|
||||||
<div class="text-xs text-center">{$i18n.t('No suggestion prompts')}</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
218
src/lib/components/workspace/Models/PromptSuggestions.svelte
Normal file
218
src/lib/components/workspace/Models/PromptSuggestions.svelte
Normal file
|
|
@ -0,0 +1,218 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { getContext } from 'svelte';
|
||||||
|
import { saveAs } from 'file-saver';
|
||||||
|
import { toast } from 'svelte-sonner';
|
||||||
|
const i18n = getContext('i18n');
|
||||||
|
|
||||||
|
export let promptSuggestions = [];
|
||||||
|
|
||||||
|
let _promptSuggestions = [];
|
||||||
|
|
||||||
|
const setPromptSuggestions = () => {
|
||||||
|
_promptSuggestions = promptSuggestions.map((s) => {
|
||||||
|
if (typeof s.title === 'string') {
|
||||||
|
s.title = [s.title, ''];
|
||||||
|
} else if (!Array.isArray(s.title)) {
|
||||||
|
s.title = ['', ''];
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$: if (promptSuggestions) {
|
||||||
|
setPromptSuggestions();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class=" space-y-3">
|
||||||
|
<div class="flex w-full justify-between mb-2">
|
||||||
|
<div class=" self-center text-xs">
|
||||||
|
{$i18n.t('Default Prompt Suggestions')}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="p-1 px-3 text-xs flex rounded-sm transition"
|
||||||
|
type="button"
|
||||||
|
on:click={() => {
|
||||||
|
if (promptSuggestions.length === 0 || promptSuggestions.at(-1).content !== '') {
|
||||||
|
promptSuggestions = [...promptSuggestions, { content: '', title: ['', ''] }];
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-4 h-4"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if _promptSuggestions.length > 0}
|
||||||
|
<div class="grid lg:grid-cols-2 flex-col gap-2">
|
||||||
|
{#each _promptSuggestions as prompt, promptIdx}
|
||||||
|
<div
|
||||||
|
class=" flex border rounded-3xl border-gray-100 dark:border-gray-800 dark:bg-gray-850 py-1.5"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col flex-1 pl-1">
|
||||||
|
<div class="py-1 gap-1">
|
||||||
|
<input
|
||||||
|
class="px-3 text-sm font-medium w-full bg-transparent outline-hidden"
|
||||||
|
placeholder={$i18n.t('Title (e.g. Tell me a fun fact)')}
|
||||||
|
bind:value={prompt.title[0]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<input
|
||||||
|
class="px-3 text-xs w-full bg-transparent outline-hidden text-gray-600 dark:text-gray-400"
|
||||||
|
placeholder={$i18n.t('Subtitle (e.g. about the Roman Empire)')}
|
||||||
|
bind:value={prompt.title[1]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="border-gray-50 dark:border-gray-850 my-1" />
|
||||||
|
|
||||||
|
<textarea
|
||||||
|
class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden resize-none"
|
||||||
|
placeholder={$i18n.t('Prompt (e.g. Tell me a fun fact about the Roman Empire)')}
|
||||||
|
rows="3"
|
||||||
|
bind:value={prompt.content}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<button
|
||||||
|
class="p-3"
|
||||||
|
type="button"
|
||||||
|
on:click={() => {
|
||||||
|
promptSuggestions.splice(promptIdx, 1);
|
||||||
|
promptSuggestions = promptSuggestions;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="text-xs text-center w-full py-2">{$i18n.t('No suggestion prompts')}</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="flex items-center justify-end space-x-2 mt-2">
|
||||||
|
<input
|
||||||
|
id="prompt-suggestions-import-input"
|
||||||
|
type="file"
|
||||||
|
accept=".json"
|
||||||
|
hidden
|
||||||
|
on:change={(e) => {
|
||||||
|
const files = e.target.files;
|
||||||
|
if (!files || files.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(files);
|
||||||
|
|
||||||
|
let reader = new FileReader();
|
||||||
|
reader.onload = async (event) => {
|
||||||
|
try {
|
||||||
|
let suggestions = JSON.parse(event.target.result);
|
||||||
|
|
||||||
|
suggestions = suggestions.map((s) => {
|
||||||
|
if (typeof s.title === 'string') {
|
||||||
|
s.title = [s.title, ''];
|
||||||
|
} else if (!Array.isArray(s.title)) {
|
||||||
|
s.title = ['', ''];
|
||||||
|
}
|
||||||
|
|
||||||
|
return s;
|
||||||
|
});
|
||||||
|
|
||||||
|
promptSuggestions = [...promptSuggestions, ...suggestions];
|
||||||
|
} catch (error) {
|
||||||
|
toast.error($i18n.t('Invalid JSON file'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.readAsText(files[0]);
|
||||||
|
|
||||||
|
e.target.value = ''; // Reset the input value
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
|
||||||
|
type="button"
|
||||||
|
on:click={() => {
|
||||||
|
const input = document.getElementById('prompt-suggestions-import-input');
|
||||||
|
if (input) {
|
||||||
|
input.click();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div class=" self-center mr-2 font-medium line-clamp-1">
|
||||||
|
{$i18n.t('Import Prompt Suggestions')}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=" self-center">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-3.5 h-3.5"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 9.5a.75.75 0 0 1-.75-.75V8.06l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-.75.75Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{#if promptSuggestions.length}
|
||||||
|
<button
|
||||||
|
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
|
||||||
|
type="button"
|
||||||
|
on:click={async () => {
|
||||||
|
let blob = new Blob([JSON.stringify(promptSuggestions)], {
|
||||||
|
type: 'application/json'
|
||||||
|
});
|
||||||
|
saveAs(blob, `prompt-suggestions-export-${Date.now()}.json`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div class=" self-center mr-2 font-medium line-clamp-1">
|
||||||
|
{$i18n.t('Export Prompt Suggestions')} ({promptSuggestions.length})
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=" self-center">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-3.5 h-3.5"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 3.5a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 0 1 1.06-1.06l.72.72V6.25A.75.75 0 0 1 8 5.5Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in a new issue