public/esltool.js

import { utils } from "./utils.js";
import { view } from "./view.js";


function getUrlParams() {
    const config = {};
    new URLSearchParams(window.location.search).forEach((value, key) => {
      config[key] = value;
    });
    return config;
  }
  
let config = {
    first_language: 'にほんご,中文',
    second_language: 'English'
}

config ={...config,... getUrlParams()};
console.log('esltool.js config is :',config);




// Create toolbar element
const toolbar = document.createElement("div");
toolbar.id = "esl-toolbar";
toolbar.style.position = "fixed"; // Make it stick to the top
toolbar.style.top = "0"; // Position at the very top
toolbar.style.left = "0"; // Position at the leftmost side
toolbar.style.width = "100%"; // Make it span the entire width
toolbar.style.backgroundColor = "lightgray"; // Example background color
toolbar.style.padding = "10px"; // Add some padding

// Create buttons

const askButton = document.createElement("button");
askButton.id = "ask-btn";
askButton.textContent = "Ask";
askButton.classList.add('esltool-btn');
askButton.addEventListener('pointerdown', e=>{
    e.preventDefault();
});


const correctBtn = document.createElement("button");
correctBtn.id = "correct-btn";
correctBtn.textContent = "Correct";
correctBtn.classList.add('esltool-btn');


const translateBtn = document.createElement("button");
translateBtn.id = "translate-btn";
translateBtn.textContent = "Translate";
translateBtn.classList.add('esltool-btn');


const explainBtn = document.createElement("button");
explainBtn.id = "explain-btn";
explainBtn.textContent = "Explain";
explainBtn.classList.add('esltool-btn');


const defineBtn = document.createElement("button");
defineBtn.id = "define-btn";
defineBtn.textContent = "Define";
defineBtn.classList.add('esltool-btn');


const removeButton = document.createElement("button");
removeButton.id = "remove-btn";
removeButton.textContent = "Hide";
removeButton.classList.add('esltool-btn');


// Append buttons to toolbar
toolbar.appendChild(askButton);
toolbar.appendChild(correctBtn);
toolbar.appendChild(translateBtn);
toolbar.appendChild(explainBtn);
toolbar.appendChild(defineBtn);
toolbar.appendChild(removeButton);








// Create content area
const contentArea = document.createElement("div");
contentArea.id = "content";
contentArea.contentEditable = true; // Allow user to select text

// Append toolbar and content area to the body
document.body.appendChild(toolbar);
document.body.appendChild(contentArea);

// Function to get selected text
function getSelectedText() {
    return window.getSelection().toString();
}

// Implement functionalities for each button (same as before)

function ask(prompt) {

    let currentLineString = utils.getCurrentLineString(document.activeElement);
    let selectText = window.getSelection().toString();
    prompt=`
    ${config.cmd || ' '}
    ${prompt} **${selectText.length >= 1 ? selectText : currentLineString}**  `
    utils.displayMarkdown(prompt+'...');
    utils.AIComplete(prompt,{ 
        url: '/openai/v1/chat/completions',
        model: config.model ||
          'llama-3.1-70b-versatile',
        max_tokens: parseInt(config.max_tokens) || 8000,
     });
}

askButton.addEventListener("pointerdown", () => {
    ask(' ');    

});


// Correct Button:
correctBtn.addEventListener("pointerdown", () => {
    ask('correct mistakes of the text: \n');
});

// Translate Button:
translateBtn.addEventListener("pointerdown", () => {
    ask(`translate to English, ${config.first_language} French :\n `);
});

// Explain Button:
explainBtn.addEventListener("pointerdown", () => {
    ask(`explain this for ${config.second_language} seconds language learner in simple english first,then analyse step by step:\n `);

});

// Define Button:
defineBtn.addEventListener("pointerdown", () => {
    ask(`define the word  in simple ${config.second_language} , tell me all definitions if it has,and part of speech, and give some usage example:\n `  )
    });

removeButton.addEventListener('pointerdown', () => {
var urlDiv = document.getElementById("url_div");
urlDiv.style.display = urlDiv.style.display === "none" ? "block" : "none";

    
});

// Style the toolbar
toolbar.style.position = "fixed";
toolbar.style.top = "0%";
toolbar.style.left = "0";
toolbar.style.width = "wrap-content";
toolbar.style.backgroundColor = "black"; // Light gray background
toolbar.style.padding = "5px";
toolbar.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)"; // Add a subtle shadow

// Style the buttons
const buttonStyles = {
    backgroundColor: "black", // Green background
    border: "none",
    color: "white",
    padding: "2px",
    textAlign: "center",
    textDecoration: "none",
    display: "inline-block",
    fontSize: "small",
    margin: "2px",
    cursor: "pointer",
    borderRadius: "5px", // Rounded corners
};

// Apply styles to each button
for (const button of [askButton, correctBtn, translateBtn, explainBtn, defineBtn, removeButton]) {
    Object.assign(button.style, buttonStyles);
    utils.makeButtonFeedback(button);
}



setTimeout(() => {
    utils.displayMarkdown(`
hello, this is note app for language learner, press the blue circle then speak now! try ask button or ctrl + enter to send current line or selected text to AI
code will display like this:
\`\`\`
this code \`\${value}\`
\`\`\`
    `)
view.createMenu(window.innerWidth*0.9, 300);
let allEslToolBtns=document.querySelectorAll('.esltool-btn');
for (const btn of allEslToolBtns) {
    console.log(btn);
    btn.addEventListener('pointerdown', e=>{
        e.preventDefault();
    });
}

}, 1000);