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;
  });
  }