community: chat with some preloaded data (fixes #7337)

chatapi/src/services/chat.service.ts

@@ -31,7 +31,7 @@ export async function chat(data: any): Promise<{
   messages.push({ 'role': 'user', content });
 
   try {
-    const completionText = await gptChat(messages);
+    const completionText = await gptChat(messages, dbData?.preload ? dbData.preload : null);
 
     dbData.conversations[dbData.conversations.length - 1].response = completionText;
 

chatapi/src/utils/gpt-chat.utils.ts

@@ -6,7 +6,10 @@ import { ChatMessage } from '../models/chat-message.model';
  * @param messages - Array of chat messages
  * @returns Completion text
  */
-export async function gptChat(messages: ChatMessage[]): Promise<string> {
+export async function gptChat(messages: ChatMessage[], dataPreload?: any): Promise<string> {
+  if (dataPreload) {
+    messages[0].content = `${dataPreload} \t ${messages[0].content}`;
+  }
   const completion = await openai.createChatCompletion({
     'model': 'gpt-3.5-turbo',
     messages,

src/app/chat/chat-sidebar/chat-sidebar.component.html

@@ -38,7 +38,7 @@
             </mat-icon>
           </ng-template>
           <ng-template #conversationTitle>
-            {{ conversation?.title?.slice(0, 25) || conversation.conversations[0].query.slice(0, 25) }}
+            {{ conversation?.title?.slice(0, 25) }}
           </ng-template>
         </li>
       </ul>
@@ -54,6 +54,6 @@
         <i class="material-icons">chevron_right</i>
       </button>
     </div>
-    <planet-chat-window></planet-chat-window>
+    <planet-chat-window [dataPreload]="dataPreload"></planet-chat-window>
   </div>
 </mat-drawer-container>

src/app/chat/chat-sidebar/chat-sidebar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -29,6 +29,7 @@ export class ChatSidebarComponent implements OnInit, OnDestroy {
     this.recordSearch();
     this.filterConversations();
   }
+  @Input() dataPreload;
 
   constructor(
     private chatService: ChatService,

src/app/chat/chat-window/chat-window.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -24,9 +24,11 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
     user: this.userService.get(),
     time: this.couchService.datePlaceholder,
     content: '',
+    preload: null,
     _id: '',
     _rev: ''
   };
+  @Input() dataPreload;
 
   @ViewChild('chat') chatContainer: ElementRef;
 
@@ -118,13 +120,18 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
   }
 
   submitPrompt() {
-    const content = this.promptForm.get('prompt').value;
-    this.data.content = content;
+    const query = this.promptForm.get('prompt').value;
+    if (this.dataPreload) {
+      this.data.preload = this.dataPreload;
+    } else {
+      delete this.data.preload;
+    }
+    this.data.content = query;
     this.setSelectedConversation();
 
     this.chatService.getPrompt(this.data, true).subscribe(
       (completion: any) => {
-        this.conversations.push({ query: content, response: completion?.chat });
+        this.conversations.push({ query, response: completion?.chat });
         this.selectedConversationId = {
           '_id': completion.couchDBResponse?.id,
           '_rev': completion.couchDBResponse?.rev
@@ -134,7 +141,7 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
       },
       (error: any) => {
         this.spinnerOn = false;
-        this.conversations.push({ query: content, response: 'Error: ' + error.message, error: true });
+        this.conversations.push({ query, response: 'Error: ' + error.message, error: true });
         this.postSubmit();
       }
     );

src/app/chat/chat.component.html

@@ -1,9 +1,9 @@
-<mat-toolbar class="titlebar">
+<mat-toolbar *ngIf="showToolbar" class="titlebar">
   <button mat-icon-button (click)="goBack()"><mat-icon>arrow_back</mat-icon></button>
   <span i18n>AI Chat</span>
   <span class="toolbar-fill"></span>
 </mat-toolbar>
 
 <div class="space-container">
-  <planet-chat-sidebar></planet-chat-sidebar>
+  <planet-chat-sidebar [dataPreload]="dataPreload"></planet-chat-sidebar>
 </div>

src/app/chat/chat.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
@@ -7,14 +7,12 @@ import { ActivatedRoute, Router } from '@angular/router';
   styleUrls: [ './chat.scss' ]
 })
 export class ChatComponent {
+  @Input() showToolbar = true;
+  @Input() dataPreload;
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-  ) {}
+  constructor(private route: ActivatedRoute, private router: Router) {}
 
   goBack() {
     this.router.navigate([ '/' ], { relativeTo: this.route });
   }
-
 }

src/app/community/community.component.html

@@ -10,6 +10,9 @@ <h3 style="text-align: right; margin-right: 0.5rem;">
           </h3>
           <planet-news-list [items]="news" [shareTarget]="shareTarget" (viewChange)="toggleShowButton($event)" [viewableId]="teamId"></planet-news-list>
         </mat-tab>
+        <mat-tab i18n-label label="Community Advisor">
+          <planet-chat [dataPreload]="dataPreload" [showToolbar]="showChatToolbar"></planet-chat>
+        </mat-tab>
         <mat-tab i18n-label label="Community Leaders">
           <div class="card-grid">
             <mat-card *ngFor="let councillor of councillors">

src/app/community/community.component.ts

@@ -48,6 +48,8 @@ export class CommunityComponent implements OnInit, OnDestroy {
   resizeCalendar: any = false;
   deviceType: DeviceType;
   deviceTypes = DeviceType;
+  showChatToolbar = false;
+  dataPreload: string;
 
   constructor(
     private dialog: MatDialog,
@@ -119,6 +121,7 @@ export class CommunityComponent implements OnInit, OnDestroy {
     ).subscribe(team => {
       this.team = team;
       this.servicesDescriptionLabel = this.team.description ? 'Edit' : 'Add';
+      this.dataPreload = this.team?.description;
     });
   }