@actioneer/ads 0.3.1 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ai-elements/agent-trace.d.ts +87 -0
- package/components/ai-elements/agent-trace.js +180 -0
- package/components/ai-elements/chain-of-thought.js +63 -63
- package/components/ai-elements/index.d.ts +1 -0
- package/components/ai-elements/tool.js +3 -3
- package/components/ai-elements/voice.d.ts +24 -14
- package/components/ai-elements/voice.js +237 -670
- package/components/assistant-ui/composer-harness.js +5 -4
- package/components/index.js +259 -257
- package/lib/icons.js +2 -2
- package/llms.txt +5 -0
- package/manifest.json +50 -4
- package/package.json +1 -1
- package/styles.css +5 -5
- package/theme.css +2 -2
- package/components/agents-ui/agent-audio-visualizer-aura.d.ts +0 -11
- package/components/agents-ui/agent-audio-visualizer-aura.js +0 -277
- package/components/agents-ui/agent-audio-visualizer-wave.d.ts +0 -12
- package/components/agents-ui/agent-audio-visualizer-wave.js +0 -203
- package/components/agents-ui/react-shader-toy.d.ts +0 -87
- package/components/agents-ui/react-shader-toy.js +0 -531
package/lib/icons.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as r } from "react/jsx-runtime";
|
|
3
3
|
import { HugeiconsIcon as s } from "@hugeicons/react";
|
|
4
|
-
import { Tick02Icon as a, Copy01Icon as i, File02Icon as I, Cancel01Icon as l, Upload01Icon as h, ViewOffIcon as C, ViewIcon as g, MinusSignIcon as p, PlusSignIcon as f, ArrowDown01Icon as d, Search01Icon as u, InformationCircleIcon as k, AlertCircleIcon as w, Alert02Icon as A, CheckmarkCircle02Icon as L, ArrowLeft01Icon as m, ArrowRight01Icon as S, DatabaseIcon as M, Maximize01Icon as O, Magnet01Icon as P, ArrowUp01Icon as T, ArrowUpDownIcon as U, InboxIcon as B, ArrowLeft02Icon as D, MoreHorizontalIcon as y,
|
|
4
|
+
import { Tick02Icon as a, Copy01Icon as i, File02Icon as I, Cancel01Icon as l, Upload01Icon as h, ViewOffIcon as C, ViewIcon as g, MinusSignIcon as p, PlusSignIcon as f, ArrowDown01Icon as d, Search01Icon as u, InformationCircleIcon as k, AlertCircleIcon as w, Alert02Icon as A, CheckmarkCircle02Icon as L, ArrowLeft01Icon as m, ArrowRight01Icon as S, DatabaseIcon as M, Maximize01Icon as O, Magnet01Icon as P, ArrowUp01Icon as T, ArrowUpDownIcon as U, InboxIcon as B, ArrowLeft02Icon as D, MoreHorizontalIcon as y, SparklesIcon as F, Wrench01Icon as R, CancelCircleIcon as b, Clock01Icon as x, CircleDashedIcon as H, RefreshIcon as v, Attachment01Icon as G, QuoteDownIcon as V, BrainIcon as z, Loading03Icon as E, AtIcon as W, BoltIcon as N, Table01Icon as Q, File01Icon as j, Download01Icon as q, Image01Icon as J, BracesIcon as K, MusicNote01Icon as X, Video01Icon as Y, ImageNotFound01Icon as Z, Activity01Icon as _, AiChat02Icon as $, ArrowDown02Icon as oo, ArrowRight02Icon as no, ArrowUp02Icon as co, Route01Icon as eo, BlocksIcon as to, BookOpen01Icon as ro, Calendar01Icon as so, Call02Icon as ao, CheckListIcon as io, CodeIcon as Io, ComponentIcon as lo, LinkSquare02Icon as ho, Folder01Icon as Co, FolderOpenIcon as go, DashboardSpeed01Icon as po, GitBranchIcon as fo, HashtagIcon as uo, HistoryIcon as ko, Home01Icon as wo, ImageUploadIcon as Ao, GridViewIcon as Lo, Leaf01Icon as mo, Idea01Icon as So, Link01Icon as Mo, Logout01Icon as Oo, Mail01Icon as Po, Mic01Icon as To, MicOff01Icon as Uo, MoreVerticalIcon as Bo, PaintBoardIcon as Do, SidebarLeftIcon as yo, PencilEdit02Icon as Fo, PhoneOff01Icon as Ro, PieChartIcon as bo, PlugSocketIcon as xo, RocketIcon as Ho, Settings01Icon as vo, ShapesIcon as Go, Share01Icon as Vo, StarIcon as zo, StopIcon as Eo, Target01Icon as Wo, Telescope01Icon as No, TextFontIcon as Qo, ToggleOnIcon as jo, Delete02Icon as qo, UserIcon as Jo, UserGroupIcon as Ko, ArrowUpRight01Icon as Xo } from "@hugeicons/core-free-icons";
|
|
5
5
|
function o(c, e) {
|
|
6
6
|
function n(t) {
|
|
7
7
|
return /* @__PURE__ */ r(s, { icon: c, size: "1em", ...t });
|
|
8
8
|
}
|
|
9
9
|
return n.displayName = e, n;
|
|
10
10
|
}
|
|
11
|
-
const $o = o(
|
|
11
|
+
const $o = o(oo, "ArrowDown"), on = o(D, "ArrowLeft"), nn = o(no, "ArrowRight"), cn = o(co, "ArrowUp"), en = o(Xo, "ArrowUpRight"), tn = o(d, "ChevronDown"), rn = o(m, "ChevronLeft"), sn = o(S, "ChevronRight"), an = o(T, "ChevronUp"), In = o(U, "SortIcon"), ln = o(ho, "ExternalLink"), hn = o(yo, "PanelLeft"), Cn = o(W, "At"), gn = o(ao, "Call"), pn = o(l, "Close"), fn = o(b, "CloseCircle"), dn = o(i, "Copy"), un = o(q, "Download"), kn = o(Oo, "LogOut"), wn = o(To, "Mic"), An = o(Uo, "MicOff"), Ln = o(Ro, "PhoneOff"), mn = o(Fo, "Pencil"), Sn = o(V, "Quote"), Mn = o(g, "Eye"), On = o(C, "EyeOff"), Pn = o(uo, "Hash"), Tn = o(Ao, "ImageUpload"), Un = o(h, "Upload"), Bn = o(Qo, "TextFont"), Dn = o(jo, "ToggleOn"), yn = o(so, "Calendar"), Fn = o(x, "Clock"), Rn = o(Io, "Code"), bn = o(Eo, "Stop"), xn = o(P, "Magnet"), Hn = o(O, "Maximize"), vn = o(p, "Minus"), Gn = o(y, "MoreHorizontal"), Vn = o(Bo, "MoreVertical"), zn = o(Mo, "Link"), En = o(f, "Plus"), Wn = o(v, "Refresh"), Nn = o(eo, "AuditTrail"), Qn = o(u, "Search"), jn = o(Vo, "Share"), qn = o(qo, "Trash"), Jn = o(a, "Check"), Kn = o(E, "Loader"), Xn = o(L, "CheckCircle"), Yn = o(k, "Info"), Zn = o(A, "Warning"), _n = o(w, "WarningCircle"), $n = o(_, "Activity"), oc = o($, "AgentChat"), nc = o(N, "Bolt"), cc = o(ro, "BookOpen"), ec = o(z, "Brain"), tc = o(io, "CheckList"), rc = o(lo, "Component"), sc = o(M, "Database"), ac = o(Q, "Table"), ic = o(j, "File"), Ic = o(I, "FileText"), lc = o(Co, "Folder"), hc = o(J, "Image"), Cc = o(Z, "ImageOff"), gc = o(X, "Music"), pc = o(Y, "Video"), fc = o(K, "Braces"), dc = o(go, "FolderOpen"), uc = o(po, "Gauge"), kc = o(fo, "GitBranch"), wc = o(ko, "HistoryClock"), Ac = o(wo, "Home"), Lc = o(to, "Blocks"), mc = o(B, "Inbox"), Sc = o(So, "Lightbulb"), Mc = o(mo, "Leaf"), Oc = o(Lo, "LayoutGrid"), Pc = o(Po, "Mail"), Tc = o(Do, "Palette"), Uc = o(bo, "PieChart"), Bc = o(xo, "Plug"), Dc = o(Ho, "Rocket"), yc = o(vo, "Settings"), Fc = o(Go, "Shapes"), Rc = o(F, "Sparkles"), bc = o(zo, "Star"), xc = o(No, "Telescope"), Hc = o(Wo, "Target"), vc = o(Jo, "User"), Gc = o(Ko, "Users"), Vc = o(G, "Paperclip"), zc = o(H, "CircleDashed"), Ec = o(R, "Wrench");
|
|
12
12
|
export {
|
|
13
13
|
$n as Activity,
|
|
14
14
|
oc as AgentChat,
|
package/llms.txt
CHANGED
|
@@ -546,6 +546,7 @@ When tabs and a search field control the same content, they share one responsive
|
|
|
546
546
|
|
|
547
547
|
### AI Elements
|
|
548
548
|
|
|
549
|
+
- [AgentTrace] — component [docs](https://ads.actioneer.dev/#/agent-trace)
|
|
549
550
|
- [AIChart] — Wrap a source-backed chart produced during agent work so its query, partial-data, rendering, ready, error, and cancelled states stay distinct from the chart specification itself. (variants: status: pending|querying|partial|rendering|ready|error|cancelled) [docs](https://ads.actioneer.dev/#/ai/chart)
|
|
550
551
|
- [ChainOfThought] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
|
|
551
552
|
- [ChainOfThoughtContent] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
|
|
@@ -624,6 +625,10 @@ When tabs and a search field control the same content, they share one responsive
|
|
|
624
625
|
- [VoiceDisconnectButton] — component [docs](https://ads.actioneer.dev/#/ai/voice)
|
|
625
626
|
- [VoiceMuteButton] — component [docs](https://ads.actioneer.dev/#/ai/voice)
|
|
626
627
|
- [VoiceStatusDot] — component [docs](https://ads.actioneer.dev/#/ai/voice)
|
|
628
|
+
- [AgentTraceCall] — TypeScript type
|
|
629
|
+
- [AgentTraceProps] — TypeScript type
|
|
630
|
+
- [AgentTraceStep] — TypeScript type
|
|
631
|
+
- [AgentTraceStepStatus] — TypeScript type
|
|
627
632
|
- [AIChartProgress] — TypeScript type
|
|
628
633
|
- [AIChartProps] — TypeScript type
|
|
629
634
|
- [AIChartStatus] — TypeScript type
|
package/manifest.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@actioneer/ads",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"importPath": "@actioneer/ads",
|
|
5
5
|
"styleImport": "@import \"@actioneer/ads/styles.css\";",
|
|
6
6
|
"families": [
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
"Chat"
|
|
17
17
|
],
|
|
18
18
|
"counts": {
|
|
19
|
-
"total":
|
|
20
|
-
"component":
|
|
21
|
-
"type":
|
|
19
|
+
"total": 674,
|
|
20
|
+
"component": 323,
|
|
21
|
+
"type": 288,
|
|
22
22
|
"hook": 10,
|
|
23
23
|
"util": 53
|
|
24
24
|
},
|
|
@@ -4409,6 +4409,23 @@
|
|
|
4409
4409
|
"importPath": "@actioneer/ads",
|
|
4410
4410
|
"module": "selection-action-bar"
|
|
4411
4411
|
},
|
|
4412
|
+
{
|
|
4413
|
+
"name": "AgentTrace",
|
|
4414
|
+
"family": "AI Elements",
|
|
4415
|
+
"kind": "component",
|
|
4416
|
+
"importPath": "@actioneer/ads",
|
|
4417
|
+
"module": "agent-trace",
|
|
4418
|
+
"showcaseUrl": "https://ads.actioneer.dev/#/agent-trace",
|
|
4419
|
+
"props": [
|
|
4420
|
+
"steps",
|
|
4421
|
+
"mainAgent",
|
|
4422
|
+
"slowSeconds",
|
|
4423
|
+
"reviewedStepIds",
|
|
4424
|
+
"onSendForReview",
|
|
4425
|
+
"slowMessage",
|
|
4426
|
+
"renderCall"
|
|
4427
|
+
]
|
|
4428
|
+
},
|
|
4412
4429
|
{
|
|
4413
4430
|
"name": "AIChart",
|
|
4414
4431
|
"family": "AI Elements",
|
|
@@ -5363,6 +5380,7 @@
|
|
|
5363
5380
|
"volume",
|
|
5364
5381
|
"palette",
|
|
5365
5382
|
"seed",
|
|
5383
|
+
"fill",
|
|
5366
5384
|
"onReady"
|
|
5367
5385
|
]
|
|
5368
5386
|
},
|
|
@@ -5436,6 +5454,34 @@
|
|
|
5436
5454
|
"className"
|
|
5437
5455
|
]
|
|
5438
5456
|
},
|
|
5457
|
+
{
|
|
5458
|
+
"name": "AgentTraceCall",
|
|
5459
|
+
"family": "AI Elements",
|
|
5460
|
+
"kind": "type",
|
|
5461
|
+
"importPath": "@actioneer/ads",
|
|
5462
|
+
"module": "agent-trace"
|
|
5463
|
+
},
|
|
5464
|
+
{
|
|
5465
|
+
"name": "AgentTraceProps",
|
|
5466
|
+
"family": "AI Elements",
|
|
5467
|
+
"kind": "type",
|
|
5468
|
+
"importPath": "@actioneer/ads",
|
|
5469
|
+
"module": "agent-trace"
|
|
5470
|
+
},
|
|
5471
|
+
{
|
|
5472
|
+
"name": "AgentTraceStep",
|
|
5473
|
+
"family": "AI Elements",
|
|
5474
|
+
"kind": "type",
|
|
5475
|
+
"importPath": "@actioneer/ads",
|
|
5476
|
+
"module": "agent-trace"
|
|
5477
|
+
},
|
|
5478
|
+
{
|
|
5479
|
+
"name": "AgentTraceStepStatus",
|
|
5480
|
+
"family": "AI Elements",
|
|
5481
|
+
"kind": "type",
|
|
5482
|
+
"importPath": "@actioneer/ads",
|
|
5483
|
+
"module": "agent-trace"
|
|
5484
|
+
},
|
|
5439
5485
|
{
|
|
5440
5486
|
"name": "AIChartProgress",
|
|
5441
5487
|
"family": "AI Elements",
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -122,8 +122,8 @@
|
|
|
122
122
|
/* ---- Elevation ---- ONE soft token (Claude-panel style).
|
|
123
123
|
Delineate surfaces with fill color first; add this to gently lift them. */
|
|
124
124
|
--shadow-elevation: 0 0 0 1px rgb(10 10 11 / 0.03),
|
|
125
|
-
0 1px 2px 0 rgb(10 10 11 / 0.
|
|
126
|
-
0 8px
|
|
125
|
+
0 1px 2px 0 rgb(10 10 11 / 0.04),
|
|
126
|
+
0 8px 28px -8px rgb(10 10 11 / 0.09);
|
|
127
127
|
|
|
128
128
|
/* ---- CTA inner glow ---- luminous inset highlight for primary buttons
|
|
129
129
|
(adapted from the "AI button" Figma): a crisp top-edge catch plus a soft
|
|
@@ -775,7 +775,7 @@
|
|
|
775
775
|
position: absolute;
|
|
776
776
|
inset-block: 0;
|
|
777
777
|
left: 0;
|
|
778
|
-
border-left: 1px solid var(--border);
|
|
778
|
+
border-left: 1px solid var(--border-strong);
|
|
779
779
|
}
|
|
780
780
|
.ads-tree-rail:first-child::before,
|
|
781
781
|
.ads-tree-branch:first-child::before {
|
|
@@ -794,8 +794,8 @@
|
|
|
794
794
|
top: 0;
|
|
795
795
|
height: var(--tree-elbow, 1.125rem);
|
|
796
796
|
width: 1rem;
|
|
797
|
-
border-bottom: 1px solid var(--border);
|
|
798
|
-
border-left: 1px solid var(--border);
|
|
797
|
+
border-bottom: 1px solid var(--border-strong);
|
|
798
|
+
border-left: 1px solid var(--border-strong);
|
|
799
799
|
border-bottom-left-radius: 9px;
|
|
800
800
|
}
|
|
801
801
|
/* Let the consumer's Tailwind discover the classes ADS components use. */
|
package/theme.css
CHANGED
|
@@ -95,8 +95,8 @@
|
|
|
95
95
|
/* ---- Elevation ---- ONE soft token (Claude-panel style).
|
|
96
96
|
Delineate surfaces with fill color first; add this to gently lift them. */
|
|
97
97
|
--shadow-elevation: 0 0 0 1px rgb(10 10 11 / 0.03),
|
|
98
|
-
0 1px 2px 0 rgb(10 10 11 / 0.
|
|
99
|
-
0 8px
|
|
98
|
+
0 1px 2px 0 rgb(10 10 11 / 0.04),
|
|
99
|
+
0 8px 28px -8px rgb(10 10 11 / 0.09);
|
|
100
100
|
|
|
101
101
|
/* ---- CTA inner glow ---- luminous inset highlight for primary buttons
|
|
102
102
|
(adapted from the "AI button" Figma): a crisp top-edge catch plus a soft
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { VoiceVisualizerColor, VoiceVisualizerDriver } from '../../hooks/agents-ui/voice-visualizer-types';
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
export interface AgentAudioVisualizerAuraProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, VoiceVisualizerDriver {
|
|
4
|
-
/** Normalized RGB shader color. */
|
|
5
|
-
color?: VoiceVisualizerColor;
|
|
6
|
-
/** Hue variation across aura layers. */
|
|
7
|
-
colorShift?: number;
|
|
8
|
-
themeMode?: "dark" | "light";
|
|
9
|
-
}
|
|
10
|
-
/** Internal ADS port of LiveKit Agents UI's Aura visualizer. */
|
|
11
|
-
export declare const AgentAudioVisualizerAura: React.ForwardRefExoticComponent<AgentAudioVisualizerAuraProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,277 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as d } from "react/jsx-runtime";
|
|
3
|
-
import * as x from "react";
|
|
4
|
-
import { ReactShaderToy as y } from "./react-shader-toy.js";
|
|
5
|
-
import { useAgentAudioVisualizerAura as b } from "../../hooks/agents-ui/use-agent-audio-visualizer-aura.js";
|
|
6
|
-
import { cn as S } from "../../lib/cn.js";
|
|
7
|
-
const h = [0.122, 0.835, 0.976], A = `
|
|
8
|
-
const float TAU = 6.283185;
|
|
9
|
-
|
|
10
|
-
// Noise for dithering
|
|
11
|
-
vec2 randFibo(vec2 p) {
|
|
12
|
-
p = fract(p * vec2(443.897, 441.423));
|
|
13
|
-
p += dot(p, p.yx + 19.19);
|
|
14
|
-
return fract((p.xx + p.yx) * p.xy);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
// Tonemap
|
|
18
|
-
vec3 Tonemap(vec3 x) {
|
|
19
|
-
x *= 4.0;
|
|
20
|
-
return x / (1.0 + x);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
// Luma for alpha
|
|
24
|
-
float luma(vec3 color) {
|
|
25
|
-
return dot(color, vec3(0.299, 0.587, 0.114));
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
// RGB to HSV
|
|
29
|
-
vec3 rgb2hsv(vec3 c) {
|
|
30
|
-
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
|
|
31
|
-
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
|
|
32
|
-
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
|
|
33
|
-
float d = q.x - min(q.w, q.y);
|
|
34
|
-
float e = 1.0e-10;
|
|
35
|
-
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
// HSV to RGB
|
|
39
|
-
vec3 hsv2rgb(vec3 c) {
|
|
40
|
-
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
|
|
41
|
-
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
|
|
42
|
-
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// SDF shapes
|
|
46
|
-
float sdCircle(vec2 st, float r) {
|
|
47
|
-
return length(st) - r;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
float sdLine(vec2 p, float r) {
|
|
51
|
-
float halfLen = r * 2.0;
|
|
52
|
-
vec2 a = vec2(-halfLen, 0.0);
|
|
53
|
-
vec2 b = vec2(halfLen, 0.0);
|
|
54
|
-
vec2 pa = p - a;
|
|
55
|
-
vec2 ba = b - a;
|
|
56
|
-
float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
|
|
57
|
-
return length(pa - ba * h);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
float getSdf(vec2 st) {
|
|
61
|
-
if(uShape == 1.0) return sdCircle(st, uScale);
|
|
62
|
-
else if(uShape == 2.0) return sdLine(st, uScale);
|
|
63
|
-
return sdCircle(st, uScale); // Default
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
vec2 turb(vec2 pos, float t, float it) {
|
|
67
|
-
// Initial rotation matrix for swirl direction
|
|
68
|
-
mat2 rotation = mat2(0.6, -0.25, 0.25, 0.9);
|
|
69
|
-
// Secondary rotation applied each iteration (approx 53 degree rotation)
|
|
70
|
-
mat2 layerRotation = mat2(0.6, -0.8, 0.8, 0.6);
|
|
71
|
-
|
|
72
|
-
float frequency = mix(2.0, 15.0, uFrequency);
|
|
73
|
-
float amplitude = uAmplitude;
|
|
74
|
-
float frequencyGrowth = 1.4;
|
|
75
|
-
float animTime = t * 0.1 * uSpeed;
|
|
76
|
-
|
|
77
|
-
const int LAYERS = 4;
|
|
78
|
-
for(int i = 0; i < LAYERS; i++) {
|
|
79
|
-
// Calculate wave displacement for this layer
|
|
80
|
-
vec2 rotatedPos = pos * rotation;
|
|
81
|
-
vec2 wave = sin(frequency * rotatedPos + float(i) * animTime + it);
|
|
82
|
-
|
|
83
|
-
// Apply displacement along rotation direction
|
|
84
|
-
pos += (amplitude / frequency) * rotation[0] * wave;
|
|
85
|
-
|
|
86
|
-
// Evolve parameters for next layer
|
|
87
|
-
rotation *= layerRotation;
|
|
88
|
-
amplitude *= mix(1.0, max(wave.x, wave.y), uVariance);
|
|
89
|
-
frequency *= frequencyGrowth;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
return pos;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
const float ITERATIONS = 36.0;
|
|
96
|
-
|
|
97
|
-
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
|
98
|
-
vec2 uv = fragCoord / iResolution.xy;
|
|
99
|
-
|
|
100
|
-
vec3 pp = vec3(0.0);
|
|
101
|
-
vec3 bloom = vec3(0.0);
|
|
102
|
-
float t = iTime * 0.5;
|
|
103
|
-
vec2 pos = uv - 0.5;
|
|
104
|
-
|
|
105
|
-
vec2 prevPos = turb(pos, t, 0.0 - 1.0 / ITERATIONS);
|
|
106
|
-
float spacing = mix(1.0, TAU, uSpacing);
|
|
107
|
-
|
|
108
|
-
for(float i = 1.0; i < ITERATIONS + 1.0; i++) {
|
|
109
|
-
float iter = i / ITERATIONS;
|
|
110
|
-
vec2 st = turb(pos, t, iter * spacing);
|
|
111
|
-
float d = abs(getSdf(st));
|
|
112
|
-
float pd = distance(st, prevPos);
|
|
113
|
-
prevPos = st;
|
|
114
|
-
float dynamicBlur = exp2(pd * 2.0 * 1.4426950408889634) - 1.0;
|
|
115
|
-
float ds = smoothstep(0.0, uBlur * 0.05 + max(dynamicBlur * uSmoothing, 0.001), d);
|
|
116
|
-
|
|
117
|
-
// Shift color based on iteration using uColorScale
|
|
118
|
-
vec3 color = uColor;
|
|
119
|
-
if(uColorShift > 0.01) {
|
|
120
|
-
vec3 hsv = rgb2hsv(color);
|
|
121
|
-
// Shift hue by iteration
|
|
122
|
-
hsv.x = fract(hsv.x + (1.0 - iter) * uColorShift * 0.3);
|
|
123
|
-
color = hsv2rgb(hsv);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
float invd = 1.0 / max(d + dynamicBlur, 0.001);
|
|
127
|
-
pp += (ds - 1.0) * color;
|
|
128
|
-
bloom += clamp(invd, 0.0, 250.0) * color;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
pp *= 1.0 / ITERATIONS;
|
|
132
|
-
|
|
133
|
-
vec3 color;
|
|
134
|
-
|
|
135
|
-
// Dark mode (default)
|
|
136
|
-
if(uMode < 0.5) {
|
|
137
|
-
// use bloom effect
|
|
138
|
-
bloom = bloom / (bloom + 2e4);
|
|
139
|
-
color = (-pp + bloom * 3.0 * uBloom) * 1.2;
|
|
140
|
-
color += (randFibo(fragCoord).x - 0.5) / 255.0;
|
|
141
|
-
color = Tonemap(color);
|
|
142
|
-
float alpha = luma(color) * uMix;
|
|
143
|
-
fragColor = vec4(color * uMix, alpha);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
// Light mode
|
|
147
|
-
else {
|
|
148
|
-
// no bloom effect
|
|
149
|
-
color = -pp;
|
|
150
|
-
color += (randFibo(fragCoord).x - 0.5) / 255.0;
|
|
151
|
-
|
|
152
|
-
// Preserve hue by tone mapping brightness only
|
|
153
|
-
float brightness = length(color);
|
|
154
|
-
vec3 direction = brightness > 0.0 ? color / brightness : color;
|
|
155
|
-
|
|
156
|
-
// Reinhard on brightness
|
|
157
|
-
float factor = 2.0;
|
|
158
|
-
float mappedBrightness = (brightness * factor) / (1.0 + brightness * factor);
|
|
159
|
-
color = direction * mappedBrightness;
|
|
160
|
-
|
|
161
|
-
// Boost saturation to compensate for white background bleed-through
|
|
162
|
-
// When alpha < 1.0, white bleeds through making colors look desaturated
|
|
163
|
-
// So we increase saturation to maintain vibrant appearance
|
|
164
|
-
float gray = dot(color, vec3(0.2, 0.5, 0.1));
|
|
165
|
-
float saturationBoost = 3.0;
|
|
166
|
-
color = mix(vec3(gray), color, saturationBoost);
|
|
167
|
-
|
|
168
|
-
// Clamp between 0-1
|
|
169
|
-
color = clamp(color, 0.0, 1.0);
|
|
170
|
-
|
|
171
|
-
float alpha = mappedBrightness * clamp(uMix, 1.0, 2.0);
|
|
172
|
-
fragColor = vec4(color, alpha);
|
|
173
|
-
}
|
|
174
|
-
}`;
|
|
175
|
-
function g({
|
|
176
|
-
shape: m = 1,
|
|
177
|
-
speed: e = 1,
|
|
178
|
-
amplitude: t = 0.5,
|
|
179
|
-
frequency: a = 0.5,
|
|
180
|
-
scale: r = 0.2,
|
|
181
|
-
blur: l = 1,
|
|
182
|
-
color: i = h,
|
|
183
|
-
colorShift: c = 1,
|
|
184
|
-
brightness: n = 1,
|
|
185
|
-
themeMode: u = "light",
|
|
186
|
-
reduced: s = !1,
|
|
187
|
-
ref: p,
|
|
188
|
-
className: f,
|
|
189
|
-
...v
|
|
190
|
-
}) {
|
|
191
|
-
return /* @__PURE__ */ d("div", { ref: p, className: f, ...v, children: /* @__PURE__ */ d(
|
|
192
|
-
y,
|
|
193
|
-
{
|
|
194
|
-
fs: A,
|
|
195
|
-
className: "size-full",
|
|
196
|
-
devicePixelRatio: 1,
|
|
197
|
-
paused: s || e === 0,
|
|
198
|
-
uniforms: {
|
|
199
|
-
// Aurora wave speed
|
|
200
|
-
uSpeed: { type: "1f", value: e },
|
|
201
|
-
// Edge blur/softness
|
|
202
|
-
uBlur: { type: "1f", value: l },
|
|
203
|
-
// Shape scale
|
|
204
|
-
uScale: { type: "1f", value: r },
|
|
205
|
-
// Shape type: 1=circle, 2=line
|
|
206
|
-
uShape: { type: "1f", value: m },
|
|
207
|
-
// Wave frequency and complexity
|
|
208
|
-
uFrequency: { type: "1f", value: a },
|
|
209
|
-
// Turbulence amplitude
|
|
210
|
-
uAmplitude: { type: "1f", value: t },
|
|
211
|
-
// Light intensity (bloom)
|
|
212
|
-
uBloom: { type: "1f", value: 0 },
|
|
213
|
-
// Brightness of the aurora (0-1)
|
|
214
|
-
uMix: { type: "1f", value: n },
|
|
215
|
-
// Color variation across layers (0-1)
|
|
216
|
-
uSpacing: { type: "1f", value: 0.5 },
|
|
217
|
-
// Color palette offset - shifts colors along the gradient (0-1)
|
|
218
|
-
uColorShift: { type: "1f", value: c },
|
|
219
|
-
// Color variation across layers (0-1)
|
|
220
|
-
uVariance: { type: "1f", value: 0.1 },
|
|
221
|
-
// Smoothing of the aurora (0-1)
|
|
222
|
-
uSmoothing: { type: "1f", value: 1 },
|
|
223
|
-
// Display mode: 0=dark background, 1=light background
|
|
224
|
-
uMode: { type: "1f", value: u === "light" ? 1 : 0 },
|
|
225
|
-
// Color
|
|
226
|
-
uColor: { type: "3fv", value: i }
|
|
227
|
-
},
|
|
228
|
-
onError: (o) => {
|
|
229
|
-
console.error("Shader error:", o);
|
|
230
|
-
},
|
|
231
|
-
onWarning: (o) => {
|
|
232
|
-
console.warn("Shader warning:", o);
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
) });
|
|
236
|
-
}
|
|
237
|
-
g.displayName = "AuraShader";
|
|
238
|
-
const w = x.forwardRef(function({
|
|
239
|
-
state: e = "idle",
|
|
240
|
-
volume: t = 0,
|
|
241
|
-
reduced: a = !1,
|
|
242
|
-
color: r = h,
|
|
243
|
-
colorShift: l = 0.05,
|
|
244
|
-
themeMode: i = "light",
|
|
245
|
-
className: c,
|
|
246
|
-
...n
|
|
247
|
-
}, u) {
|
|
248
|
-
const { speed: s, scale: p, amplitude: f, frequency: v, brightness: o } = b({
|
|
249
|
-
state: e,
|
|
250
|
-
volume: t,
|
|
251
|
-
reduced: a
|
|
252
|
-
});
|
|
253
|
-
return /* @__PURE__ */ d(
|
|
254
|
-
g,
|
|
255
|
-
{
|
|
256
|
-
ref: u,
|
|
257
|
-
"aria-hidden": !0,
|
|
258
|
-
"data-state": e,
|
|
259
|
-
blur: 0.2,
|
|
260
|
-
color: r,
|
|
261
|
-
colorShift: l,
|
|
262
|
-
speed: s,
|
|
263
|
-
scale: p,
|
|
264
|
-
themeMode: i,
|
|
265
|
-
amplitude: f,
|
|
266
|
-
frequency: v,
|
|
267
|
-
brightness: o,
|
|
268
|
-
reduced: a,
|
|
269
|
-
className: S("size-full", c),
|
|
270
|
-
...n
|
|
271
|
-
}
|
|
272
|
-
);
|
|
273
|
-
});
|
|
274
|
-
w.displayName = "AgentAudioVisualizerAura";
|
|
275
|
-
export {
|
|
276
|
-
w as AgentAudioVisualizerAura
|
|
277
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { VoiceVisualizerColor, VoiceVisualizerDriver } from '../../hooks/agents-ui/voice-visualizer-types';
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
export interface AgentAudioVisualizerWaveProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, VoiceVisualizerDriver {
|
|
4
|
-
/** Normalized RGB shader color. */
|
|
5
|
-
color?: VoiceVisualizerColor;
|
|
6
|
-
/** Hue variation toward the outside of the wave. */
|
|
7
|
-
colorShift?: number;
|
|
8
|
-
lineWidth?: number;
|
|
9
|
-
blur?: number;
|
|
10
|
-
}
|
|
11
|
-
/** Internal ADS port of LiveKit Agents UI's Wave visualizer. */
|
|
12
|
-
export declare const AgentAudioVisualizerWave: React.ForwardRefExoticComponent<AgentAudioVisualizerWaveProps & React.RefAttributes<HTMLDivElement>>;
|