@sdifi/webchat NPM

SDiFI Webchat

This is the webchat widget for the SDiFI project. It requires a working instance of a Masdif server.

In development. Expect breakage.

Usage

The Webchat widget is published both as a React component and a standalone UMD bundle.

React component

To use the component in your project add it as a dependency:

yarn add @sdifi/webchat

The react and react-dom packages are peer dependencies, so if you don't already have those add them as dependencies in your project:

yarn add react react-dom

Example usage:

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import Chat from '@sdifi/webchat';

const App = () => {
  return (
    <div>
      <Chat serverAddress="http://localhost:8080" title="Jóakim" subtitle="Aðalönd" />
    </div>
  );
};

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

Standalone UMD bundle

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/@sdifi/webchat@0.2.1/dist/webchat.umd.production.min.js"></script>
    <script>
    window.onload = () => {
      Webchat.init("root", {
        serverAddress: "http://localhost:8080",
        title: "Jóakim",
        subtitle: "Aðalönd",
      });
    }
    </script>
  </body>
</html>

Speech input

Currently the speech recognition input is provided by a direct client side connection to the gRPC-Web service at speech.tiro.is and final results are POSTed as text messages to the conversation. The server address is not configurable, as the plan is to add ASR to Masdif. We use grpc-nice-web with TypeScript code generated by ts-proto. The code is generated from the Protobuf definitions in Tiro Speech Core and rarely change, so the generated code is committed to version control.

Development workflow

Have a running Masdif server.
yarn install
yarn start &
cd example && yarn install && yarn start
Go look at http://localhost:1234 hot reload while editing the code

To just build minified (and not minified) bundles do:

yarn build

This will create TypeScript typedefs, a CommonJS (dist/webchat.cjs.production.min.js), ESM (dist/webchat.esm.js) and a standalone UMD bundle (dist/webchat.umd.production.min.js).

Publishing new versions

Update the version field in package.json. Try to follow semver.
git add package.json && git commit -m "Update version to X.Y.Z" && git tag -a vX.Y.Z
yarn install
yarn publish --access public --new-version X.Y.Z

Things todo

Send and receive text messages
Style components
Receive images
Receive buttons
Send button/quick_replies actions back
Play audio replies
Speech input
User settings
Keep track of read/unread status of responses
Tooltip for responses when closed
Speech input through Masdif
Disable when Masdif is unhealthy
Tests
Make themeable (see styled-components ThemeProvider)

License

See LICENSE.

axios long nice-grpc-web protobufjs styled-components

@everything-registry/sub-chunk-814

1 year ago

1 year ago

1 year ago

1 year ago