ts-glitter 18.2.6 → 18.2.8

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

@@ -1,11 +1,9 @@
 import {GVC} from "../glitterBundle/GVController.js";
 import {ApiUser} from "../glitter-base/route/user.js";
 import {Chat} from "../glitter-base/route/chat.js";
-import {TriggerEvent} from "../glitterBundle/plugins/trigger-event.js";
 import {imageLibrary} from "../modules/image-library.js";
-import {ApiPageConfig} from "../api/pageConfig.js";
-import {BaseApi} from "../glitterBundle/api/base.js";
 import {ShareDialog} from "../glitterBundle/dialog/ShareDialog.js";
+import {Animation} from "../glitterBundle/module/Animation.js";
 
 export class CustomerMessageUser {
     public static config: any = {}
@@ -39,7 +37,9 @@ export class CustomerMessageUser {
         } = {
             viewType: (cf.viewType as any) || 'robot',
         };
-
+        if(gvc.glitter.getUrlParameter('page').startsWith('products/') && document.body.clientWidth<800){
+            return  ``
+        }
         return gvc.bindView(() => {
             const id = gvc.glitter.getUUID();
             return {
@@ -420,7 +420,6 @@ export class CustomerMessageUser {
                                 };
                             }),
                             gvc.bindView(() => {
-
                                 const messageID = gvc.glitter.getUUID();
                                 const vm: {
                                     data: any;
@@ -846,6 +845,542 @@ export class CustomerMessageUser {
         });
     }
 
+
+    public static mobileChat(cf: {
+        gvc: GVC;
+        chat: any;
+        user_id: string;
+        hideBar?: boolean
+    }) {
+        const gvc = cf.gvc;
+        const css = String.raw;
+        const viewId = gvc.glitter.getUUID();
+        let chatRoomInf: any = {}
+        document.body.style.setProperty('overflow-y', 'hidden', 'important');
+
+        gvc.glitter.innerDialog((gvc: GVC) => {
+            return gvc.bindView(() => {
+                const id = gvc.glitter.getUUID();
+                return {
+                    bind: id,
+                    view: () => {
+                        return new Promise(async (resolve, reject) => {
+                            const config = (await 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(async (resolve, reject) => {
+                                                const chatRoom = (
+                                                    await 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: any;
+                                        loading: boolean;
+                                        scrollToBtn: boolean;
+                                        lastScroll: number;
+                                        message: string;
+                                        prefixScroll: number;
+                                        last_read: any;
+                                        close: boolean;
+                                    } = {
+                                        data: [],
+                                        loading: true,
+                                        scrollToBtn: false,
+                                        lastScroll: -1,
+                                        message: '',
+                                        prefixScroll: 0,
+                                        last_read: {},
+                                        close: false,
+                                    };
+                                    //chat_id
+                                    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 as any).glitterBackend);
+
+                                    let socket: any = 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: any) {
+                                            console.log('Connected to server');
+                                            socket.send(
+                                                JSON.stringify({
+                                                    type: 'message',
+                                                    chatID: cf.chat.chat_id,
+                                                    user_id: cf.user_id,
+                                                    app_name: (window as any).appName
+                                                })
+                                            );
+                                        });
+                                        let interVal: any = 0;
+                                        socket.addEventListener('message', function (event: any) {
+                                            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: any = 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`) as any).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: any) {
+                                            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: any[] = []
+                                            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: any, index: number) => {
+                                                                    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: string,index:number) => {
+                                                                        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: any) {
+                                                                    const saasConfig: {
+                                                                        config: any;
+                                                                        api: any
+                                                                    } = (window as any).saasConfig;
+                                                                    const dialog = new ShareDialog(gvc.glitter);
+                                                                    dialog.dataLoading({visible: true});
+                                                                    const file = data[0].file;
+                                                                    saasConfig.api.uploadFile(file.name).then((data: any) => {
+                                                                        dialog.dataLoading({visible: false});
+                                                                        const data1 = data.response;
+                                                                        dialog.dataLoading({visible: true});
+                                                                        const objP: any = {
+                                                                            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
+                                                                    }))
+                                                                    // postMD.content_array = id
+                                                                    // obj.gvc.notifyDataChange(bi)
+                                                                    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: () => {
+                                                                return vm.message ?? '';
+                                                            },
+                                                            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'; // 设置为内容高度
+                                                                });
+
+                                                                // autosize(gvc.getBindViewElem(id))
+                                                            },
+                                                        };
+                                                    })}
+                                                        </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 = '';
+
+                                                            // textArea.focus();
+                                                        }
+                                                                        (document.querySelector('.no_message') as any).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
+        })
+    }
+
     public static robotMessage(gvc: GVC, goToChat: (text: string) => void) {
         const html = String.raw;
         return gvc.bindView(() => {
@@ -929,17 +1464,19 @@ export class CustomerMessageUser {
         const html = String.raw
 
         function drawChatContent() {
-            if (dd.message.image) {
+          return `<span style="white-space: normal;word-break: break-all;">${(()=>{
+              if (dd.message.image) {
 
-                return html`<img style="cursor: pointer;"
+                  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 || "";

package/lowcode/cms-plugin/shopping-finance-setting.js

@@ -537,18 +537,18 @@ export class ShoppingFinanceSetting {
                                                                     BgWidget.editeInput({
                                                                         gvc: gvc,
                                                                         title: '串接帳號',
-                                                                        default: key_d.public_key,
+                                                                        default: key_d.account,
                                                                         callback: (text) => {
-                                                                            key_d.public_key = text;
+                                                                            key_d.account = text;
                                                                         },
                                                                         placeHolder: '請輸入串接帳號',
                                                                     }),
                                                                     BgWidget.editeInput({
                                                                         gvc: gvc,
                                                                         title: '串接密碼',
-                                                                        default: key_d.private_key,
+                                                                        default: key_d.pwd,
                                                                         callback: (text) => {
-                                                                            key_d.private_key = text;
+                                                                            key_d.pwd = text;
                                                                         },
                                                                         placeHolder: '請輸入串接密碼',
                                                                     })