llama.cpp/tools/ui/src/lib/components/app/misc/TruncatedText.svelte

<script lang="ts">
	import * as Tooltip from '$lib/components/ui/tooltip';

	interface Props {
		text: string;
		class?: string;
		showTooltip?: boolean;
	}

	let { text, class: className = '', showTooltip = true }: Props = $props();

	let textElement: HTMLSpanElement | undefined = $state();
	let isTruncated = $state(false);

	function checkTruncation() {
		if (textElement) {
			isTruncated = textElement.scrollWidth > textElement.clientWidth;
		}
	}

	$effect(() => {
		if (textElement) {
			checkTruncation();

			const observer = new ResizeObserver(checkTruncation);
			observer.observe(textElement);

			return () => observer.disconnect();
		}
	});
</script>

{#if isTruncated && showTooltip}
	<Tooltip.Root>
		<Tooltip.Trigger class="{className} min-w-0">
			<span bind:this={textElement} class="block truncate">
				{text}
			</span>
		</Tooltip.Trigger>

		<Tooltip.Content class="z-[9999]">
			<p>{text}</p>
		</Tooltip.Content>
	</Tooltip.Root>
{:else}
	<span bind:this={textElement} class="{className} block min-w-0 truncate">
		{text}
	</span>
{/if}