Skip to content

2021csb1220/sof 158 ai chatbot extension #197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Arker123 merged 5 commits into from
Apr 17, 2024
Merged

2021csb1220/sof 158 ai chatbot extension #197

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
969fbf8
fixes
ViratJain06 Apr 7, 2024
1e309bd
Merge branch 'main' of https://github.com/ViratJain06/T07-CS305 into …
ViratJain06 Apr 7, 2024
1463207
Merge branch 'main' of https://github.com/ViratJain06/T07-CS305 into …
ViratJain06 Apr 10, 2024
572b26a
Ai chat bot extension
ViratJain06 Apr 10, 2024
1aea7fd
Merge branch 'main' into 2021csb1220/sof-158-ai-chatbot-extension
Hardik329 Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 64 additions & 11 deletions extension/contentScript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,13 @@ async function main() {
flex-direction: column;
overflow-y: scroll;
}
#notes{
#notes, #ai-chat{
display: flex;
flex-direction: column;
display:none;
}


#t-body{
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -106,7 +107,7 @@ async function main() {
opacity: 0.5;
}

#t-button, #notes-button{
#t-button, #notes-button, #ai-chat-button{
background-color: transparent;
color: rgb(169, 32, 30);
border: none;
Expand All @@ -115,24 +116,24 @@ async function main() {
padding: 15px;
}

#notes-entry-box{
#notes-entry-box, #ai-chat-entry-box{
width: 100%;
height: 60px;
border: 1px solid lightgray;
border-radius: 5px;
padding: 8px;
box-sizing: border-box;
}
#notes-entry{
#notes-entry, #ai-chat-entry{
margin-top:auto;
}
#notes-card-area{
#notes-card-area, #ai-chat-card-area{
widht:100%;
height:370px;
overflow-y: scroll;
}

#notes-entry-button {
#notes-entry-button, #ai-chat-entry-button {
position:relative;
width: 50px;
left: 312px;
Expand Down Expand Up @@ -180,28 +181,53 @@ async function main() {
`<svg data-v-8ec02cea="" width="20" height="20" viewBox="0 0 200 200" fill="#101010" xmlns="http://www.w3.org/2000/svg" class="nav-top"><g data-v-8ec02cea="" clip-path="url(#clip0_900_152)"><path data-v-8ec02cea="" d="M192.492 65.698L176.126 49.3324C172.274 45.4802 166.3 45.1875 162.81 48.6778L75.7107 135.802C74.4204 137.09 73.4038 138.106 70.4265 158.462C70.1833 160.13 70.3008 161.83 70.7711 163.449C71.2414 165.067 72.0535 166.565 73.1526 167.843C74.2517 169.12 75.6121 170.147 77.142 170.854C78.6719 171.56 80.3357 171.93 82.0209 171.939C82.7044 171.939 83.3866 171.881 84.0603 171.766C103.778 168.379 104.832 167.334 106.031 166.126L193.146 79.0138C196.636 75.533 196.341 69.5533 192.492 65.698ZM99.8972 158.906C98.7579 159.284 94.8963 160.322 82.4648 162.456C82.1027 162.517 81.7312 162.492 81.3807 162.383C81.0301 162.273 80.7104 162.083 80.4475 161.826C80.1846 161.57 79.986 161.255 79.8679 160.907C79.7497 160.559 79.7154 160.189 79.7676 159.825C81.6307 147.107 82.6158 143.069 82.9683 141.886L169.108 55.7466C169.237 55.8164 169.356 55.9044 169.46 56.0078L185.826 72.3734C185.93 72.4772 186.018 72.596 186.087 72.7258L99.8972 158.906Z" fill="rgba(33,36,39,0.8)"></path> <path data-v-8ec02cea="" d="M164.447 121.329C163.62 121.329 162.802 121.492 162.038 121.808C161.275 122.124 160.581 122.588 159.996 123.173C159.412 123.757 158.948 124.451 158.632 125.215C158.315 125.978 158.153 126.797 158.153 127.623V165.51C158.153 177.586 147.21 187.411 133.762 187.411H41.3968C27.9487 187.411 17.0058 177.586 17.0058 165.51V34.4938C17.0059 22.4146 27.9488 12.5891 41.3968 12.5891H133.768C145.86 12.5891 156.245 20.7058 157.926 31.4724C158.047 32.2943 158.331 33.084 158.759 33.7959C159.187 34.5079 159.752 35.128 160.421 35.6205C161.09 36.113 161.85 36.4682 162.657 36.6656C163.465 36.8629 164.303 36.8986 165.124 36.7704C165.944 36.6422 166.732 36.3528 167.44 35.9189C168.149 35.4849 168.764 34.9149 169.252 34.2419C169.739 33.5689 170.088 32.806 170.279 31.9974C170.47 31.1888 170.498 30.3504 170.364 29.5306C169.086 21.3478 164.652 13.8322 157.879 8.38428C151.028 2.93164 142.524 -0.0253648 133.768 0.000163921H41.3968C21.006 0.000163921 4.41699 15.4751 4.41699 34.4938V165.51C4.41699 184.528 21.006 200 41.3969 200H133.768C154.159 200 170.748 184.528 170.748 165.51V127.623C170.748 126.796 170.585 125.977 170.268 125.213C169.951 124.449 169.487 123.755 168.902 123.17C168.317 122.586 167.622 122.122 166.858 121.806C166.093 121.49 165.274 121.328 164.447 121.329Z" fill="rgba(33,36,39,0.8)"></path> <path data-v-8ec02cea="" d="M96.2466 47.2969H44.4337C43.1817 47.2969 41.9809 47.7942 41.0956 48.6796C40.2103 49.5649 39.7129 50.7657 39.7129 52.0177C39.7129 53.2698 40.2103 54.4705 41.0956 55.3559C41.9809 56.2412 43.1817 56.7386 44.4337 56.7386H96.2464C97.4985 56.7386 98.6992 56.2412 99.5846 55.3559C100.47 54.4705 100.967 53.2698 100.967 52.0177C100.967 50.7657 100.47 49.5649 99.5846 48.6796C98.6992 47.7942 97.4987 47.2969 96.2466 47.2969ZM96.2466 71.1025H44.4337C43.1817 71.1025 41.9809 71.5999 41.0956 72.4852C40.2103 73.3706 39.7129 74.5713 39.7129 75.8234C39.7129 77.0754 40.2103 78.2762 41.0956 79.1615C41.9809 80.0468 43.1817 80.5442 44.4337 80.5442H96.2464C97.4985 80.5442 98.6992 80.0468 99.5846 79.1615C100.47 78.2762 100.967 77.0754 100.967 75.8234C100.967 74.5713 100.47 73.3706 99.5846 72.4852C98.6992 71.5999 97.4987 71.1025 96.2466 71.1025Z" fill="rgba(33,36,39,0.8)"></path></g> <defs data-v-8ec02cea=""><clipPath data-v-8ec02cea="" id="clip0_900_152"><rect data-v-8ec02cea="" width="200" height="200" fill="white"></rect></clipPath></defs></svg>`
);

const ai_chat_icon = add_element(
"div",
"id",
"ai-chat-icon",
`<svg data-v-38979994="" width="20" height="20" viewBox="0 0 213 178" xmlns="http://www.w3.org/2000/svg" class="nav-top" fill="none"><path data-v-38979994="" d="M23.5 7H132.5" stroke="rgb(169, 32, 30)" stroke-width="12" stroke-linecap="round"></path> <path data-v-38979994="" d="M132.5 6.9994C139 6.99881 146.6 9.0994 147 21.4994V36.5M55.5002 106L33.0002 129C29.3335 132.5 22.0002 136.6 22.0002 125C22.0002 113.4 22.0002 107.5 22.0002 106C17.0002 104.833 6.90016 100.3 6.50016 91.5C6.10016 82.7 6.33349 41.1663 6.50016 21.4994C6.54677 15.9994 10 6 27 6.9994" stroke="rgb(169, 32, 30)" stroke-width="12" stroke-linecap="round"></path> <path data-v-38979994="" d="M191.721 53H86.7209C74.721 53 69.2559 60 69.2209 64C69.0542 83 68.8209 123.7 69.2209 134.5C69.6209 145.3 81.0542 148.333 86.7209 148.5H160.221C165.388 154.333 177.221 166.8 183.221 170C189.221 173.2 191.388 168.667 191.721 166V142.5C202.521 142.5 205.888 134.167 206.221 130V64C206.221 55.6 196.554 53.1667 191.721 53Z" stroke="rgb(169, 32, 30)" stroke-width="12" stroke-linecap="round"></path>
</svg>`
);



const navbar = add_element("div", "id", "navbar", "");
const t_button = add_element("button", "id", "t-button", "");
t_button.appendChild(t_icon);
t_button.innerHTML += "Transcript";
navbar.appendChild(t_button);
const notes_button = add_element("button", "id", "notes-button", "");
notes_button.appendChild(notes_icon);
const notes_card_area = add_element("div", "id", "notes-card-area", ``);
notes_button.innerHTML += "Notes";
navbar.appendChild(notes_button);
ai_chat_button = add_element("button", "id", "ai-chat-button", "");
ai_chat_button.appendChild(ai_chat_icon);
ai_chat_button.innerHTML+= 'AI Chat';

navbar.appendChild(ai_chat_button);
container.appendChild(navbar);


const transcript = add_element("div", "id", "transcript", "");
const notes = add_element("div", "id", "notes", "");
const t_navbar = add_element("div", "id", "t-navbar", ``);
const ai_chat = add_element("div", "id", "ai-chat", "");
const notes_entry = add_element("div", "id", "notes-entry", `
<textarea id="notes-entry-box" placeholder="Enter your notes here..."></textarea>
<textarea id="notes-entry-box" placeholder="Enter your notes here..."></textarea>
`);

const notes_entry_button = add_element("button", "id", "notes-entry-button",`Enter`);
notes_entry.appendChild(notes_entry_button);
const notes_card_area = add_element("div", "id", "notes-card-area", ``);

const ai_chat_entry = add_element("div", "id", "ai-chat-entry", `
<textarea id="ai-chat-entry-box" placeholder="Enter your Question here..."></textarea>
`);
const ai_chat_entry_button = add_element("button", "id", "ai-chat-entry-button",`Enter`);
ai_chat_entry.appendChild(ai_chat_entry_button);
const ai_chat_card_area = add_element("div", "id", "ai-chat-card-area", ``);




//rgb(169, 32, 30) -> icon colour

Expand All @@ -212,17 +238,33 @@ async function main() {
t_button.addEventListener("click", () => {
t_button.classList.add("active");
notes_button.classList.remove("active");
ai_chat_button.classList.remove("active");
transcript.style.display = "block";
notes.style.display = "none";
ai_chat.style.display = "none";

});

notes_button.addEventListener("click", () => {
t_button.classList.remove("active");
notes_button.classList.add("active");
ai_chat_button.classList.remove("active");
transcript.style.display = "none";
notes.style.display = "block";
ai_chat.style.display = "none";
});

ai_chat_button.addEventListener("click", () => {
t_button.classList.remove("active");
notes_button.classList.remove("active");
ai_chat_button.classList.add("active");
transcript.style.display = "none";
notes.style.display = "none";
ai_chat.style.display = "block";
});



const notesDict = {};

notes_entry_button.addEventListener("click", () => {
Expand All @@ -235,6 +277,14 @@ async function main() {
document.getElementById("notes-entry-box").value = "";
}
});

ai_chat_entry_button.addEventListener("click", () => {
const AiQues = document.getElementById("ai-chat-entry-box").value.trim();
if (AiQues) {

document.getElementById("ai-chat-entry-box").value = "";
}
});



Expand Down Expand Up @@ -377,8 +427,11 @@ async function main() {
transcript.appendChild(t_body);
notes.appendChild(notes_card_area);
notes.appendChild(notes_entry);
ai_chat.appendChild(ai_chat_card_area);
ai_chat.appendChild(ai_chat_entry);
container.appendChild(transcript);
container.appendChild(notes);
container.appendChild(ai_chat);


const ele = document.getElementById("secondary-inner");
Expand Down