CyberMind-FR
2dc9f6831b
- Use L.url() for proper ubus endpoint URL - Pass messages as array instead of JSON string - Add credentials and better error handling - Fix AbortController error handling Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
388 lines
10 KiB
JavaScript
388 lines
10 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require ui';
|
|
'require rpc';
|
|
|
|
var callModels = rpc.declare({
|
|
object: 'luci.localai',
|
|
method: 'models',
|
|
expect: { models: [] }
|
|
});
|
|
|
|
// Custom chat function with longer timeout (LLMs can be slow)
|
|
function callChatWithTimeout(model, messages, timeoutMs) {
|
|
return new Promise(function(resolve, reject) {
|
|
var timeout = timeoutMs || 120000; // 2 minutes default
|
|
var controller = new AbortController();
|
|
var timeoutId = setTimeout(function() {
|
|
controller.abort();
|
|
reject(new Error('Request timed out - model may need more time'));
|
|
}, timeout);
|
|
|
|
// Use ubus RPC endpoint
|
|
var ubusUrl = L.url('admin/ubus');
|
|
var payload = JSON.stringify({
|
|
jsonrpc: '2.0',
|
|
id: Date.now(),
|
|
method: 'call',
|
|
params: [
|
|
rpc.getSessionID() || '00000000000000000000000000000000',
|
|
'luci.localai',
|
|
'chat',
|
|
{ model: model, messages: messages }
|
|
]
|
|
});
|
|
|
|
fetch(ubusUrl, {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: payload,
|
|
signal: controller.signal
|
|
})
|
|
.then(function(response) {
|
|
if (!response.ok) {
|
|
throw new Error('HTTP ' + response.status);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(function(data) {
|
|
clearTimeout(timeoutId);
|
|
if (data.result && Array.isArray(data.result) && data.result[1]) {
|
|
resolve(data.result[1]);
|
|
} else if (data.error) {
|
|
reject(new Error(data.error.message || 'RPC error'));
|
|
} else {
|
|
resolve({ response: '', error: 'Unexpected response format' });
|
|
}
|
|
})
|
|
.catch(function(err) {
|
|
clearTimeout(timeoutId);
|
|
if (err.name === 'AbortError') {
|
|
reject(new Error('Request timed out - model may need more time'));
|
|
} else {
|
|
reject(err);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
return view.extend({
|
|
title: _('LocalAI Chat'),
|
|
messages: [],
|
|
selectedModel: null,
|
|
|
|
load: function() {
|
|
return callModels();
|
|
},
|
|
|
|
render: function(data) {
|
|
var self = this;
|
|
// RPC with expect returns array directly
|
|
var models = Array.isArray(data) ? data : (data && data.models ? data.models : []);
|
|
|
|
var container = E('div', { 'class': 'localai-chat' }, [
|
|
E('style', {}, this.getCSS()),
|
|
|
|
// Header
|
|
E('div', { 'class': 'chat-header' }, [
|
|
E('div', { 'class': 'chat-title' }, [
|
|
E('span', { 'class': 'chat-icon' }, '💬'),
|
|
_('LocalAI Chat')
|
|
]),
|
|
E('div', { 'class': 'chat-model-select' }, [
|
|
E('label', {}, _('Model:')),
|
|
E('select', {
|
|
'id': 'model-select',
|
|
'change': function(e) { self.selectedModel = e.target.value; }
|
|
}, models.length > 0 ?
|
|
models.map(function(m) {
|
|
var modelId = m.id || m.name;
|
|
var displayName = m.loaded ? modelId + ' ✓' : modelId;
|
|
return E('option', { 'value': modelId }, displayName);
|
|
}) :
|
|
[E('option', { 'value': '' }, _('No models available'))]
|
|
)
|
|
])
|
|
]),
|
|
|
|
// Chat Messages
|
|
E('div', { 'class': 'chat-messages', 'id': 'chat-messages' }, [
|
|
E('div', { 'class': 'chat-welcome' }, [
|
|
E('div', { 'class': 'welcome-icon' }, '🤖'),
|
|
E('div', { 'class': 'welcome-title' }, _('Welcome to LocalAI Chat')),
|
|
E('div', { 'class': 'welcome-text' }, _('Start a conversation with your local AI model.'))
|
|
])
|
|
]),
|
|
|
|
// Input Area
|
|
E('div', { 'class': 'chat-input-area' }, [
|
|
E('textarea', {
|
|
'id': 'chat-input',
|
|
'class': 'chat-input',
|
|
'placeholder': _('Type your message...'),
|
|
'rows': 2,
|
|
'keydown': function(e) {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
self.sendMessage();
|
|
}
|
|
}
|
|
}),
|
|
E('button', {
|
|
'class': 'chat-send-btn',
|
|
'click': function() { self.sendMessage(); }
|
|
}, [E('span', {}, '➤'), _('Send')])
|
|
])
|
|
]);
|
|
|
|
// Set initial model
|
|
if (models.length > 0) {
|
|
var loadedModel = models.find(function(m) { return m.loaded; });
|
|
this.selectedModel = loadedModel ? (loadedModel.id || loadedModel.name) : (models[0].id || models[0].name);
|
|
}
|
|
|
|
return container;
|
|
},
|
|
|
|
sendMessage: function() {
|
|
var self = this;
|
|
var input = document.getElementById('chat-input');
|
|
var messagesContainer = document.getElementById('chat-messages');
|
|
var message = input.value.trim();
|
|
|
|
if (!message) return;
|
|
|
|
if (!this.selectedModel) {
|
|
ui.addNotification(null, E('p', _('Please select a model first')), 'error');
|
|
return;
|
|
}
|
|
|
|
// Clear welcome if present
|
|
var welcome = messagesContainer.querySelector('.chat-welcome');
|
|
if (welcome) welcome.remove();
|
|
|
|
// Add user message
|
|
messagesContainer.appendChild(E('div', { 'class': 'chat-message user' }, [
|
|
E('div', { 'class': 'message-avatar' }, '👤'),
|
|
E('div', { 'class': 'message-content' }, [
|
|
E('div', { 'class': 'message-text' }, message)
|
|
])
|
|
]));
|
|
|
|
// Add loading indicator
|
|
var loadingMsg = E('div', { 'class': 'chat-message assistant loading', 'id': 'loading-msg' }, [
|
|
E('div', { 'class': 'message-avatar' }, '🤖'),
|
|
E('div', { 'class': 'message-content' }, [
|
|
E('div', { 'class': 'message-loading' }, [
|
|
E('span', {}), E('span', {}), E('span', {})
|
|
])
|
|
])
|
|
]);
|
|
messagesContainer.appendChild(loadingMsg);
|
|
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
|
|
// Clear input
|
|
input.value = '';
|
|
|
|
// Build messages array
|
|
this.messages.push({ role: 'user', content: message });
|
|
|
|
// Send to API (120s timeout for slow models)
|
|
// Pass messages as array - RPCD will handle JSON serialization
|
|
callChatWithTimeout(this.selectedModel, this.messages, 120000)
|
|
.then(function(result) {
|
|
var loading = document.getElementById('loading-msg');
|
|
if (loading) loading.remove();
|
|
|
|
var response = result.response || result.error || _('No response');
|
|
self.messages.push({ role: 'assistant', content: response });
|
|
|
|
messagesContainer.appendChild(E('div', { 'class': 'chat-message assistant' }, [
|
|
E('div', { 'class': 'message-avatar' }, '🤖'),
|
|
E('div', { 'class': 'message-content' }, [
|
|
E('div', { 'class': 'message-text' }, response)
|
|
])
|
|
]));
|
|
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
})
|
|
.catch(function(err) {
|
|
var loading = document.getElementById('loading-msg');
|
|
if (loading) loading.remove();
|
|
|
|
messagesContainer.appendChild(E('div', { 'class': 'chat-message assistant error' }, [
|
|
E('div', { 'class': 'message-avatar' }, '⚠️'),
|
|
E('div', { 'class': 'message-content' }, [
|
|
E('div', { 'class': 'message-text' }, _('Error: ') + err.message)
|
|
])
|
|
]));
|
|
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
});
|
|
},
|
|
|
|
getCSS: function() {
|
|
return `
|
|
.localai-chat {
|
|
font-family: 'Inter', -apple-system, sans-serif;
|
|
background: #030712;
|
|
color: #f8fafc;
|
|
min-height: calc(100vh - 100px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px;
|
|
}
|
|
.chat-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 20px;
|
|
background: #0f172a;
|
|
border: 1px solid #334155;
|
|
border-radius: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.chat-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
.chat-icon { font-size: 24px; }
|
|
.chat-model-select {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.chat-model-select select {
|
|
padding: 8px 12px;
|
|
background: #1e293b;
|
|
border: 1px solid #334155;
|
|
border-radius: 8px;
|
|
color: #f8fafc;
|
|
font-size: 13px;
|
|
}
|
|
.chat-messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
background: #0f172a;
|
|
border: 1px solid #334155;
|
|
border-radius: 12px;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
min-height: 400px;
|
|
}
|
|
.chat-welcome {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #64748b;
|
|
}
|
|
.welcome-icon { font-size: 64px; margin-bottom: 20px; }
|
|
.welcome-title { font-size: 20px; font-weight: 600; margin-bottom: 10px; color: #94a3b8; }
|
|
.welcome-text { font-size: 14px; }
|
|
.chat-message {
|
|
display: flex;
|
|
gap: 12px;
|
|
max-width: 80%;
|
|
}
|
|
.chat-message.user {
|
|
align-self: flex-end;
|
|
flex-direction: row-reverse;
|
|
}
|
|
.message-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
background: #1e293b;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
.chat-message.user .message-avatar {
|
|
background: linear-gradient(135deg, #06b6d4, #0ea5e9);
|
|
}
|
|
.chat-message.assistant .message-avatar {
|
|
background: linear-gradient(135deg, #a855f7, #6366f1);
|
|
}
|
|
.message-content {
|
|
padding: 12px 16px;
|
|
border-radius: 12px;
|
|
background: #1e293b;
|
|
}
|
|
.chat-message.user .message-content {
|
|
background: linear-gradient(135deg, #06b6d4, #0ea5e9);
|
|
}
|
|
.chat-message.error .message-content {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
}
|
|
.message-text {
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
}
|
|
.message-loading {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
.message-loading span {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #a855f7;
|
|
border-radius: 50%;
|
|
animation: bounce 1.4s infinite ease-in-out;
|
|
}
|
|
.message-loading span:nth-child(1) { animation-delay: -0.32s; }
|
|
.message-loading span:nth-child(2) { animation-delay: -0.16s; }
|
|
@keyframes bounce {
|
|
0%, 80%, 100% { transform: scale(0); }
|
|
40% { transform: scale(1); }
|
|
}
|
|
.chat-input-area {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
background: #0f172a;
|
|
border: 1px solid #334155;
|
|
border-radius: 12px;
|
|
}
|
|
.chat-input {
|
|
flex: 1;
|
|
padding: 12px 16px;
|
|
background: #1e293b;
|
|
border: 1px solid #334155;
|
|
border-radius: 10px;
|
|
color: #f8fafc;
|
|
font-size: 14px;
|
|
resize: none;
|
|
font-family: inherit;
|
|
}
|
|
.chat-input:focus {
|
|
outline: none;
|
|
border-color: #a855f7;
|
|
}
|
|
.chat-send-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 24px;
|
|
background: linear-gradient(135deg, #a855f7, #6366f1);
|
|
border: none;
|
|
border-radius: 10px;
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.chat-send-btn:hover {
|
|
box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
|
|
}
|
|
`;
|
|
}
|
|
});
|