feat: Add test on chat settings (#462)

cypress/e2e/chat_settings/.chainlit/config.toml

@@ -0,0 +1,69 @@
+[project]
+# Whether to enable telemetry (default: true). No personal data is collected.
+enable_telemetry = true
+
+# List of environment variables to be provided by each user to use the app.
+user_env = []
+
+# Duration (in seconds) during which the session is saved when the connection is lost
+session_timeout = 3600
+
+# Enable third parties caching (e.g LangChain cache)
+cache = false
+
+# Follow symlink for asset mount (see https://github.com/Chainlit/chainlit/issues/317)
+# follow_symlink = false
+
+[features]
+# Show the prompt playground
+prompt_playground = true
+
+[UI]
+# Name of the app and chatbot.
+name = "Chatbot"
+
+# Description of the app and chatbot. This is used for HTML tags.
+# description = ""
+
+# Large size content are by default collapsed for a cleaner ui
+default_collapse_content = true
+
+# The default value for the expand messages settings.
+default_expand_messages = false
+
+# Hide the chain of thought details from the user in the UI.
+hide_cot = false
+
+# Link to your github repo. This will add a github button in the UI's header.
+# github = ""
+
+# Specify a CSS file that can be used to customize the user interface.
+# The CSS file can be served from the public directory or via an external link.
+# custom_css = "/public/test.css"
+
+# If the app is served behind a reverse proxy (like cloud run) we need to know the base url for oauth
+# base_url = "https://mydomain.com"
+
+# Override default MUI light theme. (Check theme.ts)
+[UI.theme.light]
+    #background = "#FAFAFA"
+    #paper = "#FFFFFF"
+
+    [UI.theme.light.primary]
+        #main = "#F80061"
+        #dark = "#980039"
+        #light = "#FFE7EB"
+
+# Override default MUI dark theme. (Check theme.ts)
+[UI.theme.dark]
+    #background = "#FAFAFA"
+    #paper = "#FFFFFF"
+
+    [UI.theme.dark.primary]
+        #main = "#F80061"
+        #dark = "#980039"
+        #light = "#FFE7EB"
+
+
+[meta]
+generated_by = "0.7.1"

cypress/e2e/chat_settings/main.py

@@ -0,0 +1,66 @@
+import chainlit as cl
+from chainlit.input_widget import Select, Slider, Switch
+
+
+@cl.on_chat_start
+async def start():
+    settings = await cl.ChatSettings(
+        [
+            Select(
+                id="Model",
+                label="OpenAI - Model",
+                values=["gpt-3.5-turbo", "gpt-3.5-turbo-16k", "gpt-4", "gpt-4-32k"],
+                initial_index=0,
+            ),
+            Switch(id="Streaming", label="OpenAI - Stream Tokens", initial=True),
+            Slider(
+                id="Temperature",
+                label="OpenAI - Temperature",
+                initial=1,
+                min=0,
+                max=2,
+                step=0.1,
+            ),
+            Slider(
+                id="SAI_Steps",
+                label="Stability AI - Steps",
+                initial=30,
+                min=0,
+                max=150,
+                step=1,
+                description="Amount of inference steps performed on image generation.",
+            ),
+            Slider(
+                id="SAI_Cfg_Scale",
+                label="Stability AI - Cfg_Scale",
+                initial=7,
+                min=1,
+                max=35,
+                step=0.1,
+                description="Influences how strongly your generation is guided to match your prompt.",
+            ),
+            Slider(
+                id="SAI_Width",
+                label="Stability AI - Image Width",
+                initial=512,
+                min=0,
+                max=2048,
+                step=64,
+                tooltip="Measured in pixels",
+            ),
+            Slider(
+                id="SAI_Height",
+                label="Stability AI - Image Height",
+                initial=512,
+                min=0,
+                max=2048,
+                step=64,
+                tooltip="Measured in pixels",
+            ),
+        ]
+    ).send()
+
+
+@cl.on_settings_update
+async def setup_agent(settings):
+    await cl.Message(content="Settings updated!").send()

cypress/e2e/chat_settings/spec.cy.ts

@@ -0,0 +1,51 @@
+import { runTestServer } from '../../support/testUtils';
+
+describe('Customize chat settings', () => {
+  before(() => {
+    runTestServer();
+  });
+
+  it('should update inputs', () => {
+    // Open chat settings modal
+    cy.get('#chat-settings-open-modal').should('exist');
+    cy.get('#chat-settings-open-modal').click();
+    cy.get('#chat-settings-dialog').should('exist');
+
+    // Update inputs
+    cy.get('#mui-component-select-Model').click();
+    cy.contains('gpt-4').click();
+    cy.get('#Model').should('have.value', 'gpt-4');
+
+    cy.get('#Temperature').clear().type('0.4');
+    cy.get('#Temperature').should('have.value', '0.4');
+
+    cy.get('#SAI_Steps').clear().type('5');
+    cy.get('#SAI_Steps').should('have.value', '50');
+
+    cy.get('#SAI_Cfg_Scale').clear().type('2');
+    cy.get('#SAI_Cfg_Scale').should('have.value', '20');
+
+    cy.get('#SAI_Width').clear().type('140');
+    cy.get('#SAI_Width').should('have.value', '1400');
+
+    cy.get('#SAI_Height').clear().type('140');
+    cy.get('#SAI_Height').should('have.value', '1400');
+
+    cy.contains('Confirm').click();
+
+    cy.get('.message').should('have.length', 1);
+    cy.get('.message').eq(0).should('contain', 'Settings updated!');
+
+    // Check if inputs are updated
+    cy.get('#chat-settings-open-modal').click();
+    cy.get('#Temperature').should('have.value', '0.4');
+    cy.get('#SAI_Steps').should('have.value', '50');
+    cy.get('#SAI_Cfg_Scale').should('have.value', '20');
+    cy.get('#SAI_Width').should('have.value', '1400');
+    cy.get('#SAI_Height').should('have.value', '1400');
+
+    // Check if modal is correctly closed
+    cy.contains('Cancel').click();
+    cy.get('#chat-settings-dialog').should('not.exist');
+  });
+});

frontend/src/components/organisms/chat/inputBox/input.tsx

@@ -92,6 +92,7 @@ const Input = ({ onSubmit, onReply }: Props) => {
     <>
       {chatSettingsInputs.length > 0 && (
         <IconButton
+          id="chat-settings-open-modal"
           disabled={disabled}
           color="inherit"
           onClick={() => setChatSettingsOpen(true)}