Skip to content

Commit 74210c7

Browse files
CakeCrusherCakeCrusher
committed
popup FULL_CURRENT_CHAT
1 parent 5fa7e55 commit 74210c7

File tree

3 files changed

+81
-24
lines changed

3 files changed

+81
-24
lines changed

‎background.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@ let chat = []
66
chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
77
// if request is of type CURRENT_CHAT then concat on the ticId
88
if (request.type === "CURRENT_CHAT") {
9-
const { data } = request;
10-
request.data.chat.forEach(chatInstance => {
11-
const chatIndex = chat.findIndex(chatInstance => chatInstance.ticId === ticId);
9+
const passedChat = request.data.chat;
10+
passedChat.forEach(passedChatInstance => {
11+
const chatIndex = chat.findIndex(chatInstance => chatInstance.ticId === passedChatInstance.ticId);
1212
if (chatIndex > -1) {
13-
chat[chatIndex].content = chatInstance.content;
13+
chat[chatIndex].content = passedChatInstance.content;
1414
} else {
15-
chat.push(chatInstance);
15+
chat.push(passedChatInstance);
1616
}
1717
});
18+
console.log("Background chat: ", chat)
1819
chrome.runtime.sendMessage({ type: "FULL_CURRENT_CHAT", data: { chat } });
1920
}
2021
if (request.type === "CLOSED_CAPTION") {

‎popup/popup.html‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,45 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Document</title>
8+
<style>
9+
#chatContainer {
10+
display: flex;
11+
flex-direction: column;
12+
background-color: #3c4043;
13+
padding: 10px;
14+
border-radius: 5px;
15+
margin-bottom: 10px;
16+
}
17+
.youChatInstance {
18+
/* bluish background color */
19+
background-color: #395163;
20+
color: #fff;
21+
padding: 5px;
22+
border-radius: 5px;
23+
margin-bottom: 5px;
24+
align-self: flex-end;
25+
}
26+
.interviewerChatInstance {
27+
/* greyish background color */
28+
background-color: #4c5256;
29+
color: #fff;
30+
padding: 5px;
31+
border-radius: 5px;
32+
margin-bottom: 5px;
33+
align-self: flex-start;
34+
}
35+
</style>
836
</head>
937
<body style="width: 500px; display: flex; flex-direction: column;">
1038
<h1>tech-int-cheat</h1>
11-
<h2>Status: <span id="status">Idle</span></h2>
12-
<button id="start_rec_btn" style="margin-bottom: 10px;">start recording</button>
13-
<button id="btn">stop recording & get code</button>
39+
<!-- <h2>Status: <span id="status">Idle</span></h2> -->
40+
<!-- create a chat container to hold a chat exchange -->
41+
<div id="chatContainer">
42+
<!-- this container will be populated dynamicly with messages of class youChatInstance and interviewerChatInstance -->
43+
</div>
44+
<!-- <button id="start_rec_btn" style="margin-bottom: 10px;">start recording</button>
45+
<button id="btn">stop recording & get code</button> -->
1446
<script src="./popup.js"></script>
15-
<code style="background-color: #3c4043; color: #fff; padding: 5px; " id="code">CODE_WILL_APPEAR_HERE</code>
47+
<!-- <code style="background-color: #3c4043; color: #fff; padding: 5px; " id="code">CODE_WILL_APPEAR_HERE</code> -->
1648
</body>
1749
</html>

‎popup/popup.js‎

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,48 @@
11
console.log("Popup!!")
2-
// send a message to the service worker of type "RECORD"
2+
// // send a message to the service worker of type "RECORD"
33

4-
const startBtn = document.getElementById("start_rec_btn");
5-
const statusSpan = document.getElementById("status");
6-
// add event listener to the button
7-
startBtn.addEventListener("click", function () {
8-
statusSpan.innerText = "Recording...";
9-
chrome.runtime.sendMessage({ type: "RECORD" });
10-
})
4+
// const startBtn = document.getElementById("start_rec_btn");
5+
// const statusSpan = document.getElementById("status");
6+
// // add event listener to the button
7+
// startBtn.addEventListener("click", function () {
8+
// statusSpan.innerText = "Recording...";
9+
// chrome.runtime.sendMessage({ type: "RECORD" });
10+
// })
1111

12-
// get element of id "btn"
13-
const btn = document.getElementById("btn");
14-
// add event listener to the button
15-
btn.addEventListener("click", function () {
16-
statusSpan.innerText = "Awaiting results...";
17-
chrome.runtime.sendMessage({ type: "STOP_RECORDING" });
18-
})
12+
// // get element of id "btn"
13+
// const btn = document.getElementById("btn");
14+
// // add event listener to the button
15+
// btn.addEventListener("click", function () {
16+
// statusSpan.innerText = "Awaiting results...";
17+
// chrome.runtime.sendMessage({ type: "STOP_RECORDING" });
18+
// })
1919

2020
// listen to message with type "SUGGESTED_CODE"
2121
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
22+
console.log("Popup received message", request)
23+
if (request.type === "FULL_CURRENT_CHAT") {
24+
// iterate through the chat and populate the chatContainer div with divs containing the class youChatInstance and interviewerChatInstance depending on the role, the text content of the div should be the content
25+
const chatContainer = document.getElementById("chatContainer");
26+
console.log("Popup chat: ", request.data.chat)
27+
// only add a new div if the ticId is not already in the chatContainer
28+
request.data.chat.forEach(chatInstance => {
29+
const chatDiv = document.createElement("div");
30+
chatDiv.innerText = chatInstance.content;
31+
if (chatInstance.role.toUpperCase() === "YOU") {
32+
chatDiv.classList.add("youChatInstance");
33+
} else {
34+
chatDiv.classList.add("interviewerChatInstance");
35+
}
36+
// add an attribute ticId with the value of the ticId
37+
chatDiv.setAttribute("ticId", chatInstance.ticId);
38+
console.log("Chat div: ", chatDiv)
39+
if (document.querySelector(`[ticId="${chatInstance.ticId}"]`) === null) {
40+
chatContainer.appendChild(chatDiv);
41+
}
42+
}
43+
);
44+
45+
}
2246
if (request.type === "SUGGESTED_CODE") {
2347
// get element of id "code"
2448
statusSpan.innerText = "Idle";

0 commit comments

Comments
 (0)