@edvak99/voice-receptionist-widget

v1.1.25

Published

16 hours ago

Edvak AI Receptionist — embeddable Angular routes and UI for EHR hosts

0High
0Medium
0Low

edvak_admin

@edvak99/voice-receptionist-widget

Embeddable AI Receptionist feature for Angular 19.2.x hosts (EHR or standalone Voice Hub).

Install

npm install @edvak99/voice-receptionist-widget socket.io-client

Peer deps: @angular/core, common, forms, router (^19.2), rxjs, socket.io-client.

Wire into EHR

import {
  provideVoiceReceptionist,
  VOICE_RECEPTIONIST_ROUTES,
} from '@edvak99/voice-receptionist-widget';

export const appConfig = {
  providers: [
    provideHttpClient(withInterceptors([/* your auth interceptor */])),
    provideVoiceReceptionist({
      apiBaseUrl: 'https://your-brain-api.example.com',
      // showModuleNav: false       // default — EHR owns primary nav; no AI side nav
      // includePracticeNav: false  // default — hide patients/providers in embed
    }),
    provideRouter([
      {
        path: 'ai-receptionist',
        children: VOICE_RECEPTIONIST_ROUTES,
      },
    ]),
  ],
};

Or lazy:

{
  path: 'ai-receptionist',
  loadChildren: () =>
    import('@edvak99/voice-receptionist-widget').then((m) => m.VOICE_RECEPTIONIST_ROUTES),
}

Host owns login and attaches Authorization via its HTTP interceptor. Optional session for topbar:

provideVoiceReceptionist({
  apiBaseUrl: '...',
  session: {
    email: computed(() => auth.session()?.email ?? null),
    isAdmin: () => auth.isAdmin(),
    logout: () => auth.logout(),
  },
})

Styles & fonts

Load styles once in the host global stylesheet (not in individual components). Pick the entry that matches the host:

EHR / embed — widget-only CSS. Do not import the full styles entry; it re-imports Tailwind utilities and an EHR design-system clone (_input, buttons, tables, fonts, body rules) and will override host utilities such as .pl-7.

@use '@edvak99/voice-receptionist-widget/styles/embed';

That file (styles/embed.scss) has the EHR #content-area shell bridge, overlay/drawer helpers, and vr-* / live-monitor classes only.

Standalone Voice Hub / demo — full design system (Tailwind + EHR asset CSS + embed extras):

@use '@edvak99/voice-receptionist-widget/styles';
// or: @use '@edvak99/voice-receptionist-widget/styles/standalone';

Tailwind: the host must include this package’s templates in content so utilities used only in the widget (overlays, z-[100100], spacing) are generated:

content: [
  // …host paths
  './node_modules/@edvak99/voice-receptionist-widget/**/*.{html,ts,js,scss}',
],

Icons: <ed-icon name="…"> loads /assets/icons/{name}.svg. EHR already serves its own icon set; add a mapping if a widget icon is missing from the host (for example phone_disabled):

{
  "glob": "**/*",
  "input": "node_modules/@edvak99/voice-receptionist-widget/src/assets/icons",
  "output": "/assets/icons"
}

Also load Material Symbols in the host index.html if icons fall back to that font (ehr_frontend already does this).

Custom Elements / Shoelace: CE styles (custom-elements, shoelace-edit, badge, _root) ship in the standalone styles entry. The host must provide Shoelace base theme the same way as ehr_frontend (<html class="sl-theme-default"> + Shoelace light.css CDN in index.html). EHR embed already has this; standalone demo mirrors it in projects/demo/src/index.html. Use CUSTOM_ELEMENTS_SCHEMA on components that render ed-* or sl-* tags (ehr_frontend app.component.ts pattern).

Local scripts

npm run build   # one-shot library build → dist/
npm run dev     # watch rebuild (same as npm run watch)

Local path mapping (no npm publish)

For active widget development against an EHR or Voice Hub host, point the host tsconfig.json at this repo’s entry file:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@edvak99/voice-receptionist-widget": [
        "../edvak_voice_receptionist_widget/src/public-api.ts"
      ]
    }
  }
}

Adjust ../ so it resolves from the host app root.

Styles (required): TypeScript paths do not apply to Sass. Use the npm style entry after publish:

// EHR / embed
@use '@edvak99/voice-receptionist-widget/styles/embed';

// Standalone Voice Hub
@use '@edvak99/voice-receptionist-widget/styles';

For unpublished local builds, link the built package:

"@edvak99/voice-receptionist-widget": "file:../edvak_voice_receptionist_widget/dist/voice-receptionist-widget"

Voice Hub host consumes this package from npm only — see edvak_ai_receptionist_frontend/docs/REPO_SPLIT.md.

Build this package

npm install
npm run build
cd dist/voice-receptionist-widget && npm publish --access public

CI publish (Bitbucket)

Pushes to main, feature/**, and fix/** build the library and publish @edvak99/voice-receptionist-widget to npm if that version is not already published. Bump version in package.json before a push that should go live.

Add the token on this repo (ai_receptionist_widget), not Voice Hub:

Open Repository settings → Pipelines → Repository variables
https://bitbucket.org/edvak-tech/ai_receptionist_widget/admin/addon/admin/pipelines/repository-variables
Enable Pipelines if prompted.
Add NPM_TOKEN (mark Secured). Use the same npm automation token that published from the old frontend repo. It must be allowed to publish @edvak99.
Do not put the token in git. The pipeline injects ${NPM_TOKEN} at runtime.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@edvak99/voice-receptionist-widget

Install

Wire into EHR

Styles & fonts

Local scripts

Local path mapping (no npm publish)

Build this package

CI publish (Bitbucket)