feat(chat): Add customizable chat height via --igc-chat-height variable

-- Make sure we dont directly target host component tags

Author: desig9stein

src/components/chat/chat.ts

@@ -317,7 +317,8 @@ export default class IgcChatComponent extends EventEmitterMixin<
           ? html`<div part="empty-state">
               <slot name="empty-state"> </slot>
             </div>`
-          : html`<igc-chat-message-list> </igc-chat-message-list>`}
+          : html`<igc-chat-message-list part="chat-messages">
+            </igc-chat-message-list>`}
         ${hasSuggestions &&
         this._chatState.suggestionsPosition === 'below-messages'
           ? this.renderSuggestions()

src/components/chat/themes/chat.base.scss

@@ -4,8 +4,10 @@
 $inline-inset: rem(16px);
 
 :host {
+  --igc-chat-height: 100%;
+
   width: 100%;
-  height: 100vh;
+  height: var(--igc-chat-height);
   overflow: hidden;
   box-shadow: var(--ig-elevation-24);
   display: flex;
@@ -20,7 +22,7 @@ $inline-inset: rem(16px);
   gap: rem(24px);
 }
 
-igc-chat-message-list,
+[part='chat-messages'],
 [part='empty-state'],
 [part='suggestions-container'] {
   max-width: calc(rem(760px) + $inline-inset * 2);

stories/chat.stories.ts

@@ -573,6 +573,7 @@ export const Basic: Story = {
     messages = initialMessages;
     return html`
       <igc-chat
+        style="--igc-chat-height: calc(100vh - 32px);"
         .messages=${messages}
         .options=${chat_options}
         @igcMessageCreated=${handleMessageSend}
@@ -593,13 +594,18 @@ export const Supabase: Story = {
     });
   },
   render: () => html`
-    <igc-chat @igcMessageCreated=${handleMessageCreatedSupabase}> </igc-chat>
+    <igc-chat
+      style="--igc-chat-height: calc(100vh - 32px);"
+      @igcMessageCreated=${handleMessageCreatedSupabase}
+    >
+    </igc-chat>
   `,
 };
 
 export const AI: Story = {
   render: () => html`
     <igc-chat
+      style="--igc-chat-height: calc(100vh - 32px);"
       .draftMessage=${draftMessage}
       .options=${ai_chat_options}
       @igcMessageCreated=${handleAIMessageSend}
@@ -637,6 +643,7 @@ export const Chat_Templates: Story = {
     messages = [];
     return html`
       <igc-chat
+        style="--igc-chat-height: calc(100vh - 32px);"
         .messages=${messages}
         .options=${options}
         @igcMessageCreated=${handleMessageSend}