更新xlsx预览样式
陈精华
parent
e39e8bd907
commit
8d5c987fe7
|
|
@ -0,0 +1,410 @@
|
|||
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 ''
|
||||
}
|
||||
Loading…
Reference in New Issue