mirror of
https://github.com/open-webui/open-webui
synced 2025-05-29 17:52:48 +00:00
108 lines
2.8 KiB
Svelte
108 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { getContext, tick } from 'svelte';
|
|
const i18n = getContext('i18n');
|
|
|
|
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
|
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
|
|
import Cog6 from '$lib/components/icons/Cog6.svelte';
|
|
import AddConnectionModal from './AddConnectionModal.svelte';
|
|
import { connect } from 'socket.io-client';
|
|
|
|
export let onDelete = () => {};
|
|
export let onSubmit = () => {};
|
|
|
|
export let pipeline = false;
|
|
|
|
export let url = '';
|
|
export let key = '';
|
|
export let config = {};
|
|
|
|
let showConfigModal = false;
|
|
</script>
|
|
|
|
<AddConnectionModal
|
|
edit
|
|
bind:show={showConfigModal}
|
|
connection={{
|
|
url,
|
|
key,
|
|
config
|
|
}}
|
|
{onDelete}
|
|
onSubmit={(connection) => {
|
|
url = connection.url;
|
|
key = connection.key;
|
|
config = connection.config;
|
|
onSubmit(connection);
|
|
}}
|
|
/>
|
|
|
|
<div class="flex w-full gap-2 items-center">
|
|
<Tooltip
|
|
className="w-full relative"
|
|
content={$i18n.t(`WebUI will make requests to "{{url}}/chat/completions"`, {
|
|
url
|
|
})}
|
|
placement="top-start"
|
|
>
|
|
{#if !(config?.enable ?? true)}
|
|
<div
|
|
class="absolute top-0 bottom-0 left-0 right-0 opacity-60 bg-white dark:bg-gray-900 z-10"
|
|
></div>
|
|
{/if}
|
|
<div class="flex w-full">
|
|
<div class="flex-1 relative">
|
|
<input
|
|
class=" outline-none w-full bg-transparent {pipeline ? 'pr-8' : ''}"
|
|
placeholder={$i18n.t('API Base URL')}
|
|
bind:value={url}
|
|
autocomplete="off"
|
|
/>
|
|
|
|
{#if pipeline}
|
|
<div class=" absolute top-0.5 right-2.5">
|
|
<Tooltip content="Pipelines">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
class="size-4"
|
|
>
|
|
<path
|
|
d="M11.644 1.59a.75.75 0 0 1 .712 0l9.75 5.25a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.712 0l-9.75-5.25a.75.75 0 0 1 0-1.32l9.75-5.25Z"
|
|
/>
|
|
<path
|
|
d="m3.265 10.602 7.668 4.129a2.25 2.25 0 0 0 2.134 0l7.668-4.13 1.37.739a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.71 0l-9.75-5.25a.75.75 0 0 1 0-1.32l1.37-.738Z"
|
|
/>
|
|
<path
|
|
d="m10.933 19.231-7.668-4.13-1.37.739a.75.75 0 0 0 0 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 0 0 0-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 0 1-2.134-.001Z"
|
|
/>
|
|
</svg>
|
|
</Tooltip>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<SensitiveInput
|
|
inputClassName=" outline-none bg-transparent w-full"
|
|
placeholder={$i18n.t('API Key')}
|
|
bind:value={key}
|
|
/>
|
|
</div>
|
|
</Tooltip>
|
|
|
|
<div class="flex gap-1">
|
|
<Tooltip content={$i18n.t('Configure')} className="self-start">
|
|
<button
|
|
class="self-center p-1 bg-transparent hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 rounded-lg transition"
|
|
on:click={() => {
|
|
showConfigModal = true;
|
|
}}
|
|
type="button"
|
|
>
|
|
<Cog6 />
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|