feat(chat-ai): add support for streaming response parts

Author: igdmdimitrov

src/components/chat/chat-input.ts

@@ -67,7 +67,9 @@ export default class IgcChatInputComponent extends LitElement {
   private handleKeyDown(e: KeyboardEvent) {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
-      this.sendMessage();
+      if (!this.isAiResponding) {
+        this.sendMessage();
+      }
     }
   }
 
@@ -156,8 +158,8 @@ export default class IgcChatInputComponent extends LitElement {
             collection="material"
             variant="contained"
             class="small"
-            ?disabled=${!this.inputValue.trim() &&
-            this.attachments.length === 0}
+            ?disabled=${this.isAiResponding ||
+            (!this.inputValue.trim() && this.attachments.length === 0)}
             @click=${this.sendMessage}
           ></igc-icon-button>
         </div>

src/components/chat/chat-message.ts

@@ -33,10 +33,6 @@ export default class IgcChatMessageComponent extends LitElement {
   @property({ reflect: true, attribute: false })
   public isResponse = false;
 
-  private formatTime(date: Date | undefined): string | undefined {
-    return date?.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-  }
-
   protected override render() {
     const containerClass = `message-container ${!this.isResponse ? 'sent' : ''}`;
 

src/components/chat/chat.ts

@@ -83,6 +83,39 @@ export default class IgcChatComponent extends EventEmitterMixin<
     );
   }
 
+  /** Starts the response */
+  public startResponse() {
+    this.isAiResponding = true;
+  }
+
+  /** Show response part. */
+  public showResponsePart(part: string) {
+    if (!this.isAiResponding) {
+      return false;
+    }
+
+    let responseMessage = this.messages[this.messages.length - 1];
+    responseMessage = {
+      ...responseMessage,
+      text: `${responseMessage.text} ${part}`,
+    };
+    this.messages[this.messages.length - 1] = responseMessage;
+    this.messages = [...this.messages];
+
+    return true;
+  }
+
+  /** Ends the response */
+  public endResponse(attachments?: IgcMessageAttachment[]) {
+    this.isAiResponding = false;
+
+    const response = this.messages[this.messages.length - 1];
+    response.timestamp = new Date();
+    if (attachments) {
+      response.attachments = attachments;
+    }
+  }
+
   private handleSendMessage(e: CustomEvent) {
     const text = e.detail.text;
     const attachments = e.detail.attachments || [];

stories/chat.stories.ts

@@ -59,7 +59,7 @@ type Story = StoryObj<IgcChatArgs>;
 
 // endregion
 
-const messages: any[] = [
+let messages: any[] = [
   {
     id: '1',
     text: "Hello! I'm an AI assistant created with Lit. How can I help you today?",
@@ -76,21 +76,32 @@ function handleMessageSend(e: CustomEvent) {
     return;
   }
 
+  // create empty response
+  const emptyResponse = {
+    id: Date.now().toString(),
+    text: '',
+    isResponse: true,
+    timestamp: new Date(),
+    attachments: [],
+  };
+  messages = [...messages, emptyResponse];
   chat.messages = [...messages];
 
-  chat.isAiResponding = true;
+  chat.startResponse();
   setTimeout(() => {
-    const aiResponse = {
-      id: (Date.now() + 1).toString(),
-      text: generateAIResponse(e.detail.text),
-      isResponse: true,
-      timestamp: new Date(),
-    };
-
-    chat.isAiResponding = false;
-    chat.messages = [...messages, aiResponse];
-    messages.push(aiResponse);
-  }, 1500);
+    const responseParts = generateAIResponse(e.detail.text).split(' ');
+    showResponse(chat, responseParts).then(() => {
+      messages = chat.messages;
+      chat.endResponse();
+    });
+  }, 1000);
+}
+
+async function showResponse(chat: any, responseParts: any) {
+  for (let i = 0; i < responseParts.length; i++) {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    chat.showResponsePart(responseParts[i]);
+  }
 }
 
 function generateAIResponse(message: string): string {
@@ -117,6 +128,17 @@ function generateAIResponse(message: string): string {
   if (lowerMessage.includes('list') || lowerMessage.includes('items')) {
     return "Here's an example of a list:\n\n- First item\n- Second item\n- Third item with **bold text**";
   }
+  if (lowerMessage.includes('heading') || lowerMessage.includes('headings')) {
+    return `Here's how you can use different headings in Markdown:
+
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+`;
+  }
 
   return 'Thanks for your message. This is a demonstration of a chat interface built with Lit components. Feel free to ask about features or try different types of messages!';
 }