Text

<h1 style="white-space:pre-line">Fairy AI TEST</h1>
<p class="normal" style="white-space:pre-line">พัฒนาศักภาพธุรกิจของคุณถึงขั้นสูงสุด<br />ด้วย Fairy AI</p>

Embed

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fairy AI Assistant</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #111827; /* Very dark gray for a luxurious feel */
        }
        /* Custom scrollbar styling for a cleaner look */
        .chat-history::-webkit-scrollbar {
            width: 8px;
        }
        .chat-history::-webkit-scrollbar-track {
            background: #1f2937;
            border-radius: 10px;
        }
        .chat-history::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 10px;
        }
        .chat-history::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }
        /* Hide the default spinner for textarea */
        textarea {
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }
        /* Style for line breaks in chat messages */
        .message-content {
            white-space: pre-wrap;
        }
    </style>
</head>
<body class="bg-[#111827] flex items-center justify-center min-h-screen p-4">

    
    <div class="bg-[#1f2937] rounded-3xl shadow-2xl w-full max-w-xl mx-auto flex flex-col h-[80vh] md:h-[70vh]">

        
        <div class="bg-[#1f2937] text-white p-6 rounded-t-3xl flex items-center justify-between border-b border-[#374151]">
            <div class="flex items-center space-x-4">
                
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 text-amber-500">
                    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                </svg>
                <h1 class="text-2xl font-semibold text-amber-500">Fairy AI Assistant</h1>
            </div>
            
            <div class="flex items-center space-x-2 text-sm text-gray-300">
                <span class="w-2.5 h-2.5 bg-green-400 rounded-full animate-pulse"></span>
                <span>ออนไลน์</span>
            </div>
        </div>

        
        <div id="chat-history" class="flex-grow p-6 overflow-y-auto space-y-4 chat-history">
            
        </div>

        
        <div class="p-4 border-t border-[#374151] flex items-center space-x-4">
            <button id="clear-btn" class="bg-amber-500 text-gray-900 p-4 rounded-full shadow-lg hover:bg-amber-400 transition-colors duration-200 transform hover:scale-105">
                
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
                    <polyline points="3 6 5 6 21 6"></polyline>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                </svg>
            </button>
            <textarea id="user-input" class="flex-grow resize-none p-4 rounded-full border border-gray-600 bg-[#374151] text-gray-200 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-amber-500 transition-all duration-200" rows="1" placeholder="พิมพ์ข้อความที่นี่..." oninput="autoResize(this)"></textarea>
            <button id="send-btn" class="bg-amber-500 text-gray-900 p-4 rounded-full shadow-lg hover:bg-amber-400 transition-colors duration-200 transform hover:scale-105">
                
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
                    <line x1="22" y1="2" x2="11" y2="13"></line>
                    <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                </svg>
            </button>
        </div>

    </div>

    
    <script>
        const chatHistoryElement = document.getElementById('chat-history');
        const userInput = document.getElementById('user-input');
        const sendBtn = document.getElementById('send-btn');
        const clearBtn = document.getElementById('clear-btn');

        // This array will store the full chat conversation for context
        let chatHistory = [];
        
        // Define your Durable Functions API URL here.
        // Replace with your actual endpoint URL.
        const DURABLE_API_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=";

        // Auto-resize the textarea based on content
        function autoResize(textarea) {
            textarea.style.height = 'auto';
            textarea.style.height = textarea.scrollHeight + 'px';
        }
        
        // Function to render all messages from the chatHistory array
        function renderChatHistory() {
            chatHistoryElement.innerHTML = ''; // Clear the entire chat display
            chatHistory.forEach(msg => {
                const messageWrapper = document.createElement('div');
                messageWrapper.classList.add('flex', 'p-2');

                const messageBubble = document.createElement('div');
                messageBubble.classList.add('p-4', 'rounded-3xl', 'shadow-md', 'max-w-[85%]', 'message-content');
                // Use innerHTML to render line breaks correctly
                messageBubble.innerHTML = msg.parts[0].text.replace(/\n/g, '<br>');

                if (msg.role === 'user') {
                    messageWrapper.classList.add('justify-end');
                    messageBubble.classList.add('bg-amber-500', 'text-gray-900', 'rounded-br-none');
                } else {
                    messageWrapper.classList.add('justify-start');
                    messageBubble.classList.add('bg-[#374151]', 'text-gray-200', 'rounded-bl-none');
                }

                messageWrapper.appendChild(messageBubble);
                chatHistoryElement.appendChild(messageWrapper);
            });
            // Auto-scroll to the latest message
            chatHistoryElement.scrollTop = chatHistoryElement.scrollHeight;
        }

        // Function to create and append the initial AI message
        function createInitialMessage() {
            const initialMessage = {
                role: "model",
                parts: [{ text: "สวัสดีค่ะพี่ต้น ซีคือ Fairy AI Assistant ค่ะ ซีพร้อมที่จะช่วยเหลือและเป็นผู้ช่วยสำหรับนักธุรกิจเครือข่ายของ DGF นะคะ\n\nมีอะไรให้ซีช่วยได้บ้างคะ?" }]
            };
            chatHistory.push(initialMessage);
            renderChatHistory();
        }

        // Call this function when the page loads
        document.addEventListener('DOMContentLoaded', () => {
            createInitialMessage();
        });

        // Function to add a typing indicator
        function appendTypingIndicator() {
            const indicatorWrapper = document.createElement('div');
            indicatorWrapper.id = 'typing-indicator';
            indicatorWrapper.classList.add('flex', 'justify-start', 'items-center', 'p-2');

            const typingDots = `
                <div class="flex space-x-1 p-4 bg-[#374151] rounded-3xl rounded-bl-none shadow-md">
                    <span class="w-2 h-2 bg-gray-400 rounded-full animate-[bounce_1.4s_infinite_0s_running]"></span>
                    <span class="w-2 h-2 bg-gray-400 rounded-full animate-[bounce_1.4s_infinite_0.2s_running]"></span>
                    <span class="w-2 h-2 bg-gray-400 rounded-full animate-[bounce_1.4s_infinite_0.4s_running]"></span>
                </div>
            `;
            indicatorWrapper.innerHTML = typingDots;
            chatHistoryElement.appendChild(indicatorWrapper);
            chatHistoryElement.scrollTop = chatHistoryElement.scrollHeight;
        }

        // Function to remove the typing indicator
        function removeTypingIndicator() {
            const indicator = document.getElementById('typing-indicator');
            if (indicator) {
                indicator.remove();
            }
        }
        
        // Asynchronous function to call the Durable API with exponential backoff
        async function fetchWithRetry(url, options, retries = 3) {
            for (let i = 0; i < retries; i++) {
                try {
                    const response = await fetch(url, options);
                    if (response.ok) {
                        return await response.json();
                    }
                    if (response.status === 429) { // Too Many Requests
                        const delay = Math.pow(2, i) * 1000 + Math.random() * 1000;
                        await new Promise(res => setTimeout(res, delay));
                        continue; // Retry
                    } else {
                        throw new Error(`API error: ${response.status}`);
                    }
                } catch (error) {
                    if (i === retries - 1) {
                        throw error;
                    }
                }
            }
        }

        // Main function to handle sending a message and getting a response
        async function sendMessage() {
            const message = userInput.value.trim();
            if (message === '') return;

            // Add the user's message to our chat history
            chatHistory.push({ role: "user", parts: [{ text: message }] });

            // Clear input and reset its size
            userInput.value = '';
            autoResize(userInput);
            
            // Re-render the chat UI with the new user message
            renderChatHistory();
            appendTypingIndicator(); // Show typing indicator while waiting for AI

            try {
                // Prepare the payload for the API
                const payload = {
                    contents: chatHistory
                };
                
                const apiKey = ""; // API key will be provided by the environment
                const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;

                const result = await fetchWithRetry(apiUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });
                
                // Get the AI's response text
                const aiResponse = result?.candidates?.[0]?.content?.parts?.[0]?.text || "ขออภัยค่ะ ไม่สามารถประมวลผลคำขอได้ในขณะนี้";

                // Add the AI's message to the chat history
                chatHistory.push({ role: "model", parts: [{ text: aiResponse }] });
            } catch (error) {
                console.error("Failed to fetch response from API:", error);
                chatHistory.push({ role: "model", parts: [{ text: "เกิดข้อผิดพลาดในการเชื่อมต่อ กรุณาลองใหม่อีกครั้งค่ะ" }] });
            } finally {
                removeTypingIndicator();
                renderChatHistory();
                userInput.focus(); // Keep focus on the input box
            }
        }

        // Function to clear all messages from the chat history
        function clearChat() {
            chatHistory = [];
            createInitialMessage();
            userInput.focus();
        }

        // Event listeners for sending messages
        sendBtn.addEventListener('click', sendMessage);
        userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault(); // Prevent new line
                sendMessage();
            }
        });

        // Event listener for the clear button
        clearBtn.addEventListener('click', clearChat);
    </script>
</body>
</html>

Call to action

พัฒนาและขยายองค์กรให้เติบโตด้วยระบบ AI ของ CoreNetwork

Fairy AI TEST

Fairy AI Assistant

ยกระดับธุรกิจ