refac

src/lib/components/chat/MessageInput.svelte

@@ -32,6 +32,7 @@
 	import Commands from './MessageInput/Commands.svelte';
 	import XMark from '../icons/XMark.svelte';
 	import RichTextInput from '../common/RichTextInput.svelte';
+	import { getTools } from '$lib/apis/tools';
 
 	const i18n = getContext('i18n');
 
@@ -53,6 +54,7 @@
 	export let selectedToolIds = [];
 	export let webSearchEnabled = false;
 
+	let loaded = false;
 	let recording = false;
 
 	let chatInputContainerElement;
@@ -228,7 +230,11 @@
 		dragged = false;
 	};
 
-	onMount(() => {
+	onMount(async () => {
+		await tools.set(await getTools(localStorage.token));
+
+		loaded = true;
+
 		window.setTimeout(() => {
 			const chatInput = document.getElementById('chat-input');
 			chatInput?.focus();
@@ -256,7 +262,8 @@
 
 <FilesOverlay show={dragged} />
 
-<div class="w-full font-primary">
+{#if loaded}
+	<div class="w-full font-primary">
 		<div class=" -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
 			<div class="flex flex-col px-2.5 max-w-6xl w-full">
 				<div class="relative">
@@ -343,7 +350,7 @@
 										<div class=" translate-y-[0.5px]">
 											{selectedToolIds
 												.map((id) => {
-												return $tools.find((tool) => tool.id === id)?.name;
+													return $tools ? $tools.find((tool) => tool.id === id)?.name : id;
 												})
 												.join(', ')}
 										</div>
@@ -488,7 +495,9 @@
 															<Tooltip
 																className=" absolute top-1 left-1"
 																content={$i18n.t('{{ models }}', {
-																models: [...(atSelectedModel ? [atSelectedModel] : selectedModels)]
+																	models: [
+																		...(atSelectedModel ? [atSelectedModel] : selectedModels)
+																	]
 																		.filter((id) => !visionCapableModels.includes(id))
 																		.join(', ')
 																})}
@@ -1009,7 +1018,9 @@
 														}
 														// check if user has access to getUserMedia
 														try {
-														let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+															let stream = await navigator.mediaDevices.getUserMedia({
+																audio: true
+															});
 															// If the user grants the permission, proceed to show the call overlay
 
 															if (stream) {
@@ -1023,7 +1034,9 @@
 															showControls.set(true);
 														} catch (err) {
 															// If the user denies the permission or an error occurs, show an error message
-														toast.error($i18n.t('Permission denied when accessing media devices'));
+															toast.error(
+																$i18n.t('Permission denied when accessing media devices')
+															);
 														}
 													}}
 													aria-label="Call"
@@ -1090,4 +1103,5 @@
 				</div>
 			</div>
 		</div>
-</div>
+	</div>
+{/if}