Add a loading bar for tools (#1188)

* Add a loading bar for tools

* move css to right file

* lighter purple

and no rounding on the loading bar

* Update src/routes/+layout.server.ts

Co-authored-by: Mishig <[email protected]>

* Clear animation when done (#1191)

* Clear animation when done

* make the bar go to the end

---------

Co-authored-by: Nathan Sarrazin <[email protected]>

---------

Co-authored-by: Victor Mustar <[email protected]>
Co-authored-by: Mishig <[email protected]>

src/lib/components/chat/ChatMessage.svelte

@@ -16,30 +16,22 @@
 	import CarbonPen from "~icons/carbon/pen";
 	import CarbonChevronLeft from "~icons/carbon/chevron-left";
 	import CarbonChevronRight from "~icons/carbon/chevron-right";
-	import CarbonTools from "~icons/carbon/tools";
 	import { PUBLIC_SEP_TOKEN } from "$lib/constants/publicSepToken";
 	import type { Model } from "$lib/types/Model";
 	import UploadedFile from "./UploadedFile.svelte";
 
 	import OpenWebSearchResults from "../OpenWebSearchResults.svelte";
 	import {
-		MessageToolUpdateType,
 		MessageWebSearchUpdateType,
 		type MessageToolUpdate,
 		type MessageWebSearchSourcesUpdate,
 		type MessageWebSearchUpdate,
 	} from "$lib/types/MessageUpdate";
-	import {
-		isMessageToolCallUpdate,
-		isMessageToolResultUpdate,
-		isMessageToolErrorUpdate,
-	} from "$lib/utils/messageUpdates";
-	import type { ToolFront } from "$lib/types/Tool";
 	import { base } from "$app/paths";
 	import { useConvTreeStore } from "$lib/stores/convTree";
 	import { isReducedMotion } from "$lib/utils/isReduceMotion";
 	import Modal from "../Modal.svelte";
-	import { toolHasName } from "$lib/utils/tools";
+	import ToolUpdate from "./ToolUpdate.svelte";
 
 	function sanitizeMd(md: string) {
 		let ret = md
@@ -221,8 +213,6 @@
 	$: if (message.children?.length === 0) $convTreeStore.leaf = message.id;
 
 	$: modalImageToShow = null as MessageFile | null;
-
-	const availableTools: ToolFront[] = $page.data.tools;
 </script>
 
 {#if modalImageToShow}
@@ -301,72 +291,7 @@
 			{#if toolUpdates}
 				{#each Object.values(toolUpdates) as tool}
 					{#if tool.length}
-						{@const toolName = tool.find(isMessageToolCallUpdate)?.call.name}
-						{@const toolError = tool.some(isMessageToolErrorUpdate)}
-						{@const toolDone = tool.some(isMessageToolResultUpdate)}
-						{#if toolName && toolName !== "websearch"}
-							<details
-								class="group/tool my-2.5 w-fit cursor-pointer rounded-lg border border-gray-200 bg-white pl-1 pr-2.5 text-sm shadow-sm transition-all open:mb-3
-								open:border-purple-500/10 open:bg-purple-600/5 open:shadow-sm dark:border-gray-800 dark:bg-gray-900 open:dark:border-purple-800/40 open:dark:bg-purple-800/10"
-							>
-								<summary
-									class="flex select-none list-none items-center gap-1.5 py-1 group-open/tool:text-purple-700 group-open/tool:dark:text-purple-300"
-								>
-									<div
-										class="relative grid size-[22px] place-items-center rounded bg-purple-600/10 dark:bg-purple-600/20"
-									>
-										<svg
-											class="absolute inset-0 text-purple-500/40 transition-opacity"
-											class:invisible={toolDone || toolError}
-											width="22"
-											height="22"
-											viewBox="0 0 38 38"
-											fill="none"
-											xmlns="http://www.w3.org/2000/svg"
-										>
-											<path
-												class="loading-path"
-												d="M8 2.5H30C30 2.5 35.5 2.5 35.5 8V30C35.5 30 35.5 35.5 30 35.5H8C8 35.5 2.5 35.5 2.5 30V8C2.5 8 2.5 2.5 8 2.5Z"
-												stroke="currentColor"
-												stroke-width="1"
-												stroke-linecap="round"
-												id="shape"
-											/>
-										</svg>
-										<CarbonTools class="text-xs text-purple-700 dark:text-purple-500" />
-									</div>
-
-									<span>
-										{toolError ? "Error calling" : toolDone ? "Called" : "Calling"} tool
-										<span class="font-semibold"
-											>{availableTools.find((el) => toolHasName(toolName, el))?.displayName}</span
-										>
-									</span>
-								</summary>
-								{#each tool as toolUpdate}
-									{#if toolUpdate.subtype === MessageToolUpdateType.Call}
-										<div class="mt-1 flex items-center gap-2 opacity-80">
-											<h3 class="text-sm">Parameters</h3>
-											<div class="h-px flex-1 bg-gradient-to-r from-gray-500/20" />
-										</div>
-										<ul class="py-1 text-sm">
-											{#each Object.entries(toolUpdate.call.parameters ?? {}) as [k, v]}
-												<li>
-													<span class="font-semibold">{k}</span>:
-													<span>{v}</span>
-												</li>
-											{/each}
-										</ul>
-									{:else if toolUpdate.subtype === MessageToolUpdateType.Error}
-										<div class="mt-1 flex items-center gap-2 opacity-80">
-											<h3 class="text-sm">Error</h3>
-											<div class="h-px flex-1 bg-gradient-to-r from-gray-500/20" />
-										</div>
-										<p class="text-sm">{toolUpdate.message}</p>
-									{/if}
-								{/each}
-							</details>
-						{/if}
+						<ToolUpdate {tool} {loading} />
 					{/if}
 				{/each}
 			{/if}
@@ -617,15 +542,6 @@
 {/if}
 
 <style>
-	details summary::-webkit-details-marker {
-		display: none;
-	}
-
-	.loading-path {
-		stroke-dasharray: 61.45;
-		animation: loading 2s linear infinite;
-	}
-
 	@keyframes loading {
 		to {
 			stroke-dashoffset: 122.9;

src/lib/components/chat/ToolUpdate.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import { MessageToolUpdateType, type MessageToolUpdate } from "$lib/types/MessageUpdate";
+	import {
+		isMessageToolCallUpdate,
+		isMessageToolErrorUpdate,
+		isMessageToolResultUpdate,
+	} from "$lib/utils/messageUpdates";
+
+	import CarbonTools from "~icons/carbon/tools";
+	import { toolHasName } from "$lib/utils/tools";
+	import type { ToolFront } from "$lib/types/Tool";
+	import { page } from "$app/stores";
+	import { onMount } from "svelte";
+
+	export let tool: MessageToolUpdate[];
+	export let loading: boolean = false;
+
+	const toolName = tool.find(isMessageToolCallUpdate)?.call.name;
+	const toolError = tool.some(isMessageToolErrorUpdate);
+	$: toolDone = tool.some(isMessageToolResultUpdate);
+
+	const availableTools: ToolFront[] = $page.data.tools;
+
+	let loadingBarEl: HTMLDivElement;
+	let animation: Animation | undefined = undefined;
+
+	let isShowingLoadingBar = false;
+	onMount(() => {
+		if (!toolDone && loading) {
+			loadingBarEl.classList.remove("hidden");
+			isShowingLoadingBar = true;
+			animation = loadingBarEl.animate([{ width: "0%" }, { width: "calc(100%+1rem)" }], {
+				duration: availableTools.find((tool) => tool.name === toolName)?.timeToUseMS,
+				fill: "forwards",
+			});
+		}
+		return () => animation?.cancel();
+	});
+
+	// go to 100% quickly if loading is done
+	$: (!loading || toolDone) &&
+		isShowingLoadingBar &&
+		(() => {
+			isShowingLoadingBar = false;
+
+			loadingBarEl.classList.remove("hidden");
+
+			animation?.cancel();
+			animation = loadingBarEl.animate(
+				[{ width: loadingBarEl.style.width }, { width: "calc(100%+1rem)" }],
+				{
+					duration: 300,
+					fill: "forwards",
+				}
+			);
+
+			setTimeout(() => {
+				loadingBarEl.classList.add("hidden");
+			}, 300);
+		})();
+</script>
+
+{#if toolName && toolName !== "websearch"}
+	<details
+		class="group/tool my-2.5 w-fit cursor-pointer rounded-lg border border-gray-200 bg-white pl-1 pr-2.5 text-sm shadow-sm transition-all open:mb-3
+        open:border-purple-500/10 open:bg-purple-600/5 open:shadow-sm dark:border-gray-800 dark:bg-gray-900 open:dark:border-purple-800/40 open:dark:bg-purple-800/10"
+	>
+		<summary
+			class="relative flex select-none list-none items-center gap-1.5 py-1 group-open/tool:text-purple-700 group-open/tool:dark:text-purple-300"
+		>
+			<div
+				bind:this={loadingBarEl}
+				class="absolute -m-1 hidden h-full w-[calc(100%+1rem)] rounded-lg bg-purple-500/5 transition-all dark:bg-purple-500/10"
+			/>
+
+			<div
+				class="relative grid size-[22px] place-items-center rounded bg-purple-600/10 dark:bg-purple-600/20"
+			>
+				<svg
+					class="absolute inset-0 text-purple-500/40 transition-opacity"
+					class:invisible={toolDone || toolError}
+					width="22"
+					height="22"
+					viewBox="0 0 38 38"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						class="loading-path"
+						d="M8 2.5H30C30 2.5 35.5 2.5 35.5 8V30C35.5 30 35.5 35.5 30 35.5H8C8 35.5 2.5 35.5 2.5 30V8C2.5 8 2.5 2.5 8 2.5Z"
+						stroke="currentColor"
+						stroke-width="1"
+						stroke-linecap="round"
+						id="shape"
+					/>
+				</svg>
+				<CarbonTools class="text-xs text-purple-700 dark:text-purple-500" />
+			</div>
+
+			<span>
+				{toolError ? "Error calling" : toolDone ? "Called" : "Calling"} tool
+				<span class="font-semibold"
+					>{availableTools.find((el) => toolHasName(toolName, el))?.displayName}</span
+				>
+			</span>
+		</summary>
+		{#each tool as toolUpdate}
+			{#if toolUpdate.subtype === MessageToolUpdateType.Call}
+				<div class="mt-1 flex items-center gap-2 opacity-80">
+					<h3 class="text-sm">Parameters</h3>
+					<div class="h-px flex-1 bg-gradient-to-r from-gray-500/20" />
+				</div>
+				<ul class="py-1 text-sm">
+					{#each Object.entries(toolUpdate.call.parameters ?? {}) as [k, v]}
+						<li>
+							<span class="font-semibold">{k}</span>:
+							<span>{v}</span>
+						</li>
+					{/each}
+				</ul>
+			{:else if toolUpdate.subtype === MessageToolUpdateType.Error}
+				<div class="mt-1 flex items-center gap-2 opacity-80">
+					<h3 class="text-sm">Error</h3>
+					<div class="h-px flex-1 bg-gradient-to-r from-gray-500/20" />
+				</div>
+				<p class="text-sm">{toolUpdate.message}</p>
+			{/if}
+		{/each}
+	</details>
+{/if}
+
+<style>
+	details summary::-webkit-details-marker {
+		display: none;
+	}
+
+	.loading-path {
+		stroke-dasharray: 61.45;
+		animation: loading 2s linear infinite;
+	}
+</style>

src/lib/types/Tool.ts

@@ -25,7 +25,7 @@ export interface Tool {
 export type ToolFront = Pick<
 	Tool,
 	"name" | "displayName" | "description" | "isOnByDefault" | "isLocked"
->;
+> & { timeToUseMS?: number };
 
 export enum ToolResultStatus {
 	Success = "success",

src/routes/+layout.server.ts

@@ -9,6 +9,7 @@ import { env } from "$env/dynamic/private";
 import { ObjectId } from "mongodb";
 import type { ConvSidebar } from "$lib/types/ConvSidebar";
 import { allTools } from "$lib/server/tools";
+import { MetricsServer } from "$lib/server/metrics";
 
 export const load: LayoutServerLoad = async ({ locals, depends }) => {
 	depends(UrlDependency.ConversationList);
@@ -105,6 +106,7 @@ export const load: LayoutServerLoad = async ({ locals, depends }) => {
 		}
 	}
 
+	const toolUseDuration = (await MetricsServer.getMetrics().tool.toolUseDuration.get()).values;
 	return {
 		conversations: conversations.map((conv) => {
 			if (settings?.hideEmojiOnSidebar) {
@@ -172,6 +174,9 @@ export const load: LayoutServerLoad = async ({ locals, depends }) => {
 				description: tool.description,
 				isOnByDefault: tool.isOnByDefault,
 				isLocked: tool.isLocked,
+				timeToUseMS:
+					toolUseDuration.find((el) => el.labels.tool === tool.name && el.labels.quantile === 0.9)
+						?.value ?? 15_000,
 			})),
 		assistants: assistants
 			.filter((el) => userAssistantsSet.has(el._id.toString()))