mirror of
https://github.com/open-webui/open-webui
synced 2025-02-21 04:17:26 +00:00
enh: manifest modal
This commit is contained in:
Timothy J. Baek
parent
be2340d4ef
commit
0b8f5c2232
19
src/lib/components/icons/Heart.svelte
Normal file
19
src/lib/components/icons/Heart.svelte
Normal file
@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
export let className = 'size-4';
|
||||
export let strokeWidth = '1.5';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width={strokeWidth}
|
||||
stroke="currentColor"
|
||||
class={className}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
|
||||
/>
|
||||
</svg>
|
||||
@ -24,7 +24,9 @@
|
||||
import FunctionMenu from './Functions/FunctionMenu.svelte';
|
||||
import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
|
||||
import Switch from '../common/Switch.svelte';
|
||||
import ValvesModal from './ValvesModal.svelte';
|
||||
import ValvesModal from './common/ValvesModal.svelte';
|
||||
import ManifestModal from './common/ManifestModal.svelte';
|
||||
import Heart from '../icons/Heart.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@ -34,6 +36,7 @@
|
||||
let showConfirm = false;
|
||||
let query = '';
|
||||
|
||||
let showManifestModal = false;
|
||||
let showValvesModal = false;
|
||||
let selectedFunction = null;
|
||||
|
||||
@ -175,6 +178,21 @@
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex flex-row gap-0.5 self-center">
|
||||
{#if func?.meta?.manifest?.funding_url ?? false}
|
||||
<Tooltip content="Donate">
|
||||
<button
|
||||
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
selectedFunction = func;
|
||||
showManifestModal = true;
|
||||
}}
|
||||
>
|
||||
<Heart />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
<Tooltip content="Valves">
|
||||
<button
|
||||
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
@ -360,6 +378,7 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ManifestModal bind:show={showManifestModal} manifest={selectedFunction?.meta?.manifest ?? {}} />
|
||||
<ValvesModal bind:show={showValvesModal} type="function" id={selectedFunction?.id ?? null} />
|
||||
|
||||
<ConfirmDialog
|
||||
|
||||
@ -20,7 +20,9 @@
|
||||
import ConfirmDialog from '../common/ConfirmDialog.svelte';
|
||||
import ToolMenu from './Tools/ToolMenu.svelte';
|
||||
import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
|
||||
import ValvesModal from './ValvesModal.svelte';
|
||||
import ValvesModal from './common/ValvesModal.svelte';
|
||||
import ManifestModal from './common/ManifestModal.svelte';
|
||||
import Heart from '../icons/Heart.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
@ -30,6 +32,7 @@
|
||||
let showConfirm = false;
|
||||
let query = '';
|
||||
|
||||
let showManifestModal = false;
|
||||
let showValvesModal = false;
|
||||
let selectedTool = null;
|
||||
|
||||
@ -169,6 +172,21 @@
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex flex-row gap-0.5 self-center">
|
||||
{#if tool?.meta?.manifest?.funding_url ?? false}
|
||||
<Tooltip content="Donate">
|
||||
<button
|
||||
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
selectedTool = tool;
|
||||
showManifestModal = true;
|
||||
}}
|
||||
>
|
||||
<Heart />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
|
||||
<Tooltip content="Valves">
|
||||
<button
|
||||
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
|
||||
@ -345,6 +363,7 @@
|
||||
</div>
|
||||
|
||||
<ValvesModal bind:show={showValvesModal} type="tool" id={selectedTool?.id ?? null} />
|
||||
<ManifestModal bind:show={showManifestModal} manifest={selectedTool?.meta?.manifest ?? {}} />
|
||||
|
||||
<ConfirmDialog
|
||||
bind:show={showConfirm}
|
||||
|
||||
102
src/lib/components/workspace/common/ManifestModal.svelte
Normal file
102
src/lib/components/workspace/common/ManifestModal.svelte
Normal file
@ -0,0 +1,102 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { onMount, getContext } from 'svelte';
|
||||
|
||||
import Modal from '../../common/Modal.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let show = false;
|
||||
export let manifest = {};
|
||||
</script>
|
||||
|
||||
<Modal size="sm" bind:show>
|
||||
<div>
|
||||
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
|
||||
<div class=" text-lg font-medium self-center">{$i18n.t('Show your support!')}</div>
|
||||
<button
|
||||
class="self-center"
|
||||
on:click={() => {
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="w-5 h-5"
|
||||
>
|
||||
<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 class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
|
||||
<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
|
||||
<form
|
||||
class="flex flex-col w-full"
|
||||
on:submit|preventDefault={() => {
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<div class="px-1 text-sm">
|
||||
<div class=" my-2">
|
||||
The developers behind this plugin are passionate volunteers from the community. If you
|
||||
find this plugin helpful, please consider contributing to its development.
|
||||
</div>
|
||||
|
||||
<div class=" my-2">
|
||||
Your entire contribution will go directly to the plugin developer; Open WebUI does not
|
||||
take any percentage. However, the chosen funding platform might have its own fees.
|
||||
</div>
|
||||
|
||||
<hr class=" dark:border-gray-800 my-3" />
|
||||
|
||||
<div class="my-2">
|
||||
Support this plugin: <a
|
||||
href={manifest.funding_url}
|
||||
target="_blank"
|
||||
class=" underline text-blue-400 hover:text-blue-300">{manifest.funding_url}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-3 text-sm font-medium">
|
||||
<button
|
||||
class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg flex flex-row space-x-1 items-center"
|
||||
type="submit"
|
||||
>
|
||||
{$i18n.t('Done')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
/* display: none; <- Crashes Chrome on hover */
|
||||
-webkit-appearance: none;
|
||||
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
|
||||
}
|
||||
|
||||
.tabs::-webkit-scrollbar {
|
||||
display: none; /* for Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
.tabs {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield; /* Firefox */
|
||||
}
|
||||
</style>
|
||||
@ -4,14 +4,14 @@
|
||||
import { onMount, getContext } from 'svelte';
|
||||
import { addUser } from '$lib/apis/auths';
|
||||
|
||||
import Modal from '../common/Modal.svelte';
|
||||
import Modal from '../../common/Modal.svelte';
|
||||
import {
|
||||
getFunctionValvesById,
|
||||
getFunctionValvesSpecById,
|
||||
updateFunctionValvesById
|
||||
} from '$lib/apis/functions';
|
||||
import { getToolValvesById, getToolValvesSpecById, updateToolValvesById } from '$lib/apis/tools';
|
||||
import Spinner from '../common/Spinner.svelte';
|
||||
import Spinner from '../../common/Spinner.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
const dispatch = createEventDispatcher();
|
||||
Loading…
Reference in New Issue
Block a user