Hugging Face's logo

Spaces:
mr4
/
chatbot-js
Running

App Files Community
chatbot-js
File size: 10,296 Bytes
91111e4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4b05d12
 
 
 
91111e4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4b05d12
91111e4
 
 
 
 
 
 
 
 
 
 
 
 
 
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hikari Chatbot</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌟</text></svg>">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="chat-container">
        <header class="chat-header">
            <h1>Hikari</h1>
            <div class="header-controls">
                <span id="interaction-mode-badge" class="interaction-mode-badge" title="Click để đổi chế độ tương tác">📝→📝</span>
                <label class="thinking-toggle" title="Enable/Disable LLM Thinking">
                    <input type="checkbox" id="thinking-toggle" onchange="if(typeof setLLMThinkingEnabled==='function')setLLMThinkingEnabled(this.checked)">
                    <span class="thinking-toggle-label">🧠</span>
                </label>
                <button id="help-button" title="Hướng dẫn sử dụng">❓</button>
                <button id="rules-button" title="Xem danh sách rules">📋</button>
                <button id="macros-button" title="Xem danh sách Object Macros">🔧</button>
                <button id="settings-button" title="Cài đặt">⚙️</button>
                <select id="language-selector">
                    <option value="vi" selected>Tiếng Việt</option>
                    <option value="en">English</option>
                    <option value="ja">日本語</option>
                </select>
            </div>
        </header>
        <div id="rules-panel" class="slide-panel hidden">
            <div class="slide-panel-header">
                <h3 id="rules-title">📋 Các câu hỏi Hikari có thể trả lời</h3>
                <button class="slide-panel-close" onclick="toggleRulesPanel()" aria-label="Đóng">&times;</button>
            </div>
            <div class="slide-panel-body">
                <ul id="rules-list" class="rules-list"></ul>
            </div>
        </div>
        <div id="macros-panel" class="slide-panel hidden">
            <div class="slide-panel-header">
                <h3 id="macros-title">🔧 Object Macros (Subroutines)</h3>
                <button class="slide-panel-close" onclick="toggleMacrosPanel()" aria-label="Đóng">&times;</button>
            </div>
            <div class="slide-panel-body">
                <ul id="macros-list" class="macros-list"></ul>
            </div>
        </div>
        <div id="settings-panel" class="slide-panel hidden">
            <div class="slide-panel-header">
                <h3>⚙️ Settings</h3>
                <button class="slide-panel-close" onclick="toggleSettingsPanel()" aria-label="Đóng">&times;</button>
            </div>
            <div class="slide-panel-body settings-body">
                <div class="setting-item">
                    <label>
                        <input type="checkbox" id="history-toggle">
                        Chat History (gửi lịch sử cho LLM)
                    </label>
                </div>
                <div class="setting-item">
                    <label>
                        Max turns:
                        <input type="number" id="history-max-turns" value="5" min="0" max="50" class="setting-number">
                    </label>
                    <span class="setting-hint">0 = không giới hạn</span>
                </div>
                <div class="setting-item setting-buttons">
                    <button id="view-history-button" class="setting-btn">📜 View History</button>
                    <button id="clear-history-button" class="setting-btn setting-btn-danger">🗑 Clear History</button>
                </div>
                <div class="setting-item">
                    <label class="setting-label">Giới hạn lưu trữ:</label>
                    <select id="retention-mode-select" class="setting-select">
                        <option value="count">Giới hạn số lượng</option>
                        <option value="days">Giới hạn thời gian</option>
                    </select>
                </div>
                <div id="retention-count-section" class="setting-item">
                    <label>
                        Tối đa:
                        <input type="number" id="retention-max-count" value="50" min="1" max="10000" class="setting-number">
                    </label>
                    <span class="setting-hint">hội thoại</span>
                </div>
                <div id="retention-days-section" class="setting-item hidden">
                    <label>
                        Tối đa:
                        <input type="number" id="retention-max-days" value="30" min="1" max="3650" class="setting-number">
                    </label>
                    <span class="setting-hint">ngày</span>
                </div>
                <hr class="setting-divider">
                <div class="setting-item">
                    <label class="setting-label">Chế độ tương tác:</label>
                    <select id="interaction-mode-select" class="setting-select">
                        <option value="text-text">📝→📝 Text → Text</option>
                        <option value="text-voice">📝→🔊 Text → Voice</option>
                        <option value="voice-text">🎤→📝 Voice → Text</option>
                        <option value="voice-voice">🎤→🔊 Voice → Voice</option>
                    </select>
                </div>
                <div id="tts-settings-section">
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="voice-input-toggle">
                            Voice Input (Speech to Text)
                        </label>
                    </div>
                    <div class="setting-item">
                        <label>
                            <input type="checkbox" id="voice-output-toggle">
                            Voice Output (Text to Speech)
                        </label>
                    </div>
                    <div class="setting-item">
                        <label class="setting-label">Giọng đọc:</label>
                        <select id="tts-voice-select" class="setting-select"></select>
                    </div>
                </div>
            </div>
        </div>
        <div id="message-display" class="message-display"></div>
        <div id="tts-status" class="tts-status hidden" aria-live="polite">
            <span class="tts-spinner">⏳</span>
            <span id="tts-status-text">Đang xử lý âm thanh...</span>
        </div>
        <div class="input-area">
            <button id="attach-button" title="Đính kèm ảnh" aria-label="Đính kèm ảnh">📎</button>
            <input type="file" id="file-input" accept="image/*" class="hidden">
            <button id="voice-input-button" class="hidden" title="Nhập bằng giọng nói" aria-label="Nhập bằng giọng nói">🎤</button>
            <div id="adapter-prefix-badge" class="adapter-prefix-badge hidden" aria-live="polite"></div>
            <input type="text" id="message-input" placeholder="Nhập tin nhắn...">
            <button id="send-button">Gửi</button>
        </div>
        <div id="attachment-preview" class="attachment-preview hidden">
            <img id="attachment-thumb" alt="Preview" class="attachment-thumb">
            <span id="attachment-name" class="attachment-name"></span>
            <button id="attachment-remove" class="attachment-remove" aria-label="Xóa">&times;</button>
        </div>
    </div>
    <!-- Help Dialog -->
    <div id="help-overlay" class="help-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="help-dialog-title">
        <div class="help-dialog">
            <div class="help-dialog-header">
                <h2 id="help-dialog-title">📖 Hướng dẫn sử dụng</h2>
                <button id="help-close-button" class="help-close-button" aria-label="Đóng">&times;</button>
            </div>
            <div id="help-dialog-body" class="help-dialog-body">
                <!-- Nội dung được render bởi JS theo ngôn ngữ -->
            </div>
        </div>
    </div>

    <!-- History Dialog -->
    <div id="history-overlay" class="help-overlay hidden" role="dialog" aria-modal="true">
        <div class="help-dialog history-dialog">
            <div class="help-dialog-header">
                <h2 id="history-dialog-title">📜 Chat History</h2>
                <div class="history-tab-buttons">
                    <button id="history-tab-db" class="history-tab active">IndexedDB</button>
                    <button id="history-tab-session" class="history-tab">Session</button>
                </div>
                <button id="history-close-button" class="help-close-button" aria-label="Đóng">&times;</button>
            </div>
            <div id="history-dialog-body" class="help-dialog-body">
                <div id="history-list" class="history-list"></div>
                <div id="history-paging" class="history-paging"></div>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/rivescript@latest/dist/rivescript.min.js"></script>
    <script src="brain.js"></script>
    <script src="data-loader.js"></script>
    <script src="data/chat-history-db.js"></script>
    <script src="adapters/language-selector.js"></script>
    <script src="adapters/text-similarity.js"></script>
    <script src="adapters/specific-response.js"></script>
    <script src="adapters/time-adapter.js"></script>
    <script src="adapters/math-adapter.js"></script>
    <script src="adapters/unit-conversion.js"></script>
    <script src="adapters/best-match.js"></script>
    <script src="adapters/logic-dispatcher.js"></script>
    <script src="adapters/web-search.js"></script>
    <script src="adapters/llm-adapter.js"></script>
    <script src="adapters/voice-adapter.js"></script>
    <script src="adapters/adapter-registry.js"></script>
    <script src="app.js"></script>
</body>
</html>