Add code blocks and resizable window

gui/css/styles.css

@@ -11,6 +11,15 @@ body {
     scrollbar-width: thin;
     scrollbar-color: #34495e #2c3e50;
 }
+body, html {
+  height: 100%;
+  margin: 0;
+}
+#app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 #chatHistory {
     height: 300px;
     flex-grow: 1;
@@ -160,6 +169,23 @@ label {
     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 {
     width: 12px;
   }

gui/js/renderer.js

@@ -3,13 +3,27 @@ function displayMessage(message, sender) {
     const messageDiv = document.createElement('div');
     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') {
         messageDiv.classList.add('userMessage');
-    } else if (sender === 'assistant') {
+    } else {
         messageDiv.classList.add('assistantMessage');
     }
 
-    messageDiv.textContent = message;
     chatHistory.appendChild(messageDiv);
     chatHistory.scrollTop = chatHistory.scrollHeight;
 }
@@ -76,3 +90,10 @@ function displayTypingIndicator() {
     chatHistory.scrollTop = chatHistory.scrollHeight;
     return typingIndicator;
 }
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'F11') {
+    e.preventDefault();
+    ipcRenderer.send('toggle-fullscreen');
+  }
+});