Embed

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT-Like Interface</title>
    <style>
        /* Styling for chat interface */
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            font-family: Arial, sans-serif;
            background-color: #f7f7f8;
        }

        .chat-container,
        .login-container {
            display: none;
            height: 100vh;
            width: 100vw;
        }

        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f7f7f8;
        }

        .login-form {
            display: flex;
            flex-direction: column;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        .tab-bar {
            display: flex;
            flex-direction: column;
            background-color: #f1f1f1;
            border-right: 1px solid #e0e0e0;
            width: 200px;
            height: 100%;
        }

        .new-chat-btn {
            padding: 15px;
            cursor: pointer;
            text-align: center;
            background-color: #007bff;
            color: white;
            font-weight: bold;
            border: none;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .tab {
            padding: 10px;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.3s;
        }

        .tab.active {
            background-color: #e0e0e0;
        }

        .chat-box {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        .input-container {
            position: fixed;
            bottom: 0;
            left: 200px;
            /* adjust for the tab-bar width */
            right: 0;
            display: flex;
            padding: 10px;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
        }

        .user-input {
            flex: 1;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            outline: none;
            font-size: 16px;
        }

        .send-btn {
            padding: 10px 20px;
            border: none;
            margin-left: 10px;
            background-color: #007bff;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        .g_id_signin {
            position: absolute;
            /* Full-screen positioning */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.9);
            z-index: 10;
            /* Ensure it appears on top */
            transform: scale(1.2);
            /* Adjust the scale factor as needed */
            transform-origin: center;
            /* Keeps the scaling centered */
        }



        .user-message {
            background-color: #1e90ff;
            color: #fff;
            padding: 12px 18px;
            border-radius: 18px 18px 0 18px;
            margin: 10px 0;
            align-self: flex-end;
            max-width: 70%;
            word-wrap: break-word;
            font-size: 16px;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
        }

        .bot-message {
            background-color: #f1f0f0;
            color: #333;
            padding: 12px 18px;
            border-radius: 18px 18px 18px 0;
            margin: 10px 0;
            align-self: flex-start;
            max-width: 70%;
            word-wrap: break-word;
            font-size: 16px;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
        }

        .guide-widget {
            background-color: #007bff;
            color: white;
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            font-size: 16px;
            margin: 10px 0;
        }

        .copy-btn-container {
            text-align: right;
            margin-top: 5px;
        }

        .copy-btn {
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-size: 14px;
            color: #007bff;
            outline: none;
        }

        .copy-btn img {
            width: 16px;
            height: 16px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="login-container">
        <div id="g_id_onload" data-client_id="943998921348-nbqq2cvr3rfb2k3i837smdpli4i6ib5f.apps.googleusercontent.com"
            data-context="signin" data-ux_mode="popup" data-login_uri="https://get-champ.com/chatbot"
            data-callback="handleCredentialResponse" data-auto_prompt="false"> </div>
        <div class="g_id_signin" id="g_id_signin">
            <div class="login-form">
                <h2>Sign in with Google</h2>
                <div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline"
                    data-text="sign_in_with" data-size="large" data-logo_alignment="left"> </div>
            </div>
        </div>
    </div>

    <div class="chat-container">
        <div id="tab-bar" class="tab-bar">
            <button class="new-chat-btn" onclick="newChat()">+ New Chat</button>
            <div class="tab active" onclick="selectTab('Chat')">Chat</div>
        </div>
        <div id="chat-box" class="chat-box"></div>
        <div class="input-container">
            <input type="text" id="user-input" class="user-input" placeholder="Type your message..." />
            <button id="send-btn" class="send-btn">Send</button>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const userEmail = localStorage.getItem("userEmail");
            if (userEmail) {
                showChatInterface();
                initializePrimaryChat(); // Initialize primary chat when the user is signed in
            } else {
                showLoginForm();
            }

            document.getElementById("send-btn").addEventListener("click", sendMessage);
            document.getElementById("user-input").addEventListener("keydown", function (event) {
                if (event.key === "Enter") {
                    sendMessage();
                }
            });
        });

        function handleCredentialResponse(response) {
            const token = response.credential;
            fetch("https://us-central1-brief-ai-428815.cloudfunctions.net/verify_token", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ token })
            })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        localStorage.setItem("userEmail", data.email);
                        showChatInterface();
                        initializePrimaryChat(); // Call here to set up the chat with the guide
                    } else {
                        alert("Login failed.");
                    }
                })
                .catch(error => {
                    console.error("Error verifying token:", error);
                    alert("Login failed.");
                });
        }


        function showLoginForm() {
            document.querySelector('.login-container').style.display = 'flex';
            document.querySelector('.chat-container').style.display = 'none';
        }

        function showChatInterface() {
            document.querySelector('.login-container').style.display = 'none';
            document.querySelector('.chat-container').style.display = 'flex';
        }

        // Initialize the primary chat with welcome message and guide widget
        function initializePrimaryChat() {
            const primaryTabName = 'Chat';
            if (!chatHistories[primaryTabName]) {
                chatHistories[primaryTabName] = [];

                // Welcome message and guide suggestion
                const welcomeMessage = "Welcome to the chat! You can ask me anything.";

const guideMessage = "Send the prospect’s mail or Linkedin url to get insights";
                const guideSuggestion = "GUIDE_WIDGET"; // Special marker

                chatHistories[primaryTabName].push({ text: welcomeMessage, sender: "bot" });

chatHistories[primaryTabName].push({ text: guideMessage, sender: "bot" });
                chatHistories[primaryTabName].push({ text: guideSuggestion, sender: "bot" });

                renderChat();
            }
        }

        const chatHistories = {};

        function getActiveTabName() {
            return document.querySelector('.tab.active').textContent;
        }

        function selectTab(tabName) {
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.toggle('active', tab.textContent === tabName);
            });
            renderChat();
        }

        function newChat() {
            const newTabName = `Chat ${document.querySelectorAll('.tab').length}`;
            const newTab = document.createElement('div');
            newTab.className = 'tab';
            newTab.textContent = newTabName;
            newTab.onclick = () => selectTab(newTabName);
            document.getElementById('tab-bar').appendChild(newTab);
            selectTab(newTabName);
            chatHistories[newTabName] = [];

            // Welcome message and guide suggestion
            const welcomeMessage = "Welcome to the chat! You can ask me anything.";
            const guideSuggestion = "GUIDE_WIDGET"; // Special marker

            chatHistories[newTabName].push({ text: welcomeMessage, sender: "bot" });
            chatHistories[newTabName].push({ text: guideSuggestion, sender: "bot" });

            renderChat();
        }

        function renderChat() {
            const chatBox = document.getElementById("chat-box");
            chatBox.innerHTML = '';
            const activeTab = getActiveTabName();
            const messages = chatHistories[activeTab] || [];
            messages.forEach(message => displayMessage(message.text, message.sender));
        }

        function displayMessage(text, sender) {
            const chatBox = document.getElementById("chat-box");
            const messageDiv = document.createElement("div");
            messageDiv.className = sender === "user" ? "user-message" : "bot-message";
            messageDiv.innerHTML = text.replace(/<a /g, '<a target="_blank" ');

            if (sender === "bot" && text !== "Welcome to the chat! You can ask me anything." && text !== "Send the prospect’s mail or Linkedin url to get insights" && text !== "Working on your request...") {
                const copyBtnContainer = document.createElement("div");
                copyBtnContainer.className = "copy-btn-container";
                const copyButton = document.createElement("button");
                copyButton.className = "copy-btn";
                copyButton.innerHTML = '<img src="https://img.icons8.com/?size=100&id=86216&format=png&color=000000" alt="Copy" />'; // Update the URL to your copy icon image
                copyButton.onclick = () => {
                    copyToClipboard(text);
                    copyButton.innerHTML = '<img src="https://img.icons8.com/?size=100&id=98955&format=png&color=000000" alt="Copy" />'; // Temporary message
                    setTimeout(() => {
                        copyButton.innerHTML = '<img src="https://img.icons8.com/?size=100&id=86216&format=png&color=000000" alt="Copy" />'; // Revert back
                    }, 2000);
                };
                copyBtnContainer.appendChild(copyButton);
                messageDiv.appendChild(copyBtnContainer);
            }

            if (text === "GUIDE_WIDGET") {
                // Render guide widget
                const guideWidget = document.createElement("div");
                guideWidget.className = "guide-widget";
                guideWidget.textContent = 'Click here to get example for prospect insights';
                guideWidget.onclick = sendGuideMessage;
                chatBox.appendChild(guideWidget);
            } else {
                // Render regular message
                chatBox.appendChild(messageDiv);
            }

            chatBox.scrollTop = chatBox.scrollHeight;
        }

        function copyToClipboard(htmlText) {
            // Create a temporary DOM element to convert HTML to plain text
            const tempDiv = document.createElement("div");
            tempDiv.innerHTML = htmlText;

            // Get the plain text content
            const plainText = tempDiv.innerText || tempDiv.textContent;

            // Copy the plain text to the clipboard
            navigator.clipboard.writeText(plainText).then(() => {
                console.log('Text copied to clipboard');
            }).catch(err => {
                console.error('Error copying text: ', err);
            });
        }


        function sendGuideMessage() {
            // Retrieve the user's email from localStorage
            const userEmail = localStorage.getItem("userEmail");

            // Define the fallback email
            const fallbackEmail = "mark.zuckerberg@microsoft.com";

            // Determine the email to use
            let userInput = fallbackEmail; // Default to the fallback email

            // Email validation regex
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (userEmail) {
                // Check if the user's email is valid and from private domains
                if (emailRegex.test(userEmail) &&
                    !userEmail.endsWith("@gmail.com") &&
                    !userEmail.endsWith("@yahoo.com") &&
                    !userEmail.endsWith("@hotmail.com")) {
                    userInput = userEmail; // Use the user's email
                }
            } else {
                console.error("User email not found.");
            }

            const activeTab = getActiveTabName();

            // Push the determined email message into the chat history
            chatHistories[activeTab].push({ text: userInput, sender: "user" });
            displayMessage(userInput, "user");

            fetch('https://us-central1-brief-ai-428815.cloudfunctions.net/chat', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    message: userInput,
                    email: userEmail, // Use the user's email from localStorage
                    chat_history: chatHistories[activeTab] // Send the entire chat history
                })
            })
                .then(response => response.json())
                .then(data => {
                    const botResponse = data.response;
                    chatHistories[activeTab].push({ text: botResponse, sender: "bot" });
                    displayMessage(botResponse, "bot");
                })
                .catch(error => console.error('Error:', error));
        }


        function sendMessage() {
            const inputField = document.getElementById("user-input");
            const userInput = inputField.value.trim();
            if (!userInput) return;

            const activeTab = getActiveTabName();
            if (!chatHistories[activeTab]) {
                chatHistories[activeTab] = [];
            }

            // Add user's message to the chat
            chatHistories[activeTab].push({ text: userInput, sender: "user" });
            displayMessage(userInput, "user");
            inputField.value = "";

            // Check if the message contains an email or LinkedIn URL
            const emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/;
            const linkedinPattern = /https?:\/\/(www\.)?linkedin\.com\/[^\s]+/i;
            const containsEmailOrLinkedIn = emailPattern.test(userInput) || linkedinPattern.test(userInput);

            if (containsEmailOrLinkedIn) {
                // Display "working on your request" immediately
                const workingMessage = "Working on your request...";
                chatHistories[activeTab].push({ text: workingMessage, sender: "bot" });
                displayMessage(workingMessage, "bot");
            }

            // Send the request to the backend
            fetch('https://us-central1-brief-ai-428815.cloudfunctions.net/chat', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    message: userInput,
                    email: localStorage.getItem("userEmail"),
                    chat_history: chatHistories[activeTab]
                })
            })
                .then(response => response.json())
                .then(data => {
                    const botResponse = data.response;
                    const botImage = data.image; // Assuming the backend returns an image URL in the 'image' field

                    chatHistories[activeTab].push({ text: botResponse, sender: "bot" });

                    if (botImage) {
                        chatHistories[activeTab].push({ image: botImage, sender: "bot" });
                        displayImage(botImage, "bot");
                    }

                    displayMessage(botResponse, "bot");


                })
                .catch(error => {
                    console.error("Error:", error);
                });
        }

        function displayImage(imageUrl, sender) {
            const chatBox = document.getElementById("chat-box");
            const messageElement = document.createElement("div");
            messageElement.className = sender === "user" ? "user-message" : "bot-message";

            const imageElement = document.createElement("img");
            imageElement.src = imageUrl;
            imageElement.alt = "Image";
            imageElement.style.maxWidth = "100%";
            imageElement.style.borderRadius = "8px";

            messageElement.appendChild(imageElement);
            chatBox.appendChild(messageElement);
            chatBox.scrollTop = chatBox.scrollHeight;
        }

    </script>
    <script src="https://accounts.google.com/gsi/client" async defer></script>

</body>

</html>