Merge pull request #3006 from open-webui/tools

feat: tools

src/lib/components/chat/Chat.svelte

@@ -24,7 +24,8 @@
 		banners,
 		user,
 		socket,
-		showCallOverlay
+		showCallOverlay,
+		tools
 	} from '$lib/stores';
 	import {
 		convertMessagesToHistory,
@@ -73,6 +74,7 @@
 	let selectedModels = [''];
 	let atSelectedModel: Model | undefined;
 
+	let selectedToolIds = [];
 	let webSearchEnabled = false;
 
 	let chat = null;
@@ -687,6 +689,7 @@
 			},
 			format: $settings.requestFormat ?? undefined,
 			keep_alive: $settings.keepAlive ?? undefined,
+			tool_ids: selectedToolIds.length > 0 ? selectedToolIds : undefined,
 			docs: docs.length > 0 ? docs : undefined,
 			citations: docs.length > 0,
 			chat_id: $chatId
@@ -948,6 +951,7 @@
 					top_p: $settings?.params?.top_p ?? undefined,
 					frequency_penalty: $settings?.params?.frequency_penalty ?? undefined,
 					max_tokens: $settings?.params?.max_tokens ?? undefined,
+					tool_ids: selectedToolIds.length > 0 ? selectedToolIds : undefined,
 					docs: docs.length > 0 ? docs : undefined,
 					citations: docs.length > 0,
 					chat_id: $chatId
@@ -1274,8 +1278,20 @@
 				bind:files
 				bind:prompt
 				bind:autoScroll
+				bind:selectedToolIds
 				bind:webSearchEnabled
 				bind:atSelectedModel
+				availableTools={$user.role === 'admin'
+					? $tools.reduce((a, e, i, arr) => {
+							a[e.id] = {
+								name: e.name,
+								description: e.meta.description,
+								enabled: false
+							};
+
+							return a;
+					  }, {})
+					: {}}
 				{selectedModels}
 				{messages}
 				{submitPrompt}

src/lib/components/chat/MessageInput.svelte

@@ -8,7 +8,8 @@
 		showSidebar,
 		models,
 		config,
-		showCallOverlay
+		showCallOverlay,
+		tools
 	} from '$lib/stores';
 	import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
 
@@ -58,6 +59,8 @@
 
 	export let files = [];
 
+	export let availableTools = {};
+	export let selectedToolIds = [];
 	export let webSearchEnabled = false;
 
 	export let prompt = '';
@@ -653,6 +656,8 @@
 								<div class=" ml-0.5 self-end mb-1.5 flex space-x-1">
 									<InputMenu
 										bind:webSearchEnabled
+										bind:selectedToolIds
+										tools={availableTools}
 										uploadFilesHandler={() => {
 											filesInputElement.click();
 										}}

src/lib/components/chat/MessageInput/InputMenu.svelte

@@ -4,22 +4,21 @@
 	import { getContext } from 'svelte';
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
-	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
-	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import Tags from '$lib/components/chat/Tags.svelte';
-	import Share from '$lib/components/icons/Share.svelte';
-	import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
 	import DocumentArrowUpSolid from '$lib/components/icons/DocumentArrowUpSolid.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import GlobeAltSolid from '$lib/components/icons/GlobeAltSolid.svelte';
 	import { config } from '$lib/stores';
+	import WrenchSolid from '$lib/components/icons/WrenchSolid.svelte';
 
 	const i18n = getContext('i18n');
 
 	export let uploadFilesHandler: Function;
+
+	export let selectedToolIds: string[] = [];
 	export let webSearchEnabled: boolean;
 
+	export let tools = {};
 	export let onClose: Function;
 
 	let show = false;
@@ -46,6 +45,32 @@
 			align="start"
 			transition={flyAndScale}
 		>
+			{#if Object.keys(tools).length > 0}
+				{#each Object.keys(tools) as toolId}
+					<div
+						class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
+					>
+						<div class="flex-1 flex items-center gap-2">
+							<WrenchSolid />
+
+							<Tooltip content={tools[toolId]?.description ?? ''}>
+								<div class="flex items-center line-clamp-1">{tools[toolId].name}</div>
+							</Tooltip>
+						</div>
+
+						<Switch
+							bind:state={tools[toolId].enabled}
+							on:change={(e) => {
+								selectedToolIds = e.detail
+									? [...selectedToolIds, toolId]
+									: selectedToolIds.filter((id) => id !== toolId);
+							}}
+						/>
+					</div>
+				{/each}
+				<hr class="border-gray-100 dark:border-gray-800 my-1" />
+			{/if}
+
 			{#if $config?.features?.enable_web_search}
 				<div
 					class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"