Review of Magic Hour by Kristin Hannah

Chat with the book

/* FULL-WIDTH container */
#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;
}

/* 25% SHORTER height (300px) */
#flowise-chat-box {
display: flex;
flex-direction: column;
height: 300px; /* was 400px */
overflow-y: auto;
background: #ffffff;
padding: 15px;
border-radius: 10px;
}

#flowise-chat-history {
flex-grow: 1;
overflow-y: auto;
max-height: 250px; /* proportionally shorter */
padding-bottom: 15px;
display: flex;
flex-direction: column;
}

.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;
}

/* Right-align text field and button */
#flowise-chat-input {
display: flex;
justify-content: flex-end; /* Align to the right */
align-items: center;
gap: 10px;
margin-top: 10px;
}

#book-question {
padding: 12px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 25px;
flex-grow: 1;
}

#book-question:focus {
outline: none;
border-color: #0078d4;
box-shadow: 0 0 3px rgba(0, 120, 212, 0.3);
}

#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);
}

/* Spinner bubble */
.flowise-ai-empty {
background: #e3e3e3;
border-radius: 15px;
padding: 10px 15px;
margin-bottom: 10px;
align-self: flex-start;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}

.spinner-dot {
width: 8px;
height: 8px;
margin: 0 3px;
background-color: #666;
border-radius: 50%;
display: inline-block;
animation: dotPulse 1.5s infinite ease-in-out;
}

.spinner-dot:nth-child(2) {
animation-delay: 0.2s;
}

.spinner-dot:nth-child(3) {
animation-delay: 0.4s;
}

@keyframes dotPulse {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}

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 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=””;

// Add an empty AI bubble with spinner
const emptyAIBubble = document.createElement(‘div’);
emptyAIBubble.className=”flowise-chat-bubble flowise-ai-empty”;
emptyAIBubble.id = ‘ai-empty-bubble’;
emptyAIBubble.innerHTML = `

`;
chatHistory.appendChild(emptyAIBubble);

// Auto-scroll after user message + spinner
chatHistory.scrollTop = chatHistory.scrollHeight;

// AJAX request to Flowise
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 => {
// remove the empty bubble
emptyAIBubble.parentNode.removeChild(emptyAIBubble);

// add the real AI 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 => {
// remove the empty bubble
emptyAIBubble.parentNode.removeChild(emptyAIBubble);

// error bubble
const errorBubble = document.createElement(‘div’);
errorBubble.className=”flowise-chat-bubble flowise-ai”;
errorBubble.innerHTML = ‘AI: Sorry, an error occurred.’;
chatHistory.appendChild(errorBubble);

// Auto-scroll
chatHistory.scrollTop = chatHistory.scrollHeight;
});
}