fix: various minor bug fixes & styling updates (#211)

Closes #210 

- Fixes styling for tables in markdown responses
- Fixes an issue where a prompt could be submitted without choosing a
model first
- Fixes another issue where clearing a model and switching sessions made
the **Run** button disabled
- Styling updates to model select field

src/lib/components/FieldSelect.svelte

@@ -130,23 +130,25 @@
 						<div class="field-combobox-group-label">{group.label}</div>
 						{#if group.options.length > 0}
 							{#each group.options as option}
-								<Combobox.Item
-									value={option.value}
-									label={option.label}
-									class="field-combobox-item"
-								>
-									<Combobox.ItemIndicator class="field-combobox-item-indicator">
-										<Check class="base-icon" />
-									</Combobox.ItemIndicator>
-									<div class="field-combobox-item-label">
-										<span class="field-combobox-item-label-option" title={option.label}>
-											{option.label}
-										</span>
-										{#if option.badge}
-											<Badge>{option.badge}</Badge>
-										{/if}
-									</div>
-								</Combobox.Item>
+								{#if option.label}
+									<Combobox.Item
+										value={option.value}
+										label={option.label}
+										class="field-combobox-item"
+									>
+										<Combobox.ItemIndicator class="field-combobox-item-indicator">
+											<Check class="base-icon" />
+										</Combobox.ItemIndicator>
+										<div class="field-combobox-item-label">
+											<span class="field-combobox-item-label-option" title={option.label}>
+												{option.label}
+											</span>
+											{#if option.badge}
+												<Badge>{option.badge}</Badge>
+											{/if}
+										</div>
+									</Combobox.Item>
+								{/if}
 							{/each}
 						{:else}
 							<span class="field-select-empty">{$LL.noRecentModels()}</span>
@@ -200,11 +202,11 @@
 	}
 
 	:global(.field-combobox-content) {
-		@apply overflow-scrollbar relative z-10 max-h-64 max-w-full rounded-md bg-shade-0 py-1 shadow-md;
+		@apply overflow-scrollbar relative z-10 max-h-64 max-w-full rounded-md bg-shade-0 shadow-md;
 	}
 
 	:global(.field-combobox-item) {
-		@apply grid grid-cols-[24px,auto,max-content] items-center px-3 py-1 text-sm;
+		@apply grid grid-cols-[24px,auto,max-content] items-center px-3 py-1.5 text-sm;
 	}
 
 	:global(.field-combobox-item[data-highlighted]) {
@@ -219,11 +221,7 @@
 		@apply overflow-hidden text-ellipsis text-nowrap;
 	}
 
-	:global(.field-combobox-group) {
-		@apply py-1;
-	}
-
 	:global(.field-combobox-group-label) {
-		@apply px-3 py-1 text-xs font-semibold text-muted;
+		@apply sticky top-0 border-b border-shade-3 bg-shade-2 px-3 py-2 text-xs font-semibold text-muted;
 	}
 </style>

src/lib/components/Markdown.svelte

@@ -129,6 +129,43 @@
 		@apply text-link;
 	}
 
+	.markdown :global(table) {
+		@apply w-full border-separate border-spacing-0 rounded-md;
+	}
+
+	.markdown :global(th),
+	.markdown :global(td) {
+		@apply border-b border-l border-shade-3 px-3 py-1 text-left text-sm;
+	}
+
+	.markdown :global(th) {
+		@apply border-t;
+	}
+
+	.markdown :global(th:first-child) {
+		@apply rounded-tl-md;
+	}
+
+	.markdown :global(th:last-child) {
+		@apply rounded-tr-md border-r;
+	}
+
+	.markdown :global(td:last-child) {
+		@apply border-r;
+	}
+
+	.markdown :global(tbody tr:last-child td:first-child) {
+		@apply rounded-bl-md;
+	}
+
+	.markdown :global(tbody tr:last-child td:last-child) {
+		@apply rounded-br-md;
+	}
+
+	.markdown :global(th) {
+		@apply bg-shade-2;
+	}
+
 	/* Code */
 
 	.markdown :global(pre) {

src/routes/sessions/[id]/+page.svelte

@@ -106,6 +106,7 @@
 
 	function handleSubmit() {
 		if (!$editor.prompt) return;
+		if (!$session.model) return;
 		$editor.isCodeEditor = false;
 		$editor.view = 'messages';
 

src/routes/sessions/[id]/Prompt.svelte

@@ -10,7 +10,6 @@
 	import Field from '$lib/components/Field.svelte';
 	import FieldSelectModel from '$lib/components/FieldSelectModel.svelte';
 	import FieldTextEditor from '$lib/components/FieldTextEditor.svelte';
-	import { settingsStore } from '$lib/localStorage';
 	import type { Editor } from '$lib/sessions';
 
 	export let editor: Writable<Editor>;
@@ -113,10 +112,7 @@
 			<ButtonSubmit
 				{handleSubmit}
 				hasMetaKey={$editor.isCodeEditor}
-				disabled={!$editor.prompt ||
-					$settingsStore.ollamaServerStatus === 'disconnected' ||
-					$settingsStore.ollamaModels.length === 0 ||
-					!$settingsStore.ollamaModel}
+				disabled={!$editor.prompt || !model}
 			>
 				{$LL.run()}
 			</ButtonSubmit>

tests/session.test.ts

@@ -55,7 +55,24 @@ test.describe('Session', () => {
 		await mockCompletionResponse(page, MOCK_SESSION_1_RESPONSE_1);
 		await page.keyboard.press('Shift+Enter');
 		await expect(page.getByTestId('session-metadata')).toHaveText('New session');
+		await expect(page.getByText('Run')).toBeEnabled();
+
+		// Unselect the model
+		await page.getByTitle('Clear').click();
+		await expect(page.getByText('Run')).toBeDisabled();
+
+		// Can't run the prompt without a model
+		await page.keyboard.press('Enter');
+		await expect(
+			page.locator('article', {
+				hasText:
+					'I am unable to provide subjective or speculative information, including fight outcomes between individuals.'
+			})
+		).not.toBeVisible();
 
+		// Re-select the model
+		await chooseFromCombobox(page, 'Available models', MOCK_API_TAGS_RESPONSE.models[0].name);
+		await promptTextarea.focus();
 		await page.keyboard.press('Enter');
 		await expect(
 			page.locator('article', {
@@ -725,13 +742,9 @@ test.describe('Session', () => {
 			await route.abort('failed');
 		});
 		await page.getByTestId('new-session').click();
-		await expect(page.getByText('Run')).toBeDisabled();
 		await expect(
 			page.locator('ol[data-sonner-toaster] li', { hasText: "Can't connect to Ollama server" })
 		).toBeVisible();
-
-		await promptTextarea.fill('Who would win in a fight between Emma Watson and Jessica Alba?');
-		await expect(page.getByText('Run')).toBeDisabled();
 	});
 
 	test('can navigate out of session during completion', async ({ page }) => {