Recurring suggestions for AI Chat (#23)

* fix: update suggestion display logic and manage loading states in AI chat component

* fix: restore smooth scrolling functionality

* fix: ensure smooth scrolling is applied after chat updates

* fix: ensure smooth scrolling is triggered after chat suggestions are generated

* fix: enhance suggestion handling by improving suggestion structure

* fix: enhance suggestion generation accuracy and relevance

* fix: streamline suggestion payload by consolidating properties

* refactor: var name change

Author: krithika7402

backend/api/chat_api.py

@@ -60,6 +60,8 @@ def get_suggestions():
         description=data["description"],
         type=data["type"],
         requirement=data["requirement"],
+        suggestions=data["suggestions"],
+        selectedSuggestion=data["selectedSuggestion"],
     )
     llm_response = llm_service.call_llm(template, knowledge_base=knowledge_base)
 

backend/llm/prompts/chat/improve_suggestions.jinja2

@@ -1,5 +1,5 @@
 You are an AI assistant tasked with generating {{n}} creative and practical one-liner suggestions(not more than 5 words) to improve an abstract requirement. 
-The requirement is not fully detailed and may lack specific context, so your suggestions should be broad, versatile, and aimed at enhancing clarity, feasibility, and overall effectiveness. Consider potential gaps, ambiguities, and areas for innovation.
+The requirement is not fully detailed and may lack specific context, so your suggestions should be broad, versatile, and aimed at enhancing clarity, feasibility, and overall effectiveness. Consider potential gaps, ambiguities, and areas for innovation. Ensure the suggestions you generate are accurate, relevant, and aligned with the abstract requirement.
 
 Application
 Name: {{name}}
@@ -15,6 +15,16 @@ Suggestion 2:
 Suggestion 3:
 [Provide a creative one-liner suggestion encouraging innovation and new solutions.]
 -----------
+Cardinal rule:
+Do not repeat suggestions. Here are the suggestions that were already provided and relevant to the Abstract Requirement provided.
+{{suggestions}}
+Strictly do not provide any one of these.
+{% if selectedSuggestion %}
+-----------
+Improve the suggestions you are going to generate based on the following suggestion since it was selected by the user but quickly rejected by the user:
+{{selectedSuggestion}}
+-----------
+{% endif %}
 Output Structure should be a valid JSON: Here is the sample Structure. Follow this exactly. Don't add or change the response JSON:
 ["Suggestion 1", "Suggestion 2", ... "Suggestion n"]
 Output only valid JSON. Do not include ```json ``` on start and end of the response.

backend/schemas/chat_schema.py

@@ -10,10 +10,10 @@ class ImproveSuggestionSchema(Schema):
     description=fields.String(required=True)
     type=fields.String(required=True)
     requirement=fields.String(required=True)
+    suggestions=fields.List(fields.String, required=True)
+    selectedSuggestion=fields.String(required=False)
     knowledgeBase=fields.String(required=False)
 
-
-
 class ConverseRequirementSchema(Schema):
     name=fields.String(required=True)
     description=fields.String(required=True)

ui/src/app/components/ai-chat/ai-chat.component.html

@@ -93,7 +93,7 @@
   </div>
 
   <!-- Suggestions Area -->
-  <div *ngIf="chatHistory.length == 0" class="flex-none bg-white px-6 py-4">
+  <div *ngIf="!responseStatus && !generateLoader" class="flex-none bg-white px-6 py-4">
     <!-- Loading State -->
     <div *ngIf="loadingChat" class="flex items-start gap-3 mb-3">
       <div class="flex-none bg-gray-100 rounded-full flex items-center justify-center w-10 h-10">
@@ -104,7 +104,7 @@
 
     <!-- Suggestions List -->
     <div *ngIf="!loadingChat && chatSuggestions.length > 0">
-      <div class="text-sm text-gray-600 font-medium mb-3">Suggestions to improve:</div>
+      <div class="text-sm text-gray-600 font-medium mb-3" *ngIf="chatHistory.length == 0">Suggestions to improve:</div>
       <ul class="flex flex-wrap gap-2">
         <li *ngFor="let suggestion of chatSuggestions"
           class="flex items-center gap-2 text-sm py-2 px-4 rounded-full bg-gray-100 shadow-sm hover:shadow-md cursor-pointer transition-shadow duration-200 border border-slate-200"
@@ -151,7 +151,7 @@
               placeholder="Chat to add or modify your requirement"
               [disabled]="generateLoader"
               [(ngModel)]="message"
-              class="w-full h-14 text-sm bg-transparent text-gray-700 focus:outline-none placeholder:text-gray-500 focus:outline-none focus:right-0 resize-none overflow-x-hidden overflow-y-auto transition-all duration-300 ease-in-out"
+              class="w-full h-14 text-sm bg-transparent text-gray-700 focus:outline-none placeholder:text-gray-500 focus:right-0 resize-none overflow-x-hidden overflow-y-auto transition-all duration-300 ease-in-out"
             ></textarea>
           </div>
 

ui/src/app/components/ai-chat/ai-chat.component.ts

@@ -97,8 +97,11 @@ export class AiChatComponent implements OnInit {
   projectId: string = '';
   message: string = '';
   chatSuggestions: Array<string> = [];
+  localSuggestions: Array<string> = [];
+  selectedSuggestion: string = '';
   generateLoader: boolean = false;
   loadingChat: boolean = false;
+  responseStatus: boolean = false;
   kb: string = '';
   isKbActive: boolean = false;
 
@@ -164,21 +167,32 @@ export class AiChatComponent implements OnInit {
         requirement: this.baseContent,
         knowledgeBase: this.kb,
       };
-      if (this.chatHistory.length == 0) this.getSuggestion();
+      this.getSuggestion();
     }, 1000);
   }
 
   getSuggestion() {
     this.loadingChat = true;
+    const suggestionPayload: suggestionPayload = {
+      ...this.basePayload,
+      requirement: this.baseContent,
+      suggestions: this.localSuggestions,
+      selectedSuggestion: this.selectedSuggestion,
+    };
     this.chatService
-    .generateSuggestions(this.basePayload).subscribe({
+    .generateSuggestions(suggestionPayload).subscribe({
       next: (response: Array<''>) => {
         this.chatSuggestions = response;
+        this.localSuggestions.push(...response);
         this.loadingChat = false;
+        this.responseStatus = false; 
+        this.smoothScroll();
       },
       error: (err) => {
         this.toastService.showError(ERROR_MESSAGES.GENERATE_SUGGESTIONS_FAILED);
         this.loadingChat = false;
+        this.responseStatus = false; 
+        this.smoothScroll();
       }
     });
   }
@@ -204,7 +218,7 @@ export class AiChatComponent implements OnInit {
         this.generateLoader = false;
         this.chatHistory = [...this.chatHistory, { assistant: response }];
         this.returnChatHistory();
-        this.smoothScroll();
+        this.getSuggestion();
       });
   }
 
@@ -226,6 +240,7 @@ export class AiChatComponent implements OnInit {
       chatHistory: this.chatHistory,
     };
     this.getContent.emit(data);
+    this.getSuggestion();
   }
 
   returnChatHistory() {
@@ -299,6 +314,9 @@ export class AiChatComponent implements OnInit {
   }
 
   converse(message: string) {
+    this.responseStatus = true;
+    this.selectedSuggestion = message;
+    this.chatSuggestions = []; 
     if (message || this.selectedFiles.length > 0) {
       this.generateLoader = true;
 
@@ -341,6 +359,7 @@ export class AiChatComponent implements OnInit {
       this.message = '';
       this.selectedFiles = [];
       this.selectedFilesContent = '';
+      this.responseStatus = false;
     }
   }
 
@@ -358,9 +377,6 @@ export class AiChatComponent implements OnInit {
       knowledgeBase: this.kb
     };
 
-    // Only refresh suggestions if we're at the initial state
-    if (this.chatHistory.length === 0) {
-      this.getSuggestion();
-    }
+    this.getSuggestion();    
   }
 }

ui/src/app/model/interfaces/chat.interface.ts

@@ -3,6 +3,8 @@ export interface suggestionPayload {
   description: string;
   type: string;
   requirement: string;
+  suggestions?: Array<string>;
+  selectedSuggestion?: string;
   knowledgeBase?: string;
 }