dc-ui/public/demoData/chat.js

export function initChat() {
    if (!isNeedChat()) {
        return
    }

    // Your CSS as text
    let styles = `
body {
    background-color: #f5f5f5;
}

#chat-assistant-container {
    position: fixed;
    right: 40px;
    bottom: 86px;
    z-index:9990;
}

#chat-assistant-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(135deg, rgb(215 98 150 / 55%),rgb(34 78 139 / 71%), rgb(114 222 172));
    box-shadow: 0px 0px 8px 1px rgb(0 0 0 / 22%);
    color: #fff;
    text-shadow: 1px 1px 3px rgb(0 0 0 / 56%);
}


#chat-container {
    position: fixed;
    padding: 10px;
    top: 45%;
    left: 50%;
    z-index:9990;
    transform: translate(-50%, -50%);
    display: none;
    border-radius: 5px;
    width: 40%;
    background: linear-gradient(135deg, rgb(215 98 150 / 92%),rgb(34 78 139 / 93%), rgb(114 222 172 / 94%));
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}



#chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 10px 0;
    border-radius: 5px 5px 0 0;
    cursor: move;
}

#loading-indicator {
    width: 14px;
    height: 14px;
    margin: 0 10px 0 10px;
    border: 2px solid #ccc;
    border-top-color: #4caf50;
    border-radius: 50%;
    animation: spin 2s linear infinite;
    visibility: hidden;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#chat-header .show-loading {
    visibility: visible;
}

#chat-header .hide-loading {
    visibility: hidden;
}


#circle-button {
    padding: 0;
    border: none;
    background-color: transparent;
    font-size: 16px;
    user-select: none;
    display: flex;
    align-items: center;
    color: #fff; 
    text-shadow: 1px 1px 3px black;
}

#close-button {
    cursor: pointer;
    padding: 0;
    border: none;
    background-color: transparent;
    font-size: 24px;
    color: #fff; 
    text-shadow: 1px 1px 3px black;
}
#send-button {
    cursor: pointer;
    padding: 0;
    border: none;
    background-color: transparent;
    font-size: 16px;
}

#close-button:hover,
#send-button:hover {
    color: #888;
}

#chat-input-container,
#chat-input {
    border: none;
}

#chat-input-container {
    display: flex;
    align-items: center;
    border-radius: 5px;
    background-color: #fff;
    padding: 10px;
}

#chat-input {
    flex: 1;
    padding: 0;
    margin-right: 5px;
    border-radius: 5px;
    overflow-y: auto;
    height: 24px;
    font-size: 1rem;
    outline: none;
    resize: none;
    background: transparent;
}

#send-button {
    background-color: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
}

#send-button>span {
    height: 16px;
    width: 16px;
}

#send-button:enabled {
    background-color: rgb(120,198,174);
}

#send-button:enabled svg path {
    fill: #fff;
}
`

    let styleSheet = document.createElement("style")
    styleSheet.innerText = styles
    document.head.appendChild(styleSheet)


    const html = `<div id="chat-assistant-container">
            <button id="chat-assistant-button">🤖AI</button>
        </div>
    
        <div id="chat-container">
            <div id="chat-header">
                <span id="circle-button">Univer AI 助手<div id="loading-indicator"></div></span>
    
                <button id="close-button">×</button>
            </div>
            <div id="chat-input-container">
                <textarea id="chat-input" placeholder="请输入问题"></textarea>
                <!-- <textarea id="chat-input" placeholder="请输入问题"></textarea> -->
                <button id="send-button" disabled>
                    <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="h-4 w-4 m-1 md:m-0"
                            stroke-width="2">
                            <path
                                d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
                                fill="currentColor"></path>
                        </svg></span>
                </button>
            </div>
    
        </div>`;
    document.body.insertAdjacentHTML('beforeend', html)


    const assistantButton = document.getElementById('chat-assistant-button');
    const chatContainer = document.getElementById('chat-container');
    const closeButton = document.getElementById('close-button');
    const chatInput = document.getElementById('chat-input');
    const sendButton = document.getElementById('send-button');
    const loadingIndicator = document.getElementById('loading-indicator');

    assistantButton.addEventListener('click', function () {
        chatContainer.style.display = 'block';
    });

    closeButton.addEventListener('click', function () {
        chatContainer.style.display = 'none';
    });

    sendButton.addEventListener('click', function () {
        const message = chatInput.value;
        if (message.trim() !== '') {
            // 处理发送消息的逻辑

            chatInput.value = '';
            resetButton(chatInput)

            // 显示 Loading
            loadingIndicator.classList.add('show-loading');
            setTimeout(() => {
                setFormuala(message);
                // 隐藏 Loading
                loadingIndicator.classList.remove('show-loading');
            }, 1000);
        }


    });

    chatInput.addEventListener('input', function () {
        inputHandler(this)
    });

    function inputHandler(input) {
        if (input.scrollHeight > 24) {
            input.style.height = 'auto'
        }
        input.style.height = input.scrollHeight + 'px'; // 根据内容高度设置 textarea 高度
        if (input.scrollHeight > 200) {
            input.style.overflowY = 'scroll'
        } else {
            input.style.overflowY = 'hidden'
        }

        resetButton(input)

    }

    function resetButton(input) {
        if (input.value.trim() !== '') {
            sendButton.disabled = false;
            sendButton.classList.add('enabled');
        } else {
            input.style.height = '24px'; // 重置高度为一行
            sendButton.disabled = true;
            sendButton.classList.remove('enabled');
        }
    }

    // 快捷键
    let isComposing = false;

    chatInput.addEventListener('compositionstart', function () {
        isComposing = true;
    });

    chatInput.addEventListener('compositionend', function () {
        isComposing = false;
    });

    chatInput.addEventListener('keydown', function (event) {
        const isWindows = navigator.platform.includes('Win');
        const isMac = navigator.platform.includes('Mac');

        const key = event.key;

        if (isWindows && event.key === 'Enter' && !isComposing && !event.altKey) {
            // Windows 上的 Enter 键触发发送
            event.preventDefault();
            sendButton.click();
        } else if (isWindows && event.key === 'Enter' && !isComposing && event.altKey) {
            // Windows 上的 Alt+Enter 键触发换行
            event.preventDefault();
            this.value += '\n';
        } else if (isMac && event.key === 'Enter' && !isComposing && !event.metaKey) {
            // Mac 上的 Enter 键触发发送
            event.preventDefault();
            sendButton.click();
        } else if (isMac && event.key === 'Enter' && !isComposing && event.metaKey) {
            // Mac 上的 Command+Enter 键触发换行
            event.preventDefault();
            this.value += '\n';
        } else if (!isComposing && (key === "Backspace" || key === "Delete")) {

        }

        inputHandler(this)
    });


    // 添加拖拽功能
    let isDragging = false;
    let offset = { x: 0, y: 0 };

    const chatHeader = document.getElementById('chat-header');

    chatHeader.addEventListener('mousedown', function (event) {
        isDragging = true;
        offset.x = event.clientX - chatContainer.offsetLeft;
        offset.y = event.clientY - chatContainer.offsetTop;
    });

    document.addEventListener('mousemove', function (event) {
        if (isDragging) {
            chatContainer.style.left = `${event.clientX - offset.x}px`;
            chatContainer.style.top = `${event.clientY - offset.y}px`;
        }
    });

    document.addEventListener('mouseup', function () {
        isDragging = false;
    });
}

const needChatHosts = [
    'crm.lashuju.com',
    'localhost:3000'
]
function isNeedChat() {
    const host = location.host;
    if (needChatHosts.includes(host)) {
        return true
    }

    return false
}


function setFormuala(sentence = '') {

    let link = getLink(sentence)

    if (link !== '') {
        setGET_AIRTABLE(link)
    } else {
        setASK_AI(sentence)
    }

}

function setASK_AI(sentence = '') {

    let range = getRange(sentence);

    range = range === '' ? '' : ',' + range
    const data = [
        [
            {
                "f": "=ASK_AI(\"" + sentence + "\"" + range + ")"
            }
        ]
    ]
    luckysheet.setRangeValue(data)
}

function setGET_AIRTABLE(link) {
    const data = [
        [
            {
                "f": "=GET_AIRTABLE_DATA(\"" + link + "\")"
            }
        ]
    ]
    luckysheet.setRangeValue(data)
}

function getLink(sentence = '') {
    const regex = /(https?:\/\/(?:www\.)?airtable\.com\/\S+)/gi;
    const matches = sentence.match(regex);

    if (matches) {
        return matches[0];
    }

    return ''

}

function getRange(text) {
    const regex = /([A-Z]+[0-9]*):([A-Z]+[0-9]*)/g;
    const matche = text.match(regex);
    if (matche) {
        return matche[0]
    }
    return ''
}