refac

Author: tjbck

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

@@ -4,6 +4,7 @@
 	import Models from './Commands/Models.svelte';
 	import Skills from './Commands/Skills.svelte';
 	import Emojis from './Commands/Emojis.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 
 	export let char = '';
 	export let query = '';
@@ -52,10 +53,10 @@
 	}
 </script>
 
-<div
-	class="{(filteredItems ?? []).length > 0
+<DropdownMenu
+	className="{(filteredItems ?? []).length > 0
 		? ''
-		: 'hidden'} rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-72 p-1"
+		: 'hidden'} w-72 font-sans text-xs"
 	id="suggestions-container"
 >
 	<div class="overflow-y-auto scrollbar-thin max-h-60">
@@ -154,4 +155,4 @@
 			/>
 		{/if}
 	</div>
-</div>
+</DropdownMenu>

src/lib/components/chat/Messages/MultiResponseMessages.svelte

@@ -411,15 +411,15 @@
 								</div>
 
 								{#if message.timestamp}
-									<div class="mt-0.5 flex justify-start text-gray-600 dark:text-gray-500">
+									<div class="mt-0.5 flex justify-start whitespace-nowrap text-gray-600 dark:text-gray-500">
 										<Tooltip
 											className="flex self-center"
 											content={formatMessageTimestampFull(message.timestamp * 1000)}
 											placement="bottom"
 										>
 											<time
 												datetime={new Date(message.timestamp * 1000).toISOString()}
-												class="invisible group-hover:visible ml-1 text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
+												class="invisible group-hover:visible ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
 											>
 												{formatMessageTimestamp(message.timestamp * 1000)}
 											</time>

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -890,7 +890,7 @@
 				{#if !edit}
 					<div
 						bind:this={buttonsContainerElement}
-						class="flex justify-start overflow-x-auto buttons text-gray-600 dark:text-gray-500 mt-0.5"
+						class="flex items-center justify-start overflow-x-auto whitespace-nowrap buttons text-gray-600 dark:text-gray-500 mt-0.5 [&>*]:shrink-0"
 					>
 						{#if message.done || siblings.length > 1}
 							{#if siblings.length > 1}
@@ -1341,7 +1341,8 @@
 												}}
 											>
 												<Tooltip content={$i18n.t('Regenerate')} placement="bottom">
-													<div
+													<button
+														type="button"
 														aria-label={$i18n.t('Regenerate')}
 														class="{isLastMessage
 															? 'visible'
@@ -1362,7 +1363,7 @@
 																d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
 															/>
 														</svg>
-													</div>
+													</button>
 												</Tooltip>
 											</RegenerateMenu>
 										{:else}
@@ -1487,7 +1488,7 @@
 										>
 											<time
 												datetime={new Date(message.timestamp * 1000).toISOString()}
-												class="invisible group-hover:visible ml-1 text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
+												class="invisible group-hover:visible ml-1 shrink-0 whitespace-nowrap text-[0.6875rem] tabular-nums text-gray-400 dark:text-gray-600 select-none"
 											>
 												{formatMessageTimestamp(message.timestamp * 1000)}
 											</time>

src/lib/components/chat/ModelSelector/Selector.svelte

@@ -75,7 +75,6 @@
 	let triggerElement: HTMLElement | null = null;
 	let contentElement: HTMLElement | null = null;
 	let dropdownPosition = { top: 0, left: 0, maxHeight: undefined as number | undefined };
-	let isSmallViewport = false;
 	let positionFrame: number | undefined;
 	let settleTimers: number[] = [];
 
@@ -98,10 +97,6 @@
 		};
 	};
 
-	const updateViewportSize = () => {
-		isSmallViewport = (window.visualViewport?.width ?? window.innerWidth) < 640;
-	};
-
 	const updatePosition = () => {
 		if (!show || !triggerElement) return;
 		const rect = triggerElement.getBoundingClientRect();
@@ -152,7 +147,6 @@
 	};
 
 	const scheduleSettledPositionUpdates = () => {
-		updateViewportSize();
 		for (const timer of settleTimers) window.clearTimeout(timer);
 		settleTimers = [];
 		schedulePositionUpdate();
@@ -556,7 +550,6 @@
 			tags = Array.from(new Set(tags)).sort((a, b) => a.localeCompare(b));
 		}
 
-		updateViewportSize();
 		window.addEventListener('scroll', schedulePositionUpdate, true);
 		window.visualViewport?.addEventListener('resize', scheduleSettledPositionUpdates);
 		window.visualViewport?.addEventListener('scroll', schedulePositionUpdate);
@@ -649,7 +642,7 @@
 
 	let listScrollTop = 0;
 	let listContainer;
-	$: listViewportHeight = isSmallViewport ? 240 : 288;
+	$: listViewportHeight = Math.min(288, Math.max(96, (dropdownPosition.maxHeight ?? 352) - 64));
 
 	$: visibleStart = Math.max(0, Math.floor(listScrollTop / ITEM_HEIGHT) - OVERSCAN);
 	$: visibleEnd = Math.min(