ladill-hosting/resources/js/app.js

import './bootstrap';

import Alpine from 'alpinejs';
import collapse from '@alpinejs/collapse';

Alpine.plugin(collapse);

// Afia — Ladill in-app AI assistant (slide-over chat). Opened via the topbar AI button
// which dispatches a window 'afia-open' event. Greeting/suggestions are passed from Blade.
Alpine.data('afia', (config = {}) => ({
    open: false,
    input: '',
    loading: false,
    messages: [
        { role: 'assistant', text: config.greeting || "Hi, I'm Afia 👋 How can I help?" },
    ],
    suggestions: config.suggestions || [],
    init() {
        window.addEventListener('afia-open', () => {
            this.open = true;
            this.$nextTick(() => this.$refs.input && this.$refs.input.focus());
        });
    },
    close() { this.open = false; },
    useSuggestion(s) { this.input = s; this.send(); },
    scrollDown() {
        this.$nextTick(() => { const el = this.$refs.scroll; if (el) el.scrollTop = el.scrollHeight; });
    },
    async send() {
        const text = this.input.trim();
        if (!text || this.loading) return;
        const history = this.messages.map((m) => ({ role: m.role, text: m.text }));
        this.messages.push({ role: 'user', text });
        this.input = '';
        this.loading = true;
        this.scrollDown();
        try {
            const res = await fetch(config.chatUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': config.csrf, 'Accept': 'application/json' },
                body: JSON.stringify({ message: text, history }),
            });
            const data = await res.json();
            this.messages.push({ role: 'assistant', text: data.reply || data.message || 'Sorry, I could not respond.' });
        } catch (e) {
            this.messages.push({ role: 'assistant', text: 'Network error — please try again.' });
        }
        this.loading = false;
        this.scrollDown();
    },
}));

window.Alpine = Alpine;
Alpine.start();