Skip to content

Commit a56629e

Browse files
JangmyunJangmyun
authored
Merge pull request #54 from Computer-Research-Association/48-add-delete-step-button-and-send-message-when-clicking-the-additional-question-button
48 add delete step button and send message when clicking the additional question button
2 parents d43825e + 5bf6292 commit a56629e

3 files changed

Lines changed: 83 additions & 71 deletions

File tree

‎media/webview.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,14 @@ <h3>Steps</h3>
4242
<p>Please Wait a few seconds</p>
4343
<h1>🙏</h1>
4444
</div>
45-
<div id="gptOutputContent"></div>
46-
<div id="additionalBtn" class="d-flex justify-content-center mt-3 invisible">
47-
<button id="button1" class="btn btn-primary mx-2">Button 1</button>
48-
<button id="button2" class="btn btn-secondary mx-2">Button 2</button>
49-
<button id="button3" class="btn btn-success mx-2">Button 3</button>
45+
<div id="gptOutputContent">
46+
<div id="advancedResponseContent" class="invisible"></div>
47+
<div id="firstResponseContent" class="invisible"></div>
48+
<div id="additionalBtn" class="d-flex justify-content-center mt-3 invisible">
49+
<button id="button1" class="btn btn-primary mx-2">Button 1</button>
50+
<button id="button2" class="btn btn-secondary mx-2">Button 2</button>
51+
<button id="button3" class="btn btn-success mx-2">Button 3</button>
52+
</div>
5053
</div>
5154
</div>
5255
</div>

‎media/webviewscript.js‎

Lines changed: 72 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,65 +2,25 @@ document.getElementById("toggleNav").addEventListener("click", toggleNav);
22
document.getElementById("addStep").addEventListener("click", addStep);
33
document.getElementById("deleteStep").addEventListener("click", deleteStep);
44
document.getElementById("submitButton").addEventListener("click", submitData);
5-
const firstResponseContent = document.getElementById("firstResponseContent");
6-
const advancedResponseContent = document.getElementById("advancedResponseContent");
75
document.getElementById("resetButton").addEventListener("click", resetForm);
8-
9-
const loadingContent = document.getElementById("loadingContent");
10-
const gptOutputContent = document.getElementById("gptOutputContent");
116
document.getElementById("button1").addEventListener("click", () => buttonClick(1));
127
document.getElementById("button2").addEventListener("click", () => buttonClick(2));
138
document.getElementById("button3").addEventListener("click", () => buttonClick(3));
14-
15-
function buttonClick(buttonNumber) {
16-
vscode.postMessage({
17-
command: `button${buttonNumber}`,
18-
data: initialResponse,
19-
});
20-
}
21-
9+
const loadingContent = document.getElementById("loadingContent");
10+
const gptOutputContent = document.getElementById("gptOutputContent");
11+
const additionalBtn = document.getElementById("additionalBtn");
12+
const firstResponseContent = document.getElementById("firstResponseContent");
13+
const advancedResponseContent = document.getElementById("advancedResponseContent");
14+
const vscode = acquireVsCodeApi();
2215
let initialResponse = "";
2316
let submitCount = 0;
2417
let gptListenerAdded = false;
25-
const additionalBtn = document.getElementById("additionalBtn");
26-
27-
const vscode = acquireVsCodeApi();
28-
function toggleNav() {
29-
const inputSection = document.getElementById("inputSection");
30-
const outputSection = document.getElementById("outputSection");
31-
const toggleNavButton = document.getElementById("toggleNav");
32-
33-
toggleNavButton.textContent = "";
3418

35-
if (inputSection.style.maxHeight === "0px") {
36-
inputSection.style.maxHeight = "100vh";
37-
inputSection.style.opacity = "1";
38-
outputSection.style.height = "0";
39-
outputSection.style.opacity = "0";
40-
} else {
41-
inputSection.style.maxHeight = "0";
42-
inputSection.style.opacity = "0";
43-
outputSection.style.height = "100%";
44-
outputSection.style.opacity = "1";
45-
}
46-
}
47-
48-
function addStep() {
49-
const stepContainer = document.getElementById("steps");
50-
const stepCount = stepContainer.querySelectorAll(".step").length + 1;
51-
const newStep = document.createElement("div");
52-
newStep.classList.add("step", "mb-2");
53-
newStep.innerHTML = `<input type="text" class="form-control stepInput" placeholder="Step ${stepCount}">`;
54-
stepContainer.appendChild(newStep);
55-
}
56-
57-
function deleteStep() {
58-
const stepContainer = document.getElementById("steps");
59-
const stepCount = stepContainer.querySelectorAll(".step").length;
60-
61-
if (stepCount > 1) {
62-
stepContainer.removeChild(stepContainer.lastChild);
63-
}
19+
function debug(message) {
20+
vscode.postMessage({
21+
command: "debug",
22+
data: message,
23+
});
6424
}
6525

6626
function submitData() {
@@ -101,26 +61,14 @@ function submitData() {
10161
clearContent();
10262
}
10363

104-
sendData(dataToSend); // send data into webview.ts
105-
106-
showGptResult(); // get gpt's response and show chat-GPT's result to html.
64+
sendData(dataToSend);
65+
showGptResult();
10766

10867
toggleNav();
10968

11069
additionalBtn.style.display = "block";
11170
}
11271

113-
function sendData(data) {
114-
loadingContent.classList.remove("invisible");
115-
additionalBtn.classList.add("invisible");
116-
gptOutputContent.classList.add("invisible");
117-
118-
vscode.postMessage({
119-
command: "process",
120-
value: data,
121-
});
122-
}
123-
12472
// get gpt's response and show chat-GPT's result to html.
12573
function showGptResult() {
12674
if (!gptListenerAdded) {
@@ -131,13 +79,13 @@ function showGptResult() {
13179

13280
if (gptOutputContent) {
13381
loadingContent.classList.add("invisible");
134-
gptOutputContent.classList.remove("invisible");
13582
gptResponse = message.data;
13683

13784
// If it's the first response, store it and show it along with the user's prompt
13885
if (initialResponse === "") {
13986
initialResponse = gptResponse;
14087

88+
gptOutputContent.classList.remove("invisible");
14189
firstResponseContent.classList.remove("invisible");
14290
firstResponseContent.innerHTML += `<h3>GPT's Response</h3><p>${marked.parse(initialResponse)}</p>`;
14391
} else {
@@ -205,9 +153,67 @@ function resetForm() {
205153
gptResponse = "";
206154
}
207155

156+
function sendData(data) {
157+
loadingContent.classList.remove("invisible");
158+
additionalBtn.classList.add("invisible");
159+
gptOutputContent.classList.add("invisible");
160+
161+
vscode.postMessage({
162+
command: "process",
163+
value: data,
164+
});
165+
}
166+
167+
function addStep() {
168+
const stepContainer = document.getElementById("steps");
169+
const stepCount = stepContainer.querySelectorAll(".step").length + 1;
170+
const newStep = document.createElement("div");
171+
newStep.classList.add("step", "mb-2");
172+
newStep.innerHTML = `<input type="text" class="form-control stepInput" placeholder="Step ${stepCount}">`;
173+
stepContainer.appendChild(newStep);
174+
}
175+
176+
function deleteStep() {
177+
const stepContainer = document.getElementById("steps");
178+
const stepCount = stepContainer.querySelectorAll(".step").length;
179+
180+
if (stepCount > 1) {
181+
stepContainer.removeChild(stepContainer.lastChild);
182+
}
183+
}
184+
185+
function toggleNav() {
186+
const inputSection = document.getElementById("inputSection");
187+
const outputSection = document.getElementById("outputSection");
188+
const toggleNavButton = document.getElementById("toggleNav");
189+
190+
toggleNavButton.textContent = "";
191+
192+
if (inputSection.style.maxHeight === "0px") {
193+
inputSection.style.maxHeight = "100vh";
194+
inputSection.style.opacity = "1";
195+
outputSection.style.height = "0";
196+
outputSection.style.opacity = "0";
197+
} else {
198+
inputSection.style.maxHeight = "0";
199+
inputSection.style.opacity = "0";
200+
outputSection.style.height = "100%";
201+
outputSection.style.opacity = "1";
202+
}
203+
}
204+
208205
function clearContent() {
209206
firstResponseContent.innerHTML = "";
210207
advancedResponseContent.innerHTML = "";
211208
initialResponse = "";
212209
gptResponse = "";
213210
}
211+
212+
function buttonClick(buttonNumber) {
213+
loadingContent.classList.remove("invisible");
214+
215+
vscode.postMessage({
216+
command: `button${buttonNumber}`,
217+
data: initialResponse,
218+
});
219+
}

‎src/webview.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,8 @@ export default class CRAWebviewViewProvider implements vscode.WebviewViewProvide
156156
vscode.window.showErrorMessage("Failed to process button3 click.");
157157
}
158158
break;
159+
case "debug":
160+
console.log(message.data);
159161
}
160162
});
161163
}
@@ -186,6 +188,7 @@ export default class CRAWebviewViewProvider implements vscode.WebviewViewProvide
186188
Important Guidelines:
187189
- You must NOT provide the correct answer or solution in any form.
188190
- Responses should strictly avoid a conversational tone and include only the specified two elements.
191+
- If user's input language is not an English, change output language into user's one.,
189192
- Provide a two-sentence summary instead of the first results of gpt. `,
190193
};
191194

0 commit comments

Comments
 (0)