@aginies/webuikit 0.2.0 → 0.3.0

package/dist/styles.css

@@ -1514,6 +1514,124 @@
   gap: 8px;
 }
 
+/* ─── voice ─── */
+.agi-chat__mic--on {
+  color: var(--signal);
+  border-color: var(--signal);
+  background: var(--signal-soft);
+}
+.agi-voice {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto auto 1fr auto auto;
+  justify-items: center;
+  align-content: center;
+  gap: 14px;
+  padding: 28px 20px 24px;
+  text-align: center;
+  overflow: hidden;
+  background: radial-gradient(circle at 50% 30%, var(--signal-soft), transparent 60%);
+}
+.agi-voice__exit {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: var(--panel);
+  color: var(--text-2);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+}
+.agi-voice__exit:hover {
+  color: var(--text);
+  border-color: var(--text-2);
+}
+.agi-voice__status {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--mute);
+}
+.agi-voice__you {
+  margin: 0;
+  max-width: 34ch;
+  color: var(--text-2);
+  font-size: 13.5px;
+}
+.agi-voice__reply {
+  min-height: 0;
+  max-width: 46ch;
+  overflow-y: auto;
+  color: var(--text);
+  text-align: left;
+}
+.agi-voice__reply .agi-md {
+  font-size: 15px;
+}
+.agi-voice__orb {
+  width: 92px;
+  height: 92px;
+  border-radius: 999px;
+  border: 1px solid var(--line-2);
+  background: var(--panel-2);
+  color: var(--text);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition:
+    box-shadow 120ms linear,
+    border-color 160ms ease,
+    background 160ms ease;
+}
+.agi-voice__orb:hover {
+  border-color: var(--text-2);
+}
+.agi-voice__orb:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+.agi-voice__orb--listening {
+  border-color: var(--signal);
+  color: var(--signal);
+  background: var(--signal-soft);
+  box-shadow: 0 0 0 calc(4px + var(--agi-level, 0) * 28px)
+    color-mix(in srgb, var(--signal) 22%, transparent);
+}
+.agi-voice__orb--speaking {
+  border-color: var(--signal);
+  animation: agi-voice-speak 1.4s ease-in-out infinite;
+}
+.agi-voice__orb--busy,
+.agi-voice__orb--transcribing {
+  border-style: dashed;
+}
+@keyframes agi-voice-speak {
+  0%,
+  100% {
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 18%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 16px color-mix(in srgb, var(--signal) 8%, transparent);
+  }
+}
+.agi-voice__hint {
+  min-height: 1.4em;
+  font-size: 13px;
+  color: var(--text-2);
+}
+.agi-voice__error {
+  font-size: 12.5px;
+  color: var(--bad);
+  max-width: 40ch;
+}
+
 /* ─── markdown in replies ─── */
 .agi-md {
   display: grid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aginies/webuikit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Aginies web UI kit: React components and widgets that embed platform agents into any site",
   "license": "MIT",
   "author": "Abra Partners",