function OutlineButton({ text, onClick, bgColor = 'bg-white' }) { const textColor = bgColor === 'bg-white' ? 'text-black' : 'text-white'; return /*#__PURE__*/ React.createElement("button", { className: `px-8 py-2 rounded-full border border-current ${textColor} font-inter bg-transparent hover:bg-opacity-10 transition-colors duration-300 w-[240px] h-[60px]`, onClick: onClick, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, text); } function OutlineButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col space-y-4 justify-center items-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(OutlineButton, { text: "Click me", onClick: ()=>alert('Button clicked!'), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(OutlineButton, { text: "Dark version", onClick: ()=>alert('Dark button clicked!'), bgColor: "bg-black", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function MainComponent() { const [questions, setQuestions] = useState([]); const [streamingMessage, setStreamingMessage] = useState(""); const [loading, setLoading] = useState(false); const [articleText, setArticleText] = useState(""); const [errors, setErrors] = useState({}); const [failedQuestions, setFailedQuestions] = useState([]); const [currentQuestion, setCurrentQuestion] = useState(1); const [loadingExample, setLoadingExample] = useState(false); const [streamingArticle, setStreamingArticle] = useState(""); const containerRef = useRef(null); const textareaRef = useRef(null); useEffect(()=>{ if (textareaRef.current) { textareaRef.current.scrollTop = textareaRef.current.scrollHeight; } }, [ streamingArticle ]); useEffect(()=>{ const sendHeight = ()=>{ if (containerRef.current) { window.parent.postMessage({ type: "resize", height: containerRef.current.scrollHeight }, "*"); } }; const observer = new ResizeObserver(sendHeight); if (containerRef.current) { observer.observe(containerRef.current); sendHeight(); } return ()=>{ if (containerRef.current) { observer.unobserve(containerRef.current); } observer.disconnect(); }; }, []); const handleArticleStream = useHandleStreamResponse({ onChunk: (chunk)=>{ try { const parsed = JSON.parse(chunk); if (parsed.choices?.[0]?.message?.content) { setStreamingArticle((prev)=>{ const newContent = parsed.choices[0].message.content; if (textareaRef.current) { setTimeout(()=>{ textareaRef.current.scrollTop = textareaRef.current.scrollHeight; }, 0); } return newContent; }); } } catch { setStreamingArticle((prev)=>{ if (textareaRef.current) { setTimeout(()=>{ textareaRef.current.scrollTop = textareaRef.current.scrollHeight; }, 0); } return chunk; }); } }, onFinish: (message)=>{ try { const parsed = JSON.parse(message); if (parsed.choices?.[0]?.message?.content) { const content = parsed.choices[0].message.content; setArticleText(content); } else { setArticleText(message); } } catch { setArticleText(message); } setLoadingExample(false); setStreamingArticle(""); } }); const handleQuestionStream = useHandleStreamResponse({ onChunk: (chunk)=>{ try { const parsed = JSON.parse(chunk); if (parsed.question) { setStreamingMessage(""); } } catch { setStreamingMessage(""); } }, onFinish: (message)=>{ try { const parsed = JSON.parse(message); setQuestions((prev)=>{ const newQuestions = [ ...prev, parsed ]; setTimeout(()=>{ if (newQuestions.length < 5) { generateSingleQuestion(newQuestions.length + 1); } else { setLoading(false); } }, 100); return newQuestions; }); } catch (e) { console.error("Failed to parse response"); setLoading(false); setFailedQuestions((prev)=>[ ...prev, questions.length + 1 ]); } } }); const generateRandomArticle = async ()=>{ setLoadingExample(true); setStreamingArticle(""); try { const response = await fetch("/integrations/anthropic-claude/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are an internal comms or L&D expert article writer, who writes internal content for your frontline teams. ONLY ever Output the article content with no preamble or metadata." }, { role: "user", content: "Write a professional internal communication article (300-500 words) for frontline teams, it can be about anything relevant, examples include: best practices for retail sales, developing future leaders, improving customer service, managing team performance, or effective communication. ONLY ever Output the article content with no preamble or metadata, do not mention things like 'Here is an article'." } ], stream: true }) }); if (!response.ok) throw new Error("Failed to generate example"); handleArticleStream(response); } catch (error) { console.error("Failed to generate example article:", error); setLoadingExample(false); } }; const generateSingleQuestion = async (questionNumber)=>{ if (questionNumber > 5) { setLoading(false); return; } const previousQuestions = questions.map((q)=>({ question: q.question, choices: q.choices, correctAnswers: q.correctAnswers, topics: q.question.split(" ").filter((word)=>word.length > 4) })); try { const response = await fetch("/integrations/anthropic-claude/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Generate question ${questionNumber} of 5 as a microlearning question from this article: "${articleText}". Requirements: 1. Focus on a completely different concept than these previous questions: ${JSON.stringify(previousQuestions)} 2. Question must be 140 characters or less 3. Each answer must be 140 characters or less 4. If the question number is 1, 3 or 5, always include exactly 3 answers, if it's 2 or 4, include 5 answers. 5. Only one answer should be correct in most cases 6. Provide brief feedback for both correct and incorrect responses 7. Do not prefix feedback with "Correct:" or "Incorrect:" 8. Make the question unique and distinct from previous ones in both topic and approach 9. Keep answers concise and to the point 10. Don't include questions that ask for the wrong answer (such as Which of these IS NOT) 11. Phrase questions positively - avoid words like 'not', 'never', 'none', 'except' 12. Focus on what IS true rather than what isn't` } ], json_schema: { name: "microlearning_question", schema: { type: "object", properties: { question: { type: "string", maxLength: 140 }, choices: { type: "array", items: { type: "string", maxLength: 140 }, minItems: 3, maxItems: 5 }, correctAnswers: { type: "array", items: { type: "number" }, maxItems: 1 }, correctFeedback: { type: "string" }, incorrectFeedback: { type: "string" } }, required: [ "question", "choices", "correctAnswers", "correctFeedback", "incorrectFeedback" ], additionalProperties: false } }, stream: true }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } handleQuestionStream(response); } catch (error) { setFailedQuestions((prev)=>[ ...prev, questionNumber ]); if (questionNumber < 5) { generateSingleQuestion(questionNumber + 1); } else { setLoading(false); } } }; const generateQuestions = async ()=>{ const minLength = 100; const text = articleText.trim(); if (!text) { setErrors({ article: "Please enter some text" }); return; } if (text.length < minLength) { setErrors({ article: `Text must be at least ${minLength} characters` }); return; } setErrors({}); setLoading(true); setQuestions([]); setFailedQuestions([]); setCurrentQuestion(1); generateSingleQuestion(1); }; const copyToClipboard = (text)=>{ navigator.clipboard.writeText(text); }; const PhantomQuestion = ({ index })=>/*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 border border-gray-100", __source: { fileName: "", lineNumber: 275, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-4", __source: { fileName: "", lineNumber: 276, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mt-1 w-6 h-6 bg-gray-200 rounded-full", __source: { fileName: "", lineNumber: 277, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 278, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-200 rounded-lg mb-4 w-3/4", __source: { fileName: "", lineNumber: 279, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 280, columnNumber: 11 }, __self: this }, index % 2 === 1 ? [ ...Array.from({ length: 5 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 283, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-6 h-6 bg-gray-200 rounded-full", __source: { fileName: "", lineNumber: 284, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 h-14 bg-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 285, columnNumber: 21 }, __self: this }))) : [ ...Array.from({ length: 3 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 289, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-6 h-6 bg-gray-200 rounded-full", __source: { fileName: "", lineNumber: 290, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 h-14 bg-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 291, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 295, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-6 bg-gray-200 rounded-lg w-1/4 mb-4", __source: { fileName: "", lineNumber: 296, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 297, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 298, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-6 h-6 bg-gray-200 rounded-full", __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 h-14 bg-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 300, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 302, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-6 h-6 bg-gray-200 rounded-full", __source: { fileName: "", lineNumber: 303, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 h-14 bg-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 304, columnNumber: 17 }, __self: this }))))))); return /*#__PURE__*/ React.createElement("div", { ref: containerRef, className: "p-8", __source: { fileName: "", lineNumber: 314, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto mb-8", __source: { fileName: "", lineNumber: 315, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 316, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { ref: textareaRef, value: streamingArticle || articleText, onChange: (e)=>{ setArticleText(e.target.value); setErrors({}); }, className: `w-full h-48 p-4 border rounded-lg font-noto-sans resize-none focus:ring-2 focus:ring-[#ed5555] focus:border-transparent ${errors.article ? "border-red-500" : ""}`, placeholder: "Paste your article text here...", __source: { fileName: "", lineNumber: 317, columnNumber: 11 }, __self: this }), !articleText.trim() && /*#__PURE__*/ React.createElement("button", { onClick: generateRandomArticle, disabled: loadingExample, className: "absolute right-2 top-2 text-xs text-gray-400 hover:text-gray-600 underline", __source: { fileName: "", lineNumber: 330, columnNumber: 13 }, __self: this }, loadingExample ? "Loading..." : "Generate Random Example Article"), errors.article && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-red-500 text-sm", __source: { fileName: "", lineNumber: 341, columnNumber: 13 }, __self: this }, errors.article))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-8", __source: { fileName: "", lineNumber: 345, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateQuestions, className: "bg-[#ed5555] text-white px-8 py-3 rounded-full hover:bg-opacity-90 transition-colors font-['Gilroy-Bold'] disabled:opacity-50 disabled:cursor-not-allowed", disabled: loading || !articleText.trim(), __source: { fileName: "", lineNumber: 346, columnNumber: 9 }, __self: this }, loading ? "Generating Questions ..." : "Generate Questions")), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 355, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 356, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 357, columnNumber: 11 }, __self: this }, [ ...Array.from({ length: 5 }) ].map((_, index)=>{ const question = questions[index]; const failed = failedQuestions.includes(index + 1); return question ? /*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg p-6 border border-gray-100", __source: { fileName: "", lineNumber: 362, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-4", __source: { fileName: "", lineNumber: 366, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>copyToClipboard(question.question), className: "mt-1 text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 367, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 371, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 373, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-['Gilroy-Bold'] text-xl text-[#2C3E50] mb-4", __source: { fileName: "", lineNumber: 374, columnNumber: 23 }, __self: this }, "Q", index + 1, ": ", question.question), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 377, columnNumber: 23 }, __self: this }, question.choices.map((choice, cIndex)=>/*#__PURE__*/ React.createElement("div", { key: cIndex, className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 379, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>copyToClipboard(choice), className: "text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 383, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 387, columnNumber: 31 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `flex-1 p-3 rounded-md ${question.correctAnswers.includes(cIndex) ? "bg-green-100 border-l-4 border-green-500" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 389, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-noto-sans", __source: { fileName: "", lineNumber: 396, columnNumber: 31 }, __self: this }, choice))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 401, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-['Gilroy-Bold'] text-lg text-[#2C3E50] mb-4", __source: { fileName: "", lineNumber: 402, columnNumber: 25 }, __self: this }, "Feedback"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 405, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 406, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>copyToClipboard(question.correctFeedback), className: "text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 407, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 413, columnNumber: 31 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-3 bg-green-50 rounded-md", __source: { fileName: "", lineNumber: 415, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-noto-sans text-green-700", __source: { fileName: "", lineNumber: 416, columnNumber: 31 }, __self: this }, question.correctFeedback))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 421, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>copyToClipboard(question.incorrectFeedback), className: "text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 422, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 428, columnNumber: 31 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-3 bg-red-50 rounded-md", __source: { fileName: "", lineNumber: 430, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-noto-sans text-red-700", __source: { fileName: "", lineNumber: 431, columnNumber: 31 }, __self: this }, question.incorrectFeedback)))))))) : loading && !failed ? /*#__PURE__*/ React.createElement("div", { key: index, className: "animate-pulse", __source: { fileName: "", lineNumber: 442, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement(PhantomQuestion, { index: index, __source: { fileName: "", lineNumber: 443, columnNumber: 19 }, __self: this })) : failed ? /*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white rounded-lg p-6 border border-red-200", __source: { fileName: "", lineNumber: 446, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 450, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-600 mb-4", __source: { fileName: "", lineNumber: 451, columnNumber: 21 }, __self: this }, "Failed to generate question ", index + 1), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setFailedQuestions((prev)=>prev.filter((q)=>q !== index + 1)); generateSingleQuestion(index + 1); }, className: "bg-red-100 text-red-600 px-4 py-2 rounded-full hover:bg-red-200 transition-colors font-['Gilroy-Bold']", __source: { fileName: "", lineNumber: 454, columnNumber: 21 }, __self: this }, "Retry"))) : null; }))))); }