OpenNIT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

<?php $this->layout('layouts/main', [
    'page_title'     => 'KI-Assistent',
    'hide_ai_bubble' => true, // verhindert doppelte Element-IDs (Bubble) auf dieser Seite
]); ?>

<!-- ===== KI-ASSISTENT VOLLBILD ===== -->
<div id="aiAssistantPage" class="ai-assistant-page">
    <div class="ai-chat-panel" id="aiChatPanel" role="region" aria-label="<?= $this->te('KI-Assistent') ?>">

        <!-- Header -->
        <div class="ai-chat-header">
            <span class="ai-chat-header-icon">&#129302;</span>
            <div class="ai-chat-header-info">
                <div class="ai-chat-header-title"><?= $this->te('KI-Assistent') ?></div>
                <div class="ai-chat-header-subtitle"><?= $this->te('Fragen zu Doku, Assets, Tickets &amp; mehr &ndash; oder direkt etwas anlegen lassen.') ?></div>
            </div>
            <div class="ai-chat-header-actions">
                <button type="button" class="ai-chat-header-btn" id="aiChatNewSessionBtn" title="<?= $this->te('Neues Gespr&auml;ch starten') ?>">
                    <?= $this->te('&#10133; Neu') ?>
                </button>
                <button type="button" class="ai-chat-header-btn" id="aiChatSessionToggleBtn" title="<?= $this->te('Gespr&auml;chsverlauf') ?>">
                    <?= $this->te('&#128336; Verlauf') ?>
                </button>
                <button type="button" class="ai-chat-header-btn" id="aiChatClearBtn" title="<?= $this->te('Aktuellen Verlauf l&ouml;schen') ?>">
                    &#128465;
                </button>
            </div>
        </div>

        <!-- Session-Drawer -->
        <div class="ai-session-drawer hidden" id="aiChatSessionDrawer">
            <div class="ai-session-drawer-header">
                <span><?= $this->te('Gespr&auml;chsverl&auml;ufe') ?></span>
            </div>
            <div class="ai-session-list" id="aiChatSessionList"></div>
        </div>

        <!-- Fehler-Bar -->
        <div class="ai-error-bar" id="aiChatErrorBar" style="display:none">
            <span id="aiChatErrorText"></span>
            <button aria-label="<?= $this->te('Schließen') ?>" type="button" class="ai-error-close" id="aiChatErrorClose">&times;</button>
        </div>

        <!-- Nachrichten -->
        <div class="ai-chat-messages" id="aiChatMessages">
            <div class="ai-chat-welcome" id="aiChatWelcome">
                <span class="ai-chat-welcome-icon">&#129302;</span>
                <h3><?= $this->te('Hallo! Wie kann ich helfen?') ?></h3>
                <p><?= $this->te('Ich kenne die Inhalte dieses IT-Tools und helfe auch bei allgemeinen IT-Fragen. Frag mich zu Assets, Tickets, Vertr&auml;gen, VMs und mehr &ndash; oder lass mich direkt etwas anlegen.') ?></p>
                <div class="ai-chat-welcome-hints">
                    <button type="button" class="ai-chat-hint-btn" data-hint="Wie viel freier RAM ist auf den Hypervisor-Hosts?">
                        <?= $this->te('&#128202; Freier RAM auf den Hosts?') ?>
                    </button>
                    <button type="button" class="ai-chat-hint-btn" data-hint="Wie viele Assets haben wir im Inventar? Bitte nach Modell aufschl&uuml;sseln.">
                        <?= $this->te('&#128230; Inventar-&Uuml;bersicht nach Modell') ?>
                    </button>
                    <button type="button" class="ai-chat-hint-btn" data-hint="Welche Tickets sind aktuell offen?">
                        <?= $this->te('&#127915; Offene Tickets anzeigen') ?>
                    </button>
                    <button type="button" class="ai-chat-hint-btn" data-hint="Leg eine neue Bestellung an: 2x Dell Laptop E5540, 1x Dockingstation">
                        <?= $this->te('&#128722; Neue Bestellung anlegen') ?>
                    </button>
                </div>
            </div>
        </div>

        <!-- Eingabe -->
        <div class="ai-chat-input-area">
            <div class="ai-chat-input-row">
                <textarea
                    class="ai-chat-textarea"
                    id="aiChatTextarea"
                    placeholder="<?= $this->te('Nachricht eingeben... (Enter zum Senden, Shift+Enter = Zeilenumbruch)') ?>"
                    rows="1"
                    maxlength="2000"
                    aria-label="<?= $this->te('Nachricht') ?>"
                ></textarea>
                <button type="button" class="ai-chat-send-btn" id="aiChatSendBtn" title="<?= $this->te('Senden') ?>" aria-label="<?= $this->te('Senden') ?>">
                    &#10148;
                </button>
            </div>
        </div>
    </div>
</div>

<script src="<?= $this->asset('/assets/js/ai-chat.js') ?>"></script>