(:Summary: Preferences for [[PmWiki/access keys]] and edit form:)
Preferences for [[PmWiki/access keys]] and edit form

This page can be used as template for (personal) preferences, or set as default site preference (see below).

->[@
  # Access keys - hold Alt (Windows IE), Shift + Alt (Firefox)
  # or Control (Mac) and tap the indicated key on your keyboard
  # to trigger the corresponding action.
#  'ak_view'          => '' ,         # view page
  'ak_edit'          => 'e',         # edit page
  'ak_history'       => 'h',         # page history
#  'ak_print'         => '',          # print view of page
  'ak_recentchanges' => 'c',         # Recent Changes
  'ak_save'          => 's',         # save page
  'ak_saveedit'      => 'u',         # save and keep editing
  'ak_savedraft'     => 'd',         # save as draft
  'ak_preview'       => 'p',         # preview page
  'ak_textedit'      => ','          # focus to edit textarea (at the end)
  'ak_em'            => 'i',         # emphasized text (italic)
  'ak_strong'        => 'b',         # strong text (bold)

#  'ak_attach'        => '',          # attach a file
#  'ak_backlinks'     => '',          # show backlinks
#  'ak_logout'        => '',          # log out

  # Editing components
  'e_rows' => '20',                  # rows in edit textarea
  'e_cols' => '70',                  # columns in edit textarea
  'Site.EditForm' => 'Site.EditForm' # location of EditForm
  @]

To create personal user (browser) preferences,
* make a copy of [[{$FullName}?action=source | this page]] somewhere, preferably as @@Profiles.''%green%insert_your_name_here%%''-Preferences@@
* edit that page with your new preferred settings,
* select [[{$FullName}?setprefs={$FullName} | Set Preferences of this Page]] on the page containing your newly created settings. 
-> This sets a preference cookie on your browser which tells PmWiki where to find your personal preference settings.

To revert to the PmWiki default preferences
* select [[{$Name}?setprefs=| Revert to PmWiki Default Preferences]] to unset the preference cookie

See also [[Cookbook:UserConfigurations]] about how to customise the edit form for personal use.


Note that by default, parsing of {$FullName} is disabled. To make it the default site preference, add
 XLPage('prefs', "Site.Preferences");
to a config file (e.g. local/config.php).

To disable user preferences entirely set $EnablePrefs = 0;
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-14BXFXE5GM"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-14BXFXE5GM');
</script><style>
    #chatbotContainer {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #007aff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        z-index: 1000;
        animation: pulse 2s infinite;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #chatbotContainer.expanded {
        width: 70vw;
        height: 80vh;
        border-radius: 20px;
        padding: 10px;
        animation: none;
        background-color: white;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        //overflow: hidden;
        overflow-x: auto;
        white-space: wrap;
        left: 15vw; 
        right: auto;
    }

    #chatbotIcon {
        font-size: 30px;
        color: white;
    }

    #chatbotContainer.expanded #chatbotIcon {
        display: none;
    }

    #chatContent {
        display: none;
        flex-direction: column;
        height: 100%;
    }

    #chatbotContainer.expanded #chatContent {
        display: flex;
    }

    #chatBox {
        flex-grow: 1;
        overflow-y: auto;
        border: none;
        padding: 10px;
        background-color: #f0f0f0;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    #messageInput, #sendMessageButton {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 20px;
        font-size: 12px;
    }

    #messageInput {
        flex-grow: 1;
        margin-right: 10px;
        border-radius: 20px;
        border: 1px solid #dcdcdc;
    }

    #sendMessageButton {
        background-color: #007aff;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 20px;
    }

    #sendMessageButton:hover {
        background-color: #005bb5;
    }

    #minimizeButton {
        align-self: flex-end;
        background-color: #f0f0f0;
        color: #007aff;
        border: none;
        cursor: pointer;
        padding: 5px 10px;
        margin-bottom: 10px;
        border-radius: 20px;
    }

    .message {
        margin: 5px 0;
        padding: 10px;
        border-radius: 20px;
        max-width: 85%;
        font-size: 12px;
        line-height: 1.4;
    }

    .sent {
        align-self: flex-end;
        background-color: #007aff;
        color: white;
        border-bottom-right-radius: 0;
    }

    .received {
        align-self: flex-start;
        background-color: #e5e5ea;
        color: black;
        border-bottom-left-radius: 0;
    }

    .typing {
        align-self: flex-start;
        font-style: italic;
        color: #888;
    }

    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
</style>

<div id="chatbotContainer">
    <div id="chatbotIcon">💬</div>
    <div id="chatContent">
        <button id="minimizeButton" onclick="minimizeChat()">Minimize</button>
        <div id="chatBox"></div>
        <div style="display: flex;">
            <input type="text" id="messageInput" placeholder="Ask a question...">
            <button id="sendMessageButton" onclick="sendMessage()">Send</button>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
    const chatbotContainer = document.getElementById('chatbotContainer');
    const chatContent = document.getElementById('chatContent');

    chatbotContainer.addEventListener('click', function(event) {
        // Only toggle expansion if the click is on the container itself, not inside the expanded content
        if (event.target === chatbotContainer || event.target === document.getElementById('chatbotIcon')) {
            chatbotContainer.classList.toggle('expanded');
        }
    });

    function minimizeChat() {
        chatbotContainer.classList.remove('expanded');
    }

    function sendMessage() {
        const input = document.getElementById('messageInput');
        const message = input.value.trim();
    
        if (message) {
            displayMessage(message, 'sent');

            // Display a typing indicator
            const typingIndicator = displayMessage('AI is typing...', 'typing', true);
    
            // Capture relevant content from the page as context
            const pageContent = document.body.innerText.trim();

            // Formulate the string to send
            const payload = `Context: ${pageContent} \n\n Question: ${message}`;
    
            const websocket = new WebSocket('wss://alphapeak.io:3002');
            input.value = '';
    
            websocket.onopen = function() {
                websocket.send(payload);
            };
    
            websocket.onmessage = function(event) {
                removeMessage(typingIndicator);  // Remove typing indicator
                displayMessage(event.data, 'received');
                websocket.close();
            };
    
            websocket.onerror = function() {
                removeMessage(typingIndicator);  // Remove typing indicator
                displayMessage('Error in connection', 'received');
                websocket.close();
            };
        }
    }

    // Function to display a message
    function displayMessage(text, className, returnElement = false) {
        const messageDiv = document.createElement('div');
        messageDiv.className = 'message ' + className;

        // Use marked.js to parse Markdown into HTML
        messageDiv.innerHTML = marked.parse(text);

        document.getElementById('chatBox').appendChild(messageDiv);
        document.getElementById('chatBox').scrollTop = document.getElementById('chatBox').scrollHeight;
        
        if (returnElement) {
            return messageDiv;
        }
    }

    function removeMessage(element) {
        if (element && element.parentNode) {
            element.parentNode.removeChild(element);
        }
    }

    document.getElementById('messageInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });
</script>