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

package/components/chat/chat-state.js

@@ -1,67 +1,29 @@
-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';
+import { isEmpty, nanoid } from '../common/util.js';
+import { isImageAttachment, parseAcceptedFileTypes, } from './utils.js';
 export class ChatState {
-    get _sharedTooltip() {
-        return this._sharedTooltipRef?.value;
+    get host() {
+        return this._host;
     }
-    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 });
+    get acceptedFileTypes() {
+        return this._acceptedTypesCache;
     }
-    showTooltip(ev, text) {
-        if (!this._sharedTooltip)
-            return;
-        this._sharedTooltip.message = text;
-        this._sharedTooltip.hideDelay = 300;
-        this._sharedTooltip.show(ev.composedPath()[0]);
+    get disableAutoScroll() {
+        return this._options?.disableAutoScroll ?? false;
     }
     get messages() {
         return this._messages;
     }
     set messages(value) {
         this._messages = value;
-        this._host.requestUpdate();
     }
     get options() {
         return this._options;
     }
     set options(value) {
         this._options = value;
-        this._host.requestUpdate();
-        if (this._host.updateContextValue) {
-            this._host.updateContextValue();
-        }
+        this._contextUpdateFn.call(this._host);
     }
     get currentUserId() {
         return this._options?.currentUserId ?? 'user';
@@ -78,47 +40,27 @@ export class ChatState {
     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();
-        }
+        this._userInputContextUpdateFn.call(this._host);
     }
     get inputValue() {
         return this._inputValue;
     }
     set inputValue(value) {
         this._inputValue = value;
-        this._host.requestUpdate();
-        if (this._host.updateContextValue) {
-            this._host.updateContextValue();
-        }
+        this._userInputContextUpdateFn.call(this._host);
     }
-    get defaultTemplates() {
-        return this._defaultTemplates;
+    get hasInputValue() {
+        return this._inputValue.trim() !== '';
     }
-    set defaultTemplates(templates) {
-        this._defaultTemplates = { ...templates };
+    get hasInputAttachments() {
+        return !isEmpty(this._inputAttachments);
     }
-    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) {
+    constructor(chat, contextUpdateFn, userInputContextUpdateFn) {
         this._textArea = null;
         this._messages = [];
         this._inputAttachments = [];
@@ -128,259 +70,7 @@ export class ChatState {
         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),
-        };
-        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();
@@ -407,16 +97,10 @@ export class ChatState {
                 }, stopTypingDelay);
             }
         };
-        this.handleFocus = () => {
-            this.emitEvent('igcInputFocus');
-        };
-        this.handleBlur = () => {
-            this.emitEvent('igcInputBlur');
-        };
         this.sendMessage = () => {
             if (!this.inputValue.trim() && this.inputAttachments.length === 0)
                 return;
-            this.addMessage({
+            this.addMessageWithEvent({
                 text: this.inputValue,
                 attachments: this.inputAttachments,
             });
@@ -428,14 +112,6 @@ export class ChatState {
                 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),
@@ -446,65 +122,61 @@ export class ChatState {
             }
         };
         this.handleSuggestionClick = (suggestion) => {
-            this.addMessage({ text: suggestion });
+            this.addMessageWithEvent({ 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');
+        this._contextUpdateFn = contextUpdateFn;
+        this._userInputContextUpdateFn = userInputContextUpdateFn;
+    }
+    isCurrentUserMessage(message) {
+        return this.currentUserId === message?.sender;
+    }
+    emitEvent(name, args) {
+        return this._host.emitEvent(name, args);
+    }
+    _createMessage(message) {
+        return {
+            id: message.id ?? nanoid(),
+            text: message.text ?? '',
+            sender: message.sender ?? this.currentUserId,
+            timestamp: message.timestamp ?? Date.now().toString(),
+            attachments: message.attachments || [],
+        };
+    }
+    addMessage(message) {
+        this.messages.push(this._createMessage(message));
+        this._host.requestUpdate('messages');
+    }
+    addMessageWithEvent(message) {
+        const newMessage = this._createMessage(message);
+        if (this._host.emitEvent('igcMessageCreated', {
+            detail: newMessage,
+            cancelable: true,
+        })) {
+            this.addMessage(newMessage);
+            this.inputValue = '';
+            this.inputAttachments = [];
+        }
     }
     attachFiles(files) {
         const newAttachments = [];
-        let count = this.inputAttachments.length;
-        files.forEach((file) => {
-            if (this.inputAttachments.find((a) => a.name === file.name)) {
-                return;
+        const fileNames = new Set(this.inputAttachments.map((attachment) => attachment.file?.name ?? ''));
+        for (const file of files) {
+            if (fileNames.has(file.name)) {
+                continue;
             }
-            const isImage = file.type.startsWith('image/');
+            const url = URL.createObjectURL(file);
             newAttachments.push({
-                id: Date.now().toString() + count++,
-                url: URL.createObjectURL(file),
+                id: nanoid(),
+                url,
                 name: file.name,
-                file: file,
-                thumbnail: isImage ? URL.createObjectURL(file) : undefined,
+                file,
+                thumbnail: isImageAttachment(file) ? url : undefined,
             });
-        });
+        }
         const allowed = this.emitEvent('igcAttachmentChange', {
             detail: [...this.inputAttachments, ...newAttachments],
             cancelable: true,
@@ -513,26 +185,10 @@ export class ChatState {
             this.inputAttachments = [...this.inputAttachments, ...newAttachments];
         }
     }
-    isImageAttachment(attachment) {
-        return (attachment.type === 'image' ||
-            !!attachment.file?.type.startsWith('image/'));
-    }
-    getFileExtension(fileName) {
-        const parts = fileName.split('.');
-        if (parts.length > 1) {
-            return parts.pop().toLowerCase();
-        }
-        return '';
-    }
-    updateOptions(options) {
-        this.options = { ...this.options, ...options };
+    updateAcceptedTypesCache() {
+        this._acceptedTypesCache = this.options?.acceptedFiles
+            ? parseAcceptedFileTypes(this.options.acceptedFiles)
+            : null;
     }
-    hasSlotContent(name) {
-        return (this._host.renderRoot.querySelector(`slot[name=${name}]`)
-            ?.childNodes.length !== 0);
-    }
-}
-export function createChatState(host) {
-    return new ChatState(host);
 }
 //# sourceMappingURL=chat-state.js.map