I Want To Break Free

Editando: chetbot.php

<!DOCTYPE html>
<html lang="gu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iSystem ERP - AI Assistant</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

/* Floating Button */
        #chat-circle {
            position: fixed;
            bottom: 25px;
            right: 25px;
            background: #007bff;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            color: white;
            text-align: center;
            line-height: 60px;
            font-size: 26px;
            cursor: pointer;
            box-shadow: 0px 10px 25px rgba(0, 123, 255, 0.3);
            z-index: 1000;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

#chat-circle:hover { transform: scale(1.1); background: #0056b3; }

/* Chat Window Container */
        #chat-container {
            display: flex;
            position: fixed;
            bottom: 100px;
            right: 25px;
            width: 380px;
            max-width: 90%;
            height: 520px;
            background: white;
            border-radius: 18px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
            flex-direction: column;
            overflow: hidden;
            z-index: 1000;
            opacity: 0;
            transform: translateY(30px) scale(0.95);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
            
        }

#chat-container.active {
            display: flex;
            opacity: 1;
            transform: translateY(0) scale(1);
        }

/* Header */
        #chat-header {
            background: #007bff;
            color: white;
            padding: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

#close-chat { cursor: pointer; font-size: 20px; transition: 0.2s; }
        #close-chat:hover { opacity: 0.8; }

/* Chat Window Area */
        #chat-window { 
            flex: 1; 
            overflow-y: auto; 
            padding: 15px; 
            background: #f9f9f9; 
            display: flex; 
            flex-direction: column; 
            gap: 10px;
        }

/* Message Bubbles */
        .message { 
            padding: 10px 15px; 
            border-radius: 15px; 
            font-size: 14.5px; 
            line-height: 1.5; 
            max-width: 80%; 
            word-wrap: break-word;
            animation: fadeIn 0.3s ease;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

.user { 
            align-self: flex-end; 
            background: #007bff; 
            color: white; 
            border-bottom-right-radius: 2px; 
        }

.ai { 
            align-self: flex-start; 
            background: white; 
            color: #333;
            border: 1px solid #e0e0e0; 
            border-bottom-left-radius: 2px; 
        }

/* Typing Dot Animation */
        .typing { font-style: italic; color: #999; font-size: 13px; }

/* Input Area */
        #chat-input-area { 
            display: flex; 
            padding: 15px; 
            border-top: 1px solid #eee; 
            background: white; 
            align-items: center;
        }

#user-msg { 
            flex: 1; 
            border: 1px solid #e0e0e0; 
            border-radius: 25px; 
            padding: 10px 18px; 
            outline: none; 
            font-size: 14px;
            transition: 0.2s;
        }

#user-msg:focus { border-color: #007bff; }

#send-btn { 
            background: #28a745; 
            color: white; 
            border: none; 
            border-radius: 50%; 
            width: 42px; 
            height: 42px; 
            margin-left: 10px; 
            cursor: pointer; 
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
            box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
        }

#send-btn:hover { background: #218838; transform: scale(1.1); }
        #send-btn i { font-size: 18px; }

/* Scrollbar Styling */
        #chat-window::-webkit-scrollbar { width: 5px; }
        #chat-window::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
    </style>
</head>
<body>

<div id="chat-container">
    <div id="chat-header">
        <span><i class="fas fa-robot"></i> AI Assistant</span>
        <div style="display: flex; gap: 15px; align-items: center;">
        <span id="clear-chat" title="Clear Chat" style="cursor: pointer; font-size: 16px;">
            <i class="fas fa-trash-alt"></i>
        </span>
        <span id="close-chat" style="cursor: pointer;"><i class="fas fa-times"></i></span>
    </div>
    </div>
    <div id="chat-window">
        </div>
    <div id="chat-input-area">
        <input type="text" id="user-msg" placeholder="Type your message..." autocomplete="off">
        <button id="send-btn"><i class="fas fa-paper-plane"></i></button>
    </div>
</div>

// 1. Load Chat History from LocalStorage
    function loadChat() {
        let history = JSON.parse(localStorage.getItem('iSystemChat')) || [];
        if(history.length === 0) {
            // If no history, show welcome message
            $('#chat-window').append('<div class="message ai">' + welcomeMsg + '</div>');
        } else {
            history.forEach(chat => {
                let className = (chat.role === 'user') ? 'user' : 'ai';
                $('#chat-window').append('<div class="message ' + className + '">' + chat.msg + '</div>');
            });
        }
        scrollToBottom();
    }

// 2. Save Chat to LocalStorage
    function saveChat(role, message) {
        let history = JSON.parse(localStorage.getItem('iSystemChat')) || [];
        history.push({ role: role, msg: message });
        localStorage.setItem('iSystemChat', JSON.stringify(history));
    }

function scrollToBottom() {
        $('#chat-window').scrollTop($('#chat-window')[0].scrollHeight);
    }

// Toggle Chat
    $('#chat-circle').click(function(){
        let container = $('#chat-container');
        let icon = $('#chat-btn-icon');

if(container.hasClass('active')) {
            container.removeClass('active');
            setTimeout(() => { container.hide(); }, 400);
            icon.removeClass('fa-times').addClass('fa-comment-dots');
        } else {
            container.show(0, function() {
                setTimeout(() => { container.addClass('active'); }, 10);
            });
            icon.removeClass('fa-comment-dots').addClass('fa-times');
        }
    });

$('#close-chat').click(function(){
        $('#chat-circle').trigger('click');
    });

// Send Message Logic
    function sendMessage() {
        let msg = $('#user-msg').val().trim();
        if(msg == "") return;

// Display and Save User Message
        $('#chat-window').append('<div class="message user">' + msg + '</div>');
        saveChat('user', msg);
        $('#user-msg').val('');
        scrollToBottom();

// Typing indicator
        let typingId = "typing-" + Date.now();
        $('#chat-window').append('<div class="message ai typing" id="'+typingId+'">AI is thinking...</div>');
        scrollToBottom();

$.ajax({
            url: 'chat_process.php',
            type: 'POST',
            data: { query: msg },
            success: function(response){
                $('#' + typingId).remove();
                let htmlResponse = marked.parse(response);
                
                // Display and Save AI Response
                $('#chat-window').append('<div class="message ai">' + htmlResponse + '</div>');
                saveChat('ai', htmlResponse);
                scrollToBottom();
            },
            error: function() {
                $('#' + typingId).remove();
                $('#chat-window').append('<div class="message ai">Sorry, something went wrong. Please try again.</div>');
            }
        });
    }

$('#send-btn').click(sendMessage);
    $('#user-msg').keypress(function(e){ if(e.which == 13) sendMessage(); });

// Initialize Chat
    loadChat();
    
    // Chat clear કરવાની પ્રક્રિયા
$('#clear-chat').click(function(){
    if(confirm("Are you sure you want to clear chat history?")) {
        // 1. Storage માંથી ડેટા ડિલીટ કરો
        localStorage.removeItem('iSystemChat');
        
        // 2. Chat Window ને ખાલી કરીને ફરી Welcome Message બતાવો
        const welcomeMsg = "Hello! I am your iSystem ERP Assistant. How can I help you today?";
        $('#chat-window').html('<div class="message ai">' + welcomeMsg + '</div>');
        
        alert("Chat cleared!");
    }
});
});
</script>

</body>
</html>

Cancelar