forked from open-webui/open-webui
		
	Merge branch 'dev' into feat/add-i18n
This commit is contained in:
		
						commit
						b8902072fd
					
				
					 27 changed files with 802 additions and 493 deletions
				
			
		|  | @ -77,3 +77,65 @@ export const getVersionUpdates = async () => { | |||
| 
 | ||||
| 	return res; | ||||
| }; | ||||
| 
 | ||||
| export const getModelFilterConfig = async (token: string) => { | ||||
| 	let error = null; | ||||
| 
 | ||||
| 	const res = await fetch(`${WEBUI_BASE_URL}/api/config/model/filter`, { | ||||
| 		method: 'GET', | ||||
| 		headers: { | ||||
| 			'Content-Type': 'application/json', | ||||
| 			Authorization: `Bearer ${token}` | ||||
| 		} | ||||
| 	}) | ||||
| 		.then(async (res) => { | ||||
| 			if (!res.ok) throw await res.json(); | ||||
| 			return res.json(); | ||||
| 		}) | ||||
| 		.catch((err) => { | ||||
| 			console.log(err); | ||||
| 			error = err; | ||||
| 			return null; | ||||
| 		}); | ||||
| 
 | ||||
| 	if (error) { | ||||
| 		throw error; | ||||
| 	} | ||||
| 
 | ||||
| 	return res; | ||||
| }; | ||||
| 
 | ||||
| export const updateModelFilterConfig = async ( | ||||
| 	token: string, | ||||
| 	enabled: boolean, | ||||
| 	models: string[] | ||||
| ) => { | ||||
| 	let error = null; | ||||
| 
 | ||||
| 	const res = await fetch(`${WEBUI_BASE_URL}/api/config/model/filter`, { | ||||
| 		method: 'POST', | ||||
| 		headers: { | ||||
| 			'Content-Type': 'application/json', | ||||
| 			Authorization: `Bearer ${token}` | ||||
| 		}, | ||||
| 		body: JSON.stringify({ | ||||
| 			enabled: enabled, | ||||
| 			models: models | ||||
| 		}) | ||||
| 	}) | ||||
| 		.then(async (res) => { | ||||
| 			if (!res.ok) throw await res.json(); | ||||
| 			return res.json(); | ||||
| 		}) | ||||
| 		.catch((err) => { | ||||
| 			console.log(err); | ||||
| 			error = err; | ||||
| 			return null; | ||||
| 		}); | ||||
| 
 | ||||
| 	if (error) { | ||||
| 		throw error; | ||||
| 	} | ||||
| 
 | ||||
| 	return res; | ||||
| }; | ||||
|  |  | |||
|  | @ -252,7 +252,7 @@ export const queryCollection = async ( | |||
| 	token: string, | ||||
| 	collection_names: string, | ||||
| 	query: string, | ||||
| 	k: number | ||||
| 	k: number | null = null | ||||
| ) => { | ||||
| 	let error = null; | ||||
| 
 | ||||
|  |  | |||
|  | @ -1,12 +1,17 @@ | |||
| <script lang="ts"> | ||||
| 	import { getModelFilterConfig, updateModelFilterConfig } from '$lib/apis'; | ||||
| 	import { getSignUpEnabledStatus, toggleSignUpEnabledStatus } from '$lib/apis/auths'; | ||||
| 	import { getUserPermissions, updateUserPermissions } from '$lib/apis/users'; | ||||
| 
 | ||||
| 	import { onMount, getContext } from 'svelte'; | ||||
| 	import { models } from '$lib/stores'; | ||||
| 
 | ||||
| 	const i18n = getContext('i18n'); | ||||
| 
 | ||||
| 	export let saveHandler: Function; | ||||
| 
 | ||||
| 	let whitelistEnabled = false; | ||||
| 	let whitelistModels = ['']; | ||||
| 	let permissions = { | ||||
| 		chat: { | ||||
| 			deletion: true | ||||
|  | @ -15,6 +20,13 @@ | |||
| 
 | ||||
| 	onMount(async () => { | ||||
| 		permissions = await getUserPermissions(localStorage.token); | ||||
| 
 | ||||
| 		const res = await getModelFilterConfig(localStorage.token); | ||||
| 		if (res) { | ||||
| 			whitelistEnabled = res.enabled; | ||||
| 
 | ||||
| 			whitelistModels = res.models.length > 0 ? res.models : ['']; | ||||
| 		} | ||||
| 	}); | ||||
| </script> | ||||
| 
 | ||||
|  | @ -23,6 +35,8 @@ | |||
| 	on:submit|preventDefault={async () => { | ||||
| 		// console.log('submit'); | ||||
| 		await updateUserPermissions(localStorage.token, permissions); | ||||
| 
 | ||||
| 		await updateModelFilterConfig(localStorage.token, whitelistEnabled, whitelistModels); | ||||
| 		saveHandler(); | ||||
| 	}} | ||||
| > | ||||
|  | @ -71,6 +85,106 @@ | |||
| 				</button> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 
 | ||||
| 		<hr class=" dark:border-gray-700 my-2" /> | ||||
| 
 | ||||
| 		<div class="mt-2 space-y-3 pr-1.5"> | ||||
| 			<div> | ||||
| 				<div class="mb-2"> | ||||
| 					<div class="flex justify-between items-center text-xs"> | ||||
| 						<div class=" text-sm font-medium">Manage Models</div> | ||||
| 					</div> | ||||
| 				</div> | ||||
| 
 | ||||
| 				<div class=" space-y-3"> | ||||
| 					<div> | ||||
| 						<div class="flex justify-between items-center text-xs"> | ||||
| 							<div class=" text-xs font-medium">Model Whitelisting</div> | ||||
| 
 | ||||
| 							<button | ||||
| 								class=" text-xs font-medium text-gray-500" | ||||
| 								type="button" | ||||
| 								on:click={() => { | ||||
| 									whitelistEnabled = !whitelistEnabled; | ||||
| 								}}>{whitelistEnabled ? 'On' : 'Off'}</button | ||||
| 							> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 
 | ||||
| 					{#if whitelistEnabled} | ||||
| 						<div> | ||||
| 							<div class=" space-y-1.5"> | ||||
| 								{#each whitelistModels as modelId, modelIdx} | ||||
| 									<div class="flex w-full"> | ||||
| 										<div class="flex-1 mr-2"> | ||||
| 											<select | ||||
| 												class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 												bind:value={modelId} | ||||
| 												placeholder="Select a model" | ||||
| 											> | ||||
| 												<option value="" disabled selected>Select a model</option> | ||||
| 												{#each $models.filter((model) => model.id) as model} | ||||
| 													<option value={model.id} class="bg-gray-100 dark:bg-gray-700" | ||||
| 														>{model.name}</option | ||||
| 													> | ||||
| 												{/each} | ||||
| 											</select> | ||||
| 										</div> | ||||
| 
 | ||||
| 										{#if modelIdx === 0} | ||||
| 											<button | ||||
| 												class="px-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-900 dark:text-white rounded-lg transition" | ||||
| 												type="button" | ||||
| 												on:click={() => { | ||||
| 													if (whitelistModels.at(-1) !== '') { | ||||
| 														whitelistModels = [...whitelistModels, '']; | ||||
| 													} | ||||
| 												}} | ||||
| 											> | ||||
| 												<svg | ||||
| 													xmlns="http://www.w3.org/2000/svg" | ||||
| 													viewBox="0 0 16 16" | ||||
| 													fill="currentColor" | ||||
| 													class="w-4 h-4" | ||||
| 												> | ||||
| 													<path | ||||
| 														d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" | ||||
| 													/> | ||||
| 												</svg> | ||||
| 											</button> | ||||
| 										{:else} | ||||
| 											<button | ||||
| 												class="px-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-900 dark:text-white rounded-lg transition" | ||||
| 												type="button" | ||||
| 												on:click={() => { | ||||
| 													whitelistModels.splice(modelIdx, 1); | ||||
| 													whitelistModels = whitelistModels; | ||||
| 												}} | ||||
| 											> | ||||
| 												<svg | ||||
| 													xmlns="http://www.w3.org/2000/svg" | ||||
| 													viewBox="0 0 16 16" | ||||
| 													fill="currentColor" | ||||
| 													class="w-4 h-4" | ||||
| 												> | ||||
| 													<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" /> | ||||
| 												</svg> | ||||
| 											</button> | ||||
| 										{/if} | ||||
| 									</div> | ||||
| 								{/each} | ||||
| 							</div> | ||||
| 
 | ||||
| 							<div class="flex justify-end items-center text-xs mt-1.5 text-right"> | ||||
| 								<div class=" text-xs font-medium"> | ||||
| 									{whitelistModels.length} Model(s) Whitelisted | ||||
| 								</div> | ||||
| 							</div> | ||||
| 						</div> | ||||
| 					{/if} | ||||
| 				</div> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 	</div> | ||||
| 
 | ||||
| 	<div class="flex justify-end pt-3 text-sm font-medium"> | ||||
|  |  | |||
|  | @ -364,12 +364,12 @@ | |||
| 
 | ||||
| {#if dragged} | ||||
| 	<div | ||||
| 		class="fixed w-full h-full flex z-50 touch-none pointer-events-none" | ||||
| 		class="fixed lg:w-[calc(100%-260px)] w-full h-full flex z-50 touch-none pointer-events-none" | ||||
| 		id="dropzone" | ||||
| 		role="region" | ||||
| 		aria-label="Drag and Drop Container" | ||||
| 	> | ||||
| 		<div class="absolute rounded-xl w-full h-full backdrop-blur bg-gray-800/40 flex justify-center"> | ||||
| 		<div class="absolute w-full h-full backdrop-blur bg-gray-800/40 flex justify-center"> | ||||
| 			<div class="m-auto pt-64 flex flex-col justify-center"> | ||||
| 				<div class="max-w-md"> | ||||
| 					<AddFilesPlaceholder /> | ||||
|  |  | |||
|  | @ -111,7 +111,9 @@ | |||
| 					<button | ||||
| 						class="relative rounded-full dark:bg-gray-700" | ||||
| 						type="button" | ||||
| 						on:click={profileImageInputElement.click} | ||||
| 						on:click={() => { | ||||
| 							profileImageInputElement.click(); | ||||
| 						}} | ||||
| 					> | ||||
| 						<img | ||||
| 							src={profileImageUrl !== '' ? profileImageUrl : '/user.png'} | ||||
|  | @ -271,7 +273,7 @@ | |||
| 
 | ||||
| 	<div class="flex justify-end pt-3 text-sm font-medium"> | ||||
| 		<button | ||||
| 			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded" | ||||
| 			class="  px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg" | ||||
| 			on:click={async () => { | ||||
| 				const res = await submitHandler(); | ||||
| 
 | ||||
|  |  | |||
|  | @ -259,7 +259,7 @@ | |||
| 
 | ||||
| 	<div class="flex justify-end pt-3 text-sm font-medium"> | ||||
| 		<button | ||||
| 			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded" | ||||
| 			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg" | ||||
| 			type="submit" | ||||
| 		> | ||||
| 			{$i18n.t('Save')} | ||||
|  |  | |||
|  | @ -172,7 +172,9 @@ | |||
| 			/> | ||||
| 			<button | ||||
| 				class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition" | ||||
| 				on:click={chatImportInputElement.click} | ||||
| 				on:click={() => { | ||||
| 					chatImportInputElement.click(); | ||||
| 				}} | ||||
| 			> | ||||
| 				<div class=" self-center mr-3"> | ||||
| 					<svg | ||||
|  |  | |||
|  | @ -249,7 +249,7 @@ | |||
| 
 | ||||
| 	<div class="flex justify-end pt-3 text-sm font-medium"> | ||||
| 		<button | ||||
| 			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded" | ||||
| 			class="  px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg" | ||||
| 			type="submit" | ||||
| 		> | ||||
| 			{$i18n.t('Save')} | ||||
|  |  | |||
|  | @ -272,7 +272,7 @@ | |||
| 
 | ||||
| 	<div class="flex justify-end pt-3 text-sm font-medium"> | ||||
| 		<button | ||||
| 			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded" | ||||
| 			class="  px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg" | ||||
| 			on:click={() => { | ||||
| 				saveSettings({ | ||||
| 					system: system !== '' ? system : undefined, | ||||
|  |  | |||
|  | @ -301,7 +301,7 @@ | |||
| 
 | ||||
| 	<div class="flex justify-end pt-3 text-sm font-medium"> | ||||
| 		<button | ||||
| 			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded flex flex-row space-x-1 items-center {loading | ||||
| 			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 {loading | ||||
| 				? ' cursor-not-allowed' | ||||
| 				: ''}" | ||||
| 			type="submit" | ||||
|  |  | |||
|  | @ -65,6 +65,7 @@ | |||
| 		} | ||||
| 
 | ||||
| 		saveSettings({ | ||||
| 			titleAutoGenerateModel: titleAutoGenerateModel !== '' ? titleAutoGenerateModel : undefined, | ||||
| 			titleGenerationPrompt: titleGenerationPrompt ? titleGenerationPrompt : undefined | ||||
| 		}); | ||||
| 	}; | ||||
|  | @ -192,7 +193,7 @@ | |||
| 			<div class="flex w-full"> | ||||
| 				<div class="flex-1 mr-2"> | ||||
| 					<select | ||||
| 						class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none" | ||||
| 						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 						bind:value={titleAutoGenerateModel} | ||||
| 						placeholder={$i18n.t('Select a model')} | ||||
| 					> | ||||
|  | @ -206,35 +207,13 @@ | |||
| 						{/each} | ||||
| 					</select> | ||||
| 				</div> | ||||
| 				<button | ||||
| 					class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-800 dark:text-gray-100 rounded transition" | ||||
| 					on:click={() => { | ||||
| 						saveSettings({ | ||||
| 							titleAutoGenerateModel: | ||||
| 								titleAutoGenerateModel !== '' ? titleAutoGenerateModel : undefined | ||||
| 						}); | ||||
| 					}} | ||||
| 					type="button" | ||||
| 				> | ||||
| 					<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="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z" | ||||
| 							clip-rule="evenodd" | ||||
| 						/> | ||||
| 					</svg> | ||||
| 				</button> | ||||
| 			</div> | ||||
| 			<div class="mt-3"> | ||||
| 
 | ||||
| 			<div class="mt-3 mr-2"> | ||||
| 				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Title Generation Prompt')}</div> | ||||
| 				<textarea | ||||
| 					bind:value={titleGenerationPrompt} | ||||
| 					class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none" | ||||
| 					class="w-full rounded-lg p-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none resize-none" | ||||
| 					rows="3" | ||||
| 				/> | ||||
| 			</div> | ||||
|  | @ -329,7 +308,7 @@ | |||
| 
 | ||||
| 	<div class="flex justify-end pt-3 text-sm font-medium"> | ||||
| 		<button | ||||
| 			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded" | ||||
| 			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg" | ||||
| 			type="submit" | ||||
| 		> | ||||
| 			{$i18n.t('Save')} | ||||
|  |  | |||
|  | @ -613,7 +613,9 @@ | |||
| 											<button | ||||
| 												type="button" | ||||
| 												class="w-full rounded-lg text-left py-2 px-4 dark:text-gray-300 dark:bg-gray-850" | ||||
| 												on:click={modelUploadInputElement.click} | ||||
| 												on:click={() => { | ||||
| 													modelUploadInputElement.click(); | ||||
| 												}} | ||||
| 											> | ||||
| 												{#if modelInputFile && modelInputFile.length > 0} | ||||
| 													{modelInputFile[0].name} | ||||
|  | @ -737,264 +739,193 @@ | |||
| 		<div class=" space-y-3"> | ||||
| 			<div class="mt-2 space-y-3 pr-1.5"> | ||||
| 				<div> | ||||
| 					<div class=" mb-2 text-sm font-medium">{$i18n.t('Manage LiteLLM Models')}</div> | ||||
| 
 | ||||
| 					<div> | ||||
| 					<div class="mb-2"> | ||||
| 						<div class="flex justify-between items-center text-xs"> | ||||
| 							<div class=" text-sm font-medium">{$i18n.t('Add a model')}</div> | ||||
| 							<div class=" text-sm font-medium">{$i18n.t('Manage LiteLLM Models')}</div> | ||||
| 							<button | ||||
| 								class=" text-xs font-medium text-gray-500" | ||||
| 								type="button" | ||||
| 								on:click={() => { | ||||
| 									showLiteLLMParams = !showLiteLLMParams; | ||||
| 								}} | ||||
| 								>{showLiteLLMParams | ||||
| 									? $i18n.t('Hide Additional Params') | ||||
| 									: $i18n.t('Show Additional Params')}</button | ||||
| 									showLiteLLM = !showLiteLLM; | ||||
| 								}}>{showLiteLLM ? $i18n.t('Hide') : $i18n.t('Show')}</button | ||||
| 							> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 
 | ||||
| 					<div class="my-2 space-y-2"> | ||||
| 						<div class="flex w-full mb-1.5"> | ||||
| 							<div class="flex-1 mr-2"> | ||||
| 								<input | ||||
| 									class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 									placeholder="Enter LiteLLM Model (litellm_params.model)" | ||||
| 									bind:value={liteLLMModel} | ||||
| 									autocomplete="off" | ||||
| 								/> | ||||
| 					{#if showLiteLLM} | ||||
| 						<div> | ||||
| 							<div class="flex justify-between items-center text-xs"> | ||||
| 								<div class=" text-sm font-medium">Add a model</div> | ||||
| 								<button | ||||
| 									class=" text-xs font-medium text-gray-500" | ||||
| 									type="button" | ||||
| 									on:click={() => { | ||||
| 										showLiteLLMParams = !showLiteLLMParams; | ||||
| 									}} | ||||
| 									>{showLiteLLMParams ? $i18n.t('Hide Additional Params') : $i18n.t('Show Additional Params')}</button | ||||
| 								> | ||||
| 							</div> | ||||
| 						</div> | ||||
| 
 | ||||
| 						<div class="my-2 space-y-2"> | ||||
| 							<div class="flex w-full mb-1.5"> | ||||
| 								<div class="flex-1 mr-2"> | ||||
| 									<input | ||||
| 										class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 										placeholder="Enter LiteLLM Model (litellm_params.model)" | ||||
| 										bind:value={liteLLMModel} | ||||
| 										autocomplete="off" | ||||
| 									/> | ||||
| 								</div> | ||||
| 
 | ||||
| 								<button | ||||
| 									class="px-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition" | ||||
| 									on:click={() => { | ||||
| 										addLiteLLMModelHandler(); | ||||
| 									}} | ||||
| 								> | ||||
| 									<svg | ||||
| 										xmlns="http://www.w3.org/2000/svg" | ||||
| 										viewBox="0 0 16 16" | ||||
| 										fill="currentColor" | ||||
| 										class="w-4 h-4" | ||||
| 									> | ||||
| 										<path | ||||
| 											d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" | ||||
| 										/> | ||||
| 									</svg> | ||||
| 								</button> | ||||
| 							</div> | ||||
| 
 | ||||
| 							<button | ||||
| 								class="px-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition" | ||||
| 								on:click={() => { | ||||
| 									addLiteLLMModelHandler(); | ||||
| 								}} | ||||
| 							{#if showLiteLLMParams} | ||||
| 								<div> | ||||
| 									<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Model Name')}</div> | ||||
| 									<div class="flex w-full"> | ||||
| 										<div class="flex-1"> | ||||
| 											<input | ||||
| 												class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 												placeholder="Enter Model Name (model_name)" | ||||
| 												bind:value={liteLLMModelName} | ||||
| 												autocomplete="off" | ||||
| 											/> | ||||
| 										</div> | ||||
| 									</div> | ||||
| 								</div> | ||||
| 
 | ||||
| 								<div> | ||||
| 									<div class=" mb-1.5 text-sm font-medium">API Base URL</div> | ||||
| 									<div class="flex w-full"> | ||||
| 										<div class="flex-1"> | ||||
| 											<input | ||||
| 												class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 												placeholder="Enter LiteLLM API Base URL (litellm_params.api_base)" | ||||
| 												bind:value={liteLLMAPIBase} | ||||
| 												autocomplete="off" | ||||
| 											/> | ||||
| 										</div> | ||||
| 									</div> | ||||
| 								</div> | ||||
| 
 | ||||
| 								<div> | ||||
| 									<div class=" mb-1.5 text-sm font-medium">API Key</div> | ||||
| 									<div class="flex w-full"> | ||||
| 										<div class="flex-1"> | ||||
| 											<input | ||||
| 												class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 												placeholder="Enter LiteLLM API Key (litellm_params.api_key)" | ||||
| 												bind:value={liteLLMAPIKey} | ||||
| 												autocomplete="off" | ||||
| 											/> | ||||
| 										</div> | ||||
| 									</div> | ||||
| 								</div> | ||||
| 
 | ||||
| 								<div> | ||||
| 									<div class="mb-1.5 text-sm font-medium">API RPM</div> | ||||
| 									<div class="flex w-full"> | ||||
| 										<div class="flex-1"> | ||||
| 											<input | ||||
| 												class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 												placeholder="Enter LiteLLM API RPM (litellm_params.rpm)" | ||||
| 												bind:value={liteLLMRPM} | ||||
| 												autocomplete="off" | ||||
| 											/> | ||||
| 										</div> | ||||
| 									</div> | ||||
| 								</div> | ||||
| 
 | ||||
| 								<div> | ||||
| 									<div class="mb-1.5 text-sm font-medium">Max Tokens</div> | ||||
| 									<div class="flex w-full"> | ||||
| 										<div class="flex-1"> | ||||
| 											<input | ||||
| 												class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 												placeholder="Enter Max Tokens (litellm_params.max_tokens)" | ||||
| 												bind:value={liteLLMMaxTokens} | ||||
| 												type="number" | ||||
| 												min="1" | ||||
| 												autocomplete="off" | ||||
| 											/> | ||||
| 										</div> | ||||
| 									</div> | ||||
| 								</div> | ||||
| 							{/if} | ||||
| 						</div> | ||||
| 
 | ||||
| 						<div class="mb-2 text-xs text-gray-400 dark:text-gray-500"> | ||||
| 							Not sure what to add? | ||||
| 							<a | ||||
| 								class=" text-gray-300 font-medium underline" | ||||
| 								href="https://litellm.vercel.app/docs/proxy/configs#quick-start" | ||||
| 								target="_blank" | ||||
| 							> | ||||
| 								<svg | ||||
| 									xmlns="http://www.w3.org/2000/svg" | ||||
| 									viewBox="0 0 16 16" | ||||
| 									fill="currentColor" | ||||
| 									class="w-4 h-4" | ||||
| 								> | ||||
| 									<path | ||||
| 										d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" | ||||
| 									/> | ||||
| 								</svg> | ||||
| 							</button> | ||||
| 						</div> | ||||
| 
 | ||||
| 						{#if showLiteLLMParams} | ||||
| 							<div> | ||||
| 								<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Model Name')}</div> | ||||
| 								<div class="flex w-full"> | ||||
| 									<div class="flex-1"> | ||||
| 										<input | ||||
| 											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 											placeholder="Enter Model Name (model_name)" | ||||
| 											bind:value={liteLLMModelName} | ||||
| 											autocomplete="off" | ||||
| 										/> | ||||
| 									</div> | ||||
| 								</div> | ||||
| 							</div> | ||||
| 
 | ||||
| 							<div> | ||||
| 								<div class=" mb-1.5 text-sm font-medium">{$i18n.t('API Base URL')}</div> | ||||
| 								<div class="flex w-full"> | ||||
| 									<div class="flex-1"> | ||||
| 										<input | ||||
| 											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 											placeholder="Enter LiteLLM API Base URL (litellm_params.api_base)" | ||||
| 											bind:value={liteLLMAPIBase} | ||||
| 											autocomplete="off" | ||||
| 										/> | ||||
| 									</div> | ||||
| 								</div> | ||||
| 							</div> | ||||
| 
 | ||||
| 							<div> | ||||
| 								<div class=" mb-1.5 text-sm font-medium">{$i18n.t('API Key')}</div> | ||||
| 								<div class="flex w-full"> | ||||
| 									<div class="flex-1"> | ||||
| 										<input | ||||
| 											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 											placeholder="Enter LiteLLM API Key (litellm_params.api_key)" | ||||
| 											bind:value={liteLLMAPIKey} | ||||
| 											autocomplete="off" | ||||
| 										/> | ||||
| 									</div> | ||||
| 								</div> | ||||
| 							</div> | ||||
| 
 | ||||
| 							<div> | ||||
| 								<div class="mb-1.5 text-sm font-medium">{$i18n.t('API RPM')}</div> | ||||
| 								<div class="flex w-full"> | ||||
| 									<div class="flex-1"> | ||||
| 										<input | ||||
| 											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 											placeholder="Enter LiteLLM API RPM (litellm_params.rpm)" | ||||
| 											bind:value={liteLLMRPM} | ||||
| 											autocomplete="off" | ||||
| 										/> | ||||
| 									</div> | ||||
| 								</div> | ||||
| 							</div> | ||||
| 
 | ||||
| 							<div> | ||||
| 								<div class="mb-1.5 text-sm font-medium">Max Tokens</div> | ||||
| 								<div class="flex w-full"> | ||||
| 									<div class="flex-1"> | ||||
| 										<input | ||||
| 											class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 											placeholder="Enter Max Tokens (litellm_params.max_tokens)" | ||||
| 											bind:value={liteLLMMaxTokens} | ||||
| 											type="number" | ||||
| 											min="1" | ||||
| 											autocomplete="off" | ||||
| 										/> | ||||
| 									</div> | ||||
| 								</div> | ||||
| 							</div> | ||||
| 						{/if} | ||||
| 					</div> | ||||
| 
 | ||||
| 					<div class="mb-2 text-xs text-gray-400 dark:text-gray-500"> | ||||
| 						{$i18n.t('Not sure what to add?')} | ||||
| 						<a | ||||
| 							class=" text-gray-300 font-medium underline" | ||||
| 							href="https://litellm.vercel.app/docs/proxy/configs#quick-start" | ||||
| 							target="_blank" | ||||
| 						> | ||||
| 							{$i18n.t('Click here for help')} | ||||
| 						</a> | ||||
| 					</div> | ||||
| 
 | ||||
| 					<div> | ||||
| 						<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Delete a model')}</div> | ||||
| 						<div class="flex w-full"> | ||||
| 							<div class="flex-1 mr-2"> | ||||
| 								<select | ||||
| 									class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 									bind:value={deleteLiteLLMModelId} | ||||
| 									placeholder={$i18n.t('Select a model')} | ||||
| 								> | ||||
| 									{#if !deleteLiteLLMModelId} | ||||
| 										<option value="" disabled selected>{$i18n.t('Select a model')}</option> | ||||
| 									{/if} | ||||
| 									{#each liteLLMModelInfo as model} | ||||
| 										<option value={model.model_info.id} class="bg-gray-100 dark:bg-gray-700" | ||||
| 											>{model.model_name}</option | ||||
| 										> | ||||
| 									{/each} | ||||
| 								</select> | ||||
| 							</div> | ||||
| 							<button | ||||
| 								class="px-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition" | ||||
| 								on:click={() => { | ||||
| 									deleteLiteLLMModelHandler(); | ||||
| 								}} | ||||
| 							> | ||||
| 								<svg | ||||
| 									xmlns="http://www.w3.org/2000/svg" | ||||
| 									viewBox="0 0 16 16" | ||||
| 									fill="currentColor" | ||||
| 									class="w-4 h-4" | ||||
| 								> | ||||
| 									<path | ||||
| 										fill-rule="evenodd" | ||||
| 										d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z" | ||||
| 										clip-rule="evenodd" | ||||
| 									/> | ||||
| 								</svg> | ||||
| 							</button> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 				</div> | ||||
| 			</div> | ||||
| 
 | ||||
| 			<!-- <div class="mt-2 space-y-3 pr-1.5"> | ||||
| 				<div> | ||||
| 					<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Add LiteLLM Model')}</div> | ||||
| 					<div class="flex w-full mb-2"> | ||||
| 						<div class="flex-1"> | ||||
| 							<input | ||||
| 								class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none" | ||||
| 								placeholder="Enter LiteLLM Model (e.g. ollama/mistral)" | ||||
| 								bind:value={liteLLMModel} | ||||
| 								autocomplete="off" | ||||
| 							/> | ||||
| 						</div> | ||||
| 					</div> | ||||
| 
 | ||||
| 					<div class="flex justify-between items-center text-sm"> | ||||
| 						<div class="  font-medium">{$i18n.t('Advanced Model Params')}</div> | ||||
| 						<button | ||||
| 							class=" text-xs font-medium text-gray-500" | ||||
| 							type="button" | ||||
| 							on:click={() => { | ||||
| 								showLiteLLMParams = !showLiteLLMParams; | ||||
| 							}}>{showLiteLLMParams ? 'Hide' : 'Show'}</button | ||||
| 						> | ||||
| 					</div> | ||||
| 
 | ||||
| 					{#if showLiteLLMParams} | ||||
| 						<div> | ||||
| 							<div class=" mb-2.5 text-sm font-medium">{$i18n.t('LiteLLM API Key')}</div> | ||||
| 							<div class="flex w-full"> | ||||
| 								<div class="flex-1"> | ||||
| 									<input | ||||
| 										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none" | ||||
| 										placeholder="Enter LiteLLM API Key (e.g. os.environ/AZURE_API_KEY_CA)" | ||||
| 										bind:value={liteLLMAPIKey} | ||||
| 										autocomplete="off" | ||||
| 									/> | ||||
| 								</div> | ||||
| 							</div> | ||||
| 								Click here for help. | ||||
| 							</a> | ||||
| 						</div> | ||||
| 
 | ||||
| 						<div> | ||||
| 							<div class=" mb-2.5 text-sm font-medium">{$i18n.t('LiteLLM API Base URL')}</div> | ||||
| 							<div class=" mb-2.5 text-sm font-medium">Delete a model</div> | ||||
| 							<div class="flex w-full"> | ||||
| 								<div class="flex-1"> | ||||
| 									<input | ||||
| 										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none" | ||||
| 										placeholder="Enter LiteLLM API Base URL" | ||||
| 										bind:value={liteLLMAPIBase} | ||||
| 										autocomplete="off" | ||||
| 									/> | ||||
| 								</div> | ||||
| 							</div> | ||||
| 						</div> | ||||
| 
 | ||||
| 						<div> | ||||
| 							<div class=" mb-2.5 text-sm font-medium">{$i18n.t('LiteLLM API RPM')}</div> | ||||
| 							<div class="flex w-full"> | ||||
| 								<div class="flex-1"> | ||||
| 									<input | ||||
| 										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none" | ||||
| 										placeholder="Enter LiteLLM API RPM" | ||||
| 										bind:value={liteLLMRPM} | ||||
| 										autocomplete="off" | ||||
| 									/> | ||||
| 								<div class="flex-1 mr-2"> | ||||
| 									<select | ||||
| 										class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" | ||||
| 										bind:value={deleteLiteLLMModelId} | ||||
| 										placeholder="Select a model" | ||||
| 									> | ||||
| 										{#if !deleteLiteLLMModelId} | ||||
| 											<option value="" disabled selected>Select a model</option> | ||||
| 										{/if} | ||||
| 										{#each liteLLMModelInfo as model} | ||||
| 											<option value={model.model_info.id} class="bg-gray-100 dark:bg-gray-700" | ||||
| 												>{model.model_name}</option | ||||
| 											> | ||||
| 										{/each} | ||||
| 									</select> | ||||
| 								</div> | ||||
| 								<button | ||||
| 									class="px-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition" | ||||
| 									on:click={() => { | ||||
| 										deleteLiteLLMModelHandler(); | ||||
| 									}} | ||||
| 								> | ||||
| 									<svg | ||||
| 										xmlns="http://www.w3.org/2000/svg" | ||||
| 										viewBox="0 0 16 16" | ||||
| 										fill="currentColor" | ||||
| 										class="w-4 h-4" | ||||
| 									> | ||||
| 										<path | ||||
| 											fill-rule="evenodd" | ||||
| 											d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z" | ||||
| 											clip-rule="evenodd" | ||||
| 										/> | ||||
| 									</svg> | ||||
| 								</button> | ||||
| 							</div> | ||||
| 						</div> | ||||
| 					{/if} | ||||
| 
 | ||||
| 					<div class="mt-2 text-xs text-gray-400 dark:text-gray-500"> | ||||
| 						Not sure what to add? | ||||
| 						<a | ||||
| 							class=" text-gray-300 font-medium underline" | ||||
| 							href="https://litellm.vercel.app/docs/proxy/configs#quick-start" | ||||
| 							target="_blank" | ||||
| 						> | ||||
| 							Click here for help. | ||||
| 						</a> | ||||
| 					</div> | ||||
| 				</div> | ||||
| 			</div> --> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 	</div> | ||||
| </div> | ||||
| </div> | ||||
|  | @ -329,7 +329,7 @@ | |||
| 						{getModels} | ||||
| 						{saveSettings} | ||||
| 						on:save={() => { | ||||
| 							show = false; | ||||
| 							toast.success('Settings saved successfully!'); | ||||
| 						}} | ||||
| 					/> | ||||
| 				{:else if selectedTab === 'models'} | ||||
|  | @ -338,28 +338,28 @@ | |||
| 					<Connections | ||||
| 						{getModels} | ||||
| 						on:save={() => { | ||||
| 							show = false; | ||||
| 							toast.success('Settings saved successfully!'); | ||||
| 						}} | ||||
| 					/> | ||||
| 				{:else if selectedTab === 'interface'} | ||||
| 					<Interface | ||||
| 						{saveSettings} | ||||
| 						on:save={() => { | ||||
| 							show = false; | ||||
| 							toast.success('Settings saved successfully!'); | ||||
| 						}} | ||||
| 					/> | ||||
| 				{:else if selectedTab === 'audio'} | ||||
| 					<Audio | ||||
| 						{saveSettings} | ||||
| 						on:save={() => { | ||||
| 							show = false; | ||||
| 							toast.success('Settings saved successfully!'); | ||||
| 						}} | ||||
| 					/> | ||||
| 				{:else if selectedTab === 'images'} | ||||
| 					<Images | ||||
| 						{saveSettings} | ||||
| 						on:save={() => { | ||||
| 							show = false; | ||||
| 							toast.success('Settings saved successfully!'); | ||||
| 						}} | ||||
| 					/> | ||||
| 				{:else if selectedTab === 'chats'} | ||||
|  | @ -367,7 +367,7 @@ | |||
| 				{:else if selectedTab === 'account'} | ||||
| 					<Account | ||||
| 						saveHandler={() => { | ||||
| 							show = false; | ||||
| 							toast.success('Settings saved successfully!'); | ||||
| 						}} | ||||
| 					/> | ||||
| 				{:else if selectedTab === 'about'} | ||||
|  |  | |||
|  | @ -237,53 +237,6 @@ | |||
| 	const sendPrompt = async (prompt, parentId) => { | ||||
| 		const _chatId = JSON.parse(JSON.stringify($chatId)); | ||||
| 
 | ||||
| 		const docs = messages | ||||
| 			.filter((message) => message?.files ?? null) | ||||
| 			.map((message) => | ||||
| 				message.files.filter((item) => item.type === 'doc' || item.type === 'collection') | ||||
| 			) | ||||
| 			.flat(1); | ||||
| 
 | ||||
| 		console.log(docs); | ||||
| 		if (docs.length > 0) { | ||||
| 			processing = 'Reading'; | ||||
| 			const query = history.messages[parentId].content; | ||||
| 
 | ||||
| 			let relevantContexts = await Promise.all( | ||||
| 				docs.map(async (doc) => { | ||||
| 					if (doc.type === 'collection') { | ||||
| 						return await queryCollection(localStorage.token, doc.collection_names, query).catch( | ||||
| 							(error) => { | ||||
| 								console.log(error); | ||||
| 								return null; | ||||
| 							} | ||||
| 						); | ||||
| 					} else { | ||||
| 						return await queryDoc(localStorage.token, doc.collection_name, query).catch((error) => { | ||||
| 							console.log(error); | ||||
| 							return null; | ||||
| 						}); | ||||
| 					} | ||||
| 				}) | ||||
| 			); | ||||
| 			relevantContexts = relevantContexts.filter((context) => context); | ||||
| 
 | ||||
| 			const contextString = relevantContexts.reduce((a, context, i, arr) => { | ||||
| 				return `${a}${context.documents.join(' ')}\n`; | ||||
| 			}, ''); | ||||
| 
 | ||||
| 			console.log(contextString); | ||||
| 
 | ||||
| 			history.messages[parentId].raContent = await RAGTemplate( | ||||
| 				localStorage.token, | ||||
| 				contextString, | ||||
| 				query | ||||
| 			); | ||||
| 			history.messages[parentId].contexts = relevantContexts; | ||||
| 			await tick(); | ||||
| 			processing = ''; | ||||
| 		} | ||||
| 
 | ||||
| 		await Promise.all( | ||||
| 			selectedModels.map(async (modelId) => { | ||||
| 				const model = $models.filter((m) => m.id === modelId).at(0); | ||||
|  | @ -347,15 +300,25 @@ | |||
| 			...messages | ||||
| 		] | ||||
| 			.filter((message) => message) | ||||
| 			.map((message, idx, arr) => ({ | ||||
| 				role: message.role, | ||||
| 				content: arr.length - 2 !== idx ? message.content : message?.raContent ?? message.content, | ||||
| 				...(message.files && { | ||||
| 					images: message.files | ||||
| 						.filter((file) => file.type === 'image') | ||||
| 						.map((file) => file.url.slice(file.url.indexOf(',') + 1)) | ||||
| 				}) | ||||
| 			})); | ||||
| 			.map((message, idx, arr) => { | ||||
| 				// Prepare the base message object | ||||
| 				const baseMessage = { | ||||
| 					role: message.role, | ||||
| 					content: arr.length - 2 !== idx ? message.content : message?.raContent ?? message.content | ||||
| 				}; | ||||
| 
 | ||||
| 				// Extract and format image URLs if any exist | ||||
| 				const imageUrls = message.files | ||||
| 					?.filter((file) => file.type === 'image') | ||||
| 					.map((file) => file.url.slice(file.url.indexOf(',') + 1)); | ||||
| 
 | ||||
| 				// Add images array only if it contains elements | ||||
| 				if (imageUrls && imageUrls.length > 0) { | ||||
| 					baseMessage.images = imageUrls; | ||||
| 				} | ||||
| 
 | ||||
| 				return baseMessage; | ||||
| 			}); | ||||
| 
 | ||||
| 		let lastImageIndex = -1; | ||||
| 
 | ||||
|  | @ -373,6 +336,13 @@ | |||
| 			} | ||||
| 		}); | ||||
| 
 | ||||
| 		const docs = messages | ||||
| 			.filter((message) => message?.files ?? null) | ||||
| 			.map((message) => | ||||
| 				message.files.filter((item) => item.type === 'doc' || item.type === 'collection') | ||||
| 			) | ||||
| 			.flat(1); | ||||
| 
 | ||||
| 		const [res, controller] = await generateChatCompletion(localStorage.token, { | ||||
| 			model: model, | ||||
| 			messages: messagesBody, | ||||
|  | @ -380,7 +350,8 @@ | |||
| 				...($settings.options ?? {}) | ||||
| 			}, | ||||
| 			format: $settings.requestFormat ?? undefined, | ||||
| 			keep_alive: $settings.keepAlive ?? undefined | ||||
| 			keep_alive: $settings.keepAlive ?? undefined, | ||||
| 			docs: docs.length > 0 ? docs : undefined | ||||
| 		}); | ||||
| 
 | ||||
| 		if (res && res.ok) { | ||||
|  | @ -546,6 +517,15 @@ | |||
| 		const responseMessage = history.messages[responseMessageId]; | ||||
| 		scrollToBottom(); | ||||
| 
 | ||||
| 		const docs = messages | ||||
| 			.filter((message) => message?.files ?? null) | ||||
| 			.map((message) => | ||||
| 				message.files.filter((item) => item.type === 'doc' || item.type === 'collection') | ||||
| 			) | ||||
| 			.flat(1); | ||||
| 
 | ||||
| 		console.log(docs); | ||||
| 
 | ||||
| 		const res = await generateOpenAIChatCompletion( | ||||
| 			localStorage.token, | ||||
| 			{ | ||||
|  | @ -594,7 +574,8 @@ | |||
| 				top_p: $settings?.options?.top_p ?? undefined, | ||||
| 				num_ctx: $settings?.options?.num_ctx ?? undefined, | ||||
| 				frequency_penalty: $settings?.options?.repeat_penalty ?? undefined, | ||||
| 				max_tokens: $settings?.options?.num_predict ?? undefined | ||||
| 				max_tokens: $settings?.options?.num_predict ?? undefined, | ||||
| 				docs: docs.length > 0 ? docs : undefined | ||||
| 			}, | ||||
| 			model.source === 'litellm' ? `${LITELLM_API_BASE_URL}/v1` : `${OPENAI_API_BASE_URL}` | ||||
| 		); | ||||
|  | @ -711,7 +692,12 @@ | |||
| 
 | ||||
| 		if (messages.length == 2) { | ||||
| 			window.history.replaceState(history.state, '', `/c/${_chatId}`); | ||||
| 			await setChatTitle(_chatId, userPrompt); | ||||
| 
 | ||||
| 			if ($settings?.titleAutoGenerateModel) { | ||||
| 				await generateChatTitle(_chatId, userPrompt); | ||||
| 			} else { | ||||
| 				await setChatTitle(_chatId, userPrompt); | ||||
| 			} | ||||
| 		} | ||||
| 	}; | ||||
| 
 | ||||
|  |  | |||
|  | @ -247,53 +247,6 @@ | |||
| 	const sendPrompt = async (prompt, parentId) => { | ||||
| 		const _chatId = JSON.parse(JSON.stringify($chatId)); | ||||
| 
 | ||||
| 		const docs = messages | ||||
| 			.filter((message) => message?.files ?? null) | ||||
| 			.map((message) => | ||||
| 				message.files.filter((item) => item.type === 'doc' || item.type === 'collection') | ||||
| 			) | ||||
| 			.flat(1); | ||||
| 
 | ||||
| 		console.log(docs); | ||||
| 		if (docs.length > 0) { | ||||
| 			processing = 'Reading'; | ||||
| 			const query = history.messages[parentId].content; | ||||
| 
 | ||||
| 			let relevantContexts = await Promise.all( | ||||
| 				docs.map(async (doc) => { | ||||
| 					if (doc.type === 'collection') { | ||||
| 						return await queryCollection(localStorage.token, doc.collection_names, query).catch( | ||||
| 							(error) => { | ||||
| 								console.log(error); | ||||
| 								return null; | ||||
| 							} | ||||
| 						); | ||||
| 					} else { | ||||
| 						return await queryDoc(localStorage.token, doc.collection_name, query).catch((error) => { | ||||
| 							console.log(error); | ||||
| 							return null; | ||||
| 						}); | ||||
| 					} | ||||
| 				}) | ||||
| 			); | ||||
| 			relevantContexts = relevantContexts.filter((context) => context); | ||||
| 
 | ||||
| 			const contextString = relevantContexts.reduce((a, context, i, arr) => { | ||||
| 				return `${a}${context.documents.join(' ')}\n`; | ||||
| 			}, ''); | ||||
| 
 | ||||
| 			console.log(contextString); | ||||
| 
 | ||||
| 			history.messages[parentId].raContent = await RAGTemplate( | ||||
| 				localStorage.token, | ||||
| 				contextString, | ||||
| 				query | ||||
| 			); | ||||
| 			history.messages[parentId].contexts = relevantContexts; | ||||
| 			await tick(); | ||||
| 			processing = ''; | ||||
| 		} | ||||
| 
 | ||||
| 		await Promise.all( | ||||
| 			selectedModels.map(async (modelId) => { | ||||
| 				const model = $models.filter((m) => m.id === modelId).at(0); | ||||
|  | @ -357,15 +310,25 @@ | |||
| 			...messages | ||||
| 		] | ||||
| 			.filter((message) => message) | ||||
| 			.map((message, idx, arr) => ({ | ||||
| 				role: message.role, | ||||
| 				content: arr.length - 2 !== idx ? message.content : message?.raContent ?? message.content, | ||||
| 				...(message.files && { | ||||
| 					images: message.files | ||||
| 						.filter((file) => file.type === 'image') | ||||
| 						.map((file) => file.url.slice(file.url.indexOf(',') + 1)) | ||||
| 				}) | ||||
| 			})); | ||||
| 			.map((message, idx, arr) => { | ||||
| 				// Prepare the base message object | ||||
| 				const baseMessage = { | ||||
| 					role: message.role, | ||||
| 					content: arr.length - 2 !== idx ? message.content : message?.raContent ?? message.content | ||||
| 				}; | ||||
| 
 | ||||
| 				// Extract and format image URLs if any exist | ||||
| 				const imageUrls = message.files | ||||
| 					?.filter((file) => file.type === 'image') | ||||
| 					.map((file) => file.url.slice(file.url.indexOf(',') + 1)); | ||||
| 
 | ||||
| 				// Add images array only if it contains elements | ||||
| 				if (imageUrls && imageUrls.length > 0) { | ||||
| 					baseMessage.images = imageUrls; | ||||
| 				} | ||||
| 
 | ||||
| 				return baseMessage; | ||||
| 			}); | ||||
| 
 | ||||
| 		let lastImageIndex = -1; | ||||
| 
 | ||||
|  | @ -383,6 +346,13 @@ | |||
| 			} | ||||
| 		}); | ||||
| 
 | ||||
| 		const docs = messages | ||||
| 			.filter((message) => message?.files ?? null) | ||||
| 			.map((message) => | ||||
| 				message.files.filter((item) => item.type === 'doc' || item.type === 'collection') | ||||
| 			) | ||||
| 			.flat(1); | ||||
| 
 | ||||
| 		const [res, controller] = await generateChatCompletion(localStorage.token, { | ||||
| 			model: model, | ||||
| 			messages: messagesBody, | ||||
|  | @ -390,7 +360,8 @@ | |||
| 				...($settings.options ?? {}) | ||||
| 			}, | ||||
| 			format: $settings.requestFormat ?? undefined, | ||||
| 			keep_alive: $settings.keepAlive ?? undefined | ||||
| 			keep_alive: $settings.keepAlive ?? undefined, | ||||
| 			docs: docs.length > 0 ? docs : undefined | ||||
| 		}); | ||||
| 
 | ||||
| 		if (res && res.ok) { | ||||
|  | @ -556,6 +527,15 @@ | |||
| 		const responseMessage = history.messages[responseMessageId]; | ||||
| 		scrollToBottom(); | ||||
| 
 | ||||
| 		const docs = messages | ||||
| 			.filter((message) => message?.files ?? null) | ||||
| 			.map((message) => | ||||
| 				message.files.filter((item) => item.type === 'doc' || item.type === 'collection') | ||||
| 			) | ||||
| 			.flat(1); | ||||
| 
 | ||||
| 		console.log(docs); | ||||
| 
 | ||||
| 		const res = await generateOpenAIChatCompletion( | ||||
| 			localStorage.token, | ||||
| 			{ | ||||
|  | @ -604,7 +584,8 @@ | |||
| 				top_p: $settings?.options?.top_p ?? undefined, | ||||
| 				num_ctx: $settings?.options?.num_ctx ?? undefined, | ||||
| 				frequency_penalty: $settings?.options?.repeat_penalty ?? undefined, | ||||
| 				max_tokens: $settings?.options?.num_predict ?? undefined | ||||
| 				max_tokens: $settings?.options?.num_predict ?? undefined, | ||||
| 				docs: docs.length > 0 ? docs : undefined | ||||
| 			}, | ||||
| 			model.source === 'litellm' ? `${LITELLM_API_BASE_URL}/v1` : `${OPENAI_API_BASE_URL}` | ||||
| 		); | ||||
|  | @ -724,6 +705,7 @@ | |||
| 			await setChatTitle(_chatId, userPrompt); | ||||
| 		} | ||||
| 	}; | ||||
| 
 | ||||
| 	const stopResponse = () => { | ||||
| 		stopResponseFlag = true; | ||||
| 		console.log('stopResponse'); | ||||
|  |  | |||
|  | @ -562,7 +562,9 @@ | |||
| 
 | ||||
| 					<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" | ||||
| 						on:click={documentsImportInputElement.click} | ||||
| 						on:click={() => { | ||||
| 							documentsImportInputElement.click(); | ||||
| 						}} | ||||
| 					> | ||||
| 						<div class=" self-center mr-2 font-medium">{$i18n.t('Import Documents Mapping')}</div> | ||||
| 
 | ||||
|  |  | |||
|  | @ -268,7 +268,9 @@ | |||
| 
 | ||||
| 					<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" | ||||
| 						on:click={modelfilesImportInputElement.click} | ||||
| 						on:click={() => { | ||||
| 							modelfilesImportInputElement.click(); | ||||
| 						}} | ||||
| 					> | ||||
| 						<div class=" self-center mr-2 font-medium">{$i18n.t('Import Modelfiles')}</div> | ||||
| 
 | ||||
|  |  | |||
|  | @ -269,7 +269,7 @@ | |||
| 
 | ||||
| <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | ||||
| 	<div class=" flex flex-col justify-between w-full overflow-y-auto h-[100dvh]"> | ||||
| 		<div class="max-w-2xl mx-auto w-full px-3 p-3 md:px-0 h-full"> | ||||
| 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10 h-full"> | ||||
| 			<div class=" flex flex-col h-full"> | ||||
| 				<div class="flex flex-col justify-between mb-2.5 gap-1"> | ||||
| 					<div class="flex justify-between items-center gap-2"> | ||||
|  |  | |||
|  | @ -244,7 +244,9 @@ | |||
| 
 | ||||
| 					<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" | ||||
| 						on:click={promptsImportInputElement.click} | ||||
| 						on:click={() => { | ||||
| 							promptsImportInputElement.click(); | ||||
| 						}} | ||||
| 					> | ||||
| 						<div class=" self-center mr-2 font-medium">{$i18n.t('Import Prompts')}</div> | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Ased Mammad
						Ased Mammad