Your AI Project Manager in Slack

/** * Thor Chat Interaction * Handles: question select → type → send → user bubble → thinking → answer */ (function () { "use strict"; /* ─── Config ─────────────────────────────── */ const TYPING_SPEED = 30; // ms per character — comfortable reading pace const THINKING_MIN = 2000; // ms min thinking time const THINKING_MAX = 2600; // ms max thinking time const SEND_SCALE_DUR = 380; // ms send button animation /* ─── DOM refs ────────────────────────────── */ const questionsWrapper = document.querySelector(".ask_questions-wrapper"); const typeInput = document.querySelector(".type_input"); const shareIconWrap = document.querySelector(".share_icon-wrap"); const chatArea = document.querySelector(".chat_area"); // Templates (already in DOM, cloned not moved) const userBubbleTemplate = chatArea ? chatArea.querySelector(".chat_content.user") : null; const dummyLoadingTemplate = chatArea ? chatArea.querySelector(".chat_content.dummy-loading") : null; if (!questionsWrapper || !typeInput || !shareIconWrap || !chatArea) { console.warn("[Thor] Missing required DOM elements. Aborting."); return; } /* ─── State ───────────────────────────────── */ let isAnimating = false; let typeInterval = null; let activeClone = null; // current dummy-loading clone in DOM /* ─── CSS injected once ───────────────────── */ const style = document.createElement("style"); style.textContent = ` /* Send button spring press */ .share_icon-wrap { transition: transform 160ms cubic-bezier(0.34,1.7,0.64,1); cursor: pointer; display: inline-flex; } .share_icon-wrap.pressed { transform: scale(0.72); } /* Question active state */ .ask_question.active { opacity: 1; } /* User bubble entrance - rises with tiny scale */ @keyframes thorSlideIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .chat_content--entering { animation: thorSlideIn 460ms cubic-bezier(0.16,1,0.3,1) both; } /* Thinking - sequential wave */ @keyframes thorWave { 0%,60%,100% { opacity: 0.25; transform: scaleX(1); } 30% { opacity: 1; transform: scaleX(1.015); } } .chat_content.dummy-loading .dummy_chat { animation: thorWave 2s ease-in-out infinite; transform-origin: left center; } .chat_content.dummy-loading .dummy_chat:nth-child(2) { animation-delay: 0.18s; } .chat_content.dummy-loading .dummy_chat:nth-child(3) { animation-delay: 0.36s; } /* Answer entrance - slightly slower for weight */ @keyframes thorFadeUp { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .chat_content--answer-in { animation: thorFadeUp 520ms cubic-bezier(0.16,1,0.3,1) both; } `; document.head.appendChild(style); /* ─── Helpers ─────────────────────────────── */ function scrollChatToBottom() { chatArea.scrollTo({ top: chatArea.scrollHeight, behavior: "smooth" }); } function clearActiveQuestion() { questionsWrapper .querySelectorAll(".ask_question.active") .forEach((el) => el.classList.remove("active")); } function clearTypeInterval() { if (typeInterval) { clearInterval(typeInterval); typeInterval = null; } } function typeText(text, onDone) { clearTypeInterval(); typeInput.value = ""; let i = 0; typeInterval = setInterval(() => { if (i < text.length) { typeInput.value += text[i]; i++; } else { clearTypeInterval(); if (onDone) onDone(); } }, TYPING_SPEED); } function animateSendButton(onDone) { shareIconWrap.classList.add("pressed"); setTimeout(() => { shareIconWrap.classList.remove("pressed"); setTimeout(onDone, SEND_SCALE_DUR / 2); }, SEND_SCALE_DUR / 2); } function hideAllAnswers() { chatArea .querySelectorAll(".chat_content[chat-answer]") .forEach((el) => (el.style.display = "none")); } function hideUserBubble() { if (userBubbleTemplate) userBubbleTemplate.style.display = "none"; } function hideDummyLoading() { if (dummyLoadingTemplate) dummyLoadingTemplate.style.display = "none"; // also remove any live clone if (activeClone && activeClone.parentNode) { activeClone.parentNode.removeChild(activeClone); activeClone = null; } } function resetChatArea() { hideUserBubble(); hideDummyLoading(); hideAllAnswers(); typeInput.value = ""; } /* ─── Main flow ───────────────────────────── */ function runChatFlow(questionNum, questionText) { if (isAnimating) return; isAnimating = true; // 1. Reset existing chat state resetChatArea(); // 2. Type text into input typeText(questionText, () => { // 3. Animate send button animateSendButton(() => { typeInput.value = ""; // Brief breath before bubble appears — feels intentional setTimeout(() => { // 4. Show user bubble showUserBubble(questionText, () => { // 5. Show thinking state showThinking(() => { // 6. Show answer showAnswer(questionNum, () => { isAnimating = false; }); }); }); }, 140); // end breath timeout }); }); } function showUserBubble(text, onDone) { if (!userBubbleTemplate) { onDone(); return; } // Update user text const userTextEl = userBubbleTemplate.querySelector("[user-text]"); if (userTextEl) userTextEl.textContent = text; userBubbleTemplate.style.display = ""; userBubbleTemplate.classList.add("chat_content--entering"); scrollChatToBottom(); userBubbleTemplate.addEventListener( "animationend", () => { userBubbleTemplate.classList.remove("chat_content--entering"); onDone(); }, { once: true } ); } function showThinking(onDone) { if (!dummyLoadingTemplate) { setTimeout(onDone, THINKING_MIN); return; } // Clone so original stays as template const clone = dummyLoadingTemplate.cloneNode(true); clone.style.display = ""; clone.classList.add("chat_content--entering"); // Insert after user bubble const insertAfter = userBubbleTemplate || null; if (insertAfter && insertAfter.nextSibling) { chatArea.insertBefore(clone, insertAfter.nextSibling); } else { chatArea.appendChild(clone); } activeClone = clone; scrollChatToBottom(); const thinkTime = THINKING_MIN + Math.random() * (THINKING_MAX - THINKING_MIN); setTimeout(() => { // Collapse height + fade — feels like it dissolves naturally const h = clone.offsetHeight; clone.style.overflow = "hidden"; clone.style.transition = "opacity 300ms ease, max-height 360ms cubic-bezier(0.4,0,0.2,1), margin 360ms ease, padding 360ms ease"; clone.style.maxHeight = h + "px"; // Force reflow clone.offsetHeight; // eslint-disable-line no-unused-expressions clone.style.opacity = "0"; clone.style.maxHeight = "0"; clone.style.marginTop = "0"; clone.style.marginBottom = "0"; clone.style.paddingTop = "0"; clone.style.paddingBottom = "0"; setTimeout(() => { if (clone.parentNode) clone.parentNode.removeChild(clone); if (activeClone === clone) activeClone = null; onDone(); }, 380); }, thinkTime); } function showAnswer(questionNum, onDone) { const answerEl = chatArea.querySelector( `.chat_content[chat-answer="${questionNum}"]` ); if (!answerEl) { console.warn(`[Thor] No answer found for chat-answer="${questionNum}"`); onDone(); return; } answerEl.style.display = ""; answerEl.classList.add("chat_content--answer-in"); scrollChatToBottom(); answerEl.addEventListener( "animationend", () => { answerEl.classList.remove("chat_content--answer-in"); onDone(); }, { once: true } ); } /* ─── Init ────────────────────────────────── */ // Hide all answers + user bubble + dummy on load resetChatArea(); // Bind question clicks const questions = questionsWrapper.querySelectorAll(".ask_question"); questions.forEach((questionEl) => { questionEl.addEventListener("click", () => { if (isAnimating) return; // Get question number from chat-question attribute const questionNum = questionEl.getAttribute("chat-question"); // Get label text (the visible text shown to user) const labelEl = questionEl.querySelector(".ask_question-label"); const questionText = labelEl ? labelEl.textContent.trim().replace(/^"|"$/g, "") // strip surrounding quotes : questionEl.textContent.trim(); // Active class on clicked question clearActiveQuestion(); questionEl.classList.add("active"); // Placeholder reflects active question typeInput.placeholder = questionText; // Run flow runChatFlow(questionNum, questionText); }); }); // Support: clicking send icon directly on typed text also triggers shareIconWrap.addEventListener("click", () => { const val = typeInput.value.trim(); if (!val || isAnimating) return; // Find matching question by text let matchedNum = null; questions.forEach((q) => { const lbl = q.querySelector(".ask_question-label"); const txt = lbl ? lbl.textContent.trim().replace(/^"|"$/g, "") : q.textContent.trim(); if (txt === val) { matchedNum = q.getAttribute("chat-question"); } }); if (matchedNum) runChatFlow(matchedNum, val); }); })();