qa-bot-core/index.html at main · necyberteam/qa-bot-core · GitHub

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QA Bot - Standalone Demo</title>
    <script src="./dist/qa-bot-core.standalone.js" defer></script>
    <script src="./standalone-demo.js" defer></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .setup-section {
            background: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .demo-controls {
            background: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        input[type="text"] {
            width: 300px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 10px;
        }
        button {
            background: #24292e;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover:not(:disabled) {
            background: #586069;
        }
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .status {
            margin-top: 10px;
            padding: 8px;
            border-radius: 4px;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
        }
    </style>
</head>
<body>
    <h1>QA Bot Demo</h1>

    <div class="setup-section">
        <h3>Setup</h3>
        <div style="margin-bottom: 10px;">
            <input type="text" id="api-key-input" placeholder="API Key" style="width: 100%; max-width: 400px;" />
        </div>
        <div style="margin-bottom: 10px;">
            <input type="text" id="qa-endpoint-input" placeholder="Q&A Endpoint URL" style="width: 100%; max-width: 400px;" />
        </div>
        <div style="margin-bottom: 10px;">
            <input type="text" id="rating-endpoint-input" placeholder="Rating Endpoint URL (optional)" style="width: 100%; max-width: 400px;" />
        </div>
        <div style="margin-bottom: 10px;">
            <input type="text" id="backend-id-input" placeholder="Backend ID (optional, for proxy routing)" style="width: 100%; max-width: 400px;" />
        </div>
        <div style="margin-bottom: 10px;">
            <input type="text" id="turnstile-site-key-input" placeholder="Turnstile Site Key (optional)" style="width: 100%; max-width: 400px;" />
        </div>
        <div style="margin-bottom: 15px;">
            <label style="display: inline-flex; align-items: center; gap: 6px;">
                <input type="checkbox" id="allow-anon-input" />
                Allow anonymous access
            </label>
        </div>
        <button onclick="initializeBot()">Initialize</button>
        <div id="status-message" style="display: none;"></div>
    </div>

    <div class="demo-controls">
        <h3>Bot Controls</h3>
        <button class="bot-control" onclick="openChat()" disabled>Open Chat</button>
        <button class="bot-control" onclick="closeChat()" disabled>Close Chat</button>
        <button class="bot-control" onclick="toggleChat()" disabled>Toggle Chat</button>
        <button class="bot-control" onclick="sendTestMessage()" disabled>Send Test Message</button>
    </div>

    <!-- Bot will appear as floating chat in corner -->
    <div id="qa-bot-container"></div>
</body>
</html>