@ensembleapp/client-sdk 0.0.55 → 0.0.57

package/lib/chat/ChatWidget.css

@@ -651,3 +651,114 @@
 .chat-widget__collapsed--animating .chat-widget__collapsed-preview {
   animation: chat-widget-slide-up 300ms ease-out forwards;
 }
+
+.chat-widget .chat-widget__voice { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-bottom: 1px solid var(--chat-border); }
+
+.chat-widget .chat-widget__avatar-stage { display: block; position: relative; flex: 1; min-height: 0; min-width: 0; overflow: hidden; background: #080c14; }
+.chat-widget .chat-widget__avatar-stage video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
+.chat-widget .chat-widget__avatar-stage audio { display: none; }
+.chat-widget .chat-widget__call-footer { display: flex; flex-direction: column; flex: 0 0 auto; gap: 8px; padding: 16px; margin-top: auto; border-top: 1px solid var(--chat-border); }
+.chat-widget .chat-widget__call-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
+.chat-widget .chat-widget__call-controls > [role="status"] { flex-basis: 100%; text-align: center; font-size: 12px; color: var(--chat-text-muted); }
+.chat-widget .chat-widget__call-controls button { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--chat-border); border-radius: 8px; white-space: nowrap; cursor: pointer; }
+.chat-widget .chat-widget__call-controls button:disabled { opacity: 0.5; }
+.chat-widget .chat-widget__call-controls button:hover { background: var(--chat-border); }
+
+.chat-widget .chat-widget__voice { position: relative; }
+.chat-widget--avatar .chat-widget__call-footer {
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+  border-top: 0;
+  color: #fff;
+  background: linear-gradient(transparent, rgba(0,0,0,.8));
+  padding-top: 48px;
+  z-index: 1;
+}
+.chat-widget--avatar .chat-widget__call-controls button {
+  color: #fff; background: rgba(15,23,42,.75); border-color: rgba(255,255,255,.3);
+  backdrop-filter: blur(8px);
+}
+.chat-widget--avatar .chat-widget__call-controls > [role="status"] { color: #fff; }
+/* Voice opens beside the existing chat without changing its dimensions. */
+.chat-widget--avatar { overflow: visible; }
+.chat-widget--avatar > .chat-widget__voice {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: calc(100% + 12px);
+  width: clamp(240px, calc(100vw - 100% - 52px), 520px);
+  border: 1px solid var(--chat-border);
+  border-radius: var(--chat-radius);
+  overflow: hidden;
+  background: var(--chat-background);
+}
+.chat-widget .chat-widget__connect-voice {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 4px;
+  border: 0;
+  background: transparent;
+  color: var(--chat-primary);
+  cursor: pointer;
+}
+.chat-widget .chat-widget__connect-voice:disabled { opacity: .5; cursor: default; }
+@media (max-width: 800px) {
+  .chat-widget--avatar > .chat-widget__voice {
+    position: fixed;
+    inset: 20px;
+    width: auto;
+    z-index: 20;
+  }
+}
+
+/* The connected voice view replaces only the presentation, not the chat session. */
+.chat-widget .chat-widget__voice-view { display: grid; flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) minmax(0, 0fr); overflow: hidden; transition: grid-template-rows 320ms ease; }
+.chat-widget .chat-widget__voice-view:fullscreen { width: 100%; height: 100%; background: var(--chat-background); color: var(--chat-text); }
+.chat-widget .chat-widget__voice-fullscreen { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; background: rgba(15,23,42,.75); color: #fff; cursor: pointer; }
+.chat-widget .chat-widget__voice-fullscreen:hover { background: rgba(15,23,42,.95); }
+.chat-widget .chat-widget__voice-fullscreen:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
+.chat-widget .chat-widget__voice-view[hidden] { display: none; }
+.chat-widget .chat-widget__voice-scene { position: relative; flex: 1; min-height: 0; background: #080c14; }
+.chat-widget .chat-widget__voice-scene > .chat-widget__avatar-stage { position: absolute; inset: 0; }
+.chat-widget .chat-widget__voice-overlay { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; padding-top: 32px; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: #fff; }
+.chat-widget .chat-widget__voice-overlay .chat-widget__call-footer { border: 0; padding: 10px; margin: 0; }
+.chat-widget .chat-widget__voice-overlay button { color: #fff; background: rgba(15,23,42,.75); }
+.chat-widget .chat-widget__voice-overlay [role="status"] { color: #fff; }
+.chat-widget .chat-widget__subtitles { position: relative; font-size: 16px; line-height: 24px; max-height: 48px; width: calc(100% - 48px); max-width: 640px; overflow: hidden; margin: 0 auto 8px; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
+.chat-widget .chat-widget__subtitle-current { color: #67e8f9; }
+.chat-widget .chat-widget__voice-view--content { grid-template-rows: minmax(0, .48fr) minmax(0, .52fr); }
+.chat-widget .chat-widget__voice-view--content .chat-widget__avatar-stage video { object-fit: contain; }
+.chat-widget .chat-widget__voice-content-wrap { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(16px); transition: opacity 250ms ease, transform 320ms ease; }
+.chat-widget .chat-widget__voice-view--content .chat-widget__voice-content-wrap { opacity: 1; transform: translateY(0); }
+.chat-widget .chat-widget__voice-content { position: relative; height: 100%; box-sizing: border-box; overflow: auto; padding: 24px; border-top: 1px solid var(--chat-border); }
+.chat-widget .chat-widget__dismiss-content { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; padding: 6px; border-radius: 50%; color: var(--chat-text-secondary); background: var(--chat-background-secondary); cursor: pointer; z-index: 1; }
+.chat-widget .chat-widget__table-card { min-width: 0; }
+.chat-widget .chat-widget__table-card h3 { margin: 0 24px 16px 0; font-size: 1.1em; font-weight: 600; }
+.chat-widget .chat-widget__table-scroll { overflow-x: auto; }
+.chat-widget .chat-widget__table-card table { width: 100%; border-collapse: collapse; text-align: left; }
+.chat-widget .chat-widget__table-card th, .chat-widget .chat-widget__table-card td { padding: 10px 12px; border: 1px solid var(--chat-border); vertical-align: top; }
+.chat-widget .chat-widget__table-card th { background: var(--chat-background-secondary); font-weight: 600; }
+.chat-widget .chat-widget__voice-content .chat-widget__table-card { font-size: 18px; line-height: 1.5; }
+.chat-widget .chat-widget__voice-content .chat-widget__table-card th, .chat-widget .chat-widget__voice-content .chat-widget__table-card td { padding: 14px 16px; }
+@media (prefers-reduced-motion: reduce) {
+  .chat-widget .chat-widget__voice-view, .chat-widget .chat-widget__voice-content-wrap { transition: none; transform: none; }
+}
+
+/* shadcn/Recharts widgets use SDK theme tokens without requiring host Tailwind styles. */
+.chat-widget .chat-widget__chart-card { margin: 0; min-width: 0; }
+.chat-widget .chat-widget__chart-card h3 { margin: 0 24px 8px 0; font-size: 1.1em; font-weight: 600; }
+.chat-widget .chat-widget__chart-card figcaption p { margin: 4px 0; color: var(--chat-text-secondary); font-size: 14px; }
+.chat-widget .chat-widget__chart { margin-top: 12px; }
+.chat-widget .chat-widget__chart svg:focus-visible { outline: 2px solid var(--chat-primary); }
+.chat-widget .chat-widget__chart-tooltip { padding: 10px 12px; background: var(--chat-background); color: var(--chat-text); border: 1px solid var(--chat-border); border-radius: 8px; box-shadow: 0 4px 12px #0003; font-size: 13px; }
+.chat-widget .chat-widget__chart-tooltip > div { display: grid; gap: 6px; }
+.chat-widget .chat-widget__chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 8px; font-size: 13px; }
+.chat-widget .chat-widget__chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
+.chat-widget .chat-widget__chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
+.chat-widget .chat-widget__chart-data { margin-top: 12px; font-size: 14px; }
+.chat-widget .chat-widget__chart-data summary { cursor: pointer; color: var(--chat-text-secondary); }
+.chat-widget .chat-widget__chart-data table { width: 100%; border-collapse: collapse; margin-top: 8px; }
+.chat-widget .chat-widget__chart-data th, .chat-widget .chat-widget__chart-data td { padding: 8px 12px; border: 1px solid var(--chat-border); text-align: left; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ensembleapp/client-sdk",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "description": "React client SDK for chat functionality",
   "type": "module",
   "main": "dist/index.js",
@@ -40,11 +40,13 @@
   "dependencies": {
     "@ai-sdk/provider-utils": "^4.0.19",
     "@ai-sdk/react": "^3.0.41",
+    "@livekit/components-react": "^2.9.24",
     "camelcase-css": "^2.0.1",
     "clsx": "^2.1.1",
     "didyoumean": "^1.2.2",
     "dlv": "^1.1.3",
     "fast-glob": "^3.3.3",
+    "livekit-client": "^2.22.4",
     "lucide-react": "^0.553.0",
     "micromatch": "^4.0.8",
     "object-hash": "^3.0.0",
@@ -52,6 +54,7 @@
     "postcss-import": "^15.1.0",
     "postcss-nested": "^6.2.0",
     "react-markdown": "^10.1.0",
+    "recharts": "^2.15.4",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^2.5.4",
     "zod": "^4.0.4"
@@ -59,6 +62,7 @@
   "devDependencies": {
     "@repo/agent-sdk": "workspace:*",
     "@repo/eslint-config": "workspace:*",
+    "@repo/ui": "workspace:*",
     "@types/jest": "^30.0.0",
     "@types/minimatch": "^6.0.0",
     "@types/object-hash": "^3.0.6",
@@ -73,7 +77,8 @@
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.4.11",
     "tsup": "^8.3.5",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.2",
+    "@repo/shared-common": "workspace:*"
   },
   "publishConfig": {
     "access": "public"