83 lines
2.9 KiB
HTML
83 lines
2.9 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>AI Chat</title>
|
|
<style>
|
|
body { font-family: sans-serif; display: flex; flex-direction: column; height: 100vh; margin: 0; width: 400px; }
|
|
h1 { text-align: center; }
|
|
#url-container { display: flex; padding: 10px; }
|
|
#url-input { flex-grow: 1; border: 1px solid #ccc; padding: 10px; }
|
|
#go-button { border: 1px solid #ccc; padding: 10px; }
|
|
#chat-container { flex-grow: 1; overflow-y: auto; padding: 10px; border: 1px solid #ccc; margin: 10px; }
|
|
#input-container { display: flex; padding: 10px; }
|
|
#message-input { flex-grow: 1; border: 1px solid #ccc; padding: 10px; }
|
|
#send-button { border: 1px solid #ccc; padding: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>AI Chat</h1>
|
|
<div id="url-container">
|
|
<input type="text" id="url-input" placeholder="https://">
|
|
<button id="go-button">Go</button>
|
|
</div>
|
|
<div id="chat-container"></div>
|
|
<div id="input-container">
|
|
<input type="text" id="message-input" placeholder="Type your message...">
|
|
<button id="send-button">Send</button>
|
|
</div>
|
|
<script>
|
|
const { ipcRenderer } = require('electron');
|
|
const chatContainer = document.getElementById('chat-container');
|
|
const messageInput = document.getElementById('message-input');
|
|
const sendButton = document.getElementById('send-button');
|
|
const urlInput = document.getElementById('url-input');
|
|
const goButton = document.getElementById('go-button');
|
|
|
|
goButton.addEventListener('click', () => {
|
|
const url = urlInput.value;
|
|
if (url.trim() !== '') {
|
|
ipcRenderer.send('load-url', url);
|
|
}
|
|
});
|
|
|
|
sendButton.addEventListener('click', () => {
|
|
const message = messageInput.value;
|
|
if (message.trim() !== ''') {
|
|
addMessage('user', message);
|
|
messageInput.value = '';
|
|
ipcRenderer.send('send-message', message);
|
|
}
|
|
});
|
|
|
|
ipcRenderer.on('ai-response', (event, reply) => {
|
|
addMessage('ai', reply);
|
|
});
|
|
|
|
function addMessage(sender, text) {
|
|
const messageElement = document.createElement('div');
|
|
|
|
const jsCodeRegex = /```javascript\n([\s\S]*?)```/;
|
|
const match = text.match(jsCodeRegex);
|
|
|
|
if (sender === 'ai' && match) {
|
|
const code = match[1];
|
|
messageElement.innerHTML = `(ai): <pre><code>${code}</code></pre><button class="run-js-button">Run JS</button>`;
|
|
|
|
const runJsButton = messageElement.querySelector('.run-js-button');
|
|
runJsButton.addEventListener('click', () => {
|
|
ipcRenderer.send('execute-js', code);
|
|
});
|
|
|
|
} else {
|
|
messageElement.textContent = `(${sender}): ${text}`;
|
|
}
|
|
|
|
chatContainer.appendChild(messageElement);
|
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|