@ghchinoy/lit-audio-ui 0.4.4 → 0.4.5
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.
- package/dist/components/atoms/ui-message-bubble.js +95 -0
- package/dist/components/atoms/ui-speech-record-button.js +2 -3
- package/dist/components/atoms/ui-typing-dot.js +54 -0
- package/dist/components/molecules/ui-chat-item.js +112 -0
- package/dist/components/molecules/ui-chat-list.js +71 -0
- package/dist/components/molecules/ui-showcase-card.js +14 -9
- package/dist/components/molecules/ui-speech-preview.js +1 -2
- package/dist/components/molecules/ui-typing-indicator.js +43 -0
- package/dist/components/providers/ui-speech-provider.js +1 -0
- package/dist/index.js +23 -18
- package/dist/scream-audio-ui.umd.js +244 -37
- package/package.json +1 -1
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
|
|
2
|
+
import { LitElement as t, css as n, html as r } from "lit";
|
|
3
|
+
import { customElement as i, property as a } from "lit/decorators.js";
|
|
4
|
+
/**
|
|
5
|
+
* Copyright 2026 Google LLC
|
|
6
|
+
*
|
|
7
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
8
|
+
* you may not use this file except in compliance with the License.
|
|
9
|
+
* You may obtain a copy of the License at
|
|
10
|
+
*
|
|
11
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
12
|
+
*
|
|
13
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
14
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
15
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
16
|
+
* See the License for the specific language governing permissions and
|
|
17
|
+
* limitations under the License.
|
|
18
|
+
*/
|
|
19
|
+
var o = class extends t {
|
|
20
|
+
constructor(...e) {
|
|
21
|
+
super(...e), this.variant = "contained", this.direction = "inbound";
|
|
22
|
+
}
|
|
23
|
+
static {
|
|
24
|
+
this.styles = n`
|
|
25
|
+
:host {
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
max-width: 85%;
|
|
28
|
+
font-family: inherit;
|
|
29
|
+
color-scheme: light dark;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.bubble {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
gap: 8px;
|
|
36
|
+
padding: 14px 18px;
|
|
37
|
+
font-size: 0.95rem;
|
|
38
|
+
line-height: 1.5;
|
|
39
|
+
box-sizing: border-box;
|
|
40
|
+
transition: background-color 0.2s, color 0.2s;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Variant: Contained */
|
|
44
|
+
:host([variant='contained']) .bubble {
|
|
45
|
+
border-radius: 16px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:host([variant='contained'][direction='inbound']) .bubble {
|
|
49
|
+
background: var(
|
|
50
|
+
--ui-message-bubble-inbound-bg,
|
|
51
|
+
var(--md-sys-color-surface-container-high, #e2e2e2)
|
|
52
|
+
);
|
|
53
|
+
color: var(--md-sys-color-on-surface);
|
|
54
|
+
border-bottom-left-radius: 4px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
:host([variant='contained'][direction='outbound']) .bubble {
|
|
58
|
+
background: var(
|
|
59
|
+
--ui-message-bubble-outbound-bg,
|
|
60
|
+
var(--md-sys-color-primary, #0066cc)
|
|
61
|
+
);
|
|
62
|
+
color: var(--md-sys-color-on-primary, #ffffff);
|
|
63
|
+
border-bottom-right-radius: 4px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Variant: Flat */
|
|
67
|
+
:host([variant='flat']) .bubble {
|
|
68
|
+
padding: 8px 0;
|
|
69
|
+
background: transparent;
|
|
70
|
+
color: var(--md-sys-color-on-surface);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
:host([variant='flat'][direction='outbound']) .bubble {
|
|
74
|
+
padding: 12px 16px;
|
|
75
|
+
background: var(--md-sys-color-surface-container-highest);
|
|
76
|
+
border-radius: 12px;
|
|
77
|
+
}
|
|
78
|
+
`;
|
|
79
|
+
}
|
|
80
|
+
render() {
|
|
81
|
+
return r`
|
|
82
|
+
<div class="bubble">
|
|
83
|
+
<slot></slot>
|
|
84
|
+
</div>
|
|
85
|
+
`;
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
e([a({
|
|
89
|
+
type: String,
|
|
90
|
+
reflect: !0
|
|
91
|
+
})], o.prototype, "variant", void 0), e([a({
|
|
92
|
+
type: String,
|
|
93
|
+
reflect: !0
|
|
94
|
+
})], o.prototype, "direction", void 0), o = e([i("ui-message-bubble")], o);
|
|
95
|
+
export { o as UiMessageBubble };
|
|
@@ -59,12 +59,11 @@ var c = class extends r {
|
|
|
59
59
|
`;
|
|
60
60
|
}
|
|
61
61
|
render() {
|
|
62
|
-
|
|
63
|
-
let { state: e } = this._context, t = e === "recording", n = e === "processing" || e === "connecting", r = "mic";
|
|
62
|
+
let e = this._context?.state || "idle", t = e === "recording", n = e === "processing" || e === "connecting", r = "mic";
|
|
64
63
|
return t && (r = "stop"), n && (r = "hourglass_empty"), e === "success" && (r = "check"), e === "error" && (r = "error"), a`
|
|
65
64
|
<md-filled-icon-button
|
|
66
65
|
class="${e}"
|
|
67
|
-
?disabled=${n}
|
|
66
|
+
?disabled=${n || !this._context}
|
|
68
67
|
@click=${this._handleClick}
|
|
69
68
|
>
|
|
70
69
|
<md-icon>${r}</md-icon>
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
|
|
2
|
+
import { LitElement as t, css as n, html as r } from "lit";
|
|
3
|
+
import { customElement as i, property as a } from "lit/decorators.js";
|
|
4
|
+
/**
|
|
5
|
+
* Copyright 2026 Google LLC
|
|
6
|
+
*
|
|
7
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
8
|
+
* you may not use this file except in compliance with the License.
|
|
9
|
+
* You may obtain a copy of the License at
|
|
10
|
+
*
|
|
11
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
12
|
+
*
|
|
13
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
14
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
15
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
16
|
+
* See the License for the specific language governing permissions and
|
|
17
|
+
* limitations under the License.
|
|
18
|
+
*/
|
|
19
|
+
var o = class extends t {
|
|
20
|
+
constructor(...e) {
|
|
21
|
+
super(...e), this.delay = "0s";
|
|
22
|
+
}
|
|
23
|
+
static {
|
|
24
|
+
this.styles = n`
|
|
25
|
+
:host {
|
|
26
|
+
display: inline-block;
|
|
27
|
+
}
|
|
28
|
+
.dot {
|
|
29
|
+
width: 6px;
|
|
30
|
+
height: 6px;
|
|
31
|
+
border-radius: 50%;
|
|
32
|
+
background: var(--ui-typing-dot-color, currentColor);
|
|
33
|
+
animation: pulse 1.2s infinite ease-in-out;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@keyframes pulse {
|
|
37
|
+
0%,
|
|
38
|
+
100% {
|
|
39
|
+
transform: scale(0.8);
|
|
40
|
+
opacity: 0.4;
|
|
41
|
+
}
|
|
42
|
+
50% {
|
|
43
|
+
transform: scale(1.2);
|
|
44
|
+
opacity: 1;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
`;
|
|
48
|
+
}
|
|
49
|
+
render() {
|
|
50
|
+
return r`<div class="dot" style="animation-delay: ${this.delay}"></div>`;
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
e([a({ type: String })], o.prototype, "delay", void 0), o = e([i("ui-typing-dot")], o);
|
|
54
|
+
export { o as UiTypingDot };
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
|
|
2
|
+
import "../atoms/ui-message-bubble.js";
|
|
3
|
+
import { LitElement as t, css as n, html as r } from "lit";
|
|
4
|
+
import { customElement as i, property as a } from "lit/decorators.js";
|
|
5
|
+
import { classMap as o } from "lit/directives/class-map.js";
|
|
6
|
+
/**
|
|
7
|
+
* Copyright 2026 Google LLC
|
|
8
|
+
*
|
|
9
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
10
|
+
* you may not use this file except in compliance with the License.
|
|
11
|
+
* You may obtain a copy of the License at
|
|
12
|
+
*
|
|
13
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
14
|
+
*
|
|
15
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
16
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
17
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
18
|
+
* See the License for the specific language governing permissions and
|
|
19
|
+
* limitations under the License.
|
|
20
|
+
*/
|
|
21
|
+
var s = class extends t {
|
|
22
|
+
constructor(...e) {
|
|
23
|
+
super(...e), this.direction = "inbound", this.variant = "contained";
|
|
24
|
+
}
|
|
25
|
+
static {
|
|
26
|
+
this.styles = n`
|
|
27
|
+
:host {
|
|
28
|
+
display: flex;
|
|
29
|
+
width: 100%;
|
|
30
|
+
margin-bottom: 1rem;
|
|
31
|
+
font-family: inherit;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.item-container {
|
|
35
|
+
display: flex;
|
|
36
|
+
gap: 12px;
|
|
37
|
+
width: 100%;
|
|
38
|
+
align-items: flex-end;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.item-container.inbound {
|
|
42
|
+
justify-content: flex-start;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.item-container.outbound {
|
|
46
|
+
flex-direction: row-reverse;
|
|
47
|
+
justify-content: flex-start; /* This correctly pushes to the right because of row-reverse */
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.avatar-slot {
|
|
51
|
+
width: 32px;
|
|
52
|
+
height: 32px;
|
|
53
|
+
flex-shrink: 0;
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
justify-content: center;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Hide avatar slot if no children are present */
|
|
60
|
+
.avatar-slot:not(:has(*)) {
|
|
61
|
+
display: none;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.content-wrapper {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
gap: 4px;
|
|
68
|
+
max-width: 80%;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.item-container.inbound .content-wrapper {
|
|
72
|
+
align-items: flex-start;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.item-container.outbound .content-wrapper {
|
|
76
|
+
align-items: flex-end;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.meta-slot {
|
|
80
|
+
font-size: 0.7rem;
|
|
81
|
+
font-weight: 500;
|
|
82
|
+
opacity: 0.6;
|
|
83
|
+
padding: 0 4px;
|
|
84
|
+
display: flex;
|
|
85
|
+
gap: 8px;
|
|
86
|
+
}
|
|
87
|
+
`;
|
|
88
|
+
}
|
|
89
|
+
render() {
|
|
90
|
+
return r`
|
|
91
|
+
<div class=${o({
|
|
92
|
+
"item-container": !0,
|
|
93
|
+
[this.direction]: !0
|
|
94
|
+
})}>
|
|
95
|
+
<div class="avatar-slot">
|
|
96
|
+
<slot name="avatar"></slot>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<div class="content-wrapper">
|
|
100
|
+
<ui-message-bubble .direction=${this.direction} .variant=${this.variant}>
|
|
101
|
+
<slot></slot>
|
|
102
|
+
</ui-message-bubble>
|
|
103
|
+
<div class="meta-slot">
|
|
104
|
+
<slot name="meta"></slot>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
`;
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
e([a({ type: String })], s.prototype, "direction", void 0), e([a({ type: String })], s.prototype, "variant", void 0), s = e([i("ui-chat-item")], s);
|
|
112
|
+
export { s as UiChatItem };
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
|
|
2
|
+
import { LitElement as t, css as n, html as r } from "lit";
|
|
3
|
+
import { customElement as i, query as a } from "lit/decorators.js";
|
|
4
|
+
/**
|
|
5
|
+
* Copyright 2026 Google LLC
|
|
6
|
+
*
|
|
7
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
8
|
+
* you may not use this file except in compliance with the License.
|
|
9
|
+
* You may obtain a copy of the License at
|
|
10
|
+
*
|
|
11
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
12
|
+
*
|
|
13
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
14
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
15
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
16
|
+
* See the License for the specific language governing permissions and
|
|
17
|
+
* limitations under the License.
|
|
18
|
+
*/
|
|
19
|
+
var o = class extends t {
|
|
20
|
+
static {
|
|
21
|
+
this.styles = n`
|
|
22
|
+
:host {
|
|
23
|
+
display: block;
|
|
24
|
+
height: 100%;
|
|
25
|
+
width: 100%;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.scroll-container {
|
|
30
|
+
height: 100%;
|
|
31
|
+
width: 100%;
|
|
32
|
+
overflow-y: auto;
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
padding: 1rem;
|
|
36
|
+
box-sizing: border-box;
|
|
37
|
+
scroll-behavior: smooth;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Scrollbar Styling */
|
|
41
|
+
.scroll-container::-webkit-scrollbar {
|
|
42
|
+
width: 6px;
|
|
43
|
+
}
|
|
44
|
+
.scroll-container::-webkit-scrollbar-track {
|
|
45
|
+
background: transparent;
|
|
46
|
+
}
|
|
47
|
+
.scroll-container::-webkit-scrollbar-thumb {
|
|
48
|
+
background: var(--md-sys-color-outline-variant);
|
|
49
|
+
border-radius: 10px;
|
|
50
|
+
}
|
|
51
|
+
`;
|
|
52
|
+
}
|
|
53
|
+
updated(e) {
|
|
54
|
+
super.updated(e), this.scrollToBottom();
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Imperatively scroll to the most recent message.
|
|
58
|
+
*/
|
|
59
|
+
scrollToBottom() {
|
|
60
|
+
this._container && (this._container.scrollTop = this._container.scrollHeight);
|
|
61
|
+
}
|
|
62
|
+
render() {
|
|
63
|
+
return r`
|
|
64
|
+
<div class="scroll-container">
|
|
65
|
+
<slot @slotchange=${this.scrollToBottom}></slot>
|
|
66
|
+
</div>
|
|
67
|
+
`;
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
e([a(".scroll-container")], o.prototype, "_container", void 0), o = e([i("ui-chat-list")], o);
|
|
71
|
+
export { o as UiChatList };
|
|
@@ -77,11 +77,15 @@ var o = class extends t {
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
.preview-panel {
|
|
80
|
-
display:
|
|
80
|
+
display: block; /* Keep in DOM for script access */
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
.preview-panel
|
|
84
|
-
|
|
83
|
+
:host([mode='code']) .preview-panel {
|
|
84
|
+
position: absolute;
|
|
85
|
+
visibility: hidden;
|
|
86
|
+
pointer-events: none;
|
|
87
|
+
height: 0;
|
|
88
|
+
overflow: hidden;
|
|
85
89
|
}
|
|
86
90
|
|
|
87
91
|
.code-panel {
|
|
@@ -98,7 +102,7 @@ var o = class extends t {
|
|
|
98
102
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
99
103
|
}
|
|
100
104
|
|
|
101
|
-
.code-panel
|
|
105
|
+
:host([mode='code']) .code-panel {
|
|
102
106
|
display: block;
|
|
103
107
|
}
|
|
104
108
|
`;
|
|
@@ -126,16 +130,17 @@ var o = class extends t {
|
|
|
126
130
|
</div>
|
|
127
131
|
|
|
128
132
|
<div class="content-area">
|
|
129
|
-
<div class="preview-panel
|
|
133
|
+
<div class="preview-panel">
|
|
130
134
|
<slot></slot>
|
|
131
135
|
</div>
|
|
132
136
|
|
|
133
|
-
<pre
|
|
134
|
-
class="code-panel ${this.mode === "code" ? "active" : ""}"
|
|
135
|
-
><code><slot name="code"></slot></code></pre>
|
|
137
|
+
<pre class="code-panel"><code><slot name="code"></slot></code></pre>
|
|
136
138
|
</div>
|
|
137
139
|
`;
|
|
138
140
|
}
|
|
139
141
|
};
|
|
140
|
-
e([a({ type: String })], o.prototype, "title", void 0), e([a({ type: String })], o.prototype, "description", void 0), e([a({
|
|
142
|
+
e([a({ type: String })], o.prototype, "title", void 0), e([a({ type: String })], o.prototype, "description", void 0), e([a({
|
|
143
|
+
type: String,
|
|
144
|
+
reflect: !0
|
|
145
|
+
})], o.prototype, "mode", void 0), o = e([i("ui-showcase-card")], o);
|
|
141
146
|
export { o as UiShowcaseCard };
|
|
@@ -53,8 +53,7 @@ var c = class extends r {
|
|
|
53
53
|
`;
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
|
-
|
|
57
|
-
let { state: e, transcript: t, partialTranscript: n, analyserNode: r } = this._context, i = e === "recording", o = e === "processing" || e === "connecting";
|
|
56
|
+
let { state: e = "idle", transcript: t = "", partialTranscript: n = "", analyserNode: r = void 0 } = this._context || {}, i = e === "recording", o = e === "processing" || e === "connecting";
|
|
58
57
|
return a`
|
|
59
58
|
${!i && !o && !(t || n) ? a`<span class="placeholder">${this.placeholder}</span>` : a`<span class="transcript">${n || t}</span>`}
|
|
60
59
|
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/decorate.js";
|
|
2
|
+
import "../atoms/ui-typing-dot.js";
|
|
3
|
+
import { LitElement as t, css as n, html as r } from "lit";
|
|
4
|
+
import { customElement as i } from "lit/decorators.js";
|
|
5
|
+
/**
|
|
6
|
+
* Copyright 2026 Google LLC
|
|
7
|
+
*
|
|
8
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
9
|
+
* you may not use this file except in compliance with the License.
|
|
10
|
+
* You may obtain a copy of the License at
|
|
11
|
+
*
|
|
12
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
13
|
+
*
|
|
14
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
15
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
16
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
17
|
+
* See the License for the specific language governing permissions and
|
|
18
|
+
* limitations under the License.
|
|
19
|
+
*/
|
|
20
|
+
var a = class extends t {
|
|
21
|
+
static {
|
|
22
|
+
this.styles = n`
|
|
23
|
+
:host {
|
|
24
|
+
display: inline-flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
gap: 4px;
|
|
27
|
+
padding: 8px 12px;
|
|
28
|
+
background: var(--md-sys-color-surface-container-low);
|
|
29
|
+
border-radius: 12px;
|
|
30
|
+
border-bottom-left-radius: 4px;
|
|
31
|
+
}
|
|
32
|
+
`;
|
|
33
|
+
}
|
|
34
|
+
render() {
|
|
35
|
+
return r`
|
|
36
|
+
<ui-typing-dot delay="0s"></ui-typing-dot>
|
|
37
|
+
<ui-typing-dot delay="0.2s"></ui-typing-dot>
|
|
38
|
+
<ui-typing-dot delay="0.4s"></ui-typing-dot>
|
|
39
|
+
`;
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
a = e([i("ui-typing-indicator")], a);
|
|
43
|
+
export { a as UiTypingIndicator };
|
package/dist/index.js
CHANGED
|
@@ -9,22 +9,27 @@ import { speechContext as s } from "./utils/speech-context.js";
|
|
|
9
9
|
import { UiSpeechRecordButton as c } from "./components/atoms/ui-speech-record-button.js";
|
|
10
10
|
import { UiSpeechCancelButton as l } from "./components/atoms/ui-speech-cancel-button.js";
|
|
11
11
|
import { UiShimmeringText as u } from "./components/atoms/ui-shimmering-text.js";
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
12
|
+
import { UiMessageBubble as d } from "./components/atoms/ui-message-bubble.js";
|
|
13
|
+
import { UiTypingDot as f } from "./components/atoms/ui-typing-dot.js";
|
|
14
|
+
import { applyCanvasEdgeFade as p, createAudioAnalyser as m, createMockAnalyser as h, generateRandomAudioData as g, getNormalizedFrequencyData as _ } from "./utils/audio-utils.js";
|
|
15
|
+
import { UiWaveform as v } from "./components/molecules/ui-waveform.js";
|
|
16
|
+
import { UiLiveWaveform as y } from "./components/molecules/ui-live-waveform.js";
|
|
17
|
+
import { UiScrollingWaveform as b } from "./components/molecules/ui-scrolling-waveform.js";
|
|
18
|
+
import { UiSpectrumVisualizer as x } from "./components/molecules/ui-spectrum-visualizer.js";
|
|
19
|
+
import { UiMicSelector as S } from "./components/molecules/ui-mic-selector.js";
|
|
20
|
+
import { UiVoicePicker as C } from "./components/molecules/ui-voice-picker.js";
|
|
21
|
+
import { UiSpeechPreview as w } from "./components/molecules/ui-speech-preview.js";
|
|
22
|
+
import { UiOrb as T } from "./components/molecules/ui-orb.js";
|
|
23
|
+
import { Ui3dFlip as E } from "./components/molecules/ui-3d-flip.js";
|
|
24
|
+
import { UiPlaylist as D } from "./components/molecules/ui-playlist.js";
|
|
25
|
+
import { UiShowcaseCard as O } from "./components/molecules/ui-showcase-card.js";
|
|
26
|
+
import { UiVoiceButton as k } from "./components/molecules/ui-voice-button.js";
|
|
27
|
+
import { ScreamVoiceButton as A } from "./components/molecules/scream-voice-button.js";
|
|
28
|
+
import { UiTypingIndicator as j } from "./components/molecules/ui-typing-indicator.js";
|
|
29
|
+
import { UiChatItem as M } from "./components/molecules/ui-chat-item.js";
|
|
30
|
+
import { UiChatList as N } from "./components/molecules/ui-chat-list.js";
|
|
31
|
+
import { UiAudioProvider as P } from "./components/providers/ui-audio-provider.js";
|
|
32
|
+
import { UiAudioPlayer as F } from "./components/organisms/ui-audio-player.js";
|
|
33
|
+
import { UiSpeechProvider as I } from "./components/providers/ui-speech-provider.js";
|
|
29
34
|
import "@material/web/icon/icon.js";
|
|
30
|
-
export {
|
|
35
|
+
export { A as ScreamVoiceButton, E as Ui3dFlip, n as UiAudioNextButton, t as UiAudioPlayButton, F as UiAudioPlayer, r as UiAudioPrevButton, i as UiAudioProgressSlider, P as UiAudioProvider, a as UiAudioTimeDisplay, o as UiAudioVolumeSlider, M as UiChatItem, N as UiChatList, y as UiLiveWaveform, d as UiMessageBubble, S as UiMicSelector, T as UiOrb, D as UiPlaylist, b as UiScrollingWaveform, u as UiShimmeringText, O as UiShowcaseCard, x as UiSpectrumVisualizer, l as UiSpeechCancelButton, w as UiSpeechPreview, I as UiSpeechProvider, c as UiSpeechRecordButton, f as UiTypingDot, j as UiTypingIndicator, k as UiVoiceButton, C as UiVoicePicker, v as UiWaveform, p as applyCanvasEdgeFade, e as audioPlayerContext, m as createAudioAnalyser, h as createMockAnalyser, g as generateRandomAudioData, _ as getNormalizedFrequencyData, s as speechContext };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`@material/web/icon/icon.js`),require(`lit`),require(`lit/decorators.js`),require(`@material/web/iconbutton/filled-icon-button.js`),require(`@material/web/progress/circular-progress.js`),require(`@material/web/iconbutton/icon-button.js`),require(`@material/web/slider/slider.js`),require(`@material/web/menu/menu.js`),require(`@material/web/menu/menu-item.js`),require(`@material/web/divider/divider.js`),require(`@material/web/button/text-button.js`),require(`@material/web/button/filled-tonal-button.js`),require(`@material/web/button/outlined-button.js`),require(`@material/web/textfield/outlined-text-field.js`),require(`three`),require(`@material/web/list/list.js`),require(`@material/web/list/list-item.js`),require(`lit/directives/class-map.js`),require(`@material/web/button/filled-button.js`)):typeof define==`function`&&define.amd?define([`exports`,`@material/web/icon/icon.js`,`lit`,`lit/decorators.js`,`@material/web/iconbutton/filled-icon-button.js`,`@material/web/progress/circular-progress.js`,`@material/web/iconbutton/icon-button.js`,`@material/web/slider/slider.js`,`@material/web/menu/menu.js`,`@material/web/menu/menu-item.js`,`@material/web/divider/divider.js`,`@material/web/button/text-button.js`,`@material/web/button/filled-tonal-button.js`,`@material/web/button/outlined-button.js`,`@material/web/textfield/outlined-text-field.js`,`three`,`@material/web/list/list.js`,`@material/web/list/list-item.js`,`lit/directives/class-map.js`,`@material/web/button/filled-button.js`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ScreamAudioUI={},e.MaterialWeb,e.Lit,e.Lit,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.THREE,e.MaterialWeb,e.MaterialWeb,e.Lit,e.MaterialWeb))})(this,function(e,t,n,r,i,a,o,s,c,l,u,ee,te,ne,re,d,ie,ae,f,oe){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`@material/web/icon/icon.js`),require(`lit`),require(`lit/decorators.js`),require(`@material/web/iconbutton/filled-icon-button.js`),require(`@material/web/progress/circular-progress.js`),require(`@material/web/iconbutton/icon-button.js`),require(`@material/web/slider/slider.js`),require(`@material/web/menu/menu.js`),require(`@material/web/menu/menu-item.js`),require(`@material/web/divider/divider.js`),require(`@material/web/button/text-button.js`),require(`@material/web/button/filled-tonal-button.js`),require(`@material/web/button/outlined-button.js`),require(`@material/web/textfield/outlined-text-field.js`),require(`three`),require(`@material/web/list/list.js`),require(`@material/web/list/list-item.js`),require(`lit/directives/class-map.js`),require(`@material/web/button/filled-button.js`)):typeof define==`function`&&define.amd?define([`exports`,`@material/web/icon/icon.js`,`lit`,`lit/decorators.js`,`@material/web/iconbutton/filled-icon-button.js`,`@material/web/progress/circular-progress.js`,`@material/web/iconbutton/icon-button.js`,`@material/web/slider/slider.js`,`@material/web/menu/menu.js`,`@material/web/menu/menu-item.js`,`@material/web/divider/divider.js`,`@material/web/button/text-button.js`,`@material/web/button/filled-tonal-button.js`,`@material/web/button/outlined-button.js`,`@material/web/textfield/outlined-text-field.js`,`three`,`@material/web/list/list.js`,`@material/web/list/list-item.js`,`lit/directives/class-map.js`,`@material/web/button/filled-button.js`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ScreamAudioUI={},e.MaterialWeb,e.Lit,e.Lit,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.MaterialWeb,e.THREE,e.MaterialWeb,e.MaterialWeb,e.Lit,e.MaterialWeb))})(this,function(e,t,n,r,i,a,o,s,c,l,u,ee,te,ne,re,d,ie,ae,f,oe){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var se=Object.create,p=Object.defineProperty,ce=Object.getOwnPropertyDescriptor,le=Object.getOwnPropertyNames,ue=Object.getPrototypeOf,de=Object.prototype.hasOwnProperty,fe=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=le(t),a=0,o=i.length,s;a<o;a++)s=i[a],!de.call(e,s)&&s!==n&&p(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=ce(t,s))||r.enumerable});return e};d=((e,t,n)=>(n=e==null?{}:se(ue(e)),fe(t||!e||!e.__esModule?p(n,`default`,{value:e,enumerable:!0}):n,e)))(d);var m=class extends Event{constructor(e,t,n,r){super(`context-request`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t,this.callback=n,this.subscribe=r??!1}};function pe(e){return e}var me=class{constructor(e,t,n,r){if(this.subscribe=!1,this.provided=!1,this.value=void 0,this.t=(e,t)=>{this.unsubscribe&&(this.unsubscribe!==t&&(this.provided=!1,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=e,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=!0,this.callback&&this.callback(e,t)),this.unsubscribe=t},this.host=e,t.context!==void 0){let e=t;this.context=e.context,this.callback=e.callback,this.subscribe=e.subscribe??!1}else this.context=t,this.callback=n,this.subscribe=r??!1;this.host.addController(this)}hostConnected(){this.dispatchRequest()}hostDisconnected(){this.unsubscribe&&=(this.unsubscribe(),void 0)}dispatchRequest(){this.host.dispatchEvent(new m(this.context,this.host,this.t,this.subscribe))}},he=class{get value(){return this.o}set value(e){this.setValue(e)}setValue(e,t=!1){let n=t||!Object.is(e,this.o);this.o=e,n&&this.updateObservers()}constructor(e){this.subscriptions=new Map,this.updateObservers=()=>{for(let[e,{disposer:t}]of this.subscriptions)e(this.o,t)},e!==void 0&&(this.value=e)}addCallback(e,t,n){if(!n)return void e(this.value);this.subscriptions.has(e)||this.subscriptions.set(e,{disposer:()=>{this.subscriptions.delete(e)},consumerHost:t});let{disposer:r}=this.subscriptions.get(e);e(this.value,r)}clearCallbacks(){this.subscriptions.clear()}},ge=class extends Event{constructor(e,t){super(`context-provider`,{bubbles:!0,composed:!0}),this.context=e,this.contextTarget=t}},h=class extends he{constructor(e,t,n){super(t.context===void 0?n:t.initialValue),this.onContextRequest=e=>{if(e.context!==this.context)return;let t=e.contextTarget??e.composedPath()[0];t!==this.host&&(e.stopPropagation(),this.addCallback(e.callback,t,e.subscribe))},this.onProviderRequest=e=>{if(e.context!==this.context||(e.contextTarget??e.composedPath()[0])===this.host)return;let t=new Set;for(let[e,{consumerHost:n}]of this.subscriptions)t.has(e)||(t.add(e),n.dispatchEvent(new m(this.context,n,e,!0)));e.stopPropagation()},this.host=e,t.context===void 0?this.context=t:this.context=t.context,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener(`context-request`,this.onContextRequest),this.host.addEventListener(`context-provider`,this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new ge(this.context,this.host))}};function g({context:e}){return(t,n)=>{let r=new WeakMap;if(typeof n==`object`)return{get(){return t.get.call(this)},set(e){return r.get(this).setValue(e),t.set.call(this,e)},init(t){return r.set(this,new h(this,{context:e,initialValue:t})),t}};{t.constructor.addInitializer((t=>{r.set(t,new h(t,{context:e}))}));let i=Object.getOwnPropertyDescriptor(t,n),a;if(i===void 0){let e=new WeakMap;a={get(){return e.get(this)},set(t){r.get(this).setValue(t),e.set(this,t)},configurable:!0,enumerable:!0}}else{let e=i.set;a={...i,set(t){r.get(this).setValue(t),e?.call(this,t)}}}Object.defineProperty(t,n,a);return}}}function _({context:e,subscribe:t}){return(n,r)=>{typeof r==`object`?r.addInitializer((function(){new me(this,{context:e,callback:e=>{n.set.call(this,e)},subscribe:t})})):n.constructor.addInitializer((n=>{new me(n,{context:e,callback:e=>{n[r]=e},subscribe:t})}))}}let v=pe(`ui-audio-player-context`);function y(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var b=class extends n.LitElement{static{this.styles=n.css`
|
|
2
2
|
:host {
|
|
3
3
|
display: inline-flex;
|
|
4
4
|
position: relative;
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
<md-icon>${e?`pause`:`play_arrow`}</md-icon>
|
|
58
58
|
</md-filled-icon-button>
|
|
59
59
|
${t&&e?n.html`<md-circular-progress indeterminate></md-circular-progress>`:``}
|
|
60
|
-
`}_handleClick(){this.playerState&&this.playerState.togglePlay()}};
|
|
60
|
+
`}_handleClick(){this.playerState&&this.playerState.togglePlay()}};y([_({context:v,subscribe:!0}),(0,r.property)({attribute:!1})],b.prototype,`playerState`,void 0),b=y([(0,r.customElement)(`ui-audio-play-button`)],b);var x=class extends n.LitElement{static{this.styles=n.css`
|
|
61
61
|
:host {
|
|
62
62
|
display: inline-block;
|
|
63
63
|
}
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
>
|
|
69
69
|
<md-icon>skip_next</md-icon>
|
|
70
70
|
</md-icon-button>
|
|
71
|
-
`}};
|
|
71
|
+
`}};y([_({context:v,subscribe:!0})],x.prototype,`playerState`,void 0),x=y([(0,r.customElement)(`ui-audio-next-button`)],x);var S=class extends n.LitElement{static{this.styles=n.css`
|
|
72
72
|
:host {
|
|
73
73
|
display: inline-block;
|
|
74
74
|
}
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
>
|
|
80
80
|
<md-icon>skip_previous</md-icon>
|
|
81
81
|
</md-icon-button>
|
|
82
|
-
`}};
|
|
82
|
+
`}};y([_({context:v,subscribe:!0})],S.prototype,`playerState`,void 0),S=y([(0,r.customElement)(`ui-audio-prev-button`)],S);var C=class extends n.LitElement{constructor(...e){super(...e),this._isDragging=!1,this._dragValue=0}static{this.styles=n.css`
|
|
83
83
|
:host {
|
|
84
84
|
display: flex;
|
|
85
85
|
width: 100%;
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
@input="${this._handleInput}"
|
|
103
103
|
@change="${this._handleChange}"
|
|
104
104
|
></md-slider>
|
|
105
|
-
`}_handleInput(e){this._isDragging=!0,this._dragValue=e.target.value}_handleChange(e){this._dragValue=e.target.value,this.playerState&&this.playerState.seek(this._dragValue),this._isDragging=!1}};
|
|
105
|
+
`}_handleInput(e){this._isDragging=!0,this._dragValue=e.target.value}_handleChange(e){this._dragValue=e.target.value,this.playerState&&this.playerState.seek(this._dragValue),this._isDragging=!1}};y([_({context:v,subscribe:!0}),(0,r.property)({attribute:!1})],C.prototype,`playerState`,void 0),C=y([(0,r.customElement)(`ui-audio-progress-slider`)],C);var w=class extends n.LitElement{constructor(...e){super(...e),this.format=`combined`,this.separator=` / `,this.compact=!1}static{this.styles=n.css`
|
|
106
106
|
:host {
|
|
107
107
|
display: inline-block;
|
|
108
108
|
font-variant-numeric: tabular-nums;
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
color: var(--md-sys-color-on-surface-variant, #444);
|
|
111
111
|
font-family: inherit;
|
|
112
112
|
}
|
|
113
|
-
`}render(){let e=this.playerState?.currentTime||0,t=this.playerState?.duration||0;if(this.format===`elapsed`)return n.html`${this._formatTime(e)}`;if(this.format===`remaining`){let r=Math.max(0,t-e);return n.html`-${this._formatTime(r)}`}else return n.html`${this._formatTime(e)}${this.separator}${t?this._formatTime(t):`--:--`}`}_formatTime(e){if(!e||isNaN(e))return this.compact,`0:00`;let t=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),i=``;return t>0?i+=``+t+`:`+(n<10?`0`:``):this.compact,i+=``+n+`:`+(r<10?`0`:``),i+=``+r,i}};
|
|
113
|
+
`}render(){let e=this.playerState?.currentTime||0,t=this.playerState?.duration||0;if(this.format===`elapsed`)return n.html`${this._formatTime(e)}`;if(this.format===`remaining`){let r=Math.max(0,t-e);return n.html`-${this._formatTime(r)}`}else return n.html`${this._formatTime(e)}${this.separator}${t?this._formatTime(t):`--:--`}`}_formatTime(e){if(!e||isNaN(e))return this.compact,`0:00`;let t=Math.floor(e/3600),n=Math.floor(e%3600/60),r=Math.floor(e%60),i=``;return t>0?i+=``+t+`:`+(n<10?`0`:``):this.compact,i+=``+n+`:`+(r<10?`0`:``),i+=``+r,i}};y([_({context:v,subscribe:!0}),(0,r.property)({attribute:!1})],w.prototype,`playerState`,void 0),y([(0,r.property)({type:String})],w.prototype,`format`,void 0),y([(0,r.property)({type:String})],w.prototype,`separator`,void 0),y([(0,r.property)({type:Boolean})],w.prototype,`compact`,void 0),w=y([(0,r.customElement)(`ui-audio-time-display`)],w);var T=class extends n.LitElement{static{this.styles=n.css`
|
|
114
114
|
:host {
|
|
115
115
|
display: flex;
|
|
116
116
|
align-items: center;
|
|
@@ -145,7 +145,7 @@
|
|
|
145
145
|
?disabled="${!this.playerState?.src}"
|
|
146
146
|
@input="${this._handleInput}"
|
|
147
147
|
></md-slider>
|
|
148
|
-
`}_handleInput(e){let t=e.target;this.playerState&&this.playerState.setVolume(t.value)}_toggleMute(){this.playerState&&this.playerState.toggleMute()}};
|
|
148
|
+
`}_handleInput(e){let t=e.target;this.playerState&&this.playerState.setVolume(t.value)}_toggleMute(){this.playerState&&this.playerState.toggleMute()}};y([_({context:v,subscribe:!0}),(0,r.property)({attribute:!1})],T.prototype,`playerState`,void 0),T=y([(0,r.customElement)(`ui-audio-volume-slider`)],T);let E=pe(`ui-speech-context`);var D=class extends n.LitElement{constructor(...e){super(...e),this.size=`default`}static{this.styles=n.css`
|
|
149
149
|
:host {
|
|
150
150
|
display: inline-block;
|
|
151
151
|
}
|
|
@@ -191,15 +191,15 @@
|
|
|
191
191
|
opacity: 1;
|
|
192
192
|
}
|
|
193
193
|
}
|
|
194
|
-
`}render(){
|
|
194
|
+
`}render(){let e=this._context?.state||`idle`,t=e===`recording`,r=e===`processing`||e===`connecting`,i=`mic`;return t&&(i=`stop`),r&&(i=`hourglass_empty`),e===`success`&&(i=`check`),e===`error`&&(i=`error`),n.html`
|
|
195
195
|
<md-filled-icon-button
|
|
196
196
|
class="${e}"
|
|
197
|
-
?disabled=${r}
|
|
197
|
+
?disabled=${r||!this._context}
|
|
198
198
|
@click=${this._handleClick}
|
|
199
199
|
>
|
|
200
200
|
<md-icon>${i}</md-icon>
|
|
201
201
|
</md-filled-icon-button>
|
|
202
|
-
`}_handleClick(){this._context&&(this._context.state===`idle`?this._context.start():this._context.state===`recording`&&this._context.stop())}};
|
|
202
|
+
`}_handleClick(){this._context&&(this._context.state===`idle`?this._context.start():this._context.state===`recording`&&this._context.stop())}};y([_({context:E,subscribe:!0})],D.prototype,`_context`,void 0),y([(0,r.property)({type:String})],D.prototype,`size`,void 0),D=y([(0,r.customElement)(`ui-speech-record-button`)],D);var O=class extends n.LitElement{static{this.styles=n.css`
|
|
203
203
|
:host {
|
|
204
204
|
display: inline-block;
|
|
205
205
|
opacity: 0;
|
|
@@ -223,7 +223,7 @@
|
|
|
223
223
|
<md-icon-button @click=${this._handleClick}>
|
|
224
224
|
<md-icon>close</md-icon>
|
|
225
225
|
</md-icon-button>
|
|
226
|
-
`):n.html``}_handleClick(){this._context?.cancel()}};
|
|
226
|
+
`):n.html``}_handleClick(){this._context?.cancel()}};y([_({context:E,subscribe:!0})],O.prototype,`_context`,void 0),O=y([(0,r.customElement)(`ui-speech-cancel-button`)],O);var k=class extends n.LitElement{constructor(...e){super(...e),this.text=``,this.duration=2,this.delay=0,this.repeat=!0,this.repeatDelay=.5,this.startOnView=!0,this.once=!1,this.spread=2,this._isInView=!1}static{this.styles=n.css`
|
|
227
227
|
:host {
|
|
228
228
|
display: inline-block;
|
|
229
229
|
font-family: inherit;
|
|
@@ -281,7 +281,88 @@
|
|
|
281
281
|
<span class="${e?`active`:``}" style="${o}">
|
|
282
282
|
${this.text}
|
|
283
283
|
</span>
|
|
284
|
-
`}};
|
|
284
|
+
`}};y([(0,r.property)({type:String})],k.prototype,`text`,void 0),y([(0,r.property)({type:Number})],k.prototype,`duration`,void 0),y([(0,r.property)({type:Number})],k.prototype,`delay`,void 0),y([(0,r.property)({type:Boolean})],k.prototype,`repeat`,void 0),y([(0,r.property)({type:Number})],k.prototype,`repeatDelay`,void 0),y([(0,r.property)({type:Boolean})],k.prototype,`startOnView`,void 0),y([(0,r.property)({type:Boolean})],k.prototype,`once`,void 0),y([(0,r.property)({type:Number})],k.prototype,`spread`,void 0),y([(0,r.property)({type:String})],k.prototype,`color`,void 0),y([(0,r.property)({type:String})],k.prototype,`shimmerColor`,void 0),y([(0,r.state)()],k.prototype,`_isInView`,void 0),k=y([(0,r.customElement)(`ui-shimmering-text`)],k);var A=class extends n.LitElement{constructor(...e){super(...e),this.variant=`contained`,this.direction=`inbound`}static{this.styles=n.css`
|
|
285
|
+
:host {
|
|
286
|
+
display: inline-flex;
|
|
287
|
+
max-width: 85%;
|
|
288
|
+
font-family: inherit;
|
|
289
|
+
color-scheme: light dark;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.bubble {
|
|
293
|
+
display: flex;
|
|
294
|
+
flex-direction: column;
|
|
295
|
+
gap: 8px;
|
|
296
|
+
padding: 14px 18px;
|
|
297
|
+
font-size: 0.95rem;
|
|
298
|
+
line-height: 1.5;
|
|
299
|
+
box-sizing: border-box;
|
|
300
|
+
transition: background-color 0.2s, color 0.2s;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
/* Variant: Contained */
|
|
304
|
+
:host([variant='contained']) .bubble {
|
|
305
|
+
border-radius: 16px;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
:host([variant='contained'][direction='inbound']) .bubble {
|
|
309
|
+
background: var(
|
|
310
|
+
--ui-message-bubble-inbound-bg,
|
|
311
|
+
var(--md-sys-color-surface-container-high, #e2e2e2)
|
|
312
|
+
);
|
|
313
|
+
color: var(--md-sys-color-on-surface);
|
|
314
|
+
border-bottom-left-radius: 4px;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
:host([variant='contained'][direction='outbound']) .bubble {
|
|
318
|
+
background: var(
|
|
319
|
+
--ui-message-bubble-outbound-bg,
|
|
320
|
+
var(--md-sys-color-primary, #0066cc)
|
|
321
|
+
);
|
|
322
|
+
color: var(--md-sys-color-on-primary, #ffffff);
|
|
323
|
+
border-bottom-right-radius: 4px;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
/* Variant: Flat */
|
|
327
|
+
:host([variant='flat']) .bubble {
|
|
328
|
+
padding: 8px 0;
|
|
329
|
+
background: transparent;
|
|
330
|
+
color: var(--md-sys-color-on-surface);
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
:host([variant='flat'][direction='outbound']) .bubble {
|
|
334
|
+
padding: 12px 16px;
|
|
335
|
+
background: var(--md-sys-color-surface-container-highest);
|
|
336
|
+
border-radius: 12px;
|
|
337
|
+
}
|
|
338
|
+
`}render(){return n.html`
|
|
339
|
+
<div class="bubble">
|
|
340
|
+
<slot></slot>
|
|
341
|
+
</div>
|
|
342
|
+
`}};y([(0,r.property)({type:String,reflect:!0})],A.prototype,`variant`,void 0),y([(0,r.property)({type:String,reflect:!0})],A.prototype,`direction`,void 0),A=y([(0,r.customElement)(`ui-message-bubble`)],A);var j=class extends n.LitElement{constructor(...e){super(...e),this.delay=`0s`}static{this.styles=n.css`
|
|
343
|
+
:host {
|
|
344
|
+
display: inline-block;
|
|
345
|
+
}
|
|
346
|
+
.dot {
|
|
347
|
+
width: 6px;
|
|
348
|
+
height: 6px;
|
|
349
|
+
border-radius: 50%;
|
|
350
|
+
background: var(--ui-typing-dot-color, currentColor);
|
|
351
|
+
animation: pulse 1.2s infinite ease-in-out;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
@keyframes pulse {
|
|
355
|
+
0%,
|
|
356
|
+
100% {
|
|
357
|
+
transform: scale(0.8);
|
|
358
|
+
opacity: 0.4;
|
|
359
|
+
}
|
|
360
|
+
50% {
|
|
361
|
+
transform: scale(1.2);
|
|
362
|
+
opacity: 1;
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
`}render(){return n.html`<div class="dot" style="animation-delay: ${this.delay}"></div>`}};y([(0,r.property)({type:String})],j.prototype,`delay`,void 0),j=y([(0,r.customElement)(`ui-typing-dot`)],j);function M(){return{fftSize:256,frequencyBinCount:128,getByteFrequencyData:e=>{let t=performance.now()/1e3;for(let n=0;n<e.length;n++){let r=Math.sin(t*2+n*.1)*50+Math.sin(t*5+n*.2)*30+100;e[n]=Math.max(0,Math.min(255,r))}}}}function _e(e,t={}){let n=new(window.AudioContext||window.webkitAudioContext),r=n.createMediaStreamSource(e),i=n.createAnalyser();return t.fftSize!==void 0&&(i.fftSize=t.fftSize),t.smoothingTimeConstant!==void 0&&(i.smoothingTimeConstant=t.smoothingTimeConstant),t.minDecibels!==void 0&&(i.minDecibels=t.minDecibels),t.maxDecibels!==void 0&&(i.maxDecibels=t.maxDecibels),r.connect(i),{analyser:i,audioContext:n,cleanup:()=>{r.disconnect(),n.state!==`closed`&&n.close()}}}function N(e,t){e.getByteFrequencyData(t);let n=[];for(let e=0;e<t.length;e++)n.push(t[e]/255);return n}function ve(e,t=.5){let n=[];for(let r=0;r<e;r++)n.push(Math.random()*t);return n}function P(e,t,n,r){if(r<=0||t<=0)return;let i=e.createLinearGradient(0,0,t,0),a=Math.min(.2,r/t);i.addColorStop(0,`rgba(0,0,0,0)`),i.addColorStop(a,`rgba(0,0,0,1)`),i.addColorStop(1-a,`rgba(0,0,0,1)`),i.addColorStop(1,`rgba(0,0,0,0)`),e.globalCompositeOperation=`destination-in`,e.fillStyle=i,e.fillRect(0,0,t,n),e.globalCompositeOperation=`source-over`}var F=class extends n.LitElement{constructor(...e){super(...e),this.data=[],this.barWidth=4,this.barHeight=4,this.barGap=2,this.barRadius=2,this.fadeEdges=!0,this.fadeWidth=24,this.height=128}static{this.styles=n.css`
|
|
285
366
|
:host {
|
|
286
367
|
display: block;
|
|
287
368
|
width: 100%;
|
|
@@ -302,7 +383,7 @@
|
|
|
302
383
|
<div class="container" style="height: ${this.height}px;">
|
|
303
384
|
<canvas></canvas>
|
|
304
385
|
</div>
|
|
305
|
-
`}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container)}updated(e){super.updated(e),(e.has(`data`)||e.has(`barColor`))&&this._renderWaveform()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&(n.scale(t,t),this._renderWaveform())}_renderWaveform(){if(!this._canvas)return;let e=this._canvas.getContext(`2d`);if(!e)return;let t=this._canvas.getBoundingClientRect();e.clearRect(0,0,t.width,t.height);let n=getComputedStyle(this),r=this.barColor;if(!r){let e=n.getPropertyValue(`--md-sys-color-primary`).trim(),t=n.getPropertyValue(`color`).trim();r=e||t||`#0066cc`}let i=Math.floor(t.width/(this.barWidth+this.barGap)),a=t.height/2;for(let n=0;n<i;n++){let o=Math.floor(n/i*this.data.length),s=this.data[o]||0,c=Math.max(this.barHeight,s*t.height*.8),l=n*(this.barWidth+this.barGap),u=a-c/2;e.fillStyle=r,e.globalAlpha=.3+s*.7,this.barRadius>0?(e.beginPath(),e.roundRect(l,u,this.barWidth,c,this.barRadius),e.fill()):e.fillRect(l,u,this.barWidth,c)}this.fadeEdges&&
|
|
386
|
+
`}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container)}updated(e){super.updated(e),(e.has(`data`)||e.has(`barColor`))&&this._renderWaveform()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&(n.scale(t,t),this._renderWaveform())}_renderWaveform(){if(!this._canvas)return;let e=this._canvas.getContext(`2d`);if(!e)return;let t=this._canvas.getBoundingClientRect();e.clearRect(0,0,t.width,t.height);let n=getComputedStyle(this),r=this.barColor;if(!r){let e=n.getPropertyValue(`--md-sys-color-primary`).trim(),t=n.getPropertyValue(`color`).trim();r=e||t||`#0066cc`}let i=Math.floor(t.width/(this.barWidth+this.barGap)),a=t.height/2;for(let n=0;n<i;n++){let o=Math.floor(n/i*this.data.length),s=this.data[o]||0,c=Math.max(this.barHeight,s*t.height*.8),l=n*(this.barWidth+this.barGap),u=a-c/2;e.fillStyle=r,e.globalAlpha=.3+s*.7,this.barRadius>0?(e.beginPath(),e.roundRect(l,u,this.barWidth,c,this.barRadius),e.fill()):e.fillRect(l,u,this.barWidth,c)}this.fadeEdges&&P(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};y([(0,r.property)({type:Array})],F.prototype,`data`,void 0),y([(0,r.property)({type:Number})],F.prototype,`barWidth`,void 0),y([(0,r.property)({type:Number})],F.prototype,`barHeight`,void 0),y([(0,r.property)({type:Number})],F.prototype,`barGap`,void 0),y([(0,r.property)({type:Number})],F.prototype,`barRadius`,void 0),y([(0,r.property)({type:String})],F.prototype,`barColor`,void 0),y([(0,r.property)({type:Boolean})],F.prototype,`fadeEdges`,void 0),y([(0,r.property)({type:Number})],F.prototype,`fadeWidth`,void 0),y([(0,r.property)({type:Number})],F.prototype,`height`,void 0),y([(0,r.query)(`canvas`)],F.prototype,`_canvas`,void 0),y([(0,r.query)(`.container`)],F.prototype,`_container`,void 0),F=y([(0,r.customElement)(`ui-waveform`)],F);var I=class extends n.LitElement{constructor(...e){super(...e),this.active=!1,this.processing=!1,this.barWidth=3,this.barHeight=4,this.barGap=1,this.barRadius=1.5,this.fadeEdges=!0,this.fadeWidth=24,this.height=64,this.sensitivity=1,this.updateRate=30,this._animationFrameId=0,this._lastUpdateTime=0,this._currentBars=[],this._processingTime=0,this._transitionProgress=0,this._lastActiveData=[]}static{this.styles=n.css`
|
|
306
387
|
:host {
|
|
307
388
|
display: block;
|
|
308
389
|
width: 100%;
|
|
@@ -323,7 +404,7 @@
|
|
|
323
404
|
<div class="container" style="height: ${this.height}px;">
|
|
324
405
|
<canvas></canvas>
|
|
325
406
|
</div>
|
|
326
|
-
`}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._themeObserver=new MutationObserver(()=>{this._renderFrame()}),this._themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`class`,`style`]}),this._startAnimationLoop()}updated(e){super.updated(e),e.has(`analyserNode`)&&this.analyserNode&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),e.has(`processing`)&&this.processing&&!this.active&&(this._processingTime=0,this._transitionProgress=0)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._themeObserver&&this._themeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t),this._renderFrame()}_startAnimationLoop(){let e=t=>{this._updateData(t),this._renderFrame(),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}_updateData(e){if(!this._canvas)return;let t=this._canvas.getBoundingClientRect(),n=Math.floor(t.width/(this.barWidth+this.barGap));if(this.active&&this.analyserNode&&this._dataArray){if(e-this._lastUpdateTime>this.updateRate){this._lastUpdateTime=e;let t=
|
|
407
|
+
`}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._themeObserver=new MutationObserver(()=>{this._renderFrame()}),this._themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`class`,`style`]}),this._startAnimationLoop()}updated(e){super.updated(e),e.has(`analyserNode`)&&this.analyserNode&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),e.has(`processing`)&&this.processing&&!this.active&&(this._processingTime=0,this._transitionProgress=0)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._themeObserver&&this._themeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t),this._renderFrame()}_startAnimationLoop(){let e=t=>{this._updateData(t),this._renderFrame(),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}_updateData(e){if(!this._canvas)return;let t=this._canvas.getBoundingClientRect(),n=Math.floor(t.width/(this.barWidth+this.barGap));if(this.active&&this.analyserNode&&this._dataArray){if(e-this._lastUpdateTime>this.updateRate){this._lastUpdateTime=e;let t=N(this.analyserNode,this._dataArray),r=Math.floor(t.length*.05),i=Math.floor(t.length*.4),a=t.slice(r,i),o=Math.floor(n/2),s=Array(n).fill(.05),c=a.length-1;for(let e=0;e<=o;e++){let t=e/o,r=a[Math.floor(t*c)]||0;t>.8&&(r*=1-(t-.8)*5);let i=Math.max(.05,Math.min(1,r*this.sensitivity)),l=o+e,u=o-e;l<n&&(s[l]=i),u>=0&&(s[u]=i)}this._currentBars=s,this._lastActiveData=[...s]}}else if(this.processing&&!this.active){this._processingTime+=.03,this._transitionProgress=Math.min(1,this._transitionProgress+.02);let e=Array(n).fill(.05),t=Math.floor(n/2);for(let r=0;r<n;r++){let n=(r-t)/t,i=1-Math.abs(n)*.4,a=Math.sin(this._processingTime*1.5+n*3)*.25,o=Math.sin(this._processingTime*.8-n*2)*.2,s=Math.cos(this._processingTime*2+n)*.15,c=(.2+(a+o+s))*i,l=c;if(this._lastActiveData.length>0&&this._transitionProgress<1){let e=Math.min(r,this._lastActiveData.length-1);l=(this._lastActiveData[e]||0)*(1-this._transitionProgress)+c*this._transitionProgress}e[r]=Math.max(.05,Math.min(1,l))}this._currentBars=e}else if(this._currentBars.length>0){let e=!0;for(let t=0;t<this._currentBars.length;t++)this._currentBars[t]=Math.max(.05,this._currentBars[t]*.85),this._currentBars[t]>.06&&(e=!1);e&&(this._currentBars=[])}}_renderFrame(){if(!this._canvas)return;let e=this._canvas.getContext(`2d`);if(!e)return;let t=this._canvas.getBoundingClientRect();e.clearRect(0,0,t.width,t.height);let n=getComputedStyle(this),r=this.barColor||`currentColor`;if(r.startsWith(`var(`)){let e=r.match(/var\(([^,)]+)/)?.[1].trim();if(e){let t=n.getPropertyValue(e).trim();t&&(r=t)}}(r===`currentColor`||!r)&&(r=n.getPropertyValue(`--md-sys-color-primary`).trim()||`#0066cc`);let i=this.barWidth+this.barGap,a=Math.floor(t.width/i),o=t.height/2;for(let n=0;n<a&&n<this._currentBars.length;n++){let a=this._currentBars[n]||.05,s=n*i,c=Math.max(this.barHeight,a*t.height*.8),l=o-c/2;e.fillStyle=r,e.globalAlpha=.4+a*.6,this.barRadius>0?(e.beginPath(),e.roundRect(s,l,this.barWidth,c,this.barRadius),e.fill()):e.fillRect(s,l,this.barWidth,c)}this.fadeEdges&&P(e,t.width,t.height,this.fadeWidth),e.globalAlpha=1}};y([(0,r.property)({type:Boolean})],I.prototype,`active`,void 0),y([(0,r.property)({type:Boolean})],I.prototype,`processing`,void 0),y([(0,r.property)({attribute:!1})],I.prototype,`analyserNode`,void 0),y([(0,r.property)({type:Number})],I.prototype,`barWidth`,void 0),y([(0,r.property)({type:Number})],I.prototype,`barHeight`,void 0),y([(0,r.property)({type:Number})],I.prototype,`barGap`,void 0),y([(0,r.property)({type:Number})],I.prototype,`barRadius`,void 0),y([(0,r.property)({type:String})],I.prototype,`barColor`,void 0),y([(0,r.property)({type:Boolean})],I.prototype,`fadeEdges`,void 0),y([(0,r.property)({type:Number})],I.prototype,`fadeWidth`,void 0),y([(0,r.property)({type:Number})],I.prototype,`height`,void 0),y([(0,r.property)({type:Number})],I.prototype,`sensitivity`,void 0),y([(0,r.property)({type:Number})],I.prototype,`updateRate`,void 0),y([(0,r.query)(`canvas`)],I.prototype,`_canvas`,void 0),y([(0,r.query)(`.container`)],I.prototype,`_container`,void 0),I=y([(0,r.customElement)(`ui-live-waveform`)],I);var L=class extends n.LitElement{constructor(...e){super(...e),this.speed=50,this.barCount=60,this.barWidth=4,this.barHeight=4,this.barGap=2,this.barRadius=2,this.fadeEdges=!0,this.fadeWidth=24,this.height=128,this.active=!0,this._animationFrameId=0,this._lastTime=0,this._bars=[],this._seed=Math.random(),this._dataIndex=0}static{this.styles=n.css`
|
|
327
408
|
:host {
|
|
328
409
|
display: block;
|
|
329
410
|
width: 100%;
|
|
@@ -345,7 +426,7 @@
|
|
|
345
426
|
<div class="container" style="height: ${this.height}px;">
|
|
346
427
|
<canvas></canvas>
|
|
347
428
|
</div>
|
|
348
|
-
`}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._canvas&&this._container&&this._populateInitialBars(),this._startAnimation()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t)}_seededRandom(e){let t=Math.sin(this._seed*1e4+e*137.5)*1e4;return t-Math.floor(t)}_populateInitialBars(){let e=this._container.getBoundingClientRect(),t=this.barWidth+this.barGap,n=e.width,r=0;for(this._bars=[];n>-t;)this._bars.push({x:n,height:.2+this._seededRandom(r++)*.6}),n-=t;this._bars.reverse()}_startAnimation(){this._lastTime=performance.now();let e=t=>{if(!this._canvas)return;let n=this._canvas.getContext(`2d`);if(!n)return;let r=this._lastTime?(t-this._lastTime)/1e3:0;this._lastTime=t;let i=this._canvas.getBoundingClientRect();n.clearRect(0,0,i.width,i.height);let a=this.barColor;a||=getComputedStyle(this).getPropertyValue(`--md-sys-color-primary`).trim()||`#0066cc`;let o=this.barWidth+this.barGap,s=this.active?this.speed:0;for(let e=0;e<this._bars.length;e++)this._bars[e].x-=s*r,this.active||(this._bars[e].height+=(.05-this._bars[e].height)*.15);for(this._bars=this._bars.filter(e=>e.x+this.barWidth>-o);this._bars.length===0||this._bars[this._bars.length-1].x<i.width;){let e=this._bars[this._bars.length-1],t=e?e.x+o:i.width,n;if(this.data&&this.data.length>0)n=this.data[this._dataIndex%this.data.length]||.1,this._dataIndex=(this._dataIndex+1)%this.data.length;else if(this.analyserNode){(!this._dataArray||this._dataArray.length!==this.analyserNode.frequencyBinCount)&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),this.analyserNode.getByteFrequencyData(this._dataArray);let e=0,t=Math.min(this._dataArray.length,50);for(let n=0;n<t;n++)e+=this._dataArray[n];let r=e/t/255;n=Math.max(.1,r**1.5*1.5)}else{let e=Date.now()/1e3,t=this._bars.length+e*.01,r=Math.sin(t*.1)*.2,i=Math.cos(t*.05)*.15,a=this._seededRandom(t)*.4;n=Math.max(.1,Math.min(.9,.3+r+i+a))}if(this._bars.push({x:t,height:n}),this._bars.length>this.barCount*2)break}let c=i.height/2;for(let e of this._bars)if(e.x<i.width&&e.x+this.barWidth>0){let t=Math.max(this.barHeight,e.height*i.height*.8),r=c-t/2;n.fillStyle=a,n.globalAlpha=.3+e.height*.7,this.barRadius>0?(n.beginPath(),n.roundRect(e.x,r,this.barWidth,t,this.barRadius),n.fill()):n.fillRect(e.x,r,this.barWidth,t)}n.globalAlpha=1,this.fadeEdges&&this.fadeWidth>0&&
|
|
429
|
+
`}firstUpdated(){this._resizeObserver=new ResizeObserver(()=>{this._handleResize()}),this._resizeObserver.observe(this._container),this._canvas&&this._container&&this._populateInitialBars(),this._startAnimation()}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleResize(){if(!this._canvas||!this._container)return;let e=this._container.getBoundingClientRect(),t=window.devicePixelRatio||1;this._canvas.width=e.width*t,this._canvas.height=e.height*t,this._canvas.style.width=`${e.width}px`,this._canvas.style.height=`${e.height}px`;let n=this._canvas.getContext(`2d`);n&&n.scale(t,t)}_seededRandom(e){let t=Math.sin(this._seed*1e4+e*137.5)*1e4;return t-Math.floor(t)}_populateInitialBars(){let e=this._container.getBoundingClientRect(),t=this.barWidth+this.barGap,n=e.width,r=0;for(this._bars=[];n>-t;)this._bars.push({x:n,height:.2+this._seededRandom(r++)*.6}),n-=t;this._bars.reverse()}_startAnimation(){this._lastTime=performance.now();let e=t=>{if(!this._canvas)return;let n=this._canvas.getContext(`2d`);if(!n)return;let r=this._lastTime?(t-this._lastTime)/1e3:0;this._lastTime=t;let i=this._canvas.getBoundingClientRect();n.clearRect(0,0,i.width,i.height);let a=this.barColor;a||=getComputedStyle(this).getPropertyValue(`--md-sys-color-primary`).trim()||`#0066cc`;let o=this.barWidth+this.barGap,s=this.active?this.speed:0;for(let e=0;e<this._bars.length;e++)this._bars[e].x-=s*r,this.active||(this._bars[e].height+=(.05-this._bars[e].height)*.15);for(this._bars=this._bars.filter(e=>e.x+this.barWidth>-o);this._bars.length===0||this._bars[this._bars.length-1].x<i.width;){let e=this._bars[this._bars.length-1],t=e?e.x+o:i.width,n;if(this.data&&this.data.length>0)n=this.data[this._dataIndex%this.data.length]||.1,this._dataIndex=(this._dataIndex+1)%this.data.length;else if(this.analyserNode){(!this._dataArray||this._dataArray.length!==this.analyserNode.frequencyBinCount)&&(this._dataArray=new Uint8Array(this.analyserNode.frequencyBinCount)),this.analyserNode.getByteFrequencyData(this._dataArray);let e=0,t=Math.min(this._dataArray.length,50);for(let n=0;n<t;n++)e+=this._dataArray[n];let r=e/t/255;n=Math.max(.1,r**1.5*1.5)}else{let e=Date.now()/1e3,t=this._bars.length+e*.01,r=Math.sin(t*.1)*.2,i=Math.cos(t*.05)*.15,a=this._seededRandom(t)*.4;n=Math.max(.1,Math.min(.9,.3+r+i+a))}if(this._bars.push({x:t,height:n}),this._bars.length>this.barCount*2)break}let c=i.height/2;for(let e of this._bars)if(e.x<i.width&&e.x+this.barWidth>0){let t=Math.max(this.barHeight,e.height*i.height*.8),r=c-t/2;n.fillStyle=a,n.globalAlpha=.3+e.height*.7,this.barRadius>0?(n.beginPath(),n.roundRect(e.x,r,this.barWidth,t,this.barRadius),n.fill()):n.fillRect(e.x,r,this.barWidth,t)}n.globalAlpha=1,this.fadeEdges&&this.fadeWidth>0&&P(n,i.width,i.height,this.fadeWidth),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}};y([(0,r.property)({type:Number})],L.prototype,`speed`,void 0),y([(0,r.property)({type:Number})],L.prototype,`barCount`,void 0),y([(0,r.property)({type:Number})],L.prototype,`barWidth`,void 0),y([(0,r.property)({type:Number})],L.prototype,`barHeight`,void 0),y([(0,r.property)({type:Number})],L.prototype,`barGap`,void 0),y([(0,r.property)({type:Number})],L.prototype,`barRadius`,void 0),y([(0,r.property)({type:String})],L.prototype,`barColor`,void 0),y([(0,r.property)({type:Boolean})],L.prototype,`fadeEdges`,void 0),y([(0,r.property)({type:Number})],L.prototype,`fadeWidth`,void 0),y([(0,r.property)({type:Number})],L.prototype,`height`,void 0),y([(0,r.property)({type:Array})],L.prototype,`data`,void 0),y([(0,r.property)({attribute:!1})],L.prototype,`analyserNode`,void 0),y([(0,r.property)({type:Boolean})],L.prototype,`active`,void 0),y([(0,r.query)(`canvas`)],L.prototype,`_canvas`,void 0),y([(0,r.query)(`.container`)],L.prototype,`_container`,void 0),L=y([(0,r.customElement)(`ui-scrolling-waveform`)],L);var R=class extends n.LitElement{constructor(...e){super(...e),this.barWidth=4,this.barGap=2,this.height=100,this._animationFrameId=0}static{this.styles=n.css`
|
|
349
430
|
:host {
|
|
350
431
|
display: block;
|
|
351
432
|
width: 100%;
|
|
@@ -356,7 +437,7 @@
|
|
|
356
437
|
width: 100%;
|
|
357
438
|
height: 100%;
|
|
358
439
|
}
|
|
359
|
-
`}render(){return n.html`<canvas style="height: ${this.height}px;"></canvas>`}firstUpdated(){this._startLoop()}disconnectedCallback(){super.disconnectedCallback(),cancelAnimationFrame(this._animationFrameId)}_startLoop(){let e=()=>{this._renderFrame(),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}_renderFrame(){if(!this._canvas||!this.playerState?.analyserNode)return;let e=this.playerState.analyserNode;this._dataArray||=new Uint8Array(e.frequencyBinCount);let t=this._canvas.getContext(`2d`);if(!t)return;let n=this._canvas.getBoundingClientRect(),r=window.devicePixelRatio||1;this._canvas.width!==n.width*r&&(this._canvas.width=n.width*r,this._canvas.height=n.height*r,t.scale(r,r)),t.clearRect(0,0,n.width,n.height);let i=
|
|
440
|
+
`}render(){return n.html`<canvas style="height: ${this.height}px;"></canvas>`}firstUpdated(){this._startLoop()}disconnectedCallback(){super.disconnectedCallback(),cancelAnimationFrame(this._animationFrameId)}_startLoop(){let e=()=>{this._renderFrame(),this._animationFrameId=requestAnimationFrame(e)};this._animationFrameId=requestAnimationFrame(e)}_renderFrame(){if(!this._canvas||!this.playerState?.analyserNode)return;let e=this.playerState.analyserNode;this._dataArray||=new Uint8Array(e.frequencyBinCount);let t=this._canvas.getContext(`2d`);if(!t)return;let n=this._canvas.getBoundingClientRect(),r=window.devicePixelRatio||1;this._canvas.width!==n.width*r&&(this._canvas.width=n.width*r,this._canvas.height=n.height*r,t.scale(r,r)),t.clearRect(0,0,n.width,n.height);let i=N(e,this._dataArray),a=this.barWidth+this.barGap,o=Math.floor(n.width/a),s=getComputedStyle(this),c=this.color;c||=s.getPropertyValue(`--md-sys-color-primary`).trim()||`#0066cc`,t.fillStyle=c;for(let e=0;e<o;e++){let r=(i[Math.floor(e/o*(i.length*.6))]||0)*n.height,s=e*a,c=n.height-r;t.fillRect(s,c,this.barWidth,r)}}};y([_({context:v,subscribe:!0})],R.prototype,`playerState`,void 0),y([(0,r.property)({type:Number})],R.prototype,`barWidth`,void 0),y([(0,r.property)({type:Number})],R.prototype,`barGap`,void 0),y([(0,r.property)({type:Number})],R.prototype,`height`,void 0),y([(0,r.property)({type:String})],R.prototype,`color`,void 0),y([(0,r.query)(`canvas`)],R.prototype,`_canvas`,void 0),R=y([(0,r.customElement)(`ui-spectrum-visualizer`)],R);var z=class extends n.LitElement{constructor(...e){super(...e),this.muted=!1,this.disabled=!1,this._devices=[],this._loading=!0,this._error=null,this._hasPermission=!1,this._isMenuOpen=!1,this._handleDeviceChange=()=>{this._hasPermission?this._loadDevicesWithPermission():this._loadDevicesWithoutPermission()}}static{this.styles=n.css`
|
|
360
441
|
:host {
|
|
361
442
|
display: inline-block;
|
|
362
443
|
position: relative;
|
|
@@ -510,7 +591,7 @@
|
|
|
510
591
|
</div>
|
|
511
592
|
`:``}
|
|
512
593
|
</md-menu>
|
|
513
|
-
`}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open,this._isMenuOpen=this._menuEl.open)}_selectDevice(e){this.value=e,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:e},bubbles:!0,composed:!0})),this._isMenuOpen&&!this.muted&&this._hasPermission&&this._startPreview()}_toggleMute(e){e.stopPropagation(),this.muted=!this.muted,this.dispatchEvent(new CustomEvent(`mute-change`,{detail:{muted:this.muted},bubbles:!0,composed:!0}))}async _loadDevicesWithoutPermission(){try{this._loading=!0,this._error=null;let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e)}catch(e){this._error=e instanceof Error?e.message:`Failed to get audio devices`}finally{this._loading=!1}}async _loadDevicesWithPermission(){if(!this._loading)try{this._loading=!0,this._error=null,(await navigator.mediaDevices.getUserMedia({audio:!0})).getTracks().forEach(e=>e.stop());let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e),this._hasPermission=!0,this._isMenuOpen&&!this.muted&&this._startPreview()}catch(e){this._error=e instanceof Error?e.message:`Permission denied`}finally{this._loading=!1}}_parseDeviceList(e){let t=e.filter(e=>e.kind===`audioinput`).map(e=>{let t=e.label||`Microphone`;return t=t.replace(/\s*\([^)]*\)/g,``).trim(),{deviceId:e.deviceId,label:t,groupId:e.groupId}});this._devices=t,!this.value&&t.length>0&&(this.value=t[0].deviceId,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:this.value},bubbles:!0,composed:!0})))}async _startPreview(){if(this._stopPreview(),this.value)try{this._previewStream=await navigator.mediaDevices.getUserMedia({audio:{deviceId:{exact:this.value}}}),this._previewAudioContext=new(window.AudioContext||window.webkitAudioContext),this._previewAnalyser=this._previewAudioContext.createAnalyser(),this._previewAnalyser.fftSize=256,this._previewAnalyser.smoothingTimeConstant=.8,this._previewAudioContext.createMediaStreamSource(this._previewStream).connect(this._previewAnalyser)}catch(e){console.warn(`Failed to start preview stream`,e)}}_stopPreview(){this._previewStream&&=(this._previewStream.getTracks().forEach(e=>e.stop()),void 0),this._previewAudioContext&&this._previewAudioContext.state!==`closed`&&(this._previewAudioContext.close(),this._previewAudioContext=void 0),this._previewAnalyser=void 0}};
|
|
594
|
+
`}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open,this._isMenuOpen=this._menuEl.open)}_selectDevice(e){this.value=e,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:e},bubbles:!0,composed:!0})),this._isMenuOpen&&!this.muted&&this._hasPermission&&this._startPreview()}_toggleMute(e){e.stopPropagation(),this.muted=!this.muted,this.dispatchEvent(new CustomEvent(`mute-change`,{detail:{muted:this.muted},bubbles:!0,composed:!0}))}async _loadDevicesWithoutPermission(){try{this._loading=!0,this._error=null;let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e)}catch(e){this._error=e instanceof Error?e.message:`Failed to get audio devices`}finally{this._loading=!1}}async _loadDevicesWithPermission(){if(!this._loading)try{this._loading=!0,this._error=null,(await navigator.mediaDevices.getUserMedia({audio:!0})).getTracks().forEach(e=>e.stop());let e=await navigator.mediaDevices.enumerateDevices();this._parseDeviceList(e),this._hasPermission=!0,this._isMenuOpen&&!this.muted&&this._startPreview()}catch(e){this._error=e instanceof Error?e.message:`Permission denied`}finally{this._loading=!1}}_parseDeviceList(e){let t=e.filter(e=>e.kind===`audioinput`).map(e=>{let t=e.label||`Microphone`;return t=t.replace(/\s*\([^)]*\)/g,``).trim(),{deviceId:e.deviceId,label:t,groupId:e.groupId}});this._devices=t,!this.value&&t.length>0&&(this.value=t[0].deviceId,this.dispatchEvent(new CustomEvent(`device-change`,{detail:{deviceId:this.value},bubbles:!0,composed:!0})))}async _startPreview(){if(this._stopPreview(),this.value)try{this._previewStream=await navigator.mediaDevices.getUserMedia({audio:{deviceId:{exact:this.value}}}),this._previewAudioContext=new(window.AudioContext||window.webkitAudioContext),this._previewAnalyser=this._previewAudioContext.createAnalyser(),this._previewAnalyser.fftSize=256,this._previewAnalyser.smoothingTimeConstant=.8,this._previewAudioContext.createMediaStreamSource(this._previewStream).connect(this._previewAnalyser)}catch(e){console.warn(`Failed to start preview stream`,e)}}_stopPreview(){this._previewStream&&=(this._previewStream.getTracks().forEach(e=>e.stop()),void 0),this._previewAudioContext&&this._previewAudioContext.state!==`closed`&&(this._previewAudioContext.close(),this._previewAudioContext=void 0),this._previewAnalyser=void 0}};y([(0,r.property)({type:String})],z.prototype,`value`,void 0),y([(0,r.property)({type:Boolean})],z.prototype,`muted`,void 0),y([(0,r.property)({type:Boolean})],z.prototype,`disabled`,void 0),y([(0,r.state)()],z.prototype,`_devices`,void 0),y([(0,r.state)()],z.prototype,`_loading`,void 0),y([(0,r.state)()],z.prototype,`_error`,void 0),y([(0,r.state)()],z.prototype,`_hasPermission`,void 0),y([(0,r.state)()],z.prototype,`_isMenuOpen`,void 0),y([(0,r.state)()],z.prototype,`_previewAnalyser`,void 0),y([(0,r.query)(`md-menu`)],z.prototype,`_menuEl`,void 0),z=y([(0,r.customElement)(`ui-mic-selector`)],z);var B=class extends n.LitElement{constructor(...e){super(...e),this.voices=[],this.placeholder=`Select a voice...`,this.idKey=`voiceId`,this.titleKey=`name`,this.subtitleKey=`category`,this.previewUrlKey=`previewUrl`,this.useOrbs=!1,this.colorKey=`colors`,this._searchQuery=``}static{this.styles=n.css`
|
|
514
595
|
:host {
|
|
515
596
|
display: inline-block;
|
|
516
597
|
width: 100%;
|
|
@@ -824,7 +905,7 @@
|
|
|
824
905
|
</md-menu-item>
|
|
825
906
|
`)}
|
|
826
907
|
</md-menu>
|
|
827
|
-
`}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open)}_handleMenuClosed(){this._stopPreview()}_selectVoice(e){this.value=e,this.dispatchEvent(new CustomEvent(`voice-change`,{detail:{voiceId:e},bubbles:!0,composed:!0}))}_togglePreview(e,t){e.stopPropagation(),e.preventDefault(),!(!t[this.previewUrlKey]||!this._audioEl)&&(this._previewingVoiceId===t[this.idKey]?this._stopPreview():(this._audioEl.src=t[this.previewUrlKey],this._audioEl.play().catch(console.error),this._previewingVoiceId=t[this.idKey]))}_stopPreview(){this._audioEl&&(this._audioEl.pause(),this._audioEl.currentTime=0),this._previewingVoiceId=void 0}};
|
|
908
|
+
`}_toggleMenu(){this._menuEl&&(this._menuEl.open=!this._menuEl.open)}_handleMenuClosed(){this._stopPreview()}_selectVoice(e){this.value=e,this.dispatchEvent(new CustomEvent(`voice-change`,{detail:{voiceId:e},bubbles:!0,composed:!0}))}_togglePreview(e,t){e.stopPropagation(),e.preventDefault(),!(!t[this.previewUrlKey]||!this._audioEl)&&(this._previewingVoiceId===t[this.idKey]?this._stopPreview():(this._audioEl.src=t[this.previewUrlKey],this._audioEl.play().catch(console.error),this._previewingVoiceId=t[this.idKey]))}_stopPreview(){this._audioEl&&(this._audioEl.pause(),this._audioEl.currentTime=0),this._previewingVoiceId=void 0}};y([(0,r.property)({type:Array})],B.prototype,`voices`,void 0),y([(0,r.property)({type:String})],B.prototype,`value`,void 0),y([(0,r.property)({type:String})],B.prototype,`placeholder`,void 0),y([(0,r.property)({type:String})],B.prototype,`idKey`,void 0),y([(0,r.property)({type:String})],B.prototype,`titleKey`,void 0),y([(0,r.property)({type:String})],B.prototype,`subtitleKey`,void 0),y([(0,r.property)({type:String})],B.prototype,`previewUrlKey`,void 0),y([(0,r.property)({type:Boolean})],B.prototype,`useOrbs`,void 0),y([(0,r.property)({type:String})],B.prototype,`colorKey`,void 0),y([(0,r.state)()],B.prototype,`_searchQuery`,void 0),y([(0,r.state)()],B.prototype,`_previewingVoiceId`,void 0),y([(0,r.query)(`md-menu`)],B.prototype,`_menuEl`,void 0),y([(0,r.query)(`audio`)],B.prototype,`_audioEl`,void 0),B=y([(0,r.customElement)(`ui-voice-picker`)],B);var V=class extends n.LitElement{constructor(...e){super(...e),this.placeholder=`Jot down some thoughts...`}static{this.styles=n.css`
|
|
828
909
|
:host {
|
|
829
910
|
display: inline-flex;
|
|
830
911
|
align-items: center;
|
|
@@ -865,7 +946,7 @@
|
|
|
865
946
|
pointer-events: none;
|
|
866
947
|
margin-left: -12px;
|
|
867
948
|
}
|
|
868
|
-
`}render(){
|
|
949
|
+
`}render(){let{state:e=`idle`,transcript:t=``,partialTranscript:r=``,analyserNode:i=void 0}=this._context||{},a=e===`recording`,o=e===`processing`||e===`connecting`;return n.html`
|
|
869
950
|
${!a&&!o&&!(t||r)?n.html`<span class="placeholder">${this.placeholder}</span>`:n.html`<span class="transcript">${r||t}</span>`}
|
|
870
951
|
|
|
871
952
|
<div
|
|
@@ -881,7 +962,7 @@
|
|
|
881
962
|
barColor="var(--ui-speech-wave-color, currentColor)"
|
|
882
963
|
></ui-live-waveform>
|
|
883
964
|
</div>
|
|
884
|
-
`}};
|
|
965
|
+
`}};y([_({context:E,subscribe:!0})],V.prototype,`_context`,void 0),y([(0,r.property)({type:String})],V.prototype,`placeholder`,void 0),V=y([(0,r.customElement)(`ui-speech-preview`)],V);var H=class extends n.LitElement{constructor(...e){super(...e),this.agentState=null,this.inputVolume=0,this.outputVolume=0,this.volumeMode=`auto`,this.seed=Math.floor(Math.random()*2**32),this._animationFrameId=0,this._animSpeed=.1,this._curIn=0,this._curOut=0,this._textureLoader=new d.TextureLoader,this._lastTime=0,this._vertexShader=`
|
|
885
966
|
uniform float uTime;
|
|
886
967
|
uniform sampler2D uPerlinTexture;
|
|
887
968
|
varying vec2 vUv;
|
|
@@ -1061,7 +1142,7 @@ void main() {
|
|
|
1061
1142
|
width: 100%;
|
|
1062
1143
|
height: 100%;
|
|
1063
1144
|
}
|
|
1064
|
-
`}render(){return n.html`<div class="container"></div>`}firstUpdated(){this._initThree()}updated(e){e.has(`colors`)&&this._updateColors(),e.has(`seed`)&&this._updateSeed()}_updateSeed(){if(!this._mesh)return;let e=this._splitmix32(this.seed),t=new Float32Array(Array.from({length:7},()=>e()*Math.PI*2));this._mesh.material.uniforms.uOffsets.value=t}_updateColors(){if(!(!this._targetColor1||!this._targetColor2))if(this.colors&&this.colors.length===2)this._targetColor1.set(this.colors[0]),this._targetColor2.set(this.colors[1]);else{let e=getComputedStyle(this),t=e.getPropertyValue(`--md-sys-color-primary`).trim()||`#CADCFC`,n=e.getPropertyValue(`--md-sys-color-secondary`).trim()||`#A0B9D1`;this._targetColor1.set(t),this._targetColor2.set(n)}}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._resizeObserver&&this._resizeObserver.disconnect(),this._renderer&&this._renderer.dispose(),this._mesh&&(this._mesh.geometry.dispose(),this._mesh.material.dispose())}async _initThree(){if(!this._container)return;this._targetColor1=new d.Color,this._targetColor2=new d.Color,this._updateColors();try{this._perlinNoiseTexture=await this._textureLoader.loadAsync(`https://storage.googleapis.com/eleven-public-cdn/images/perlin-noise.png`),this._perlinNoiseTexture.wrapS=d.RepeatWrapping,this._perlinNoiseTexture.wrapT=d.RepeatWrapping}catch(e){console.warn(`Failed to load perlin noise texture for orb.`,e);return}let e=this._container.clientWidth,t=this._container.clientHeight;this._scene=new d.Scene,this._camera=new d.OrthographicCamera(-5,5,5,-5,.1,10),this._camera.position.z=1,this._renderer=new d.WebGLRenderer({alpha:!0,antialias:!0,premultipliedAlpha:!0}),this._renderer.setSize(e,t),this._renderer.setPixelRatio(window.devicePixelRatio),this._container.appendChild(this._renderer.domElement);let n=this._splitmix32(this.seed),r=new Float32Array(Array.from({length:7},()=>n()*Math.PI*2)),i=document.documentElement.classList.contains(`dark`)||window.matchMedia(`(prefers-color-scheme: dark)`).matches,a={uColor1:new d.Uniform(this._targetColor1),uColor2:new d.Uniform(this._targetColor2),uOffsets:{value:r},uPerlinTexture:new d.Uniform(this._perlinNoiseTexture),uTime:new d.Uniform(0),uAnimation:new d.Uniform(.1),uInverted:new d.Uniform(i?1:0),uInputVolume:new d.Uniform(0),uOutputVolume:new d.Uniform(0),uOpacity:new d.Uniform(0)},o=new d.CircleGeometry(3.5,64),s=new d.ShaderMaterial({uniforms:a,vertexShader:this._vertexShader,fragmentShader:this._fragmentShader,transparent:!0});this._mesh=new d.Mesh(o,s),this._scene.add(this._mesh),this._resizeObserver=new ResizeObserver(()=>{this._container&&this._renderer&&this._renderer.setSize(this._container.clientWidth,this._container.clientHeight)}),this._resizeObserver.observe(this._container),new MutationObserver(()=>{if(!this._mesh)return;let e=document.documentElement.classList.contains(`dark`);this._mesh.material.uniforms.uInverted.value=e?1:0,this._updateColors()}).observe(document.documentElement,{attributes:!0,attributeFilter:[`class`]}),this._lastTime=performance.now(),this._animate()}_animate(){if(this._animationFrameId=requestAnimationFrame(()=>this._animate()),!this._mesh||!this._renderer||!this._scene||!this._camera)return;let e=performance.now(),t=(e-this._lastTime)/1e3;this._lastTime=e;let n=this._mesh.material.uniforms;n.uTime.value+=t*.5,n.uOpacity.value<1&&(n.uOpacity.value=Math.min(1,n.uOpacity.value+t*2));let r=0,i=.3;if(this.volumeMode===`manual`)r=this._clamp01(this.inputVolume),i=this._clamp01(this.outputVolume);else{let e=n.uTime.value*2;if(this.agentState===null)r=0,i=.3;else if(this.agentState===`listening`)r=this._clamp01(.55+Math.sin(e*3.2)*.35),i=.45;else if(this.agentState===`talking`)r=this._clamp01(.65+Math.sin(e*4.8)*.22),i=this._clamp01(.75+Math.sin(e*3.6)*.22);else{let t=.38+.07*Math.sin(e*.7),n=.05*Math.sin(e*2.1)*Math.sin(e*.37+1.2);r=this._clamp01(t+n),i=this._clamp01(.48+.12*Math.sin(e*1.05+.6))}}this._curIn+=(r-this._curIn)*.2,this._curOut+=(i-this._curOut)*.2;let a=.1+(1-(this._curOut-1)**2)*.9;this._animSpeed+=(a-this._animSpeed)*.12,n.uAnimation.value+=t*this._animSpeed,n.uInputVolume.value=this._curIn,n.uOutputVolume.value=this._curOut,n.uColor1.value.lerp(this._targetColor1,.08),n.uColor2.value.lerp(this._targetColor2,.08),this._renderer.render(this._scene,this._camera)}_splitmix32(e){return function(){e|=0,e=e+2654435769|0;let t=e^e>>>16;return t=Math.imul(t,569420461),t^=t>>>15,t=Math.imul(t,1935289751),((t^=t>>>15)>>>0)/4294967296}}_clamp01(e){return Number.isFinite(e)?Math.min(1,Math.max(0,e)):0}};
|
|
1145
|
+
`}render(){return n.html`<div class="container"></div>`}firstUpdated(){this._initThree()}updated(e){e.has(`colors`)&&this._updateColors(),e.has(`seed`)&&this._updateSeed()}_updateSeed(){if(!this._mesh)return;let e=this._splitmix32(this.seed),t=new Float32Array(Array.from({length:7},()=>e()*Math.PI*2));this._mesh.material.uniforms.uOffsets.value=t}_updateColors(){if(!(!this._targetColor1||!this._targetColor2))if(this.colors&&this.colors.length===2)this._targetColor1.set(this.colors[0]),this._targetColor2.set(this.colors[1]);else{let e=getComputedStyle(this),t=e.getPropertyValue(`--md-sys-color-primary`).trim()||`#CADCFC`,n=e.getPropertyValue(`--md-sys-color-secondary`).trim()||`#A0B9D1`;this._targetColor1.set(t),this._targetColor2.set(n)}}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._resizeObserver&&this._resizeObserver.disconnect(),this._renderer&&this._renderer.dispose(),this._mesh&&(this._mesh.geometry.dispose(),this._mesh.material.dispose())}async _initThree(){if(!this._container)return;this._targetColor1=new d.Color,this._targetColor2=new d.Color,this._updateColors();try{this._perlinNoiseTexture=await this._textureLoader.loadAsync(`https://storage.googleapis.com/eleven-public-cdn/images/perlin-noise.png`),this._perlinNoiseTexture.wrapS=d.RepeatWrapping,this._perlinNoiseTexture.wrapT=d.RepeatWrapping}catch(e){console.warn(`Failed to load perlin noise texture for orb.`,e);return}let e=this._container.clientWidth,t=this._container.clientHeight;this._scene=new d.Scene,this._camera=new d.OrthographicCamera(-5,5,5,-5,.1,10),this._camera.position.z=1,this._renderer=new d.WebGLRenderer({alpha:!0,antialias:!0,premultipliedAlpha:!0}),this._renderer.setSize(e,t),this._renderer.setPixelRatio(window.devicePixelRatio),this._container.appendChild(this._renderer.domElement);let n=this._splitmix32(this.seed),r=new Float32Array(Array.from({length:7},()=>n()*Math.PI*2)),i=document.documentElement.classList.contains(`dark`)||window.matchMedia(`(prefers-color-scheme: dark)`).matches,a={uColor1:new d.Uniform(this._targetColor1),uColor2:new d.Uniform(this._targetColor2),uOffsets:{value:r},uPerlinTexture:new d.Uniform(this._perlinNoiseTexture),uTime:new d.Uniform(0),uAnimation:new d.Uniform(.1),uInverted:new d.Uniform(i?1:0),uInputVolume:new d.Uniform(0),uOutputVolume:new d.Uniform(0),uOpacity:new d.Uniform(0)},o=new d.CircleGeometry(3.5,64),s=new d.ShaderMaterial({uniforms:a,vertexShader:this._vertexShader,fragmentShader:this._fragmentShader,transparent:!0});this._mesh=new d.Mesh(o,s),this._scene.add(this._mesh),this._resizeObserver=new ResizeObserver(()=>{this._container&&this._renderer&&this._renderer.setSize(this._container.clientWidth,this._container.clientHeight)}),this._resizeObserver.observe(this._container),new MutationObserver(()=>{if(!this._mesh)return;let e=document.documentElement.classList.contains(`dark`);this._mesh.material.uniforms.uInverted.value=e?1:0,this._updateColors()}).observe(document.documentElement,{attributes:!0,attributeFilter:[`class`]}),this._lastTime=performance.now(),this._animate()}_animate(){if(this._animationFrameId=requestAnimationFrame(()=>this._animate()),!this._mesh||!this._renderer||!this._scene||!this._camera)return;let e=performance.now(),t=(e-this._lastTime)/1e3;this._lastTime=e;let n=this._mesh.material.uniforms;n.uTime.value+=t*.5,n.uOpacity.value<1&&(n.uOpacity.value=Math.min(1,n.uOpacity.value+t*2));let r=0,i=.3;if(this.volumeMode===`manual`)r=this._clamp01(this.inputVolume),i=this._clamp01(this.outputVolume);else{let e=n.uTime.value*2;if(this.agentState===null)r=0,i=.3;else if(this.agentState===`listening`)r=this._clamp01(.55+Math.sin(e*3.2)*.35),i=.45;else if(this.agentState===`talking`)r=this._clamp01(.65+Math.sin(e*4.8)*.22),i=this._clamp01(.75+Math.sin(e*3.6)*.22);else{let t=.38+.07*Math.sin(e*.7),n=.05*Math.sin(e*2.1)*Math.sin(e*.37+1.2);r=this._clamp01(t+n),i=this._clamp01(.48+.12*Math.sin(e*1.05+.6))}}this._curIn+=(r-this._curIn)*.2,this._curOut+=(i-this._curOut)*.2;let a=.1+(1-(this._curOut-1)**2)*.9;this._animSpeed+=(a-this._animSpeed)*.12,n.uAnimation.value+=t*this._animSpeed,n.uInputVolume.value=this._curIn,n.uOutputVolume.value=this._curOut,n.uColor1.value.lerp(this._targetColor1,.08),n.uColor2.value.lerp(this._targetColor2,.08),this._renderer.render(this._scene,this._camera)}_splitmix32(e){return function(){e|=0,e=e+2654435769|0;let t=e^e>>>16;return t=Math.imul(t,569420461),t^=t>>>15,t=Math.imul(t,1935289751),((t^=t>>>15)>>>0)/4294967296}}_clamp01(e){return Number.isFinite(e)?Math.min(1,Math.max(0,e)):0}};y([(0,r.property)({type:Array})],H.prototype,`colors`,void 0),y([(0,r.property)({type:String})],H.prototype,`agentState`,void 0),y([(0,r.property)({type:Number})],H.prototype,`inputVolume`,void 0),y([(0,r.property)({type:Number})],H.prototype,`outputVolume`,void 0),y([(0,r.property)({type:String})],H.prototype,`volumeMode`,void 0),y([(0,r.property)({type:Number})],H.prototype,`seed`,void 0),y([(0,r.query)(`.container`)],H.prototype,`_container`,void 0),H=y([(0,r.customElement)(`ui-orb`)],H);var U=class extends n.LitElement{constructor(...e){super(...e),this.flipped=!1,this.axis=`y`,this.duration=`0.6s`}static{this.styles=n.css`
|
|
1065
1146
|
:host {
|
|
1066
1147
|
display: block;
|
|
1067
1148
|
perspective: 1000px;
|
|
@@ -1142,7 +1223,7 @@ void main() {
|
|
|
1142
1223
|
</div>
|
|
1143
1224
|
</div>
|
|
1144
1225
|
</div>
|
|
1145
|
-
`}toggle(){this.flipped=!this.flipped,this.dispatchEvent(new CustomEvent(`flip-change`,{detail:{flipped:this.flipped},bubbles:!0,composed:!0}))}};
|
|
1226
|
+
`}toggle(){this.flipped=!this.flipped,this.dispatchEvent(new CustomEvent(`flip-change`,{detail:{flipped:this.flipped},bubbles:!0,composed:!0}))}};y([(0,r.property)({type:Boolean,reflect:!0})],U.prototype,`flipped`,void 0),y([(0,r.property)({type:String,reflect:!0})],U.prototype,`axis`,void 0),y([(0,r.property)({type:String})],U.prototype,`duration`,void 0),U=y([(0,r.customElement)(`ui-3d-flip`)],U);var W=class extends n.LitElement{constructor(...e){super(...e),this.header=`Queue`,this.emptyText=`No tracks in queue`}static{this.styles=n.css`
|
|
1146
1227
|
:host {
|
|
1147
1228
|
display: block;
|
|
1148
1229
|
background: var(--md-sys-color-surface-container-low, transparent);
|
|
@@ -1211,7 +1292,7 @@ void main() {
|
|
|
1211
1292
|
`)}
|
|
1212
1293
|
</md-list>
|
|
1213
1294
|
`}
|
|
1214
|
-
`}};
|
|
1295
|
+
`}};y([_({context:v,subscribe:!0})],W.prototype,`playerState`,void 0),y([(0,r.property)({type:String})],W.prototype,`header`,void 0),y([(0,r.property)({type:String})],W.prototype,`emptyText`,void 0),W=y([(0,r.customElement)(`ui-playlist`)],W);var G=class extends n.LitElement{constructor(...e){super(...e),this.title=`Component`,this.description=``,this.mode=`preview`}static{this.styles=n.css`
|
|
1215
1296
|
:host {
|
|
1216
1297
|
display: block;
|
|
1217
1298
|
background: var(--md-sys-color-surface, #ffffff);
|
|
@@ -1281,11 +1362,15 @@ void main() {
|
|
|
1281
1362
|
}
|
|
1282
1363
|
|
|
1283
1364
|
.preview-panel {
|
|
1284
|
-
display:
|
|
1365
|
+
display: block; /* Keep in DOM for script access */
|
|
1285
1366
|
}
|
|
1286
1367
|
|
|
1287
|
-
.preview-panel
|
|
1288
|
-
|
|
1368
|
+
:host([mode='code']) .preview-panel {
|
|
1369
|
+
position: absolute;
|
|
1370
|
+
visibility: hidden;
|
|
1371
|
+
pointer-events: none;
|
|
1372
|
+
height: 0;
|
|
1373
|
+
overflow: hidden;
|
|
1289
1374
|
}
|
|
1290
1375
|
|
|
1291
1376
|
.code-panel {
|
|
@@ -1302,7 +1387,7 @@ void main() {
|
|
|
1302
1387
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
1303
1388
|
}
|
|
1304
1389
|
|
|
1305
|
-
.code-panel
|
|
1390
|
+
:host([mode='code']) .code-panel {
|
|
1306
1391
|
display: block;
|
|
1307
1392
|
}
|
|
1308
1393
|
`}render(){return n.html`
|
|
@@ -1327,15 +1412,13 @@ void main() {
|
|
|
1327
1412
|
</div>
|
|
1328
1413
|
|
|
1329
1414
|
<div class="content-area">
|
|
1330
|
-
<div class="preview-panel
|
|
1415
|
+
<div class="preview-panel">
|
|
1331
1416
|
<slot></slot>
|
|
1332
1417
|
</div>
|
|
1333
1418
|
|
|
1334
|
-
<pre
|
|
1335
|
-
class="code-panel ${this.mode===`code`?`active`:``}"
|
|
1336
|
-
><code><slot name="code"></slot></code></pre>
|
|
1419
|
+
<pre class="code-panel"><code><slot name="code"></slot></code></pre>
|
|
1337
1420
|
</div>
|
|
1338
|
-
`}};
|
|
1421
|
+
`}};y([(0,r.property)({type:String})],G.prototype,`title`,void 0),y([(0,r.property)({type:String})],G.prototype,`description`,void 0),y([(0,r.property)({type:String,reflect:!0})],G.prototype,`mode`,void 0),G=y([(0,r.customElement)(`ui-showcase-card`)],G);var K=class extends n.LitElement{constructor(...e){super(...e),this.state=`idle`,this.disabled=!1,this._showFeedback=!1,this._feedbackType=null}static{this.styles=n.css`
|
|
1339
1422
|
:host {
|
|
1340
1423
|
display: inline-block;
|
|
1341
1424
|
--ui-waveform-height: 24px;
|
|
@@ -1532,7 +1615,7 @@ void main() {
|
|
|
1532
1615
|
`:``}
|
|
1533
1616
|
</div>
|
|
1534
1617
|
</md-filled-button>
|
|
1535
|
-
`}_handleClick(e){this.dispatchEvent(new CustomEvent(`voice-button-click`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};
|
|
1618
|
+
`}_handleClick(e){this.dispatchEvent(new CustomEvent(`voice-button-click`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};y([(0,r.property)({type:String})],K.prototype,`state`,void 0),y([(0,r.property)({type:String})],K.prototype,`label`,void 0),y([(0,r.property)({type:String})],K.prototype,`trailing`,void 0),y([(0,r.property)({type:Boolean})],K.prototype,`disabled`,void 0),y([(0,r.property)({attribute:!1})],K.prototype,`analyserNode`,void 0),y([(0,r.state)()],K.prototype,`_showFeedback`,void 0),y([(0,r.state)()],K.prototype,`_feedbackType`,void 0),K=y([(0,r.customElement)(`ui-voice-button`)],K);var q=class extends n.LitElement{constructor(...e){super(...e),this.state=`idle`}static{this.styles=n.css`
|
|
1536
1619
|
:host {
|
|
1537
1620
|
display: inline-block;
|
|
1538
1621
|
}
|
|
@@ -1556,7 +1639,131 @@ void main() {
|
|
|
1556
1639
|
|
|
1557
1640
|
${this.state===`recording`?`Recording...`:`Speak`}
|
|
1558
1641
|
</md-filled-button>
|
|
1559
|
-
`}_handleClick(){this.state=this.state===`idle`?`recording`:`idle`,this.dispatchEvent(new CustomEvent(`voice-toggle`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};
|
|
1642
|
+
`}_handleClick(){this.state=this.state===`idle`?`recording`:`idle`,this.dispatchEvent(new CustomEvent(`voice-toggle`,{bubbles:!0,composed:!0,detail:{state:this.state}}))}};y([(0,r.property)({type:String})],q.prototype,`state`,void 0),q=y([(0,r.customElement)(`scream-voice-button`)],q);var J=class extends n.LitElement{static{this.styles=n.css`
|
|
1643
|
+
:host {
|
|
1644
|
+
display: inline-flex;
|
|
1645
|
+
align-items: center;
|
|
1646
|
+
gap: 4px;
|
|
1647
|
+
padding: 8px 12px;
|
|
1648
|
+
background: var(--md-sys-color-surface-container-low);
|
|
1649
|
+
border-radius: 12px;
|
|
1650
|
+
border-bottom-left-radius: 4px;
|
|
1651
|
+
}
|
|
1652
|
+
`}render(){return n.html`
|
|
1653
|
+
<ui-typing-dot delay="0s"></ui-typing-dot>
|
|
1654
|
+
<ui-typing-dot delay="0.2s"></ui-typing-dot>
|
|
1655
|
+
<ui-typing-dot delay="0.4s"></ui-typing-dot>
|
|
1656
|
+
`}};J=y([(0,r.customElement)(`ui-typing-indicator`)],J);var Y=class extends n.LitElement{constructor(...e){super(...e),this.direction=`inbound`,this.variant=`contained`}static{this.styles=n.css`
|
|
1657
|
+
:host {
|
|
1658
|
+
display: flex;
|
|
1659
|
+
width: 100%;
|
|
1660
|
+
margin-bottom: 1rem;
|
|
1661
|
+
font-family: inherit;
|
|
1662
|
+
}
|
|
1663
|
+
|
|
1664
|
+
.item-container {
|
|
1665
|
+
display: flex;
|
|
1666
|
+
gap: 12px;
|
|
1667
|
+
width: 100%;
|
|
1668
|
+
align-items: flex-end;
|
|
1669
|
+
}
|
|
1670
|
+
|
|
1671
|
+
.item-container.inbound {
|
|
1672
|
+
justify-content: flex-start;
|
|
1673
|
+
}
|
|
1674
|
+
|
|
1675
|
+
.item-container.outbound {
|
|
1676
|
+
flex-direction: row-reverse;
|
|
1677
|
+
justify-content: flex-start; /* This correctly pushes to the right because of row-reverse */
|
|
1678
|
+
}
|
|
1679
|
+
|
|
1680
|
+
.avatar-slot {
|
|
1681
|
+
width: 32px;
|
|
1682
|
+
height: 32px;
|
|
1683
|
+
flex-shrink: 0;
|
|
1684
|
+
display: flex;
|
|
1685
|
+
align-items: center;
|
|
1686
|
+
justify-content: center;
|
|
1687
|
+
}
|
|
1688
|
+
|
|
1689
|
+
/* Hide avatar slot if no children are present */
|
|
1690
|
+
.avatar-slot:not(:has(*)) {
|
|
1691
|
+
display: none;
|
|
1692
|
+
}
|
|
1693
|
+
|
|
1694
|
+
.content-wrapper {
|
|
1695
|
+
display: flex;
|
|
1696
|
+
flex-direction: column;
|
|
1697
|
+
gap: 4px;
|
|
1698
|
+
max-width: 80%;
|
|
1699
|
+
}
|
|
1700
|
+
|
|
1701
|
+
.item-container.inbound .content-wrapper {
|
|
1702
|
+
align-items: flex-start;
|
|
1703
|
+
}
|
|
1704
|
+
|
|
1705
|
+
.item-container.outbound .content-wrapper {
|
|
1706
|
+
align-items: flex-end;
|
|
1707
|
+
}
|
|
1708
|
+
|
|
1709
|
+
.meta-slot {
|
|
1710
|
+
font-size: 0.7rem;
|
|
1711
|
+
font-weight: 500;
|
|
1712
|
+
opacity: 0.6;
|
|
1713
|
+
padding: 0 4px;
|
|
1714
|
+
display: flex;
|
|
1715
|
+
gap: 8px;
|
|
1716
|
+
}
|
|
1717
|
+
`}render(){return n.html`
|
|
1718
|
+
<div class=${(0,f.classMap)({"item-container":!0,[this.direction]:!0})}>
|
|
1719
|
+
<div class="avatar-slot">
|
|
1720
|
+
<slot name="avatar"></slot>
|
|
1721
|
+
</div>
|
|
1722
|
+
|
|
1723
|
+
<div class="content-wrapper">
|
|
1724
|
+
<ui-message-bubble .direction=${this.direction} .variant=${this.variant}>
|
|
1725
|
+
<slot></slot>
|
|
1726
|
+
</ui-message-bubble>
|
|
1727
|
+
<div class="meta-slot">
|
|
1728
|
+
<slot name="meta"></slot>
|
|
1729
|
+
</div>
|
|
1730
|
+
</div>
|
|
1731
|
+
</div>
|
|
1732
|
+
`}};y([(0,r.property)({type:String})],Y.prototype,`direction`,void 0),y([(0,r.property)({type:String})],Y.prototype,`variant`,void 0),Y=y([(0,r.customElement)(`ui-chat-item`)],Y);var X=class extends n.LitElement{static{this.styles=n.css`
|
|
1733
|
+
:host {
|
|
1734
|
+
display: block;
|
|
1735
|
+
height: 100%;
|
|
1736
|
+
width: 100%;
|
|
1737
|
+
overflow: hidden;
|
|
1738
|
+
}
|
|
1739
|
+
|
|
1740
|
+
.scroll-container {
|
|
1741
|
+
height: 100%;
|
|
1742
|
+
width: 100%;
|
|
1743
|
+
overflow-y: auto;
|
|
1744
|
+
display: flex;
|
|
1745
|
+
flex-direction: column;
|
|
1746
|
+
padding: 1rem;
|
|
1747
|
+
box-sizing: border-box;
|
|
1748
|
+
scroll-behavior: smooth;
|
|
1749
|
+
}
|
|
1750
|
+
|
|
1751
|
+
/* Scrollbar Styling */
|
|
1752
|
+
.scroll-container::-webkit-scrollbar {
|
|
1753
|
+
width: 6px;
|
|
1754
|
+
}
|
|
1755
|
+
.scroll-container::-webkit-scrollbar-track {
|
|
1756
|
+
background: transparent;
|
|
1757
|
+
}
|
|
1758
|
+
.scroll-container::-webkit-scrollbar-thumb {
|
|
1759
|
+
background: var(--md-sys-color-outline-variant);
|
|
1760
|
+
border-radius: 10px;
|
|
1761
|
+
}
|
|
1762
|
+
`}updated(e){super.updated(e),this.scrollToBottom()}scrollToBottom(){this._container&&(this._container.scrollTop=this._container.scrollHeight)}render(){return n.html`
|
|
1763
|
+
<div class="scroll-container">
|
|
1764
|
+
<slot @slotchange=${this.scrollToBottom}></slot>
|
|
1765
|
+
</div>
|
|
1766
|
+
`}};y([(0,r.query)(`.scroll-container`)],X.prototype,`_container`,void 0),X=y([(0,r.customElement)(`ui-chat-list`)],X);var Z=class extends n.LitElement{constructor(...e){super(...e),this.src=``,this.items=[],this.autoAdvance=!0,this._animationFrameId=0,this.state={src:``,isPlaying:!1,isBuffering:!1,currentTime:0,duration:0,volume:1,muted:!1,items:[],currentIndex:-1,autoAdvance:!0,analyserNode:void 0,play:()=>this.play(),pause:()=>this.pause(),togglePlay:()=>this._togglePlay(),seek:e=>this._seek(e),setVolume:e=>this._setVolume(e),toggleMute:()=>this._toggleMute(),next:()=>this.next(),previous:()=>this.previous(),select:e=>this.select(e)}}static{this.styles=n.css`
|
|
1560
1767
|
:host {
|
|
1561
1768
|
display: contents; /* We are completely invisible, just wrapping children */
|
|
1562
1769
|
}
|
|
@@ -1577,7 +1784,7 @@ void main() {
|
|
|
1577
1784
|
@error="${this._handleError}"
|
|
1578
1785
|
></audio>
|
|
1579
1786
|
<slot></slot>
|
|
1580
|
-
`}willUpdate(e){e.has(`src`)&&this._updateState({src:this.src,isPlaying:!1,currentTime:0,error:void 0}),e.has(`items`)&&(this._updateState({items:this.items}),this.items.length>0&&!this.src&&this.state.currentIndex===-1&&this.select(0)),e.has(`autoAdvance`)&&this._updateState({autoAdvance:this.autoAdvance})}updated(e){e.has(`src`)&&this._audioEl&&(this._audioEl.load(),this.state.isPlaying&&this.play())}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._audioContext&&this._audioContext.state!==`closed`&&this._audioContext.close()}_updateState(e){this.state={...this.state,...e},this.dispatchEvent(new CustomEvent(`state-change`,{detail:this.state,bubbles:!0,composed:!0}))}_setupAudioContext(){if(!(this._audioContext||!this._audioEl))try{this._audioContext=new(window.AudioContext||window.webkitAudioContext),this._analyserNode=this._audioContext.createAnalyser(),this._analyserNode.fftSize=256,this._analyserNode.smoothingTimeConstant=.8,this._mediaSource=this._audioContext.createMediaElementSource(this._audioEl),this._mediaSource.connect(this._analyserNode),this._analyserNode.connect(this._audioContext.destination),this._updateState({analyserNode:this._analyserNode})}catch(e){console.warn(`Failed to set up AudioContext for visualizer:`,e)}}play(){this._audioEl.src&&(this._setupAudioContext(),this._audioContext?.state===`suspended`&&this._audioContext.resume(),this._audioEl.play().catch(e=>{console.error(`Error playing audio`,e),this._updateState({error:`Playback failed`})}))}pause(){this._audioEl&&this._audioEl.pause()}_togglePlay(){this.state.isPlaying?this.pause():this.play()}_seek(e){this._audioEl&&(this._audioEl.currentTime=e,this._updateState({currentTime:e}))}_setVolume(e){this._audioEl&&(this._audioEl.volume=e,this._updateState({volume:e,muted:e===0}))}_toggleMute(){this._audioEl&&(this._audioEl.muted=!this._audioEl.muted,this._updateState({muted:this._audioEl.muted}))}next(){if(this.items.length===0)return;let e=(this.state.currentIndex+1)%this.items.length;this.select(e)}previous(){if(this.items.length===0)return;let e=(this.state.currentIndex-1+this.items.length)%this.items.length;this.select(e)}select(e){if(e>=0&&e<this.items.length){let t=this.items[e];this.src=t.src,this._updateState({currentIndex:e,src:t.src,currentTime:0})}}_handleLoadedMetadata(){this._updateState({duration:this._audioEl.duration})}_handleEnded(){this.autoAdvance&&this.items.length>0?(this.next(),this.play()):(this._updateState({isPlaying:!1,currentTime:0}),this._audioEl.currentTime=0)}_handlePlaying(){this._updateState({isPlaying:!0,isBuffering:!1,error:void 0}),this._startTrackingTime()}_handlePause(){this._updateState({isPlaying:!1}),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleError(){this._updateState({error:`Error loading audio`,isPlaying:!1,isBuffering:!1})}_startTrackingTime(){let e=()=>{this._audioEl&&this.state.isPlaying&&(Math.abs(this.state.currentTime-this._audioEl.currentTime)>.05&&this._updateState({currentTime:this._audioEl.currentTime}),this._animationFrameId=requestAnimationFrame(e))};this._animationFrameId=requestAnimationFrame(e)}};
|
|
1787
|
+
`}willUpdate(e){e.has(`src`)&&this._updateState({src:this.src,isPlaying:!1,currentTime:0,error:void 0}),e.has(`items`)&&(this._updateState({items:this.items}),this.items.length>0&&!this.src&&this.state.currentIndex===-1&&this.select(0)),e.has(`autoAdvance`)&&this._updateState({autoAdvance:this.autoAdvance})}updated(e){e.has(`src`)&&this._audioEl&&(this._audioEl.load(),this.state.isPlaying&&this.play())}disconnectedCallback(){super.disconnectedCallback(),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId),this._audioContext&&this._audioContext.state!==`closed`&&this._audioContext.close()}_updateState(e){this.state={...this.state,...e},this.dispatchEvent(new CustomEvent(`state-change`,{detail:this.state,bubbles:!0,composed:!0}))}_setupAudioContext(){if(!(this._audioContext||!this._audioEl))try{this._audioContext=new(window.AudioContext||window.webkitAudioContext),this._analyserNode=this._audioContext.createAnalyser(),this._analyserNode.fftSize=256,this._analyserNode.smoothingTimeConstant=.8,this._mediaSource=this._audioContext.createMediaElementSource(this._audioEl),this._mediaSource.connect(this._analyserNode),this._analyserNode.connect(this._audioContext.destination),this._updateState({analyserNode:this._analyserNode})}catch(e){console.warn(`Failed to set up AudioContext for visualizer:`,e)}}play(){this._audioEl.src&&(this._setupAudioContext(),this._audioContext?.state===`suspended`&&this._audioContext.resume(),this._audioEl.play().catch(e=>{console.error(`Error playing audio`,e),this._updateState({error:`Playback failed`})}))}pause(){this._audioEl&&this._audioEl.pause()}_togglePlay(){this.state.isPlaying?this.pause():this.play()}_seek(e){this._audioEl&&(this._audioEl.currentTime=e,this._updateState({currentTime:e}))}_setVolume(e){this._audioEl&&(this._audioEl.volume=e,this._updateState({volume:e,muted:e===0}))}_toggleMute(){this._audioEl&&(this._audioEl.muted=!this._audioEl.muted,this._updateState({muted:this._audioEl.muted}))}next(){if(this.items.length===0)return;let e=(this.state.currentIndex+1)%this.items.length;this.select(e)}previous(){if(this.items.length===0)return;let e=(this.state.currentIndex-1+this.items.length)%this.items.length;this.select(e)}select(e){if(e>=0&&e<this.items.length){let t=this.items[e];this.src=t.src,this._updateState({currentIndex:e,src:t.src,currentTime:0})}}_handleLoadedMetadata(){this._updateState({duration:this._audioEl.duration})}_handleEnded(){this.autoAdvance&&this.items.length>0?(this.next(),this.play()):(this._updateState({isPlaying:!1,currentTime:0}),this._audioEl.currentTime=0)}_handlePlaying(){this._updateState({isPlaying:!0,isBuffering:!1,error:void 0}),this._startTrackingTime()}_handlePause(){this._updateState({isPlaying:!1}),this._animationFrameId&&cancelAnimationFrame(this._animationFrameId)}_handleError(){this._updateState({error:`Error loading audio`,isPlaying:!1,isBuffering:!1})}_startTrackingTime(){let e=()=>{this._audioEl&&this.state.isPlaying&&(Math.abs(this.state.currentTime-this._audioEl.currentTime)>.05&&this._updateState({currentTime:this._audioEl.currentTime}),this._animationFrameId=requestAnimationFrame(e))};this._animationFrameId=requestAnimationFrame(e)}};y([(0,r.property)({type:String})],Z.prototype,`src`,void 0),y([(0,r.property)({type:Array})],Z.prototype,`items`,void 0),y([(0,r.property)({type:Boolean})],Z.prototype,`autoAdvance`,void 0),y([(0,r.query)(`audio`)],Z.prototype,`_audioEl`,void 0),y([g({context:v}),(0,r.state)()],Z.prototype,`state`,void 0),Z=y([(0,r.customElement)(`ui-audio-provider`)],Z);var Q=class extends n.LitElement{static{this.styles=n.css`
|
|
1581
1788
|
:host {
|
|
1582
1789
|
display: inline-block;
|
|
1583
1790
|
width: 100%;
|
|
@@ -1621,8 +1828,8 @@ void main() {
|
|
|
1621
1828
|
</div>
|
|
1622
1829
|
</div>
|
|
1623
1830
|
</ui-audio-provider>
|
|
1624
|
-
`}};
|
|
1831
|
+
`}};y([(0,r.property)({type:Object})],Q.prototype,`item`,void 0),Q=y([(0,r.customElement)(`ui-audio-player`)],Q);var $=class extends n.LitElement{constructor(...e){super(...e),this._context={state:`idle`,transcript:``,partialTranscript:``,analyserNode:void 0,start:()=>this.start(),stop:()=>this.stop(),cancel:()=>this.cancel()},this.state=`idle`,this.simulation=!1,this.manual=!1,this.transcript=``,this.partialTranscript=``,this._fakeTranscript=[`I`,` am`,` recording`,` a`,` message`,` using`,` atomic`,` components...`]}static{this.styles=n.css`
|
|
1625
1832
|
:host {
|
|
1626
1833
|
display: contents;
|
|
1627
1834
|
}
|
|
1628
|
-
`}willUpdate(e){let t={};e.has(`state`)&&(t.state=this.state),e.has(`transcript`)&&(t.transcript=this.transcript),e.has(`partialTranscript`)&&(t.partialTranscript=this.partialTranscript),Object.keys(t).length>0&&this._updateContext(t)}async start(){if(this._context.state===`idle`){if(this.manual){this.dispatchEvent(new CustomEvent(`speech-request-start`,{bubbles:!0,composed:!0}));return}try{if(this._updateContext({state:`connecting`}),this.simulation)this._analyser=
|
|
1835
|
+
`}willUpdate(e){let t={};e.has(`state`)&&(t.state=this.state),e.has(`transcript`)&&(t.transcript=this.transcript),e.has(`partialTranscript`)&&(t.partialTranscript=this.partialTranscript),Object.keys(t).length>0&&this._updateContext(t)}async start(){if(this._context.state===`idle`){if(this.manual){this.dispatchEvent(new CustomEvent(`speech-request-start`,{bubbles:!0,composed:!0}));return}try{if(this._updateContext({state:`connecting`}),this.simulation)this._analyser=M();else{this._stream=await navigator.mediaDevices.getUserMedia({audio:!0}),this._audioCtx||=new(window.AudioContext||window.webkitAudioContext);let e=this._audioCtx.createMediaStreamSource(this._stream);this._analyser=this._audioCtx.createAnalyser(),this._analyser.fftSize=256,e.connect(this._analyser)}if(this._updateContext({state:`recording`,analyserNode:this._analyser,transcript:``,partialTranscript:this.simulation?`Listening...`:``}),this.simulation){let e=0;this._transcriptInterval=setInterval(()=>{if(e<this._fakeTranscript.length){e===0&&this._updateContext({partialTranscript:``});let t=this._context.partialTranscript;this._updateContext({partialTranscript:t+this._fakeTranscript[e]}),e++}},500)}this.dispatchEvent(new CustomEvent(`speech-start`,{bubbles:!0,composed:!0,detail:{stream:this._stream}}))}catch(e){console.error(`Failed to start speech recording`,e),this._updateContext({state:`error`,error:e.message})}}}stop(){if(this._context.state===`recording`){if(this.manual){this.dispatchEvent(new CustomEvent(`speech-request-stop`,{bubbles:!0,composed:!0}));return}this._transcriptInterval&&clearInterval(this._transcriptInterval),this._cleanupStream(),this._updateContext({state:`processing`,transcript:this.simulation?this._context.partialTranscript:this.transcript,partialTranscript:``}),this.dispatchEvent(new CustomEvent(`speech-stop`,{bubbles:!0,composed:!0})),this.simulation&&setTimeout(()=>{this._context.state===`processing`&&(this._updateContext({state:`success`}),setTimeout(()=>this.cancel(),2e3))},1500)}}cancel(){this._transcriptInterval&&clearInterval(this._transcriptInterval),this._cleanupStream(),this._updateContext({state:`idle`,transcript:``,partialTranscript:``,analyserNode:void 0}),this.dispatchEvent(new CustomEvent(`speech-cancel`,{bubbles:!0,composed:!0}))}_cleanupStream(){this._stream&&=(this._stream.getTracks().forEach(e=>e.stop()),void 0)}_updateContext(e){this._context={...this._context,...e},e.state&&(this.state=e.state),this.dispatchEvent(new CustomEvent(`state-change`,{bubbles:!0,composed:!0,detail:this._context}))}render(){return n.html`<slot></slot>`}};y([g({context:E}),(0,r.state)()],$.prototype,`_context`,void 0),y([(0,r.property)({type:String})],$.prototype,`state`,void 0),y([(0,r.property)({type:Boolean})],$.prototype,`simulation`,void 0),y([(0,r.property)({type:Boolean})],$.prototype,`manual`,void 0),y([(0,r.property)({type:String})],$.prototype,`transcript`,void 0),y([(0,r.property)({type:String})],$.prototype,`partialTranscript`,void 0),$=y([(0,r.customElement)(`ui-speech-provider`)],$),Object.defineProperty(e,`ScreamVoiceButton`,{enumerable:!0,get:function(){return q}}),Object.defineProperty(e,`Ui3dFlip`,{enumerable:!0,get:function(){return U}}),Object.defineProperty(e,`UiAudioNextButton`,{enumerable:!0,get:function(){return x}}),Object.defineProperty(e,`UiAudioPlayButton`,{enumerable:!0,get:function(){return b}}),Object.defineProperty(e,`UiAudioPlayer`,{enumerable:!0,get:function(){return Q}}),Object.defineProperty(e,`UiAudioPrevButton`,{enumerable:!0,get:function(){return S}}),Object.defineProperty(e,`UiAudioProgressSlider`,{enumerable:!0,get:function(){return C}}),Object.defineProperty(e,`UiAudioProvider`,{enumerable:!0,get:function(){return Z}}),Object.defineProperty(e,`UiAudioTimeDisplay`,{enumerable:!0,get:function(){return w}}),Object.defineProperty(e,`UiAudioVolumeSlider`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(e,`UiChatItem`,{enumerable:!0,get:function(){return Y}}),Object.defineProperty(e,`UiChatList`,{enumerable:!0,get:function(){return X}}),Object.defineProperty(e,`UiLiveWaveform`,{enumerable:!0,get:function(){return I}}),Object.defineProperty(e,`UiMessageBubble`,{enumerable:!0,get:function(){return A}}),Object.defineProperty(e,`UiMicSelector`,{enumerable:!0,get:function(){return z}}),Object.defineProperty(e,`UiOrb`,{enumerable:!0,get:function(){return H}}),Object.defineProperty(e,`UiPlaylist`,{enumerable:!0,get:function(){return W}}),Object.defineProperty(e,`UiScrollingWaveform`,{enumerable:!0,get:function(){return L}}),Object.defineProperty(e,`UiShimmeringText`,{enumerable:!0,get:function(){return k}}),Object.defineProperty(e,`UiShowcaseCard`,{enumerable:!0,get:function(){return G}}),Object.defineProperty(e,`UiSpectrumVisualizer`,{enumerable:!0,get:function(){return R}}),Object.defineProperty(e,`UiSpeechCancelButton`,{enumerable:!0,get:function(){return O}}),Object.defineProperty(e,`UiSpeechPreview`,{enumerable:!0,get:function(){return V}}),Object.defineProperty(e,`UiSpeechProvider`,{enumerable:!0,get:function(){return $}}),Object.defineProperty(e,`UiSpeechRecordButton`,{enumerable:!0,get:function(){return D}}),Object.defineProperty(e,`UiTypingDot`,{enumerable:!0,get:function(){return j}}),Object.defineProperty(e,`UiTypingIndicator`,{enumerable:!0,get:function(){return J}}),Object.defineProperty(e,`UiVoiceButton`,{enumerable:!0,get:function(){return K}}),Object.defineProperty(e,`UiVoicePicker`,{enumerable:!0,get:function(){return B}}),Object.defineProperty(e,`UiWaveform`,{enumerable:!0,get:function(){return F}}),e.applyCanvasEdgeFade=P,e.audioPlayerContext=v,e.createAudioAnalyser=_e,e.createMockAnalyser=M,e.generateRandomAudioData=ve,e.getNormalizedFrequencyData=N,e.speechContext=E});
|