CyberMind-FR
48deeccb99
New LuCI application for Ollama management: - Dashboard with service status and controls - Model management (pull, remove, list) - Chat interface with model selection - Settings page for configuration Files: - RPCD backend (luci.ollama) - Dashboard, Models, Chat, Settings views - ACL and menu definitions Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
398 lines
10 KiB
JavaScript
398 lines
10 KiB
JavaScript
'use strict';
|
||
'require view';
|
||
'require ui';
|
||
'require rpc';
|
||
|
||
var callModels = rpc.declare({
|
||
object: 'luci.ollama',
|
||
method: 'models',
|
||
expect: { models: [] }
|
||
});
|
||
|
||
var callChat = rpc.declare({
|
||
object: 'luci.ollama',
|
||
method: 'chat',
|
||
params: ['model', 'message'],
|
||
expect: { response: '' }
|
||
});
|
||
|
||
var callStatus = rpc.declare({
|
||
object: 'luci.ollama',
|
||
method: 'status',
|
||
expect: { running: false }
|
||
});
|
||
|
||
return view.extend({
|
||
title: _('Ollama Chat'),
|
||
chatHistory: [],
|
||
selectedModel: null,
|
||
|
||
load: function() {
|
||
return Promise.all([
|
||
callModels(),
|
||
callStatus()
|
||
]).then(function(results) {
|
||
return {
|
||
models: Array.isArray(results[0]) ? results[0] : [],
|
||
status: results[1] || {}
|
||
};
|
||
});
|
||
},
|
||
|
||
render: function(data) {
|
||
var self = this;
|
||
var models = data.models;
|
||
var status = data.status;
|
||
|
||
if (!status.running) {
|
||
return E('div', { 'class': 'ollama-chat' }, [
|
||
E('style', {}, this.getCSS()),
|
||
E('div', { 'class': 'oll-chat-offline' }, [
|
||
E('span', { 'class': 'oll-offline-icon' }, '⚠️'),
|
||
E('h3', {}, _('Ollama is not running')),
|
||
E('p', {}, _('Start the service to use chat')),
|
||
E('code', {}, '/etc/init.d/ollama start')
|
||
])
|
||
]);
|
||
}
|
||
|
||
if (models.length === 0) {
|
||
return E('div', { 'class': 'ollama-chat' }, [
|
||
E('style', {}, this.getCSS()),
|
||
E('div', { 'class': 'oll-chat-offline' }, [
|
||
E('span', { 'class': 'oll-offline-icon' }, '📦'),
|
||
E('h3', {}, _('No models available')),
|
||
E('p', {}, _('Download a model first')),
|
||
E('code', {}, 'ollamactl pull tinyllama')
|
||
])
|
||
]);
|
||
}
|
||
|
||
this.selectedModel = models[0].name;
|
||
|
||
var container = E('div', { 'class': 'ollama-chat' }, [
|
||
E('style', {}, this.getCSS()),
|
||
|
||
// Header
|
||
E('div', { 'class': 'oll-chat-header' }, [
|
||
E('div', { 'class': 'oll-chat-title' }, [
|
||
E('span', { 'class': 'oll-chat-icon' }, '🦙'),
|
||
E('span', {}, _('Ollama Chat'))
|
||
]),
|
||
E('div', { 'class': 'oll-model-select-wrapper' }, [
|
||
E('label', {}, _('Model:')),
|
||
E('select', {
|
||
'class': 'oll-model-select',
|
||
'id': 'model-select',
|
||
'change': function(ev) { self.selectedModel = ev.target.value; }
|
||
}, models.map(function(m) {
|
||
return E('option', { 'value': m.name }, m.name);
|
||
}))
|
||
])
|
||
]),
|
||
|
||
// Chat Messages
|
||
E('div', { 'class': 'oll-chat-messages', 'id': 'chat-messages' }, [
|
||
E('div', { 'class': 'oll-chat-welcome' }, [
|
||
E('span', { 'class': 'oll-welcome-icon' }, '👋'),
|
||
E('h3', {}, _('Welcome to Ollama Chat')),
|
||
E('p', {}, _('Select a model and start chatting. Your conversation is processed locally.'))
|
||
])
|
||
]),
|
||
|
||
// Input Area
|
||
E('div', { 'class': 'oll-chat-input-area' }, [
|
||
E('textarea', {
|
||
'class': 'oll-chat-input',
|
||
'id': 'chat-input',
|
||
'placeholder': _('Type your message...'),
|
||
'rows': 3,
|
||
'keydown': function(ev) {
|
||
if (ev.key === 'Enter' && !ev.shiftKey) {
|
||
ev.preventDefault();
|
||
self.sendMessage();
|
||
}
|
||
}
|
||
}),
|
||
E('button', {
|
||
'class': 'oll-send-btn',
|
||
'id': 'send-btn',
|
||
'click': function() { self.sendMessage(); }
|
||
}, [E('span', {}, '➤'), _('Send')])
|
||
])
|
||
]);
|
||
|
||
return container;
|
||
},
|
||
|
||
sendMessage: function() {
|
||
var self = this;
|
||
var input = document.getElementById('chat-input');
|
||
var message = input.value.trim();
|
||
|
||
if (!message) return;
|
||
|
||
var messagesContainer = document.getElementById('chat-messages');
|
||
var sendBtn = document.getElementById('send-btn');
|
||
|
||
// Clear welcome message if present
|
||
var welcome = messagesContainer.querySelector('.oll-chat-welcome');
|
||
if (welcome) welcome.remove();
|
||
|
||
// Add user message
|
||
this.addMessage('user', message);
|
||
input.value = '';
|
||
sendBtn.disabled = true;
|
||
|
||
// Add typing indicator
|
||
var typingId = 'typing-' + Date.now();
|
||
this.addTypingIndicator(typingId);
|
||
|
||
// Send to API
|
||
callChat(this.selectedModel, message).then(function(result) {
|
||
self.removeTypingIndicator(typingId);
|
||
sendBtn.disabled = false;
|
||
|
||
if (result.error) {
|
||
self.addMessage('error', result.error);
|
||
} else if (result.response) {
|
||
self.addMessage('assistant', result.response);
|
||
} else {
|
||
self.addMessage('error', _('No response received'));
|
||
}
|
||
|
||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||
}).catch(function(err) {
|
||
self.removeTypingIndicator(typingId);
|
||
sendBtn.disabled = false;
|
||
self.addMessage('error', err.message);
|
||
});
|
||
},
|
||
|
||
addMessage: function(role, content) {
|
||
var messagesContainer = document.getElementById('chat-messages');
|
||
var msgClass = 'oll-message oll-message-' + role;
|
||
|
||
var icon = role === 'user' ? '👤' : (role === 'error' ? '⚠️' : '🦙');
|
||
|
||
var msg = E('div', { 'class': msgClass }, [
|
||
E('div', { 'class': 'oll-message-icon' }, icon),
|
||
E('div', { 'class': 'oll-message-content' }, content)
|
||
]);
|
||
|
||
messagesContainer.appendChild(msg);
|
||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||
},
|
||
|
||
addTypingIndicator: function(id) {
|
||
var messagesContainer = document.getElementById('chat-messages');
|
||
var typing = E('div', { 'class': 'oll-message oll-message-assistant oll-typing', 'id': id }, [
|
||
E('div', { 'class': 'oll-message-icon' }, '🦙'),
|
||
E('div', { 'class': 'oll-message-content' }, [
|
||
E('div', { 'class': 'oll-typing-dots' }, [
|
||
E('span', {}), E('span', {}), E('span', {})
|
||
])
|
||
])
|
||
]);
|
||
messagesContainer.appendChild(typing);
|
||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||
},
|
||
|
||
removeTypingIndicator: function(id) {
|
||
var el = document.getElementById(id);
|
||
if (el) el.remove();
|
||
},
|
||
|
||
getCSS: function() {
|
||
return `
|
||
.ollama-chat {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: #030712;
|
||
color: #f8fafc;
|
||
height: calc(100vh - 100px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
.oll-chat-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 20px;
|
||
background: #0f172a;
|
||
border-bottom: 1px solid #334155;
|
||
}
|
||
.oll-chat-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
.oll-chat-icon { font-size: 24px; }
|
||
.oll-model-select-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.oll-model-select-wrapper label {
|
||
color: #94a3b8;
|
||
font-size: 13px;
|
||
}
|
||
.oll-model-select {
|
||
background: #1e293b;
|
||
border: 1px solid #334155;
|
||
border-radius: 8px;
|
||
padding: 8px 12px;
|
||
color: #f8fafc;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
}
|
||
.oll-chat-messages {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
.oll-chat-welcome {
|
||
text-align: center;
|
||
padding: 60px 20px;
|
||
color: #64748b;
|
||
}
|
||
.oll-welcome-icon { font-size: 48px; display: block; margin-bottom: 16px; }
|
||
.oll-chat-welcome h3 { margin: 0 0 8px; color: #f8fafc; }
|
||
.oll-chat-welcome p { margin: 0; }
|
||
.oll-message {
|
||
display: flex;
|
||
gap: 12px;
|
||
max-width: 85%;
|
||
}
|
||
.oll-message-user {
|
||
align-self: flex-end;
|
||
flex-direction: row-reverse;
|
||
}
|
||
.oll-message-assistant {
|
||
align-self: flex-start;
|
||
}
|
||
.oll-message-error {
|
||
align-self: center;
|
||
}
|
||
.oll-message-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
.oll-message-user .oll-message-icon {
|
||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||
}
|
||
.oll-message-assistant .oll-message-icon {
|
||
background: linear-gradient(135deg, #f97316, #ea580c);
|
||
}
|
||
.oll-message-error .oll-message-icon {
|
||
background: linear-gradient(135deg, #ef4444, #dc2626);
|
||
}
|
||
.oll-message-content {
|
||
background: #1e293b;
|
||
padding: 12px 16px;
|
||
border-radius: 12px;
|
||
line-height: 1.5;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
.oll-message-user .oll-message-content {
|
||
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||
border-radius: 12px 12px 4px 12px;
|
||
}
|
||
.oll-message-assistant .oll-message-content {
|
||
border-radius: 12px 12px 12px 4px;
|
||
}
|
||
.oll-message-error .oll-message-content {
|
||
background: rgba(239, 68, 68, 0.15);
|
||
color: #ef4444;
|
||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||
}
|
||
.oll-typing-dots {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
.oll-typing-dots span {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: #64748b;
|
||
border-radius: 50%;
|
||
animation: typing 1.4s infinite;
|
||
}
|
||
.oll-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
|
||
.oll-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
|
||
@keyframes typing {
|
||
0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
|
||
30% { opacity: 1; transform: scale(1); }
|
||
}
|
||
.oll-chat-input-area {
|
||
padding: 16px 20px;
|
||
background: #0f172a;
|
||
border-top: 1px solid #334155;
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
.oll-chat-input {
|
||
flex: 1;
|
||
background: #1e293b;
|
||
border: 1px solid #334155;
|
||
border-radius: 12px;
|
||
padding: 12px 16px;
|
||
color: #f8fafc;
|
||
font-size: 14px;
|
||
resize: none;
|
||
font-family: inherit;
|
||
}
|
||
.oll-chat-input:focus {
|
||
outline: none;
|
||
border-color: #f97316;
|
||
}
|
||
.oll-send-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 24px;
|
||
background: linear-gradient(135deg, #f97316, #ea580c);
|
||
border: none;
|
||
border-radius: 12px;
|
||
color: white;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.oll-send-btn:hover { opacity: 0.9; }
|
||
.oll-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||
.oll-chat-offline {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
text-align: center;
|
||
color: #64748b;
|
||
padding: 40px;
|
||
}
|
||
.oll-offline-icon { font-size: 48px; margin-bottom: 16px; }
|
||
.oll-chat-offline h3 { margin: 0 0 8px; color: #f8fafc; }
|
||
.oll-chat-offline p { margin: 0 0 16px; }
|
||
.oll-chat-offline code {
|
||
background: #1e293b;
|
||
padding: 8px 16px;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
}
|
||
`;
|
||
}
|
||
});
|