refactor: Chat Form Submit component

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionSubmit.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { ArrowUp } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { cn } from '$lib/components/ui/utils';
+
+	interface Props {
+		canSend?: boolean;
+		disabled?: boolean;
+		isLoading?: boolean;
+		isModelAvailable?: boolean;
+		tooltipLabel?: string;
+	}
+
+	let {
+		canSend = false,
+		disabled = false,
+		isLoading = false,
+		isModelAvailable = true,
+		tooltipLabel
+	}: Props = $props();
+
+	// Error state when model is not available
+	let isErrorState = $derived(!isModelAvailable);
+	let isDisabled = $derived(!canSend || disabled || isLoading || !isModelAvailable);
+</script>
+
+{#snippet submitButton(props = {})}
+	<Button
+		type="submit"
+		disabled={isDisabled}
+		class={cn(
+			'h-8 w-8 rounded-full p-0',
+			isErrorState
+				? 'bg-red-400/10 text-red-400 hover:bg-red-400/20 hover:text-red-400 disabled:opacity-100'
+				: ''
+		)}
+		{...props}
+	>
+		<span class="sr-only">Send</span>
+		<ArrowUp class="h-12 w-12" />
+	</Button>
+{/snippet}
+
+{#if tooltipLabel}
+	<Tooltip.Provider>
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				{@render submitButton()}
+			</Tooltip.Trigger>
+
+			<Tooltip.Content>
+				<p>{tooltipLabel}</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
+	</Tooltip.Provider>
+{:else}
+	{@render submitButton()}
+{/if}

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { Square, ArrowUp } from '@lucide/svelte';
+	import { Square } from '@lucide/svelte';
 	import { Button } from '$lib/components/ui/button';
 	import {
 		ChatFormActionFileAttachments,
 		ChatFormActionRecord,
+		ChatFormActionSubmit,
 		SelectorModel
 	} from '$lib/components/app';
 	import { FileTypeCategory } from '$lib/enums/files';
@@ -69,14 +70,15 @@
 		{/if}
 
 		{#if shouldShowSubmitButton}
-			<Button
+			<ChatFormActionSubmit
-				type="submit"
+				{canSend}
-				disabled={!canSend || disabled || isLoading}
+				{disabled}
-				class="h-8 w-8 rounded-full p-0"
+				{isLoading}
-			>
+				tooltipLabel={isLastModelInCache
-				<span class="sr-only">Send</span>
+					? ''
-				<ArrowUp class="h-12 w-12" />
+					: 'Selected model is not available, please select another'}
-			</Button>
+				isModelAvailable={isLastModelInCache}
+			/>
 		{/if}
 	{/if}
 </div>

tools/server/webui/src/lib/components/app/index.ts

@@ -10,6 +10,7 @@ export { default as ChatForm } from './chat/ChatForm/ChatForm.svelte';
 export { default as ChatFormActionFileAttachments } from './chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte';
 export { default as ChatFormActionRecord } from './chat/ChatForm/ChatFormActions/ChatFormActionRecord.svelte';
 export { default as ChatFormActions } from './chat/ChatForm/ChatFormActions/ChatFormActions.svelte';
+export { default as ChatFormActionSubmit } from './chat/ChatForm/ChatFormActions/ChatFormActionSubmit.svelte';
 export { default as ChatFormFileInputInvisible } from './chat/ChatForm/ChatFormFileInputInvisible.svelte';
 export { default as ChatFormHelperText } from './chat/ChatForm/ChatFormHelperText.svelte';
 export { default as ChatFormTextarea } from './chat/ChatForm/ChatFormTextarea.svelte';