fix: prevent using keyboard in plyaground while request is ongoing (#…

…1170) Fixes #1087 Signed-off-by: Jeff MAURY <[email protected]>
containers · Jun 21, 2024 · 39b29a1 · 39b29a1
1 parent c666ae7
commit 39b29a1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/packages/frontend/src/pages/Playground.spec.ts b/packages/frontend/src/pages/Playground.spec.ts
@@ -263,7 +263,7 @@ test('send prompt should be enabled initially, with a system prompt', async () =
   });
 });
 
-test('sending prompt should disable the send button', async () => {
+test('sending prompt should disable the send button and the input element', async () => {
   vi.mocked(studioClient.getCatalog).mockResolvedValue({
     models: [
       {
@@ -304,10 +304,12 @@ test('sending prompt should disable the send button', async () => {
   await waitFor(() => {
     send = screen.getByRole('button', { name: 'Send prompt' });
     expect(send).toBeDisabled();
+    const input = screen.getByRole('textbox', { name: 'prompt' });
+    expect(input).toBeDisabled();
   });
 });
 
-test('sending prompt not using button should disable the send button', async () => {
+test('sending prompt not using button should disable the send button and the input element', async () => {
   vi.mocked(studioClient.getCatalog).mockResolvedValue({
     models: [
       {
@@ -349,10 +351,12 @@ test('sending prompt not using button should disable the send button', async ()
   await waitFor(() => {
     prompt = screen.getByRole('button', { name: 'Send prompt' });
     expect(prompt).toBeDisabled();
+    const input = screen.getByRole('textbox', { name: 'prompt' });
+    expect(input).toBeDisabled();
   });
 });
 
-test('receiving complete message should enable the send button', async () => {
+test('receiving complete message should enable the send button and the input element', async () => {
   vi.mocked(studioClient.getCatalog).mockResolvedValue({
     models: [
       {
@@ -393,6 +397,8 @@ test('receiving complete message should enable the send button', async () => {
   await waitFor(() => {
     send = screen.getByRole('button', { name: 'Send prompt' });
     expect(send).toBeDisabled();
+    const input = screen.getByRole('textbox', { name: 'prompt' });
+    expect(input).toBeDisabled();
   });
 
   customConversations.set([
@@ -419,6 +425,8 @@ test('receiving complete message should enable the send button', async () => {
   await waitFor(() => {
     send = screen.getByRole('button', { name: 'Send prompt' });
     expect(send).toBeEnabled();
+    const input = screen.getByRole('textbox', { name: 'prompt' });
+    expect(input).toBeEnabled();
   });
 });
 

diff --git a/packages/frontend/src/pages/Playground.svelte b/packages/frontend/src/pages/Playground.svelte
@@ -257,7 +257,8 @@ export function goToUpPage(): void {
             on:keydown="{handleKeydown}"
             rows="2"
             class="w-full p-2 outline-none text-sm rounded-sm bg-charcoal-800 text-white placeholder-white"
-            placeholder="Type your prompt here"></textarea>
+            placeholder="Type your prompt here"
+            disabled="{!sendEnabled}"></textarea>
 
           <div class="flex-none text-right m-4">
             <Button