Merge branch 'master' of https://github.com/IgniteUI/igniteui-webcomponents into dmdimitrov/chat-ai-component

Author: teodosiah

.gitignore

@@ -30,3 +30,7 @@ custom-elements.json
 
 # Localization data
 i18nRepo
+
+# Development environment
+.envrc
+.direnv

package-lock.json

@@ -50,7 +50,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.13",
+    "@floating-ui/dom": "^1.7.0",
     "@lit-labs/virtualizer": "^2.1.0",
     "@lit/context": "^1.1.5",
     "lit": "^3.3.0"
@@ -60,10 +60,10 @@
     "@custom-elements-manifest/analyzer": "^0.10.4",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^9.0.0-beta.6",
-    "@storybook/addon-docs": "^9.0.0-beta.6",
-    "@storybook/addon-links": "^9.0.0-beta.6",
-    "@storybook/web-components-vite": "^9.0.0-beta.6",
+    "@storybook/addon-a11y": "^9.0.0-rc.0",
+    "@storybook/addon-docs": "^9.0.0-rc.0",
+    "@storybook/addon-links": "^9.0.0-rc.0",
+    "@storybook/web-components-vite": "^9.0.0-rc.0",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.1",
@@ -79,7 +79,7 @@
     "ig-typedoc-theme": "^6.0.0",
     "igniteui-theming": "^17.2.0",
     "keep-a-changelog": "^2.6.2",
-    "lint-staged": "^15.5.1",
+    "lint-staged": "^16.0.0",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
@@ -89,17 +89,17 @@
     "rimraf": "^6.0.1",
     "sass-embedded": "~1.78.0",
     "sinon": "^20.0.0",
-    "storybook": "^9.0.0-beta.6",
+    "storybook": "^9.0.0-rc.0",
     "stylelint": "^16.19.1",
-    "stylelint-config-standard-scss": "^14.0.0",
+    "stylelint-config-standard-scss": "^15.0.0",
     "stylelint-prettier": "^5.0.3",
-    "stylelint-scss": "^6.11.1",
+    "stylelint-scss": "^6.12.0",
     "ts-lit-plugin": "^2.0.2",
     "tslib": "^2.8.1",
     "typedoc": "~0.27.9",
     "typedoc-plugin-localization": "^3.0.6",
     "typescript": "^5.8.3",
-    "vite": "^6.3.4"
+    "vite": "^6.3.5"
   },
   "peerDependencies": {
     "marked": "^12.0.0"

package.json

@@ -16,7 +16,7 @@ import {
 
 /**
  *
- * @element igc-chat
+ * @element igc-chat-input
  *
  */
 export default class IgcChatInputComponent extends LitElement {

src/components/chat/chat-input.ts

@@ -7,10 +7,11 @@ import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import IgcChatInputComponent from './chat-input.js';
 import IgcChatMessageListComponent from './chat-message-list.js';
 import { styles } from './themes/chat.base.css.js';
-import type { IgcMessage } from './types.js';
+import type { IgcMessage, IgcMessageAttachment } from './types.js';
 
 export interface IgcChatComponentEventMap {
   igcMessageSend: CustomEvent<IgcMessage>;
+  igcAttachmentClick: CustomEvent<IgcMessageAttachment>;
 }
 
 /**
@@ -64,6 +65,10 @@ export default class IgcChatComponent extends EventEmitterMixin<
       'message-send',
       this.handleSendMessage as EventListener
     );
+    this.addEventListener(
+      'attachment-click',
+      this.handleAttachmentClick as EventListener
+    );
   }
 
   public override disconnectedCallback() {
@@ -72,6 +77,10 @@ export default class IgcChatComponent extends EventEmitterMixin<
       'message-send',
       this.handleSendMessage as EventListener
     );
+    this.removeEventListener(
+      'attachment-click',
+      this.handleAttachmentClick as EventListener
+    );
   }
 
   private handleSendMessage(e: CustomEvent) {
@@ -92,6 +101,11 @@ export default class IgcChatComponent extends EventEmitterMixin<
     this.emitEvent('igcMessageSend', { detail: newMessage });
   }
 
+  private handleAttachmentClick(e: CustomEvent) {
+    const attachmentArgs = e.detail.attachment;
+    this.emitEvent('igcAttachmentClick', { detail: attachmentArgs });
+  }
+
   protected override render() {
     return html`
       <div class="chat-container">
@@ -101,7 +115,7 @@ export default class IgcChatComponent extends EventEmitterMixin<
             <slot name="title" part="title">${this.headerText}</slot>
           </div>
           <slot name="actions" class="actions">
-            <igc-button variant="flat">⋯</igcbutton>
+            <igc-button variant="flat">⋯</igc-button>
           </slot>
         </div>
         <igc-chat-message-list

src/components/chat/chat.ts

@@ -64,10 +64,21 @@ export class IgcMessageAttachmentsComponent extends LitElement {
     this.previewImage = '';
   }
 
-  private preventToggle(e: CustomEvent) {
+  private handleToggle(e: CustomEvent, attachment: IgcMessageAttachment) {
+    this.handleAttachmentClick(attachment);
     e.preventDefault();
   }
 
+  private handleAttachmentClick(attachment: IgcMessageAttachment) {
+    this.dispatchEvent(
+      new CustomEvent('attachment-click', {
+        detail: { attachment },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   protected override render() {
     return html`
       <div class="attachments-container">
@@ -76,8 +87,10 @@ export class IgcMessageAttachmentsComponent extends LitElement {
             <igc-expansion-panel
               indicator-position="none"
               .open=${attachment.type === 'image'}
-              @igcClosing=${this.preventToggle}
-              @igcOpening=${this.preventToggle}
+              @igcClosing=${(ev: CustomEvent) =>
+                this.handleToggle(ev, attachment)}
+              @igcOpening=${(ev: CustomEvent) =>
+                this.handleToggle(ev, attachment)}
             >
               <div slot="title" class="attachment">
                 <div class="details">

src/components/chat/message-attachments.ts

@@ -53,7 +53,7 @@
     border-radius: 18px;
     background-color: #E5E5EA;
     color: black;
-    word-break: break-word;
+    word-break: break-all;
     font-weight: 400;
     line-height: 1.4;
     position: relative;

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

@@ -4,14 +4,14 @@ import {
   isServer,
 } from 'lit';
 
-type ResizeControllerCallback = (
+type ResizeObserverControllerCallback = (
   ...args: Parameters<ResizeObserverCallback>
 ) => unknown;
 
 /** Configuration for initializing a resize controller. */
-export interface ResizeControllerConfig {
+export interface ResizeObserverControllerConfig {
   /** The callback function to run when a resize mutation is triggered. */
-  callback: ResizeControllerCallback;
+  callback: ResizeObserverControllerCallback;
   /** Configuration options passed to the underlying ResizeObserver. */
   options?: ResizeObserverOptions;
   /**
@@ -23,15 +23,15 @@ export interface ResizeControllerConfig {
   target?: Element | null;
 }
 
-class ResizeController implements ReactiveController {
+class ResizeObserverController implements ReactiveController {
   private readonly _host: ReactiveControllerHost & Element;
   private readonly _targets = new Set<Element>();
   private readonly _observer!: ResizeObserver;
-  private readonly _config: ResizeControllerConfig;
+  private readonly _config: ResizeObserverControllerConfig;
 
   constructor(
     host: ReactiveControllerHost & Element,
-    config: ResizeControllerConfig
+    config: ResizeObserverControllerConfig
   ) {
     this._host = host;
     this._config = config;
@@ -80,11 +80,11 @@ class ResizeController implements ReactiveController {
 
 /**
  * Creates a new resize controller bound to the given `host`
- * with {@link ResizeControllerConfig | `config`}.
+ * with {@link ResizeObserverControllerConfig | `config`}.
  */
-export function createResizeController(
+export function createResizeObserverController(
   host: ReactiveControllerHost & Element,
-  config: ResizeControllerConfig
-): ResizeController {
-  return new ResizeController(host, config);
+  config: ResizeObserverControllerConfig
+): ResizeObserverController {
+  return new ResizeObserverController(host, config);
 }

src/components/common/controllers/resize-observer.ts

@@ -22,7 +22,7 @@ import {
   type MutationControllerParams,
   createMutationController,
 } from '../common/controllers/mutation-observer.js';
-import { createResizeController } from '../common/controllers/resize-observer.js';
+import { createResizeObserverController } from '../common/controllers/resize-observer.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
@@ -86,7 +86,7 @@ export default class IgcTabsComponent extends EventEmitterMixin<
 
   //#region Private state & properties
 
-  private readonly _resizeController = createResizeController(this, {
+  private readonly _resizeController = createResizeObserverController(this, {
     callback: this._resizeCallback,
     options: { box: 'border-box' },
     target: null,

src/components/tabs/tabs.ts

@@ -21,7 +21,7 @@
     position: relative;
     z-index: map.get($tabs-z-index, 'header');
     grid-row: 1;
-    word-break: break-word;
+    overflow-wrap: anywhere;
     transition:
         background-color $transition,
         color $transition;