feat: native tool calling frontend

src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte

@@ -12,6 +12,7 @@
 	export let params = {
 		// Advanced
 		stream_response: null, // Set stream responses for this model individually
+		function_calling: null,
 		seed: null,
 		stop: null,
 		temperature: null,
@@ -81,6 +82,35 @@
 		</Tooltip>
 	</div>
 
+	<div>
+		<Tooltip
+			content={$i18n.t(
+				'Default mode works with a wider range of models by calling tools once before execution. Native mode leverages the model’s built-in tool-calling capabilities, but requires the model to inherently support this feature.'
+			)}
+			placement="top-start"
+			className="inline-tooltip"
+		>
+			<div class=" py-0.5 flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">
+					{$i18n.t('Function Calling')}
+				</div>
+				<button
+					class="p-1 px-3 text-xs flex rounded transition"
+					on:click={() => {
+						params.function_calling = (params?.function_calling ?? null) === null ? 'native' : null;
+					}}
+					type="button"
+				>
+					{#if params.function_calling === 'native'}
+						<span class="ml-2 self-center">{$i18n.t('Native')}</span>
+					{:else}
+						<span class="ml-2 self-center">{$i18n.t('Default')}</span>
+					{/if}
+				</button>
+			</div>
+		</Tooltip>
+	</div>
+
 	<div class=" py-0.5 w-full justify-between">
 		<Tooltip
 			content={$i18n.t(

src/lib/components/chat/Settings/General.svelte

@@ -46,6 +46,7 @@
 	let params = {
 		// Advanced
 		stream_response: null,
+		function_calling: null,
 		seed: null,
 		temperature: null,
 		frequency_penalty: null,