feat(odoo): add activeblue_ai Odoo 18 module with OWL2 frontend
Models: - ab.ai.bot: service URL, webhook secret, privacy mode, ping/dispatch - ab.ai.directive: full directive lifecycle log with status tracking - ab.ai.log: activity log with level/agent/record linkage - ab.ai.agent.registry: agent list synced from agent service Controllers: - webhook.py: /ai/webhook/callback handles directive_completed, escalation, sweep_findings - health_proxy.py: /ai/health proxies agent service detailed health - approval.py: /ai/chat dispatch, /ai/approval/pending, /ai/approval/respond Security: - group_ai_user (chat) + group_ai_manager (configure, approve, logs) - ir.model.access.csv for all 4 models Views: list/form for bot, directives, logs, registry; main menu with AI brain icon OWL2 frontend: - systray_button.js: brain icon in top bar, status dot, pending approval badge - ai_panel.js: slide-in chat panel, approval workflow, 30s poll for pending items - CSS: slide-in animation, message bubbles, loading dots, approval section Data: 4 cron jobs (ping, registry sync, directive/log cleanup) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ActiveBlue Build
255
addons/activeblue_ai/static/src/css/activeblue_ai.css
Normal file
255
addons/activeblue_ai/static/src/css/activeblue_ai.css
Normal file
@@ -0,0 +1,255 @@
|
||||
/* ActiveBlue AI — systray + panel styles */
|
||||
|
||||
/* Systray brain icon */
|
||||
.ab-ai-systray {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ab-ai-brain-icon {
|
||||
font-size: 18px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.ab-ai-badge {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
background: #dc3545;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
font-size: 10px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Slide-in panel */
|
||||
.ab-ai-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -420px;
|
||||
width: 400px;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 9000;
|
||||
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-left: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.ab-ai-panel--open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ab-ai-panel__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: #1a2b4b;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ab-ai-panel__title {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.ab-ai-panel__header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Status indicator dot */
|
||||
.ab-ai-status-dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #6c757d;
|
||||
}
|
||||
.ab-ai-status-dot--online { background: #28a745; }
|
||||
.ab-ai-status-dot--offline { background: #dc3545; }
|
||||
.ab-ai-status-dot--degraded { background: #ffc107; }
|
||||
|
||||
/* Messages area */
|
||||
.ab-ai-panel__messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ab-ai-panel__empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Message bubbles */
|
||||
.ab-ai-msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
.ab-ai-msg--user {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.ab-ai-msg--assistant,
|
||||
.ab-ai-msg--error {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.ab-ai-msg__bubble {
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.ab-ai-msg--user .ab-ai-msg__bubble {
|
||||
background: #1a2b4b;
|
||||
color: #fff;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
.ab-ai-msg--assistant .ab-ai-msg__bubble {
|
||||
background: #f1f3f5;
|
||||
color: #212529;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
|
||||
.ab-ai-msg--error .ab-ai-msg__bubble {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
border: 1px solid #ffc107;
|
||||
}
|
||||
|
||||
/* Loading dots */
|
||||
.ab-ai-msg__bubble--loading {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.ab-ai-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #adb5bd;
|
||||
animation: ab-ai-bounce 1.2s infinite ease-in-out;
|
||||
}
|
||||
.ab-ai-dot:nth-child(2) { animation-delay: 0.2s; }
|
||||
.ab-ai-dot:nth-child(3) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes ab-ai-bounce {
|
||||
0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
|
||||
40% { transform: scale(1.2); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Escalations */
|
||||
.ab-ai-msg__escalations {
|
||||
margin-top: 6px;
|
||||
padding: 8px 12px;
|
||||
background: #fff3cd;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ab-ai-escalation {
|
||||
margin-top: 4px;
|
||||
padding-left: 12px;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
/* Approval section */
|
||||
.ab-ai-panel__approvals {
|
||||
background: #fff8e1;
|
||||
border-top: 1px solid #ffe082;
|
||||
padding: 12px 16px;
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ab-ai-approval-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ab-ai-approval-btns {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Input area */
|
||||
.ab-ai-panel__input {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #dee2e6;
|
||||
background: #f8f9fa;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ab-ai-panel__textarea {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
line-height: 1.4;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.ab-ai-panel__textarea:focus {
|
||||
outline: none;
|
||||
border-color: #1a2b4b;
|
||||
box-shadow: 0 0 0 2px rgba(26, 43, 75, 0.15);
|
||||
}
|
||||
|
||||
.ab-ai-panel__send {
|
||||
align-self: flex-end;
|
||||
border-radius: 8px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #1a2b4b;
|
||||
border-color: #1a2b4b;
|
||||
}
|
||||
|
||||
.ab-ai-panel__send:hover:not(:disabled) {
|
||||
background: #243660;
|
||||
border-color: #243660;
|
||||
}
|
||||
131
addons/activeblue_ai/static/src/js/components/ai_panel.js
Normal file
131
addons/activeblue_ai/static/src/js/components/ai_panel.js
Normal file
@@ -0,0 +1,131 @@
|
||||
/** @odoo-module **/
|
||||
import { Component, useState, useRef, onMounted, onWillUnmount } from '@odoo/owl';
|
||||
import { useService } from '@web/core/utils/hooks';
|
||||
import { registry } from '@web/core/registry';
|
||||
|
||||
let _msgCounter = 0;
|
||||
function nextId() { return ++_msgCounter; }
|
||||
|
||||
export class AiPanel extends Component {
|
||||
static template = 'activeblue_ai.AiPanel';
|
||||
static props = {
|
||||
isOpen: Boolean,
|
||||
onClose: Function,
|
||||
serviceStatus: { type: String, optional: true },
|
||||
};
|
||||
|
||||
setup() {
|
||||
this.rpc = useService('rpc');
|
||||
this.notification = useService('notification');
|
||||
this.messagesRef = useRef('messagesContainer');
|
||||
this.inputRef = useRef('inputEl');
|
||||
|
||||
this.state = useState({
|
||||
messages: [],
|
||||
inputText: '',
|
||||
loading: false,
|
||||
pendingApprovals: [],
|
||||
sessionId: null,
|
||||
});
|
||||
|
||||
this._approvalPollInterval = null;
|
||||
onMounted(() => {
|
||||
this._startApprovalPoll();
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
if (this._approvalPollInterval) {
|
||||
clearInterval(this._approvalPollInterval);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
get statusDotClass() {
|
||||
const s = this.props.serviceStatus || 'unknown';
|
||||
return `ab-ai-status-dot ab-ai-status-dot--${s}`;
|
||||
}
|
||||
|
||||
get statusText() {
|
||||
return this.props.serviceStatus === 'online' ? 'Online' : 'Offline';
|
||||
}
|
||||
|
||||
onKeyDown(ev) {
|
||||
if (ev.key === 'Enter' && !ev.shiftKey) {
|
||||
ev.preventDefault();
|
||||
this.sendMessage();
|
||||
}
|
||||
}
|
||||
|
||||
async sendMessage() {
|
||||
const text = this.state.inputText.trim();
|
||||
if (!text || this.state.loading) return;
|
||||
|
||||
this.state.messages.push({ id: nextId(), role: 'user', content: text });
|
||||
this.state.inputText = '';
|
||||
this.state.loading = true;
|
||||
this._scrollToBottom();
|
||||
|
||||
try {
|
||||
const result = await this.rpc('/ai/chat', {
|
||||
message: text,
|
||||
context: {},
|
||||
session_id: this.state.sessionId,
|
||||
});
|
||||
const reply = result.reply || '(no response)';
|
||||
this.state.messages.push({
|
||||
id: nextId(),
|
||||
role: 'assistant',
|
||||
content: reply,
|
||||
escalations: result.escalations || [],
|
||||
});
|
||||
if (result.session_id) {
|
||||
this.state.sessionId = result.session_id;
|
||||
}
|
||||
} catch (err) {
|
||||
this.state.messages.push({
|
||||
id: nextId(),
|
||||
role: 'error',
|
||||
content: 'Error reaching AI service. Please try again.',
|
||||
});
|
||||
} finally {
|
||||
this.state.loading = false;
|
||||
this._scrollToBottom();
|
||||
}
|
||||
}
|
||||
|
||||
async approve(directiveId, approved) {
|
||||
try {
|
||||
await this.rpc('/ai/approval/respond', {
|
||||
directive_id: directiveId,
|
||||
approved,
|
||||
});
|
||||
this.state.pendingApprovals = this.state.pendingApprovals.filter(
|
||||
(a) => a.directive_id !== directiveId
|
||||
);
|
||||
this.notification.add(approved ? 'Directive approved' : 'Directive rejected', {
|
||||
type: approved ? 'success' : 'warning',
|
||||
});
|
||||
} catch (err) {
|
||||
this.notification.add('Failed to respond to approval request', { type: 'danger' });
|
||||
}
|
||||
}
|
||||
|
||||
_startApprovalPoll() {
|
||||
const poll = async () => {
|
||||
try {
|
||||
const result = await this.rpc('/ai/approval/pending', {});
|
||||
this.state.pendingApprovals = result.items || [];
|
||||
} catch {
|
||||
// Silently ignore poll errors
|
||||
}
|
||||
};
|
||||
poll();
|
||||
this._approvalPollInterval = setInterval(poll, 30000);
|
||||
}
|
||||
|
||||
_scrollToBottom() {
|
||||
const el = this.messagesRef.el;
|
||||
if (el) {
|
||||
setTimeout(() => { el.scrollTop = el.scrollHeight; }, 50);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/** @odoo-module **/
|
||||
import { Component, useState, onMounted, onWillUnmount } from '@odoo/owl';
|
||||
import { registry } from '@web/core/registry';
|
||||
import { useService } from '@web/core/utils/hooks';
|
||||
import { AiPanel } from './ai_panel';
|
||||
|
||||
export class SystrayButton extends Component {
|
||||
static template = 'activeblue_ai.SystrayButton';
|
||||
static components = { AiPanel };
|
||||
|
||||
setup() {
|
||||
this.rpc = useService('rpc');
|
||||
this.state = useState({
|
||||
panelOpen: false,
|
||||
serviceStatus: 'unknown',
|
||||
pendingCount: 0,
|
||||
});
|
||||
|
||||
this._statusInterval = null;
|
||||
onMounted(() => {
|
||||
this._checkStatus();
|
||||
this._statusInterval = setInterval(() => this._checkStatus(), 60000);
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
if (this._statusInterval) clearInterval(this._statusInterval);
|
||||
});
|
||||
}
|
||||
|
||||
get iconClass() {
|
||||
return {
|
||||
'text-success': this.state.serviceStatus === 'online',
|
||||
'text-danger': this.state.serviceStatus === 'offline',
|
||||
'text-muted': this.state.serviceStatus === 'unknown',
|
||||
};
|
||||
}
|
||||
|
||||
get statusTitle() {
|
||||
return `ActiveBlue AI — ${this.state.serviceStatus}`;
|
||||
}
|
||||
|
||||
togglePanel() {
|
||||
this.state.panelOpen = !this.state.panelOpen;
|
||||
}
|
||||
|
||||
closePanel() {
|
||||
this.state.panelOpen = false;
|
||||
}
|
||||
|
||||
async _checkStatus() {
|
||||
try {
|
||||
const result = await fetch('/ai/health');
|
||||
if (result.ok) {
|
||||
const data = await result.json();
|
||||
this.state.serviceStatus = data.status === 'ok' ? 'online' : 'degraded';
|
||||
} else {
|
||||
this.state.serviceStatus = 'offline';
|
||||
}
|
||||
} catch {
|
||||
this.state.serviceStatus = 'offline';
|
||||
}
|
||||
try {
|
||||
const pending = await this.rpc('/ai/approval/pending', {});
|
||||
this.state.pendingCount = (pending.items || []).length;
|
||||
} catch {
|
||||
this.state.pendingCount = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
registry.category('systray').add('activeblue_ai.systray_button', {
|
||||
Component: SystrayButton,
|
||||
sequence: 1,
|
||||
});
|
||||
83
addons/activeblue_ai/static/src/xml/ai_panel.xml
Normal file
83
addons/activeblue_ai/static/src/xml/ai_panel.xml
Normal file
@@ -0,0 +1,83 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="activeblue_ai.AiPanel" owl="1">
|
||||
<div class="ab-ai-panel" t-att-class="{ 'ab-ai-panel--open': props.isOpen }">
|
||||
<div class="ab-ai-panel__header">
|
||||
<span class="ab-ai-panel__title">
|
||||
<i class="fa fa-brain"/> ActiveBlue AI
|
||||
</span>
|
||||
<div class="ab-ai-panel__header-actions">
|
||||
<span t-att-class="statusDotClass" t-att-title="statusText"/>
|
||||
<button class="btn btn-sm btn-light" t-on-click="props.onClose" title="Close">
|
||||
<i class="fa fa-times"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ab-ai-panel__messages" t-ref="messagesContainer">
|
||||
<t t-if="state.messages.length === 0">
|
||||
<div class="ab-ai-panel__empty">
|
||||
<i class="fa fa-brain fa-2x text-muted"/>
|
||||
<p class="text-muted mt-2">Ask me anything about your Odoo data.</p>
|
||||
</div>
|
||||
</t>
|
||||
<t t-foreach="state.messages" t-as="msg" t-key="msg.id">
|
||||
<div t-att-class="'ab-ai-msg ab-ai-msg--' + msg.role">
|
||||
<div class="ab-ai-msg__bubble">
|
||||
<t t-esc="msg.content"/>
|
||||
</div>
|
||||
<t t-if="msg.escalations and msg.escalations.length">
|
||||
<div class="ab-ai-msg__escalations">
|
||||
<i class="fa fa-exclamation-triangle text-warning"/> Escalations:
|
||||
<t t-foreach="msg.escalations" t-as="esc" t-key="esc_index">
|
||||
<div class="ab-ai-escalation" t-esc="esc"/>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="state.loading">
|
||||
<div class="ab-ai-msg ab-ai-msg--assistant">
|
||||
<div class="ab-ai-msg__bubble ab-ai-msg__bubble--loading">
|
||||
<span class="ab-ai-dot"/><span class="ab-ai-dot"/><span class="ab-ai-dot"/>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
|
||||
<t t-if="state.pendingApprovals.length > 0">
|
||||
<div class="ab-ai-panel__approvals">
|
||||
<strong><i class="fa fa-clock-o"/> Pending Approval</strong>
|
||||
<t t-foreach="state.pendingApprovals" t-as="item" t-key="item.directive_id">
|
||||
<div class="ab-ai-approval-item">
|
||||
<span t-esc="item.description"/>
|
||||
<div class="ab-ai-approval-btns">
|
||||
<button class="btn btn-sm btn-success" t-on-click="() => this.approve(item.directive_id, true)">
|
||||
Approve
|
||||
</button>
|
||||
<button class="btn btn-sm btn-danger" t-on-click="() => this.approve(item.directive_id, false)">
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<div class="ab-ai-panel__input">
|
||||
<textarea
|
||||
class="ab-ai-panel__textarea"
|
||||
t-ref="inputEl"
|
||||
t-model="state.inputText"
|
||||
placeholder="Ask ActiveBlue AI..."
|
||||
t-on-keydown="onKeyDown"
|
||||
rows="2"
|
||||
t-att-disabled="state.loading"
|
||||
/>
|
||||
<button class="btn btn-primary ab-ai-panel__send" t-on-click="sendMessage" t-att-disabled="state.loading or !state.inputText.trim()">
|
||||
<i class="fa fa-paper-plane"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
9
addons/activeblue_ai/static/src/xml/systray.xml
Normal file
9
addons/activeblue_ai/static/src/xml/systray.xml
Normal file
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="activeblue_ai.SystrayButton" owl="1">
|
||||
<div class="o_menu_systray_item ab-ai-systray" t-on-click="togglePanel" t-att-title="statusTitle">
|
||||
<i class="fa fa-brain ab-ai-brain-icon" t-att-class="iconClass"/>
|
||||
<span t-if="state.pendingCount > 0" class="ab-ai-badge" t-esc="state.pendingCount"/>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
Reference in New Issue
Block a user