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

Author: igdmdimitrov

package-lock.json

@@ -59,7 +59,7 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "~2.2.3",
+    "@biomejs/biome": "~2.2.4",
     "@custom-elements-manifest/analyzer": "^0.10.5",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
@@ -81,7 +81,7 @@
     "globby": "^14.1.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.2.3",
-    "igniteui-theming": "^19.3.0",
+    "igniteui-theming": "^19.3.1",
     "keep-a-changelog": "^2.7.0",
     "lint-staged": "^16.1.6",
     "lit-analyzer": "^2.0.3",
@@ -91,11 +91,11 @@
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
-    "sass-embedded": "~1.78.0",
+    "sass-embedded": "~1.92.1",
     "sinon": "^21.0.0",
     "storybook": "^9.1.5",
     "stylelint": "^16.24.0",
-    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-prettier": "^5.0.3",
     "stylelint-scss": "^6.12.1",
     "ts-lit-plugin": "^2.0.2",

package.json

@@ -22,13 +22,15 @@ import type {
   ChatInputRenderContext,
   ChatRenderContext,
   ChatTemplateRenderer,
-  IgcMessageAttachment,
+  IgcChatMessageAttachment,
 } from './types.js';
 import { getChatAcceptedFiles, getIconName } from './utils.js';
 
 type DefaultInputRenderers = {
   input: ChatTemplateRenderer<ChatInputRenderContext>;
   inputActions: ChatTemplateRenderer<ChatRenderContext>;
+  inputActionsEnd: ChatTemplateRenderer<ChatRenderContext>;
+  inputActionsStart: ChatTemplateRenderer<ChatRenderContext>;
   inputAttachments: ChatTemplateRenderer<ChatInputRenderContext>;
   fileUploadButton: ChatTemplateRenderer<ChatRenderContext>;
   sendButton: ChatTemplateRenderer<ChatRenderContext>;
@@ -81,6 +83,8 @@ export default class IgcChatInputComponent extends LitElement {
     fileUploadButton: () => this._renderFileUploadButton(),
     input: () => this._renderTextArea(),
     inputActions: () => this._renderActionsArea(),
+    inputActionsEnd: () => nothing,
+    inputActionsStart: () => nothing,
     inputAttachments: (ctx) => this._renderAttachmentsArea(ctx.attachments),
     sendButton: () => this._renderSendButton(),
   });
@@ -213,7 +217,7 @@ export default class IgcChatInputComponent extends LitElement {
    * Renders the list of input attachments as chips.
    * @returns TemplateResult containing the attachments area
    */
-  private _renderAttachmentsArea(attachments: IgcMessageAttachment[]) {
+  private _renderAttachmentsArea(attachments: IgcChatMessageAttachment[]) {
     return html`${attachments?.map(
       (attachment, index) => html`
         <div part="attachment-wrapper" role="listitem">
@@ -314,7 +318,9 @@ export default class IgcChatInputComponent extends LitElement {
 
     return html`
       ${this._getRenderer('fileUploadButton')(ctx)}
+      ${this._getRenderer('inputActionsStart')(ctx)}
       ${this._getRenderer('sendButton')(ctx)}
+      ${this._getRenderer('inputActionsEnd')(ctx)}
     `;
   }
 

src/components/chat/chat-input.ts

@@ -19,7 +19,7 @@ import { styles as shared } from './themes/shared/chat-message/chat-message.comm
 import type {
   ChatMessageRenderContext,
   ChatTemplateRenderer,
-  IgcMessage,
+  IgcChatMessage,
 } from './types.js';
 import { chatMessageAdoptPageStyles } from './utils.js';
 
@@ -87,7 +87,7 @@ export default class IgcChatMessageComponent extends LitElement {
    * The chat message to render.
    */
   @property({ attribute: false })
-  public message?: IgcMessage;
+  public message?: IgcChatMessage;
 
   constructor() {
     super();

src/components/chat/chat-message.ts

@@ -7,9 +7,9 @@ import IgcTooltipComponent from '../tooltip/tooltip.js';
 import type IgcChatComponent from './chat.js';
 import type { IgcChatComponentEventMap } from './chat.js';
 import type {
+  IgcChatMessage,
+  IgcChatMessageAttachment,
   IgcChatOptions,
-  IgcMessage,
-  IgcMessageAttachment,
 } from './types.js';
 import {
   type ChatAcceptedFileTypes,
@@ -35,12 +35,12 @@ export class ChatState {
   private _actionsTooltip?: IgcTooltipComponent;
   private _actionToast?: IgcToastComponent;
   /** The current list of messages */
-  private _messages: IgcMessage[] = [];
+  private _messages: IgcChatMessage[] = [];
   /** Chat options/configuration */
   private _options?: IgcChatOptions;
 
   /** List of current input attachments */
-  private _inputAttachments: IgcMessageAttachment[] = [];
+  private _inputAttachments: IgcChatMessageAttachment[] = [];
   /** Current input text */
   private _inputValue = '';
   /**
@@ -77,14 +77,14 @@ export class ChatState {
   /**
    * Gets the list of chat messages.
    */
-  public get messages(): IgcMessage[] {
+  public get messages(): IgcChatMessage[] {
     return this._messages;
   }
 
   /**
    * Sets the list of chat messages.
    */
-  public set messages(value: IgcMessage[]) {
+  public set messages(value: IgcChatMessage[]) {
     this._messages = value;
   }
 
@@ -141,14 +141,14 @@ export class ChatState {
   /**
    * Gets the list of attachments currently attached to input.
    */
-  public get inputAttachments(): IgcMessageAttachment[] {
+  public get inputAttachments(): IgcChatMessageAttachment[] {
     return this._inputAttachments;
   }
 
   /**
    * Sets the input attachments and requests host update.
    */
-  public set inputAttachments(value: IgcMessageAttachment[]) {
+  public set inputAttachments(value: IgcChatMessageAttachment[]) {
     this._inputAttachments = value;
     this._userInputContextUpdateFn.call(this._host);
   }
@@ -188,7 +188,7 @@ export class ChatState {
     this._userInputContextUpdateFn = userInputContextUpdateFn;
   }
 
-  public isCurrentUserMessage(message?: IgcMessage): boolean {
+  public isCurrentUserMessage(message?: IgcChatMessage): boolean {
     return this.currentUserId === message?.sender;
   }
 
@@ -222,7 +222,7 @@ export class ChatState {
 
   //#endregion
 
-  protected _createMessage(message: Partial<IgcMessage>): IgcMessage {
+  protected _createMessage(message: Partial<IgcChatMessage>): IgcChatMessage {
     return {
       id: message.id ?? nanoid(),
       text: message.text ?? '',
@@ -232,7 +232,7 @@ export class ChatState {
     };
   }
 
-  public addMessage(message: Partial<IgcMessage>) {
+  public addMessage(message: Partial<IgcChatMessage>) {
     this.messages.push(this._createMessage(message));
     this._host.requestUpdate('messages');
   }
@@ -245,7 +245,7 @@ export class ChatState {
    * Clears input value and attachments on success.
    * @internal
    */
-  public addMessageWithEvent(message: Partial<IgcMessage>): void {
+  public addMessageWithEvent(message: Partial<IgcChatMessage>): void {
     const newMessage = this._createMessage(message);
 
     if (
@@ -266,7 +266,7 @@ export class ChatState {
    * @param files Array of File objects to attach
    */
   public attachFiles(files: File[]) {
-    const newAttachments: IgcMessageAttachment[] = [];
+    const newAttachments: IgcChatMessageAttachment[] = [];
     const fileNames = new Set(
       this.inputAttachments.map((attachment) => attachment.file?.name ?? '')
     );

src/components/chat/chat-state.ts

@@ -26,7 +26,7 @@ import {
 import { simulateFileUpload } from '../file-input/file-input.spec.js';
 import IgcInputComponent from '../input/input.js';
 import IgcChatComponent from './chat.js';
-import type { IgcMessage, IgcMessageAttachment } from './types.js';
+import type { IgcChatMessage, IgcChatMessageAttachment } from './types.js';
 
 describe('Chat', () => {
   before(() => {
@@ -52,7 +52,7 @@ describe('Chat', () => {
     `;
   };
 
-  const messageActionsTemplate = (msg: IgcMessage) => {
+  const messageActionsTemplate = (msg: IgcChatMessage) => {
     return msg.sender !== 'user' && msg.text.trim()
       ? html`
           <div style="float: right">
@@ -89,7 +89,9 @@ describe('Chat', () => {
     </div>
   `;
 
-  const textAreaAttachmentsTemplate = (attachments: IgcMessageAttachment[]) => {
+  const textAreaAttachmentsTemplate = (
+    attachments: IgcChatMessageAttachment[]
+  ) => {
     return html`
       <div>
         ${attachments.map(
@@ -108,7 +110,7 @@ describe('Chat', () => {
     `;
   };
 
-  const messages: IgcMessage[] = [
+  const messages: IgcChatMessage[] = [
     {
       id: '1',
       text: 'Hello! How can I help you today?',

src/components/chat/chat.spec.ts

@@ -23,9 +23,9 @@ import { all } from './themes/themes.js';
 import type {
   ChatRenderContext,
   ChatTemplateRenderer,
+  IgcChatMessage,
+  IgcChatMessageAttachment,
   IgcChatOptions,
-  IgcMessage,
-  IgcMessageAttachment,
 } from './types.js';
 
 type DefaultChatRenderers = {
@@ -40,22 +40,22 @@ export interface IgcChatComponentEventMap {
   /**
    * Dispatched when a new chat message is created (sent).
    */
-  igcMessageCreated: CustomEvent<IgcMessage>;
+  igcMessageCreated: CustomEvent<IgcChatMessage>;
 
   /**
    * Dispatched when a message is reacted to.
    */
-  igcMessageReact: CustomEvent<{ message: IgcMessage; reaction: string }>;
+  igcMessageReact: CustomEvent<{ message: IgcChatMessage; reaction: string }>;
 
   /**
    * Dispatched when a chat message attachment is clicked.
    */
-  igcAttachmentClick: CustomEvent<IgcMessageAttachment>;
+  igcAttachmentClick: CustomEvent<IgcChatMessageAttachment>;
 
   /**
    * Dispatched when an attachment is changed (e.g., updated or removed).
    */
-  igcAttachmentChange: CustomEvent<IgcMessageAttachment>;
+  igcAttachmentChange: CustomEvent<IgcChatMessageAttachment>;
 
   /**
    * Dispatched during an attachment drag operation.
@@ -188,11 +188,11 @@ export default class IgcChatComponent extends EventEmitterMixin<
    * Use this property to set or update the message history.
    */
   @property({ attribute: false })
-  public set messages(value: IgcMessage[]) {
+  public set messages(value: IgcChatMessage[]) {
     this._state.messages = value;
   }
 
-  public get messages(): IgcMessage[] {
+  public get messages(): IgcChatMessage[] {
     return this._state.messages;
   }
 
@@ -203,7 +203,7 @@ export default class IgcChatComponent extends EventEmitterMixin<
   @property({ attribute: false })
   public set draftMessage(value: {
     text: string;
-    attachments?: IgcMessageAttachment[];
+    attachments?: IgcChatMessageAttachment[];
   }) {
     if (this._state && value) {
       this._state.inputValue = value.text;
@@ -214,7 +214,7 @@ export default class IgcChatComponent extends EventEmitterMixin<
 
   public get draftMessage(): {
     text: string;
-    attachments?: IgcMessageAttachment[];
+    attachments?: IgcChatMessageAttachment[];
   } {
     return {
       text: this._state.inputValue,
@@ -267,15 +267,15 @@ export default class IgcChatComponent extends EventEmitterMixin<
   }
 
   // REVIEW
-  public addMessage(message: Partial<IgcMessage>): IgcMessage {
+  public addMessage(message: Partial<IgcChatMessage>): IgcChatMessage {
     this._state.addMessage(message);
     return last(this.messages);
   }
 
   // REVIEW
   public updateMessage(
-    message: IgcMessage,
-    data: Partial<IgcMessage>,
+    message: IgcChatMessage,
+    data: Partial<IgcChatMessage>,
     scrollIntoView = false
   ) {
     Object.assign(message, data);

src/components/chat/chat.ts

@@ -3,7 +3,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { Marked } from 'marked';
 import markedShiki from 'marked-shiki';
 import { bundledThemes, createHighlighter } from 'shiki/bundle/web';
-import type { IgcMessage } from '../types.js';
+import type { IgcChatMessage } from '../types.js';
 
 const DEFAULT_LANGUAGES = ['javascript', 'typescript', 'html', 'css'];
 const DEFAULT_THEME = {
@@ -79,7 +79,7 @@ export async function createMarkdownRenderer(
     );
   }
 
-  return async (message: IgcMessage): Promise<unknown> => {
+  return async (message: IgcChatMessage): Promise<unknown> => {
     return message.text
       ? unsafeHTML(sanitizer(await markdown.parse(message.text)))
       : '';