feat(chat): focus styles and improvements

Author: SisIvanova

src/components/chat/chat-input.ts

@@ -1,6 +1,7 @@
 import { consume } from '@lit/context';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { query, state } from 'lit/decorators.js';
+import { addThemingController } from '../../theming/theming-controller.js';
 import IgcIconButtonComponent from '../button/icon-button.js';
 import IgcChipComponent from '../chip/chip.js';
 import { chatContext } from '../common/context.js';
@@ -12,6 +13,8 @@ import { registerIconFromText } from '../icon/icon.registry.js';
 import IgcTextareaComponent from '../textarea/textarea.js';
 import type { ChatState } from './chat-state.js';
 import { styles } from './themes/input.base.css.js';
+import { all } from './themes/input.js';
+import { styles as shared } from './themes/shared/input/input.common.css.js';
 import { attachmentIcon, sendButtonIcon } from './types.js';
 
 /**
@@ -46,7 +49,7 @@ import { attachmentIcon, sendButtonIcon } from './types.js';
 export default class IgcChatInputComponent extends LitElement {
   public static readonly tagName = 'igc-chat-input';
 
-  public static override styles = styles;
+  public static override styles = [styles, shared];
 
   @consume({ context: chatContext, subscribe: true })
   private _chatState?: ChatState;
@@ -82,6 +85,7 @@ export default class IgcChatInputComponent extends LitElement {
 
   constructor() {
     super();
+    addThemingController(this, all);
     registerIconFromText('attachment', attachmentIcon, 'material');
     registerIconFromText('send-message', sendButtonIcon, 'material');
   }
@@ -164,7 +168,7 @@ export default class IgcChatInputComponent extends LitElement {
     const target = e.target as HTMLTextAreaElement;
     this.inputValue = target.value;
     this._chatState?.handleInputChange(this.inputValue);
-    this.adjustTextareaHeight();
+    // this.adjustTextareaHeight();
   }
 
   private handleKeyDown(e: KeyboardEvent) {
@@ -263,14 +267,14 @@ export default class IgcChatInputComponent extends LitElement {
     this.requestUpdate();
   }
 
-  private adjustTextareaHeight() {
-    const textarea = this.textInputElement;
-    if (!textarea) return;
+  // private adjustTextareaHeight() {
+  //   const textarea = this.textInputElement;
+  //   if (!textarea) return;
 
-    textarea.style.height = 'auto';
-    const newHeight = Math.min(textarea.scrollHeight, 120);
-    textarea.style.height = `${newHeight}px`;
-  }
+  //   textarea.style.height = 'auto';
+  //   const newHeight = Math.min(textarea.scrollHeight, 120);
+  //   textarea.style.height = `${newHeight}px`;
+  // }
 
   private sendMessage() {
     if (

src/components/chat/chat-message-list.ts

@@ -14,6 +14,7 @@ import { registerComponent } from '../common/definitions/register.js';
 import IgcChatMessageComponent from './chat-message.js';
 import type { ChatState } from './chat-state.js';
 import { styles } from './themes/message-list.base.css.js';
+import { styles as shared } from './themes/shared/message-list.common.css.js';
 import type { IgcMessage } from './types.js';
 
 /**
@@ -38,7 +39,7 @@ export default class IgcChatMessageListComponent extends LitElement {
   public static readonly tagName = 'igc-chat-message-list';
 
   /** Styles applied to the component */
-  public static override styles = styles;
+  public static override styles = [styles, shared];
 
   /**
    * Consumed chat state context providing messages, options, and user data.

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

@@ -24,7 +24,13 @@ igc-chat-message-list,
 [part='suggestions-container'] {
   max-width: rem(760px);
   width: 100%;
-  margin-inline: rem(16px);
+  // margin-inline: rem(16px);
+}
+
+[part='suggestions-header'] {
+  @include type-style('subtitle-2') {
+    margin: 0;
+  };
 }
 
 [part='empty-state'] {

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

@@ -18,17 +18,6 @@
     gap: rem(8px);
 }
 
-// should be changed when the design is ready
-[part~='dragging'] {
-    igc-textarea::part(container) {    
-        background: color(gray, 300);
-
-        &::after {
-            border-block-end: rem(2px) solid color(primary, 500);
-        }
-    }
-}
-
 [part='buttons-container'] {
     display: flex;
     align-items: center;
@@ -43,12 +32,20 @@
     gap: rem(8px);
 }
 
+igc-textarea::part(input) {
+    // maximum eight lines
+    max-height: rem(216px);
+    overflow-y: auto;
+}
+
 igc-file-input {
     width: fit-content;
     margin-inline-end: auto;
 }
 
-igc-file-input::part(file-names) {
+igc-file-input::part(file-names),
+igc-file-input::part(start),
+igc-file-input::part(end) {
     display: none;
 }
 

src/components/chat/themes/input.ts

@@ -0,0 +1,40 @@
+import { css } from 'lit';
+
+import type { Themes } from '../../../theming/types.js';
+// Shared Styles
+import { styles as bootstrap } from './shared/input/input.bootstrap.css.js';
+import { styles as fluent } from './shared/input/input.fluent.css.js';
+import { styles as indigo } from './shared/input/input.indigo.css.js';
+import { styles as material } from './shared/input/input.material.css.js';
+
+const light = {
+  bootstrap: css`
+    ${bootstrap}
+  `,
+  fluent: css`
+    ${fluent}
+  `,
+  indigo: css`
+    ${indigo}
+  `,
+  material: css`
+    ${material}
+  `,
+};
+
+const dark = {
+  bootstrap: css`
+    ${bootstrap}
+  `,
+  fluent: css`
+    ${fluent}
+  `,
+  indigo: css`
+    ${indigo}
+  `,
+  material: css`
+    ${material}
+  `,
+};
+
+export const all: Themes = { light, dark };

src/components/chat/themes/light/_themes.scss

@@ -1,8 +1,22 @@
+@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/chat' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
 $base: digest-schema($light-chat);
-$material: digest-schema($material-chat);
-$bootstrap: digest-schema($bootstrap-chat);
-$fluent: digest-schema($fluent-chat);
-$indigo: digest-schema($indigo-chat);
+$material: map.merge(digest-schema($material-chat), (
+    box-background-focus: map.get(input-theme.$material, 'box-background-focus'),
+    focused-bottom-line-color: map.get(input-theme.$material, 'focused-bottom-line-color')
+));
+$bootstrap: map.merge(digest-schema($bootstrap-chat), (
+    focused-border-color: map.get(input-theme.$bootstrap, 'focused-border-color'),
+    focused-secondary-color: map.get(input-theme.$bootstrap, 'focused-secondary-color')
+));
+$fluent: map.merge(digest-schema($fluent-chat), (
+    focused-border-color: map.get(input-theme.$fluent, 'focused-border-color'),
+));
+$indigo: map.merge(digest-schema($indigo-chat), (
+    box-background-hover: map.get(input-theme.$indigo, 'box-background-hover'),
+    focused-bottom-line-color: map.get(input-theme.$indigo, 'focused-bottom-line-color'),
+    focused-text-color: map.get(input-theme.$indigo, 'focused-text-color')
+));

src/components/chat/themes/message-attachments.base.scss

@@ -3,116 +3,53 @@
 
 :host {
     display: block;
-    margin-top: 0.5rem;
 }
 
-.attachments-container {
+[part='attachments-container'] {
+    display: flex;
     flex-wrap: wrap;
-    gap: 0.5rem;
+    gap: rem(16px);
 }
 
-.attachment-preview {
-    position: relative;
-    border-radius: 0.375rem;
+[part='attachment'] {
+    flex: 1 1;
+    border-radius: rem(4px);
     overflow: hidden;
-    max-width: 200px;
+    min-width: rem(80px);
+    max-width: rem(400px);
 }
 
-.image-attachment {
-    max-width: 250px;
-    max-height: 250px;
-    object-fit: cover;
-    cursor: pointer;
-    border-radius: 0.375rem;
+[part='attachment-header'] {
+    padding: rem(8px) rem(12px) rem(8px) rem(16px);
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
 }
 
-.file-attachment {
+[part='attachment-content'] {
     display: flex;
-    align-items: center;
-    padding: 0.5rem;
-    background-color: var(--gray-100);
-    border-radius: 0.375rem;
-    max-width: 200px;
-}
-
-.file-icon {
-    margin-right: 0.5rem;
-    color: var(--gray-600);
-}
-
-.file-info {
-    overflow: hidden;
-}
-
-.file-name {
-    font-size: 0.75rem;
-    font-weight: 500;
-    white-space: nowrap;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    max-height: rem(240px);
     overflow: hidden;
-    text-overflow: ellipsis;
-    color: var(--gray-800);
-}
-
-.file-size {
-    font-size: 0.625rem;
-    color: var(--gray-500);
-}
-
-.image-overlay {
-    position: fixed;
-    inset: 0;
-    background-color: #1f1f1f;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
 }
 
-.overlay-image {
-    max-width: 90%;
-    max-height: 90%;
+[part='image-attachment'] {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    object-fit: cover;
 }
 
-.close-overlay {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    color: white;
-    background: #1f1f1f;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
+[part='details'] {
     display: flex;
     align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border: none;
-}
-
-.close-overlay:hover {
-    background: #1f1f1f;
+    gap: rem(8px);
 }
 
-.large {
-    --ig-size: var(--ig-size-large);
-}
+[part='file-name'] {
+    @include type-style('body-2') {
+        margin: 0;
+    };
 
-.actions {
-    display: flex;
+    @include ellipsis();
 }
-
-.attachment {
-    display: flex;
-    justify-content: space-between;    
-    gap: 2rem;
-}
-
-.details {
-    display: flex;
-    align-items: center;
-    gap: 0.2rem;
-}
-
-igc-expansion-panel{
-    width: 100%;
-}