Text

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

Embed

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KTX AI Agent</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: #0d1222; /* Dark blue background from the theme */
        }
        /* Custom scrollbar styling for a cleaner look */
        .chat-history::-webkit-scrollbar {
            width: 8px;
        }
        .chat-history::-webkit-scrollbar-track {
            background: #1e293b;
            border-radius: 10px;
        }
        .chat-history::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 10px;
        }
        .chat-history::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }
    </style>
</head>
<body class="bg-[#0d1222] flex items-center justify-center min-h-screen p-4">

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

        
        <div class="bg-[#1a2333] text-white p-6 rounded-t-3xl flex items-center justify-between border-b border-[#2d3a50]">
            <div class="flex items-center space-x-4">
                
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 text-[#00a3e0]">
                    <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zm0 464c-114.9 0-208-93.1-208-208S141.1 48 256 48s208 93.1 208 208s-93.1 208-208 208z"/>
                    <path d="M168 144c-13.3 0-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24s-10.7-24-24-24zm176 0c-13.3 0-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24s-10.7-24-24-24z"/>
                    <path d="M256 320c-44.2 0-80-35.8-80-80c0-13.3-10.7-24-24-24s-24 10.7-24 24c0 70.6 57.4 128 128 128c13.3 0 24-10.7 24-24s-10.7-24-24-24z"/>
                    <path d="M368 288c-13.3 0-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24s-10.7-24-24-24z"/>
                    <path d="M144 288c-13.3 0-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24s-10.7-24-24-24z"/>
                </svg>
                <h1 class="text-2xl font-semibold text-[#00a3e0]">KTX 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-[#2d3a50] flex items-center space-x-4">
            <button id="clear-btn" class="bg-[#00a3e0] text-[#1a2333] p-4 rounded-full shadow-lg hover:bg-[#0082b4] 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-[#2d3a50] text-gray-200 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[#00a3e0] transition-all duration-200" rows="1" placeholder="พิมพ์ข้อความที่นี่..." oninput="autoResize(this)"></textarea>
            <button id="send-btn" class="bg-[#00a3e0] text-[#1a2333] p-4 rounded-full shadow-lg hover:bg-[#0082b4] 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 chatHistory = document.getElementById('chat-history');
        const userInput = document.getElementById('user-input');
        const sendBtn = document.getElementById('send-btn');
        const clearBtn = document.getElementById('clear-btn');

        // Function to create and append the initial AI message
        function createInitialMessage() {
            const initialMessage = `
                <div class="flex justify-start">
                    <div class="bg-[#2d3a50] text-gray-200 p-4 rounded-3xl rounded-bl-none max-w-[85%] shadow-md">
                        <p>สวัสดีค่ะ! ยินดีต้อนรับสู่ KTX AI Assistant</p>
                        <p class="mt-2">ซีสามารถช่วยคุณในเรื่องการลงทุน การเงินดิจิทัล และผลิตภัณฑ์ทางการเงินต่างๆ ของ KTX ค่ะ</p>
                        <p class="mt-2">มีอะไรให้ซีช่วยเป็นพิเศษไหมคะ?</p>
                    </div>
                </div>
            `;
            chatHistory.innerHTML = initialMessage;
        }

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

        // Function to simulate sending a message
        async function sendMessage() {
            const message = userInput.value.trim();
            if (message === '') return;

            // Display user message
            appendMessage(message, 'user');

            // Clear input and focus
            userInput.value = '';
            autoResize(userInput); // Reset textarea size
            userInput.focus();

            // Simulate AI typing and response
            appendTypingIndicator();
            await new Promise(resolve => setTimeout(resolve, 1500)); // Simulate a delay

            // This is where you would call your actual AI API
            // For this example, we'll use a hard-coded response.
            const aiResponse = 'ขอบคุณสำหรับข้อความค่ะ! ซีกำลังประมวลผลคำตอบให้นะคะ... (กรุณาเชื่อมต่อ API ของคุณที่นี่)';
            
            removeTypingIndicator();
            appendMessage(aiResponse, 'ai');
        }

        // Function to clear all messages from the chat history
        function clearChat() {
            chatHistory.innerHTML = '';
            createInitialMessage(); // Add the welcome message back
            userInput.focus();
        }

        // Function to create and append a message bubble
        function appendMessage(message, sender) {
            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%]');
            messageBubble.textContent = message;

            if (sender === 'user') {
                messageWrapper.classList.add('justify-end');
                messageBubble.classList.add('bg-[#00a3e0]', 'text-white', 'rounded-br-none');
            } else {
                messageWrapper.classList.add('justify-start');
                messageBubble.classList.add('bg-[#2d3a50]', 'text-gray-200', 'rounded-bl-none');
            }

            messageWrapper.appendChild(messageBubble);
            chatHistory.appendChild(messageWrapper);
            chatHistory.scrollTop = chatHistory.scrollHeight; // Auto-scroll to the bottom
        }

        // 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-[#2d3a50] 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;
            chatHistory.appendChild(indicatorWrapper);
            chatHistory.scrollTop = chatHistory.scrollHeight; // Auto-scroll
        }

        // Function to remove the typing indicator
        function removeTypingIndicator() {
            const indicator = document.getElementById('typing-indicator');
            if (indicator) {
                indicator.remove();
            }
        }

        // Auto-resize the textarea based on content
        function autoResize(textarea) {
            textarea.style.height = 'auto';
            textarea.style.height = textarea.scrollHeight + 'px';
        }

        // 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

KTX AI TEST

KTX AI Assistant

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