b

frontend/src/app/components/protected/common/chatbot/chatbot.component.html

@@ -25,7 +25,9 @@
         placeholder="Where the Machine Creates the Code ..."
         [(ngModel)]="query"
         name="query"
+        #queryField
         [disabled]="session === ''"
+        (keyup.esc)="close()"
         autocomplete="off">
       <button
         mat-icon-button

frontend/src/app/components/protected/common/chatbot/chatbot.component.scss

@@ -35,7 +35,7 @@
   }
 }
 
-::ng-deep .chatbot .messages p img {
+::ng-deep .chatbot .messages img {
   max-width: 100%;
 }
 

frontend/src/app/components/protected/common/chatbot/chatbot.component.ts

@@ -6,7 +6,7 @@
 // Angular and system imports.
 import { HttpTransportType, HubConnection, HubConnectionBuilder } from '@aspnet/signalr';
 import { ReCaptchaV3Service } from 'ng-recaptcha';
-import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
 
 // Application specific imports.
 import { BazarService } from 'src/app/services/bazar.service';
@@ -32,6 +32,8 @@ class Message {
 export class ChatbotComponent implements OnInit {
 
   @Output() chatbotClosed = new EventEmitter<any>();
+  @ViewChild('queryField') private queryField: any;
+
   messages: Message[] = [
     {
       content: 'Ask me anything about Magic Cloud or Hyperlambda',
@@ -101,6 +103,11 @@ export class ChatbotComponent implements OnInit {
     });
   }
 
+  focus() {
+
+    setTimeout(() => this.queryField.nativeElement.focus(), 500);
+  }
+
   close() {
 
     this.chatbotClosed.emit();
@@ -151,7 +158,6 @@ export class ChatbotComponent implements OnInit {
   }
 
   getDots() {
-    console.log('dots');
     return `<span class="ainiro-dot ainiro-dot-1"></span>
 <span class="ainiro-dot ainiro-dot-2"></span>
 <span class="ainiro-dot ainiro-dot-3"></span>`;

frontend/src/app/components/protected/core/header/header.component.html

@@ -83,17 +83,17 @@
       mat-button
       color="primary"
       class="ms-2 url-btn"
-      [matMenuTriggerFor]="help_menu">
+      (click)="toggleChatbot()">
       <div class="d-flex flex-nowrap align-items-center ps-1">
-        <mat-icon>question_mark</mat-icon>
+        <mat-icon>chat_bubble</mat-icon>
       </div>
     </button>
 
     <button
       mat-button
       color="primary"
       class="ms-2 url-btn"
-      (click)="openChatbot()">
+      [matMenuTriggerFor]="help_menu">
       <div class="d-flex flex-nowrap align-items-center ps-1">
         <mat-icon>question_mark</mat-icon>
       </div>
@@ -135,5 +135,6 @@
 <div class="overlay" *ngIf="sideExpanded" (click)="toggleSidebar()"></div>
 
 <app-chatbot
-  *ngIf="showChatbot"
+  [class.d-none]="!showChatbot"
+  #chatbot
   (chatbotClosed)="hideChatbot()"></app-chatbot>

frontend/src/app/components/protected/core/header/header.component.ts

@@ -15,6 +15,7 @@ import { MessageService } from 'src/app/services/message.service';
 import { Message } from 'src/app/models/message.model';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { MagicResponse } from 'src/app/models/magic-response.model';
+import { ChatbotComponent } from '../../common/chatbot/chatbot.component';
 
 /**
  * Header component showing navbar links and backend switcher.
@@ -27,6 +28,7 @@ import { MagicResponse } from 'src/app/models/magic-response.model';
 export class HeaderComponent implements OnInit {
 
   @ViewChild('completion_menu_trigger') completion_menu_trigger: MatMenuTrigger;
+  @ViewChild('chatbot') private chatbot: ChatbotComponent;
 
   help_description: string;
   help_url: string;
@@ -436,9 +438,13 @@ optin verification and potential referential integrity issues.`;
     this.checkActiveLink(this.router.url);
   }
 
-  openChatbot() {
+  toggleChatbot() {
 
     this.showChatbot = !this.showChatbot;
+
+    if (this.showChatbot) {
+      this.chatbot.focus();
+    }
   }
 
   hideChatbot() {