Add stop button
This commit is contained in:
parent
d2470b2dd6
commit
bdf5715868
|
@ -38,6 +38,25 @@ body {
|
|||
background-color: #6c757d;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
#stopButton {
|
||||
padding: 10px 20px;
|
||||
font-size: 1rem;
|
||||
color: white;
|
||||
background-color: #c0392b;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
#stopButton:hover {
|
||||
background-color: #a93226;
|
||||
}
|
||||
|
||||
#stopButton:disabled {
|
||||
background-color: #6c757d;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.message {
|
||||
font-size: 0.9em;
|
||||
padding: 10px 15px;
|
||||
|
|
|
@ -23,6 +23,7 @@
|
|||
<form id="chatForm" class="chat-form">
|
||||
<input id="promptInput" type="text" placeholder="Enter your prompt" autofocus>
|
||||
<button id="sendButton" onclick="sendPrompt()">Send</button>
|
||||
<button id="stopButton" disabled>Stop</button>
|
||||
</form>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
@ -75,4 +75,8 @@ const kuzcoCore = new KuzcoCore();
|
|||
ipcMain.handle('send-prompt', async (event, { prompt, model }) => {
|
||||
console.log("Received model in main process:", model);
|
||||
return await kuzcoCore.sendPrompt(prompt, model);
|
||||
});
|
||||
|
||||
ipcMain.on('abort-prompt', () => {
|
||||
kuzcoCore.abortFetch();
|
||||
});
|
|
@ -14,6 +14,8 @@ class KuzcoCore {
|
|||
constructor() {
|
||||
this.configPath = path.join(os.homedir(), '.kuzco-cli', 'config.json');
|
||||
this.API_KEY = this.loadApiKey();
|
||||
this.controller = new AbortController();
|
||||
this.isAborted = false;
|
||||
}
|
||||
|
||||
loadApiKey() {
|
||||
|
@ -36,12 +38,17 @@ class KuzcoCore {
|
|||
return fs.existsSync(this.configPath) && this.API_KEY !== '';
|
||||
}
|
||||
|
||||
abortFetch() {
|
||||
this.isAborted = true;
|
||||
this.controller.abort();
|
||||
}
|
||||
|
||||
async sendPrompt(prompt, model) {
|
||||
console.log("Model received in sendPrompt:", model)
|
||||
const controller = new AbortController();
|
||||
const signal = controller.signal;
|
||||
this.controller = new AbortController();
|
||||
const signal = this.controller.signal;
|
||||
|
||||
const timeoutId = setTimeout(() => controller.abort(), 25000);
|
||||
const timeoutId = setTimeout(() => this.controller.abort(), 25000);
|
||||
|
||||
try {
|
||||
const response = await fetch('https://relay.kuzco.xyz/v1/chat/completions', {
|
||||
|
@ -65,15 +72,19 @@ class KuzcoCore {
|
|||
}
|
||||
|
||||
return await response.json();
|
||||
|
||||
} catch (error) {
|
||||
clearTimeout(timeoutId);
|
||||
if (error.name === 'AbortError') {
|
||||
console.error('Request was aborted due to timeout.');
|
||||
return { error: 'Request timed out. Please try again.' };
|
||||
} else {
|
||||
console.error(`An error occurred: ${error.message}`);
|
||||
return { error: error.message };
|
||||
}
|
||||
const errorMessage = this.isAborted
|
||||
? 'Request aborted by the user. Please try again.'
|
||||
: 'Request timed out. Please try again.';
|
||||
|
||||
this.isAborted = false;
|
||||
this.controller = new AbortController();
|
||||
|
||||
return error.name === 'AbortError'
|
||||
? { error: errorMessage }
|
||||
: { error: error.message };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,4 +3,5 @@ const { contextBridge, ipcRenderer } = require('electron');
|
|||
contextBridge.exposeInMainWorld('electronAPI', {
|
||||
sendPrompt: (prompt, model) => ipcRenderer.invoke('send-prompt', { prompt, model }),
|
||||
onApiKeySaved: (callback) => ipcRenderer.on('api-key-saved', callback),
|
||||
abortPrompt: () => ipcRenderer.send('abort-prompt')
|
||||
});
|
|
@ -19,6 +19,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
const promptInput = document.getElementById('promptInput');
|
||||
const modelSelect = document.getElementById('modelSelect');
|
||||
const sendButton = document.getElementById('sendButton');
|
||||
const stopButton = document.getElementById('stopButton');
|
||||
const modelSelectionContainer = document.getElementById('modelSelectionContainer');
|
||||
|
||||
if (chatForm && promptInput && modelSelect) {
|
||||
|
@ -32,6 +33,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
sendButton.disabled = true;
|
||||
promptInput.disabled = true;
|
||||
stopButton.disabled = false;
|
||||
|
||||
displayMessage(userInput, 'user');
|
||||
|
||||
|
@ -49,10 +51,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
displayMessage(`Error: ${error.message}`, 'assistant');
|
||||
} finally {
|
||||
typingIndicator.remove();
|
||||
|
||||
sendButton.disabled = false;
|
||||
promptInput.disabled = false;
|
||||
promptInput.focus();
|
||||
stopButton.disabled = true;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
@ -60,6 +62,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
}
|
||||
});
|
||||
|
||||
document.getElementById('stopButton').addEventListener('click', () => {
|
||||
window.electronAPI.abortPrompt();
|
||||
document.getElementById('stopButton').disabled = true;
|
||||
});
|
||||
|
||||
function displayTypingIndicator() {
|
||||
const chatHistory = document.getElementById('chatHistory');
|
||||
const typingIndicator = document.createElement('div');
|
||||
|
|
Loading…
Reference in New Issue