GDB-10937 show warnings in agent settings modal (#1622)

## What
* Show warning when the user sets temperature higher than 1.
* Show warning and an alert to the user when he tries to override the base instructions.

## Why
* Because it would help the user to receive more meaningful results from the agent.
* Because this would prevent unexpected results if the user provides incorrect instructions.

## How
* Implemented icon with tooltip next to the temperature field label, and a handler for the property change to toggle the warning.
* Implemented icon with tooltip and an alert that is displayed when the field value becomes different from empty string.

Add tests to cover the new features

fix test

src/css/ttyg/agent-settings-modal.css

@@ -1,5 +1,7 @@
 :root {
  --field-label-weight: 500;
+ --error-color: #FA787E;
+ --warning-color: #8a6d3b;
 }
 
 .agent-settings-modal .modal-footer .creating-agent-loader {
@@ -18,7 +20,11 @@
 }
 
 .agent-settings-modal .agent-settings-form .has-error {
- outline: 1px solid #FA787E;
+ outline: 1px solid var(--error-color);
+}
+
+.agent-settings-modal .agent-settings-form .has-warning {
+ outline: 2px solid var(--warning-color);
 }
 
 .agent-settings-modal .agent-settings-form .extraction-methods .extraction-method-heading {

src/i18n/locale-en.json

@@ -383,7 +383,8 @@
  },
  "temperature": {
  "label": "Temperature",
- "tooltip": "The sampling temperature to use, between 0 and 2. Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic."
+ "tooltip": "The sampling temperature to use, between 0 and 2. Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.",
+ "high_temperature_warning": "A temperature above 1.0 may cause the model to generate anything from creative responses to overdriven, incoherent outputs. Consider lowering the temperature for more reliable results."
  },
  "top_p": {
  "label": "Top P",
@@ -486,6 +487,10 @@
  "label": "Base instructions",
  "placeholder": "Enter base instructions",
  "tooltip": "Base instructions for the agent. The default value provides good results in most setups so there is no need to change it.",
+ "overriding_system_instruction_warning": {
+ "title": "Overriding base instructions",
+ "body": "Modifying the base instructions may result in suboptimal performance. Only proceed if you are confident in your adjustments."
+ },
  "btn": {
  "copy_instruction": {
  "tooltip": "Copy base instructions"

src/i18n/locale-fr.json

@@ -383,7 +383,8 @@
  },
  "temperature": {
  "label": "Température",
- "tooltip": "La température d'échantillonnage à utiliser, entre 0 et 2. Des valeurs plus élevées comme 0,8 rendront la sortie plus aléatoire, tandis que des valeurs plus faibles comme 0,2 la rendront plus ciblée et déterministe."
+ "tooltip": "La température d'échantillonnage à utiliser, entre 0 et 2. Des valeurs plus élevées comme 0,8 rendront la sortie plus aléatoire, tandis que des valeurs plus faibles comme 0,2 la rendront plus ciblée et déterministe.",
+ "high_temperature_warning": "Une température supérieure à 1,0 peut amener le modèle à générer des réponses allant de créatives à incohérentes, voire incompréhensibles. Pensez à baisser la température pour des résultats plus fiables."
  },
  "top_p": {
  "label": "Top P",
@@ -486,6 +487,10 @@
  "label": "Instructions de base",
  "placeholder": "Entrez les instructions de base",
  "tooltip": "Instructions de base pour l'agent. La valeur par défaut fournit de bons résultats dans la plupart des configurations, il n'est donc pas nécessaire de la modifier.",
+ "overriding_system_instruction_warning": {
+ "title": "Remplacement des instructions de base",
+ "body": "Modifier les instructions de base peut entraîner des résultats sous-optimaux. N’effectuez ces changements que si vous êtes sûr de ce que vous faites."
+ },
  "btn": {
  "copy_instruction": {
  "tooltip": "Copier les instructions du système"

src/js/angular/ttyg/controllers/agent-settings-modal.controller.js

@@ -19,6 +19,7 @@ angular
 AgentSettingsModalController.$inject = [
  '$scope',
  '$uibModalInstance',
+ 'ModalService',
  'SimilarityService',
  'ConnectorsService',
  'RepositoriesRestService',
@@ -33,6 +34,7 @@ AgentSettingsModalController.$inject = [
 function AgentSettingsModalController(
  $scope,
  $uibModalInstance,
+ ModalService,
  SimilarityService,
  ConnectorsService,
  RepositoriesRestService,
@@ -106,6 +108,18 @@ function AgentSettingsModalController(
  */
  $scope.showAdvancedSettings = false;
 
+ /**
+ * Flag used to show/hide the high temperature warning in the modal.
+ * @type {boolean}
+ */
+ $scope.showHighTemperatureWarning = false;
+
+ /**
+ * Flag used to control the visibility of the system instruction warning.
+ * @type {boolean}
+ */
+ $scope.showSystemInstructionWarning = false;
+
  /**
  * The similarity indexes to be used for the similarity extraction method as select menu options.
  * @type {SelectMenuOptionsModel[]}
@@ -283,6 +297,33 @@ function AgentSettingsModalController(
  $scope.agentFormModel.instructions.userInstruction = $scope.agentFormModel.instructions.userInstructionCopy;
  };
 
+ /**
+ * Handles the change in the temperature field. This is needed because the high temperature warning should be shown
+ * when the temperature is higher than 1.
+ */
+ $scope.onTemperatureChange = () => {
+ $scope.showHighTemperatureWarning = $scope.agentFormModel.temperature.value > 1;
+ };
+
+ /**
+ * Handles the change in the system instructions field.
+ */
+ $scope.onSystemInstructionChange = () => {
+ if ($scope.agentFormModel.instructions.systemInstruction !== '' && !$scope.showSystemInstructionWarning) {
+ $scope.showSystemInstructionWarning = true;
+ ModalService.openModalAlert({
+ title: $translate.instant('ttyg.agent.create_agent_modal.form.system_instruction.overriding_system_instruction_warning.title'),
+ message: $translate.instant('ttyg.agent.create_agent_modal.form.system_instruction.overriding_system_instruction_warning.body')
+ }).result
+ .then(function () {
+ // Do nothing, just warning the user
+ });
+ }
+ if ($scope.agentFormModel.instructions.systemInstruction === '') {
+ $scope.showSystemInstructionWarning = false;
+ }
+ };
+
  // =========================
  // Private functions
  // =========================

src/js/angular/ttyg/templates/modal/agent-settings-modal.html

@@ -321,15 +321,16 @@ <h4 class="modal-title">{{(
  <label for="{{additionalExtractionMethod.method + '_checkbox'}}"></label>
  <a class="btn btn-link extraction-method-label" uib-popover="{{'ttyg.agent.create_agent_modal.form.additional_query_methods.method.' +
  additionalExtractionMethod.method + '.tooltip' | translate}}"
-  popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.additional_query_methods.method.' +
+ popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.additional_query_methods.method.' +
  additionalExtractionMethod.method + '.label' | translate}}</a>
  </div>
  </div>
 
  <div class="form-row clearfix">
  <div class="form-group gpt-model col-md-4">
  <label for="model" uib-popover="{{'ttyg.agent.create_agent_modal.form.model.tooltip' | translate}}"
- popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.model.label' | translate}}</label>
+ popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.model.label' |
+ translate}}</label>
  <input type="text" class="form-control" id="model" name="model" ng-model="agentFormModel.model"
  required autocomplete="off">
  <small id="modelHelp" class="form-text text-muted"
@@ -341,15 +342,20 @@ <h4 class="modal-title">{{(
  </div>
  </div>
  <div class="form-group temperature col-md-4">
- <label for="temperature"
- uib-popover="{{'ttyg.agent.create_agent_modal.form.temperature.tooltip' | translate}}"
- popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.temperature.label' |
- translate}}</label>
- <input type="text" class="form-control" id="temperature" name="temperature" readonly
+ <label for="temperature">
+ <span uib-popover="{{'ttyg.agent.create_agent_modal.form.temperature.tooltip' | translate}}"
+ popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.temperature.label' | translate}}</span>
+ <i class="fa-regular fa-triangle-exclamation text-warning high-temperature-warning" ng-if="showHighTemperatureWarning"
+ uib-popover="{{'ttyg.agent.create_agent_modal.form.temperature.high_temperature_warning' | translate}}"
+ popover-trigger="mouseenter"></i>
+ </label>
+ <input type="text" id="temperature" name="temperature" readonly
+ class="form-control" ng-class="{'has-warning': showHighTemperatureWarning}"
  ng-model="agentFormModel.temperature.value">
  <input id="temperatureSlider" name="temperature" type="range"
  min="{{agentFormModel.temperature.minValue}}"
  max="{{agentFormModel.temperature.maxValue}}" step="{{agentFormModel.temperature.step}}"
+ ng-change="onTemperatureChange()"
  ng-model="agentFormModel.temperature.value"/>
  </div>
  <div class="form-group top-p col-md-4">
@@ -406,10 +412,13 @@ <h4 class="modal-title">{{(
  <div ng-show="showAdvancedSettings" class="advanced-settings">
  <div class="form-group system-instructions">
  <div class="toolbar">
- <label for="systemInstruction"
- uib-popover="{{'ttyg.agent.create_agent_modal.form.system_instruction.tooltip' | translate}}"
- popover-trigger="mouseenter">
- {{'ttyg.agent.create_agent_modal.form.system_instruction.label' | translate}}
+ <label for="systemInstruction">
+ <span
+ uib-popover="{{'ttyg.agent.create_agent_modal.form.system_instruction.tooltip' | translate}}"
+ popover-trigger="mouseenter">{{'ttyg.agent.create_agent_modal.form.system_instruction.label' | translate}}</span>
+ <i class="fa-regular fa-triangle-exclamation text-warning overriding-system-instructions-warning" ng-if="showSystemInstructionWarning"
+ uib-popover="{{'ttyg.agent.create_agent_modal.form.system_instruction.overriding_system_instruction_warning.body' | translate}}"
+ popover-trigger="mouseenter"></i>
  </label>
  <div class="actions">
  <copy-to-clipboard
@@ -423,8 +432,10 @@ <h4 class="modal-title">{{(
  </div>
  </div>
  <textarea type="text" class="form-control" id="systemInstruction" name="systemInstruction" rows="5"
+ placeholder="{{'ttyg.agent.create_agent_modal.form.system_instruction.placeholder' | translate}}"
+ ng-class="{'has-warning': showSystemInstructionWarning}"
  ng-model="agentFormModel.instructions.systemInstruction"
- placeholder="{{'ttyg.agent.create_agent_modal.form.system_instruction.placeholder' | translate}}">
+ ng-change="onSystemInstructionChange()">
  </textarea>
  </div>
  </div>

test-cypress/fixtures/locale-en.json

@@ -383,7 +383,8 @@
  },
  "temperature": {
  "label": "Temperature",
- "tooltip": "The sampling temperature to use, between 0 and 2. Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic."
+ "tooltip": "The sampling temperature to use, between 0 and 2. Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.",
+ "high_temperature_warning": "A temperature above 1.0 may cause the model to generate anything from creative responses to overdriven, incoherent outputs. Consider lowering the temperature for more reliable results."
  },
  "top_p": {
  "label": "Top P",
@@ -486,6 +487,10 @@
  "label": "Base instructions",
  "placeholder": "Enter base instructions",
  "tooltip": "Base instructions for the agent. The default value provides good results in most setups so there is no need to change it.",
+ "overriding_system_instruction_warning": {
+ "title": "Overriding base instructions",
+ "body": "Modifying the base instructions may result in suboptimal performance. Only proceed if you are confident in your adjustments."
+ },
  "btn": {
  "copy_instruction": {
  "tooltip": "Copy base instructions"
@@ -599,7 +604,7 @@
  "help_1": "Talk to your data in natural language. All you need to do is create and instruct your own AI Agent to assist you.",
  "help_2": "The Agent is an AI-powered conversational agent designed to help with a wide range of tasks, from answering questions and providing information to assisting with creative and technical projects. It leverages advanced natural language processing to understand and respond to user inputs in a human-like manner, making interactions intuitive and efficient.",
  "token_prop_warn1": "To enable this feature, set the config property",
- "token_prop_warn2": "should be set to your GPT token in",
+ "token_prop_warn2": "to your GPT token in",
  "token_prop_warn3": "file.",
  "token_prop_warn4": "Configuring your use of GPT models",
  "error_retrieval_connectors_loading": "Error loading retrieval connectors",

test-cypress/fixtures/ttyg/agent/get-agent-defaults.json

@@ -7,7 +7,7 @@
  "seed": 0,
  "repositoryId": "test-repository",
  "instructions": {
- "systemInstruction": "You are a helpful, knowledgeable, and friendly assistant. Your goal is to provide clear and accurate information while being polite, respectful, and professional.",
+ "systemInstruction": "",
  "userInstruction": "If you need to write a SPARQL query, use only the classes and properties provided in the schema and don't invent or guess any. Always try to return human-readable names or labels and not only the IRIs. If SPARQL fails to provide the necessary information you can try another tool too."
  },
  "assistantExtractionMethods": [