feat(chat): expose inputPlaceholder option

Author: teodosiah

src/components/chat/chat-input.ts

@@ -74,6 +74,9 @@ export default class IgcChatInputComponent extends LitElement {
   @state()
   private inputValue = '';
 
+  @state()
+  private inputPlaceholder = '';
+
   @state()
   private dragClass = '';
 
@@ -98,7 +101,7 @@ export default class IgcChatInputComponent extends LitElement {
   public get defaultTextArea(): TemplateResult {
     return html` <igc-textarea
       part="text-input"
-      placeholder="Type a message..."
+      .placeholder=${this.inputPlaceholder}
       resize="auto"
       rows="1"
       .value=${this.inputValue}
@@ -154,6 +157,7 @@ export default class IgcChatInputComponent extends LitElement {
 
   protected override updated() {
     this.inputValue = this._chatState?.inputValue || '';
+    this.inputPlaceholder = this._chatState?.options?.inputPlaceholder || '';
   }
 
   private handleInput(e: Event) {

src/components/chat/chat.spec.ts

@@ -213,7 +213,6 @@ describe('Chat', () => {
                     <div part="input-wrapper">
                         <igc-textarea
                         part="text-input"
-                        placeholder="Type a message..."
                         resize="auto"
                         rows="1"
                         >
@@ -414,6 +413,18 @@ describe('Chat', () => {
       );
     });
 
+    it('should apply `inputPlaceholder` correctly', async () => {
+      chat.options = {
+        inputPlaceholder: 'Type message here...',
+      };
+      await elementUpdated(chat);
+
+      const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
+      const textArea = inputArea?.shadowRoot?.querySelector('igc-textarea');
+
+      expect(textArea?.placeholder).to.equal('Type message here...');
+    });
+
     it('should render suggestions', async () => {
       chat.options = {
         suggestions: ['Suggestion 1', 'Suggestion 2'],
@@ -492,7 +503,6 @@ describe('Chat', () => {
                     <div part="input-wrapper">
                         <igc-textarea
                         part="text-input"
-                        placeholder="Type a message..."
                         resize="auto"
                         rows="1"
                         >
@@ -570,7 +580,6 @@ describe('Chat', () => {
             <div part="input-wrapper">
               <igc-textarea
                 part="text-input"
-                placeholder="Type a message..."
                 resize="auto"
                 rows="1"
               >

src/components/chat/types.ts

@@ -125,6 +125,11 @@ export type IgcChatOptions = {
    * Optional header text to display at the top of the chat component.
    */
   headerText?: string;
+  /**
+   * Optional placeholder text for the chat input area.
+   * Provides a hint to the user about what they can type (e.g. "Type a message...").
+   */
+  inputPlaceholder?: string;
   /**
    * Suggested text snippets or quick replies that can be shown as user-selectable options.
    */

stories/chat.stories.ts

@@ -17,7 +17,6 @@ const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
 const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
 const supabase = createClient(supabaseUrl, supabaseKey);
 
-const googleGenAIKey = import.meta.env.VITE_GOOGLE_GEN_AI_KEY;
 const ai = new GoogleGenAI({
   apiKey: googleGenAIKey,
 });
@@ -133,6 +132,7 @@ const _customRenderer = (text: string) =>
 
 const ai_chat_options = {
   headerText: 'Chat',
+  inputPlaceholder: 'Type your message here...',
   suggestions: ['Hello', 'Hi', 'Generate an image of a pig!'],
   templates: {
     // messageActionsTemplate: messageActionsTemplate,