Improve ai assistant

frontend/src/app/components/dashboard/db-table-ai-panel/db-table-ai-panel.component.html

@@ -32,7 +32,7 @@ <h2 class="mat-heading-2 ai-panel-sidebar__title">
                 <mat-action-list role="list">
                     <button mat-list-item *ngFor="let suggestion of aiRequestSuggestions"
                         class="suggestion-button"
-                        (click)="sendMessage(suggestion)"
+                        (click)="createThread(suggestion)"
                         angulartics2On="click"
                         angularticsAction="AI panel: suggested request is clicked">
                         {{suggestion}}
@@ -48,7 +48,7 @@ <h2 class="mat-heading-2 ai-panel-sidebar__title">
             </div>
         </div>
 
-        <form (ngSubmit)="sendMessage()" class="ai-message-form">
+        <form (ngSubmit)="threadID ? sendMessage() : createThread()" class="ai-message-form">
             <mat-form-field class="form-field" appearance="outline" class="ai-message-form__textarea">
                 <mat-label class="ai-message-form__label">What should I analyze?</mat-label>
                 <textarea matInput name="message"

frontend/src/app/components/dashboard/db-table-ai-panel/db-table-ai-panel.component.ts

@@ -1,6 +1,6 @@
+import { Angulartics2, Angulartics2Module } from 'angulartics2';
 import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 
-import { Angulartics2, Angulartics2Module } from 'angulartics2';
 import { CommonModule } from '@angular/common';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { FormsModule } from '@angular/forms';
@@ -10,9 +10,9 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
 import { TableStateService } from 'src/app/services/table-state.service';
 import { TablesService } from 'src/app/services/tables.service';
-import { MatListModule } from '@angular/material/list';
 
 @Component({
   selector: 'app-db-table-ai-panel',
@@ -40,6 +40,7 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
   public isAIpanelOpened: boolean = false;
   public message: string = '';
   public charactrsNumber: number = 0;
+  public threadID: string = null;
   public messagesChain: {
     type: string;
     text: string
@@ -94,11 +95,51 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
         });
       } else {
         event.preventDefault();
-        this.sendMessage();
+        this.createThread();
       }
     }
   }
 
+  createThread(suggestedMessage?: string) {
+    if (suggestedMessage) {
+      this.message = suggestedMessage;
+    }
+    this.submitting = true;
+    this.messagesChain.push({
+      type: 'user',
+      text: this.message
+    });
+    const messageCopy = this.message;
+    this.message = '';
+
+    this._tables.createAIthread(this.connectionID, this.tableName, messageCopy).subscribe((response) => {
+      this.threadID = response.threadId;
+
+      this.messagesChain.push({
+        type: 'ai',
+        text: this.markdownService.parse(response.responseMessage) as string
+      });
+      this.submitting = false;
+
+      this.angulartics2.eventTrack.next({
+        action: 'AI panel: thread created successfully',
+      });
+    },
+      (error_message) => {
+        this.messagesChain.push({
+          type: 'ai-error',
+          text: error_message
+        });
+        this.angulartics2.eventTrack.next({
+          action: 'AI panel: thread creation returned an error',
+        });
+      },
+      () => {
+        this.submitting = false;
+      }
+    );
+  }
+
   sendMessage(suggestedMessage?: string): void {
     if (suggestedMessage) {
       this.message = suggestedMessage;
@@ -111,7 +152,7 @@ export class DbTableAiPanelComponent implements OnInit, OnDestroy {
     const messageCopy = this.message;
     this.message = '';
     this.charactrsNumber = 0;
-    this._tables.requestAI(this.connectionID, this.tableName, messageCopy).subscribe((response) => {
+    this._tables.requestAImessage(this.connectionID, this.tableName, this.threadID, messageCopy).subscribe((response) => {
       this.messagesChain.push({
         type: 'ai',
         text: this.markdownService.parse(response.response_message) as string

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

@@ -1,11 +1,11 @@
 import { AlertActionType, AlertType } from '../models/alert';
 import { BehaviorSubject, EMPTY, throwError } from 'rxjs';
 import { CustomAction, Rule, TableSettings, Widget } from '../models/table';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { NavigationEnd, Router } from '@angular/router';
 import { catchError, filter, map } from 'rxjs/operators';
 
 import { Angulartics2 } from 'angulartics2';
-import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { NotificationsService } from './notifications.service';
 
@@ -470,27 +470,42 @@ export class TablesService {
       );
   }
 
-  requestAI(connectionID: string, tableName: string, message: string) {
-    return this._http.post<any>(`/ai/request/${connectionID}`, {user_message: message}, {
+  createAIthread(connectionID, tableName, message) {
+    return this._http.post<any>(`/ai/v2/request/${connectionID}`, {user_message: message}, {
+      responseType: 'text' as 'json',
+      observe: 'response',
+      params: {
+        tableName
+      }
+    })
+      .pipe(
+        map((res) => {
+          const threadId = res.headers.get('x-openai-thread-id');
+          this.angulartics2.eventTrack.next({
+            action: 'AI: thread created'
+          });
+          const responseMessage = res.body as string;
+          return {threadId, responseMessage}
+        }),
+        catchError((err) => {
+          console.log(err);
+          return throwError(() => new Error(err.error.message));
+        })
+      );
+  }
+
+  requestAImessage(connectionID: string, tableName: string, threadId: string, message: string) {
+    return this._http.post<any>(`/ai/thread/message/${connectionID}/${threadId}`, {user_message: message}, {
       params: {
         tableName
       }
     })
       .pipe(
         map((res) => {
-          // this.tables.next('activate actions');
-          // this._notifications.showSuccessSnackbar(`${action.title} is done for ${primaryKeys.length} rows.`);
           return res
         }),
         catchError((err) => {
           console.log(err);
-          // this._notifications.showAlert(AlertType.Error, {abstract: err.error.message, details: err.error.originalMessage}, [
-          //   {
-          //     type: AlertActionType.Button,
-          //     caption: 'Dismiss',
-          //     action: (id: number) => this._notifications.dismissAlert()
-          //   }
-          // ]);
           return throwError(() => new Error(err.error.message));
         })
       );