From 00e41790bff71dc0d0c64c9e34d2f285c0289ffa Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 19 Nov 2024 17:10:43 -0800
Subject: [PATCH] enh: show tool description on hover

---
 src/lib/components/chat/MessageInput.svelte | 22 +++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index a7ff37354..a869a1d99 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -321,12 +321,22 @@
 												<span class="relative inline-flex rounded-full size-2 bg-yellow-500" />
 											</span>
 										</div>
-										<div class=" translate-y-[0.5px] line-clamp-1">
-											{selectedToolIds
-												.map((id) => {
-													return $tools ? $tools.find((tool) => tool.id === id)?.name : id;
-												})
-												.join(', ')}
+										<div class=" translate-y-[0.5px] text-ellipsis line-clamp-1 flex">
+											{#each selectedToolIds.map((id) => {
+												return $tools ? $tools.find((t) => t.id === id) : { id: id, name: id };
+											}) as tool, toolIdx (toolIdx)}
+												<Tooltip
+													content={tool?.meta?.description ?? ''}
+													className=" {toolIdx !== 0 ? 'pl-0.5' : ''} flex-shrink-0"
+													placement="top"
+												>
+													{tool.name}
+												</Tooltip>
+
+												{#if toolIdx !== selectedToolIds.length - 1}
+													<span>, </span>
+												{/if}
+											{/each}
 										</div>
 									</div>
 								</div>