@edvak99/voice-receptionist-widget 1.0.0 → 1.1.0

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "@edvak99/voice-receptionist-widget",
-  "version": "1.0.0",
+  "version": "1.1.0",
+  "description": "Edvak AI Receptionist — embeddable Angular routes and UI for EHR hosts",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
-    "@angular/core": "^19.2.0"
+    "@angular/core": "^19.2.0",
+    "@angular/forms": "^19.2.0",
+    "@angular/router": "^19.2.0",
+    "rxjs": "^7.8.0",
+    "socket.io-client": "^4.8.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
-  "module": "fesm2022/edvak99-voice-receptionist-widget.mjs",
-  "typings": "index.d.ts",
   "exports": {
+    "./styles": "./styles/_index.scss",
+    "./styles/*": "./styles/*",
     "./package.json": {
       "default": "./package.json"
     },
@@ -19,5 +24,7 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/edvak99-voice-receptionist-widget.mjs"
     }
-  }
+  },
+  "module": "fesm2022/edvak99-voice-receptionist-widget.mjs",
+  "typings": "index.d.ts"
 }

package/public-api.d.ts

@@ -1,2 +1,6 @@
-export * from './lib/voice-receptionist-widget.service';
-export * from './lib/voice-receptionist-widget.component';
+export { VOICE_RECEPTIONIST_CONFIG, VOICE_RECEPTIONIST_SESSION, type VoiceReceptionistConfig, type VoiceReceptionistSession, } from './lib/config';
+export { provideVoiceReceptionist, type ProvideVoiceReceptionistOptions, } from './lib/provide-voice-receptionist';
+export { VOICE_RECEPTIONIST_ROUTES, VOICE_RECEPTIONIST_FEATURE_ROUTES, } from './lib/routes';
+export { EdsAppShellComponent } from './lib/layout/eds-app-shell.component';
+export { ToastService, type ToastMessage } from './lib/shared/toast.service';
+export { EdsBadgeComponent, type BadgeTone } from './lib/ui/eds-badge.component';

package/styles/_index.scss

@@ -0,0 +1,55 @@
+/* @edvak99/voice-receptionist-widget styles — import in host global styles */
+
+@use './eds';
+@use './chat-ui';
+
+:root {
+  --color-primary: #3681f4;
+  --color-primary-hover: #2f6de0;
+  --color-primary-light: #eaf2ff;
+  --color-accent: #5aa2ff;
+  --color-accent-light: #d6e8ff;
+  --color-bg: #f7faff;
+  --color-surface: #ffffff;
+  --color-surface-alt: #f8fafc;
+  --color-sidebar-bg: #0f172a;
+  --color-chat-ai: #f1f5f9;
+  --color-text: #0f172a;
+  --color-text-muted: #64748b;
+  --color-text-soft: #94a3b8;
+  --color-border: #e2e8f0;
+  --color-border-strong: #cbd5e1;
+  --color-success: #22c55e;
+  --color-success-soft: #ecfdf3;
+  --color-warning: #f59e0b;
+  --color-warning-soft: #fffbeb;
+  --color-danger: #ef4444;
+  --color-danger-soft: #fef2f2;
+  --color-info: #3b82f6;
+  --color-info-soft: #eff6ff;
+  --color-primary-soft: var(--color-primary-light);
+  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08);
+  --shadow-card: var(--shadow-sm);
+  --shadow-modal: var(--shadow-md);
+  --radius-sm: 8px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --sidebar-width: 240px;
+  --space-sm: 16px;
+  --space-md: 24px;
+  --space-lg: 32px;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/styles/chat-ui.scss

@@ -0,0 +1,133 @@
+/* Shared chat bubble styles — user (blue) / AI (gray) */
+
+.chat-thread {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  scroll-behavior: smooth;
+}
+
+.chat-row {
+  display: flex;
+  width: 100%;
+}
+
+.chat-row--agent,
+.chat-row--ai {
+  justify-content: flex-start;
+}
+
+.chat-row--caller,
+.chat-row--user {
+  justify-content: flex-end;
+}
+
+.chat-row--tool {
+  justify-content: center;
+}
+
+.chat-bubble {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: min(78%, 520px);
+  padding: 10px 14px;
+  border-radius: var(--radius-lg);
+  transition: background 150ms ease, box-shadow 150ms ease;
+}
+
+.chat-bubble--agent,
+.chat-bubble--ai {
+  background: var(--color-chat-ai);
+  border: 1px solid var(--color-border);
+  border-bottom-left-radius: var(--radius-sm);
+  box-shadow: var(--shadow-sm);
+
+  .chat-label {
+    color: var(--color-accent);
+  }
+
+  .chat-content {
+    color: var(--color-text);
+  }
+}
+
+.chat-bubble--caller,
+.chat-bubble--user {
+  background: var(--color-primary);
+  color: #fff;
+  border-bottom-right-radius: var(--radius-sm);
+  box-shadow: 0 4px 12px rgba(54, 129, 244, 0.22);
+
+  .chat-label {
+    color: rgba(255, 255, 255, 0.88);
+  }
+
+  .chat-content {
+    color: #fff;
+  }
+
+  .chat-time {
+    color: rgba(255, 255, 255, 0.72);
+    text-align: right;
+  }
+}
+
+.chat-bubble--tool {
+  max-width: min(92%, 640px);
+  padding: 8px 14px;
+  background: var(--color-primary-light);
+  border: 1px dashed var(--color-accent-light);
+  border-radius: var(--radius-md);
+  text-align: center;
+
+  .chat-label {
+    justify-content: center;
+    color: var(--color-text-muted);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 11.5px;
+  }
+
+  .chat-content {
+    font-size: 12.5px;
+    color: var(--color-text-muted);
+    text-align: left;
+  }
+}
+
+.chat-bubble--interim {
+  opacity: 0.92;
+
+  .chat-content--interim {
+    font-style: italic;
+    opacity: 0.88;
+  }
+}
+
+.chat-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.chat-content {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.chat-time {
+  font-size: 10.5px;
+  color: var(--color-text-soft);
+  margin-top: 2px;
+}

package/styles/eds.scss

@@ -0,0 +1,328 @@
+/* EDS Design System — AI Receptionist */
+
+:root {
+  /* Brand */
+  --brand-500: #3681f4;
+  --brand-600: #2162f0;
+  --violet-500: #8e51ff;
+  --green-500: #0abf52;
+  --red-500: #f03740;
+  --amber-400: #ffb900;
+
+  /* Gray scale */
+  --gray-50: #f9fafb;
+  --gray-100: #f4f4f5;
+  --gray-200: #e4e4e7;
+  --gray-300: #d4d4d8;
+  --gray-400: #a1a1aa;
+  --gray-500: #71717a;
+  --gray-600: #52525b;
+  --gray-700: #3f3f46;
+  --gray-800: #27272a;
+  --gray-900: #18181b;
+  --slate-950: #030717;
+  --slate-900: #121828;
+  --slate-800: #212a39;
+  --slate-700: #384251;
+  --slate-600: #4e5763;
+  --slate-500: #63748b;
+  --slate-400: #99a2b0;
+  --slate-300: #cad5e2;
+  --brand-400: #5aa3f6;
+  --brand-300: #94c5f9;
+  --violet-400: #a684ff;
+  --purple-300: #c4b5fd;
+  --green-400: #34d399;
+  --red-400: #f87171;
+  --red-300: #fca5a5;
+  --amber-300: #fcd34d;
+
+  /* Radius aliases */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-pill: 999px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --font-sans: var(--font-inter);
+  --font-body: var(--font-dm);
+  --font-display: var(--font-figtree);
+
+  /* Surfaces */
+  --surface-l0: #ffffff;
+  --surface-l1: #f9fafb;
+  --surface-l2: #f4f4f5;
+  --text-primary: var(--gray-700);
+  --text-secondary: var(--gray-600);
+  --text-brand: var(--brand-600);
+  --border-default: var(--gray-200);
+  --bg-brand: var(--brand-500);
+
+  /* Radius */
+  --eds-radius-sm: 4px;
+  --eds-radius-md: 6px;
+  --eds-radius-lg: 8px;
+
+  /* Shadows */
+  --eds-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
+  --eds-shadow-md: 0 2px 8px rgba(17, 24, 39, 0.06);
+
+  /* Layout */
+  --eds-rail-width: 64px;
+  --eds-nav-width: 244px;
+  --eds-topbar-height: 60px;
+
+  /* Fonts */
+  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-dm: 'DM Sans', var(--font-inter);
+  --font-figtree: 'Figtree', var(--font-inter);
+  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
+}
+
+/* Typography */
+.eds-h1 {
+  font-family: var(--font-inter);
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.eds-h2 {
+  font-family: var(--font-inter);
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.eds-h3 {
+  font-family: var(--font-inter);
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.eds-h4 {
+  font-family: var(--font-inter);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.eds-body {
+  font-family: var(--font-dm);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-primary);
+}
+
+.eds-body-bold {
+  @extend .eds-body;
+  font-weight: 600;
+}
+
+.eds-body-sm {
+  font-family: var(--font-dm);
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--text-secondary);
+}
+
+.eds-body-sm-bold {
+  @extend .eds-body-sm;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.eds-mono {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.eds-mono-sm {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.eds-label {
+  font-family: var(--font-inter);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--gray-500);
+}
+
+.eds-icon {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+}
+
+/* Animations */
+@keyframes eds-ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  75%,
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes eds-wave {
+  0%,
+  100% {
+    transform: scaleY(0.35);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes eds-ring {
+  0% {
+    transform: scale(0.85);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1.35);
+    opacity: 0;
+  }
+}
+
+@keyframes eds-breathe {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.85;
+  }
+  50% {
+    transform: scale(1.06);
+    opacity: 1;
+  }
+}
+
+@keyframes eds-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes eds-blink {
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes eds-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes eds-bar-grow {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes eds-caret {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+.eds-animate-fade-up {
+  animation: eds-fade-up 0.35s ease forwards;
+}
+
+.eds-animate-spin {
+  animation: eds-spin 1s linear infinite;
+}
+
+.eds-gradient-brand {
+  background: linear-gradient(135deg, var(--brand-500), var(--violet-500));
+}
+
+.eds-page {
+  min-height: calc(100vh - var(--eds-topbar-height));
+  background: var(--surface-l1);
+  padding: 24px;
+}
+
+.eds-page--dark {
+  background: var(--slate-950);
+  color: #e4e4e7;
+}
+
+.eds-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead th {
+    @extend .eds-label;
+    text-align: left;
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--border-default);
+    background: var(--surface-l0);
+  }
+
+  tbody td {
+    padding: 12px 16px;
+    font-size: 13px;
+    color: var(--text-primary);
+    border-bottom: 1px solid var(--border-default);
+  }
+
+  tbody tr:hover td {
+    background: var(--surface-l1);
+  }
+}
+
+.eds-card {
+  background: var(--surface-l0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--eds-radius-lg);
+  box-shadow: var(--eds-shadow-sm);
+  transition: box-shadow 150ms ease;
+
+  &:hover {
+    box-shadow: var(--eds-shadow-md);
+  }
+}

package/lib/voice-receptionist-widget.component.d.ts

@@ -1,5 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class VoiceReceptionistWidgetComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<VoiceReceptionistWidgetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VoiceReceptionistWidgetComponent, "lib-voice-receptionist-widget", never, {}, {}, never, never, true, never>;
-}

package/lib/voice-receptionist-widget.service.d.ts

@@ -1,6 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class VoiceReceptionistWidgetService {
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<VoiceReceptionistWidgetService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<VoiceReceptionistWidgetService>;
-}