
Chat with the book
function askFlowise() {
const postId = document.getElementById(‘post-id’).value;
const question = document.getElementById(‘book-question’).value.trim();
const chatHistory = document.getElementById(‘flowise-chat-history’);
if (question === ”) return;
// User message bubble
const userMessage = document.createElement(‘div’);
userMessage.className=”flowise-chat-bubble flowise-user”;
userMessage.innerHTML = ‘You: ‘ + question;
chatHistory.appendChild(userMessage);
// Clear input
document.getElementById(‘book-question’).value=””;
// Loading indicator
const loadingMessage = document.createElement(‘div’);
loadingMessage.className=”flowise-chat-bubble flowise-ai”;
loadingMessage.innerHTML = ‘AI: Thinking…’;
chatHistory.appendChild(loadingMessage);
// Auto-scroll
chatHistory.scrollTop = chatHistory.scrollHeight;
// AJAX request to Flowise API
fetch(‘https://canecto.com/wp-admin/admin-ajax.php’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ },
body: ‘action=flowise_book_chat&post_id=’ + encodeURIComponent(postId) + ‘&question=’ + encodeURIComponent(question)
})
.then(response => response.json())
.then(data => {
loadingMessage.remove(); // Remove loading text
// AI response bubble
const aiBubble = document.createElement(‘div’);
aiBubble.className=”flowise-chat-bubble flowise-ai”;
aiBubble.innerHTML = ‘AI: ‘ + (data.text || data.error);
chatHistory.appendChild(aiBubble);
// Auto-scroll
chatHistory.scrollTop = chatHistory.scrollHeight;
})
.catch(error => {
loadingMessage.remove(); // Remove loading text
const errorBubble = document.createElement(‘div’);
errorBubble.className=”flowise-chat-bubble flowise-ai”;
errorBubble.innerHTML = ‘AI: Sorry, an error occurred.’;
chatHistory.appendChild(errorBubble);
chatHistory.scrollTop = chatHistory.scrollHeight;
});
}
/* Container style matching the7 template design */
#flowise-chat-container {
width: 100%;
background: #f8f8f8;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
font-family: Arial, sans-serif;
padding: 20px;
}
/* Chat box */
#flowise-chat-box {
display: flex;
flex-direction: column;
height: 300px;
overflow-y: auto;
background: #ffffff;
padding: 15px;
border-radius: 10px;
}
/* Chat history */
#flowise-chat-history {
flex-grow: 1;
overflow-y: auto;
max-height: 250px;
padding-bottom: 15px;
display: flex;
flex-direction: column;
}
/* Chat bubbles */
.flowise-chat-bubble {
max-width: 75%;
padding: 10px 15px;
border-radius: 15px;
margin-bottom: 10px;
line-height: 1.4;
}
.flowise-user {
background: #0078D4;
color: #fff;
align-self: flex-end;
text-align: right;
margin-left: auto;
}
.flowise-ai {
background: #e3e3e3;
color: #000;
align-self: flex-start;
margin-right: auto;
}
/* Chat input container */
#flowise-chat-input {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
margin-top: 10px;
}
/* Input field */
#book-question {
padding: 12px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 25px;
flex-grow: 1;
}
/* Send button */
#flowise-send-btn {
padding: 12px 20px;
font-size: 16px;
font-weight: 600;
background: linear-gradient(135deg, #0078D4 0%, #005BB5 100%);
color: #fff;
border: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
#flowise-send-btn:hover {
background: linear-gradient(135deg, #005BB5 0%, #004a9f 100%);
box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}
The post Review of A Longtime (and now the boss) Ex-boyfriend: a second chance, sweet romcom (Small Town, Big Sky Romance) by Janette Rallison appeared first on Canecto.