ts-glitter 18.2.6 → 18.2.8

package/lowcode/cms-plugin/customer-message-user.js

@@ -11,6 +11,7 @@ import { ApiUser } from "../glitter-base/route/user.js";
 import { Chat } from "../glitter-base/route/chat.js";
 import { imageLibrary } from "../modules/image-library.js";
 import { ShareDialog } from "../glitterBundle/dialog/ShareDialog.js";
+import { Animation } from "../glitterBundle/module/Animation.js";
 export class CustomerMessageUser {
     static showCustomerMessage(cf) {
         const gvc = cf.gvc;
@@ -21,6 +22,9 @@ export class CustomerMessageUser {
         let vm = {
             viewType: cf.viewType || 'robot',
         };
+        if (gvc.glitter.getUrlParameter('page').startsWith('products/') && document.body.clientWidth < 800) {
+            return ``;
+        }
         return gvc.bindView(() => {
             const id = gvc.glitter.getUUID();
             return {
@@ -753,6 +757,495 @@ export class CustomerMessageUser {
             };
         });
     }
+    static mobileChat(cf) {
+        const gvc = cf.gvc;
+        const css = String.raw;
+        const viewId = gvc.glitter.getUUID();
+        let chatRoomInf = {};
+        document.body.style.setProperty('overflow-y', 'hidden', 'important');
+        gvc.glitter.innerDialog((gvc) => {
+            return gvc.bindView(() => {
+                const id = gvc.glitter.getUUID();
+                return {
+                    bind: id,
+                    view: () => {
+                        return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                            const config = (yield ApiUser.getPublicConfig(`message_setting`, 'manager')).response.value || {
+                                color: '#FE5541',
+                                head: 'https://liondesign-prd.s3.amazonaws.com/file/252530754/1695093945424-Frame 62 (1).png',
+                                name: '萊恩設計',
+                            };
+                            CustomerMessageUser.config = config;
+                            gvc.addStyle(css `
+                            .btn-white-primary {
+                                border: 2px solid ${CustomerMessageUser.config.color};
+                                justify-content: space-between;
+                                align-items: center;
+                                cursor: pointer;
+                                color: ${CustomerMessageUser.config.color};
+                                gap: 10px;
+                            }
+
+                            .btn-white-primary:hover {
+                                background: ${CustomerMessageUser.config.color};
+                                color: white !important;
+                            }
+                        `);
+                            resolve([
+                                gvc.bindView(() => {
+                                    const id = gvc.glitter.getUUID();
+                                    return {
+                                        bind: id,
+                                        view: () => {
+                                            if (cf.hideBar) {
+                                                return ``;
+                                            }
+                                            return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                                                const chatRoom = (yield Chat.getChatRoom({
+                                                    page: 0,
+                                                    limit: 1000,
+                                                    user_id: cf.user_id,
+                                                    chat_id: cf.chat.chat_id,
+                                                })).response.data[0];
+                                                if (chatRoom.who === 'manager') {
+                                                    chatRoom.user_data = CustomerMessageUser.config;
+                                                }
+                                                if (chatRoom.who.startsWith('line')) {
+                                                    chatRoom.user_data.head = chatRoom.info.line.head;
+                                                    chatRoom.user_data.name = chatRoom.info.line.name;
+                                                    chatRoomInf = chatRoom;
+                                                    gvc.notifyDataChange(viewId);
+                                                }
+                                                if (chatRoom.who.startsWith('fb')) {
+                                                    chatRoom.user_data.head = chatRoom.info.fb.head;
+                                                    chatRoom.user_data.name = chatRoom.info.fb.name;
+                                                    chatRoomInf = chatRoom;
+                                                    gvc.notifyDataChange(viewId);
+                                                }
+                                                resolve(`<div class="navbar  d-flex align-items-center justify-content-between w-100  p-3 ${CustomerMessageUser.config.hideBar ? `d-none` : ``}" style="background: ${CustomerMessageUser.config.color};">
+                      <div class="d-flex align-items-center pe-3 w-100" style="gap:10px;display: flex;align-items: center;">
+                        <i class="fa-solid fa-chevron-left fs-6" style="color:white;cursor: pointer;" onclick="${gvc.event(() => {
+                                                    document.body.style.removeProperty('overflow-y');
+                                                    gvc.closeDialog();
+                                                })}"></i>
+                        <img src="${chatRoom.type === 'user'
+                                                    ? (chatRoom.user_data && chatRoom.user_data.head) || chatRoom.user_data.head_img || 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png'
+                                                    : `https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`}" class="rounded-circle border" style="background: white;border-radius: 50%;width: 40px;height: 40px;" width="40" alt="Albert Flores">
+                        <h6 class="mb-0 px-1 text-white">${chatRoom.type === 'user' ? (chatRoom.user_data && chatRoom.user_data.name) || '訪客' : `群組`}</h6>
+                        <div class="flex-fill" style="flex: 1;"></div>
+                      <i class="fa-regular fa-circle-xmark text-white fs-3 " onclick="${gvc.event(() => {
+                                                    document.body.style.removeProperty('overflow-y');
+                                                    gvc.closeDialog();
+                                                })}"></i>
+                      </div>
+                    </div>`);
+                                            }));
+                                        },
+                                    };
+                                }),
+                                gvc.bindView(() => {
+                                    const messageID = gvc.glitter.getUUID();
+                                    const vm = {
+                                        data: [],
+                                        loading: true,
+                                        scrollToBtn: false,
+                                        lastScroll: -1,
+                                        message: '',
+                                        prefixScroll: 0,
+                                        last_read: {},
+                                        close: false,
+                                    };
+                                    Chat.getMessage({
+                                        page: 0,
+                                        limit: 50,
+                                        chat_id: cf.chat.chat_id,
+                                        user_id: cf.user_id,
+                                    }).then((res) => {
+                                        vm.data = res.response.data.reverse();
+                                        vm.last_read = res.response.lastRead;
+                                        vm.loading = false;
+                                        gvc.notifyDataChange(viewId);
+                                    });
+                                    const url = new URL(window.glitterBackend);
+                                    let socket = undefined;
+                                    function connect() {
+                                        if (gvc.glitter.share.close_socket) {
+                                            gvc.glitter.share.close_socket();
+                                        }
+                                        vm.close = false;
+                                        socket = location.href.includes('https://') ? new WebSocket(`wss://${url.hostname}/websocket`) : new WebSocket(`ws://${url.hostname}:9003`);
+                                        gvc.glitter.share.close_socket = () => {
+                                            vm.close = true;
+                                            socket.close();
+                                            gvc.glitter.share.close_socket = undefined;
+                                        };
+                                        gvc.glitter.share.socket = socket;
+                                        socket.addEventListener('open', function (event) {
+                                            console.log('Connected to server');
+                                            socket.send(JSON.stringify({
+                                                type: 'message',
+                                                chatID: cf.chat.chat_id,
+                                                user_id: cf.user_id,
+                                                app_name: window.appName
+                                            }));
+                                        });
+                                        let interVal = 0;
+                                        socket.addEventListener('message', function (event) {
+                                            const data = JSON.parse(event.data);
+                                            console.log(`message_in`, data.data);
+                                            if (data.type === 'update_read_count') {
+                                                vm.last_read = data.data;
+                                            }
+                                            else {
+                                                vm.data.push(data);
+                                                const element = document.querySelector('.chatContainer');
+                                                const st = element.scrollTop;
+                                                const ofs = element.offsetHeight;
+                                                const sh = element.scrollHeight;
+                                                for (const dd of document.querySelectorAll('.time-mute')) {
+                                                    dd.remove();
+                                                }
+                                                document.querySelector(`#message-lines`).innerHTML += CustomerMessageUser.message_line(data, vm.data.length - 1, gvc, vm, cf, chatRoomInf);
+                                                if (st + ofs >= sh - 50) {
+                                                    element.scrollTop = element.scrollHeight;
+                                                    let clock = gvc.glitter.ut.clock();
+                                                    const interval = setInterval(() => {
+                                                        if (clock.stop() > 1000) {
+                                                            clearInterval(interval);
+                                                        }
+                                                        element.scrollTop = element.scrollHeight;
+                                                    }, 50);
+                                                }
+                                            }
+                                            console.log('Message from server:', event.data);
+                                        });
+                                        socket.addEventListener('close', function (event) {
+                                            console.log('Disconnected from server');
+                                            if (!vm.close) {
+                                                console.log('Reconnected from server');
+                                                connect();
+                                            }
+                                        });
+                                    }
+                                    connect();
+                                    const textAreaId = gvc.glitter.getUUID();
+                                    const html = String.raw;
+                                    return {
+                                        bind: viewId,
+                                        view: () => {
+                                            let imageArray = [];
+                                            if (vm.loading) {
+                                                return String.raw `<div class="d-flex align-items-center justify-content-center w-100 flex-column pt-3">
+                                <div class="spinner-border" role="status">
+                                    <span class="sr-only"></span>
+                                </div>
+                                <span class="mt-2">載入中...</span>
+                            </div>`;
+                                            }
+                                            return html ` ${gvc.bindView(() => {
+                                                return {
+                                                    bind: messageID,
+                                                    view: () => {
+                                                        try {
+                                                            return ` 
+                                                <div class="my-auto flex-fill"></div>
+                                                   <div class="w-100" id="message-lines">
+                                                          ${vm.data
+                                                                .map((dd, index) => {
+                                                                return CustomerMessageUser.message_line(dd, index, gvc, vm, cf, chatRoomInf);
+                                                            })
+                                                                .join('')}
+                                                    </div>
+                                            ${vm.data.length === 0
+                                                                ? `
+                                            <div class="w-100 text-center no_message"><div class="badge bg-secondary">尚未展開對話，於下方輸入訊息並傳送。</div></div>
+                                            `
+                                                                : ``}`;
+                                                        }
+                                                        catch (e) {
+                                                            console.log(e);
+                                                            return `${e}`;
+                                                        }
+                                                    },
+                                                    divCreate: {
+                                                        class: `chatContainer p-3 d-flex flex-column `,
+                                                        style: `overflow-y: auto;height: calc(100% - 150px);background: white;padding-bottom:${cf.hideBar ? `80` : `0`}px !important;`,
+                                                    },
+                                                    onCreate: () => {
+                                                        vm.close = false;
+                                                        let targetElement = document.querySelector('.chatContainer');
+                                                        if (vm.lastScroll === -1) {
+                                                            const clock = gvc.glitter.ut.clock();
+                                                            const interval = setInterval(() => {
+                                                                if (clock.stop() > 1000) {
+                                                                    clearInterval(interval);
+                                                                }
+                                                                document.querySelector('.chatContainer').scrollTop = document.querySelector('.chatContainer').scrollHeight;
+                                                            }, 50);
+                                                        }
+                                                        else {
+                                                            if (vm.prefixScroll) {
+                                                                vm.lastScroll = targetElement.scrollHeight - vm.prefixScroll + vm.lastScroll;
+                                                                vm.prefixScroll = 0;
+                                                            }
+                                                            document.querySelector('.chatContainer').scrollTop = vm.lastScroll;
+                                                        }
+                                                        targetElement.addEventListener('scroll', () => {
+                                                            vm.lastScroll = targetElement.scrollTop;
+                                                            if (targetElement.scrollTop === 0) {
+                                                                if (vm.loading) {
+                                                                    return;
+                                                                }
+                                                                vm.loading = true;
+                                                                Chat.getMessage({
+                                                                    page: 0,
+                                                                    limit: 50,
+                                                                    chat_id: cf.chat.chat_id,
+                                                                    olderID: vm.data[0].id,
+                                                                    user_id: cf.user_id,
+                                                                }).then((res) => {
+                                                                    vm.loading = false;
+                                                                    vm.prefixScroll = targetElement.scrollHeight;
+                                                                    vm.data = res.response.data.reverse().concat(vm.data);
+                                                                    gvc.notifyDataChange(viewId);
+                                                                });
+                                                            }
+                                                        });
+                                                    },
+                                                };
+                                            })}
+                                        ${gvc.bindView({
+                                                bind: "inputRow",
+                                                view: () => {
+                                                    return html `
+                                                    ${gvc.bindView({
+                                                        bind: 'imageBox',
+                                                        view: () => {
+                                                            if (imageArray.length == 0) {
+                                                                return ``;
+                                                            }
+                                                            else {
+                                                                return html `
+                                                                    <div class="d-flex align-items-center w-100"
+                                                                         style="overflow-x: scroll;gap: 5px;padding:10px 0;margin-bottom:10px;">
+                                                                        ${(() => {
+                                                                    return imageArray.map((url, index) => {
+                                                                        return html `
+                                                                                    <div class=""
+                                                                                         style="position: relative;flex-shrink: 0;width: 25%;aspect-ratio: 1 / 1;background:50%/cover  url('${url}')">
+                                                                                        <i class="fa-sharp fa-regular fa-circle-xmark bg-white"
+                                                                                           style="position: absolute;right: -6px;top: -6px;cursor:pointer;font-size: 20px" onclick="${gvc.event(() => {
+                                                                            imageArray.splice(index, 1);
+                                                                            gvc.notifyDataChange('imageBox');
+                                                                        })}"></i>
+                                                                                    </div>
+                                                                                `;
+                                                                    });
+                                                                })()}
+
+                                                                    </div>
+                                                                `;
+                                                            }
+                                                        }, divCreate: {
+                                                            class: `d-flex w-100`,
+                                                            style: ``
+                                                        }
+                                                    })}
+                                                    <div class="d-flex  w-100">
+                                                        <div class="d-flex align-items-center">
+                                                            <button
+                                                                    type="button"
+                                                                    class="btn btn-icon d-sm-inline-flex text-white"
+                                                                    style="height: 36px;"
+                                                                    onclick="${gvc.event(() => {
+                                                        const queryParams = new URLSearchParams(window.location.search);
+                                                        if (queryParams.get('function') != "backend-manger") {
+                                                            gvc.glitter.ut.chooseMediaCallback({
+                                                                single: true,
+                                                                accept: 'json,image/*',
+                                                                callback(data) {
+                                                                    const saasConfig = window.saasConfig;
+                                                                    const dialog = new ShareDialog(gvc.glitter);
+                                                                    dialog.dataLoading({ visible: true });
+                                                                    const file = data[0].file;
+                                                                    saasConfig.api.uploadFile(file.name).then((data) => {
+                                                                        dialog.dataLoading({ visible: false });
+                                                                        const data1 = data.response;
+                                                                        dialog.dataLoading({ visible: true });
+                                                                        const objP = {
+                                                                            url: data1.url,
+                                                                            type: 'put',
+                                                                            data: file,
+                                                                            headers: {
+                                                                                "Content-Type": data1.type
+                                                                            },
+                                                                            processData: false,
+                                                                            crossDomain: true,
+                                                                            success: () => {
+                                                                                dialog.dataLoading({ visible: false });
+                                                                                imageArray.push(data1.fullUrl);
+                                                                                gvc.notifyDataChange(`inputRow`);
+                                                                            },
+                                                                            error: () => {
+                                                                                dialog.dataLoading({ visible: false });
+                                                                                dialog.errorMessage({ text: '上傳失敗' });
+                                                                            },
+                                                                        };
+                                                                        if (file.type.indexOf('svg') !== -1) {
+                                                                            objP["headers"] = {
+                                                                                "Content-Type": file.type
+                                                                            };
+                                                                        }
+                                                                        $.ajax(objP);
+                                                                    });
+                                                                },
+                                                            });
+                                                        }
+                                                        else {
+                                                            imageLibrary.selectImageLibrary(gvc, (urlArray) => {
+                                                                imageArray.push(...urlArray.map((data) => {
+                                                                    return data.data;
+                                                                }));
+                                                                gvc.notifyDataChange(`inputRow`);
+                                                            }, `<div class="d-flex flex-column" style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;">圖片庫</div>`, { mul: true });
+                                                        }
+                                                    })}"
+                                                            >
+                                                                <i class="fa-sharp fa-solid fa-image"
+                                                                   style="font-size: 23px;color: #393939;"></i>
+                                                            </button>
+                                                        </div>
+
+                                                        <div class="position-relative w-100 me-2 ms-1 d-flex flex-column"
+                                                             style="">
+                                                            ${gvc.bindView(() => {
+                                                        return {
+                                                            bind: textAreaId,
+                                                            view: () => {
+                                                                var _a;
+                                                                return (_a = vm.message) !== null && _a !== void 0 ? _a : '';
+                                                            },
+                                                            divCreate: {
+                                                                elem: `textArea`,
+                                                                style: `max-height:100px;white-space: pre-wrap; word-wrap: break-word;height:40px;min-height:auto;height:45px;`,
+                                                                class: `form-control`,
+                                                                option: [
+                                                                    { key: 'placeholder', value: '輸入訊息內容' },
+                                                                    {
+                                                                        key: 'onchange',
+                                                                        value: gvc.event((e) => {
+                                                                            vm.message = e.value;
+                                                                        }),
+                                                                    },
+                                                                ],
+                                                            },
+                                                            onCreate: () => {
+                                                                const input = gvc.getBindViewElem(id).get(0);
+                                                                input.addEventListener('input', function () {
+                                                                    console.log(`input.scrollHeight->`, input.scrollHeight);
+                                                                    input.style.height = 'auto';
+                                                                    input.style.height = input.scrollHeight + 'px';
+                                                                });
+                                                            },
+                                                        };
+                                                    })}
+                                                        </div>
+                                                        <div class="d-flex align-items-end h-100">
+                                                            <button
+                                                                    type="button"
+                                                                    class="btn btn-icon btn-lg  d-sm-inline-flex ms-1 text-white"
+                                                                    style="background: ${CustomerMessageUser.config.color};height:45px;"
+                                                                    onclick="${gvc.event(() => {
+                                                        const dialog = new ShareDialog(gvc.glitter);
+                                                        if (!imageArray.length && !vm.message) {
+                                                            dialog.errorMessage({ text: '請輸入訊息' });
+                                                            return;
+                                                        }
+                                                        dialog.dataLoading({
+                                                            visible: true
+                                                        });
+                                                        if (imageArray.length) {
+                                                            dialog.dataLoading({
+                                                                visible: true
+                                                            });
+                                                            for (const image of imageArray) {
+                                                                Chat.postMessage({
+                                                                    chat_id: cf.chat.chat_id,
+                                                                    user_id: cf.user_id,
+                                                                    message: {
+                                                                        image: image,
+                                                                        attachment: '',
+                                                                    },
+                                                                }).then((res) => {
+                                                                    imageArray = [];
+                                                                    gvc.notifyDataChange('imageBox');
+                                                                    dialog.dataLoading({
+                                                                        visible: false
+                                                                    });
+                                                                });
+                                                            }
+                                                        }
+                                                        if (vm.message) {
+                                                            dialog.dataLoading({
+                                                                visible: true
+                                                            });
+                                                            Chat.postMessage({
+                                                                chat_id: cf.chat.chat_id,
+                                                                user_id: cf.user_id,
+                                                                message: {
+                                                                    text: vm.message,
+                                                                    attachment: '',
+                                                                },
+                                                            }).then((res) => {
+                                                                vm.message = '';
+                                                                console.log(res);
+                                                                dialog.dataLoading({
+                                                                    visible: false
+                                                                });
+                                                            });
+                                                            const textArea = gvc.getBindViewElem(textAreaId).get(0);
+                                                            textArea.value = '';
+                                                            vm.message = '';
+                                                        }
+                                                        document.querySelector('.no_message').remove();
+                                                    })}"
+                                                            >
+                                                                <i class="fa-regular fa-paper-plane-top"></i>
+                                                            </button>
+                                                        </div>
+                                                    </div>
+
+
+                                                `;
+                                                }, divCreate: {
+                                                    class: `card-footer border-top d-flex flex-column align-items-center w-100 border-0 pt-3 pb-3 pe-4 ps-3 position-fixed bottom-0 position-sm-absolute`,
+                                                    style: `background: white;min-height:45px;`
+                                                }
+                                            })}`;
+                                        },
+                                        divCreate: {
+                                            class: `h-100`
+                                        },
+                                        onCreate: () => {
+                                        },
+                                        onDestroy: () => {
+                                            vm.close = true;
+                                            socket.close();
+                                        },
+                                    };
+                                }),
+                            ].join(''));
+                        }));
+                    },
+                    divCreate: {
+                        class: `h-100 bg-white w-100`
+                    }
+                };
+            });
+        }, 'CustomerMessageUser', {
+            animation: Animation.fade
+        });
+    }
     static robotMessage(gvc, goToChat) {
         const html = String.raw;
         return gvc.bindView(() => {
@@ -832,17 +1325,19 @@ export class CustomerMessageUser {
         var _a, _b;
         const html = String.raw;
         function drawChatContent() {
-            if (dd.message.image) {
-                return html `<img style="cursor: pointer;"
+            return `<span style="white-space: normal;word-break: break-all;">${(() => {
+                if (dd.message.image) {
+                    return html `<img style="cursor: pointer;"
                                  src="${dd.message.image}"
                                  alt="image"
                                  onclick="${gvc.event(() => {
-                    gvc.glitter.openDiaLog(new URL('./dialog/image-preview.js', gvc.glitter.root_path).href, 'preview', dd.message.image);
-                })}">`;
-            }
-            else {
-                return dd.message.text.replace(/\n/g, '<br>');
-            }
+                        gvc.glitter.openDiaLog(new URL('./dialog/image-preview.js', gvc.glitter.root_path).href, 'preview', dd.message.image);
+                    })}">`;
+                }
+                else {
+                    return dd.message.text.replace(/\n/g, '<br>');
+                }
+            })()}</span>`;
         }
         dd.message.text = dd.message.text || "";
         if (dd.user_id == 'manager') {