igniteui-webcomponents 6.3.0-alpha.0 → 6.3.0-alpha.1

package/components/chat/chat-state.js

@@ -1,15 +1,56 @@
+import { html, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { enterKey } from '../common/controllers/key-bindings.js';
+import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
+import { partMap } from '../common/part-map.js';
+import { registerIconFromText } from '../icon/icon.registry.js';
+import { DefaultChatRenderer } from './chat-renderer.js';
+import { PlainTextRenderer } from './plain-text-renderer.js';
+import { copyIcon, regenerateIcon, thumbDownIcon, thumbUpIcon, } from './types.js';
 export class ChatState {
-    get sortedMessagesIds() {
-        return this._sortedMessages.map((m) => m.id);
+    get _sharedTooltip() {
+        return this._sharedTooltipRef?.value;
+    }
+    getIconName(fileType) {
+        if (fileType?.startsWith('image')) {
+            return 'file-image';
+        }
+        return 'file-document';
+    }
+    renderDefaultAttachmentHeaderText(attachment, message) {
+        return html `
+      ${html `${message.sender !== this.currentUserId
+            ? html `${attachment.type === 'image' ||
+                attachment.file?.type.startsWith('image/')
+                ? html `<igc-icon
+                  name="image"
+                  collection="material"
+                  part="attachment-icon"
+                ></igc-icon>`
+                : html `<igc-icon
+                  name="file"
+                  collection="material"
+                  part="attachment-icon"
+                ></igc-icon>`}`
+            : nothing} <span part="file-name">${attachment.name}</span>`}
+    `;
+    }
+    handleHeaderClick(attachment) {
+        this.emitEvent('igcAttachmentClick', { detail: attachment });
+    }
+    showTooltip(ev, text) {
+        if (!this._sharedTooltip)
+            return;
+        this._sharedTooltip.message = text;
+        this._sharedTooltip.hideDelay = 300;
+        this._sharedTooltip.show(ev.composedPath()[0]);
     }
     get messages() {
         return this._messages;
     }
     set messages(value) {
         this._messages = value;
-        this._sortedMessages = value.slice().sort((a, b) => {
-            return a.timestamp.getTime() - b.timestamp.getTime();
-        });
         this._host.requestUpdate();
     }
     get options() {
@@ -18,6 +59,9 @@ export class ChatState {
     set options(value) {
         this._options = value;
         this._host.requestUpdate();
+        if (this._host.updateContextValue) {
+            this._host.updateContextValue();
+        }
     }
     get currentUserId() {
         return this._options?.currentUserId ?? 'user';
@@ -25,18 +69,27 @@ export class ChatState {
     get suggestionsPosition() {
         return this._options?.suggestionsPosition ?? this._suggestionsPosition;
     }
+    get stopTypingDelay() {
+        return this._options?.stopTypingDelay ?? this._stopTypingDelay;
+    }
     get textArea() {
         return this._textArea;
     }
     set textArea(value) {
         this._textArea = value;
     }
+    get textAreaRef() {
+        return this._textAreaRef;
+    }
     get inputAttachments() {
         return this._inputAttachments;
     }
     set inputAttachments(value) {
         this._inputAttachments = value;
         this._host.requestUpdate();
+        if (this._host.updateContextValue) {
+            this._host.updateContextValue();
+        }
     }
     get inputValue() {
         return this._inputValue;
@@ -44,43 +97,397 @@ export class ChatState {
     set inputValue(value) {
         this._inputValue = value;
         this._host.requestUpdate();
+        if (this._host.updateContextValue) {
+            this._host.updateContextValue();
+        }
+    }
+    get defaultTemplates() {
+        return this._defaultTemplates;
+    }
+    set defaultTemplates(templates) {
+        this._defaultTemplates = { ...templates };
+    }
+    get mergedTemplates() {
+        return { ...this._defaultTemplates, ...this.options?.templates };
+    }
+    get chatRenderer() {
+        if (!this._chatRenderer ||
+            this._chatRenderer !== this.options?.messageRenderer) {
+            this._chatRenderer = new DefaultChatRenderer(this.options?.messageRenderer ?? new PlainTextRenderer(), this.mergedTemplates);
+            this.options?.messageRenderer?.init?.();
+        }
+        return this._chatRenderer;
     }
     constructor(chat) {
         this._textArea = null;
         this._messages = [];
-        this._sortedMessages = [];
         this._inputAttachments = [];
         this._inputValue = '';
         this._acceptedTypesCache = null;
         this._suggestionsPosition = 'below-messages';
-        this._host = chat;
-    }
-    emitEvent(name, args) {
-        return this._host.emitEvent(name, args);
-    }
-    handleInputChange(value) {
-        this.inputValue = value;
-        this.emitEvent('igcInputChange', { detail: { value: this.inputValue } });
-    }
-    addMessage(message) {
-        const newMessage = {
-            id: message.id ?? Date.now().toString(),
-            text: message.text,
-            sender: message.sender ?? this.currentUserId,
-            timestamp: message.timestamp ?? new Date(),
-            attachments: message.attachments || [],
+        this._stopTypingDelay = 3000;
+        this._isTyping = false;
+        this._lastTyped = Date.now();
+        this._fileIcon = new URL('./assets/file.png', import.meta.url).href;
+        this._jsonIcon = new URL('./assets/json.png', import.meta.url).href;
+        this._linkIcon = new URL('./assets/link.png', import.meta.url).href;
+        this._textAreaRef = createRef();
+        this._attachmentsButtonInputRef = createRef();
+        this._sharedTooltipRef = createRef();
+        this.resourceStrings = IgcChatResourceStringEN;
+        this._defaultTemplates = {
+            attachmentTemplate: (att, m) => this.renderDefaultAttachmentTemplate(att, m),
+            attachmentsTemplate: (m, _ctx) => this.renderDefaultAttachmentsTemplate(m),
+            attachmentHeaderTemplate: (att, msg) => this.renderDefaultAttachmentHeader(att, msg),
+            attachmentContentTemplate: (att) => this.renderDefaultAttachmentContent(att),
+            messageAuthorTemplate: () => { },
+            messageTemplate: (m, ctx) => this.renderDefaultMessageTemplate(m, ctx),
+            messageActionsTemplate: (message) => this.renderDefaultMessageActionsTemplate(message),
+            suggestionPrefixTemplate: () => { },
+            typingIndicatorTemplate: () => this.renderDefaultTypingIndicator(),
+            textInputTemplate: () => this.renderDefaultTextArea(),
+            textAreaActionsTemplate: () => this.renderDefaultActionsArea(),
+            textAreaAttachmentsTemplate: (attachments) => this.renderDefaultAttachmentsArea(attachments),
         };
-        const allowed = this.emitEvent('igcMessageCreated', {
-            detail: newMessage,
-            cancelable: true,
-        });
-        if (allowed) {
-            if (!this.messages.some((msg) => msg.id === newMessage.id)) {
-                this.messages = [...this.messages, newMessage];
+        this.renderDefaultAttachmentsArea = (attachments) => {
+            return html `${attachments?.map((attachment, index) => html `
+        <div part="attachment-wrapper" role="listitem">
+          <igc-chip removable @igcRemove=${() => this.removeAttachment(index)}>
+            <igc-icon
+              slot="prefix"
+              name=${this.getIconName(attachment.file?.type ?? attachment.type)}
+              collection="material"
+            ></igc-icon>
+            <span part="attachment-name">${attachment.name}</span>
+          </igc-chip>
+        </div>
+      `)} `;
+        };
+        this.renderDefaultTextArea = () => {
+            return html ` <igc-textarea
+      part="text-input"
+      ${ref(this._textAreaRef)}
+      .placeholder=${this.options?.inputPlaceholder}
+      resize="auto"
+      rows="1"
+      .value=${this.inputValue}
+      @igcInput=${this.handleInput}
+      @focus=${this.handleFocus}
+      @blur=${this.handleBlur}
+    ></igc-textarea>`;
+        };
+        this.renderDefaultFileUploadButton = () => {
+            if (this.options?.disableInputAttachments)
+                return html ``;
+            return html `
+      <label for="input_attachments" part="upload-button">
+        <igc-icon-button
+          variant="flat"
+          name="attachment"
+          collection="material"
+          @click=${() => this._attachmentsButtonInputRef?.value?.click()}
+        ></igc-icon-button>
+        <input
+          type="file"
+          id="input_attachments"
+          name="input_attachments"
+          ${ref(this._attachmentsButtonInputRef)}
+          multiple
+          accept=${ifDefined(this.options?.acceptedFiles === '' ? undefined : this.options?.acceptedFiles)}
+          @change=${this.handleFileUpload}>
+        </input>
+      </label>
+    `;
+        };
+        this.renderDefaultSendButton = () => {
+            return html ` <igc-icon-button
+      aria-label="Send message"
+      name="send-message"
+      collection="material"
+      variant="contained"
+      part="send-button"
+      ?disabled=${!this.inputValue.trim() && this.inputAttachments.length === 0}
+      @click=${this.sendMessage}
+    ></igc-icon-button>`;
+        };
+        this.renderDefaultActionsArea = () => {
+            return html ` ${this.renderDefaultFileUploadButton()}
+    ${this.renderDefaultSendButton()}`;
+        };
+        this.renderDefaultTypingIndicator = () => {
+            return html `<div part="typing-indicator">
+      <div part="typing-dot"></div>
+      <div part="typing-dot"></div>
+      <div part="typing-dot"></div>
+    </div>`;
+        };
+        this.renderDefaultMessageTemplate = (m, ctx) => {
+            const templates = { ...this._defaultTemplates, ...ctx.templates };
+            return html `
+      ${templates.messageAuthorTemplate(m) ?? nothing}
+      ${ctx?.textContent ?? m.text}
+      ${m.attachments?.length
+                ? html `<igc-message-attachments .message=${m}>
+          </igc-message-attachments>`
+                : nothing}
+      ${templates.messageActionsTemplate(m) ?? nothing}
+    `;
+        };
+        this.renderDefaultAttachmentHeader = (attachment, message) => {
+            return this.renderDefaultAttachmentHeaderText(attachment, message);
+        };
+        this.renderDefaultAttachmentContent = (attachment) => {
+            const ext = this.getFileExtension(attachment.name);
+            const isImage = this.isImageAttachment(attachment);
+            const url = isImage
+                ? this.getURL(attachment)
+                : (this._fileIconMap[ext] ?? this._fileIconMap['default']);
+            const partName = isImage ? 'image-attachment' : 'file-attachment';
+            return html `<img part="${partName}" src=${url} alt=${attachment.name} />`;
+        };
+        this.renderDefaultMessageActionsTemplate = (message) => {
+            const isLastMessage = message === this.messages.at(-1);
+            return message?.sender !== this.currentUserId &&
+                message?.text.trim() &&
+                (!isLastMessage || !this._isTyping)
+                ? html `<div>
+          <igc-icon-button
+            id="copy-response-button"
+            @pointerenter=${(ev) => this.showTooltip(ev, this.resourceStrings.reactionCopyResponse)}
+            name="copy-response"
+            collection="material"
+            variant="flat"
+            @click=${(e) => this.handleMessageActionClick(e, message)}
+          ></igc-icon-button>
+          <igc-icon-button
+            id="good-response-button"
+            @pointerenter=${(ev) => this.showTooltip(ev, this.resourceStrings.reactionGoodResponse)}
+            name="good-response"
+            collection="material"
+            variant="flat"
+            @click=${(e) => this.handleMessageActionClick(e, message)}
+          ></igc-icon-button>
+          <igc-icon-button
+            id="bad-response-button"
+            @pointerenter=${(ev) => this.showTooltip(ev, this.resourceStrings.reactionBadResponse)}
+            name="bad-response"
+            variant="flat"
+            collection="material"
+            @click=${(e) => this.handleMessageActionClick(e, message)}
+          ></igc-icon-button>
+          <igc-icon-button
+            id="redo-button"
+            @pointerenter=${(ev) => this.showTooltip(ev, this.resourceStrings.reactionRedo)}
+            name="redo"
+            variant="flat"
+            collection="material"
+            @click=${(e) => this.handleMessageActionClick(e, message)}
+          ></igc-icon-button>
+          <igc-tooltip
+            id="sharedTooltip"
+            ${ref(this._sharedTooltipRef)}
+          ></igc-tooltip>
+        </div>`
+                : nothing;
+        };
+        this.handleMessageActionClick = (event, message) => {
+            const reaction = event.target.getAttribute('name');
+            this.emitEvent('igcMessageReact', {
+                detail: { message, reaction },
+            });
+        };
+        this.renderDefaultAttachmentTemplate = (att, msg) => {
+            const isCurrentUser = msg.sender === this.currentUserId;
+            const attachmentParts = {
+                attachment: true,
+                sent: isCurrentUser,
+            };
+            const contentParts = {
+                'attachment-content': true,
+                sent: isCurrentUser,
+            };
+            const headerParts = {
+                'attachment-header': true,
+                sent: isCurrentUser,
+            };
+            const content = html `<div part=${partMap(contentParts)}>
+      ${this.mergedTemplates.attachmentContentTemplate(att)}
+    </div>`;
+            const header = html ` <div
+      part=${partMap(headerParts)}
+      role="button"
+      @click=${() => this.handleHeaderClick(att)}
+    >
+      <div part="details">
+        ${this.mergedTemplates.attachmentHeaderTemplate(att, msg)}
+      </div>
+    </div>`;
+            return html `<div part=${partMap(attachmentParts)}>
+      ${isCurrentUser ? content : nothing} ${header}
+      ${!isCurrentUser ? content : nothing}
+    </div> `;
+        };
+        this.renderDefaultAttachmentsTemplate = (m) => {
+            return html `
+      ${(m.attachments ?? []).map((att) => this.mergedTemplates.attachmentTemplate(att, m)) || nothing}
+    `;
+        };
+        this.handleInput = ({ detail }) => {
+            if (detail === this.inputValue)
+                return;
+            this.inputValue = detail;
+            this.emitEvent('igcInputChange', { detail: { value: this.inputValue } });
+        };
+        this.emitEvent = (name, args) => {
+            return this._host.emitEvent(name, args);
+        };
+        this.addMessage = (message) => {
+            const newMessage = {
+                id: message.id ?? Date.now().toString(),
+                text: message.text,
+                sender: message.sender ?? this.currentUserId,
+                timestamp: message.timestamp ?? new Date(),
+                attachments: message.attachments || [],
+            };
+            const allowed = this.emitEvent('igcMessageCreated', {
+                detail: newMessage,
+                cancelable: true,
+            });
+            if (allowed) {
+                if (!this.messages.some((msg) => msg.id === newMessage.id)) {
+                    this.messages = [...this.messages, newMessage];
+                }
+                this.inputValue = '';
+                this.inputAttachments = [];
+            }
+        };
+        this.getURL = (attachment) => {
+            if (attachment.url) {
+                return attachment.url;
             }
+            if (attachment.file) {
+                return URL.createObjectURL(attachment.file);
+            }
+            return '';
+        };
+        this._fileIconMap = {
+            pdf: this._fileIcon,
+            doc: this._fileIcon,
+            docx: this._fileIcon,
+            xls: this._fileIcon,
+            xlsx: this._fileIcon,
+            txt: this._fileIcon,
+            json: this._jsonIcon,
+            link: this._linkIcon,
+            default: this._fileIcon,
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key.toLowerCase() === enterKey.toLowerCase() && !e.shiftKey) {
+                e.preventDefault();
+                this.sendMessage();
+            }
+            else {
+                this._lastTyped = Date.now();
+                if (!this._isTyping) {
+                    this.emitEvent('igcTypingChange', {
+                        detail: { isTyping: true },
+                    });
+                    this._isTyping = true;
+                }
+                const stopTypingDelay = this.stopTypingDelay;
+                setTimeout(() => {
+                    if (this._isTyping &&
+                        stopTypingDelay &&
+                        this._lastTyped + stopTypingDelay < Date.now()) {
+                        this.emitEvent('igcTypingChange', {
+                            detail: { isTyping: false },
+                        });
+                        this._isTyping = false;
+                    }
+                }, stopTypingDelay);
+            }
+        };
+        this.handleFocus = () => {
+            this.emitEvent('igcInputFocus');
+        };
+        this.handleBlur = () => {
+            this.emitEvent('igcInputBlur');
+        };
+        this.sendMessage = () => {
+            if (!this.inputValue.trim() && this.inputAttachments.length === 0)
+                return;
+            this.addMessage({
+                text: this.inputValue,
+                attachments: this.inputAttachments,
+            });
             this.inputValue = '';
-            this.inputAttachments = [];
-        }
+            if (this._textArea) {
+                this._textArea.style.height = 'auto';
+            }
+            this._host.updateComplete.then(() => {
+                this._textArea?.focus();
+            });
+        };
+        this.handleFileUpload = (e) => {
+            const input = e.target;
+            if (!input.files || input.files.length === 0)
+                return;
+            const files = Array.from(input.files);
+            this.attachFiles(files);
+            this._host.requestUpdate();
+        };
+        this.removeAttachment = (index) => {
+            const allowed = this.emitEvent('igcAttachmentChange', {
+                detail: this.inputAttachments.filter((_, i) => i !== index),
+                cancelable: true,
+            });
+            if (allowed) {
+                this.inputAttachments = this.inputAttachments.filter((_, i) => i !== index);
+            }
+        };
+        this.handleSuggestionClick = (suggestion) => {
+            this.addMessage({ text: suggestion });
+            if (this.textArea) {
+                this.textArea.focus();
+            }
+        };
+        this.updateAcceptedTypesCache = () => {
+            if (!this.options?.acceptedFiles) {
+                this._acceptedTypesCache = null;
+                return;
+            }
+            const types = this.options?.acceptedFiles
+                .split(',')
+                .map((type) => type.trim().toLowerCase());
+            this._acceptedTypesCache = {
+                extensions: new Set(types.filter((t) => t.startsWith('.'))),
+                mimeTypes: new Set(types.filter((t) => !t.startsWith('.') && !t.endsWith('/*'))),
+                wildcardTypes: new Set(types.filter((t) => t.endsWith('/*')).map((t) => t.slice(0, -2))),
+            };
+        };
+        this.isFileTypeAccepted = (file, type = '') => {
+            if (!this._acceptedTypesCache)
+                return true;
+            if (file === null && type === '')
+                return false;
+            const fileType = file != null ? file.type.toLowerCase() : type.toLowerCase();
+            const fileExtension = file != null
+                ? `.${file.name.split('.').pop()?.toLowerCase()}`
+                : `.${type.split('/').pop()?.toLowerCase()}`;
+            if (this._acceptedTypesCache.extensions.has(fileExtension)) {
+                return true;
+            }
+            if (this._acceptedTypesCache.mimeTypes.has(fileType)) {
+                return true;
+            }
+            const [fileBaseType] = fileType.split('/');
+            return this._acceptedTypesCache.wildcardTypes.has(fileBaseType);
+        };
+        this._host = chat;
+        registerIconFromText('copy-response', copyIcon, 'material');
+        registerIconFromText('good-response', thumbUpIcon, 'material');
+        registerIconFromText('bad-response', thumbDownIcon, 'material');
+        registerIconFromText('redo', regenerateIcon, 'material');
     }
     attachFiles(files) {
         const newAttachments = [];
@@ -106,56 +513,20 @@ export class ChatState {
             this.inputAttachments = [...this.inputAttachments, ...newAttachments];
         }
     }
-    removeAttachment(index) {
-        const allowed = this.emitEvent('igcAttachmentChange', {
-            detail: this.inputAttachments.filter((_, i) => i !== index),
-            cancelable: true,
-        });
-        if (allowed) {
-            this.inputAttachments = this.inputAttachments.filter((_, i) => i !== index);
-        }
+    isImageAttachment(attachment) {
+        return (attachment.type === 'image' ||
+            !!attachment.file?.type.startsWith('image/'));
     }
-    handleSuggestionClick(suggestion) {
-        this.addMessage({ text: suggestion });
-        if (this.textArea) {
-            this.textArea.focus();
+    getFileExtension(fileName) {
+        const parts = fileName.split('.');
+        if (parts.length > 1) {
+            return parts.pop().toLowerCase();
         }
+        return '';
     }
     updateOptions(options) {
         this.options = { ...this.options, ...options };
     }
-    updateAcceptedTypesCache() {
-        if (!this.options?.acceptedFiles) {
-            this._acceptedTypesCache = null;
-            return;
-        }
-        const types = this.options?.acceptedFiles
-            .split(',')
-            .map((type) => type.trim().toLowerCase());
-        this._acceptedTypesCache = {
-            extensions: new Set(types.filter((t) => t.startsWith('.'))),
-            mimeTypes: new Set(types.filter((t) => !t.startsWith('.') && !t.endsWith('/*'))),
-            wildcardTypes: new Set(types.filter((t) => t.endsWith('/*')).map((t) => t.slice(0, -2))),
-        };
-    }
-    isFileTypeAccepted(file, type = '') {
-        if (!this._acceptedTypesCache)
-            return true;
-        if (file === null && type === '')
-            return false;
-        const fileType = file != null ? file.type.toLowerCase() : type.toLowerCase();
-        const fileExtension = file != null
-            ? `.${file.name.split('.').pop()?.toLowerCase()}`
-            : `.${type.split('/').pop()?.toLowerCase()}`;
-        if (this._acceptedTypesCache.extensions.has(fileExtension)) {
-            return true;
-        }
-        if (this._acceptedTypesCache.mimeTypes.has(fileType)) {
-            return true;
-        }
-        const [fileBaseType] = fileType.split('/');
-        return this._acceptedTypesCache.wildcardTypes.has(fileBaseType);
-    }
     hasSlotContent(name) {
         return (this._host.renderRoot.querySelector(`slot[name=${name}]`)
             ?.childNodes.length !== 0);