@sdifi/webchat

v0.3.0

Published

2 years ago

This is the webchat widget for the SDiFI project. It requires a working instance of a [Masdif](https://github.com/sdifi/masdif/) server.

Downloads

0High
0Medium
0Low

rkjaran

tiro-is

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/[email protected]/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

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

License

See LICENSE.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme