b

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

@@ -0,0 +1,41 @@
+
+<mat-card class="chatbot mat-elevation-z5">
+
+  <div class="text-end">
+    <button
+      mat-button
+      (click)="close()">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+
+  <div class="messages">
+    <div
+      *ngFor="let msg of messages"
+      [class]="msg.type + ' message ' + msg.finish"
+      [innerHTML]="msg.content === '' ? getDots() : (msg.content | marked)">
+    </div>
+  </div>
+
+  <form (submit)="submit()" class="mt-2">
+
+    <mat-form-field class="w-100 standalone-field">
+      <input
+        matInput
+        placeholder="Where the Machine Creates the Code ..."
+        [(ngModel)]="query"
+        name="query"
+        [disabled]="session === ''"
+        autocomplete="off">
+      <button
+        mat-icon-button
+        type="submit"
+        [disabled]="session === ''"
+        matSuffix>
+        <mat-icon>send</mat-icon>
+      </button>
+    </mat-form-field>
+
+  </form>
+
+</mat-card>

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

@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2023 Thomas Hansen - For license inquiries you can contact [email protected].
+ */
+ @import 'src/assets/styles/_variables/colors.scss';
+
+.chatbot {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  width: 550px;
+  height: 550px;
+  z-index: 1000;
+  padding: 10px;
+}
+
+.messages {
+  height: 442px;
+  overflow: auto;
+
+  .message {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    padding: 12px 12px 1px 12px;
+    background-color: rgba(0,0,0,.05);
+
+    &.machine {
+      margin-right: 20px;
+      border-radius: 5px 5px 5px 0;
+    }
+
+    &.user {
+      margin-left: 20px;
+      border-radius: 5px 5px 0 5px;
+    }
+  }
+}
+
+::ng-deep .chatbot .messages p img {
+  max-width: 100%;
+}
+
+::ng-deep .chatbot .messages pre {
+  overflow-x: auto;
+}
+
+@keyframes jump {
+  0%   {bottom: 0px;}
+  20%  {bottom: 5px;}
+  40%  {bottom: 0px;}
+}
+
+::ng-deep .chatbot .messages .ainiro-dot {
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  animation: jump 1s infinite;
+  display: inline-block;
+  margin-bottom: 5px;
+}
+
+::ng-deep .chatbot .messages .ainiro-dot-1 {
+  background-color: #474147;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 3px;
+  animation-delay: 200ms;
+}
+
+::ng-deep .chatbot .messages .ainiro-dot-2 {
+  background-color: #474147;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 3px;
+  animation-delay: 400ms;
+}
+
+::ng-deep .chatbot .messages .ainiro-dot-3 {
+  background-color: #474147;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 3px;
+  animation-delay: 600ms;
+}

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

@@ -0,0 +1,152 @@
+
+/*
+ * Copyright (c) 2023 Thomas Hansen - For license inquiries you can contact [email protected].
+ */
+
+// 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';
+
+// Application specific imports.
+import { BazarService } from 'src/app/services/bazar.service';
+import { ConfigService } from 'src/app/services/config.service';
+import { GeneralService } from 'src/app/services/general.service';
+import { MagicResponse } from 'src/app/models/magic-response.model';
+import { environment } from 'src/environments/environment';
+
+class Message {
+  content: string;
+  type: string;
+  finish: string;
+}
+
+/**
+ * Chatbot component for help.
+ */
+@Component({
+  selector: 'app-chatbot',
+  templateUrl: './chatbot.component.html',
+  styleUrls: ['./chatbot.component.scss']
+})
+export class ChatbotComponent implements OnInit {
+
+  @Output() chatbotClosed = new EventEmitter<any>();
+  messages: Message[] = [
+    {
+      content: 'Ask me anything about Magic Cloud or Hyperlambda',
+      type: 'machine',
+      finish: 'stop',
+    },
+  ];
+  query: string = '';
+  session: string;
+  hubConnection: HubConnection;
+
+  constructor(
+    private service: BazarService,
+    private cdr: ChangeDetectorRef,
+    private configService: ConfigService,
+    private generalService: GeneralService,
+    private recaptchaV3Service: ReCaptchaV3Service) { }
+
+  ngOnInit() {
+
+    this.generalService.showLoading();
+    this.configService.getGibberish(25,25).subscribe({
+
+      next: (result: MagicResponse) => {
+
+        this.session = result.result;
+        let builder = new HubConnectionBuilder();
+        this.hubConnection = builder.withUrl(environment.bazarUrl + '/sockets', {
+          skipNegotiation: true,
+          transport: HttpTransportType.WebSockets,
+        }).build();
+        this.hubConnection.on(this.session, (args) => {
+
+          args = JSON.parse(args);
+
+          if (args.message) {
+            this.messages[this.messages.length - 1].content += args.message;
+          }
+
+          if (args.finish_reason) {
+            this.messages[this.messages.length - 1].finish = args.finish_reason;
+          }
+
+          if (args.finished) {
+            this.generalService.hideLoading();
+            this.query = '';
+          }
+
+          this.cdr.detectChanges();
+        });
+        this.hubConnection.start().then(() => {
+
+          this.generalService.hideLoading();
+
+        }).catch(() => {
+
+          this.generalService.hideLoading();
+          this.generalService.showFeedback('Could not resolve reCAPTCHA', 'errorMessage');
+        });
+      },
+
+      error: () => {
+
+        this.generalService.hideLoading();
+        this.generalService.showFeedback('Could not resolve reCAPTCHA', 'errorMessage');
+      }
+    });
+  }
+
+  close() {
+
+    this.chatbotClosed.emit();
+  }
+
+  submit() {
+
+    this.messages.push({
+      content: this.query,
+      type: 'user',
+      finish: 'stop',
+    });
+
+    this.generalService.showLoading();
+    this.recaptchaV3Service.execute('aiAutoPrompt').subscribe({
+
+      next: (token: string) => {
+
+        this.messages.push({
+          content: '',
+          type: 'machine',
+          finish: 'stop',
+        });
+
+        this.service.chat(this.query, token, this.session).subscribe({
+
+          error: () => {
+
+            this.generalService.hideLoading();
+            this.generalService.showFeedback('Could not get answer from service', 'errorMessage');
+          }
+        });
+      },
+
+      error: () => {
+
+        this.generalService.hideLoading();
+        this.generalService.showFeedback('Could not resolve reCAPTCHA', 'errorMessage');
+      }
+    });
+  }
+
+  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

@@ -89,6 +89,16 @@
       </div>
     </button>
 
+    <button
+      mat-button
+      color="primary"
+      class="ms-2 url-btn"
+      (click)="openChatbot()">
+      <div class="d-flex flex-nowrap align-items-center ps-1">
+        <mat-icon>question_mark</mat-icon>
+      </div>
+    </button>
+
     <mat-menu
       #help_menu="matMenu"
       class="px-4 py-3 m-0 help_menu">
@@ -123,3 +133,7 @@
 </div>
 
 <div class="overlay" *ngIf="sideExpanded" (click)="toggleSidebar()"></div>
+
+<app-chatbot
+  *ngIf="showChatbot"
+  (chatbotClosed)="hideChatbot()"></app-chatbot>

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

@@ -36,6 +36,7 @@ export class HeaderComponent implements OnInit {
   sideExpanded: boolean = false;
   isAffiliate: boolean = false;
   completion: string = null;
+  showChatbot: boolean = false;
 
   constructor(
     private router: Router,
@@ -434,4 +435,14 @@ optin verification and potential referential integrity issues.`;
     ];
     this.checkActiveLink(this.router.url);
   }
+
+  openChatbot() {
+
+    this.showChatbot = !this.showChatbot;
+  }
+
+  hideChatbot() {
+
+    this.showChatbot = false;
+  }
 }

frontend/src/app/modules/app.module.ts

@@ -45,6 +45,7 @@ import { AuthBaseComponent } from 'src/app/components/public/authentication/auth
 import { SharedModule } from './shared.module';
 import { BackendsListComponent } from '../components/protected/core/header/components/backends-list/backends-list.component';
 import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
+import { ChatbotComponent } from '../components/protected/common/chatbot/chatbot.component';
 
 @NgModule({
   declarations: [
@@ -54,6 +55,7 @@ import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
     FooterComponent,
     AuthBaseComponent,
     BackendsListComponent,
+    ChatbotComponent,
   ],
   imports: [
     BrowserModule,

frontend/src/app/services/bazar.service.ts

@@ -62,4 +62,18 @@ export class BazarService {
       encodeURIComponent(recaptch_response);
     return this.httpClient.get<MagicResponse>(url);
   }
+
+  chat(prompt: string, recaptch_response: string, session: string) {
+
+    const url = environment.bazarUrl + '/magic/system/openai/chat?stream=true&prompt=' +
+      encodeURIComponent(prompt) +
+      '&type=magic-documentation' +
+      '&session=' +
+      encodeURIComponent(session) +
+      '&user_id=' +
+      encodeURIComponent(session) +
+      '&recaptcha_response=' +
+      encodeURIComponent(recaptch_response);
+    return this.httpClient.get<MagicResponse>(url);
+  }
 }

frontend/src/assets/styles/_variables/colors.scss

@@ -1,5 +1,5 @@
 /*=-=-=-=-=-=
-main colour definistion
+Main colour definition
 =-=-=-=-=-=*/
 $ainiro_default: #FFFFFF;
 $ainiro_default_alt: #f5f5f5; // background