Merge branch 'main' of https://github.com/covespace/devchat-vscode
This commit is contained in:
Rankin Zheng
commit
31161a7880
51
media/chatPanel.html
Normal file
51
media/chatPanel.html
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- Meta tags for responsiveness and charset -->
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
|
<title>Chat Panel</title>
|
||||||
|
|
||||||
|
<!-- Font Awesome icons -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" />
|
||||||
|
<link rel="stylesheet" href="<vscode-resource:/chatPanel.css>" />
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" />
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="chat-container">
|
||||||
|
<div id="messages-container">
|
||||||
|
<!-- Chat messages will be added here dynamically -->
|
||||||
|
</div>
|
||||||
|
<div id="input-resize-handle" class="input-resize-handle"></div>
|
||||||
|
<div id="input-container">
|
||||||
|
<textarea id="message-input" placeholder="Type your message..."></textarea>
|
||||||
|
<button id="add-context-button">+</button><div id="popupContextMenu" class="popup-context-menu"></div><button id="add-command-button">Commands</button><div id="popupCommandMenu" class="popup-command-menu"></div><button id="send-button">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="context-menu" id="context-menu">
|
||||||
|
<div class="context-menu-item" id="menu-item-1">Insert Code</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Load the chatPanel.js file -->
|
||||||
|
<script src="<vscode-resource:/messageUtil.js>"></script>
|
||||||
|
<script src="<vscode-resource:/codeBlock.js>"></script>
|
||||||
|
<script src="<vscode-resource:/markdown.js>"></script>
|
||||||
|
<script src="<vscode-resource:/contextMenu.js>"></script>
|
||||||
|
<script src="<vscode-resource:/inputContainer.js>"></script>
|
||||||
|
<script src="<vscode-resource:/messageContainer.js>"></script>
|
||||||
|
<script src="<vscode-resource:/actionButton.js>"></script>
|
||||||
|
<script src="<vscode-resource:/chatUI.js>"></script>
|
||||||
|
<script src="<vscode-resource:/resizeInput.js>"></script>
|
||||||
|
<script src="<vscode-resource:/clipboard.js>"></script>
|
||||||
|
<script src="<vscode-resource:/main.js>"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
Prism.highlightAll();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
165
media/inputContainer.js
Normal file
165
media/inputContainer.js
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
|
||||||
|
const messageInput = document.getElementById('message-input');
|
||||||
|
const inputContainer = document.getElementById('input-container');
|
||||||
|
|
||||||
|
const defaultHeight = 16;
|
||||||
|
|
||||||
|
function autoResizeTextarea() {
|
||||||
|
const lineCount = (messageInput.value.match(/\n/g) || []).length + 1;
|
||||||
|
messageInput.style.height = 'auto';
|
||||||
|
messageInput.style.height = (lineCount <= 1 ? defaultHeight : messageInput.scrollHeight) + 'px';
|
||||||
|
inputContainer.style.height = 'auto';
|
||||||
|
inputContainer.style.height = messageInput.style.height + 25;
|
||||||
|
}
|
||||||
|
|
||||||
|
messageInput.addEventListener('input', autoResizeTextarea);
|
||||||
|
|
||||||
|
autoResizeTextarea();
|
||||||
|
|
||||||
|
function initInputContainer() {
|
||||||
|
const messageInput = document.getElementById('message-input');
|
||||||
|
const sendButton = document.getElementById('send-button');
|
||||||
|
const addContextButton = document.getElementById('add-context-button');
|
||||||
|
const addCommandButton = document.getElementById('add-command-button');
|
||||||
|
const popupContextMenu = document.getElementById('popupContextMenu');
|
||||||
|
const popupCommandMenu = document.getElementById('popupCommandMenu');
|
||||||
|
|
||||||
|
let contextList = [];
|
||||||
|
let commandList = [];
|
||||||
|
|
||||||
|
messageInput.addEventListener('keypress', function (e) {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
if (e.ctrlKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
const message = messageInput.value.trim();
|
||||||
|
if (message !== '') {
|
||||||
|
sendButton.click();
|
||||||
|
}
|
||||||
|
} else if (!e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
messageInput.setRangeText('\n', messageInput.selectionStart, messageInput.selectionEnd, 'end');
|
||||||
|
autoResizeTextarea();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
sendButton.addEventListener('click', () => {
|
||||||
|
const message = messageInput.value;
|
||||||
|
if (message) {
|
||||||
|
// Add the user's message to the chat UI
|
||||||
|
addMessageToUI('user', message);
|
||||||
|
|
||||||
|
// Clear the input field
|
||||||
|
messageInput.value = '';
|
||||||
|
|
||||||
|
// Process and send the message to the extension
|
||||||
|
messageUtil.sendMessage({
|
||||||
|
command: 'sendMessage',
|
||||||
|
text: message
|
||||||
|
});
|
||||||
|
autoResizeTextarea();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
addContextButton.addEventListener('click', (event) => {
|
||||||
|
popupContextMenu.style.display = popupContextMenu.style.display === 'block' ? 'none' : 'block';
|
||||||
|
// 设置弹出菜单的位置
|
||||||
|
popupContextMenu.style.left = event.pageX + 'px';
|
||||||
|
popupContextMenu.style.top = event.pageY + 'px';
|
||||||
|
});
|
||||||
|
|
||||||
|
addCommandButton.addEventListener('click', (event) => {
|
||||||
|
popupCommandMenu.style.display = popupCommandMenu.style.display === 'block' ? 'none' : 'block';
|
||||||
|
// 设置弹出菜单的位置
|
||||||
|
popupCommandMenu.style.left = event.pageX + 'px';
|
||||||
|
popupCommandMenu.style.top = event.pageY + 'px';
|
||||||
|
});
|
||||||
|
|
||||||
|
messageUtil.registerHandler('file_select', (message) => {
|
||||||
|
addFileToMessageInput(message.filePath);
|
||||||
|
});
|
||||||
|
|
||||||
|
messageUtil.registerHandler('code_select', (message) => {
|
||||||
|
addCodeToMessageInput(message.codeBlock);
|
||||||
|
});
|
||||||
|
|
||||||
|
messageUtil.registerHandler('appendContext', (message) => {
|
||||||
|
addCodeToMessageInput(message.context);
|
||||||
|
});
|
||||||
|
|
||||||
|
messageUtil.registerHandler('regContextList', (message) => {
|
||||||
|
contextList = message.result;
|
||||||
|
|
||||||
|
const menuItems = [];
|
||||||
|
for (let i = 0; i < contextList.length; i++) {
|
||||||
|
menuItems.push({
|
||||||
|
text: contextList[i].name,
|
||||||
|
href: contextList[i].name
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
menuItems.forEach(item => {
|
||||||
|
const menuItem = document.createElement('a');
|
||||||
|
menuItem.textContent = 'add ' + item.text;
|
||||||
|
menuItem.href = item.text;
|
||||||
|
|
||||||
|
popupContextMenu.appendChild(menuItem);
|
||||||
|
|
||||||
|
// 为每个菜单项添加点击事件监听器
|
||||||
|
menuItem.addEventListener('click', (event) => {
|
||||||
|
// 阻止<a>标签的默认行为（例如导航到链接）
|
||||||
|
event.preventDefault();
|
||||||
|
// 在此处定义点击处理逻辑
|
||||||
|
messageUtil.sendMessage({command: 'addContext', selected: item.href})
|
||||||
|
// 隐藏弹出菜单
|
||||||
|
popupContextMenu.style.display = 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
messageUtil.registerHandler('regCommandList', (message) => {
|
||||||
|
commandList = message.result;
|
||||||
|
|
||||||
|
const menuItems = [];
|
||||||
|
for (let i = 0; i < commandList.length; i++) {
|
||||||
|
menuItems.push({
|
||||||
|
text: commandList[i].pattern,
|
||||||
|
href: commandList[i].pattern
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
menuItems.forEach(item => {
|
||||||
|
const menuItem = document.createElement('a');
|
||||||
|
menuItem.textContent = item.text;
|
||||||
|
menuItem.href = item.href;
|
||||||
|
|
||||||
|
popupCommandMenu.appendChild(menuItem);
|
||||||
|
|
||||||
|
// 为每个菜单项添加点击事件监听器
|
||||||
|
menuItem.addEventListener('click', (event) => {
|
||||||
|
// 阻止<a>标签的默认行为（例如导航到链接）
|
||||||
|
event.preventDefault();
|
||||||
|
// 在此处定义点击处理逻辑
|
||||||
|
addCodeToMessageInput("/" + item.href);
|
||||||
|
// 隐藏弹出菜单
|
||||||
|
popupCommandMenu.style.display = 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
messageUtil.sendMessage({command: 'regContextList'});
|
||||||
|
messageUtil.sendMessage({command: 'regCommandList'});
|
||||||
|
}
|
||||||
|
|
||||||
|
function addFileToMessageInput(filePath) {
|
||||||
|
const messageInput = document.getElementById('message-input');
|
||||||
|
const formattedPath = `[context|${filePath}] `;
|
||||||
|
messageInput.value = formattedPath + messageInput.value;
|
||||||
|
messageInput.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function addCodeToMessageInput(codeBlock) {
|
||||||
|
const messageInput = document.getElementById('message-input');
|
||||||
|
messageInput.value += "\n" + codeBlock + "\n";
|
||||||
|
messageInput.focus();
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user