OpenWebUI/open-webui-custom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'origin/dev' into sidebar-pagination [skip ci]

Browse Source
This commit is contained in:
Aryan Kothari
2024-08-03 09:56:23 -04:00
parent 06a64219bc 774defd184
commit 6847c2fc8c
80 changed files with 3065 additions and 1802 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/lib/components/admin/Settings/Audio.svelte
View File

@@ -1,13 +1,19 @@
<script lang="ts">
import { getAudioConfig, updateAudioConfig } from '$lib/apis/audio';
import { user, settings, config } from '$lib/stores';
import { createEventDispatcher, onMount, getContext } from 'svelte';
import { toast } from 'svelte-sonner';
import Switch from '$lib/components/common/Switch.svelte';
import { getBackendConfig } from '$lib/apis';
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
import { createEventDispatcher, onMount, getContext } from 'svelte';
const dispatch = createEventDispatcher();
import { getBackendConfig } from '$lib/apis';
import {
getAudioConfig,
updateAudioConfig,
getModels as _getModels,
getVoices as _getVoices
} from '$lib/apis/audio';
import { user, settings, config } from '$lib/stores';
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
const i18n = getContext('i18n');
export let saveHandler: Function;
@@ -30,30 +36,41 @@
let models = [];
let nonLocalVoices = false;
const getOpenAIVoices = () => {
voices = [
{ name: 'alloy' },
{ name: 'echo' },
{ name: 'fable' },
{ name: 'onyx' },
{ name: 'nova' },
{ name: 'shimmer' }
];
};
const getModels = async () => {
if (TTS_ENGINE === '') {
models = [];
} else {
const res = await _getModels(localStorage.token).catch((e) => {
toast.error(e);
});
const getOpenAIModels = () => {
models = [{ name: 'tts-1' }, { name: 'tts-1-hd' }];
};
const getWebAPIVoices = () => {
const getVoicesLoop = setInterval(async () => {
voices = await speechSynthesis.getVoices();
// do your loop
if (voices.length > 0) {
clearInterval(getVoicesLoop);
if (res) {
console.log(res);
models = res.models;
}
}, 100);
}
};
const getVoices = async () => {
if (TTS_ENGINE === '') {
const getVoicesLoop = setInterval(async () => {
voices = await speechSynthesis.getVoices();
// do your loop
if (voices.length > 0) {
clearInterval(getVoicesLoop);
}
}, 100);
} else {
const res = await _getVoices(localStorage.token).catch((e) => {
toast.error(e);
});
if (res) {
console.log(res);
voices = res.voices;
}
}
};
const updateConfigHandler = async () => {
@@ -101,12 +118,8 @@
STT_MODEL = res.stt.MODEL;
}
if (TTS_ENGINE === 'openai') {
getOpenAIVoices();
getOpenAIModels();
} else {
getWebAPIVoices();
}
await getVoices();
await getModels();
});
</script>
@@ -185,13 +198,15 @@
class=" dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
bind:value={TTS_ENGINE}
placeholder="Select a mode"
on:change={(e) => {
on:change={async (e) => {
await updateConfigHandler();
await getVoices();
await getModels();
if (e.target.value === 'openai') {
getOpenAIVoices();
TTS_VOICE = 'alloy';
TTS_MODEL = 'tts-1';
} else {
getWebAPIVoices();
TTS_VOICE = '';
TTS_MODEL = '';
}
@@ -268,7 +283,7 @@
<datalist id="voice-list">
{#each voices as voice}
<option value={voice.name} />
<option value={voice.id}>{voice.name}</option>
{/each}
</datalist>
</div>
@@ -279,15 +294,15 @@
<div class="flex w-full">
<div class="flex-1">
<input
list="model-list"
list="tts-model-list"
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
bind:value={TTS_MODEL}
placeholder="Select a model"
/>
<datalist id="model-list">
<datalist id="tts-model-list">
{#each models as model}
<option value={model.name} />
<option value={model.id} />
{/each}
</datalist>
</div>
@@ -309,7 +324,7 @@
<datalist id="voice-list">
{#each voices as voice}
<option value={voice.name} />
<option value={voice.id}>{voice.name}</option>
{/each}
</datalist>
</div>
@@ -320,15 +335,15 @@
<div class="flex w-full">
<div class="flex-1">
<input
list="model-list"
list="tts-model-list"
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
bind:value={TTS_MODEL}
placeholder="Select a model"
/>
<datalist id="model-list">
<datalist id="tts-model-list">
{#each models as model}
<option value={model.name} />
<option value={model.id} />
{/each}
</datalist>
</div>

8
src/lib/components/chat/Chat.svelte
View File

@@ -111,7 +111,6 @@
};
let params = {};
let valves = {};
$: if (history.currentId !== null) {
let _messages = [];
@@ -285,6 +284,10 @@
if ($page.url.searchParams.get('q')) {
prompt = $page.url.searchParams.get('q') ?? '';
selectedToolIds = ($page.url.searchParams.get('tool_ids') ?? '')
.split(',')
.map((id) => id.trim())
.filter((id) => id);
if (prompt) {
await tick();
@@ -821,7 +824,6 @@
keep_alive: $settings.keepAlive ?? undefined,
tool_ids: selectedToolIds.length > 0 ? selectedToolIds : undefined,
files: files.length > 0 ? files : undefined,
...(Object.keys(valves).length ? { valves } : {}),
session_id: $socket?.id,
chat_id: $chatId,
id: responseMessageId
@@ -1123,7 +1125,6 @@
max_tokens: params?.max_tokens ?? $settings?.params?.max_tokens ?? undefined,
tool_ids: selectedToolIds.length > 0 ? selectedToolIds : undefined,
files: files.length > 0 ? files : undefined,
...(Object.keys(valves).length ? { valves } : {}),
session_id: $socket?.id,
chat_id: $chatId,
id: responseMessageId
@@ -1654,7 +1655,6 @@
bind:show={showControls}
bind:chatFiles
bind:params
bind:valves
/>
</div>
{/if}

4
src/lib/components/chat/ChatControls.svelte
View File

@@ -9,9 +9,7 @@
export let models = [];
export let chatId = null;
export let chatFiles = [];
export let valves = {};
export let params = {};
let largeScreen = false;
@@ -50,7 +48,6 @@
}}
{models}
bind:chatFiles
bind:valves
bind:params
/>
</div>
@@ -66,7 +63,6 @@
}}
{models}
bind:chatFiles
bind:valves
bind:params
/>
</div>

18
src/lib/components/chat/Controls/Controls.svelte
View File

@@ -5,14 +5,13 @@
import XMark from '$lib/components/icons/XMark.svelte';
import AdvancedParams from '../Settings/Advanced/AdvancedParams.svelte';
import Valves from '$lib/components/common/Valves.svelte';
import Valves from '$lib/components/chat/Controls/Valves.svelte';
import FileItem from '$lib/components/common/FileItem.svelte';
import Collapsible from '$lib/components/common/Collapsible.svelte';
export let models = [];
export let chatFiles = [];
export let valves = {};
export let params = {};
</script>
@@ -39,6 +38,7 @@
url={`${file?.url}`}
name={file.name}
type={file.type}
size={file?.size}
dismissible={true}
on:dismiss={() => {
// Remove the file from the chatFiles array
@@ -54,17 +54,13 @@
<hr class="my-2 border-gray-100 dark:border-gray-800" />
{/if}
{#if models.length === 1 && models[0]?.pipe?.valves_spec}
<div>
<div class=" font-medium">{$i18n.t('Valves')}</div>
<div>
<Valves valvesSpec={models[0]?.pipe?.valves_spec} bind:valves />
</div>
<Collapsible title={$i18n.t('Valves')}>
<div class="text-sm mt-1.5" slot="content">
<Valves />
</div>
</Collapsible>
<hr class="my-2 border-gray-100 dark:border-gray-800" />
{/if}
<hr class="my-2 border-gray-100 dark:border-gray-800" />
<Collapsible title={$i18n.t('System Prompt')} open={true}>
<div class=" mt-1.5" slot="content">

84
src/lib/components/chat/Settings/Valves.svelte → src/lib/components/chat/Controls/Valves.svelte
View File

@@ -15,18 +15,14 @@
updateUserValvesById as updateFunctionUserValvesById
} from '$lib/apis/functions';
import ManageModal from './Personalization/ManageModal.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import Switch from '$lib/components/common/Switch.svelte';
import Valves from '$lib/components/common/Valves.svelte';
const dispatch = createEventDispatcher();
const i18n = getContext('i18n');
export let saveSettings: Function;
let tab = 'tools';
let selectedId = '';
@@ -35,6 +31,19 @@
let valvesSpec = null;
let valves = {};
let debounceTimer;
const debounceSubmitHandler = async () => {
if (debounceTimer) {
clearTimeout(debounceTimer);
}
// Set a new timer
debounceTimer = setTimeout(() => {
submitHandler();
}, 500); // 0.5 second debounce
};
const getUserValves = async () => {
loading = true;
if (tab === 'tools') {
@@ -112,53 +121,45 @@
dispatch('save');
}}
>
<div class="flex flex-col pr-1.5 overflow-y-scroll max-h-[25rem]">
<div>
<div class="flex items-center justify-between mb-2">
<Tooltip content="">
<div class="text-sm font-medium">
{$i18n.t('Manage Valves')}
</div>
</Tooltip>
<div class=" self-end">
<select
class=" dark:bg-gray-900 w-fit pr-8 rounded text-xs bg-transparent outline-none text-right"
bind:value={tab}
placeholder="Select"
>
<option value="tools">{$i18n.t('Tools')}</option>
<option value="functions">{$i18n.t('Functions')}</option>
</select>
</div>
</div>
</div>
<div class="flex flex-col">
<div class="space-y-1">
<div class="flex gap-2">
<div class="flex-1">
<select
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
class=" w-full rounded text-xs py-2 px-1 bg-transparent outline-none"
bind:value={tab}
placeholder="Select"
>
<option value="tools" class="bg-gray-100 dark:bg-gray-800">{$i18n.t('Tools')}</option>
<option value="functions" class="bg-gray-100 dark:bg-gray-800"
>{$i18n.t('Functions')}</option
>
</select>
</div>
<div class="flex-1">
<select
class="w-full rounded py-2 px-1 text-xs bg-transparent outline-none"
bind:value={selectedId}
on:change={async () => {
await tick();
}}
>
{#if tab === 'tools'}
<option value="" selected disabled class="bg-gray-100 dark:bg-gray-700"
<option value="" selected disabled class="bg-gray-100 dark:bg-gray-800"
>{$i18n.t('Select a tool')}</option
>
{#each $tools as tool, toolIdx}
<option value={tool.id} class="bg-gray-100 dark:bg-gray-700">{tool.name}</option>
<option value={tool.id} class="bg-gray-100 dark:bg-gray-800">{tool.name}</option>
{/each}
{:else if tab === 'functions'}
<option value="" selected disabled class="bg-gray-100 dark:bg-gray-700"
<option value="" selected disabled class="bg-gray-100 dark:bg-gray-800"
>{$i18n.t('Select a function')}</option
>
{#each $functions as func, funcIdx}
<option value={func.id} class="bg-gray-100 dark:bg-700">{func.name}</option>
<option value={func.id} class="bg-gray-100 dark:bg-gray-800">{func.name}</option>
{/each}
{/if}
</select>
@@ -167,24 +168,21 @@
</div>
{#if selectedId}
<hr class="dark:border-gray-800 my-3 w-full" />
<hr class="dark:border-gray-800 my-1 w-full" />
<div>
<div class="my-2 text-xs">
{#if !loading}
<Valves {valvesSpec} bind:valves />
<Valves
{valvesSpec}
bind:valves
on:change={() => {
debounceSubmitHandler();
}}
/>
{:else}
<Spinner className="size-5" />
{/if}
</div>
{/if}
</div>
<div class="flex justify-end text-sm font-medium">
<button
class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
type="submit"
>
{$i18n.t('Save')}
</button>
</div>
</form>

72
src/lib/components/chat/MessageInput.svelte
View File

@@ -98,6 +98,7 @@
const uploadFileHandler = async (file) => {
console.log(file);
// Check if the file is an audio file and transcribe/convert it to text file
if (['audio/mpeg', 'audio/wav'].includes(file['type'])) {
const res = await transcribeAudio(localStorage.token, file).catch((error) => {
@@ -112,40 +113,49 @@
}
}
// Upload the file to the server
const uploadedFile = await uploadFile(localStorage.token, file).catch((error) => {
toast.error(error);
return null;
});
const fileItem = {
type: 'file',
file: '',
id: null,
url: '',
name: file.name,
collection_name: '',
status: '',
size: file.size,
error: ''
};
files = [...files, fileItem];
if (uploadedFile) {
const fileItem = {
type: 'file',
file: uploadedFile,
id: uploadedFile.id,
url: `${WEBUI_API_BASE_URL}/files/${uploadedFile.id}`,
name: file.name,
collection_name: '',
status: 'uploaded',
error: ''
};
files = [...files, fileItem];
try {
const uploadedFile = await uploadFile(localStorage.token, file);
// TODO: Check if tools & functions have files support to skip this step to delegate file processing
// Default Upload to VectorDB
if (
SUPPORTED_FILE_TYPE.includes(file['type']) ||
SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
) {
processFileItem(fileItem);
if (uploadedFile) {
fileItem.status = 'uploaded';
fileItem.file = uploadedFile;
fileItem.id = uploadedFile.id;
fileItem.url = `${WEBUI_API_BASE_URL}/files/${uploadedFile.id}`;
// TODO: Check if tools & functions have files support to skip this step to delegate file processing
// Default Upload to VectorDB
if (
SUPPORTED_FILE_TYPE.includes(file['type']) ||
SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
) {
processFileItem(fileItem);
} else {
toast.error(
$i18n.t(`Unknown file type '{{file_type}}'. Proceeding with the file upload anyway.`, {
file_type: file['type']
})
);
processFileItem(fileItem);
}
} else {
toast.error(
$i18n.t(`Unknown file type '{{file_type}}'. Proceeding with the file upload anyway.`, {
file_type: file['type']
})
);
processFileItem(fileItem);
files = files.filter((item) => item.status !== null);
}
} catch (e) {
toast.error(e);
files = files.filter((item) => item.status !== null);
}
};
@@ -162,7 +172,6 @@
// Remove the failed doc from the files array
// files = files.filter((f) => f.id !== fileItem.id);
toast.error(e);
fileItem.status = 'processed';
files = files;
}
@@ -545,6 +554,7 @@
<FileItem
name={file.name}
type={file.type}
size={file?.size}
status={file.status}
dismissible={true}
on:dismiss={() => {

4
src/lib/components/chat/Messages/ResponseMessage.svelte
View File

@@ -253,7 +253,9 @@
for (const [idx, sentence] of sentences.entries()) {
const res = await synthesizeOpenAISpeech(
localStorage.token,
$settings?.audio?.tts?.voice ?? $config?.audio?.tts?.voice,
$settings?.audio?.tts?.defaultVoice === $config.audio.tts.voice
? $settings?.audio?.tts?.voice ?? $config?.audio?.tts?.voice
: $config?.audio?.tts?.voice,
sentence
).catch((error) => {
toast.error(error);

1
src/lib/components/chat/Messages/UserMessage.svelte
View File

@@ -104,6 +104,7 @@
url={file.url}
name={file.name}
type={file.type}
size={file?.size}
colorClassName="bg-white dark:bg-gray-850 "
/>
{/if}

31
src/lib/components/chat/ModelSelector/Selector.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { marked } from 'marked';
import Fuse from 'fuse.js';
import { flyAndScale } from '$lib/utils/transitions';
import { createEventDispatcher, onMount, getContext, tick } from 'svelte';
@@ -45,17 +46,29 @@
let selectedModelIdx = 0;
$: filteredItems = items.filter(
(item) =>
(searchValue
? item.value.toLowerCase().includes(searchValue.toLowerCase()) ||
item.label.toLowerCase().includes(searchValue.toLowerCase()) ||
(item.model?.info?.meta?.tags ?? []).some((tag) =>
tag.name.toLowerCase().includes(searchValue.toLowerCase())
)
: true) && !(item.model?.info?.meta?.hidden ?? false)
const fuse = new Fuse(
items
.filter((item) => !item.model?.info?.meta?.hidden)
.map((item) => {
const _item = {
...item,
modelName: item.model?.name,
tags: item.model?.info?.meta?.tags?.map((tag) => tag.name).join(' '),
desc: item.model?.info?.meta?.description
};
return _item;
}),
{
keys: ['value', 'label', 'tags', 'desc', 'modelName']
}
);
$: filteredItems = searchValue
? fuse.search(searchValue).map((e) => {
return e.item;
})
: items.filter((item) => !item.model?.info?.meta?.hidden);
const pullModelHandler = async () => {
const sanitizedModelTag = searchValue.trim().replace(/^ollama\s+(run|pull)\s+/, '');

47
src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
View File

@@ -20,6 +20,7 @@
mirostat_tau: null,
top_k: null,
top_p: null,
min_p: null,
tfs_z: null,
num_ctx: null,
num_batch: null,
@@ -385,6 +386,52 @@
{/if}
</div>
<div class=" py-0.5 w-full justify-between">
<div class="flex w-full justify-between">
<div class=" self-center text-xs font-medium">{$i18n.t('Min P')}</div>
<button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none"
type="button"
on:click={() => {
params.min_p = (params?.min_p ?? null) === null ? 0.0 : null;
}}
>
{#if (params?.min_p ?? null) === null}
<span class="ml-2 self-center">{$i18n.t('Default')}</span>
{:else}
<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
{/if}
</button>
</div>
{#if (params?.min_p ?? null) !== null}
<div class="flex mt-0.5 space-x-2">
<div class=" flex-1">
<input
id="steps-range"
type="range"
min="0"
max="1"
step="0.05"
bind:value={params.min_p}
class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
/>
</div>
<div>
<input
bind:value={params.min_p}
type="number"
class=" bg-transparent text-center w-14"
min="0"
max="1"
step="any"
/>
</div>
</div>
{/if}
</div>
<div class=" py-0.5 w-full justify-between">
<div class="flex w-full justify-between">
<div class=" self-center text-xs font-medium">{$i18n.t('Frequency Penalty')}</div>

58
src/lib/components/chat/Settings/Audio.svelte
View File

@@ -1,7 +1,10 @@
<script lang="ts">
import { user, settings, config } from '$lib/stores';
import { createEventDispatcher, onMount, getContext } from 'svelte';
import { toast } from 'svelte-sonner';
import { createEventDispatcher, onMount, getContext } from 'svelte';
import { user, settings, config } from '$lib/stores';
import { getVoices as _getVoices } from '$lib/apis/audio';
import Switch from '$lib/components/common/Switch.svelte';
const dispatch = createEventDispatcher();
@@ -20,26 +23,26 @@
let voices = [];
let voice = '';
const getOpenAIVoices = () => {
voices = [
{ name: 'alloy' },
{ name: 'echo' },
{ name: 'fable' },
{ name: 'onyx' },
{ name: 'nova' },
{ name: 'shimmer' }
];
};
const getVoices = async () => {
if ($config.audio.tts.engine === '') {
const getVoicesLoop = setInterval(async () => {
voices = await speechSynthesis.getVoices();
const getWebAPIVoices = () => {
const getVoicesLoop = setInterval(async () => {
voices = await speechSynthesis.getVoices();
// do your loop
if (voices.length > 0) {
clearInterval(getVoicesLoop);
}
}, 100);
} else {
const res = await _getVoices(localStorage.token).catch((e) => {
toast.error(e);
});
// do your loop
if (voices.length > 0) {
clearInterval(getVoicesLoop);
if (res) {
console.log(res);
voices = res.voices;
}
}, 100);
}
};
const toggleResponseAutoPlayback = async () => {
@@ -58,14 +61,16 @@
responseAutoPlayback = $settings.responseAutoPlayback ?? false;
STTEngine = $settings?.audio?.stt?.engine ?? '';
voice = $settings?.audio?.tts?.voice ?? $config.audio.tts.voice ?? '';
if ($settings?.audio?.tts?.defaultVoice === $config.audio.tts.voice) {
voice = $settings?.audio?.tts?.voice ?? $config.audio.tts.voice ?? '';
} else {
voice = $config.audio.tts.voice ?? '';
}
nonLocalVoices = $settings.audio?.tts?.nonLocalVoices ?? false;
if ($config.audio.tts.engine === 'openai') {
getOpenAIVoices();
} else {
getWebAPIVoices();
}
await getVoices();
});
</script>
@@ -79,6 +84,7 @@
},
tts: {
voice: voice !== '' ? voice : undefined,
defaultVoice: $config?.audio?.tts?.voice ?? '',
nonLocalVoices: $config.audio.tts.engine === '' ? nonLocalVoices : undefined
}
}
@@ -195,7 +201,7 @@
<datalist id="voice-list">
{#each voices as voice}
<option value={voice.name} />
<option value={voice.id}>{voice.name}</option>
{/each}
</datalist>
</div>

32
src/lib/components/chat/SettingsModal.svelte
View File

@@ -15,7 +15,6 @@
import Chats from './Settings/Chats.svelte';
import User from '../icons/User.svelte';
import Personalization from './Settings/Personalization.svelte';
import Valves from './Settings/Valves.svelte';
const i18n = getContext('i18n');
@@ -188,30 +187,6 @@
<div class=" self-center">{$i18n.t('Audio')}</div>
</button>
<button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'valves'
? 'bg-gray-200 dark:bg-gray-800'
: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
on:click={() => {
selectedTab = 'valves';
}}
>
<div class=" self-center mr-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-4"
>
<path
d="M18.75 12.75h1.5a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM12 6a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 6ZM12 18a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 18ZM3.75 6.75h1.5a.75.75 0 1 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM5.25 18.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 0 1.5ZM3 12a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 3 12ZM9 3.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM12.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM9 15.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z"
/>
</svg>
</div>
<div class=" self-center">{$i18n.t('Valves')}</div>
</button>
<button
class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
'chats'
@@ -349,13 +324,6 @@
toast.success($i18n.t('Settings saved successfully!'));
}}
/>
{:else if selectedTab === 'valves'}
<Valves
{saveSettings}
on:save={() => {
toast.success($i18n.t('Settings saved successfully!'));
}}
/>
{:else if selectedTab === 'chats'}
<Chats {saveSettings} />
{:else if selectedTab === 'account'}

22
src/lib/components/common/FileItem.svelte
View File

@@ -15,6 +15,21 @@
export let name: string;
export let type: string;
export let size: number;
function formatSize(size) {
if (size == null) return 'Unknown size';
if (typeof size !== 'number' || size < 0) return 'Invalid size';
if (size === 0) return '0 B';
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
let unitIndex = 0;
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024;
unitIndex++;
}
return `${size.toFixed(1)} ${units[unitIndex]}`;
}
</script>
<div class="relative group">
@@ -93,11 +108,11 @@
</div>
<div class="flex flex-col justify-center -space-y-0.5 pl-1.5 pr-4 w-full">
<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1">
<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1 mb-1">
{name}
</div>
<div class=" text-gray-500 text-xs">
<div class=" flex justify-between text-gray-500 text-xs">
{#if type === 'file'}
{$i18n.t('File')}
{:else if type === 'doc'}
@@ -107,6 +122,9 @@
{:else}
<span class=" capitalize">{type}</span>
{/if}
{#if size}
<span class="capitalize">{formatSize(size)}</span>
{/if}
</div>
</div>
</button>

21
src/lib/components/common/ImagePreview.svelte
View File

@@ -7,6 +7,8 @@
let mounted = false;
let previewElement = null;
const downloadImage = (url, filename) => {
fetch(url)
.then((response) => response.blob())
@@ -34,14 +36,14 @@
mounted = true;
});
$: if (mounted) {
if (show) {
window.addEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'hidden';
} else {
window.removeEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'unset';
}
$: if (show && previewElement) {
document.body.appendChild(previewElement);
window.addEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'hidden';
} else if (previewElement) {
window.removeEventListener('keydown', handleKeyDown);
document.body.removeChild(previewElement);
document.body.style.overflow = 'unset';
}
</script>
@@ -49,7 +51,8 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain"
bind:this={previewElement}
class="modal fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
>
<div class=" absolute left-0 w-full flex justify-between">
<div>

4
src/lib/components/common/SensitiveInput.svelte
View File

@@ -13,13 +13,13 @@
<div class={outerClassName}>
<input
class={inputClassName}
class={`${inputClassName} ${show ? '' : 'password'}`}
{placeholder}
bind:value
required={required && !readOnly}
disabled={readOnly}
autocomplete="off"
{...{ type: show ? 'text' : 'password' }}
type="text"
/>
<button
class={showButtonClassName}

22
src/lib/components/common/Valves.svelte
View File

@@ -1,5 +1,6 @@
<script>
import { onMount, getContext } from 'svelte';
import { onMount, getContext, createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
const i18n = getContext('i18n');
import Switch from './Switch.svelte';
@@ -8,7 +9,7 @@
export let valves = {};
</script>
{#if valvesSpec}
{#if valvesSpec && Object.keys(valvesSpec?.properties ?? {}).length}
{#each Object.keys(valvesSpec.properties) as property, idx}
<div class=" py-0.5 w-full justify-between">
<div class="flex w-full justify-between">
@@ -28,6 +29,8 @@
(valves[property] ?? null) === null
? valvesSpec.properties[property]?.default ?? ''
: null;
dispatch('change');
}}
>
{#if (valves[property] ?? null) === null}
@@ -52,6 +55,9 @@
<select
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none border border-gray-100 dark:border-gray-800"
bind:value={valves[property]}
on:change={() => {
dispatch('change');
}}
>
{#each valvesSpec.properties[property].enum as option}
<option value={option} selected={option === valves[property]}>
@@ -66,7 +72,12 @@
</div>
<div class=" pr-2">
<Switch bind:state={valves[property]} />
<Switch
bind:state={valves[property]}
on:change={() => {
dispatch('change');
}}
/>
</div>
</div>
{:else}
@@ -77,6 +88,9 @@
bind:value={valves[property]}
autocomplete="off"
required
on:change={() => {
dispatch('change');
}}
/>
{/if}
</div>
@@ -91,5 +105,5 @@
</div>
{/each}
{:else}
<div class="text-sm">No valves</div>
<div class="text-xs">No valves</div>
{/if}