Misc tools release (#1192)

* hide details triangle on safari

* image size in chatmessage

* truncate file name

* fix a spacing

src/lib/components/OpenWebSearchResults.svelte

@@ -83,7 +83,7 @@
 								</h3>
 							</div>
 							{#if message.args}
-								<p class="mt-1.5 pl-4 text-gray-500 dark:text-gray-400">
+								<p class="mt-0.5 pl-4 text-gray-500 dark:text-gray-400">
 									{message.args}
 								</p>
 							{/if}
@@ -99,7 +99,7 @@
 								</h3>
 							</div>
 							{#if message.args}
-								<p class="mt-1.5 pl-4 text-gray-500 dark:text-gray-400">
+								<p class="mt-0.5 pl-4 text-gray-500 dark:text-gray-400">
 									{message.args}
 								</p>
 							{/if}

src/lib/components/ToolsMenu.svelte

@@ -73,3 +73,9 @@
 		</div>
 	</div>
 </details>
+
+<style>
+	details summary::-webkit-details-marker {
+		display: none;
+	}
+</style>

src/lib/components/chat/ChatMessage.svelte

@@ -277,14 +277,14 @@
 								<img
 									src={urlNotTrailing + "/output/" + file.value}
 									alt="output from assistant"
-									class="my-2 aspect-auto max-h-48 cursor-pointer rounded-lg shadow-lg"
+									class="my-2 aspect-auto max-h-48 cursor-pointer rounded-lg shadow-lg xl:max-h-56"
 								/>
 							{:else}
 								<!-- handle the case where this is a base64 encoded image -->
 								<img
 									src={`data:${file.mime};base64,${file.value}`}
 									alt="output from assistant"
-									class="my-2 aspect-auto max-h-48 cursor-pointer rounded-lg shadow-lg"
+									class="my-2 aspect-auto max-h-48 cursor-pointer rounded-lg shadow-lg xl:max-h-56"
 								/>
 							{/if}
 						</button>

src/lib/components/chat/UploadedFile.svelte

@@ -8,6 +8,18 @@
 	export let file: MessageFile;
 	export let canClose = true;
 	const dispatch = createEventDispatcher<{ close: void }>();
+
+	function truncateMiddle(text: string, maxLength: number): string {
+		if (text.length <= maxLength) {
+			return text;
+		}
+
+		const halfLength = Math.floor((maxLength - 1) / 2);
+		const start = text.substring(0, halfLength);
+		const end = text.substring(text.length - halfLength);
+
+		return `${start}…${end}`;
+	}
 </script>
 
 <div
@@ -36,7 +48,7 @@
 			</div>
 			<dl class="flex flex-col truncate leading-tight">
 				<dd class="text-sm">
-					{file.name}
+					{truncateMiddle(file.name, 28)}
 				</dd>
 				<dt class="text-xs text-gray-400">{file.mime.split("/")[1].toUpperCase()}</dt>
 			</dl>