fix(ui): temperature slider (#1086)

src/leapfrogai_ui/src/lib/components/AssistantForm.svelte

@@ -156,12 +156,12 @@
 
     <Slider
       id="temperature"
-      name="temperature"
       label="Temperature"
       bind:value={$form.temperature}
       tooltipText="Adjust the slider to set the creativity level of your assistant's responses"
       showThumb={false}
     />
+    <input type="hidden" name="temperature" value={$form.temperature} />
 
     <div class="mb-6">
       <LFLabel

src/leapfrogai_ui/tests/assistants.test.ts

@@ -7,7 +7,8 @@ import {
   createAssistantWithApi,
   deleteAssistantCard,
   deleteAssistantWithApi,
-  editAssistantCard
+  editAssistantCard,
+  getAssistantWithApi
 } from './helpers/assistantHelpers';
 import { deleteActiveThread, getLastUrlParam, sendMessage } from './helpers/threadHelpers';
 import { loadChatPage } from './helpers/navigationHelpers';
@@ -29,7 +30,10 @@ test('it has a button that navigates to the new assistant page', async ({ page }
   await expect(page).toHaveTitle('LeapfrogAI - New Assistant');
 });
 
-test('it creates an assistant and navigates back to the management page', async ({ page }) => {
+test('it creates an assistant and navigates back to the management page', async ({
+  page,
+  openAIClient
+}) => {
   const assistantInput = getFakeAssistantInput();
 
   await createAssistant(assistantInput, page);
@@ -38,8 +42,18 @@ test('it creates an assistant and navigates back to the management page', async
   await page.waitForURL('/chat/assistants-management');
   await expect(page.getByTestId(`assistant-card-${assistantInput.name}`)).toBeVisible();
 
+  // Verify created assistant has the correct attributes
+  await editAssistantCard(assistantInput.name, page);
+  await page.waitForURL('/chat/assistants-management/edit/**/*');
+  const assistantId = getLastUrlParam(page);
+  const assistant = await getAssistantWithApi(assistantId, openAIClient);
+  expect(assistant.name).toEqual(assistantInput.name);
+  expect(assistant.description).toEqual(assistantInput.description);
+  expect(assistant.instructions).toEqual(assistantInput.instructions);
+  expect(assistant.temperature).toBeCloseTo(assistantInput.temperature, 0.1);
+
   // cleanup
-  await deleteAssistantCard(assistantInput.name, page);
+  await deleteAssistantWithApi(assistantId, openAIClient);
 });
 
 test('displays an error toast when there is an error creating an assistant and remains on the assistant page', async ({

src/leapfrogai_ui/tests/helpers/assistantHelpers.ts

@@ -1,31 +1,17 @@
 import OpenAI from 'openai';
 import { expect, type Page } from '@playwright/test';
 import { getFakeAssistantInput } from '../../testUtils/fakeData';
-import type { AssistantCreateParams } from 'openai/resources/beta/assistants';
+import type { Assistant, AssistantCreateParams } from 'openai/resources/beta/assistants';
 import type { AssistantInput, LFAssistant } from '../../src/lib/types/assistants';
 import { supabase } from './helpers';
 import { faker } from '@faker-js/faker';
 
-// Note - this will not apply the temperature slider value provided, it only clicks on the 0.5 increment
 export const createAssistant = async (assistantInput: AssistantInput, page: Page) => {
   await page.goto('/chat/assistants-management/new');
   await page.getByLabel('name').fill(assistantInput.name);
   await page.getByLabel('tagline').fill(assistantInput.description);
+  await clickOnSliderValue(assistantInput.temperature, page);
   await page.getByPlaceholder("You'll act as...").fill(assistantInput.instructions);
-
-  const slider = page.getByRole('slider');
-  const sliderButton = slider.getByRole('button');
-  const box = await sliderButton.boundingBox();
-  if (box) {
-    const startX = box.x + box.width / 2;
-    const startY = box.y + box.height / 2;
-    const endX = startX + 100; // adjust as needed
-    await page.mouse.move(startX, startY);
-    await page.mouse.down();
-    await page.mouse.move(endX, startY, { steps: 10 }); // Drag to the new position
-    await page.mouse.up();
-  }
-
   // Wait for modal save button to disappear if avatar modal was open
   const saveButtons = page.getByRole('button', { name: 'Save' });
   await expect(saveButtons).toHaveCount(1);
@@ -89,6 +75,10 @@ export const createAssistantWithApi = async (params: CreateAssistantWithApiParam
 
   return (await openAIClient.beta.assistants.create(assistantCreateParams)) as LFAssistant;
 };
+
+export const getAssistantWithApi = async (id: string, openAIClient: OpenAI): Promise<Assistant> => {
+  return await openAIClient.beta.assistants.retrieve(id);
+};
 export const deleteAssistantWithApi = async (id: string, openAIClient: OpenAI) => {
   await openAIClient.beta.assistants.del(id);
 };
@@ -175,3 +165,21 @@ export const saveAssistant = async (assistantName: string, page: Page) => {
   await page.waitForURL('/chat/assistants-management');
   await expect(page.getByTestId(`assistant-card-${assistantName}`)).toBeVisible();
 };
+
+export const clickOnSliderValue = async (value: number, page: Page) => {
+  const slider = page.getByRole('slider');
+  const boundingBox = await slider.boundingBox();
+  if (!boundingBox) throw new Error('Slider element not found');
+  const sliderWidth = boundingBox.width;
+
+  // calculate the position to click based on value
+  const targetX = boundingBox.x + sliderWidth * value;
+  const targetY = boundingBox.y + boundingBox.height / 2;
+
+  await page.mouse.click(targetX, targetY);
+
+  const sliderValue = await slider?.getAttribute('aria-valuenow');
+  if (!sliderValue) throw new Error('Slider value not found');
+  const normalizedValue = Number(sliderValue) / 100;
+  expect(normalizedValue).toBeCloseTo(value, 0.1);
+};