mirror of
https://github.com/Iheuzio/gpt-contextfiles.git
synced 2025-07-18 14:00:48 +00:00
fix(css): sidebar now has css
This commit is contained in:
Iheuzio
parent
7eff990efd
commit
54cb7530f7
356
extension.js
356
extension.js
@ -179,33 +179,283 @@ function getWebviewContent(apiResponse = '', question = '') {
|
|||||||
const fileList = selectedFiles
|
const fileList = selectedFiles
|
||||||
.map(
|
.map(
|
||||||
file =>
|
file =>
|
||||||
`<div><input type="checkbox" data-uri="${file.uri.fsPath}" ${
|
`<div><input type="checkbox" data-uri="${file.uri.fsPath}" ${file.selected ? 'checked' : ''
|
||||||
file.selected ? 'checked' : ''
|
|
||||||
} onchange="toggleFileSelection('${file.uri.fsPath}')" /> ${file.uri.fsPath}</div>`
|
} onchange="toggleFileSelection('${file.uri.fsPath}')" /> ${file.uri.fsPath}</div>`
|
||||||
)
|
)
|
||||||
.join('');
|
.join('');
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<html>
|
<html>
|
||||||
<body>
|
<head>
|
||||||
|
<style>
|
||||||
|
.panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
color: #d4d4d4;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textbox {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
resize: both;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
flex-grow: 1;
|
||||||
|
background-color: #007acc;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#response {
|
||||||
|
border: 1px solid #000;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
padding: 10px;
|
||||||
|
margin-top: 20px;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
#file-list {
|
||||||
|
margin-top: 20px;
|
||||||
|
border
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input[type="text"] {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background-color: #2d2d2d;
|
||||||
|
color: #d4d4d4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input[type="text"]::placeholder {
|
||||||
|
color: #d4d4d4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group .button-options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group .button-options button {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #007acc;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group .button-options button:hover {
|
||||||
|
background-color: #005f8c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group .button-options button:active {
|
||||||
|
background-color: #004d73;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group .button-options button:focus {
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-list {
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-list h2 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-list .file-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-list .file-item input[type="checkbox"] {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-list .file-item label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-list .file-item .file-path {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-list .file-item .file-path:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-list .file-item .file-path:active {
|
||||||
|
color: #007acc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-list .file-item .file-path:focus {
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible {
|
||||||
|
background-color: #2d2d2d;
|
||||||
|
color: #d4d4d4;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible:hover {
|
||||||
|
background-color: #3c3c3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible:active {
|
||||||
|
background-color: #4c4c4c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible:focus {
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 0 10px;
|
||||||
|
display: none;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active, .collapsible:hover {
|
||||||
|
background-color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active:after {
|
||||||
|
content: "\\2212";
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible:after {
|
||||||
|
content: "\\002B";
|
||||||
|
color: #d4d4d4;
|
||||||
|
font-weight: bold;
|
||||||
|
float: right;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active:after {
|
||||||
|
content: "\\2212";
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible:after {
|
||||||
|
content: "\\002B";
|
||||||
|
color: #d4d4d4;
|
||||||
|
font-weight: bold;
|
||||||
|
float: right;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rendered {
|
||||||
|
background-color: #2d2d2d;
|
||||||
|
word-wrap: wrap;
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 1px solid white;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#question-rep {
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #2d2d2d;
|
||||||
|
word-wrap: wrap;
|
||||||
|
border: 1px solid white;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#api-response.content.active {
|
||||||
|
background-color: #313131;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="panel">
|
||||||
<h1>GPT Context</h1>
|
<h1>GPT Context</h1>
|
||||||
<form id="questionForm">
|
<form id="questionForm">
|
||||||
<div>
|
<div class="form-group">
|
||||||
<label for="question">Enter your question:</label>
|
<label for="question">Enter your question:</label>
|
||||||
<input type="text" id="question" name="question" required>
|
<input type="text" id="question" name="question" placeholder="Enter your question" required>
|
||||||
<button type="submit">Submit</button>
|
<div class="button-options">
|
||||||
<button type="button" onclick="clearSelectedFiles()">Clear</button>
|
<button type="submit">Submit</button>
|
||||||
<button type="button" onclick="refreshSelectedFiles()">Refresh</button>
|
<button type="button" onclick="clearSelectedFiles()">Clear</button>
|
||||||
|
<button type="button" onclick="refreshSelectedFiles()">Refresh</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="form-group">
|
||||||
<div><pre>${question ? question : ''}</pre></div>
|
<div class="collapsible" onclick="toggleApiResponse()">
|
||||||
${
|
API Response
|
||||||
apiResponse ? `<div><pre>${apiResponse}</pre></div>` : ''
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="content" id="api-response">
|
||||||
<h2>Selected Files:</h2>
|
<div id="question-rep">
|
||||||
${fileList}
|
<p>${question ? '> ' + question : null}</p>
|
||||||
|
</div>
|
||||||
|
${
|
||||||
|
apiResponse ? `
|
||||||
|
<div id="rendered">
|
||||||
|
<p>${apiResponse}</p>
|
||||||
|
</div>
|
||||||
|
` : null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="selected-files">Selected Files:</label>
|
||||||
|
<div class="file-list">
|
||||||
|
${fileList ? fileList : '<p class="no-files">No files selected</p>'}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
const vscode = acquireVsCodeApi();
|
const vscode = acquireVsCodeApi();
|
||||||
@ -229,6 +479,21 @@ function getWebviewContent(apiResponse = '', question = '') {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleApiResponse() {
|
||||||
|
const apiResponse = document.getElementById('api-response');
|
||||||
|
apiResponse.classList.toggle('active');
|
||||||
|
const content = apiResponse;
|
||||||
|
const collapsible = apiResponse.previousElementSibling;
|
||||||
|
if (content.style.display === 'block') {
|
||||||
|
content.style.display = 'none';
|
||||||
|
collapsible.classList.remove('active');
|
||||||
|
} else {
|
||||||
|
content.style.display = 'block';
|
||||||
|
collapsible.classList.add('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
const form = document.getElementById('questionForm');
|
const form = document.getElementById('questionForm');
|
||||||
form.addEventListener('submit', event => {
|
form.addEventListener('submit', event => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
@ -254,6 +519,7 @@ function getWebviewContent(apiResponse = '', question = '') {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Activates the extension
|
// Activates the extension
|
||||||
function activate(context) {
|
function activate(context) {
|
||||||
context.subscriptions.push(addFilesCommand);
|
context.subscriptions.push(addFilesCommand);
|
||||||
@ -263,38 +529,38 @@ function activate(context) {
|
|||||||
context.subscriptions.push(refreshFilesCommand);
|
context.subscriptions.push(refreshFilesCommand);
|
||||||
vscode.window.registerTreeDataProvider('selectedFiles', fileDataProvider);
|
vscode.window.registerTreeDataProvider('selectedFiles', fileDataProvider);
|
||||||
|
|
||||||
const provider = {
|
const provider = {
|
||||||
resolveWebviewView(webviewView) {
|
resolveWebviewView(webviewView) {
|
||||||
webviewView.webview.options = {
|
webviewView.webview.options = {
|
||||||
enableScripts: true
|
enableScripts: true
|
||||||
};
|
};
|
||||||
webviewView.webview.html = getWebviewContent();
|
webviewView.webview.html = getWebviewContent();
|
||||||
webviewView.webview.onDidReceiveMessage(async message => {
|
webviewView.webview.onDidReceiveMessage(async message => {
|
||||||
if (message.command === 'toggleFileSelection') {
|
if (message.command === 'toggleFileSelection') {
|
||||||
const uri = message.uri;
|
const uri = message.uri;
|
||||||
const file = selectedFiles.find(file => file.uri.fsPath === uri);
|
const file = selectedFiles.find(file => file.uri.fsPath === uri);
|
||||||
if (file) {
|
if (file) {
|
||||||
file.toggleSelected();
|
file.toggleSelected();
|
||||||
|
fileDataProvider.refresh();
|
||||||
|
}
|
||||||
|
} else if (message.command === 'clearSelectedFiles') {
|
||||||
|
const clearedFiles = selectedFiles.filter(file => file.selected === false);
|
||||||
|
selectedFiles.length = 0; // Clear the array
|
||||||
|
clearedFiles.forEach(file => {
|
||||||
|
fileDataProvider.refresh();
|
||||||
|
});
|
||||||
|
webviewView.webview.html = getWebviewContent();
|
||||||
|
} else if (message.command === 'refreshFiles') {
|
||||||
fileDataProvider.refresh();
|
fileDataProvider.refresh();
|
||||||
|
webviewView.webview.html = getWebviewContent();
|
||||||
|
} else if (message.command === 'submitQuestion') {
|
||||||
|
await handleQuestionSubmission(webviewView, message.text, message.selectedUris);
|
||||||
}
|
}
|
||||||
} else if (message.command === 'clearSelectedFiles') {
|
});
|
||||||
const clearedFiles = selectedFiles.filter(file => file.selected === false);
|
}
|
||||||
selectedFiles.length = 0; // Clear the array
|
};
|
||||||
clearedFiles.forEach(file => {
|
|
||||||
fileDataProvider.refresh();
|
|
||||||
});
|
|
||||||
webviewView.webview.html = getWebviewContent();
|
|
||||||
} else if (message.command === 'refreshFiles') {
|
|
||||||
fileDataProvider.refresh();
|
|
||||||
webviewView.webview.html = getWebviewContent();
|
|
||||||
} else if (message.command === 'submitQuestion') {
|
|
||||||
await handleQuestionSubmission(webviewView, message.text, message.selectedUris);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
context.subscriptions.push(vscode.window.registerWebviewViewProvider('gpt-context-sidebar', provider));
|
context.subscriptions.push(vscode.window.registerWebviewViewProvider('gpt-context-sidebar', provider));
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user