Frontend capture complete response
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
{% block head_meta %}
|
||||
{{ super() }}
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<link rel="stylesheet" href="{{ url_for('wingman.static', filename='css/wingman_chat.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
@@ -77,25 +78,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.provider-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.provider-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #666;
|
||||
}
|
||||
.model-option {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.model-option label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -129,259 +112,5 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.message {
|
||||
margin-bottom: 15px;
|
||||
max-width: 80%;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.message-user {
|
||||
float: right;
|
||||
background-color: #f0f7ff;
|
||||
border: 1px solid #d1e6ff;
|
||||
border-radius: 15px 15px 0 15px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.message-assistant {
|
||||
float: left;
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 15px 15px 15px 0;
|
||||
padding: 10px 15px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#chat-messages::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.panel-body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.panel-body::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.panel-body::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.panel-body::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add title attributes for tooltips
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
|
||||
el.title = el.getAttribute('title') || el.getAttribute('data-bs-original-title');
|
||||
});
|
||||
|
||||
// Handle model selection and model name input
|
||||
const modelNameInput = document.getElementById('modelName');
|
||||
const modelRadios = document.querySelectorAll('input[name="model"]');
|
||||
|
||||
modelRadios.forEach(function(radio) {
|
||||
radio.addEventListener('change', function() {
|
||||
const provider = this.value.split(':')[0]; // Get provider from value instead of data attribute
|
||||
const modelName = this.getAttribute('data-model-name');
|
||||
console.log('Selected provider:', provider);
|
||||
console.log('Model name:', modelName);
|
||||
|
||||
if (provider === 'openrouter') {
|
||||
console.log('Enabling model name input');
|
||||
modelNameInput.disabled = false;
|
||||
modelNameInput.value = '';
|
||||
modelNameInput.placeholder = 'Enter model name for OpenRouter';
|
||||
} else {
|
||||
console.log('Disabling model name input');
|
||||
modelNameInput.disabled = true;
|
||||
modelNameInput.value = modelName;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Set initial state based on default selection
|
||||
const defaultSelected = document.querySelector('input[name="model"]:checked');
|
||||
if (defaultSelected) {
|
||||
const provider = defaultSelected.value.split(':')[0]; // Get provider from value instead of data attribute
|
||||
const modelName = defaultSelected.getAttribute('data-model-name');
|
||||
console.log('Initial provider:', provider);
|
||||
console.log('Initial model name:', modelName);
|
||||
|
||||
if (provider === 'openrouter') {
|
||||
console.log('Initially enabling model name input');
|
||||
modelNameInput.disabled = false;
|
||||
modelNameInput.value = '';
|
||||
modelNameInput.placeholder = 'Enter model name for OpenRouter';
|
||||
} else {
|
||||
console.log('Initially disabling model name input');
|
||||
modelNameInput.disabled = true;
|
||||
modelNameInput.value = modelName;
|
||||
}
|
||||
}
|
||||
|
||||
const messageInput = document.getElementById('message-input');
|
||||
const sendButton = document.getElementById('send-button');
|
||||
const refreshButton = document.getElementById('refresh-button');
|
||||
const chatMessages = document.getElementById('chat-messages');
|
||||
|
||||
let currentMessageDiv = null;
|
||||
let messageHistory = [];
|
||||
|
||||
function clearChat() {
|
||||
// Clear the chat messages
|
||||
chatMessages.innerHTML = '';
|
||||
// Reset message history
|
||||
messageHistory = [];
|
||||
// Clear the input field
|
||||
messageInput.value = '';
|
||||
// Enable input if it was disabled
|
||||
messageInput.disabled = false;
|
||||
sendButton.disabled = false;
|
||||
}
|
||||
|
||||
function addMessage(content, isUser) {
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = `message ${isUser ? 'message-user' : 'message-assistant'}`;
|
||||
messageDiv.textContent = content;
|
||||
chatMessages.appendChild(messageDiv);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
return messageDiv;
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
const message = messageInput.value.trim();
|
||||
if (!message) return;
|
||||
|
||||
// Get selected model
|
||||
const selectedModel = document.querySelector('input[name="model"]:checked');
|
||||
if (!selectedModel) {
|
||||
alert('Please select a model');
|
||||
return;
|
||||
}
|
||||
|
||||
const [provider, modelId] = selectedModel.value.split(':');
|
||||
const modelName = provider === 'openrouter' ? modelNameInput.value : modelId;
|
||||
|
||||
// Clear input and add user message
|
||||
messageInput.value = '';
|
||||
addMessage(message, true);
|
||||
|
||||
try {
|
||||
// Add user message to history
|
||||
messageHistory.push({
|
||||
role: 'user',
|
||||
content: message
|
||||
});
|
||||
|
||||
// Use full message history for the request
|
||||
const messages = [...messageHistory];
|
||||
|
||||
// Create assistant message div
|
||||
currentMessageDiv = addMessage('', false);
|
||||
|
||||
// Get API key
|
||||
const apiKey = document.getElementById('api-key').value.trim();
|
||||
if (!apiKey) {
|
||||
alert('Please enter an API key');
|
||||
return;
|
||||
}
|
||||
|
||||
// Debug log the request
|
||||
const requestData = {
|
||||
provider: provider,
|
||||
model: modelName,
|
||||
messages: messages,
|
||||
api_key: apiKey,
|
||||
stream: true,
|
||||
temperature: 0.7
|
||||
};
|
||||
console.log('Sending request:', {...requestData, api_key: '***'});
|
||||
|
||||
// Get CSRF token
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
||||
if (!csrfToken) {
|
||||
throw new Error('CSRF token not found. Please refresh the page.');
|
||||
}
|
||||
|
||||
// Send request
|
||||
const response = await fetch('/wingman/chat', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': csrfToken
|
||||
},
|
||||
body: JSON.stringify({
|
||||
provider: provider,
|
||||
model: modelName,
|
||||
messages: messages,
|
||||
api_key: apiKey,
|
||||
stream: true,
|
||||
temperature: 0.7
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || 'Failed to get response');
|
||||
}
|
||||
|
||||
// Handle streaming response
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let fullResponse = '';
|
||||
|
||||
while (true) {
|
||||
const { value, done } = await reader.read();
|
||||
if (done) break;
|
||||
|
||||
const chunk = decoder.decode(value);
|
||||
const lines = chunk.split('\n');
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('data: ')) {
|
||||
const content = line.slice(6);
|
||||
if (content) {
|
||||
// Use textContent to properly handle newlines
|
||||
console.log('Received chunk:', JSON.stringify(content)); // Debug
|
||||
currentMessageDiv.textContent += content;
|
||||
fullResponse += content;
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add assistant's response to history
|
||||
if (fullResponse) {
|
||||
messageHistory.push({
|
||||
role: 'assistant',
|
||||
content: fullResponse
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
currentMessageDiv.textContent = `Error: ${error.message}`;
|
||||
currentMessageDiv.style.color = 'red';
|
||||
}
|
||||
}
|
||||
|
||||
sendButton.addEventListener('click', sendMessage);
|
||||
messageInput.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
|
||||
refreshButton.addEventListener('click', clearChat);
|
||||
});
|
||||
</script>
|
||||
<script src="{{ url_for('wingman.static', filename='js/wingman_chat.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user