Skip to content

Commit 7930e8f

Browse files
chachaaa-23chachaaa-23
committed
merge with dev
2 parents d080899 + d6b1972 commit 7930e8f

9 files changed

Lines changed: 270 additions & 3938 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,25 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
66

77
## [Unreleased]
88

9+
## [1.1.1] - 2025-01-13
10+
11+
### fix
12+
13+
> update document
14+
15+
## [1.1.0] - 2025-01-13
16+
17+
### feat
18+
19+
> Additional question buttons
20+
> indicate loading state
21+
> Delete step button
22+
> Select document file to send GPT
23+
24+
### fix
25+
26+
> prompt Optimization
27+
928
## [1.0.1] - 2025-01-06
1029

1130
### fix

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<h1 align="center">Welcome to Coding Roadmap Assistant 👋</h1>
22
<p>
3-
<img alt="Version" src="https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000" />
3+
<img alt="Version" src="https://img.shields.io/badge/version-1.1.1-blue.svg?cacheSeconds=2592000" />
44
<img src="https://img.shields.io/badge/vscode-%5E1.96.0-blue.svg" />
55
<a href="https://mit-license.org/" target="_blank">
66
<img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />

‎media/style.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,3 +161,25 @@ input {
161161
.invisible {
162162
display: none;
163163
}
164+
165+
#deleteStep {
166+
background-color: #dc3545; /* 붉은색 배경 */
167+
color: white; /* 텍스트 색상 */
168+
border-radius: 4px;
169+
padding: 10px 20px;
170+
border: none;
171+
cursor: pointer;
172+
width: 100%;
173+
font-size: 14px;
174+
display: flex;
175+
align-items: center;
176+
justify-content: center;
177+
}
178+
179+
#deleteStep span {
180+
margin-left: 10px; /* 아이콘과 텍스트 간격 */
181+
}
182+
183+
#additionalBtn.invisible {
184+
display: none !important;
185+
}

‎media/webview.html‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
</div>
2626
</div>
2727
<button id="addStep" class="btn btn-secondary mt-2 w-100"><span>Add Step</span></button>
28+
<button id="deleteStep" class="btn btn-danger"><span>Delete Step</span></button>
2829
</div>
2930
<button id="submitButton" class="btn"><span>Submit</span></button>
3031
</div>
@@ -36,11 +37,19 @@ <h3>Steps</h3>
3637
<ol id="userOutputStepBtn"></ol>
3738
</div>
3839
<hr />
39-
<div id="gptOutputContent"></div>
40-
<div id="additionalBtn" class="d-flex justify-content-center mt-3 invisible">
41-
<button id="button1" class="btn btn-primary mx-2">Button 1</button>
42-
<button id="button2" class="btn btn-secondary mx-2">Button 2</button>
43-
<button id="button3" class="btn btn-success mx-2">Button 3</button>
40+
<div id="loadingContent" class="invisible">
41+
<p>Loading...</p>
42+
<p>Please Wait a few seconds</p>
43+
<h1>🙏</h1>
44+
</div>
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>
4453
</div>
4554
</div>
4655
</div>

‎media/webviewscript.js‎

Lines changed: 138 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,26 @@
11
document.getElementById("toggleNav").addEventListener("click", toggleNav);
22
document.getElementById("addStep").addEventListener("click", addStep);
3+
document.getElementById("deleteStep").addEventListener("click", deleteStep);
34
document.getElementById("submitButton").addEventListener("click", submitData);
45
document.getElementById("resetButton").addEventListener("click", resetForm);
5-
6-
const vscode = acquireVsCodeApi(); // webview.ts 와 정보 주고받기
7-
8-
function toggleNav() {
9-
const inputSection = document.getElementById("inputSection");
10-
const outputSection = document.getElementById("outputSection");
11-
const toggleNavButton = document.getElementById("toggleNav");
12-
13-
toggleNavButton.textContent = "";
14-
15-
if (inputSection.style.maxHeight === "0px") {
16-
inputSection.style.maxHeight = "100vh";
17-
inputSection.style.opacity = "1";
18-
outputSection.style.height = "0";
19-
outputSection.style.opacity = "0";
20-
} else {
21-
inputSection.style.maxHeight = "0";
22-
inputSection.style.opacity = "0";
23-
outputSection.style.height = "100%";
24-
outputSection.style.opacity = "1";
25-
}
26-
}
27-
28-
function addStep() {
29-
const stepContainer = document.getElementById("steps");
30-
const stepCount = stepContainer.querySelectorAll(".step").length + 1;
31-
const newStep = document.createElement("div");
32-
newStep.classList.add("step", "mb-2");
33-
newStep.innerHTML = `<input type="text" class="form-control stepInput" placeholder="Step ${stepCount}">`;
34-
stepContainer.appendChild(newStep);
6+
document.getElementById("button1").addEventListener("click", () => buttonClick(1));
7+
document.getElementById("button2").addEventListener("click", () => buttonClick(2));
8+
document.getElementById("button3").addEventListener("click", () => buttonClick(3));
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();
15+
let initialResponse = "";
16+
let submitCount = 0;
17+
let gptListenerAdded = false;
18+
19+
function debug(message) {
20+
vscode.postMessage({
21+
command: "debug",
22+
data: message,
23+
});
3524
}
3625

3726
function submitData() {
@@ -58,54 +47,78 @@ function submitData() {
5847
let dataToSend = "problem definition: " + problemInput + ", steps: "; // save data to send to Chat-GPT
5948

6049
let userInputStepIndex = 1;
50+
userOutputStepBtn.innerHTML = "";
6151
steps.forEach((userInputStep) => {
6252
userOutputStepBtn.innerHTML += `<li>${userInputStep}</li>`;
6353
dataToSend += userInputStepIndex + ". " + userInputStep + " ";
6454
userInputStepIndex++;
6555
});
6656
delete userInputStepIndex; //reset userInputStepIndex number
6757

68-
sendData(dataToSend); // send data into webview.ts
58+
submitCount++;
6959

70-
showGptResult(); // get gpt's response and show chat-GPT's result to html.
60+
if (submitCount > 1) {
61+
clearContent();
62+
}
63+
64+
sendData(dataToSend);
65+
showGptResult();
7166

7267
toggleNav();
73-
}
7468

75-
// send data into webview.ts
76-
function sendData(data) {
77-
vscode.postMessage({
78-
command: "process",
79-
value: data,
80-
});
69+
additionalBtn.style.display = "block";
8170
}
8271

8372
// get gpt's response and show chat-GPT's result to html.
8473
function showGptResult() {
85-
window.addEventListener("message", (event) => {
86-
const message = event.data; // get gpt's response
87-
88-
if (message.command === "setData") {
89-
const gptOutputContent = document.getElementById("gptOutputContent");
90-
91-
if (gptOutputContent) {
92-
gptOutputContent.innerHTML = `<h3>GPT Response:</h3><p>${marked.parse(message.data)}</p>`; // show chat-GPT's result to html.
74+
if (!gptListenerAdded) {
75+
window.addEventListener("message", (event) => {
76+
const message = event.data; // get gpt's response
77+
if (message.command === "setData") {
78+
const gptOutputContent = document.getElementById("gptOutputContent");
79+
80+
if (gptOutputContent) {
81+
loadingContent.classList.add("invisible");
82+
gptResponse = message.data;
83+
84+
// If it's the first response, store it and show it along with the user's prompt
85+
if (initialResponse === "") {
86+
initialResponse = gptResponse;
87+
88+
gptOutputContent.classList.remove("invisible");
89+
firstResponseContent.classList.remove("invisible");
90+
firstResponseContent.innerHTML += `<h3>GPT's Response</h3><p>${marked.parse(initialResponse)}</p>`;
91+
} else {
92+
// If it's not the first response, show it above the previous response
93+
94+
advancedResponseContent.innerHTML = "";
95+
advancedResponseContent.classList.remove("invisible");
96+
advancedResponseContent.innerHTML += `<h3 class="advancedResponse">Advanced questions</h3><p>${marked.parse(gptResponse)}</p>`;
97+
}
98+
99+
// Display the buttons again below the responses
100+
const additionalBtn = document.getElementById("additionalBtn");
93101

94-
const additionalBtn = document.getElementById("additionalBtn");
95-
if (additionalBtn) {
96102
additionalBtn.classList.remove("invisible");
103+
additionalBtn.style.display = "block";
97104
}
98105
} else {
99-
alert("No response from Chat-GPT.");
106+
console.log("message command is not a setData.");
100107
}
101-
}
102-
});
108+
});
109+
gptListenerAdded = true;
110+
} else {
111+
console.log("gptListenerAdded is already true");
112+
}
103113
}
104114

105115
function resetForm() {
106116
const inputSection = document.getElementById("inputSection");
117+
const additionalBtn = document.getElementById("additionalBtn");
118+
119+
// Ensure input section is visible
107120
if (inputSection.style.maxHeight === "0px") {
108-
toggleNav(); // Ensure input section is visible
121+
toggleNav();
109122
}
110123

111124
// Clear problem input
@@ -126,14 +139,81 @@ function resetForm() {
126139
document.getElementById("userOutputStepBtn").innerHTML = "";
127140

128141
// Reset GPT output content
129-
const gptOutputContent = document.getElementById("gptOutputContent");
130-
if (gptOutputContent) {
131-
gptOutputContent.innerHTML = "";
132-
}
142+
document.getElementById("firstResponseContent").innerHTML = "";
143+
document.getElementById("advancedResponseContent").innerHTML = "";
133144

134145
// Hide additional buttons
135-
const additionalBtn = document.getElementById("additionalBtn");
136146
if (additionalBtn) {
147+
additionalBtn.classList.add("invisible");
137148
additionalBtn.style.display = "none";
138149
}
150+
151+
// Reset stored responses
152+
initialResponse = "";
153+
gptResponse = "";
154+
}
155+
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+
205+
function clearContent() {
206+
firstResponseContent.innerHTML = "";
207+
advancedResponseContent.innerHTML = "";
208+
initialResponse = "";
209+
gptResponse = "";
210+
}
211+
212+
function buttonClick(buttonNumber) {
213+
loadingContent.classList.remove("invisible");
214+
215+
vscode.postMessage({
216+
command: `button${buttonNumber}`,
217+
data: initialResponse,
218+
});
139219
}

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "coding-roadmap-assistant",
33
"displayName": "Coding Roadmap Assistant",
44
"description": "Coding Companion for Coding Beginners, based on OpenAI API.",
5-
"version": "1.0.2",
5+
"version": "1.1.1",
66
"engines": {
77
"vscode": "^1.96.0"
88
},

0 commit comments

Comments
 (0)