Small fixes, prepare to add compact view for tools

src/App.svelte

@@ -45,7 +45,14 @@
 	import { providers } from './providers.js';
 	import ModelSelector from './ModelSelector.svelte';
 	import CompanyLogo from './CompanyLogo.svelte';
-	import { pick, controller, remoteServer } from './stores.js';
+	import {
+		pick,
+		controller,
+		remoteServer,
+		openaiAPIKey,
+		groqAPIKey,
+		openrouterAPIKey,
+	} from './stores.js';
 	import { writable } from 'svelte/store';
 	import SettingsModal from './SettingsModal.svelte';
 
@@ -63,6 +70,8 @@
 	let convo = writable({
 		model: {},
 		messages: [],
+		// Set initial conversation `shared` to true, to prevent the SettingsModal from popping up on first render.
+		shared: true,
 	});
 
 	$: isMultimodal =
@@ -663,6 +672,13 @@
 				{ exactly: ['gpt-4o'] },
 				{ fromProvider: 'OpenAI' },
 				{ exactly: ['openai/gpt-4o', 'openai/gpt-4-turbo', 'openai/gpt-3.5-turbo'] },
+				{
+					exactly: [
+						'anthropic/claude-3-opus',
+						'anthropic/claude-3-sonnet',
+						'anthropic/claude-3-haiku',
+					],
+				},
 				{ fromProvider: 'Groq', exactlyNot: ['llama2-70b-4096', 'gemma-7b-it'] },
 				{ exactly: ['meta-llama/llama-3-70b-instruct', 'meta-llama/llama-3-8b-instruct'] },
 				{
@@ -1563,7 +1579,11 @@
 	</div>
 </main>
 
-<SettingsModal trigger="settings" on:fetchModels={fetchModels} />
+<SettingsModal
+	open={!$convo.shared && $openaiAPIKey === '' && $groqAPIKey === '' && $openrouterAPIKey === ''}
+	trigger="settings"
+	on:fetchModels={fetchModels}
+/>
 
 <style lang="postcss">
 	:global(.standalone .section-input-bottom) {

src/SettingsModal.svelte

@@ -11,6 +11,7 @@
 		faXmark,
 	} from '@fortawesome/free-solid-svg-icons';
 	import {
+		config,
 		groqAPIKey,
 		openaiAPIKey,
 		openrouterAPIKey,
@@ -21,7 +22,7 @@
 
 	const dispatch = createEventDispatcher();
 
-	export let open = $openaiAPIKey === '' && $groqAPIKey === '' && $openrouterAPIKey === '';
+	export let open = false;
 	export let trigger = '';
 
 	let activeTab =
@@ -136,6 +137,15 @@
 						sent to or stored on any remote server.
 					</p>
 				{:else if activeTab === 'tools'}
+					<label class="mb-2 flex items-center gap-x-3 text-sm tracking-[-0.25px] text-slate-800">
+						<input
+							type="checkbox"
+							bind:checked={$config.compactToolsView}
+							class="h-5 w-5 rounded border-0 !border-slate-300 accent-slate-800 focus:outline-none focus:outline-0 focus:ring-0"
+						/>
+						Use compact view for tools:
+					</label>
+
 					<label class="flex flex-col text-[10px] uppercase tracking-wide">
 						<span class="mb-2 ml-[3px] flex items-center"
 							>Server address
@@ -167,7 +177,7 @@
 						/></label
 					>
 
-					<label class="mt-3 flex flex-col text-[10px] uppercase tracking-wide">
+					<label class="mt-1 flex flex-col text-[10px] uppercase tracking-wide">
 						<span class="mb-2 ml-[3px]">Tool schema</span>
 						<textarea
 							value={JSON.stringify($toolSchema)}

src/stores.js

@@ -7,6 +7,10 @@ export const params = persisted('params', {
 	temperature: 0.3,
 });
 
+export const config = persisted('config', {
+	compactToolsView: false,
+});
+
 export const openaiAPIKey = persisted('openaiAPIKey', '');
 export const openrouterAPIKey = persisted('openrouterkey', '');
 export const groqAPIKey = persisted('groqAPIKey', '');