File size: 2,694 Bytes
bc27e65
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<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 AddConnectionModal from '$lib/components/AddConnectionModal.svelte';

	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';



	import Cog6 from '$lib/components/icons/Cog6.svelte';

	import Wrench from '$lib/components/icons/Wrench.svelte';

	import ManageOllamaModal from './ManageOllamaModal.svelte';

	import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte';



	export let onDelete = () => {};

	export let onSubmit = () => {};



	export let url = '';

	export let idx = 0;

	export let config = {};



	let showManageModal = false;

	let showConfigModal = false;

	let showDeleteConfirmDialog = false;

</script>



<AddConnectionModal

	ollama

	edit

	bind:show={showConfigModal}

	connection={{

		url,

		key: config?.key ?? '',

		config: config

	}}

	onDelete={() => {

		showDeleteConfirmDialog = true;

	}}

	onSubmit={(connection) => {

		url = connection.url;

		config = { ...connection.config, key: connection.key };

		onSubmit(connection);

	}}

/>



<ConfirmDialog

	bind:show={showDeleteConfirmDialog}

	on:confirm={() => {

		onDelete();

		showConfigModal = false;

	}}

/>



<ManageOllamaModal bind:show={showManageModal} urlIdx={idx} />



<div class="flex gap-1.5">

	<Tooltip

		className="w-full relative"

		content={$i18n.t(`WebUI will make requests to "{{url}}/api/chat"`, {

			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}



		<input

			class="w-full text-sm bg-transparent outline-hidden"

			placeholder={$i18n.t('Enter URL (e.g. http://localhost:11434)')}

			bind:value={url}

		/>

	</Tooltip>



	<div class="flex gap-1">

		<Tooltip content={$i18n.t('Manage')} 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={() => {

					showManageModal = true;

				}}

				type="button"

			>

				<ArrowDownTray />

			</button>

		</Tooltip>



		<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>