favesalon-embed 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements/index.d.ts +12 -0
- package/dist/favesalon-embed/_commonjsHelpers-9bc404fc.js +44 -0
- package/dist/favesalon-embed/{app-globals-15861a7f.js → app-globals-60769a2c.js} +1 -1
- package/dist/favesalon-embed/chat-box.entry.js +54 -0
- package/dist/favesalon-embed/chat-button.entry.js +3 -8
- package/dist/favesalon-embed/chat-form.entry.js +2 -2
- package/dist/favesalon-embed/chat-messages.entry.js +6 -4
- package/dist/favesalon-embed/chat-rooms.entry.js +17279 -0
- package/dist/favesalon-embed/favesalon-embed.esm.js +1 -1
- package/dist/favesalon-embed/{index-aa906326.js → index-04c09911.js} +1 -1
- package/dist/favesalon-embed/index-ac52896a.js +4803 -0
- package/dist/favesalon-embed/isObject-13b86c17.js +203 -0
- package/dist/favesalon-embed/relativeTime-15477f02.js +7 -0
- package/dist/favesalon-embed/salon-info.entry.js +1 -1
- package/dist/favesalon-embed/salon-latest-reviews.entry.js +2 -2
- package/dist/favesalon-embed/salon-latest-styles.entry.js +1 -1
- package/dist/favesalon-embed/salon-locations.entry.js +2 -2
- package/dist/favesalon-embed/salon-lookbook.entry.js +1 -1
- package/dist/favesalon-embed/salon-reviews.entry.js +1 -1
- package/dist/favesalon-embed/salon-schedules.entry.js +1 -1
- package/dist/favesalon-embed/salon-services.entry.js +1 -1
- package/dist/favesalon-embed/salon-stylists.entry.js +1 -1
- package/dist/favesalon-embed/services-55a87166.js +23655 -0
- package/dist/favesalon-embed/services-7c46a2fd.js +23854 -0
- package/dist/favesalon-embed/style-detail.entry.js +1 -1
- package/dist/favesalon-embed/user-avatar.entry.js +11 -3
- package/dist/favesalon-embed/{utils-7de9628a.js → utils-2c19db45.js} +3 -0
- package/dist/types/components/chat-box/index.d.ts +12 -0
- package/dist/types/components/chat-rooms/index.d.ts +12 -0
- package/dist/types/components/user-avatar/index.d.ts +2 -1
- package/dist/types/components.d.ts +45 -2
- package/dist/types/utils/utils.d.ts +1 -0
- package/package.json +1 -1
- package/dist/favesalon-embed/app-globals-270fe240.js +0 -712
- package/dist/favesalon-embed/app-globals-b8b0fc7a.js +0 -712
- package/dist/favesalon-embed/index-9ad82b12.js +0 -3371
- package/dist/favesalon-embed/index-b97af793.js +0 -3371
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
import type { Components, JSX } from "../types/components";
|
|
4
4
|
|
|
5
|
+
interface ChatBox extends Components.ChatBox, HTMLElement {}
|
|
6
|
+
export const ChatBox: {
|
|
7
|
+
prototype: ChatBox;
|
|
8
|
+
new (): ChatBox;
|
|
9
|
+
};
|
|
10
|
+
|
|
5
11
|
interface ChatButton extends Components.ChatButton, HTMLElement {}
|
|
6
12
|
export const ChatButton: {
|
|
7
13
|
prototype: ChatButton;
|
|
@@ -20,6 +26,12 @@ export const ChatMessages: {
|
|
|
20
26
|
new (): ChatMessages;
|
|
21
27
|
};
|
|
22
28
|
|
|
29
|
+
interface ChatRooms extends Components.ChatRooms, HTMLElement {}
|
|
30
|
+
export const ChatRooms: {
|
|
31
|
+
prototype: ChatRooms;
|
|
32
|
+
new (): ChatRooms;
|
|
33
|
+
};
|
|
34
|
+
|
|
23
35
|
interface GoogleMap extends Components.GoogleMap, HTMLElement {}
|
|
24
36
|
export const GoogleMap: {
|
|
25
37
|
prototype: GoogleMap;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
2
|
+
|
|
3
|
+
function getDefaultExportFromCjs (x) {
|
|
4
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
function createCommonjsModule(fn, basedir, module) {
|
|
8
|
+
return module = {
|
|
9
|
+
path: basedir,
|
|
10
|
+
exports: {},
|
|
11
|
+
require: function (path, base) {
|
|
12
|
+
return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
|
|
13
|
+
}
|
|
14
|
+
}, fn(module, module.exports), module.exports;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
function getDefaultExportFromNamespaceIfPresent (n) {
|
|
18
|
+
return n && Object.prototype.hasOwnProperty.call(n, 'default') ? n['default'] : n;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function getDefaultExportFromNamespaceIfNotNamed (n) {
|
|
22
|
+
return n && Object.prototype.hasOwnProperty.call(n, 'default') && Object.keys(n).length === 1 ? n['default'] : n;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
function getAugmentedNamespace(n) {
|
|
26
|
+
if (n.__esModule) return n;
|
|
27
|
+
var a = Object.defineProperty({}, '__esModule', {value: true});
|
|
28
|
+
Object.keys(n).forEach(function (k) {
|
|
29
|
+
var d = Object.getOwnPropertyDescriptor(n, k);
|
|
30
|
+
Object.defineProperty(a, k, d.get ? d : {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return n[k];
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
return a;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
function commonjsRequire () {
|
|
41
|
+
throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export { commonjsGlobal as a, getAugmentedNamespace as b, createCommonjsModule as c, getDefaultExportFromCjs as g };
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { r as registerInstance, h } from './index-888e99e3.js';
|
|
2
|
+
import { C as Colors } from './colors-ea36347a.js';
|
|
3
|
+
import { H as HttpService } from './services-7c46a2fd.js';
|
|
4
|
+
import './_commonjsHelpers-a4f66ccd.js';
|
|
5
|
+
|
|
6
|
+
const indexCss = ".chat-widget,.chat-widget--sidebar,.chat-widget--content{display:flex;height:100%;width:100%}.chat-widget{position:relative}.chat-widget--sidebar,.chat-widget--content{background-color:#fff;border:1px solid #EFEFEF;position:absolute;inset:0;flex-direction:column}.chat-widget .chat-widget--sidebar{z-index:10}.chat-widget .chat-widget--content{z-index:5}.chat-widget.has-chat-room .chat-widget--content{z-index:10}.chat-widget--content-header{background-color:#001529;border-bottom:1px solid #EFEFEF;display:flex;align-items:center;justify-content:space-between;padding:16px}.chat-widget--content-title{font-size:20px;font-weight:600;line-height:1;margin:0}.chat-widget--content-close{border:1px solid #fff;cursor:pointer;display:block;position:absolute;z-index:1000;top:50%;right:0;width:30px;height:30px;transform:translate(0, -50%);-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')}@media (min-width: 992px){.chat-widget--sidebar,.chat-widget--content{position:static;width:auto;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.chat-widget--sidebar{min-width:320px;max-width:320px;margin-right:24px}.chat-widget--content{flex-grow:1;flex-shrink:1}.chat-rooms--search,.chat-widget--content-header{-moz-border-radius:8px 8px 0 0;-webkit-border-radius:8px 8px 0 0;border-radius:8px 8px 0 0}}";
|
|
7
|
+
|
|
8
|
+
const ChatBox = class {
|
|
9
|
+
constructor(hostRef) {
|
|
10
|
+
registerInstance(this, hostRef);
|
|
11
|
+
this.onClickRoom = (chatRoom) => {
|
|
12
|
+
this.activeRoom = chatRoom;
|
|
13
|
+
};
|
|
14
|
+
this.primaryColor = undefined;
|
|
15
|
+
this.accessToken = undefined;
|
|
16
|
+
this.senderId = undefined;
|
|
17
|
+
this.chatRooms = undefined;
|
|
18
|
+
this.activeRoom = undefined;
|
|
19
|
+
}
|
|
20
|
+
componentWillLoad() {
|
|
21
|
+
this.fetchData();
|
|
22
|
+
}
|
|
23
|
+
async fetchData() {
|
|
24
|
+
try {
|
|
25
|
+
this.chatRooms = await HttpService().fetchChatRooms(this.accessToken);
|
|
26
|
+
(this.chatRooms || []).forEach((chatRoom) => {
|
|
27
|
+
HttpService().fetchChatMessages(chatRoom.uid, (messages) => {
|
|
28
|
+
this.chatRooms = [...(this.chatRooms || [])].map((room) => {
|
|
29
|
+
if (chatRoom.uid === room.uid) {
|
|
30
|
+
room.messages = messages;
|
|
31
|
+
}
|
|
32
|
+
return room;
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
catch (e) {
|
|
38
|
+
this.chatRooms = [];
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
render() {
|
|
42
|
+
const senderInfo = this.activeRoom ? (this.activeRoom.members || []).find(user => user.id === Number(this.senderId)) : null;
|
|
43
|
+
const receiverInfo = this.activeRoom ? (this.activeRoom.members || []).find(user => user.id !== Number(this.senderId)) : null;
|
|
44
|
+
return (h("div", { class: `chat-widget ${this.activeRoom ? 'has-chat-room' : ''}` }, h("div", { class: "chat-widget--sidebar" }, h("chat-rooms", { "sender-id": Number(this.senderId), activeRoom: this.activeRoom, chatRooms: this.chatRooms, onClickRoom: this.onClickRoom })), h("div", { class: "chat-widget--content" }, receiverInfo && (h("div", { class: "chat-widget--content-header" }, h("user-avatar", { size: 40, avatar: receiverInfo.avatar, name: h("div", { class: "chat-room--user-name", style: { color: '#fff' } }, receiverInfo.fullName), shortName: String(receiverInfo.fullName || '').charAt(0) }), h("div", { style: { position: 'relative' } }, h("div", { class: "chat-widget--content-close", onClick: () => this.onClickRoom(null) })))), h("div", { style: {
|
|
45
|
+
flexShrink: '1',
|
|
46
|
+
flexGrow: '1',
|
|
47
|
+
overflowY: 'auto',
|
|
48
|
+
padding: '16px',
|
|
49
|
+
} }, this.activeRoom && (h("chat-messages", { sender: senderInfo, receiver: receiverInfo, messages: this.activeRoom.messages || [], "chat-room-id": this.activeRoom.uid })), !this.activeRoom && (h("div", { style: { paddingTop: '72px', textAlign: 'center' } }, h("div", { class: "chat-widget--content-title" }, "Welcome back!"), h("div", { style: { marginTop: "12px" } }, "Select any user in left hand side to get started.")))), this.activeRoom && (h("div", { style: { borderTop: `1px solid ${Colors.Gray02}` } }, h("chat-form", { "sender-id": Number(senderInfo.id), "chat-room-id": this.activeRoom.uid }))))));
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
ChatBox.style = indexCss;
|
|
53
|
+
|
|
54
|
+
export { ChatBox as chat_box };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-888e99e3.js';
|
|
2
|
-
import {
|
|
2
|
+
import { C as Colors } from './colors-ea36347a.js';
|
|
3
|
+
import { H as HttpService } from './services-7c46a2fd.js';
|
|
3
4
|
import './_commonjsHelpers-a4f66ccd.js';
|
|
4
|
-
import './colors-ea36347a.js';
|
|
5
5
|
|
|
6
6
|
const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'); chat-button{position:relative}.chat-button--indicator{cursor:pointer;position:absolute;inset:0}.chat-button--counter{background-color:rgb(240, 90, 97);border:1px solid rgb(255, 255, 255);position:absolute;right:6px;top:0px;height:8px;width:8px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.chat-box{font-family:'Roboto', sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;display:flex;flex-direction:column;position:fixed;inset:0px;z-index:20000;font-size:16px;text-align:left;color:#141414}.chat-box--header{display:flex;justify-content:space-between;padding:16px;position:relative}.chat-box--title{color:#fff;font-size:20px;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:space-between;margin:0}.chat-box--close{cursor:pointer;display:block;position:absolute;z-index:1000;top:50%;right:0;width:30px;height:30px;transform:translate(0, -50%);background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')}@media (min-width: 768px){.chat-box{border:1px solid #fff;left:unset;top:unset;right:1px;bottom:0px;height:420px;max-height:90vh;width:600px;-moz-border-radius:8px 8px 0px 0px;-webkit-border-radius:8px 8px 0px 0px;border-radius:8px 8px 0px 0px;-moz-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 24px;-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 24px;box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 24px}.chat-box--header{-moz-border-radius:8px 8px 0px 0px;-webkit-border-radius:8px 8px 0px 0px;border-radius:8px 8px 0px 0px}}";
|
|
7
7
|
|
|
@@ -43,12 +43,7 @@ const ChatButton = class {
|
|
|
43
43
|
flexGrow: '1',
|
|
44
44
|
overflowY: 'auto',
|
|
45
45
|
padding: '16px',
|
|
46
|
-
} }, h("chat-messages", { sender: this.senderInfo, receiver: this.receiverInfo, messages: this.chatMessages || [], "chat-room-id": this.chatRoom.uid })), h("div", { style: {
|
|
47
|
-
height: '50px',
|
|
48
|
-
minHeight: '50px',
|
|
49
|
-
paddingTop: '1',
|
|
50
|
-
borderTop: '1px solid rgb(245, 245, 245)',
|
|
51
|
-
} }, h("chat-form", { "sender-id": this.senderInfo.id ? Number(this.senderInfo.id) : null, "chat-room-id": this.chatRoom.uid })))));
|
|
46
|
+
} }, h("chat-messages", { sender: this.senderInfo, receiver: this.receiverInfo, messages: this.chatMessages || [], "chat-room-id": this.chatRoom.uid })), h("div", { style: { borderTop: `1px solid ${Colors.Gray02}` } }, h("chat-form", { "sender-id": this.senderInfo.id ? Number(this.senderInfo.id) : null, "chat-room-id": this.chatRoom.uid })))));
|
|
52
47
|
}
|
|
53
48
|
};
|
|
54
49
|
ChatButton.style = indexCss;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-888e99e3.js';
|
|
2
|
-
import { H as HttpService } from './services-
|
|
2
|
+
import { H as HttpService } from './services-7c46a2fd.js';
|
|
3
3
|
import './_commonjsHelpers-a4f66ccd.js';
|
|
4
4
|
import './colors-ea36347a.js';
|
|
5
5
|
|
|
6
|
-
const indexCss = ".chat-form{display:flex;height:
|
|
6
|
+
const indexCss = ".chat-form{display:flex;height:56px;width:100%}.chat-form #chat-form--input{border:none;outline:none;flex-shrink:1;flex-grow:1;height:100%;font-size:16px;padding-left:16px;padding-right:16px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px}.chat-form>button{background-color:#001529;border:none;color:#fff;font-size:16px;min-width:80px;height:42px;margin:7px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}.chat-form>button:hover,.chat-form>button:focus,.chat-form>button:active{background-color:#001529}";
|
|
7
7
|
|
|
8
8
|
const ChatForm = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-888e99e3.js';
|
|
2
|
-
import { d as dayjs_min, H as HttpService } from './services-
|
|
2
|
+
import { d as dayjs_min, H as HttpService, b as dateFormat } from './services-7c46a2fd.js';
|
|
3
|
+
import { C as Colors } from './colors-ea36347a.js';
|
|
3
4
|
import { r as relativeTime } from './relativeTime-268e64b0.js';
|
|
4
5
|
import './_commonjsHelpers-a4f66ccd.js';
|
|
5
|
-
import './colors-ea36347a.js';
|
|
6
6
|
|
|
7
7
|
const indexCss = ".chat-message{overflow:hidden;clear:both;min-width:240px}.chat-message+.chat-message{margin-top:6px}.chat-message--meta{display:flex}.chat-message--title{background-color:#F1F1F1;padding:8px 12px;position:relative;float:left;margin-top:6px;-moz-border-radius:0 10px 10px 10px;-webkit-border-radius:0 10px 10px 10px;border-radius:0 10px 10px 10px}.chat-message--time{clear:both;color:#999;font-size:75%;padding-top:2px}.chat-message.is-owner .chat-message--content{margin-left:12px}.chat-message.is-guest .chat-message--meta{flex-direction:row-reverse}.chat-message.is-guest .chat-message--title{background-color:#EFF7FF;float:right;margin-right:12px;text-align:right;-moz-border-radius:10px 0 10px 10px;-webkit-border-radius:10px 0 10px 10px;border-radius:10px 0 10px 10px}";
|
|
8
8
|
|
|
@@ -28,7 +28,9 @@ const ChatMessages = class {
|
|
|
28
28
|
this.renderMessage = (chatMessage) => {
|
|
29
29
|
const { message, senderId, timestamp } = chatMessage;
|
|
30
30
|
const isOwner = this.sender.id === senderId;
|
|
31
|
-
|
|
31
|
+
const todayStr = dayjs_min().format(dateFormat);
|
|
32
|
+
const messageDayStr = dayjs_min(timestamp).format(dateFormat);
|
|
33
|
+
return (h("div", { class: `chat-message ${isOwner ? 'is-owner' : 'is-guest'}` }, h("div", { class: "chat-message--meta" }, h("user-avatar", { size: 40, shortName: String(((isOwner ? this.sender : this.receiver) || {}).fullName || '').charAt(0), avatar: ((isOwner ? this.sender : this.receiver) || {}).avatar }), h("div", { class: "chat-message--content" }, h("div", { class: "chat-message--title" }, message), timestamp && (h("div", { class: "chat-message--time" }, todayStr === messageDayStr ? dayjs_min(timestamp).format('HH:mm') : dayjs_min(timestamp).fromNow()))))));
|
|
32
34
|
};
|
|
33
35
|
this.sender = {};
|
|
34
36
|
this.receiver = {};
|
|
@@ -43,7 +45,7 @@ const ChatMessages = class {
|
|
|
43
45
|
}
|
|
44
46
|
render() {
|
|
45
47
|
const isEmpty = (this.messages || []).length === 0;
|
|
46
|
-
return (h("div", { class: "chat-messages" }, !isEmpty && this.messages.map(this.renderMessage), isEmpty && (h("div", { style: {
|
|
48
|
+
return (h("div", { class: "chat-messages" }, !isEmpty && this.messages.map(this.renderMessage), isEmpty && (h("div", { style: { padding: '48px', textAlign: 'center' } }, h("div", { style: { color: Colors.Green04 } }, "No messages yet"))), h("div", { id: "chat--last-message" })));
|
|
47
49
|
}
|
|
48
50
|
};
|
|
49
51
|
ChatMessages.style = indexCss;
|