openclaw-stt 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +84 -0
  2. package/index.ts +206 -0
  3. package/openclaw.plugin.json +15 -0
  4. package/package.json +38 -0
  5. package/tsconfig.json +16 -0
  6. package/web.html +1498 -0
package/web.html ADDED
@@ -0,0 +1,1498 @@
1
+ <!doctype html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>OpenClaw Speech To Text</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet" />
8
+ <style>
9
+ :root {
10
+ --bg: #0a0a0f;
11
+ --surface: #13131a;
12
+ --surface2: #1c1c28;
13
+ --border: rgba(255, 255, 255, 0.07);
14
+ --border2: rgba(255, 255, 255, 0.14);
15
+ --accent: #7c6dff;
16
+ --accent2: #ff6b9d;
17
+ --accent3: #4de8c2;
18
+ --text: #f0f0f8;
19
+ --muted: #6e6e8a;
20
+ --error: #ff5555;
21
+ --success: #4de8c2;
22
+ --font: "Syne", sans-serif;
23
+ --mono: "DM Mono", monospace;
24
+ }
25
+ * { margin: 0; padding: 0; box-sizing: border-box; }
26
+ body {
27
+ font-family: var(--font);
28
+ background: var(--bg);
29
+ color: var(--text);
30
+ min-height: 100vh;
31
+ overflow-x: hidden;
32
+ }
33
+
34
+ .bg-canvas { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
35
+ .orb {
36
+ position: absolute; border-radius: 50%;
37
+ filter: blur(80px); opacity: 0.15;
38
+ animation: drift 20s infinite alternate ease-in-out;
39
+ }
40
+ .orb1 { width: 600px; height: 600px; background: var(--accent); top: -200px; left: -100px; }
41
+ .orb2 { width: 500px; height: 500px; background: var(--accent2); bottom: -150px; right: -100px; animation-delay: -7s; }
42
+ .orb3 { width: 400px; height: 400px; background: var(--accent3); top: 40%; left: 40%; animation-delay: -14s; }
43
+ @keyframes drift {
44
+ 0% { transform: translate(0, 0) scale(1); }
45
+ 33% { transform: translate(40px, -60px) scale(1.05); }
46
+ 66% { transform: translate(-30px, 40px) scale(0.95); }
47
+ 100% { transform: translate(20px, -20px) scale(1.02); }
48
+ }
49
+ .grid-lines {
50
+ position: fixed; inset: 0;
51
+ background-image:
52
+ linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
53
+ linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
54
+ background-size: 48px 48px; z-index: 0;
55
+ }
56
+
57
+ ::-webkit-scrollbar { width: 4px; height: 4px; }
58
+ ::-webkit-scrollbar-track { background: transparent; }
59
+ ::-webkit-scrollbar-thumb {
60
+ background: linear-gradient(180deg, rgba(124,109,255,.35), rgba(255,107,157,.25));
61
+ border-radius: 99px;
62
+ }
63
+ ::-webkit-scrollbar-thumb:hover {
64
+ background: linear-gradient(180deg, rgba(124,109,255,.7), rgba(255,107,157,.5));
65
+ }
66
+ ::-webkit-scrollbar-corner { background: transparent; }
67
+ * { scrollbar-width: thin; scrollbar-color: rgba(124,109,255,.35) transparent; }
68
+
69
+ .app {
70
+ position: relative; z-index: 1;
71
+ display: grid;
72
+ grid-template-columns: 1fr;
73
+ grid-template-rows: 60px 1fr;
74
+ height: 100vh;
75
+ }
76
+
77
+ .header {
78
+ display: flex; align-items: center; justify-content: space-between;
79
+ padding: 0 24px;
80
+ border-bottom: 1px solid var(--border);
81
+ background: rgba(10,10,15,.85);
82
+ backdrop-filter: blur(20px);
83
+ }
84
+ .logo {
85
+ display: flex; align-items: center; gap: 10px;
86
+ font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
87
+ }
88
+ .logo-icon {
89
+ width: 28px; height: 28px;
90
+ background: linear-gradient(135deg, var(--accent), var(--accent2));
91
+ border-radius: 8px;
92
+ display: flex; align-items: center; justify-content: center;
93
+ font-size: 14px;
94
+ }
95
+ .header-right {
96
+ display: flex; align-items: center; gap: 14px;
97
+ font-size: 13px; color: var(--muted); font-family: var(--mono);
98
+ }
99
+ .status-dot {
100
+ width: 8px; height: 8px; border-radius: 50%;
101
+ background: var(--muted);
102
+ transition: background .3s, box-shadow .3s;
103
+ }
104
+ .status-dot.live { background: var(--success); box-shadow: 0 0 8px var(--success); }
105
+ .status-dot.error { background: var(--error); }
106
+
107
+ .panel-overlay {
108
+ position: fixed; inset: 0; z-index: 50;
109
+ background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
110
+ opacity: 0; pointer-events: none; transition: opacity .25s;
111
+ }
112
+ .panel-overlay.visible { opacity: 1; pointer-events: auto; }
113
+
114
+ .slide-panel {
115
+ position: fixed; top: 0; left: 0; bottom: 0;
116
+ width: 320px; z-index: 60;
117
+ background: rgba(19,19,26,.97); backdrop-filter: blur(24px);
118
+ border-right: 1px solid var(--border2);
119
+ display: flex; flex-direction: column;
120
+ transform: translateX(-100%);
121
+ transition: transform .3s cubic-bezier(.4,0,.2,1);
122
+ overflow: hidden;
123
+ }
124
+ .slide-panel.open { transform: translateX(0); }
125
+ .panel-header {
126
+ display: flex; align-items: center; justify-content: space-between;
127
+ padding: 0 18px; height: 60px;
128
+ border-bottom: 1px solid var(--border); flex-shrink: 0;
129
+ }
130
+ .panel-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
131
+ .panel-close {
132
+ background: none; border: none; color: var(--muted);
133
+ font-size: 18px; cursor: pointer; padding: 4px; line-height: 1;
134
+ transition: color .2s;
135
+ }
136
+ .panel-close:hover { color: var(--text); }
137
+
138
+ .history-toolbar {
139
+ display: flex; align-items: center; justify-content: flex-end;
140
+ padding: 10px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
141
+ }
142
+ .clear-link { background: none; border: none; color: var(--muted); font-family: var(--mono); font-size: 11px; cursor: pointer; }
143
+ .clear-link:hover { color: var(--error); }
144
+ .history-list { flex: 1; overflow-y: auto; padding: 8px; }
145
+ .history-item {
146
+ padding: 9px 11px; border-radius: 8px; margin-bottom: 4px;
147
+ border: 1px solid transparent; transition: background .15s; cursor: pointer;
148
+ }
149
+ .history-item:hover { background: var(--surface2); border-color: var(--border); }
150
+ .history-item .role {
151
+ font-size: 9px; font-family: var(--mono); text-transform: uppercase;
152
+ letter-spacing: .1em; margin-bottom: 3px;
153
+ }
154
+ .history-item .role.user { color: var(--accent); }
155
+ .history-item .role.assistant { color: var(--accent3); }
156
+ .history-item .text { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
157
+
158
+ .kbd-panel { position: fixed; bottom: 76px; right: 16px; z-index: 10; }
159
+ .kbd-panel-toggle {
160
+ display: flex; align-items: center; gap: 6px;
161
+ padding: 7px 12px; border-radius: 8px;
162
+ background: rgba(19,19,26,.85); border: 1px solid var(--border2);
163
+ backdrop-filter: blur(12px); color: var(--muted);
164
+ font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
165
+ cursor: pointer; transition: all .2s;
166
+ }
167
+ .kbd-panel-toggle:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
168
+ .kbd-popup {
169
+ position: absolute; bottom: calc(100% + 8px); right: 0; width: 260px;
170
+ padding: 14px; background: rgba(19,19,26,.97);
171
+ border: 1px solid var(--border2); border-radius: 12px;
172
+ backdrop-filter: blur(24px);
173
+ opacity: 0; transform: translateY(6px) scale(.97);
174
+ pointer-events: none; transition: opacity .2s, transform .2s;
175
+ }
176
+ .kbd-popup.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
177
+ .kbd-popup-title { font-size: 9px; font-family: var(--mono); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
178
+ .kbd-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border); }
179
+ .kbd-row:last-child { border-bottom: none; }
180
+ .kbd-desc { font-size: 11px; color: var(--muted); font-family: var(--mono); }
181
+ .kbd-keys { display: flex; gap: 4px; }
182
+ .kbd-keys kbd { background: var(--surface2); border: 1px solid var(--border2); border-radius: 4px; padding: 2px 6px; font-family: var(--mono); font-size: 10px; color: var(--text); }
183
+
184
+ .panel-btns {
185
+ position: fixed; left: 16px; top: 50%; transform: translateY(-50%);
186
+ z-index: 10; display: flex; flex-direction: column; gap: 10px;
187
+ }
188
+ .panel-btn {
189
+ display: flex; align-items: center; gap: 8px;
190
+ padding: 9px 14px; border-radius: 10px;
191
+ background: rgba(19,19,26,.85); border: 1px solid var(--border2);
192
+ backdrop-filter: blur(12px); color: var(--muted);
193
+ font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
194
+ cursor: pointer; transition: all .2s; white-space: nowrap;
195
+ }
196
+ .panel-btn:hover { color: var(--text); border-color: rgba(255,255,255,.25); background: rgba(28,28,40,.95); }
197
+ .panel-btn .badge {
198
+ min-width: 16px; height: 16px; border-radius: 8px;
199
+ background: var(--accent); color: #fff; font-size: 9px;
200
+ display: flex; align-items: center; justify-content: center; padding: 0 4px;
201
+ }
202
+
203
+ .main { display: flex; flex-direction: column; overflow: hidden; }
204
+ .speech-area { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; align-items: center; }
205
+ .speech-inner {
206
+ width: 100%; max-width: 640px;
207
+ display: flex; flex-direction: column; align-items: center;
208
+ gap: 24px; position: relative;
209
+ padding-top: 48px; padding-bottom: 48px;
210
+ }
211
+
212
+ .visualizer-container {
213
+ position: relative; width: 220px; height: 220px;
214
+ display: flex; align-items: center; justify-content: center; flex-shrink: 0;
215
+ background: radial-gradient(circle at center, rgba(124,109,255,0.03) 0%, transparent 70%);
216
+ border-radius: 50%;
217
+ }
218
+ .ring {
219
+ position: absolute; border-radius: 50%;
220
+ border: 1px solid rgba(255,255,255,0.06);
221
+ transition: border-color .4s, box-shadow .4s;
222
+ top: 50%; left: 50%;
223
+ transform: translate(-50%, -50%);
224
+ }
225
+ .ring1 { width: 136px; height: 136px; }
226
+ .ring2 { width: 176px; height: 176px; border-color: rgba(255,107,157,0.15); }
227
+ .ring3 { width: 220px; height: 220px; border-color: rgba(77,232,194,0.12); }
228
+
229
+ .ring.pulse1 { animation: ripple 2.2s ease-out infinite; }
230
+ .ring.pulse2 { animation: ripple 2.2s ease-out infinite .4s; }
231
+ .ring.pulse3 { animation: ripple 2.2s ease-out infinite .8s; }
232
+
233
+ @keyframes ripple {
234
+ 0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); border-width: 1px; }
235
+ 50% { opacity: 0.15; border-width: 2px; }
236
+ 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); border-width: 0px; }
237
+ }
238
+
239
+ .mic-orb {
240
+ width: 100px; height: 100px; border-radius: 50%;
241
+ background: linear-gradient(145deg, #1a1a24, #13131a);
242
+ border: 1px solid rgba(255,255,255,0.08);
243
+ display: flex; align-items: center; justify-content: center;
244
+ cursor: pointer; position: relative; z-index: 10;
245
+ transition: all .2s cubic-bezier(.4,0,.2,1);
246
+ overflow: hidden;
247
+ box-shadow: inset 0 2px 10px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3);
248
+ }
249
+ .mic-orb::before {
250
+ content: ""; position: absolute; inset: 0; border-radius: 50%;
251
+ background: radial-gradient(circle at 30% 30%, rgba(124,109,255,0.15), transparent 60%);
252
+ opacity: 0.6; transition: opacity .3s;
253
+ pointer-events: none;
254
+ }
255
+ .mic-orb::after {
256
+ content: ""; position: absolute; inset: -2px; border-radius: 50%;
257
+ background: conic-gradient(from 180deg, transparent, rgba(255,255,255,0.03), transparent);
258
+ opacity: 0; transition: opacity .3s;
259
+ }
260
+ .mic-orb:hover::before { opacity: 1; }
261
+ .mic-orb:hover::after { opacity: 1; }
262
+ .mic-orb:hover {
263
+ transform: scale(1.05);
264
+ border-color: rgba(124,109,255,0.4);
265
+ box-shadow: 0 0 25px rgba(124,109,255,0.15), inset 0 2px 10px rgba(0,0,0,0.5);
266
+ }
267
+ .mic-orb:active { transform: scale(0.96); }
268
+
269
+ .mic-orb.recording {
270
+ border-color: rgba(255,107,157,0.6);
271
+ animation: orb-pulse 1.5s ease-in-out infinite;
272
+ box-shadow: 0 0 30px rgba(255,107,157,0.2), inset 0 0 15px rgba(255,107,157,0.1);
273
+ }
274
+ .mic-orb.recording::before {
275
+ opacity: 1;
276
+ background: radial-gradient(circle at 30% 30%, rgba(255,107,157,0.25), transparent 60%);
277
+ }
278
+
279
+ @keyframes orb-pulse {
280
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,157,0.4), inset 0 2px 10px rgba(0,0,0,0.5); }
281
+ 50% { box-shadow: 0 0 0 12px rgba(255,107,157,0), inset 0 2px 10px rgba(0,0,0,0.5); }
282
+ }
283
+
284
+ .mic-icon { font-size: 30px; user-select: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
285
+ .mic-orb.recording .mic-icon { animation: mic-bounce .8s ease-in-out infinite; }
286
+
287
+ @keyframes mic-bounce {
288
+ 0%, 100% { transform: scale(1); }
289
+ 50% { transform: scale(1.1); }
290
+ }
291
+
292
+ .waveform { display: flex; align-items: center; gap: 4px; height: 40px; opacity: 0; transition: opacity .3s, transform .3s; margin-top: 10px; }
293
+ .waveform.active { opacity: 1; }
294
+ .bar { width: 3px; border-radius: 2px; background: var(--accent); height: 4px; transition: height .08s; }
295
+
296
+ .state-label {
297
+ font-family: var(--mono); font-size: 11px; color: var(--muted);
298
+ letter-spacing: .1em; text-transform: uppercase; text-align: center;
299
+ }
300
+
301
+ .compose-panel {
302
+ width: 100%; background: var(--surface); border: 1px solid var(--border2);
303
+ border-radius: 16px; overflow: hidden;
304
+ opacity: 0; transform: translateY(18px);
305
+ transition: opacity .32s, transform .32s;
306
+ pointer-events: none; flex-shrink: 0;
307
+ }
308
+ .compose-panel.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
309
+ .compose-panel.confirm-mode .compose-textarea { opacity: .6; pointer-events: none; }
310
+ .compose-header {
311
+ padding: 10px 16px 6px;
312
+ display: flex; align-items: center; justify-content: space-between;
313
+ }
314
+ .compose-header-label {
315
+ font-size: 10px; font-family: var(--mono); color: var(--muted);
316
+ letter-spacing: .1em; text-transform: uppercase;
317
+ display: flex; align-items: center; gap: 8px;
318
+ }
319
+ .interim-badge {
320
+ background: rgba(255,107,157,.15); color: var(--accent2);
321
+ border-radius: 4px; padding: 1px 7px; font-size: 9px; letter-spacing: .08em;
322
+ display: none;
323
+ }
324
+ .interim-badge.show { display: inline; }
325
+ .compose-textarea {
326
+ width: 100%; min-height: 72px; max-height: 180px;
327
+ background: transparent; border: none; outline: none;
328
+ color: var(--text); font-family: var(--font);
329
+ font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -0.01em;
330
+ padding: 2px 16px 12px; resize: none; overflow-y: auto; transition: opacity .2s;
331
+ }
332
+ .compose-textarea.interim { opacity: .55; }
333
+ .compose-textarea::placeholder { color: var(--muted); font-weight: 400; font-size: 15px; }
334
+
335
+ .confirm-bar {
336
+ display: none; align-items: center; justify-content: space-between;
337
+ padding: 10px 12px; border-top: 1px solid rgba(77,232,194,.25);
338
+ background: rgba(77,232,194,.05); gap: 8px;
339
+ }
340
+ .confirm-bar.visible { display: flex; }
341
+ .confirm-hint { font-size: 11px; font-family: var(--mono); color: var(--accent3); letter-spacing: .06em; }
342
+ .confirm-actions { display: flex; gap: 8px; }
343
+ .keep-btn {
344
+ height: 34px; padding: 0 18px; border-radius: 9px; border: none;
345
+ background: linear-gradient(135deg, var(--accent3), #26c6a0);
346
+ color: #0a0a0f; font-family: var(--font); font-size: 13px; font-weight: 700;
347
+ cursor: pointer; transition: all .18s; display: flex; align-items: center; gap: 6px;
348
+ }
349
+ .keep-btn:hover { filter: brightness(1.1); transform: scale(1.02); }
350
+ .edit-btn {
351
+ height: 34px; padding: 0 14px; border-radius: 9px;
352
+ border: 1px solid var(--border2); background: var(--surface2);
353
+ color: var(--muted); font-family: var(--mono); font-size: 12px;
354
+ cursor: pointer; transition: all .18s;
355
+ }
356
+ .edit-btn:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
357
+
358
+ .compose-actions {
359
+ display: none; align-items: center; justify-content: space-between;
360
+ padding: 10px 12px; border-top: 1px solid var(--border); gap: 8px;
361
+ }
362
+ .compose-actions.visible { display: flex; }
363
+ .compose-left { display: flex; gap: 6px; }
364
+ .action-btn {
365
+ height: 36px; padding: 0 14px; border-radius: 10px;
366
+ border: 1px solid var(--border2); background: var(--surface2);
367
+ color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
368
+ cursor: pointer; display: flex; align-items: center; gap: 6px;
369
+ transition: all .18s; white-space: nowrap;
370
+ }
371
+ .action-btn:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
372
+ .action-btn.danger:hover { color: var(--error); border-color: var(--error); }
373
+ .action-btn.re-record:hover{ color: var(--accent2); border-color: var(--accent2); }
374
+ .action-btn:disabled { opacity: .4; pointer-events: none; }
375
+ .send-btn {
376
+ height: 36px; padding: 0 20px; border-radius: 10px; border: none;
377
+ background: linear-gradient(135deg, var(--accent), #9b85ff);
378
+ color: #fff; font-family: var(--font); font-size: 14px; font-weight: 700;
379
+ cursor: pointer; display: flex; align-items: center; gap: 7px;
380
+ transition: all .18s; letter-spacing: .01em;
381
+ }
382
+ .send-btn:hover { filter: brightness(1.12); transform: scale(1.02); }
383
+ .send-btn:active { transform: scale(.98); }
384
+ .send-btn:disabled{ opacity: .4; pointer-events: none; filter: none; transform: none; }
385
+ .send-btn.loading { background: linear-gradient(135deg, var(--accent3), #26c6a0); }
386
+
387
+ .response-panel {
388
+ width: 100%;
389
+ background: rgba(77,232,194,.055); border: 1px solid rgba(77,232,194,.2);
390
+ border-radius: 14px; padding: 14px 18px;
391
+ opacity: 0; transform: translateY(12px);
392
+ transition: opacity .4s .1s, transform .4s .1s;
393
+ pointer-events: none; flex-shrink: 0;
394
+ }
395
+ .response-panel.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
396
+ .response-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
397
+ .response-role { font-size: 10px; font-family: var(--mono); color: var(--accent3); letter-spacing: .1em; text-transform: uppercase; }
398
+ .response-copy {
399
+ background: none; border: none; color: var(--muted); font-family: var(--mono);
400
+ font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: 4px;
401
+ transition: all .18s; letter-spacing: .04em;
402
+ }
403
+ .response-copy:hover { color: var(--accent3); background: rgba(77,232,194,.1); }
404
+
405
+ .response-content {
406
+ font-size: 15px; line-height: 1.75; color: var(--text);
407
+ word-break: break-word; overflow-wrap: break-word;
408
+ }
409
+ .response-content p { margin-bottom: .8em; }
410
+ .response-content p:last-child { margin-bottom: 0; }
411
+ .response-content code {
412
+ background: var(--surface2); border: 1px solid var(--border2);
413
+ border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 13px;
414
+ }
415
+ .response-content pre {
416
+ background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px;
417
+ padding: 12px 14px; margin: .8em 0; overflow-x: auto;
418
+ }
419
+ .response-content pre code { background: none; border: none; padding: 0; font-size: 13px; }
420
+ .response-content ul, .response-content ol { padding-left: 1.5em; margin-bottom: .8em; }
421
+ .response-content li { margin-bottom: .3em; }
422
+ .response-content strong { color: var(--accent3); font-weight: 700; }
423
+ .response-content em { color: var(--accent2); }
424
+ .response-content a { color: var(--accent); text-decoration: underline; }
425
+ .response-content blockquote {
426
+ border-left: 3px solid var(--accent); padding-left: 12px;
427
+ margin: .8em 0; color: var(--muted); font-style: italic;
428
+ }
429
+
430
+ .stream-cursor { display: inline-block; width: 2px; height: 1em; background: var(--accent3); animation: blink .8s step-end infinite; vertical-align: text-bottom; margin-left: 2px; }
431
+ @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
432
+
433
+ .progress-bar {
434
+ position: fixed; top: 60px; left: 0; right: 0; height: 2px; z-index: 20;
435
+ background: transparent; overflow: hidden; pointer-events: none;
436
+ }
437
+ .progress-bar::after {
438
+ content: ""; position: absolute; top: 0; left: -60%;
439
+ width: 60%; height: 100%;
440
+ background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
441
+ animation: progress-slide 1.4s ease-in-out infinite;
442
+ opacity: 0; transition: opacity .25s;
443
+ }
444
+ .progress-bar.active::after { opacity: 1; }
445
+ @keyframes progress-slide {
446
+ 0% { left: -60%; }
447
+ 100% { left: 110%; }
448
+ }
449
+
450
+ .response-skeleton {
451
+ display: none; flex-direction: column; gap: 10px; padding: 4px 0;
452
+ }
453
+ .response-skeleton.visible { display: flex; }
454
+ .skel-line {
455
+ height: 13px; border-radius: 6px;
456
+ background: linear-gradient(90deg, var(--surface2) 25%, rgba(124,109,255,.12) 50%, var(--surface2) 75%);
457
+ background-size: 200% 100%;
458
+ animation: shimmer 1.6s infinite;
459
+ }
460
+ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
461
+
462
+ .response-panel.error-state {
463
+ background: rgba(255,85,85,.06);
464
+ border-color: rgba(255,85,85,.25);
465
+ }
466
+ .response-panel.error-state .response-role { color: var(--error); }
467
+ .error-body { display: flex; flex-direction: column; gap: 12px; }
468
+ .error-message {
469
+ font-family: var(--mono); font-size: 12px; color: rgba(255,85,85,.85);
470
+ line-height: 1.6; word-break: break-word;
471
+ }
472
+ .error-actions { display: flex; gap: 8px; }
473
+ .retry-btn {
474
+ height: 32px; padding: 0 16px; border-radius: 8px; border: none;
475
+ background: rgba(255,85,85,.15); color: var(--error);
476
+ font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
477
+ cursor: pointer; transition: all .18s;
478
+ }
479
+ .retry-btn:hover { background: rgba(255,85,85,.28); }
480
+ .dismiss-btn {
481
+ height: 32px; padding: 0 16px; border-radius: 8px;
482
+ border: 1px solid var(--border2); background: transparent; color: var(--muted);
483
+ font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
484
+ cursor: pointer; transition: all .18s;
485
+ }
486
+ .dismiss-btn:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
487
+
488
+ .bottom-bar {
489
+ padding: 14px 24px; border-top: 1px solid var(--border);
490
+ background: rgba(10,10,15,.8); backdrop-filter: blur(20px);
491
+ display: flex; align-items: center; justify-content: center; gap: 20px;
492
+ }
493
+ .kbd-hint { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
494
+ kbd { background: var(--surface2); border: 1px solid var(--border2); border-radius: 4px; padding: 2px 7px; font-family: var(--mono); font-size: 11px; }
495
+
496
+ .record-btn-wrap { display: flex; align-items: center; }
497
+ .record-main-btn {
498
+ height: 46px; padding: 0 32px; border-radius: 13px; border: none;
499
+ background: linear-gradient(135deg, var(--accent), #9b85ff);
500
+ color: #fff; font-family: var(--font); font-size: 15px; font-weight: 700;
501
+ cursor: pointer; transition: all .2s; letter-spacing: .01em;
502
+ position: relative; overflow: hidden;
503
+ }
504
+ .record-main-btn::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0); transition: background .2s; }
505
+ .record-main-btn:hover::after { background: rgba(255,255,255,.08); }
506
+ .record-main-btn:active { transform: scale(.98); }
507
+ .record-main-btn.recording { background: linear-gradient(135deg, var(--accent2), #ff8fab); animation: btn-glow 1.5s ease-in-out infinite; }
508
+ @keyframes btn-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,107,157,.4); } 50% { box-shadow: 0 0 20px 4px rgba(255,107,157,.15); } }
509
+ .record-main-btn.processing { background: linear-gradient(135deg, rgba(255,85,85,.8), #cc3344); animation: btn-glow-cancel 1.5s ease-in-out infinite; }
510
+ @keyframes btn-glow-cancel { 0%,100% { box-shadow: 0 0 0 0 rgba(255,85,85,.4); } 50% { box-shadow: 0 0 20px 6px rgba(255,85,85,.15); } }
511
+ .record-main-btn.processing:hover::after { background: rgba(255,255,255,.1); }
512
+
513
+ .toast {
514
+ position: fixed; bottom: 78px; left: 50%;
515
+ transform: translateX(-50%) translateY(14px);
516
+ background: var(--surface2); border: 1px solid var(--border2);
517
+ border-radius: 10px; padding: 9px 18px;
518
+ font-family: var(--mono); font-size: 12px; color: var(--text);
519
+ opacity: 0; pointer-events: none;
520
+ transition: opacity .25s, transform .25s;
521
+ z-index: 99; white-space: nowrap; max-width: 90vw;
522
+ overflow: hidden; text-overflow: ellipsis;
523
+ }
524
+ .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
525
+ .toast.error { background: rgba(255,85,85,.12); border-color: rgba(255,85,85,.35); color: var(--error); }
526
+
527
+ .no-api-banner {
528
+ display: none; width: 100%;
529
+ background: rgba(255,85,85,.07); border: 1px solid rgba(255,85,85,.25);
530
+ border-radius: 12px; padding: 14px 18px;
531
+ font-family: var(--mono); font-size: 12px; color: rgba(255,85,85,.85);
532
+ line-height: 1.6;
533
+ }
534
+ .no-api-banner.visible { display: block; }
535
+
536
+ @media (max-width: 600px) {
537
+ .panel-btns { left: 8px; }
538
+ .kbd-hint { display: none; }
539
+ .slide-panel { width: 290px; }
540
+ .visualizer-container { width: 170px; height: 170px; }
541
+ .ring1 { width: 106px; height: 106px; }
542
+ .ring2 { width: 138px; height: 138px; }
543
+ .ring3 { width: 170px; height: 170px; }
544
+ .mic-orb { width: 62px; height: 62px; }
545
+ .mic-icon { font-size: 19px; }
546
+ }
547
+ </style>
548
+ </head>
549
+ <body>
550
+ <div class="bg-canvas">
551
+ <div class="orb orb1"></div>
552
+ <div class="orb orb2"></div>
553
+ <div class="orb orb3"></div>
554
+ </div>
555
+ <div class="grid-lines"></div>
556
+
557
+ <div class="panel-overlay" id="panelOverlay" onclick="closeAllPanels()"></div>
558
+
559
+ <div class="slide-panel" id="historyPanel" role="dialog" aria-label="对话记录">
560
+ <div class="panel-header">
561
+ <span class="panel-title">📋 对话记录</span>
562
+ <button class="panel-close" onclick="closeAllPanels()" aria-label="关闭">✕</button>
563
+ </div>
564
+ <div class="history-toolbar">
565
+ <button class="clear-link" onclick="clearHistory()">清空记录</button>
566
+ </div>
567
+ <div class="history-list" id="historyList"></div>
568
+ </div>
569
+
570
+ <div class="panel-btns" id="panelBtns">
571
+ <button class="panel-btn" id="historyPanelBtn" onclick="openPanel('history')" title="历史记录 (H)">
572
+ 📋 历史 <span class="badge" id="historyBadge" style="display:none">0</span>
573
+ </button>
574
+ </div>
575
+
576
+ <div class="kbd-panel">
577
+ <div class="kbd-popup" id="kbdPopup" role="tooltip">
578
+ <div class="kbd-popup-title">快捷键</div>
579
+ <div class="kbd-row"><span class="kbd-desc">长按录音 / 松开停止，或点击切换</span><span class="kbd-keys"><kbd>Space</kbd></span></div>
580
+ <div class="kbd-row"><span class="kbd-desc">确认发送</span><span class="kbd-keys"><kbd>Enter</kbd></span></div>
581
+ <div class="kbd-row"><span class="kbd-desc">进入编辑模式</span><span class="kbd-keys"><kbd>E</kbd></span></div>
582
+ <div class="kbd-row"><span class="kbd-desc">取消 / 关闭</span><span class="kbd-keys"><kbd>Esc</kbd></span></div>
583
+ <div class="kbd-row"><span class="kbd-desc">打开历史记录</span><span class="kbd-keys"><kbd>H</kbd></span></div>
584
+ </div>
585
+ <button class="kbd-panel-toggle" id="kbdToggle" onclick="toggleKbdPopup()" aria-label="快捷键">⌨ 快捷键</button>
586
+ </div>
587
+
588
+ <div class="progress-bar" id="progressBar"></div>
589
+
590
+ <div class="app">
591
+ <header class="header">
592
+ <div class="logo">
593
+ <div class="logo-icon">🦞</div>
594
+ <span>OpenClaw</span>
595
+ <span style="color:var(--muted);font-weight:400;font-size:14px">/ Speech To Text</span>
596
+ </div>
597
+ <div class="header-right">
598
+ <select id="langSelect" style="background:var(--surface2);border:1px solid var(--border2);color:var(--text);font-family:var(--mono);font-size:11px;border-radius:6px;padding:4px 8px;outline:none;margin-right:12px;">
599
+ <option value="zh-CN">中文</option>
600
+ <option value="en-US">English</option>
601
+ <option value="ja-JP">日本語</option>
602
+ <option value="ko-KR">한국어</option>
603
+ </select>
604
+ <div class="status-dot" id="statusDot" role="status" aria-label="连接状态"></div>
605
+ <span id="statusText">离线</span>
606
+ </div>
607
+ </header>
608
+
609
+ <main class="main">
610
+ <div class="speech-area" id="speechArea">
611
+ <div class="speech-inner">
612
+
613
+ <div class="no-api-banner" id="noApiBanner">
614
+ ⚠ 您的浏览器不支持 Web Speech API。请使用 Chrome、Edge 或 Safari。
615
+ </div>
616
+
617
+ <div class="visualizer-container">
618
+ <div class="ring ring1" id="ring1"></div>
619
+ <div class="ring ring2" id="ring2"></div>
620
+ <div class="ring ring3" id="ring3"></div>
621
+ <div class="mic-orb" id="micOrb" role="button" tabindex="0" aria-label="点击开始录音">
622
+ <div class="mic-icon" id="micIcon">🎙️</div>
623
+ </div>
624
+ </div>
625
+
626
+ <div class="waveform" id="waveform" aria-hidden="true">
627
+ <div class="bar" id="b0"></div><div class="bar" id="b1"></div><div class="bar" id="b2"></div>
628
+ <div class="bar" id="b3"></div><div class="bar" id="b4"></div><div class="bar" id="b5"></div>
629
+ <div class="bar" id="b6"></div><div class="bar" id="b7"></div><div class="bar" id="b8"></div>
630
+ <div class="bar" id="b9"></div><div class="bar" id="b10"></div><div class="bar" id="b11"></div>
631
+ </div>
632
+
633
+ <div class="state-label" id="stateLabel" aria-live="polite">点击麦克风 或 按住空格 开始录音</div>
634
+
635
+ <div class="compose-panel" id="composePanel">
636
+ <div class="compose-header">
637
+ <div class="compose-header-label">
638
+ <span id="composePanelTitle">识别结果</span>
639
+ <span class="interim-badge" id="interimBadge">识别中…</span>
640
+ </div>
641
+ <span id="charCount" style="font-size:11px;font-family:var(--mono);color:var(--muted)">0 字</span>
642
+ </div>
643
+ <textarea
644
+ class="compose-textarea" id="composeText"
645
+ placeholder="语音识别结果将在这里显示，可直接编辑后发送…"
646
+ oninput="onComposeInput()"
647
+ aria-label="识别结果文本"
648
+ ></textarea>
649
+
650
+ <div class="confirm-bar" id="confirmBar">
651
+ <span class="confirm-hint">✦ 识别完成 — 确认发送或编辑</span>
652
+ <div class="confirm-actions">
653
+ <button class="edit-btn" onclick="enterEditMode()">✏ 编辑</button>
654
+ <button class="edit-btn re-record" style="color:var(--muted)" onclick="reRecord()">🎙 重录</button>
655
+ <button class="keep-btn" id="keepBtn" onclick="sendMessage()">Keep &amp; 发送 ↗</button>
656
+ </div>
657
+ </div>
658
+
659
+ <div class="compose-actions" id="composeActions">
660
+ <div class="compose-left">
661
+ <button class="action-btn re-record" id="reRecordBtn" onclick="reRecord()">🎙 重新录音</button>
662
+ <button class="action-btn danger" onclick="clearCompose()">✕ 清除</button>
663
+ </div>
664
+ <button class="send-btn" id="sendBtn" onclick="sendMessage()" disabled aria-label="发送消息">发送 ↗</button>
665
+ </div>
666
+ </div>
667
+
668
+ <div class="response-panel" id="responsePanel" aria-live="polite">
669
+ <div class="response-header">
670
+ <div class="response-role" id="responseRole">助手回复</div>
671
+ <button class="response-copy" id="copyBtn" onclick="copyResponse()" title="复制回复">复制</button>
672
+ </div>
673
+
674
+ <div class="response-skeleton" id="responseSkeleton">
675
+ <div class="skel-line" style="width:85%"></div>
676
+ <div class="skel-line" style="width:65%"></div>
677
+ <div class="skel-line" style="width:75%"></div>
678
+ </div>
679
+
680
+ <div class="response-content" id="responseContent"></div>
681
+
682
+ <div class="error-body" id="errorBody" style="display:none">
683
+ <div class="error-message" id="errorMessage"></div>
684
+ <div class="error-actions">
685
+ <button class="retry-btn" onclick="retryMessage()">↺ 重试</button>
686
+ <button class="dismiss-btn" onclick="hideResponsePanel()">忽略</button>
687
+ </div>
688
+ </div>
689
+ </div>
690
+ </div>
691
+ </div>
692
+
693
+ <div class="bottom-bar">
694
+ <div class="kbd-hint"><kbd>Space</kbd> 长按说话</div>
695
+ <div class="record-btn-wrap">
696
+ <button class="record-main-btn" id="recordBtn">按住说话</button>
697
+ </div>
698
+ <div class="kbd-hint"><kbd>Enter</kbd> 发送消息</div>
699
+ </div>
700
+ </main>
701
+ </div>
702
+
703
+ <div class="toast" id="toast" role="alert" aria-live="assertive"></div>
704
+
705
+ <script>
706
+ const LANG_CACHE_KEY = "openclaw_speech_lang";
707
+
708
+ function resolvedLang(cfg) {
709
+ const cachedLang = localStorage.getItem(LANG_CACHE_KEY);
710
+ if (cachedLang) return cachedLang;
711
+ if (!cfg.lang || cfg.lang === "auto") return navigator.language || "zh-CN";
712
+ return cfg.lang;
713
+ }
714
+
715
+ function toggleKbdPopup() {
716
+ document.getElementById("kbdPopup").classList.toggle("open");
717
+ }
718
+ function closeKbdPopup() {
719
+ document.getElementById("kbdPopup").classList.remove("open");
720
+ }
721
+ document.addEventListener("click", (e) => {
722
+ const panel = document.getElementById("kbdPopup");
723
+ const toggle = document.getElementById("kbdToggle");
724
+ if (panel.classList.contains("open") && !panel.contains(e.target) && !toggle.contains(e.target)) {
725
+ closeKbdPopup();
726
+ }
727
+ });
728
+
729
+ function openPanel(name) {
730
+ closeAllPanels(false);
731
+ document.getElementById(name + "Panel").classList.add("open");
732
+ document.getElementById("panelOverlay").classList.add("visible");
733
+ }
734
+ function closeAllPanels(hideOverlay = true) {
735
+ document.getElementById("historyPanel").classList.remove("open");
736
+ if (hideOverlay) document.getElementById("panelOverlay").classList.remove("visible");
737
+ }
738
+
739
+
740
+
741
+
742
+
743
+
744
+
745
+
746
+ async function sendToGateway(text, signal, onChunk) {
747
+ const headers = { "Content-Type": "application/json" };
748
+
749
+ const messages = [];
750
+ messages.push({ role: "user", content: text });
751
+
752
+ const body = {
753
+ messages,
754
+ stream: true,
755
+ };
756
+
757
+ const res = await fetch('chat', {
758
+ method: "POST",
759
+ headers,
760
+ signal,
761
+ body: JSON.stringify(body),
762
+ });
763
+
764
+ if (!res.ok) {
765
+ let errText;
766
+ try { errText = await res.text(); } catch { errText = "(无法读取错误响应)"; }
767
+ throw new Error(`HTTP ${res.status}: ${errText}`);
768
+ }
769
+
770
+ const contentType = res.headers.get("content-type") || "";
771
+ const isStream = contentType.includes("text/event-stream") || contentType.includes("text/plain");
772
+
773
+ if (isStream) {
774
+ return await readStream(res.body, onChunk, signal);
775
+ } else {
776
+
777
+ const data = await res.json();
778
+ const reply = data.choices?.[0]?.message?.content || "";
779
+ onChunk(reply);
780
+ return reply;
781
+ }
782
+ }
783
+
784
+
785
+
786
+ async function readStream(body, onChunk, signal) {
787
+ const reader = body.getReader();
788
+ const decoder = new TextDecoder("utf-8");
789
+ let fullText = "";
790
+ let buf = "";
791
+
792
+ try {
793
+ while (true) {
794
+ const { done, value } = await reader.read();
795
+ if (done || signal?.aborted) break;
796
+
797
+ buf += decoder.decode(value, { stream: true });
798
+ const lines = buf.split("\n");
799
+ buf = lines.pop();
800
+
801
+ for (const line of lines) {
802
+ const trimmed = line.trim();
803
+ if (!trimmed || trimmed === "data: [DONE]") continue;
804
+
805
+ let payload = trimmed;
806
+ if (trimmed.startsWith("data:")) payload = trimmed.slice(5).trim();
807
+
808
+ try {
809
+ const json = JSON.parse(payload);
810
+ const delta = json.choices?.[0]?.delta?.content;
811
+ if (delta) {
812
+ fullText += delta;
813
+ onChunk(fullText);
814
+ }
815
+ } catch {
816
+
817
+ if (payload) { fullText += payload + "\n"; onChunk(fullText); }
818
+ }
819
+ }
820
+ }
821
+ } finally {
822
+ try { reader.cancel(); } catch {}
823
+ }
824
+ return fullText;
825
+ }
826
+
827
+ let chatHistory = [];
828
+
829
+ function addHistory(role, content) {
830
+ chatHistory.push({ role, content, ts: Date.now() });
831
+ renderHistory();
832
+ updateHistoryBadge();
833
+ }
834
+
835
+ function renderHistory() {
836
+ const el = document.getElementById("historyList");
837
+ if (!chatHistory.length) {
838
+ el.innerHTML = '<div style="padding:18px 8px;text-align:center;color:var(--muted);font-size:12px;font-family:var(--mono);">暂无记录</div>';
839
+ return;
840
+ }
841
+ el.innerHTML = chatHistory
842
+ .slice()
843
+ .reverse()
844
+ .map(
845
+ (m) => `
846
+ <div class="history-item" onclick="reuseHistory(${chatHistory.indexOf(m) === -1 ? chatHistory.length - 1 : chatHistory.findLastIndex(h => h === m)})">
847
+ <div class="role ${m.role}">${m.role === "user" ? "用户" : "助手"}</div>
848
+ <div class="text">${esc(m.content)}</div>
849
+ </div>`
850
+ )
851
+ .join("");
852
+ }
853
+
854
+ function reuseHistory(idx) {
855
+ const m = chatHistory[idx];
856
+ if (!m || m.role !== "user") return;
857
+ setComposeText(m.content, false);
858
+ showComposePanel();
859
+ enterEditMode();
860
+ closeAllPanels();
861
+ }
862
+
863
+ function clearHistory() {
864
+ if (!chatHistory.length) return;
865
+ if (!confirm("确认清空对话记录？")) return;
866
+ chatHistory = [];
867
+ renderHistory();
868
+ updateHistoryBadge();
869
+ showToast("已清空对话记录");
870
+ }
871
+
872
+ function updateHistoryBadge() {
873
+ const badge = document.getElementById("historyBadge");
874
+ if (chatHistory.length) {
875
+ badge.textContent = chatHistory.length;
876
+ badge.style.display = "flex";
877
+ } else {
878
+ badge.style.display = "none";
879
+ }
880
+ }
881
+
882
+ function esc(s) {
883
+ return String(s)
884
+ .replace(/&/g, "&amp;")
885
+ .replace(/</g, "&lt;")
886
+ .replace(/>/g, "&gt;")
887
+ .replace(/"/g, "&quot;")
888
+ .replace(/'/g, "&#39;");
889
+ }
890
+
891
+
892
+
893
+
894
+
895
+ function renderMarkdown(text) {
896
+
897
+ const lines = text.split("\n");
898
+ const out = [];
899
+ let i = 0;
900
+
901
+ while (i < lines.length) {
902
+ const line = lines[i];
903
+
904
+ if (line.startsWith("```")) {
905
+ const lang = esc(line.slice(3).trim());
906
+ const codeLines = [];
907
+ i++;
908
+ while (i < lines.length && !lines[i].startsWith("```")) {
909
+ codeLines.push(esc(lines[i]));
910
+ i++;
911
+ }
912
+ out.push(`<pre><code${lang ? ` class="language-${lang}"` : ""}>${codeLines.join("\n")}</code></pre>`);
913
+ i++;
914
+ continue;
915
+ }
916
+
917
+ const hMatch = line.match(/^(#{1,6})\s+(.+)/);
918
+ if (hMatch) {
919
+ const level = hMatch[1].length;
920
+ out.push(`<h${level}>${inlineMarkdown(hMatch[2])}</h${level}>`);
921
+ i++; continue;
922
+ }
923
+
924
+ if (line.startsWith("> ")) {
925
+ const quoteLines = [];
926
+ while (i < lines.length && lines[i].startsWith("> ")) {
927
+ quoteLines.push(lines[i].slice(2));
928
+ i++;
929
+ }
930
+ out.push(`<blockquote>${inlineMarkdown(quoteLines.join("\n"))}</blockquote>`);
931
+ continue;
932
+ }
933
+
934
+ if (/^[-*+] /.test(line)) {
935
+ const listItems = [];
936
+ while (i < lines.length && /^[-*+] /.test(lines[i])) {
937
+ listItems.push(`<li>${inlineMarkdown(lines[i].slice(2))}</li>`);
938
+ i++;
939
+ }
940
+ out.push(`<ul>${listItems.join("")}</ul>`);
941
+ continue;
942
+ }
943
+
944
+ if (/^\d+\.\s/.test(line)) {
945
+ const listItems = [];
946
+ while (i < lines.length && /^\d+\.\s/.test(lines[i])) {
947
+ listItems.push(`<li>${inlineMarkdown(lines[i].replace(/^\d+\.\s/, ""))}</li>`);
948
+ i++;
949
+ }
950
+ out.push(`<ol>${listItems.join("")}</ol>`);
951
+ continue;
952
+ }
953
+
954
+ if (/^---+$/.test(line.trim())) {
955
+ out.push("<hr>");
956
+ i++; continue;
957
+ }
958
+
959
+ if (!line.trim()) {
960
+ i++; continue;
961
+ }
962
+
963
+ const paraLines = [];
964
+ while (
965
+ i < lines.length &&
966
+ lines[i].trim() &&
967
+ !lines[i].startsWith("#") &&
968
+ !lines[i].startsWith("```") &&
969
+ !lines[i].startsWith("> ") &&
970
+ !/^[-*+] /.test(lines[i]) &&
971
+ !/^\d+\.\s/.test(lines[i]) &&
972
+ !/^---+$/.test(lines[i].trim())
973
+ ) {
974
+ paraLines.push(lines[i]);
975
+ i++;
976
+ }
977
+ if (paraLines.length) {
978
+ out.push(`<p>${inlineMarkdown(paraLines.join(" "))}</p>`);
979
+ }
980
+ }
981
+
982
+ return out.join("\n");
983
+ }
984
+
985
+ function inlineMarkdown(text) {
986
+ return esc(text)
987
+
988
+ .replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>")
989
+
990
+ .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
991
+ .replace(/__(.+?)__/g, "<strong>$1</strong>")
992
+
993
+ .replace(/\*(.+?)\*/g, "<em>$1</em>")
994
+ .replace(/_(.+?)_/g, "<em>$1</em>")
995
+
996
+ .replace(/`([^`]+)`/g, "<code>$1</code>")
997
+
998
+ .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
999
+ }
1000
+
1001
+
1002
+ const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
1003
+ let STATE = "idle";
1004
+ let recognition = null;
1005
+ let audioCtx = null, analyser = null, micStream = null, animFrame = null;
1006
+ let finalTranscript = "";
1007
+ let recognitionEpoch = 0;
1008
+ let abortController = null;
1009
+
1010
+ function transitionTo(newState) {
1011
+ STATE = newState;
1012
+ const recordBtn = document.getElementById("recordBtn");
1013
+ const micOrb = document.getElementById("micOrb");
1014
+ const progressBar = document.getElementById("progressBar");
1015
+
1016
+ micOrb.classList.toggle("recording", newState === "recording");
1017
+ document.getElementById("waveform").classList.toggle("active", newState === "recording");
1018
+ ["ring1", "ring2", "ring3"].forEach((id, i) =>
1019
+ document.getElementById(id).classList.toggle("pulse" + (i + 1), newState === "recording")
1020
+ );
1021
+
1022
+ recordBtn.classList.remove("recording", "processing");
1023
+ progressBar.classList.toggle("active", newState === "processing");
1024
+
1025
+ if (newState === "processing") {
1026
+ recordBtn.classList.add("processing");
1027
+ recordBtn.textContent = "✕ 取消";
1028
+ recordBtn.disabled = false;
1029
+ setStatus("live", "执行中");
1030
+ } else {
1031
+ recordBtn.disabled = false;
1032
+ if (newState === "recording") {
1033
+ recordBtn.classList.add("recording");
1034
+ recordBtn.textContent = "松开停止";
1035
+ setStatus("live", "录音中");
1036
+ } else if (newState === "confirm") {
1037
+ recordBtn.textContent = "重新录入";
1038
+ setStatus("live", "待确认");
1039
+ } else if (newState === "edit") {
1040
+ recordBtn.textContent = "按住说话";
1041
+ setStatus("live", "就绪");
1042
+ } else {
1043
+ recordBtn.textContent = "按住说话";
1044
+ if (newState === "idle") setStatus("live", "就绪");
1045
+ }
1046
+ }
1047
+ }
1048
+
1049
+ function createRecognition(epoch) {
1050
+ if (!SpeechRecognition) return null;
1051
+ const rec = new SpeechRecognition();
1052
+ rec.continuous = true;
1053
+ rec.interimResults = true;
1054
+ const selectedLang = document.getElementById("langSelect").value;
1055
+ rec.lang = selectedLang;
1056
+
1057
+ rec.onresult = (e) => {
1058
+ if (epoch !== recognitionEpoch) return;
1059
+ let interim = "";
1060
+ for (let i = e.resultIndex; i < e.results.length; i++) {
1061
+ const t = e.results[i][0].transcript;
1062
+ if (e.results[i].isFinal) finalTranscript += t;
1063
+ else interim += t;
1064
+ }
1065
+ setComposeText(finalTranscript + interim, interim.length > 0);
1066
+ showComposePanel();
1067
+ };
1068
+
1069
+ rec.onend = () => {
1070
+ if (epoch !== recognitionEpoch) return;
1071
+ if (STATE === "recording") {
1072
+ try { rec.start(); } catch (_) {}
1073
+ return;
1074
+ }
1075
+ stopAudioAnalysis();
1076
+ const text = document.getElementById("composeText").value.trim();
1077
+ if (text) {
1078
+ setComposeText(text, false);
1079
+ transitionTo("confirm");
1080
+ showConfirmMode();
1081
+ setState("识别完成 — 确认发送或编辑");
1082
+ } else {
1083
+ hideComposePanel();
1084
+ transitionTo("idle");
1085
+ setState("未检测到语音，请重试");
1086
+ }
1087
+ };
1088
+
1089
+ rec.onerror = (e) => {
1090
+ if (epoch !== recognitionEpoch) return;
1091
+ if (e.error === "no-speech" || e.error === "aborted") return;
1092
+ stopAudioAnalysis();
1093
+ transitionTo("idle");
1094
+ const MSG = {
1095
+ "not-allowed": "麦克风权限被拒绝，请在浏览器设置中允许访问麦克风",
1096
+ "service-not-allowed": "语音识别服务不可用（可能需要 HTTPS 或网络连接）",
1097
+ "audio-capture": "未检测到麦克风设备",
1098
+ "network": "语音识别网络连接失败",
1099
+ };
1100
+ showToast(MSG[e.error] || ("识别错误：" + e.error), true);
1101
+ };
1102
+
1103
+ return rec;
1104
+ }
1105
+
1106
+ async function startRecording() {
1107
+ if (STATE !== "idle") return;
1108
+ if (!SpeechRecognition) {
1109
+ showToast("浏览器不支持 Web Speech API — 请使用 Chrome 或 Edge", true);
1110
+ return;
1111
+ }
1112
+
1113
+ transitionTo("recording");
1114
+
1115
+ try {
1116
+ micStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
1117
+ startAudioAnalysis(micStream);
1118
+ } catch (e) {
1119
+ transitionTo("idle");
1120
+ const msg = e.name === "NotAllowedError"
1121
+ ? "麦克风权限被拒绝，请在浏览器设置中允许访问"
1122
+ : "无法访问麦克风: " + e.message;
1123
+ showToast(msg, true);
1124
+ return;
1125
+ }
1126
+
1127
+ recognitionEpoch++;
1128
+ recognition = createRecognition(recognitionEpoch);
1129
+ finalTranscript = "";
1130
+ setComposeText("", true);
1131
+ hideResponsePanel();
1132
+ hideConfirmMode();
1133
+ showComposePanel();
1134
+
1135
+ try {
1136
+ recognition.start();
1137
+ } catch (e) {
1138
+ stopAudioAnalysis();
1139
+ transitionTo("idle");
1140
+ showToast("无法启动识别: " + e.message, true);
1141
+ return;
1142
+ }
1143
+ setState("正在聆听…");
1144
+ }
1145
+
1146
+ function stopRecording() {
1147
+ if (STATE !== "recording") return;
1148
+ STATE = "stopping";
1149
+ try { recognition && recognition.stop(); } catch (_) {}
1150
+ }
1151
+
1152
+ function reRecord() {
1153
+ setComposeText("", false);
1154
+ finalTranscript = "";
1155
+ hideResponsePanel();
1156
+ hideConfirmMode();
1157
+ document.getElementById("composeActions").classList.remove("visible");
1158
+ transitionTo("idle");
1159
+ startRecording();
1160
+ }
1161
+
1162
+ function clearCompose() {
1163
+ setComposeText("", false);
1164
+ finalTranscript = "";
1165
+ hideComposePanel();
1166
+ hideResponsePanel();
1167
+ hideConfirmMode();
1168
+ document.getElementById("composeActions").classList.remove("visible");
1169
+ transitionTo("idle");
1170
+ setState("点击麦克风 或 按住空格 开始录音");
1171
+ }
1172
+
1173
+ function showConfirmMode() {
1174
+ document.getElementById("composePanel").classList.add("confirm-mode");
1175
+ document.getElementById("confirmBar").classList.add("visible");
1176
+ document.getElementById("composeActions").classList.remove("visible");
1177
+ setState("待确认");
1178
+ }
1179
+ function hideConfirmMode() {
1180
+ document.getElementById("composePanel").classList.remove("confirm-mode");
1181
+ document.getElementById("confirmBar").classList.remove("visible");
1182
+ }
1183
+ function enterEditMode() {
1184
+ hideConfirmMode();
1185
+ transitionTo("edit");
1186
+ document.getElementById("composeActions").classList.add("visible");
1187
+ const ta = document.getElementById("composeText");
1188
+ ta.removeAttribute("disabled");
1189
+ ta.focus();
1190
+
1191
+ ta.selectionStart = ta.selectionEnd = ta.value.length;
1192
+ onComposeInput();
1193
+ setState("编辑模式 — 修改后点击发送");
1194
+ }
1195
+
1196
+ function startAudioAnalysis(stream) {
1197
+ audioCtx = new AudioContext();
1198
+ analyser = audioCtx.createAnalyser();
1199
+ analyser.fftSize = 256;
1200
+ audioCtx.createMediaStreamSource(stream).connect(analyser);
1201
+ const data = new Uint8Array(analyser.frequencyBinCount);
1202
+ (function draw() {
1203
+ animFrame = requestAnimationFrame(draw);
1204
+ analyser.getByteFrequencyData(data);
1205
+ for (let i = 0; i < 12; i++) {
1206
+ const val = data[Math.floor((i * data.length) / 12 / 4)];
1207
+ const el = document.getElementById("b" + i);
1208
+ if (el) el.style.height = Math.max(4, (val / 255) * 32) + "px";
1209
+ }
1210
+ })();
1211
+ }
1212
+
1213
+ function stopAudioAnalysis() {
1214
+ cancelAnimationFrame(animFrame);
1215
+ if (micStream) {
1216
+ micStream.getTracks().forEach((t) => t.stop());
1217
+ micStream = null;
1218
+ }
1219
+ if (audioCtx) {
1220
+ audioCtx.close();
1221
+ audioCtx = null;
1222
+ }
1223
+ for (let i = 0; i < 12; i++) {
1224
+ const el = document.getElementById("b" + i);
1225
+ if (el) el.style.height = "4px";
1226
+ }
1227
+ }
1228
+
1229
+ function showComposePanel() {
1230
+ document.getElementById("composePanel").classList.add("visible");
1231
+ }
1232
+ function hideComposePanel() {
1233
+ document.getElementById("composePanel").classList.remove("visible");
1234
+ document.getElementById("composeActions").classList.remove("visible");
1235
+ }
1236
+ function setComposeText(text, isInterim) {
1237
+ const ta = document.getElementById("composeText");
1238
+ const badge = document.getElementById("interimBadge");
1239
+ ta.value = text;
1240
+ ta.classList.toggle("interim", isInterim);
1241
+ badge.classList.toggle("show", isInterim);
1242
+ onComposeInput();
1243
+ }
1244
+ function onComposeInput() {
1245
+ const val = document.getElementById("composeText").value;
1246
+ document.getElementById("charCount").textContent = [...val].length + " 字";
1247
+ const canSend = !!val.trim() && (STATE === "edit" || STATE === "confirm");
1248
+ document.getElementById("sendBtn").disabled = !canSend;
1249
+ }
1250
+
1251
+ let _pendingText = "";
1252
+
1253
+ async function sendMessage() {
1254
+ if (STATE === "processing") return;
1255
+ const text = document.getElementById("composeText").value.trim();
1256
+ if (!text) return;
1257
+
1258
+ _pendingText = text;
1259
+ transitionTo("processing");
1260
+ hideConfirmMode();
1261
+
1262
+ showResponseSkeleton();
1263
+
1264
+ abortController = new AbortController();
1265
+ setState("OpenClaw 执行中…");
1266
+
1267
+ try {
1268
+ const reply = await sendToGateway(text, abortController.signal, (chunk) => {
1269
+ showResponsePanel(chunk, true);
1270
+ });
1271
+
1272
+ addHistory("user", text);
1273
+ addHistory("assistant", reply);
1274
+ hideComposePanel();
1275
+ showResponsePanel(reply, false);
1276
+ setState("已收到回复");
1277
+ transitionTo("idle");
1278
+ } catch (e) {
1279
+ if (e.name === "AbortError") {
1280
+ hideResponsePanel();
1281
+ setState("已取消");
1282
+ transitionTo("edit");
1283
+ showComposePanel();
1284
+ document.getElementById("composeActions").classList.add("visible");
1285
+ } else {
1286
+
1287
+ showResponseError(e.message);
1288
+ setState("请求失败");
1289
+ setStatus("error", "失败");
1290
+ transitionTo("edit");
1291
+ showComposePanel();
1292
+ document.getElementById("composeActions").classList.add("visible");
1293
+ }
1294
+ } finally {
1295
+ abortController = null;
1296
+ }
1297
+ }
1298
+
1299
+ function retryMessage() {
1300
+ if (!_pendingText) return;
1301
+
1302
+ setComposeText(_pendingText, false);
1303
+ showComposePanel();
1304
+ hideResponsePanel();
1305
+ sendMessage();
1306
+ }
1307
+
1308
+ function cancelRequest() {
1309
+ if (abortController) abortController.abort();
1310
+ }
1311
+
1312
+ let _lastResponseText = "";
1313
+
1314
+ function _setResponseMode(mode) {
1315
+
1316
+ const panel = document.getElementById("responsePanel");
1317
+ const skeleton = document.getElementById("responseSkeleton");
1318
+ const content = document.getElementById("responseContent");
1319
+ const errBody = document.getElementById("errorBody");
1320
+ const copyBtn = document.getElementById("copyBtn");
1321
+ const role = document.getElementById("responseRole");
1322
+
1323
+ skeleton.classList.toggle("visible", mode === "skeleton");
1324
+ content.style.display = (mode === "content") ? "" : "none";
1325
+ errBody.style.display = (mode === "error") ? "" : "none";
1326
+ copyBtn.style.display = (mode === "content") ? "" : "none";
1327
+
1328
+ panel.classList.remove("error-state");
1329
+ if (mode === "error") {
1330
+ panel.classList.add("error-state");
1331
+ role.textContent = "请求失败";
1332
+ } else {
1333
+ role.textContent = "助手回复";
1334
+ }
1335
+
1336
+ if (mode === "hidden") {
1337
+ panel.classList.remove("visible");
1338
+ } else {
1339
+ panel.classList.add("visible");
1340
+ }
1341
+ }
1342
+
1343
+ function showResponseSkeleton() {
1344
+ document.getElementById("responseContent").innerHTML = "";
1345
+ document.getElementById("errorMessage").textContent = "";
1346
+ _lastResponseText = "";
1347
+ _setResponseMode("skeleton");
1348
+ }
1349
+
1350
+ function showResponsePanel(text, isStreaming = false) {
1351
+ _lastResponseText = text;
1352
+ const content = document.getElementById("responseContent");
1353
+
1354
+ _setResponseMode("content");
1355
+ content.innerHTML = renderMarkdown(text) + (isStreaming ? '<span class="stream-cursor"></span>' : "");
1356
+
1357
+ if (!isStreaming) {
1358
+ requestAnimationFrame(() => {
1359
+ document.getElementById("speechArea").scrollTo({ top: 0, behavior: "smooth" });
1360
+ });
1361
+ }
1362
+ }
1363
+
1364
+ function showResponseError(message) {
1365
+ _setResponseMode("error");
1366
+ document.getElementById("errorMessage").textContent = message;
1367
+ }
1368
+
1369
+ function hideResponsePanel() {
1370
+ _setResponseMode("hidden");
1371
+ document.getElementById("responseContent").innerHTML = "";
1372
+ document.getElementById("errorMessage").textContent = "";
1373
+ _lastResponseText = "";
1374
+ }
1375
+
1376
+ function copyResponse() {
1377
+ if (!_lastResponseText) return;
1378
+ navigator.clipboard.writeText(_lastResponseText)
1379
+ .then(() => showToast("✓ 已复制到剪贴板"))
1380
+ .catch(() => showToast("复制失败，请手动选择文本", true));
1381
+ }
1382
+
1383
+ function setState(txt) {
1384
+ document.getElementById("stateLabel").textContent = txt;
1385
+ }
1386
+ function setStatus(cls, txt) {
1387
+ document.getElementById("statusDot").className = "status-dot" + (cls ? " " + cls : "");
1388
+ document.getElementById("statusText").textContent = txt;
1389
+ }
1390
+
1391
+ let toastTimer;
1392
+ function showToast(msg, isErr = false) {
1393
+ clearTimeout(toastTimer);
1394
+ const t = document.getElementById("toast");
1395
+ t.textContent = msg;
1396
+ t.className = "toast" + (isErr ? " error" : "");
1397
+ t.classList.add("show");
1398
+ toastTimer = setTimeout(() => t.classList.remove("show"), isErr ? 5000 : 3000);
1399
+ }
1400
+
1401
+ document.addEventListener("keydown", (e) => {
1402
+ const inInput = ["INPUT", "TEXTAREA", "SELECT"].includes(e.target.tagName);
1403
+ const confirmVisible = document.getElementById("confirmBar").classList.contains("visible");
1404
+ const composeVisible = document.getElementById("composePanel").classList.contains("visible");
1405
+
1406
+ if (e.code === "Space" && !e.repeat && !inInput) {
1407
+ e.preventDefault();
1408
+ if (STATE === "idle") {
1409
+ startRecording();
1410
+ } else if (STATE === "confirm") {
1411
+ reRecord();
1412
+ }
1413
+ }
1414
+ if ((e.code === "Enter" && !e.shiftKey) && !inInput) {
1415
+ if (confirmVisible || STATE === "confirm") { e.preventDefault(); sendMessage(); }
1416
+ }
1417
+ if (e.code === "KeyE" && !inInput && STATE === "confirm") { enterEditMode(); }
1418
+ if (e.code === "Escape") {
1419
+ if (document.getElementById("kbdPopup").classList.contains("open")) {
1420
+ closeKbdPopup();
1421
+ } else if (
1422
+ document.getElementById("historyPanel").classList.contains("open")
1423
+ ) {
1424
+ closeAllPanels();
1425
+ }
1426
+ }
1427
+ if (e.code === "KeyH" && !inInput) {
1428
+ const open = document.getElementById("historyPanel").classList.contains("open");
1429
+ open ? closeAllPanels() : openPanel("history");
1430
+ }
1431
+ });
1432
+
1433
+ document.addEventListener("keyup", (e) => {
1434
+ const inInput = ["INPUT", "TEXTAREA", "SELECT"].includes(e.target.tagName);
1435
+ if (e.code === "Space" && !inInput && STATE === "recording") stopRecording();
1436
+ });
1437
+
1438
+ document.getElementById("micOrb").addEventListener("keydown", (e) => {
1439
+ if (e.code === "Enter" || e.code === "Space") {
1440
+ e.preventDefault();
1441
+ if (STATE === "idle") startRecording();
1442
+ else if (STATE === "recording") stopRecording();
1443
+ else if (STATE === "confirm") reRecord();
1444
+ }
1445
+ });
1446
+
1447
+ document.getElementById("recordBtn").addEventListener("click", () => {
1448
+ if (STATE === "processing") { cancelRequest(); return; }
1449
+ if (STATE === "idle") {
1450
+ startRecording();
1451
+ } else if (STATE === "recording") {
1452
+ stopRecording();
1453
+ } else if (STATE === "confirm") {
1454
+ reRecord();
1455
+ }
1456
+ });
1457
+
1458
+ document.getElementById("micOrb").addEventListener("click", () => {
1459
+ if (STATE === "idle") {
1460
+ startRecording();
1461
+ } else if (STATE === "recording") {
1462
+ stopRecording();
1463
+ } else if (STATE === "confirm") {
1464
+ reRecord();
1465
+ }
1466
+ });
1467
+
1468
+ document.getElementById("composeText").addEventListener("keydown", (e) => {
1469
+ if (e.code === "Enter" && !e.shiftKey) {
1470
+ e.preventDefault();
1471
+ const btn = document.getElementById("sendBtn");
1472
+ if (!btn.disabled) sendMessage();
1473
+ }
1474
+ });
1475
+
1476
+
1477
+ if (!SpeechRecognition) {
1478
+ document.getElementById("noApiBanner").classList.add("visible");
1479
+ }
1480
+
1481
+ const savedLang = localStorage.getItem(LANG_CACHE_KEY) || "zh-CN";
1482
+ document.getElementById("langSelect").value = savedLang;
1483
+ document.getElementById("langSelect").addEventListener("change", (e) => {
1484
+ localStorage.setItem(LANG_CACHE_KEY, e.target.value);
1485
+ });
1486
+
1487
+ setStatus("", "就绪");
1488
+ renderHistory();
1489
+
1490
+ fetch('', { method: "HEAD" })
1491
+ .then(() => setStatus("live", "已连接"))
1492
+ .catch(() => {
1493
+ setStatus("error", "无法连接");
1494
+ showToast("⚠ 无法连接到服务器，请检查配置", true);
1495
+ });
1496
+ </script>
1497
+ </body>
1498
+ </html>