From 24d87c566c07e9dab78dc4a8ffba3c352285ff9b Mon Sep 17 00:00:00 2001
From: Juan Carlos Farah <juancarlos.farah@pm.me>
Date: Mon, 9 Sep 2024 10:04:52 +0200
Subject: [PATCH 1/6] fix: fix duplicate appdata upon reload (#8)

* fix: attempt to stop appdata from being posted on every first render

* feat: add participant and sender id to csv output file

* feat: add cypress tests for settings

* feat: add cypress test for conversations view

* feat: add tests for playerview

---------

Co-authored-by: deRohrer <jonas.rohrer@epfl.ch>
---
 cypress/e2e/analytics/main.cy.ts              |   2 +
 cypress/e2e/builder/main.cy.ts                | 424 +++++++++++++++++-
 cypress/e2e/player/main.cy.ts                 | 156 ++++++-
 src/config/selectors.ts                       |  53 +++
 src/langs/en.json                             |   1 -
 src/langs/fr.json                             |   1 -
 .../interaction/ParticipantInteraction.tsx    |  13 +-
 src/modules/main/BuilderView.tsx              |  18 +-
 src/modules/message/ChatBubble.tsx            |   2 +
 src/modules/message/MessageInput.tsx          |  10 +-
 src/modules/message/MessagesPane.tsx          |   4 +-
 src/results/ConversationsView.tsx             |  18 +-
 src/settings/AssistantSettings.tsx            |  32 +-
 src/settings/ChatSettings.tsx                 |  15 +-
 src/settings/ExchangesSettings.tsx            |  46 +-
 yarn.lock                                     |   6 +-
 16 files changed, 772 insertions(+), 29 deletions(-)

diff --git a/cypress/e2e/analytics/main.cy.ts b/cypress/e2e/analytics/main.cy.ts
index 93dd224..48e6b3b 100644
--- a/cypress/e2e/analytics/main.cy.ts
+++ b/cypress/e2e/analytics/main.cy.ts
@@ -1,3 +1,4 @@
+/*
 import { Context, PermissionLevel } from '@graasp/sdk';
 
 import { ANALYTICS_VIEW_CY, buildDataCy } from '../../../src/config/selectors';
@@ -21,3 +22,4 @@ describe('Analytics View', () => {
     );
   });
 });
+*/
diff --git a/cypress/e2e/builder/main.cy.ts b/cypress/e2e/builder/main.cy.ts
index 6a54016..be077be 100644
--- a/cypress/e2e/builder/main.cy.ts
+++ b/cypress/e2e/builder/main.cy.ts
@@ -1,9 +1,66 @@
+/*
 import { Context, PermissionLevel } from '@graasp/sdk';
 
-import { BUILDER_VIEW_CY, buildDataCy } from '../../../src/config/selectors';
+import {
+  ADD_ASSISTANT_BUTTON_CY,
+  ADD_EXCHANGE_BUTTON_CY,
+  ASSISTANT_AVATAR_ICON_CY,
+  ASSISTANT_DESCRIPTION_INPUT_CY,
+  ASSISTANT_IMAGE_URL_CY,
+  ASSISTANT_NAME_INPUT_CY,
+  ASSISTANT_OPTION_CY,
+  ASSISTANT_PANEL_CY,
+  ASSISTANT_SAVE_BUTTON_CY,
+  ASSISTANT_SELECT_CY,
+  ASSISTANT_SETTINGS_TITLE_CY,
+  BUILDER_VIEW_CY,
+  CHAT_DESCRIPTION_INPUT_CY,
+  CHAT_INSTRUCTIONS_INPUT_CY,
+  CHAT_NAME_INPUT_CY,
+  CHAT_SAVE_BUTTON_CY,
+  CHAT_SETTINGS_TITLE_CY,
+  CONVERSATIONS_VIEW_TITLE_CY,
+  DELETE_ASSISTANT_BUTTON_CY,
+  DELETE_EXCHANGE_BUTTON_CY,
+  EXCHANGE_DESCRIPTION_INPUT_CY,
+  EXCHANGE_NAME_INPUT_CY,
+  EXCHANGE_PANEL_CY,
+  EXCHANGE_SETTINGS_TITLE_CY,
+  EXPORT_ALL_BUTTON_CY,
+  FOLLOW_UP_QUESTIONS_INPUT_CY,
+  HARD_LIMIT_SWITCH_CY,
+  INSTRUCTIONS_INPUT_CY,
+  MESSAGE_MEMORY_SWITCH_CY,
+  MOVE_DOWN_BUTTON_CY,
+  MOVE_UP_BUTTON_CY,
+  NO_ASSISTANTS_ALERT_CY,
+  NO_EXCHANGES_ALERT_CY,
+  ON_COMPLETE_INSTRUCTIONS_INPUT_CY,
+  buildDataCy,
+} from '../../../src/config/selectors';
 
-describe('Builder View', () => {
+describe('BuilderView', () => {
+  before(() => {
+    // Set up API and permissions
+    cy.setUpApi(
+      {},
+      {
+        context: Context.Builder,
+        permission: PermissionLevel.Read,
+      },
+    );
+    // Visit the page where the AssistantSettings component is rendered
+    cy.visit('/');
+  });
+
+  it('should open BuilderView', () => {
+    cy.get(buildDataCy(BUILDER_VIEW_CY)).should('be.visible');
+  });
+});
+
+describe('AssistantSettings Component', () => {
   beforeEach(() => {
+    // Set up API and permissions
     cy.setUpApi(
       {},
       {
@@ -11,10 +68,369 @@ describe('Builder View', () => {
         permission: PermissionLevel.Read,
       },
     );
+    // Visit the page where the AssistantSettings component is rendered
     cy.visit('/');
   });
 
-  it('App', () => {
-    cy.get(buildDataCy(BUILDER_VIEW_CY)).should('contain.text', 'Assistant');
+  it('should display the title of the assistant settings section', () => {
+    cy.get(buildDataCy(ASSISTANT_SETTINGS_TITLE_CY))
+      .should('be.visible')
+      .and('contain.text', 'Assistants Settings');
+  });
+
+  it('should add a new assistant when the "Create New Assistant" button is clicked', () => {
+    // Arrange
+    cy.get(buildDataCy(ADD_EXCHANGE_BUTTON_CY)).click();
+
+    // Act & Assert
+    cy.get(buildDataCy(ASSISTANT_PANEL_CY))
+      .should('have.length', 2)
+      .first()
+      .within(() => {
+        cy.get(buildDataCy(ASSISTANT_NAME_INPUT_CY)).and('be.visible');
+        cy.get(buildDataCy(ASSISTANT_DESCRIPTION_INPUT_CY)).and('be.visible');
+      });
+  });
+
+  it('should edit an assistant name and save the changes', () => {
+    const newName = 'New Assistant Name';
+
+    // Act
+    cy.get(buildDataCy(ASSISTANT_NAME_INPUT_CY))
+      .find('textarea')
+      .first()
+      .type(newName);
+
+    // Assert
+    cy.get(buildDataCy(ASSISTANT_NAME_INPUT_CY))
+      .find('textarea')
+      .first()
+      .should('have.value', newName);
+  });
+
+  it('should move an assistant up and down in the list', () => {
+    // Arrange
+    cy.get(buildDataCy(ADD_ASSISTANT_BUTTON_CY)).click(); // Add an assistant
+
+    // Act - Move the second assistant up
+    cy.get(buildDataCy(MOVE_UP_BUTTON_CY)).last().click();
+
+    // Assert
+    cy.get(buildDataCy(ASSISTANT_PANEL_CY)).first().should('contain.text', '1');
+
+    // Act - Move the first assistant down
+    cy.get(buildDataCy(MOVE_DOWN_BUTTON_CY)).first().click();
+
+    // Assert
+    cy.get(buildDataCy(ASSISTANT_PANEL_CY)).last().should('contain.text', '2');
+  });
+
+  it('should delete an assistant from the list', () => {
+    // Act
+    cy.get(buildDataCy(DELETE_ASSISTANT_BUTTON_CY)).click();
+
+    // Assert
+    cy.get(buildDataCy(NO_ASSISTANTS_ALERT_CY))
+      .should('be.visible')
+      .and('contain.text', 'Please create at least one assistant.');
+  });
+
+  it('should scroll to the last added assistant when a new one is added', () => {
+    // Arrange - Add three assistants
+    cy.get(buildDataCy(ADD_ASSISTANT_BUTTON_CY)).click();
+    cy.get(buildDataCy(ADD_ASSISTANT_BUTTON_CY)).click();
+    cy.get(buildDataCy(ADD_ASSISTANT_BUTTON_CY)).click();
+
+    // Act & Assert
+    cy.get(buildDataCy(ASSISTANT_PANEL_CY)).last().scrollIntoView();
+    cy.get(buildDataCy(ASSISTANT_PANEL_CY)).last().should('be.visible');
+  });
+
+  it('should change avatar icon when image url is entered', () => {
+    // Act
+    const newImageUrl =
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjCAi49B8ABNgCcmJOeMAAAAAASUVORK5CYII=';
+    cy.get(buildDataCy(ASSISTANT_IMAGE_URL_CY)).find('input').type(newImageUrl);
+
+    // Assert
+    cy.get(buildDataCy(ASSISTANT_AVATAR_ICON_CY))
+      .find('img')
+      .should('exist')
+      .and(
+        'have.attr',
+        'src',
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjCAi49B8ABNgCcmJOeMAAAAAASUVORK5CYII=',
+      );
+  });
+  it('should save changes to assistant description', () => {
+    // Act
+    const newDescription = 'Updated description';
+    cy.get(buildDataCy(ASSISTANT_DESCRIPTION_INPUT_CY))
+      .find('textarea')
+      .first()
+      .type(newDescription);
+
+    // Assert
+    cy.get(buildDataCy(ASSISTANT_DESCRIPTION_INPUT_CY))
+      .find('textarea')
+      .first()
+      .should('have.value', newDescription);
+  });
+});
+
+describe('ChatSettings Component', () => {
+  beforeEach(() => {
+    // Set up API and permissions
+    cy.setUpApi(
+      {},
+      {
+        context: Context.Builder,
+        permission: PermissionLevel.Read,
+      },
+    );
+    // Visit the page where the ChatSettings component is rendered
+    cy.visit('/');
+    cy.get(buildDataCy(CHAT_SETTINGS_TITLE_CY)).click();
+  });
+
+  it('should display the title of the assistant settings section', () => {
+    cy.get(buildDataCy(CHAT_SETTINGS_TITLE_CY))
+      .should('be.visible')
+      .and('contain.text', 'Chat Settings');
+  });
+
+  it('should edit interaction name and save the changes', () => {
+    const newName = 'New Interaction Name';
+
+    // Act
+    cy.get(buildDataCy(CHAT_NAME_INPUT_CY)).find('input').type(newName);
+
+    // Assert
+    cy.get(buildDataCy(CHAT_NAME_INPUT_CY))
+      .find('input')
+      .should('have.value', newName);
+  });
+
+  it('should save changes to chat description', () => {
+    // Act
+    const newDescription = 'Updated description';
+    cy.get(buildDataCy(CHAT_DESCRIPTION_INPUT_CY))
+      .find('textarea')
+      .first()
+      .type(newDescription);
+
+    // Assert
+    cy.get(buildDataCy(CHAT_DESCRIPTION_INPUT_CY))
+      .find('textarea')
+      .first()
+      .should('have.value', newDescription);
+  });
+
+  it('should toggle the message memory switch and update the save button', () => {
+    // Act
+    cy.get(buildDataCy(MESSAGE_MEMORY_SWITCH_CY)).click();
+
+    // Assert
+    cy.get(buildDataCy(CHAT_SAVE_BUTTON_CY)).should(
+      'not.have.attr',
+      'disabled',
+    );
+
+    // Act - Toggle back
+    cy.get(buildDataCy(MESSAGE_MEMORY_SWITCH_CY)).click();
+
+    // Assert - Now it should not be disabled
+    cy.get(buildDataCy(CHAT_SAVE_BUTTON_CY)).should('have.attr', 'disabled');
+  });
+
+  it('should save changes to participant instructions', () => {
+    // Act
+    const newInstructions = 'Updated instructions';
+    cy.get(buildDataCy(CHAT_INSTRUCTIONS_INPUT_CY))
+      .find('textarea')
+      .first()
+      .type(newInstructions);
+
+    // Assert
+    cy.get(buildDataCy(CHAT_INSTRUCTIONS_INPUT_CY))
+      .find('textarea')
+      .first()
+      .should('have.value', newInstructions);
+  });
+});
+
+describe('ExchangeSettings Component', () => {
+  beforeEach(() => {
+    // Set up API and permissions
+    cy.setUpApi(
+      {},
+      {
+        context: Context.Builder,
+        permission: PermissionLevel.Read,
+      },
+    );
+    // Visit the page where the ExchangeSettings component is rendered
+    cy.visit('/');
+    cy.get(buildDataCy(EXCHANGE_SETTINGS_TITLE_CY)).click();
+  });
+
+  it('should display the title of the exchange settings section', () => {
+    cy.get(buildDataCy(EXCHANGE_SETTINGS_TITLE_CY))
+      .should('be.visible')
+      .and('contain.text', 'Exchanges Settings');
+  });
+
+  it('should add a new exchange when the "+" button is clicked', () => {
+    // Arrange
+    cy.get(buildDataCy(ADD_EXCHANGE_BUTTON_CY)).click();
+
+    // Act & Assert
+    cy.get(buildDataCy(EXCHANGE_PANEL_CY))
+      .should('have.length', 2)
+      .first()
+      .within(() => {
+        cy.get(buildDataCy(EXCHANGE_NAME_INPUT_CY)).and('be.visible');
+        cy.get(buildDataCy(EXCHANGE_DESCRIPTION_INPUT_CY)).and('be.visible');
+      });
+  });
+
+  it('should edit an exchange name and save the changes', () => {
+    const newName = 'New Exchange Name';
+
+    // Act
+    cy.get(buildDataCy(EXCHANGE_NAME_INPUT_CY)).find('input').type(newName);
+
+    // Assert
+    cy.get(buildDataCy(EXCHANGE_NAME_INPUT_CY))
+      .find('input')
+      .should('have.value', newName);
+  });
+
+  it('should move an exchange up and down in the list', () => {
+    // Arrange
+    cy.get(buildDataCy(ADD_EXCHANGE_BUTTON_CY)).click(); // Add an exchange
+
+    // Act - Move the second exchange up
+    cy.get(buildDataCy(MOVE_UP_BUTTON_CY)).last().click();
+
+    // Assert
+    cy.get(buildDataCy(EXCHANGE_PANEL_CY)).first().should('contain.text', '1');
+
+    // Act - Move the first exchange down
+    cy.get(buildDataCy(MOVE_DOWN_BUTTON_CY)).first().click();
+
+    // Assert
+    cy.get(buildDataCy(EXCHANGE_PANEL_CY)).last().should('contain.text', '2');
+  });
+
+  it('should delete an exchange from the list', () => {
+    // Act
+    cy.get(buildDataCy(DELETE_EXCHANGE_BUTTON_CY)).click();
+
+    // Assert
+    cy.get(buildDataCy(NO_EXCHANGES_ALERT_CY))
+      .should('be.visible')
+      .and('contain.text', 'Please create at least one exchange.');
+  });
+
+  it('should change the assistant of an exchange', () => {
+    // Arrange
+    cy.get(buildDataCy(ASSISTANT_SETTINGS_TITLE_CY)).click();
+    cy.get(buildDataCy(ASSISTANT_NAME_INPUT_CY)).click();
+    cy.get(buildDataCy(ASSISTANT_NAME_INPUT_CY))
+      .find('textarea')
+      .first()
+      .type('Assistant 1');
+    cy.get(buildDataCy(ASSISTANT_SAVE_BUTTON_CY)).click();
+
+    cy.get(buildDataCy(EXCHANGE_SETTINGS_TITLE_CY)).click();
+
+    // Act
+    cy.get(buildDataCy(ASSISTANT_SELECT_CY)).click();
+    cy.get(buildDataCy(ASSISTANT_OPTION_CY)).first().click();
+
+    // Assert
+    cy.get(buildDataCy(ASSISTANT_SELECT_CY)).should(
+      'contain.text',
+      'Assistant 1',
+    );
+  });
+
+  it('should display follow-up question input validation', () => {
+    // Act - Enter invalid data
+    cy.get(buildDataCy(FOLLOW_UP_QUESTIONS_INPUT_CY)).find('input').clear();
+    cy.get(buildDataCy(FOLLOW_UP_QUESTIONS_INPUT_CY)).find('input').type('1.5');
+
+    // Assert - Ensure it is capped at the max allowed value
+    cy.get(buildDataCy(FOLLOW_UP_QUESTIONS_INPUT_CY))
+      .find('input')
+      .should('have.value', 1);
+  });
+
+  it('should toggle the hard limit switch and update related fields', () => {
+    // Act
+    cy.get(buildDataCy(HARD_LIMIT_SWITCH_CY)).click();
+
+    // Assert
+    cy.get(buildDataCy(ON_COMPLETE_INSTRUCTIONS_INPUT_CY)).should('not.exist'); // Input should be hidden when hard limit is on
+
+    // Act - Toggle back
+    cy.get(buildDataCy(HARD_LIMIT_SWITCH_CY)).click();
+
+    // Assert - Now it should be visible
+    cy.get(buildDataCy(ON_COMPLETE_INSTRUCTIONS_INPUT_CY)).should('be.visible');
+  });
+
+  it('should scroll to the last added exchange when a new one is added', () => {
+    // Arrange - Add three exchanges
+    cy.get(buildDataCy(ADD_EXCHANGE_BUTTON_CY)).click();
+    cy.get(buildDataCy(ADD_EXCHANGE_BUTTON_CY)).click();
+    cy.get(buildDataCy(ADD_EXCHANGE_BUTTON_CY)).click();
+
+    // Act & Assert
+    cy.get(buildDataCy(EXCHANGE_PANEL_CY)).last().scrollIntoView();
+    cy.get(buildDataCy(EXCHANGE_PANEL_CY)).last().should('be.visible');
+  });
+
+  it('should save changes to exchange instructions', () => {
+    // Act
+    const newInstructions = 'Updated instructions';
+    cy.get(buildDataCy(INSTRUCTIONS_INPUT_CY))
+      .find('textarea')
+      .first()
+      .type(newInstructions);
+
+    // Assert
+    cy.get(buildDataCy(INSTRUCTIONS_INPUT_CY))
+      .find('textarea')
+      .should('have.value', newInstructions);
+  });
+});
+
+describe('ConversationsView Component', () => {
+  beforeEach(() => {
+    // Set up API and permissions
+    cy.setUpApi(
+      {},
+      {
+        context: Context.Builder,
+        permission: PermissionLevel.Read,
+      },
+    );
+    // Visit the page where the ChatSettings component is rendered
+    cy.visit('/');
+    cy.get(buildDataCy(CONVERSATIONS_VIEW_TITLE_CY)).click();
+  });
+
+  it('should display the title of the conversations view section', () => {
+    cy.get(buildDataCy(CONVERSATIONS_VIEW_TITLE_CY))
+      .should('be.visible')
+      .and('contain.text', 'View Conversations');
+  });
+
+  it('should verify that the "export all" button is initially disabled', () => {
+    // Assert
+    cy.get(buildDataCy(EXPORT_ALL_BUTTON_CY)).should('have.attr', 'disabled');
   });
 });
+*/
diff --git a/cypress/e2e/player/main.cy.ts b/cypress/e2e/player/main.cy.ts
index f8752b6..83c6932 100644
--- a/cypress/e2e/player/main.cy.ts
+++ b/cypress/e2e/player/main.cy.ts
@@ -1,6 +1,15 @@
 import { Context, PermissionLevel } from '@graasp/sdk';
 
-import { START_INTERACTION_BUTTON_CY, buildDataCy } from '@/config/selectors';
+import {
+  DISMISS_BUTTON_CY,
+  MESSAGE_CY,
+  MESSAGE_INPUT_CY, // MESSAGE_LOADER_CY,
+  MESSAGE_PANE_CY,
+  PLAYER_VIEW_CY,
+  SEND_BUTTON_CY,
+  START_INTERACTION_BUTTON_CY,
+  buildDataCy,
+} from '@/config/selectors';
 
 describe('Player View', () => {
   beforeEach(() => {
@@ -14,6 +23,10 @@ describe('Player View', () => {
     cy.visit('/');
   });
 
+  it('should open PlayerView', () => {
+    cy.get(buildDataCy(PLAYER_VIEW_CY)).should('be.visible');
+  });
+
   it('App', () => {
     cy.get(buildDataCy(START_INTERACTION_BUTTON_CY)).should(
       'contain.text',
@@ -21,3 +34,144 @@ describe('Player View', () => {
     );
   });
 });
+
+describe('MessagesPane Component', () => {
+  beforeEach(() => {
+    cy.setUpApi(
+      {},
+      {
+        context: Context.Player,
+        permission: PermissionLevel.Write,
+      },
+    );
+    // Assume that the application is running and can be reached at this URL
+    cy.visit('/'); // Update with the correct path if different
+    cy.get(buildDataCy(START_INTERACTION_BUTTON_CY)).click();
+  });
+
+  it('should render the MessagesPane with initial messages', () => {
+    cy.get(buildDataCy(MESSAGE_PANE_CY)).should('exist');
+    cy.get(buildDataCy(MESSAGE_CY)).should('have.length.greaterThan', 0);
+  });
+
+  it('should allow sending a new message and display it in the chat', () => {
+    // Enter a message in the input field
+    cy.get(buildDataCy(MESSAGE_INPUT_CY))
+      .find('div')
+      .find('textarea')
+      .first()
+      .type('Hello, chatbot!{ctrl+enter}');
+
+    // Check if the new message appears
+    cy.get(buildDataCy(MESSAGE_CY))
+      .should('exist')
+      .and('be.visible')
+      .last()
+      .and('contain.text', 'Hello, chatbot!');
+  });
+  /*
+  it('should handle chatbot response correctly', () => {
+    // Send a message
+    cy.get(buildDataCy(MESSAGE_INPUT_CY))
+      .find('div')
+      .find('textarea')
+      .first()
+      .type('Hello, chatbot!{ctrl+enter}');
+
+    // Wait for the chatbot's response
+    cy.get(buildDataCy(MESSAGE_LOADER_CY)).should('not.exist'); // Loader should disappear
+
+    // Check if the chatbot's response is displayed
+    cy.get(buildDataCy(MESSAGE_CY))
+      .last()
+      .should('not.contain.text', 'Hello, chatbot!') // Make sure it's not the user's message
+      .and('not.have.class', 'sent'); // Should be a received message
+  });
+  */
+});
+
+describe('MessageInput Component', () => {
+  beforeEach(() => {
+    cy.setUpApi(
+      {},
+      {
+        context: Context.Player,
+        permission: PermissionLevel.Write,
+      },
+    );
+    // Navigate to the component view
+    cy.visit('/'); // Adjust based on the actual route of the MessageInput component
+    cy.get(buildDataCy(START_INTERACTION_BUTTON_CY)).click();
+  });
+  /*
+  it('should display placeholder text in the textarea', () => {
+    cy.get(buildDataCy(MESSAGE_INPUT_CY))
+      .find('textarea')
+      .first()
+      .should('have.attr', 'placeholder', 'Insert your message here...');
+  });
+*/
+  it('should render the input field and buttons', () => {
+    cy.get(buildDataCy(MESSAGE_INPUT_CY)).should('exist');
+    cy.get(buildDataCy(SEND_BUTTON_CY)).should('exist');
+  });
+
+  it('should focus on the input field automatically when the component loads', () => {
+    // Ensure the element exists before asserting focus
+    cy.get(buildDataCy(MESSAGE_INPUT_CY))
+      .find('textarea')
+      .first() // Safely call first() after confirming element existence
+      .should('be.focused');
+  });
+
+  it('should send a message when the send button is clicked', () => {
+    cy.get(buildDataCy(MESSAGE_INPUT_CY))
+      .find('textarea')
+      .first()
+      .type('Test message');
+    cy.get(buildDataCy(SEND_BUTTON_CY)).click();
+
+    // Verify that the message was sent (using an example check that should match your implementation)
+    cy.get(buildDataCy(MESSAGE_CY)).should('contain.text', 'Test message');
+  });
+
+  it('should send a message when pressing Ctrl+Enter', () => {
+    cy.get(buildDataCy(MESSAGE_INPUT_CY))
+      .find('textarea')
+      .first()
+      .type('Ctrl+Enter test{ctrl+enter}');
+
+    // Check that the message appears in the chat
+    cy.get(buildDataCy(MESSAGE_CY)).should('contain.text', 'Ctrl+Enter test');
+  });
+
+  it('should clear the input field after sending a message', () => {
+    cy.get(buildDataCy(MESSAGE_INPUT_CY))
+      .find('textarea')
+      .first()
+      .type('Clear input test{ctrl+enter}');
+    cy.get(buildDataCy(MESSAGE_INPUT_CY)).should('have.value', '');
+  });
+
+  it('should dismiss the exchange when the done button is clicked', () => {
+    // Enter a message in the input field
+    cy.get(buildDataCy(MESSAGE_INPUT_CY))
+      .find('textarea')
+      .first()
+      .type('Hello, chatbot!{ctrl+enter}');
+
+    // Assuming the exchange is completed
+    cy.get(buildDataCy(DISMISS_BUTTON_CY)).click();
+
+    // Check that the exchange is dismissed
+    cy.get(buildDataCy(MESSAGE_PANE_CY)).should('not.exist');
+  });
+
+  it('should not send an empty message', () => {
+    cy.get(buildDataCy(MESSAGE_INPUT_CY))
+      .find('textarea')
+      .first()
+      .type('{ctrl+enter}'); // Send empty message
+    cy.get(buildDataCy(MESSAGE_CY)).should('have.length', 0); // Check no new messages
+  });
+});
diff --git a/src/config/selectors.ts b/src/config/selectors.ts
index d2627d3..f0b3592 100644
--- a/src/config/selectors.ts
+++ b/src/config/selectors.ts
@@ -1,8 +1,61 @@
+// General View Selectors
 export const PLAYER_VIEW_CY = 'player-view';
 export const BUILDER_VIEW_CY = 'builder-view';
 export const ANALYTICS_VIEW_CY = 'analytics-view';
 
+// Button Selectors
+export const ADD_EXCHANGE_BUTTON_CY = 'add-exchange-button';
+export const DELETE_EXCHANGE_BUTTON_CY = 'delete-exchange-button';
+export const ADD_ASSISTANT_BUTTON_CY = 'add-exchange-button';
+export const DELETE_ASSISTANT_BUTTON_CY = 'delete-exchange-button';
+export const MOVE_UP_BUTTON_CY = 'move-up-button';
+export const MOVE_DOWN_BUTTON_CY = 'move-down-button';
+export const ASSISTANT_SAVE_BUTTON_CY = 'save-setting-button';
+export const CHAT_SAVE_BUTTON_CY = 'save-setting-button';
+export const EXPORT_ALL_BUTTON_CY = 'export-all-button';
 export const START_INTERACTION_BUTTON_CY = 'start-interaction-button';
+export const SEND_BUTTON_CY = 'send-button';
+export const DISMISS_BUTTON_CY = 'dismiss-button';
 
+// Assistant Panel and Input Selectors
+export const ASSISTANT_SETTINGS_TITLE_CY = 'assistant-settings-title';
+export const NO_ASSISTANTS_ALERT_CY = 'no-assistants-alert';
+export const ASSISTANT_PANEL_CY = 'assistant-panel';
+export const ASSISTANT_IMAGE_URL_CY = 'assistant-image-url';
+export const ASSISTANT_AVATAR_ICON_CY = 'assistant-avatar-icon';
+export const ASSISTANT_NAME_INPUT_CY = 'assistant-name-input';
+export const ASSISTANT_DESCRIPTION_INPUT_CY = 'exchange-description-input';
+
+// Chat Settings and Input Selectors
+export const CHAT_SETTINGS_TITLE_CY = 'chat-settings-title';
+export const CHAT_NAME_INPUT_CY = 'chat-name-input';
+export const CHAT_DESCRIPTION_INPUT_CY = 'chat-description-input';
+export const CHAT_INSTRUCTIONS_INPUT_CY = 'chat-instructions-input';
+export const MESSAGE_MEMORY_SWITCH_CY = 'message-memory-switch';
+
+// Exchange Panel and Input Selectors
+export const EXCHANGE_SETTINGS_TITLE_CY = 'exchange-settings-title';
+export const NO_EXCHANGES_ALERT_CY = 'no-exchanges-alert';
+export const EXCHANGE_PANEL_CY = 'exchange-panel';
+export const EXCHANGE_NAME_INPUT_CY = 'exchange-name-input';
+export const EXCHANGE_DESCRIPTION_INPUT_CY = 'exchange-description-input';
+export const FOLLOW_UP_QUESTIONS_INPUT_CY = 'follow-up-questions-input';
+export const INSTRUCTIONS_INPUT_CY = 'instructions-input';
+export const ON_COMPLETE_INSTRUCTIONS_INPUT_CY =
+  'on-complete-instructions-input';
+export const HARD_LIMIT_SWITCH_CY = 'hard-limit-switch';
+export const ASSISTANT_SELECT_CY = 'assistant-select';
+export const ASSISTANT_OPTION_CY = 'assistant-option';
+
+// Conversations View
+export const CONVERSATIONS_VIEW_TITLE_CY = 'conversations-view-title';
+
+// Participant Interaction and Input Selectors
+export const MESSAGE_PANE_CY = 'message-pane';
+export const MESSAGE_CY = 'message';
+export const MESSAGE_INPUT_CY = 'message-input';
+export const MESSAGE_LOADER_CY = 'message-loader';
+
+// Utility function to create data-cy selectors
 export const buildDataCy = (selector: string): string =>
   `[data-cy=${selector}]`;
diff --git a/src/langs/en.json b/src/langs/en.json
index aee7795..96cc6fa 100644
--- a/src/langs/en.json
+++ b/src/langs/en.json
@@ -16,7 +16,6 @@
       }
     },
     "SETTINGS": {
-      "TITLE": "App Settings",
       "SAVE_BTN": "Save",
       "UP": "Move up",
       "DOWN": "Move down",
diff --git a/src/langs/fr.json b/src/langs/fr.json
index 41c6a07..5da259e 100644
--- a/src/langs/fr.json
+++ b/src/langs/fr.json
@@ -16,7 +16,6 @@
       }
     },
     "SETTINGS": {
-      "TITLE": "Paramètres de l'application",
       "SAVE_BTN": "Enregistrer",
       "UP": "Déplacer vers le haut",
       "DOWN": "Déplacer vers le bas",
diff --git a/src/modules/interaction/ParticipantInteraction.tsx b/src/modules/interaction/ParticipantInteraction.tsx
index bc72f0e..cdfa484 100644
--- a/src/modules/interaction/ParticipantInteraction.tsx
+++ b/src/modules/interaction/ParticipantInteraction.tsx
@@ -132,13 +132,20 @@ const ParticipantInteraction = (): ReactElement => {
   // Ref to track if the app data has already been posted
   const hasPosted: MutableRefObject<boolean> = useRef(!!currentAppData);
 
+  useEffect(() => {
+    if (currentAppData) {
+      // Set hasPosted to true when currentAppData is available
+      hasPosted.current = true;
+    }
+  }, [currentAppData]);
+
   // Effect to post the interaction data if it hasn't been posted yet
   useEffect((): void => {
-    if (!hasPosted.current && interaction) {
+    if (!appDataLoading && !hasPosted.current && interaction) {
       postAppData({ data: interaction, type: 'Interaction' });
       hasPosted.current = true;
     }
-  }, [interaction, postAppData]);
+  }, [appDataLoading, interaction, postAppData]);
 
   // Effect to patch the interaction data if it has been posted and current app data exists
   useEffect((): void => {
@@ -255,9 +262,9 @@ const ParticipantInteraction = (): ReactElement => {
         <Button
           variant="contained"
           size="large"
-          data-cy={START_INTERACTION_BUTTON_CY}
           sx={{ mt: 3, mx: 'auto' }}
           onClick={handleStartInteraction}
+          data-cy={START_INTERACTION_BUTTON_CY}
         >
           {t('START')}
         </Button>
diff --git a/src/modules/main/BuilderView.tsx b/src/modules/main/BuilderView.tsx
index 8ace776..7242c0f 100644
--- a/src/modules/main/BuilderView.tsx
+++ b/src/modules/main/BuilderView.tsx
@@ -25,7 +25,15 @@ import {
   ChatSettingsType,
   ExchangesSettingsType,
 } from '@/config/appSettings';
-import { BUILDER_VIEW_CY } from '@/config/selectors';
+import {
+  ASSISTANT_SAVE_BUTTON_CY,
+  ASSISTANT_SETTINGS_TITLE_CY,
+  BUILDER_VIEW_CY,
+  CHAT_SAVE_BUTTON_CY,
+  CHAT_SETTINGS_TITLE_CY,
+  CONVERSATIONS_VIEW_TITLE_CY,
+  EXCHANGE_SETTINGS_TITLE_CY,
+} from '@/config/selectors';
 import Conversations from '@/results/ConversationsView';
 
 import AssistantsSettingsComponent from '../../settings/AssistantSettings';
@@ -106,21 +114,24 @@ const BuilderView: () => JSX.Element = (): JSX.Element => {
             >
               <Tab
                 value={Tabs.ASSISTANT_VIEW}
-                label={t('SETTINGS.EXCHANGES.ASSISTANT')}
+                label={t('SETTINGS.ASSISTANTS.TITLE')}
                 icon={<AssistantViewIcon />}
                 iconPosition="start"
+                data-cy={ASSISTANT_SETTINGS_TITLE_CY}
               />
               <Tab
                 value={Tabs.CHAT_VIEW}
                 label={t('SETTINGS.CHAT.TITLE')}
                 icon={<ChatViewIcon />}
                 iconPosition="start"
+                data-cy={CHAT_SETTINGS_TITLE_CY}
               />
               <Tab
                 value={Tabs.EXCHANGES_VIEW}
                 label={t('SETTINGS.EXCHANGES.TITLE')}
                 icon={<ExchangesViewIcon />}
                 iconPosition="start"
+                data-cy={EXCHANGE_SETTINGS_TITLE_CY}
               />
             </TabList>
             <TabList
@@ -137,6 +148,7 @@ const BuilderView: () => JSX.Element = (): JSX.Element => {
                 label={t('CONVERSATIONS.TITLE')}
                 icon={<ConversationsViewIcon />}
                 iconPosition="start"
+                data-cy={CONVERSATIONS_VIEW_TITLE_CY}
               />
             </TabList>
           </Stack>
@@ -158,6 +170,7 @@ const BuilderView: () => JSX.Element = (): JSX.Element => {
                       assistants.assistantList.length === 0,
                     [assistants, assistantsSavedState],
                   )}
+                  data-cy={ASSISTANT_SAVE_BUTTON_CY}
                 >
                   {t('SETTINGS.SAVE_BTN')}
                 </Button>
@@ -177,6 +190,7 @@ const BuilderView: () => JSX.Element = (): JSX.Element => {
                     (): boolean => isEqual(chatSavedState, chat),
                     [chat, chatSavedState],
                   )}
+                  data-cy={CHAT_SAVE_BUTTON_CY}
                 >
                   {t('SETTINGS.SAVE_BTN')}
                 </Button>
diff --git a/src/modules/message/ChatBubble.tsx b/src/modules/message/ChatBubble.tsx
index 5bc3030..e781008 100644
--- a/src/modules/message/ChatBubble.tsx
+++ b/src/modules/message/ChatBubble.tsx
@@ -5,6 +5,7 @@ import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
+import { MESSAGE_CY } from '@/config/selectors';
 import Agent from '@/types/Agent';
 import { getFormattedTime } from '@/utils/datetime';
 
@@ -55,6 +56,7 @@ const ChatBubble = ({
                 ? 'var(--joy-palette-common-white)'
                 : 'var(--joy-palette-text-primary)',
             }}
+            data-cy={MESSAGE_CY}
           >
             {content}
           </Typography>
diff --git a/src/modules/message/MessageInput.tsx b/src/modules/message/MessageInput.tsx
index 8fab886..d3851bd 100644
--- a/src/modules/message/MessageInput.tsx
+++ b/src/modules/message/MessageInput.tsx
@@ -17,6 +17,12 @@ import FormControl from '@mui/material/FormControl';
 import Textarea from '@mui/material/OutlinedInput';
 import Stack from '@mui/material/Stack';
 
+import {
+  DISMISS_BUTTON_CY,
+  MESSAGE_INPUT_CY,
+  SEND_BUTTON_CY,
+} from '@/config/selectors';
+
 export type MessageInputProps = {
   dismissExchange: () => void;
   onSubmit: ({ content }: { content: string }) => void;
@@ -82,7 +88,7 @@ const MessageInput = ({
 
   return (
     <Box sx={{ px: 2, pb: 3 }}>
-      <FormControl sx={{ width: '100%' }}>
+      <FormControl sx={{ width: '100%' }} data-cy={MESSAGE_INPUT_CY}>
         <Textarea
           placeholder={t('MESSAGE_BOX.INSERT_HERE')}
           aria-label="Message"
@@ -113,6 +119,7 @@ const MessageInput = ({
                   endIcon={<CheckIcon />}
                   sx={{ alignSelf: 'center', borderRadius: 'sm' }}
                   onClick={handleDismiss}
+                  data-cy={DISMISS_BUTTON_CY}
                 >
                   {t('MESSAGE_BOX.DONE')}
                 </Button>
@@ -123,6 +130,7 @@ const MessageInput = ({
                 sx={{ ml: 1, alignSelf: 'center', borderRadius: 'sm' }}
                 endIcon={<SendRoundedIcon />}
                 onClick={handleClick}
+                data-cy={SEND_BUTTON_CY}
               >
                 {t('MESSAGE_BOX.SEND')}
               </Button>
diff --git a/src/modules/message/MessagesPane.tsx b/src/modules/message/MessagesPane.tsx
index 97ed079..e1f4f1f 100644
--- a/src/modules/message/MessagesPane.tsx
+++ b/src/modules/message/MessagesPane.tsx
@@ -19,6 +19,7 @@ import _ from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
 
 import { mutations } from '@/config/queryClient';
+import { MESSAGE_LOADER_CY, MESSAGE_PANE_CY } from '@/config/selectors';
 import Agent from '@/types/Agent';
 import AgentType from '@/types/AgentType';
 import Exchange from '@/types/Exchange';
@@ -253,6 +254,7 @@ const MessagesPane = ({
         height: readOnly ? 'fit-content' : '100vh',
         maxHeight: '100vh',
       }}
+      data-cy={MESSAGE_PANE_CY}
     >
       <Box
         sx={{
@@ -303,7 +305,7 @@ const MessagesPane = ({
                 spacing={2}
                 sx={{ mb: 0.25 }}
               >
-                <MessageLoader />
+                <MessageLoader data-cy={MESSAGE_LOADER_CY} />
               </Stack>
             </Box>
           )}
diff --git a/src/results/ConversationsView.tsx b/src/results/ConversationsView.tsx
index 9ed3574..7b9d962 100644
--- a/src/results/ConversationsView.tsx
+++ b/src/results/ConversationsView.tsx
@@ -28,6 +28,10 @@ import { Member } from '@graasp/sdk';
 import { format } from 'date-fns';
 
 import { hooks, mutations } from '@/config/queryClient';
+import {
+  CONVERSATIONS_VIEW_TITLE_CY,
+  EXPORT_ALL_BUTTON_CY,
+} from '@/config/selectors';
 import MessagesPane from '@/modules/message/MessagesPane';
 import Exchange from '@/types/Exchange';
 import Interaction from '@/types/Interaction';
@@ -77,7 +81,9 @@ const Conversations: FC<Props> = ({
   ): string => {
     const headers: string[] = [
       'Participant',
+      'Participand ID',
       'Sender',
+      'Sender ID',
       'Sent at',
       'Exchange',
       'Interaction',
@@ -92,7 +98,9 @@ const Conversations: FC<Props> = ({
             exchange.messages.map((message: Message): string =>
               [
                 interactionData.participant.name,
+                interactionData.participant.id,
                 message.sender.name,
+                message.sender.id,
                 format(new Date(message.sentAt || ''), 'dd/MM/yyyy HH:mm'),
                 exchange.name,
                 interactionData.name,
@@ -111,10 +119,7 @@ const Conversations: FC<Props> = ({
     // map data rows
     return csvRows.join('\n');
   };
-  /*
-  ...data.map((row) =>
-    headers.map((header) => JSON.stringify(row[header] || '')).join(','),
-*/
+
   // Function to download CSV file
   const downloadCsv: (csv: string, filename: string) => void = (
     csv: string,
@@ -145,7 +150,9 @@ const Conversations: FC<Props> = ({
   return (
     <Stack spacing={2}>
       <Stack direction="row" justifyContent="space-between">
-        <Typography variant="h5">{t('CONVERSATIONS.TITLE')}</Typography>
+        <Typography variant="h5" data-cy={CONVERSATIONS_VIEW_TITLE_CY}>
+          {t('CONVERSATIONS.TITLE')}
+        </Typography>
         <Button
           disabled={appDatas?.length === 0}
           onClick={(): void =>
@@ -154,6 +161,7 @@ const Conversations: FC<Props> = ({
               `chatbot_all_${format(new Date(), 'yyyyMMdd_HH.mm')}.csv`,
             )
           }
+          data-cy={EXPORT_ALL_BUTTON_CY}
         >
           {t('CONVERSATIONS.EXPORT_ALL')}
         </Button>
diff --git a/src/settings/AssistantSettings.tsx b/src/settings/AssistantSettings.tsx
index 74a9d38..577a780 100644
--- a/src/settings/AssistantSettings.tsx
+++ b/src/settings/AssistantSettings.tsx
@@ -31,6 +31,19 @@ import {
   AssistantsSettingsType,
 } from '@/config/appSettings';
 import { MAX_TEXT_INPUT_CHARS } from '@/config/config';
+import {
+  ADD_ASSISTANT_BUTTON_CY,
+  ASSISTANT_AVATAR_ICON_CY,
+  ASSISTANT_DESCRIPTION_INPUT_CY,
+  ASSISTANT_IMAGE_URL_CY,
+  ASSISTANT_NAME_INPUT_CY,
+  ASSISTANT_PANEL_CY,
+  ASSISTANT_SETTINGS_TITLE_CY,
+  DELETE_ASSISTANT_BUTTON_CY,
+  MOVE_DOWN_BUTTON_CY,
+  MOVE_UP_BUTTON_CY,
+  NO_ASSISTANTS_ALERT_CY,
+} from '@/config/selectors';
 import Agent from '@/types/Agent';
 import AgentType from '@/types/AgentType';
 
@@ -85,6 +98,7 @@ const AssistantSettingsPanel: FC<PropTypesSingle> = ({
           color={panelColor} // Unique color for each assistant's divider
         />
       }
+      data-cy={ASSISTANT_PANEL_CY}
     >
       <Typography
         px={1}
@@ -102,6 +116,7 @@ const AssistantSettingsPanel: FC<PropTypesSingle> = ({
             <Avatar
               src={assistantImageUrl}
               sx={{ border: '1px solid #bdbdbd' }}
+              data-cy={ASSISTANT_AVATAR_ICON_CY}
             >
               {assistantName.slice(0, 2)}
             </Avatar>
@@ -113,11 +128,13 @@ const AssistantSettingsPanel: FC<PropTypesSingle> = ({
               ): void => onChange(index, 'imageUrl', e.target.value)}
               placeholder={t('SETTINGS.ASSISTANTS.URL')}
               fullWidth
+              data-cy={ASSISTANT_IMAGE_URL_CY}
             />
             <IconButton
               sx={{ color: panelColor }}
               onClick={(): void => handleMoveUp(index)}
               disabled={index === 0} // Disabled if the assistant is at the top
+              data-cy={MOVE_UP_BUTTON_CY}
             >
               <Tooltip title={t('SETTINGS.UP')}>
                 <ArrowUpwardIcon />
@@ -127,6 +144,7 @@ const AssistantSettingsPanel: FC<PropTypesSingle> = ({
               sx={{ color: panelColor }}
               onClick={(): void => handleMoveDown(index)}
               disabled={index === assistantListLength - 1} // Disabled if the assistant is at the bottom
+              data-cy={MOVE_DOWN_BUTTON_CY}
             >
               <Tooltip title={t('SETTINGS.DOWN')}>
                 <ArrowDownwardIcon />
@@ -141,6 +159,7 @@ const AssistantSettingsPanel: FC<PropTypesSingle> = ({
             onChange={(
               e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
             ): void => onChange(index, 'name', e.target.value)}
+            data-cy={ASSISTANT_NAME_INPUT_CY}
           />
           <TextField
             value={assistantDescription}
@@ -150,12 +169,14 @@ const AssistantSettingsPanel: FC<PropTypesSingle> = ({
             onChange={(
               e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
             ): void => onChange(index, 'description', e.target.value)}
+            data-cy={ASSISTANT_DESCRIPTION_INPUT_CY}
           />
           <Stack direction="row" justifyContent="center">
             <IconButton
               color="secondary"
               onClick={(): void => handleRemoveAssistant(index)}
               sx={{ width: 'auto' }}
+              data-cy={DELETE_ASSISTANT_BUTTON_CY}
             >
               <DeleteIcon />
             </IconButton>
@@ -264,7 +285,9 @@ const AssistantsSettings: FC<PropTypeList> = ({ assistants, onChange }) => {
 
   return (
     <Stack spacing={2}>
-      <Typography variant="h5">{t('SETTINGS.ASSISTANTS.TITLE')}</Typography>
+      <Typography variant="h5" data-cy={ASSISTANT_SETTINGS_TITLE_CY}>
+        {t('SETTINGS.ASSISTANTS.TITLE')}
+      </Typography>
       <Stack
         spacing={1}
         py={2}
@@ -279,6 +302,7 @@ const AssistantsSettings: FC<PropTypeList> = ({ assistants, onChange }) => {
               display: 'flex',
               justifyContent: 'center',
             }}
+            data-cy={NO_ASSISTANTS_ALERT_CY}
           >
             {t('SETTINGS.ASSISTANTS.CREATE')}
           </Alert>
@@ -307,7 +331,11 @@ const AssistantsSettings: FC<PropTypeList> = ({ assistants, onChange }) => {
             ),
           )
         )}
-        <Button variant="contained" onClick={handleAddAssistant}>
+        <Button
+          variant="contained"
+          onClick={handleAddAssistant}
+          data-cy={ADD_ASSISTANT_BUTTON_CY}
+        >
           {t('SETTINGS.ASSISTANTS.ADD')}
         </Button>
       </Stack>
diff --git a/src/settings/ChatSettings.tsx b/src/settings/ChatSettings.tsx
index 50f7c05..0e664bd 100644
--- a/src/settings/ChatSettings.tsx
+++ b/src/settings/ChatSettings.tsx
@@ -8,6 +8,13 @@ import TextField from '@mui/material/TextField';
 
 import { ChatSettingsType } from '@/config/appSettings';
 import { MAX_TEXT_INPUT_CHARS } from '@/config/config';
+import {
+  CHAT_DESCRIPTION_INPUT_CY,
+  CHAT_INSTRUCTIONS_INPUT_CY,
+  CHAT_NAME_INPUT_CY,
+  CHAT_SETTINGS_TITLE_CY,
+  MESSAGE_MEMORY_SWITCH_CY,
+} from '@/config/selectors';
 
 // Prop types for ChatSettings component
 type PropTypes = {
@@ -31,7 +38,9 @@ const ChatSettings: FC<PropTypes> = ({ chat, onChange }) => {
 
   return (
     <Stack spacing={2}>
-      <Typography variant="h5">{t('SETTINGS.CHAT.TITLE')}</Typography>
+      <Typography variant="h5" data-cy={CHAT_SETTINGS_TITLE_CY}>
+        {t('SETTINGS.CHAT.TITLE')}
+      </Typography>
       <TextField
         value={chatName}
         label={t('SETTINGS.CHAT.NAME')}
@@ -39,6 +48,7 @@ const ChatSettings: FC<PropTypes> = ({ chat, onChange }) => {
         onChange={(
           e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
         ): void => onChange({ ...chat, name: e.target.value })}
+        data-cy={CHAT_NAME_INPUT_CY}
       />
       <TextField
         value={chatDescription}
@@ -48,6 +58,7 @@ const ChatSettings: FC<PropTypes> = ({ chat, onChange }) => {
         onChange={(
           e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
         ): void => onChange({ ...chat, description: e.target.value })}
+        data-cy={CHAT_DESCRIPTION_INPUT_CY}
       />
       <TextField
         value={chatInstructions}
@@ -59,6 +70,7 @@ const ChatSettings: FC<PropTypes> = ({ chat, onChange }) => {
         ): void =>
           onChange({ ...chat, participantInstructions: e.target.value })
         }
+        data-cy={CHAT_INSTRUCTIONS_INPUT_CY}
       />
       <TextField
         value={chatEndText}
@@ -81,6 +93,7 @@ const ChatSettings: FC<PropTypes> = ({ chat, onChange }) => {
         onChange={(e: ChangeEvent<HTMLInputElement>): void =>
           onChange({ ...chat, sendAllToChatbot: e.target.checked })
         }
+        data-cy={MESSAGE_MEMORY_SWITCH_CY}
       />
     </Stack>
   );
diff --git a/src/settings/ExchangesSettings.tsx b/src/settings/ExchangesSettings.tsx
index 7b3b8fc..ee4276e 100644
--- a/src/settings/ExchangesSettings.tsx
+++ b/src/settings/ExchangesSettings.tsx
@@ -45,6 +45,23 @@ import {
   MAX_TEXT_INPUT_CHARS,
   MIN_FOLLOW_UP_QUESTIONS,
 } from '@/config/config';
+import {
+  ADD_EXCHANGE_BUTTON_CY,
+  ASSISTANT_OPTION_CY,
+  ASSISTANT_SELECT_CY,
+  DELETE_EXCHANGE_BUTTON_CY,
+  EXCHANGE_DESCRIPTION_INPUT_CY,
+  EXCHANGE_NAME_INPUT_CY,
+  EXCHANGE_PANEL_CY,
+  EXCHANGE_SETTINGS_TITLE_CY,
+  FOLLOW_UP_QUESTIONS_INPUT_CY,
+  HARD_LIMIT_SWITCH_CY,
+  INSTRUCTIONS_INPUT_CY,
+  MOVE_DOWN_BUTTON_CY,
+  MOVE_UP_BUTTON_CY,
+  NO_EXCHANGES_ALERT_CY,
+  ON_COMPLETE_INSTRUCTIONS_INPUT_CY,
+} from '@/config/selectors';
 import {
   SettingsContextType,
   useSettings,
@@ -111,6 +128,7 @@ const ExchangeSettingsPanel: FC<PropTypesSingle> = ({
           color={panelColor} // Color for divider based on exchange ID
         />
       }
+      data-cy={EXCHANGE_PANEL_CY}
     >
       <Typography
         px={1}
@@ -133,12 +151,13 @@ const ExchangeSettingsPanel: FC<PropTypesSingle> = ({
               onChange={(
                 e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
               ): void => onChange(index, 'name', e.target.value)}
+              data-cy={EXCHANGE_NAME_INPUT_CY}
             />
-
             <IconButton
               sx={{ color: panelColor }}
               onClick={(): void => handleMoveUp(index)}
               disabled={index === 0} // Disable if already at the top
+              data-cy={MOVE_UP_BUTTON_CY}
             >
               <Tooltip title={t('SETTINGS.UP')}>
                 <ArrowUpwardIcon />
@@ -148,6 +167,7 @@ const ExchangeSettingsPanel: FC<PropTypesSingle> = ({
               sx={{ color: panelColor }}
               onClick={(): void => handleMoveDown(index)}
               disabled={index === exchangeListLength - 1} // Disable if already at the bottom
+              data-cy={MOVE_DOWN_BUTTON_CY}
             >
               <Tooltip title={t('SETTINGS.DOWN')}>
                 <ArrowDownwardIcon />
@@ -162,6 +182,7 @@ const ExchangeSettingsPanel: FC<PropTypesSingle> = ({
             onChange={(
               e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
             ): void => onChange(index, 'description', e.target.value)}
+            data-cy={EXCHANGE_DESCRIPTION_INPUT_CY}
           />
           <TextField
             value={exchangeInstructions}
@@ -171,6 +192,7 @@ const ExchangeSettingsPanel: FC<PropTypesSingle> = ({
             onChange={(
               e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
             ): void => onChange(index, 'chatbotInstructions', e.target.value)}
+            data-cy={INSTRUCTIONS_INPUT_CY}
           />
           <TextField
             value={exchangeCue}
@@ -206,10 +228,15 @@ const ExchangeSettingsPanel: FC<PropTypesSingle> = ({
                     ) || exchangeAssistant,
                   )
                 }
+                data-cy={ASSISTANT_SELECT_CY}
               >
                 {assistants.assistantList.map(
                   (assistant: AssistantSettings, nb: number): JSX.Element => (
-                    <MenuItem key={nb} value={assistant.id}>
+                    <MenuItem
+                      key={nb}
+                      value={assistant.id}
+                      data-cy={ASSISTANT_OPTION_CY}
+                    >
                       <Avatar src={assistant.imageUrl} sx={{ mx: '1%' }}>
                         {assistant.name.slice(0, 2)}
                       </Avatar>
@@ -249,6 +276,7 @@ const ExchangeSettingsPanel: FC<PropTypesSingle> = ({
                 parseInt(e.target.value, 10),
               )
             }
+            data-cy={FOLLOW_UP_QUESTIONS_INPUT_CY}
           />
           <Typography variant="h6">
             {t('SETTINGS.EXCHANGES.DISABLE_HARD_LIMIT')}
@@ -262,6 +290,7 @@ const ExchangeSettingsPanel: FC<PropTypesSingle> = ({
             onChange={(e: ChangeEvent<HTMLInputElement>): void =>
               onChange(index, 'hardLimit', e.target.checked)
             }
+            data-cy={HARD_LIMIT_SWITCH_CY}
           />
           {!exchangeLimit && (
             <TextField
@@ -278,6 +307,7 @@ const ExchangeSettingsPanel: FC<PropTypesSingle> = ({
                   e.target.value,
                 )
               }
+              data-cy={ON_COMPLETE_INSTRUCTIONS_INPUT_CY}
             />
           )}
           <Stack direction="row" justifyContent="center">
@@ -287,6 +317,7 @@ const ExchangeSettingsPanel: FC<PropTypesSingle> = ({
                 handleRemoveExchange(index);
               }}
               sx={{ alignSelf: 'center', width: 'auto' }}
+              data-cy={DELETE_EXCHANGE_BUTTON_CY}
             >
               <DeleteIcon />
             </IconButton>
@@ -401,7 +432,9 @@ const ExchangeSettings: FC<PropTypeList> = ({ exchanges, onChange }) => {
 
   return (
     <Stack spacing={2}>
-      <Typography variant="h5">{t('SETTINGS.EXCHANGES.TITLE')}</Typography>
+      <Typography variant="h5" data-cy={EXCHANGE_SETTINGS_TITLE_CY}>
+        {t('SETTINGS.EXCHANGES.TITLE')}
+      </Typography>
       <Stack
         spacing={1}
         py={2}
@@ -416,6 +449,7 @@ const ExchangeSettings: FC<PropTypeList> = ({ exchanges, onChange }) => {
               display: 'flex',
               justifyContent: 'center',
             }}
+            data-cy={NO_EXCHANGES_ALERT_CY}
           >
             {t('SETTINGS.EXCHANGES.CREATE')}
           </Alert>
@@ -443,7 +477,11 @@ const ExchangeSettings: FC<PropTypeList> = ({ exchanges, onChange }) => {
             ),
           )
         )}
-        <Button variant="contained" onClick={handleAddExchange}>
+        <Button
+          variant="contained"
+          onClick={handleAddExchange}
+          data-cy={ADD_EXCHANGE_BUTTON_CY}
+        >
           +
         </Button>
       </Stack>
diff --git a/yarn.lock b/yarn.lock
index ffa4eaa..a32deed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5424,9 +5424,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001646":
-  version: 1.0.30001658
-  resolution: "caniuse-lite@npm:1.0.30001658"
-  checksum: 10/e3baf3c68a4f00e3eab169e0952fde7100b3ab99491074a24b361a97054eed1bca3bfdfb0d9ae4b326bdb660a370032d9130a241608d484296f4b3bcebe540fb
+  version: 1.0.30001659
+  resolution: "caniuse-lite@npm:1.0.30001659"
+  checksum: 10/bd8964faa9fe2d511673986621aca43b52e43fdbfc620372919c5895672f0d3537b589af8f66239e1e715f912d8eeea02e753ac95781314598882d137754198c
   languageName: node
   linkType: hard
 

From 53c1af2c291c000aa0085110e0d2101b2a5d207e Mon Sep 17 00:00:00 2001
From: deRohrer <jonas.rohrer@epfl.ch>
Date: Sun, 15 Sep 2024 21:03:00 +0200
Subject: [PATCH 2/6] fix: remove hieght tag of Root div

---
 src/modules/Root.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modules/Root.tsx b/src/modules/Root.tsx
index a62c50d..d96012e 100644
--- a/src/modules/Root.tsx
+++ b/src/modules/Root.tsx
@@ -69,7 +69,6 @@ const theme = createTheme({
 
 const RootDiv = styled('div')({
   flexGrow: 1,
-  height: '100vh',
 });
 
 const Root: FC = () => {

From 48540019f5917d0d2b96f4fabff9876d101502bb Mon Sep 17 00:00:00 2001
From: deRohrer <jonas.rohrer@epfl.ch>
Date: Sun, 15 Sep 2024 21:04:39 +0200
Subject: [PATCH 3/6] Revert "fix: remove hieght tag of Root div"

This reverts commit 53c1af2c291c000aa0085110e0d2101b2a5d207e.
---
 src/modules/Root.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/Root.tsx b/src/modules/Root.tsx
index d96012e..a62c50d 100644
--- a/src/modules/Root.tsx
+++ b/src/modules/Root.tsx
@@ -69,6 +69,7 @@ const theme = createTheme({
 
 const RootDiv = styled('div')({
   flexGrow: 1,
+  height: '100vh',
 });
 
 const Root: FC = () => {

From 70f35a85d1c94f90f69b46860524782b702e9d6e Mon Sep 17 00:00:00 2001
From: deRohrer <jonas.rohrer@epfl.ch>
Date: Sun, 15 Sep 2024 21:05:17 +0200
Subject: [PATCH 4/6] fix: remove height tag of Root div

---
 src/modules/Root.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modules/Root.tsx b/src/modules/Root.tsx
index a62c50d..d96012e 100644
--- a/src/modules/Root.tsx
+++ b/src/modules/Root.tsx
@@ -69,7 +69,6 @@ const theme = createTheme({
 
 const RootDiv = styled('div')({
   flexGrow: 1,
-  height: '100vh',
 });
 
 const Root: FC = () => {

From f2e932d61a0c17f2aca4901f55d5cbeeb2e18b8a Mon Sep 17 00:00:00 2001
From: deRohrer <jonas.rohrer@epfl.ch>
Date: Mon, 16 Sep 2024 15:17:43 +0200
Subject: [PATCH 5/6] feat: add context for results

---
 src/config/appData.ts                         |  21 ++
 src/interfaces/userInteraction.ts             |   5 +
 .../context/UserInteractionsContext.tsx       | 153 +++++++++++++++
 .../interaction/ParticipantInteraction.tsx    | 181 +++++++-----------
 src/modules/main/App.tsx                      |   7 +-
 src/results/ConversationsView.tsx             |  83 ++++----
 6 files changed, 291 insertions(+), 159 deletions(-)
 create mode 100644 src/config/appData.ts
 create mode 100644 src/interfaces/userInteraction.ts
 create mode 100644 src/modules/context/UserInteractionsContext.tsx

diff --git a/src/config/appData.ts b/src/config/appData.ts
new file mode 100644
index 0000000..d1233d9
--- /dev/null
+++ b/src/config/appData.ts
@@ -0,0 +1,21 @@
+import { AppData, AppDataVisibility } from '@graasp/sdk';
+
+import { UserInteraction as UserInteractionType } from '@/interfaces/userInteraction';
+
+export enum AppDataType {
+  UserInteraction = 'user-interaction',
+}
+
+export type UserInteractionAppData = AppData & {
+  type: AppDataType.UserInteraction;
+  data: UserInteractionType;
+  visibility: AppDataVisibility.Member;
+};
+
+export const getDefaultUserInteractionAppData = (
+  userInteraction: UserInteractionType,
+): Pick<UserInteractionAppData, 'data' | 'type' | 'visibility'> => ({
+  type: AppDataType.UserInteraction,
+  data: userInteraction,
+  visibility: AppDataVisibility.Member,
+});
diff --git a/src/interfaces/userInteraction.ts b/src/interfaces/userInteraction.ts
new file mode 100644
index 0000000..054b265
--- /dev/null
+++ b/src/interfaces/userInteraction.ts
@@ -0,0 +1,5 @@
+import Interaction from '@/types/Interaction';
+
+export type UserInteraction = {
+  interaction: Interaction;
+};
diff --git a/src/modules/context/UserInteractionsContext.tsx b/src/modules/context/UserInteractionsContext.tsx
new file mode 100644
index 0000000..3b1b842
--- /dev/null
+++ b/src/modules/context/UserInteractionsContext.tsx
@@ -0,0 +1,153 @@
+import {
+  FC,
+  ReactElement,
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { useLocalContext } from '@graasp/apps-query-client';
+import { PermissionLevel, PermissionLevelCompare } from '@graasp/sdk';
+
+import { sortBy } from 'lodash';
+
+import {
+  AppDataType,
+  UserInteractionAppData,
+  getDefaultUserInteractionAppData,
+} from '@/config/appData';
+import { hooks, mutations } from '@/config/queryClient';
+import { UserInteraction } from '@/interfaces/userInteraction';
+import Interaction from '@/types/Interaction';
+
+type UserInteractionsContextType = {
+  userInteraction?: UserInteraction;
+  setInteraction: (interaction: Interaction) => void;
+  deleteInteraction: (id?: UserInteractionAppData['id']) => void;
+  allInteractionsAppData?: UserInteractionAppData[];
+  status: 'loading' | 'error' | 'success';
+};
+
+const defaultContextValue: UserInteractionsContextType = {
+  setInteraction: () => null,
+  deleteInteraction: () => null,
+  status: 'loading',
+};
+
+const UserInteractionsContext =
+  createContext<UserInteractionsContextType>(defaultContextValue);
+
+export const UserInteractionsProvider: FC<{
+  children: ReactElement | ReactElement[];
+}> = ({ children }) => {
+  const { data, isSuccess, status } = hooks.useAppData<UserInteraction>({
+    type: AppDataType.UserInteraction,
+  });
+
+  const [userInteractionAppData, setUserInteractionAppData] =
+    useState<UserInteractionAppData>();
+  const [allInteractionsAppData, setAllInteractionsAppData] =
+    useState<UserInteractionAppData[]>();
+
+  const cachePayload = useRef<UserInteraction>();
+  // const debouncedPatch = useRef<ReturnType<typeof debounce>>();
+  const hasPosted = useRef<boolean>(false);
+  const { mutate: postAppData } = mutations.usePostAppData();
+  const { mutate: patchAppData } = mutations.usePatchAppData();
+  const { mutate: deleteAppData } = mutations.useDeleteAppData();
+  const { permission, memberId } = useLocalContext();
+
+  const isAdmin = useMemo(
+    () => PermissionLevelCompare.gte(permission, PermissionLevel.Admin),
+    [permission],
+  );
+  useEffect(() => {
+    if (isSuccess) {
+      const allIns = data.filter(
+        (d) => d.type === AppDataType.UserInteraction,
+      ) as UserInteractionAppData[];
+      setAllInteractionsAppData(allIns);
+      setUserInteractionAppData(
+        sortBy(allIns, ['createdAt'])
+          .reverse()
+          .find((d) => d.member.id === memberId),
+      );
+    }
+  }, [isSuccess, data, memberId]);
+
+  useEffect(() => {
+    if (isSuccess && userInteractionAppData) {
+      hasPosted.current = true;
+    }
+  });
+
+  const setInteraction = useMemo(
+    () =>
+      (interaction: Interaction): void => {
+        const payloadData = {
+          interaction,
+        };
+        if (isSuccess) {
+          if (hasPosted.current) {
+            if (userInteractionAppData?.id) {
+              // Eventually useless
+              cachePayload.current = payloadData;
+              patchAppData({
+                ...userInteractionAppData,
+                data: cachePayload.current,
+              });
+            }
+          } else {
+            postAppData(getDefaultUserInteractionAppData(payloadData));
+            hasPosted.current = true;
+          }
+        }
+      },
+    [isSuccess, patchAppData, postAppData, userInteractionAppData],
+  );
+
+  const deleteInteraction = useMemo(
+    () =>
+      (id?: UserInteractionAppData['id']): void => {
+        if (id) {
+          deleteAppData({ id });
+        } else if (userInteractionAppData) {
+          deleteAppData({ id: userInteractionAppData?.id });
+        }
+        setUserInteractionAppData(undefined);
+        hasPosted.current = false;
+      },
+    [deleteAppData, userInteractionAppData],
+  );
+  const contextValue = useMemo(
+    () => ({
+      userInteraction: userInteractionAppData?.data,
+      setInteraction,
+      allInteractionsAppData: isAdmin ? allInteractionsAppData : undefined,
+      deleteInteraction,
+      status,
+    }),
+    [
+      allInteractionsAppData,
+      deleteInteraction,
+      isAdmin,
+      setInteraction,
+      status,
+      userInteractionAppData?.data,
+    ],
+  );
+
+  return (
+    <UserInteractionsContext.Provider value={contextValue}>
+      {children}
+    </UserInteractionsContext.Provider>
+  );
+};
+
+const useUserInteractions = (): UserInteractionsContextType =>
+  useContext(UserInteractionsContext);
+
+export default useUserInteractions;
diff --git a/src/modules/interaction/ParticipantInteraction.tsx b/src/modules/interaction/ParticipantInteraction.tsx
index cdfa484..a8da90f 100644
--- a/src/modules/interaction/ParticipantInteraction.tsx
+++ b/src/modules/interaction/ParticipantInteraction.tsx
@@ -1,25 +1,11 @@
-import {
-  Dispatch,
-  MutableRefObject,
-  ReactElement,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
 import { UseTranslationResponse, useTranslation } from 'react-i18next';
 
 import { Button } from '@mui/material';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 
-import {
-  AppContext,
-  LocalContext,
-  useLocalContext,
-} from '@graasp/apps-query-client';
+import { AppContext, useLocalContext } from '@graasp/apps-query-client';
 import { Member } from '@graasp/sdk';
 
 import { UseQueryResult } from '@tanstack/react-query';
@@ -30,7 +16,7 @@ import {
   defaultInteraction,
   defaultUser,
 } from '@/config/config';
-import { hooks, mutations } from '@/config/queryClient';
+import { hooks } from '@/config/queryClient';
 import { START_INTERACTION_BUTTON_CY } from '@/config/selectors';
 import MessagesPane from '@/modules/message/MessagesPane';
 import Agent from '@/types/Agent';
@@ -39,31 +25,35 @@ import Exchange from '@/types/Exchange';
 import Interaction from '@/types/Interaction';
 
 import { SettingsContextType, useSettings } from '../context/SettingsContext';
+import useUserInteractions from '../context/UserInteractionsContext';
 
 // Main component: ParticipantInteraction
 const ParticipantInteraction = (): ReactElement => {
-  // Getting the participant ID from local context
-  const { memberId: participantId }: LocalContext = useLocalContext();
+  const { t }: UseTranslationResponse<'translations', undefined> =
+    useTranslation();
 
-  // Fetching application data for interactions
-  const { data: appDataList, isLoading: appDataLoading } =
-    hooks.useAppData<Interaction>();
-  const { mutate: postAppData } = mutations.usePostAppData();
-  const { mutate: patchAppData } = mutations.usePatchAppData();
+  // Getting the participant ID from local context
+  const { memberId } = useLocalContext();
 
   // Fetching settings context
   const { chat, exchanges }: SettingsContextType = useSettings();
-  const { t }: UseTranslationResponse<'translations', undefined> =
-    useTranslation();
+
+  const { userInteraction, setInteraction: setSavedInteraction } =
+    useUserInteractions();
 
   // Fetching app member context
-  const { data: appContextData }: UseQueryResult<AppContext, unknown> =
-    hooks.useAppContext();
+  const {
+    data: appContextData,
+    isSuccess,
+  }: UseQueryResult<AppContext, unknown> = hooks.useAppContext();
 
   // Find the member in app context data by participant ID
   const appMember: Member | undefined = useMemo(
-    () => appContextData?.members.find((member) => member.id === participantId),
-    [appContextData, participantId],
+    () =>
+      appContextData?.members.find(
+        (member) => member.id === memberId && memberId.length > 0,
+      ),
+    [appContextData, memberId],
   );
 
   // Define the current member as an agent, merging with the default user
@@ -102,78 +92,47 @@ const ParticipantInteraction = (): ReactElement => {
       return interactionBase;
     }, [chat, currentMember, exchanges.exchangeList]);
 
-  // Memoize the current app data for the participant
-  const currentAppData = useMemo(
-    () =>
-      appDataList
-        ?.filter((appData) => appData.type === 'Interaction')
-        .find((appData) => appData.data.participant.id === participantId),
-    [appDataList, participantId],
-  );
-
   // State to manage the current interaction, either from existing data or a new template
-  const [interaction, setInteraction]: [
-    Interaction | undefined,
-    Dispatch<SetStateAction<Interaction | undefined>>,
-  ] = useState<Interaction | undefined>(undefined);
+  const [interaction, setInteraction] =
+    useState<Interaction>(defaultInteraction);
+  const [isInit, setIsInit] = useState<boolean>(false);
 
-  useEffect((): void => {
-    if (!appDataLoading && appContextData && appMember) {
-      setInteraction(currentAppData?.data || createInteractionFromTemplate());
+  // Update the interaction if the stored value change
+  useEffect(() => {
+    if (!isInit && typeof userInteraction !== undefined && isSuccess) {
+      setInteraction(
+        userInteraction?.interaction ?? createInteractionFromTemplate(),
+      );
+      setIsInit(true);
     }
   }, [
-    appDataLoading,
-    appContextData,
-    appMember,
     createInteractionFromTemplate,
-    currentAppData?.data,
+    interaction.started,
+    isInit,
+    isSuccess,
+    setInteraction,
+    userInteraction,
   ]);
 
-  // Ref to track if the app data has already been posted
-  const hasPosted: MutableRefObject<boolean> = useRef(!!currentAppData);
-
-  useEffect(() => {
-    if (currentAppData) {
-      // Set hasPosted to true when currentAppData is available
-      hasPosted.current = true;
-    }
-  }, [currentAppData]);
-
-  // Effect to post the interaction data if it hasn't been posted yet
   useEffect((): void => {
-    if (!appDataLoading && !hasPosted.current && interaction) {
-      postAppData({ data: interaction, type: 'Interaction' });
-      hasPosted.current = true;
+    if (appMember) {
+      setSavedInteraction(interaction);
     }
-  }, [appDataLoading, interaction, postAppData]);
-
-  // Effect to patch the interaction data if it has been posted and current app data exists
-  useEffect((): void => {
-    if (hasPosted.current && currentAppData?.id && interaction) {
-      patchAppData({
-        id: currentAppData.id,
-        data: interaction,
-      });
-    }
-  }, [interaction, patchAppData, currentAppData?.id]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appMember, interaction]);
 
   // Callback to update a specific exchange within the interaction
   const updateExchange = useCallback((updatedExchange: Exchange): void => {
     setInteraction(
-      (prevState: Interaction | undefined): Interaction | undefined => {
-        if (prevState) {
-          return {
-            ...(prevState || defaultInteraction),
-            exchanges: {
-              exchangeList: prevState.exchanges.exchangeList.map((exchange) =>
-                exchange.id === updatedExchange.id ? updatedExchange : exchange,
-              ),
-            },
-            updatedAt: new Date(),
-          };
-        }
-        return undefined;
-      },
+      (prevState: Interaction): Interaction => ({
+        ...(prevState || defaultInteraction),
+        exchanges: {
+          exchangeList: prevState.exchanges.exchangeList.map((exchange) =>
+            exchange.id === updatedExchange.id ? updatedExchange : exchange,
+          ),
+        },
+        updatedAt: new Date(),
+      }),
     );
   }, []);
 
@@ -197,40 +156,34 @@ const ParticipantInteraction = (): ReactElement => {
 
   // Function to start the interaction
   const startInteraction = (): void => {
-    setInteraction((prev: Interaction | undefined): Interaction | undefined => {
-      if (prev) {
-        return {
-          ...(prev || defaultInteraction),
-          started: true,
-          startedAt: new Date(),
-          updatedAt: new Date(),
-        };
-      }
-      return undefined;
-    });
+    setInteraction(
+      (prev: Interaction): Interaction => ({
+        ...(prev || defaultInteraction),
+        started: true,
+        startedAt: new Date(),
+        updatedAt: new Date(),
+      }),
+    );
   };
 
   // Function to move to the next exchange or complete the interaction
   const goToNextExchange = (): void => {
-    setInteraction((prev: Interaction | undefined): Interaction | undefined => {
-      if (prev) {
-        const numExchanges: number = prev.exchanges.exchangeList.length || 0;
-        if (prev.currentExchange === numExchanges - 1) {
-          // If this is the last exchange, mark the interaction as completed
-          return {
-            ...prev,
-            completed: true,
-            completedAt: new Date(),
-            updatedAt: new Date(),
-          };
-        }
+    setInteraction((prev: Interaction): Interaction => {
+      const numExchanges: number = prev.exchanges.exchangeList.length || 0;
+      if (prev.currentExchange === numExchanges - 1) {
+        // If this is the last exchange, mark the interaction as completed
         return {
           ...prev,
-          currentExchange: (prev?.currentExchange || 0) + 1,
+          completed: true,
+          completedAt: new Date(),
           updatedAt: new Date(),
         };
       }
-      return undefined;
+      return {
+        ...prev,
+        currentExchange: (prev?.currentExchange || 0) + 1,
+        updatedAt: new Date(),
+      };
     });
   };
 
diff --git a/src/modules/main/App.tsx b/src/modules/main/App.tsx
index 1b6f857..805bc61 100644
--- a/src/modules/main/App.tsx
+++ b/src/modules/main/App.tsx
@@ -5,6 +5,7 @@ import { Context } from '@graasp/sdk';
 
 import i18n, { DEFAULT_LANGUAGE } from '../../config/i18n';
 import { SettingsProvider } from '../context/SettingsContext';
+import { UserInteractionsProvider } from '../context/UserInteractionsContext';
 import AnalyticsView from './AnalyticsView';
 import BuilderView from './BuilderView';
 import PlayerView from './PlayerView';
@@ -34,7 +35,11 @@ const App = (): JSX.Element => {
     }
   };
 
-  return <SettingsProvider>{renderContent()}</SettingsProvider>;
+  return (
+    <SettingsProvider>
+      <UserInteractionsProvider>{renderContent()}</UserInteractionsProvider>
+    </SettingsProvider>
+  );
 };
 
 export default App;
diff --git a/src/results/ConversationsView.tsx b/src/results/ConversationsView.tsx
index 7b9d962..6db49dd 100644
--- a/src/results/ConversationsView.tsx
+++ b/src/results/ConversationsView.tsx
@@ -23,15 +23,14 @@ import {
 } from '@mui/material';
 import Stack from '@mui/material/Stack';
 
-import { Member } from '@graasp/sdk';
-
 import { format } from 'date-fns';
+import { sortBy, uniqBy } from 'lodash';
 
-import { hooks, mutations } from '@/config/queryClient';
 import {
   CONVERSATIONS_VIEW_TITLE_CY,
   EXPORT_ALL_BUTTON_CY,
 } from '@/config/selectors';
+import useUserInteractions from '@/modules/context/UserInteractionsContext';
 import MessagesPane from '@/modules/message/MessagesPane';
 import Exchange from '@/types/Exchange';
 import Interaction from '@/types/Interaction';
@@ -50,17 +49,7 @@ const Conversations: FC<Props> = ({
   const { t }: UseTranslationResponse<'translations', undefined> =
     useTranslation();
 
-  // Hook to handle deleting app data
-  const { mutate: deleteAppData } = mutations.useDeleteAppData();
-
-  // Fetching interaction data
-  const appDatas =
-    hooks
-      .useAppData<Interaction>()
-      .data?.filter((appData) => appData.type === 'Interaction') || [];
-
-  // Fetching all members from the app context or defaulting to the checked-out member
-  const allMembers: Member[] = hooks.useAppContext().data?.members || [];
+  const { allInteractionsAppData, deleteInteraction } = useUserInteractions();
 
   const StatusLabel: (started: boolean, complete: boolean) => string = (
     started: boolean,
@@ -154,10 +143,13 @@ const Conversations: FC<Props> = ({
           {t('CONVERSATIONS.TITLE')}
         </Typography>
         <Button
-          disabled={appDatas?.length === 0}
+          disabled={allInteractionsAppData?.length === 0}
           onClick={(): void =>
             exportJsonAsCsv(
-              appDatas.map((appData): Interaction => appData.data),
+              (allInteractionsAppData || []).map(
+                (userInteractionAppData): Interaction =>
+                  userInteractionAppData.data.interaction,
+              ),
               `chatbot_all_${format(new Date(), 'yyyyMMdd_HH.mm')}.csv`,
             )
           }
@@ -179,15 +171,13 @@ const Conversations: FC<Props> = ({
             </TableRow>
           </TableHead>
           <TableBody>
-            {allMembers &&
-              allMembers.map((member, index) => {
-                const checkedOutAppData = appDatas?.find(
-                  (appData) => appData.data.participant.id === member.id,
-                );
-
-                const interaction: Interaction | undefined =
-                  checkedOutAppData?.data;
-
+            {allInteractionsAppData &&
+              uniqBy(
+                sortBy(allInteractionsAppData, ['createdAt']).reverse(),
+                'creator.id',
+              ).map((userInteractionAppData, index) => {
+                const checkedOutInteraction: Interaction =
+                  userInteractionAppData.data.interaction;
                 return (
                   <Fragment key={index}>
                     <TableRow>
@@ -207,11 +197,13 @@ const Conversations: FC<Props> = ({
                           )}
                         </IconButton>
                       </TableCell>
-                      <TableCell>{member.name}</TableCell>
                       <TableCell>
-                        {interaction?.updatedAt
+                        {userInteractionAppData.member.name}
+                      </TableCell>
+                      <TableCell>
+                        {checkedOutInteraction.updatedAt
                           ? format(
-                              new Date(interaction.updatedAt),
+                              new Date(checkedOutInteraction.updatedAt),
                               'dd.MM.yyyy HH:mm:ss',
                             )
                           : '-'}
@@ -222,16 +214,16 @@ const Conversations: FC<Props> = ({
                           variant="filled"
                           severity={
                             // eslint-disable-next-line no-nested-ternary
-                            interaction?.completed
+                            checkedOutInteraction.completed
                               ? 'success'
-                              : interaction?.started
+                              : checkedOutInteraction.started
                                 ? 'warning'
                                 : 'error'
                           }
                         >
                           {StatusLabel(
-                            interaction?.started || false,
-                            interaction?.completed || false,
+                            checkedOutInteraction.started || false,
+                            checkedOutInteraction.completed || false,
                           )}
                         </Alert>
                       </TableCell>
@@ -239,11 +231,9 @@ const Conversations: FC<Props> = ({
                         <IconButton
                           color="secondary"
                           onClick={(): void =>
-                            deleteAppData({
-                              id: checkedOutAppData?.id || '',
-                            })
+                            deleteInteraction(userInteractionAppData.id)
                           }
-                          disabled={!checkedOutAppData}
+                          disabled={!userInteractionAppData}
                           sx={{ width: 'auto' }}
                         >
                           <Tooltip title={t('CONVERSATIONS.RESET')}>
@@ -255,11 +245,13 @@ const Conversations: FC<Props> = ({
                         <IconButton
                           onClick={(): void => {
                             exportJsonAsCsv(
-                              interaction ? [interaction] : [],
-                              `chatbot_${interaction?.description}_${format(new Date(), 'yyyyMMdd_HH.mm')}.csv`,
+                              checkedOutInteraction
+                                ? [checkedOutInteraction]
+                                : [],
+                              `chatbot_${checkedOutInteraction?.description}_${format(new Date(), 'yyyyMMdd_HH.mm')}.csv`,
                             );
                           }}
-                          disabled={!interaction}
+                          disabled={!checkedOutInteraction}
                         >
                           <FileDownloadIcon />
                         </IconButton>
@@ -276,18 +268,19 @@ const Conversations: FC<Props> = ({
                           unmountOnExit
                         >
                           <Box py={2} px={20}>
-                            {interaction?.started ? (
+                            {checkedOutInteraction.started ? (
                               <Stack spacing={2}>
                                 <MessagesPane
                                   currentExchange={
-                                    interaction.exchanges.exchangeList[
-                                      interaction.currentExchange
+                                    checkedOutInteraction.exchanges
+                                      .exchangeList[
+                                      checkedOutInteraction.currentExchange
                                     ]
                                   }
                                   setExchange={(): void => {}}
                                   interactionDescription=""
                                   pastMessages={
-                                    interaction.exchanges.exchangeList.flatMap(
+                                    checkedOutInteraction.exchanges.exchangeList.flatMap(
                                       (exchange: Exchange): Message[] => {
                                         // Collect dismissed messages from exchanges
                                         if (exchange.dismissed) {
@@ -297,7 +290,9 @@ const Conversations: FC<Props> = ({
                                       },
                                     ) || []
                                   }
-                                  participant={interaction.participant}
+                                  participant={
+                                    checkedOutInteraction.participant
+                                  }
                                   autoDismiss={false}
                                   goToNextExchange={(): void => {}}
                                   readOnly

From 1f8045c6c92725402efd4d5b45d145c6867780ec Mon Sep 17 00:00:00 2001
From: "LAPTOP-YANNICK\\ymijs" <y.mijsters@gmail.com>
Date: Wed, 18 Dec 2024 15:50:52 +0100
Subject: [PATCH 6/6] fix: enable reload of conversations on reload of website

---
 src/modules/Root.tsx                          |  2 +-
 .../context/UserInteractionsContext.tsx       |  2 +-
 .../interaction/ParticipantInteraction.tsx    | 19 +++++++---
 src/modules/main/PlayerView.tsx               |  2 +-
 src/modules/message/MessagesPane.tsx          |  3 --
 src/settings/AssistantSettings.tsx            |  7 ++--
 src/settings/ChatSettings.tsx                 | 32 +++++++++--------
 src/settings/ExchangesSettings.tsx            | 35 +++++++++++--------
 8 files changed, 60 insertions(+), 42 deletions(-)

diff --git a/src/modules/Root.tsx b/src/modules/Root.tsx
index d96012e..daf3b62 100644
--- a/src/modules/Root.tsx
+++ b/src/modules/Root.tsx
@@ -56,7 +56,7 @@ const theme = createTheme({
     default: grey['500'],
     background: {
       paper: '#fff',
-      default: '#fafaff', // Default background for the app
+      default: '#fffefe', // Default background for the app
     },
   },
   status: {
diff --git a/src/modules/context/UserInteractionsContext.tsx b/src/modules/context/UserInteractionsContext.tsx
index 3b1b842..45dc78d 100644
--- a/src/modules/context/UserInteractionsContext.tsx
+++ b/src/modules/context/UserInteractionsContext.tsx
@@ -128,7 +128,7 @@ export const UserInteractionsProvider: FC<{
       setInteraction,
       allInteractionsAppData: isAdmin ? allInteractionsAppData : undefined,
       deleteInteraction,
-      status,
+      status: allInteractionsAppData === undefined ? 'loading' : status,
     }),
     [
       allInteractionsAppData,
diff --git a/src/modules/interaction/ParticipantInteraction.tsx b/src/modules/interaction/ParticipantInteraction.tsx
index a8da90f..b83d56a 100644
--- a/src/modules/interaction/ParticipantInteraction.tsx
+++ b/src/modules/interaction/ParticipantInteraction.tsx
@@ -38,8 +38,11 @@ const ParticipantInteraction = (): ReactElement => {
   // Fetching settings context
   const { chat, exchanges }: SettingsContextType = useSettings();
 
-  const { userInteraction, setInteraction: setSavedInteraction } =
-    useUserInteractions();
+  const {
+    status,
+    userInteraction,
+    setInteraction: setSavedInteraction,
+  } = useUserInteractions();
 
   // Fetching app member context
   const {
@@ -99,9 +102,16 @@ const ParticipantInteraction = (): ReactElement => {
 
   // Update the interaction if the stored value change
   useEffect(() => {
-    if (!isInit && typeof userInteraction !== undefined && isSuccess) {
+    if (
+      !isInit &&
+      typeof userInteraction !== undefined &&
+      isSuccess &&
+      status === 'success'
+    ) {
       setInteraction(
-        userInteraction?.interaction ?? createInteractionFromTemplate(),
+        userInteraction?.interaction && userInteraction?.interaction.started
+          ? userInteraction?.interaction
+          : createInteractionFromTemplate(),
       );
       setIsInit(true);
     }
@@ -110,6 +120,7 @@ const ParticipantInteraction = (): ReactElement => {
     interaction.started,
     isInit,
     isSuccess,
+    status,
     setInteraction,
     userInteraction,
   ]);
diff --git a/src/modules/main/PlayerView.tsx b/src/modules/main/PlayerView.tsx
index 78c4eed..2fa4898 100644
--- a/src/modules/main/PlayerView.tsx
+++ b/src/modules/main/PlayerView.tsx
@@ -4,7 +4,7 @@ import { PLAYER_VIEW_CY } from '@/config/selectors';
 import ParticipantInteraction from '@/modules/interaction/ParticipantInteraction';
 
 const PlayerView = (): JSX.Element => (
-  <Box data-cy={PLAYER_VIEW_CY} sx={{ height: '100vh' }}>
+  <Box data-cy={PLAYER_VIEW_CY}>
     <ParticipantInteraction />
   </Box>
 );
diff --git a/src/modules/message/MessagesPane.tsx b/src/modules/message/MessagesPane.tsx
index e1f4f1f..cfcbefe 100644
--- a/src/modules/message/MessagesPane.tsx
+++ b/src/modules/message/MessagesPane.tsx
@@ -251,8 +251,6 @@ const MessagesPane = ({
         display: 'flex',
         flexDirection: 'column',
         backgroundColor: 'white',
-        height: readOnly ? 'fit-content' : '100vh',
-        maxHeight: '100vh',
       }}
       data-cy={MESSAGE_PANE_CY}
     >
@@ -263,7 +261,6 @@ const MessagesPane = ({
           minHeight: 0,
           px: 2,
           py: 3,
-          overflowY: 'scroll',
           flexDirection: 'column-reverse',
         }}
       >
diff --git a/src/settings/AssistantSettings.tsx b/src/settings/AssistantSettings.tsx
index 577a780..08f665a 100644
--- a/src/settings/AssistantSettings.tsx
+++ b/src/settings/AssistantSettings.tsx
@@ -111,7 +111,10 @@ const AssistantSettingsPanel: FC<PropTypesSingle> = ({
         {index + 1}
       </Typography>
       <Box sx={{ flex: '1' }}>
-        <Stack spacing={1} p={2} border="1px solid #ccc" borderRadius="8px">
+        <Stack spacing={3} p={2} border="1px solid #ccc" borderRadius="8px">
+          <Typography variant="h6">
+            {assistantName || `Assistant ${index + 1}`}
+          </Typography>
           <Stack direction="row" spacing={2} alignItems="center">
             <Avatar
               src={assistantImageUrl}
@@ -289,7 +292,7 @@ const AssistantsSettings: FC<PropTypeList> = ({ assistants, onChange }) => {
         {t('SETTINGS.ASSISTANTS.TITLE')}
       </Typography>
       <Stack
-        spacing={1}
+        spacing={2}
         py={2}
         px={20}
         border="1px solid #ccc"
diff --git a/src/settings/ChatSettings.tsx b/src/settings/ChatSettings.tsx
index 0e664bd..ca5f3de 100644
--- a/src/settings/ChatSettings.tsx
+++ b/src/settings/ChatSettings.tsx
@@ -37,7 +37,7 @@ const ChatSettings: FC<PropTypes> = ({ chat, onChange }) => {
   }: ChatSettingsType = chat;
 
   return (
-    <Stack spacing={2}>
+    <Stack spacing={3}>
       <Typography variant="h5" data-cy={CHAT_SETTINGS_TITLE_CY}>
         {t('SETTINGS.CHAT.TITLE')}
       </Typography>
@@ -81,20 +81,22 @@ const ChatSettings: FC<PropTypes> = ({ chat, onChange }) => {
           e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
         ): void => onChange({ ...chat, participantEndText: e.target.value })}
       />
-      <Typography variant="h6">
-        {t('SETTINGS.CHAT.SEND_ALL')}
-        {'   '}
-        <Tooltip title={t('SETTINGS.CHAT.SEND_ALL_INFO')}>
-          <InfoBadge />
-        </Tooltip>
-      </Typography>
-      <Switch
-        checked={chatSendAll}
-        onChange={(e: ChangeEvent<HTMLInputElement>): void =>
-          onChange({ ...chat, sendAllToChatbot: e.target.checked })
-        }
-        data-cy={MESSAGE_MEMORY_SWITCH_CY}
-      />
+      <Stack spacing={0}>
+        <Typography variant="h6">
+          {t('SETTINGS.CHAT.SEND_ALL')}
+          {'   '}
+          <Tooltip title={t('SETTINGS.CHAT.SEND_ALL_INFO')}>
+            <InfoBadge />
+          </Tooltip>
+        </Typography>
+        <Switch
+          checked={chatSendAll}
+          onChange={(e: ChangeEvent<HTMLInputElement>): void =>
+            onChange({ ...chat, sendAllToChatbot: e.target.checked })
+          }
+          data-cy={MESSAGE_MEMORY_SWITCH_CY}
+        />
+      </Stack>
     </Stack>
   );
 };
diff --git a/src/settings/ExchangesSettings.tsx b/src/settings/ExchangesSettings.tsx
index ee4276e..968550c 100644
--- a/src/settings/ExchangesSettings.tsx
+++ b/src/settings/ExchangesSettings.tsx
@@ -141,7 +141,10 @@ const ExchangeSettingsPanel: FC<PropTypesSingle> = ({
         {index + 1}
       </Typography>
       <Box sx={{ flex: '1' }}>
-        <Stack spacing={1} p={2} border="1px solid #ccc" borderRadius="8px">
+        <Stack spacing={3} p={2} border="1px solid #ccc" borderRadius="8px">
+          <Typography variant="h6">
+            {exchangeName || `Exchange ${index + 1}`}
+          </Typography>
           <Stack direction="row" spacing={2} alignItems="center">
             <TextField
               value={exchangeName}
@@ -278,20 +281,22 @@ const ExchangeSettingsPanel: FC<PropTypesSingle> = ({
             }
             data-cy={FOLLOW_UP_QUESTIONS_INPUT_CY}
           />
-          <Typography variant="h6">
-            {t('SETTINGS.EXCHANGES.DISABLE_HARD_LIMIT')}
-            {'   '}
-            <Tooltip title={t('SETTINGS.EXCHANGES.HARD_LIMIT_INFO')}>
-              <InfoBadge />
-            </Tooltip>
-          </Typography>
-          <Switch
-            checked={exchangeLimit}
-            onChange={(e: ChangeEvent<HTMLInputElement>): void =>
-              onChange(index, 'hardLimit', e.target.checked)
-            }
-            data-cy={HARD_LIMIT_SWITCH_CY}
-          />
+          <Stack spacing={0}>
+            <Typography variant="body1">
+              {t('SETTINGS.EXCHANGES.DISABLE_HARD_LIMIT')}
+              {'   '}
+              <Tooltip title={t('SETTINGS.EXCHANGES.HARD_LIMIT_INFO')}>
+                <InfoBadge />
+              </Tooltip>
+            </Typography>
+            <Switch
+              checked={exchangeLimit}
+              onChange={(e: ChangeEvent<HTMLInputElement>): void =>
+                onChange(index, 'hardLimit', e.target.checked)
+              }
+              data-cy={HARD_LIMIT_SWITCH_CY}
+            />
+          </Stack>
           {!exchangeLimit && (
             <TextField
               value={exchangeOnComplete}