Add code blocks and resizable window

This commit is contained in:
Wizzard 2024-03-09 17:23:16 -05:00
parent ee6f775b5b
commit 045f78d50d
2 changed files with 50 additions and 3 deletions

View File

@ -11,6 +11,15 @@ body {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #34495e #2c3e50; scrollbar-color: #34495e #2c3e50;
} }
body, html {
height: 100%;
margin: 0;
}
#app {
display: flex;
flex-direction: column;
height: 100%;
}
#chatHistory { #chatHistory {
height: 300px; height: 300px;
flex-grow: 1; flex-grow: 1;
@ -160,6 +169,23 @@ label {
margin-bottom: 10px; margin-bottom: 10px;
} }
pre {
background-color: #333;
color: #f8f8f2;
border: 1px solid #2980b9;
border-left: 3px solid #2980b9;
padding: 10px;
overflow-x: auto;
font-family: 'Courier New', Courier, monospace;
margin: 10px 0;
border-radius: 4px;
white-space: pre-wrap;
}
code {
font-family: 'Courier New', Courier, monospace;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 12px; width: 12px;
} }

View File

@ -3,13 +3,27 @@ function displayMessage(message, sender) {
const messageDiv = document.createElement('div'); const messageDiv = document.createElement('div');
messageDiv.classList.add('message'); messageDiv.classList.add('message');
const parts = message.split('```');
for (let i = 0; i < parts.length; i++) {
if (i % 2 === 0) {
const textPart = document.createElement('span');
textPart.textContent = parts[i];
messageDiv.appendChild(textPart);
} else {
const codeBlock = document.createElement('pre');
const code = document.createElement('code');
code.textContent = parts[i];
codeBlock.appendChild(code);
messageDiv.appendChild(codeBlock);
}
}
if (sender === 'user') { if (sender === 'user') {
messageDiv.classList.add('userMessage'); messageDiv.classList.add('userMessage');
} else if (sender === 'assistant') { } else {
messageDiv.classList.add('assistantMessage'); messageDiv.classList.add('assistantMessage');
} }
messageDiv.textContent = message;
chatHistory.appendChild(messageDiv); chatHistory.appendChild(messageDiv);
chatHistory.scrollTop = chatHistory.scrollHeight; chatHistory.scrollTop = chatHistory.scrollHeight;
} }
@ -76,3 +90,10 @@ function displayTypingIndicator() {
chatHistory.scrollTop = chatHistory.scrollHeight; chatHistory.scrollTop = chatHistory.scrollHeight;
return typingIndicator; return typingIndicator;
} }
document.addEventListener('keydown', (e) => {
if (e.key === 'F11') {
e.preventDefault();
ipcRenderer.send('toggle-fullscreen');
}
});