dropdown in input

old-sae-airwatch/src/app/chatbot/options-dropdown/options-dropdown.html

@@ -1,20 +1,32 @@
-<div class="options-dropdown is-mode-{{mode}}" >
+<div class="options-dropdown is-mode-{{mode}}">
   <div class="button">
     <i class="ri-settings-2-line "></i>
     <div class="indicator"></div>
   </div>
 
   <div class="dropwdown">
-    <div class="dropdown-item" (click)="changeModeOption('auto')">
-    <i class="ri-settings-2-line "></i>
+    <div class="dropdown-item" (click)="changeModeOption('auto')" [ngClass]="{
+    'is-active' : 'auto' == mode
+    }">
+      <span class="radio"></span>
       <div class="label">
         Auto mode
       </div>
     </div>
-    <div class="dropdown-item" (click)="changeModeOption('structured')">
-    <i class="ri-settings-2-line "></i>
+    <div class="dropdown-item" (click)="changeModeOption('structured')" [ngClass]="{
+    'is-active' : 'structured' == mode
+    }">
+      <span class="radio"></span>
       <div class="label">
-        Structured mode
+        Structured list
+      </div>
+    </div>
+    <div class="dropdown-item" (click)="changeModeOption('specific')" [ngClass]="{
+    'is-active' : 'specific' == mode
+    }">
+      <span class="radio"></span>
+      <div class="label">
+        Specific question
       </div>
     </div>
   </div>

old-sae-airwatch/src/app/chatbot/options-dropdown/options-dropdown.scss

@@ -1,10 +1,32 @@
-.options-dropdown{
-  padding: 10px;
-  .button{
-    padding: 6px;
-    &:hover{
-      background: cornflowerblue;
+.options-dropdown {
+  text-align: left;
+  position: relative;
+  top: 0.15em;
+  right: 0;
+  float: right;
+  margin-right: -6em;
+
+
+
+  .dropwdown {
+    visibility: hidden;
+  }
+
+  &:hover {
+    .button {
+      background: grey;
     }
+
+    .dropwdown {
+      visibility: visible;
+    }
+  }
+
+  .button {
+    padding: 6px;
+    width: 2em;
+    border-radius: 6px;
+    text-align: center;
   }
 
   .is-mode-structured,
@@ -18,7 +40,20 @@
     top: 10px;
   }
 
-  .dropdown-item{
+  .dropdown-item {
     background: white;
+    padding: 6px;
+    cursor: pointer;
+    padding-left: 12px;
+
+    &.is-active {
+      color: cornflowerblue;
+
+    }
+
+    &:hover {
+      background: cornflowerblue;
+      color: white;
+    }
   }
 }

old-sae-airwatch/src/app/chatbot/options-dropdown/options-dropdown.ts

@@ -1,17 +1,23 @@
 import {Component, Input} from '@angular/core';
 import {NgClass} from '@angular/common';
 
+
+export type optionsDropdownOptions = 'auto' | 'structured' | 'specific';
+
 @Component({
   selector: 'app-options-dropdown',
 
   templateUrl: './options-dropdown.html',
+  imports: [
+    NgClass
+  ],
   styleUrl: './options-dropdown.scss'
 })
 export class OptionsDropdown {
 
-  @Input() public mode: 'auto' | 'structured' = 'auto'
+  @Input() public mode: optionsDropdownOptions  = 'auto'
 
-  changeModeOption(mode: 'auto' | 'structured') {
+  changeModeOption(mode: optionsDropdownOptions) {
     this.mode = mode;
   }
 }

old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.html

@@ -8,9 +8,9 @@
   <input (keydown)="handleKeyEvent($event)" [(ngModel)]="userInput"
          placeholder="Ask questions, request or a web search" type="text">
 
-
-  <app-options-dropdown></app-options-dropdown>
   <button (click)="submitMessage()" class="submit">
     <i class="ri-send-plane-2-line"></i>
   </button>
+  <app-options-dropdown></app-options-dropdown>
+
 </div>

old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.scss

@@ -6,6 +6,7 @@
   border-radius: 0.5rem;
   padding: 10px 10px;
   box-shadow: 0 5px 10px variables.$shadow-color;
+  height: 3.8em;
 
 
   .column {
@@ -42,7 +43,11 @@
       background: 1px solid variables.$bg-color-button;
     }
 
-    .submit {
+    &.submit {
+      position: relative;
+      top:0;
+      right: 0;
+
       float: right;
       display: inline-block;
     }

old-sae-airwatch/src/app/chatbot/tools-options/tools-options.scss

@@ -4,6 +4,8 @@
   padding-top: 1rem;
   border-top: solid 0.5px #b7b7b7;
 
+
+
   app-toggle-button {
     margin-bottom: 10px;
     display: inline-block;