From 3f3a34d2c9e8fe81fa1a39f31fc1ec08e38a3497 Mon Sep 17 00:00:00 2001 From: Fernando Maclen Date: Mon, 7 Oct 2024 05:58:03 -0400 Subject: [PATCH] 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 | 46 ++++++++++++-------------- src/lib/components/Markdown.svelte | 37 +++++++++++++++++++++ src/routes/sessions/[id]/+page.svelte | 1 + src/routes/sessions/[id]/Prompt.svelte | 6 +--- tests/session.test.ts | 21 +++++++++--- 5 files changed, 78 insertions(+), 33 deletions(-) diff --git a/src/lib/components/FieldSelect.svelte b/src/lib/components/FieldSelect.svelte index 95834a9f..e58aaa99 100644 --- a/src/lib/components/FieldSelect.svelte +++ b/src/lib/components/FieldSelect.svelte @@ -130,23 +130,25 @@
{group.label}
{#if group.options.length > 0} {#each group.options as option} - - - - -
- - {option.label} - - {#if option.badge} - {option.badge} - {/if} -
- + {#if option.label} + + + + +
+ + {option.label} + + {#if option.badge} + {option.badge} + {/if} +
+ + {/if} {/each} {:else} {$LL.noRecentModels()} @@ -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; } diff --git a/src/lib/components/Markdown.svelte b/src/lib/components/Markdown.svelte index d7b38637..2fd97e2a 100644 --- a/src/lib/components/Markdown.svelte +++ b/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) { diff --git a/src/routes/sessions/[id]/+page.svelte b/src/routes/sessions/[id]/+page.svelte index 58935b96..48b68c03 100644 --- a/src/routes/sessions/[id]/+page.svelte +++ b/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'; diff --git a/src/routes/sessions/[id]/Prompt.svelte b/src/routes/sessions/[id]/Prompt.svelte index 88e6a5f6..4fd0b046 100644 --- a/src/routes/sessions/[id]/Prompt.svelte +++ b/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; @@ -113,10 +112,7 @@ {$LL.run()} diff --git a/tests/session.test.ts b/tests/session.test.ts index cc6d5a56..100c8ade 100644 --- a/tests/session.test.ts +++ b/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 }) => {