@speechly/react-client - npm Package Compare versions

Comparing version 1.2.1 to 2.0.0

dist/context.d.ts

 import React from 'react';
 import { ClientOptions, ClientState, Client } from '@speechly/browser-client';
-import { TentativeSpeechTranscript, TentativeSpeechEntities, TentativeSpeechIntent, SpeechTranscript, SpeechEntity, SpeechIntent, SpeechSegment, SpeechState } from './types';
+import { TentativeSpeechTranscript, TentativeSpeechEntities, TentativeSpeechIntent, SpeechTranscript, SpeechEntity, SpeechIntent, SpeechSegment } from './types';
 /**
@@ -15,2 +15,6 @@ * The state of SpeechContext.
     /**
+     * Connect to Speechly API.
+     */
+    connect: () => Promise<void>;
+    /**
      * Function that initialises Speechly client, including both the API connection and the audio initialisation.
@@ -24,16 +28,16 @@ *
      */
-    initialise: ContextFunc;
+    initialize: () => Promise<void>;
     /**
-     * @deprecated
+     * @deprecated Use client.isListening(), startContext() and stopContext() instead
      * Toggles listening on or off. Automatically initialises the API connection and audio stack.
      */
-    toggleRecording: ContextFunc;
+    toggleRecording: () => Promise<string>;
     /**
      * Turns listening on. Automatically initialises the API connection and audio stack.
      */
-    startContext: ContextFunc;
+    startContext: () => Promise<string>;
     /**
      * Turns listening off.
      */
-    stopContext: ContextFunc;
+    stopContext: () => Promise<string>;
     /**
@@ -48,14 +52,12 @@ * Switch appId in multi-app project.
     /**
-     * Current state of the context, whether it's idle, recording or failed, etc.
-     * It's advised to react to this to enable / disable voice functionality in your app
-     * as well as inidicate to the user that recording is in progress or results are being fetched from the API.
+     * @returns true if startContext called and listening will start.
+     * Speechly will normally be listening nearly instantly after startContext.
+     * Check clientState for details about browser client's state.
      */
-    clientState: ClientState;
+    listening: boolean;
     /**
-     * @deprecated
      * Current state of the context, whether it's idle, recording or failed, etc.
-     * It's advised to react to this to enable / disable voice functionality in your app
-     * as well as inidicate to the user that recording is in progress or results are being fetched from the API.
+     * Use this to indicate to the user that recording is in progress or results are being fetched from the API.
      */
-    speechState: SpeechState;
+    clientState: ClientState;
     /**
@@ -89,9 +91,8 @@ * Last tentative transcript received from the API. Resets after current segment is finalised.
     segment?: SpeechSegment;
+    /**
+     * Low-level access to underlying Speechly browser client.
+     */
+    client?: Client;
 }
 /**
- * Signature for initialise and toggleRecording functions.
- * @public
- */
-export declare type ContextFunc = () => Promise<void>;
-/**
  * A React context that holds the state of Speechly SLU API client.
@@ -109,3 +110,3 @@ * @public
      */
-    disableTenative?: boolean;
+    disableTentative?: boolean;
 }
@@ -115,6 +116,4 @@ interface SpeechProviderState {
     clientState: ClientState;
-    recordingState: SpeechState;
-    toggleIsOn: boolean;
+    listening: boolean;
     appId?: string;
-    startedContextPromise?: Promise<string>;
     segment?: SpeechSegment;
@@ -141,6 +140,7 @@ tentativeTranscript?: TentativeSpeechTranscript;
     readonly componentDidMount: () => Promise<void>;
-    readonly initialiseAudio: () => Promise<void>;
-    readonly startContext: () => Promise<void>;
-    readonly stopContext: () => Promise<void>;
-    readonly toggleRecording: () => Promise<void>;
+    readonly connect: () => Promise<void>;
+    readonly initialize: () => Promise<void>;
+    readonly startContext: () => Promise<string>;
+    readonly stopContext: () => Promise<string>;
+    readonly toggleRecording: () => Promise<string>;
     readonly switchApp: (appId: string) => Promise<void>;
@@ -150,3 +150,3 @@ render(): JSX.Element;
     componentWillUnmount(): Promise<void>;
-    private readonly initialiseClient;
+    private readonly createClient;
     private readonly onClientStateChange;
@@ -153,0 +153,0 @@ private readonly onSegmentChange;

dist/context.js

@@ -71,4 +71,2 @@ "use strict";
 var browser_client_1 = require("@speechly/browser-client");
-var types_1 = require("./types");
-var state_1 = require("./state");
 /**
@@ -79,17 +77,20 @@ * A React context that holds the state of Speechly SLU API client.
 exports.SpeechContext = react_1.default.createContext({
-    initialise: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+    connect: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
         return [2 /*return*/, Promise.resolve()];
     }); }); },
-    toggleRecording: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+    initialize: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
         return [2 /*return*/, Promise.resolve()];
     }); }); },
+    toggleRecording: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, Promise.resolve('Unknown contextId')];
+    }); }); },
     startContext: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-        return [2 /*return*/, Promise.resolve()];
+        return [2 /*return*/, Promise.resolve('Unknown contextId')];
     }); }); },
     stopContext: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-        return [2 /*return*/, Promise.resolve()];
+        return [2 /*return*/, Promise.resolve('Unknown contextId')];
     }); }); },
     switchApp: function () { },
-    speechState: types_1.SpeechState.Idle,
     clientState: browser_client_1.ClientState.Disconnected,
+    listening: false,
 });
@@ -113,110 +114,94 @@ /**
             return __generator(this, function (_a) {
-                this.setState(__assign(__assign({}, this.state), { client: this.initialiseClient(this.props) }));
+                this.setState(__assign(__assign({}, this.state), { client: this.createClient(this.props) }));
                 return [2 /*return*/];
             });
         }); };
-        _this.initialiseAudio = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, client, clientState;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+        _this.connect = function () { return __awaiter(_this, void 0, void 0, function () {
+            var client;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
-                        _a = this.state, client = _a.client, clientState = _a.clientState;
-                        if (!(clientState === browser_client_1.ClientState.Disconnected)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, (client === null || client === void 0 ? void 0 : client.initialize())];
+                        client = this.state.client;
+                        if (client == null) {
+                            throw Error('No Speechly client (are you calling connect in non-browser environment)');
+                        }
+                        return [4 /*yield*/, client.connect()];
                     case 1:
-                        _b.sent();
-                        _b.label = 2;
-                    case 2: return [2 /*return*/, Promise.resolve()];
+                        _a.sent();
+                        return [2 /*return*/];
                 }
             });
         }); };
-        _this.startContext = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, client, clientState, appId, startedContextPromise, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+        _this.initialize = function () { return __awaiter(_this, void 0, void 0, function () {
+            var client;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
-                        _a = this.state, client = _a.client, clientState = _a.clientState, appId = _a.appId;
-                        this.setState({ toggleIsOn: true });
-                        _b = clientState;
-                        switch (_b) {
-                            case browser_client_1.ClientState.Disconnected: return [3 /*break*/, 1];
-                            case browser_client_1.ClientState.Connected: return [3 /*break*/, 3];
-                            case browser_client_1.ClientState.Stopping: return [3 /*break*/, 3];
-                            case browser_client_1.ClientState.Starting: return [3 /*break*/, 4];
+                        client = this.state.client;
+                        if (client == null) {
+                            throw Error('No Speechly client (are you calling initialize in non-browser environment)');
                         }
-                        return [3 /*break*/, 5];
-                    case 1: return [4 /*yield*/, (client === null || client === void 0 ? void 0 : client.initialize())
-                        // falls through
-                    ];
-                    case 2:
-                        _c.sent();
-                        _c.label = 3;
-                    case 3:
-                        if (appId !== undefined) {
-                            startedContextPromise = client === null || client === void 0 ? void 0 : client.startContext(appId);
-                        }
-                        else {
-                            startedContextPromise = client === null || client === void 0 ? void 0 : client.startContext();
-                        }
-                        return [3 /*break*/, 6];
-                    case 4:
-                        console.warn('Already starting');
-                        return [3 /*break*/, 6];
-                    case 5:
-                        console.warn('Cannot start context - client is not connected');
-                        return [3 /*break*/, 6];
-                    case 6:
-                        this.setState({ startedContextPromise: startedContextPromise });
-                        if (!(startedContextPromise !== undefined)) return [3 /*break*/, 8];
-                        return [4 /*yield*/, startedContextPromise];
-                    case 7:
-                        _c.sent();
-                        _c.label = 8;
-                    case 8: return [2 /*return*/];
+                        return [4 /*yield*/, client.initialize()];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
                 }
             });
         }); };
-        _this.stopContext = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, client, startedContextPromise;
+        _this.startContext = function () { return __awaiter(_this, void 0, void 0, function () {
+            var _a, client, appId;
             return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        _a = this.state, client = _a.client, startedContextPromise = _a.startedContextPromise;
-                        this.setState({ toggleIsOn: false });
-                        if (!(startedContextPromise !== undefined)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, startedContextPromise];
-                    case 1:
-                        _b.sent();
-                        _b.label = 2;
-                    case 2: return [4 /*yield*/, (client === null || client === void 0 ? void 0 : client.stopContext())];
-                    case 3:
-                        _b.sent();
-                        return [2 /*return*/, Promise.resolve()];
+                _a = this.state, client = _a.client, appId = _a.appId;
+                this.setState({ listening: true });
+                if (client == null) {
+                    throw Error('No Speechly client (are you calling startContext in non-browser environment)');
                 }
+                if (appId !== undefined) {
+                    return [2 /*return*/, client.startContext(appId)];
+                }
+                return [2 /*return*/, client.startContext()];
             });
         }); };
+        _this.stopContext = function () { return __awaiter(_this, void 0, void 0, function () {
+            var client;
+            return __generator(this, function (_a) {
+                client = this.state.client;
+                this.setState({ listening: false });
+                if (client == null) {
+                    throw Error('No Speechly client (are you calling stopContext in non-browser environment)');
+                }
+                return [2 /*return*/, client.stopContext()];
+            });
+        }); };
         _this.toggleRecording = function () { return __awaiter(_this, void 0, void 0, function () {
-            var toggleIsOn;
+            var client;
             return __generator(this, function (_a) {
-                toggleIsOn = this.state.toggleIsOn;
-                if (!toggleIsOn) {
+                client = this.state.client;
+                if (client == null) {
+                    throw Error('No Speechly client (are you calling toggleRecording in non-browser environment)');
+                }
+                if (!client.isListening()) {
                     return [2 /*return*/, this.startContext()];
                 }
-                return [2 /*return*/, this.stopContext()];
+                else {
+                    return [2 /*return*/, this.stopContext()];
+                }
+                return [2 /*return*/];
             });
         }); };
         _this.switchApp = function (appId) { return __awaiter(_this, void 0, void 0, function () {
-            var _a, client, clientState;
-            return __generator(this, function (_b) {
-                _a = this.state, client = _a.client, clientState = _a.clientState;
-                this.setState({ appId: appId });
-                if (clientState === browser_client_1.ClientState.Recording) {
-                    return [2 /*return*/, client === null || client === void 0 ? void 0 : client.switchContext(appId)];
+            var client;
+            return __generator(this, function (_a) {
+                client = this.state.client;
+                if (client == null) {
+                    throw Error('No Speechly client (are you calling toggleRecording in non-browser environment)');
                 }
-                return [2 /*return*/];
+                return [2 /*return*/, client.switchContext(appId)];
             });
         }); };
-        _this.initialiseClient = function (opts) {
+        _this.createClient = function (clientOptions) {
             var _a;
-            var client = new browser_client_1.Client(opts);
+            // Postpone connect
+            var effectiveOpts = __assign(__assign({}, clientOptions), { connect: false });
+            var client = new browser_client_1.Client(effectiveOpts);
             client.onStateChange(_this.onClientStateChange);
@@ -227,3 +212,3 @@ client.onSegmentChange(_this.onSegmentChange);
             client.onIntent(_this.onIntent);
-            if (!((_a = opts.disableTenative) !== null && _a !== void 0 ? _a : false)) {
+            if (!((_a = clientOptions.disableTentative) !== null && _a !== void 0 ? _a : false)) {
                 client.onTentativeIntent(_this.onTentativeIntent);
@@ -233,6 +218,14 @@ client.onTentativeTranscript(_this.onTentativeTranscript);
             }
+            // Connect now to pre-warm backend if not explicitely told not to
+            if (clientOptions.connect !== false) {
+                // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                client.connect();
+            }
             return client;
         };
         _this.onClientStateChange = function (clientState) {
-            _this.setState({ clientState: clientState, recordingState: (0, state_1.mapClientState)(clientState) });
+            if (clientState <= browser_client_1.ClientState.Disconnected) {
+                _this.setState({ listening: false });
+            }
+            _this.setState({ clientState: clientState });
         };
@@ -312,7 +305,5 @@ _this.onSegmentChange = function (segment) {
             client: undefined,
-            recordingState: types_1.SpeechState.Idle,
+            listening: false,
             clientState: browser_client_1.ClientState.Disconnected,
-            toggleIsOn: false,
             appId: props.appId,
-            startedContextPromise: undefined,
         };
@@ -323,5 +314,6 @@ return _this;
         var _this = this;
-        var _a = this.state, appId = _a.appId, clientState = _a.clientState, recordingState = _a.recordingState, segment = _a.segment, tentativeTranscript = _a.tentativeTranscript, transcript = _a.transcript, tentativeEntities = _a.tentativeEntities, entity = _a.entity, tentativeIntent = _a.tentativeIntent, intent = _a.intent;
+        var _a = this.state, appId = _a.appId, clientState = _a.clientState, segment = _a.segment, tentativeTranscript = _a.tentativeTranscript, transcript = _a.transcript, tentativeEntities = _a.tentativeEntities, entity = _a.entity, tentativeIntent = _a.tentativeIntent, intent = _a.intent, client = _a.client, listening = _a.listening;
         return (react_1.default.createElement(exports.SpeechContext.Provider, { value: {
-                initialise: this.initialiseAudio,
+                connect: this.connect,
+                initialize: this.initialize,
                 startContext: this.startContext,
@@ -334,4 +326,4 @@ stopContext: this.stopContext,
                 appId: appId,
+                listening: listening,
                 clientState: clientState,
-                speechState: recordingState,
                 segment: segment,
@@ -344,2 +336,3 @@ tentativeTranscript: tentativeTranscript,
                 intent: intent,
+                client: client,
             } }, this.props.children));
@@ -358,3 +351,2 @@ };
                         if (props.appId === prevProps.appId &&
-                            props.language === prevProps.language &&
                             props.sampleRate === prevProps.sampleRate &&
@@ -379,3 +371,3 @@ props.debug === prevProps.debug &&
                     case 4:
-                        this.setState({ client: this.initialiseClient(props) });
+                        this.setState({ client: this.createClient(props) });
                         return [2 /*return*/];
@@ -382,0 +374,0 @@ }

dist/index.d.ts

@@ -1,4 +0,4 @@
-export { ClientState } from '@speechly/browser-client';
+export { ClientState, stateToString } from '@speechly/browser-client';
 export * from './types';
 export * from './context';
 export * from './hooks';

dist/index.js

@@ -13,5 +13,6 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClientState = void 0;
+exports.stateToString = exports.ClientState = void 0;
 var browser_client_1 = require("@speechly/browser-client");
 Object.defineProperty(exports, "ClientState", { enumerable: true, get: function () { return browser_client_1.ClientState; } });
+Object.defineProperty(exports, "stateToString", { enumerable: true, get: function () { return browser_client_1.stateToString; } });
 __exportStar(require("./types"), exports);
@@ -18,0 +19,0 @@ __exportStar(require("./context"), exports);

dist/state.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapClientState = void 0;
-var browser_client_1 = require("@speechly/browser-client");
-var types_1 = require("./types");
-function mapClientState(s) {
-    switch (s) {
-        case browser_client_1.ClientState.Failed:
-            return types_1.SpeechState.Failed;
-        case browser_client_1.ClientState.NoBrowserSupport:
-            return types_1.SpeechState.NoBrowserSupport;
-        case browser_client_1.ClientState.NoAudioConsent:
-            return types_1.SpeechState.NoAudioConsent;
-        case browser_client_1.ClientState.Disconnecting:
-        case browser_client_1.ClientState.Disconnected:
-            return types_1.SpeechState.Idle;
-        case browser_client_1.ClientState.Connecting:
-            return types_1.SpeechState.Connecting;
-        case browser_client_1.ClientState.Connected:
-            return types_1.SpeechState.Ready;
-        case browser_client_1.ClientState.Starting:
-        case browser_client_1.ClientState.Recording:
-            return types_1.SpeechState.Recording;
-        case browser_client_1.ClientState.Stopping:
-            return types_1.SpeechState.Loading;
-        default:
-            return types_1.SpeechState.Failed;
-    }
-}
-exports.mapClientState = mapClientState;
 //# sourceMappingURL=state.js.map

dist/types.d.ts

 import { Word, Entity, Intent } from '@speechly/browser-client';
 export { Word, Entity, Intent, Segment as SpeechSegment } from '@speechly/browser-client';
 /**
- * The state of SpeechContext.
- * @public
- */
-export declare enum SpeechState {
-    /**
-     * The context is in a state of unrecoverable error.
-     * It is only possible to fix this by destroying and creating it from scratch.
-     */
-    Failed = "Failed",
-    /**
-     * Current browser is not supported by Speechly - it's not possible to use speech functionality.
-     */
-    NoBrowserSupport = "NoBrowserSupport",
-    /**
-     * The user did not provide permissions to use the microphone - it is not possible to use speech functionality.
-     */
-    NoAudioConsent = "NoAudioConsent",
-    /**
-     * The context has been created but not initialised. The audio and API connection are not enabled.
-     */
-    Idle = "Idle",
-    /**
-     * The context is connecting to the API.
-     */
-    Connecting = "Connecting",
-    /**
-     * The context is ready to use.
-     */
-    Ready = "Ready",
-    /**
-     * The context is current recording audio and sending it to the API for recognition.
-     * The results are also being fetched.
-     */
-    Recording = "Recording",
-    /**
-     * The context is waiting for the API to finish sending trailing responses.
-     * No audio is being sent anymore.
-     */
-    Loading = "Loading"
-}
-/**
  * Wraps the tentative transcript response from the API.
@@ -46,0 +5,0 @@ * @public

dist/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpeechState = void 0;
-/**
- * The state of SpeechContext.
- * @public
- */
-var SpeechState;
-(function (SpeechState) {
-    /**
-     * The context is in a state of unrecoverable error.
-     * It is only possible to fix this by destroying and creating it from scratch.
-     */
-    SpeechState["Failed"] = "Failed";
-    /**
-     * Current browser is not supported by Speechly - it's not possible to use speech functionality.
-     */
-    SpeechState["NoBrowserSupport"] = "NoBrowserSupport";
-    /**
-     * The user did not provide permissions to use the microphone - it is not possible to use speech functionality.
-     */
-    SpeechState["NoAudioConsent"] = "NoAudioConsent";
-    /**
-     * The context has been created but not initialised. The audio and API connection are not enabled.
-     */
-    SpeechState["Idle"] = "Idle";
-    /**
-     * The context is connecting to the API.
-     */
-    SpeechState["Connecting"] = "Connecting";
-    /**
-     * The context is ready to use.
-     */
-    SpeechState["Ready"] = "Ready";
-    /**
-     * The context is current recording audio and sending it to the API for recognition.
-     * The results are also being fetched.
-     */
-    SpeechState["Recording"] = "Recording";
-    /**
-     * The context is waiting for the API to finish sending trailing responses.
-     * No audio is being sent anymore.
-     */
-    SpeechState["Loading"] = "Loading";
-})(SpeechState = exports.SpeechState || (exports.SpeechState = {}));
 //# sourceMappingURL=types.js.map

package.json

 {
   "name": "@speechly/react-client",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "description": "React client for Speechly SLU API",
@@ -52,3 +52,3 @@ "keywords": [
   "dependencies": {
-    "@speechly/browser-client": "1.3.0"
+    "@speechly/browser-client": "1.4.0"
   },
@@ -55,0 +55,0 @@ "peerDependencies": {

src/index.ts

@@ -1,4 +0,4 @@
-export { ClientState } from '@speechly/browser-client'
+export { ClientState, stateToString } from '@speechly/browser-client'
 export * from './types'
 export * from './context'
 export * from './hooks'

src/types.ts

 import { Word, Entity, Intent } from '@speechly/browser-client'
 
 export { Word, Entity, Intent, Segment as SpeechSegment } from '@speechly/browser-client'
-/**
- * The state of SpeechContext.
- * @public
- */
-export enum SpeechState {
-  /**
-   * The context is in a state of unrecoverable error.
-   * It is only possible to fix this by destroying and creating it from scratch.
-   */
-  Failed = 'Failed',
 
-  /**
-   * Current browser is not supported by Speechly - it's not possible to use speech functionality.
-   */
-  NoBrowserSupport = 'NoBrowserSupport',
-
-  /**
-   * The user did not provide permissions to use the microphone - it is not possible to use speech functionality.
-   */
-  NoAudioConsent = 'NoAudioConsent',
-
-  /**
-   * The context has been created but not initialised. The audio and API connection are not enabled.
-   */
-  Idle = 'Idle',
-
-  /**
-   * The context is connecting to the API.
-   */
-  Connecting = 'Connecting',
-
-  /**
-   * The context is ready to use.
-   */
-  Ready = 'Ready',
-
-  /**
-   * The context is current recording audio and sending it to the API for recognition.
-   * The results are also being fetched.
-   */
-  Recording = 'Recording',
-
-  /**
-   * The context is waiting for the API to finish sending trailing responses.
-   * No audio is being sent anymore.
-   */
-  Loading = 'Loading',
-}
-
 /**
@@ -54,0 +6,0 @@ * Wraps the tentative transcript response from the API.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

54586

decreased by-13.21%

Lines of code

1109

decreased by-14.63%

Dependency changes

• + Added@speechly/browser-client@1.4.0(transitive)

• - Removed@speechly/browser-client@1.3.0(transitive)

• Updated@speechly/browser-client@1.4.0