diff --git a/README.md b/README.md
index 3df42da996..be4ed46458 100644
--- a/README.md
+++ b/README.md
@@ -34,11 +34,12 @@ Include `botchat.css` and `botchat.js` in your website, e.g.:
-
+
@@ -112,16 +113,14 @@ Different projects have different build strategies, yours may vary considerably
2. `npm install`
3. `npm run build` (to build on every change `npm run watch`, to build production `npm run prepublish`)
-`npm run build`/`watch`/`prepublish` build the following:
+This builds the following:
-* `/built/*.js` files compiled from the TypeScript sources in `/src/*.js` - `/built/BotChat.js` is the root
-* `/build/*.js.map` sourcemaps for easier debugging
+* `/built/*.js` compiled from the TypeScript sources in `/src/*.js` - `/built/BotChat.js` is the root
+* `/built/*.d.ts` declarations for TypeScript users - `/built/BotChat.d.ts` is the root
+* `/built/*.js.map` sourcemaps for easier debugging
* `/botchat.js` webpacked UMD file containing all dependencies (React, Redux, RxJS, polyfills, etc.)
-The following files are static (not built) but key:
-
-* `/botchat.css`
-* `/botchat.d.ts` (for TypeScript users)
+`/botchat.css` is currently static, but in the future it may be built
## Customizing WebChat
@@ -146,8 +145,8 @@ Behavioral customization will require changing the TypeScript files in `/src`. A
* `Chat` is the top-level React component
* `App` creates a React application consists solely of `Chat`
* `Chat` largely follows the Redux architecture layed out in [this video series](https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree)
-* To handle async side effects of Redux actions, `Chat` uses Epics from [redux-observable](https://redux-observable.js.org) - here's a [video introduction](https://www.youtube.com/watch?v=sF5-V-Szo0c)
-* Underlying `redux-observable` (and also [DirectLineJS](https://github.com/microsoft/botframework-directlinejs)) is the `RxJS` library, which implements the Observable pattern for wrangling async. For better or for worse, a minimal grasp of `RxJS` is key to understanding WebChat's plumbing.
+* To handle async side effects of Redux actions, `Chat` uses `Epic` from [redux-observable](https://redux-observable.js.org) - here's a [video introduction](https://www.youtube.com/watch?v=sF5-V-Szo0c)
+* Underlying `redux-observable` (and also [DirectLineJS](https://github.com/microsoft/botframework-directlinejs)) is the `RxJS` library, which implements the Observable pattern for wrangling async. A minimal grasp of `RxJS` is key to understanding WebChat's plumbing.
### Contributing
@@ -175,7 +174,7 @@ If you don't want to publish your Direct Line Secret (which lets anyone put your
DirectLineJS defaults to WebSocket for receiving messages from the bot. If WebSocket is not available, it will use GET polling. You can force it to use GET polling by passing `webSocket: false` in the options you pass to DirectLine.
-Note: the standard WebChat channel does not currently use WebSocket, which is a compelling reason to use one of the above approaches.
+Note: the standard WebChat channel does not currently use WebSocket, which is a compelling reason to use this project.
### Typing
@@ -187,7 +186,7 @@ You can supply WebChat with the id (and, optionally, a friendly name) of the cur
### Replacing DirectLineJS
-You can give WebChat any object that matches the signature of DirectLineJS by passing `directLine: your_directline_replacement` to `App`/`Chat`.
+You can give WebChat any object that implements `IBotConnection` by passing `botConnection: your_directline_replacement` to `App`/`Chat`.
### The Backchannel
diff --git a/botchat.d.ts b/botchat.d.ts
deleted file mode 100644
index a16b7c1816..0000000000
--- a/botchat.d.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from 'react';
-
-export interface DirectLineOptions {
- secret?: string,
- token?: string
- domain?: string,
- webSocket?: boolean
-}
-
-export declare class DirectLine {
- constructor(options: DirectLineOptions);
- activity$: any; // Observable
- connectionStatus$: any; // BehaviorSubject
- reconnect(conversation: any);
- end();
-}
-
-export interface FormatOptions {
- showHeader?: boolean
-}
-
-export interface User {
- id: string,
- name?: string
-}
-
-export interface ChatProps {
- user: User,
- botConnection?: any,
- directLine?: DirectLineOptions,
- locale?: string,
- selectedActivity?: any,
- formatOptions?: FormatOptions
-}
-
-export type AppProps = ChatProps;
-
-export declare const App: (props: AppProps, container: HTMLElement) => void;
-export declare class Chat extends React.Component {}
-
diff --git a/package.json b/package.json
index 364978d7be..961a4283bd 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
{
"name": "botframework-webchat",
- "version": "0.7.1",
+ "version": "0.9.0",
"description": "Embeddable web chat control for the Microsoft Bot Framework",
"main": "built/BotChat.js",
- "types": "botchat.d.ts",
+ "types": "built/BotChat.d.ts",
"scripts": {
"build": "tsc && webpack",
"watch": "npm-run-all -p -r -l tsc-watch webpack-watch",
@@ -21,7 +21,7 @@
"author": "Microsoft Corp",
"license": "MIT",
"dependencies": {
- "botframework-directlinejs": "^0.8.4",
+ "botframework-directlinejs": "^0.9.0",
"core-js": "^2.4.1",
"he": "^1.1.0",
"marked": "^0.3.6",
diff --git a/src/ActivityView.tsx b/src/ActivityView.tsx
index 382a671dc4..6b2e220f89 100644
--- a/src/ActivityView.tsx
+++ b/src/ActivityView.tsx
@@ -33,7 +33,7 @@ const Attachments = (props: {
}
-interface Props {
+export interface ActivityViewProps {
format: FormatState,
activity: Activity,
measureParentHorizontalOverflow?: () => number,
@@ -41,12 +41,12 @@ interface Props {
onImageLoad: () => void
}
-export class ActivityView extends React.Component {
- constructor(props: Props) {
+export class ActivityView extends React.Component {
+ constructor(props: ActivityViewProps) {
super(props)
}
- shouldComponentUpdate(nextProps: Props) {
+ shouldComponentUpdate(nextProps: ActivityViewProps) {
return this.props.activity !== nextProps.activity || this.props.format !== nextProps.format;
}
diff --git a/src/Attachment.tsx b/src/Attachment.tsx
index bfdc7a7fa4..50e3d85a7d 100644
--- a/src/Attachment.tsx
+++ b/src/Attachment.tsx
@@ -13,7 +13,7 @@ const YOUTUBE_WWW_SHORT_DOMAIN = "www.youtu.be";
const VIMEO_DOMAIN = "vimeo.com";
const VIMEO_WWW_DOMAIN = "www.vimeo.com";
-interface QueryParams {
+export interface QueryParams {
[propName: string]: string;
}
diff --git a/src/BotChat.ts b/src/BotChat.ts
index 60a776dd19..1d42b06953 100644
--- a/src/BotChat.ts
+++ b/src/BotChat.ts
@@ -1,6 +1,6 @@
export { App, AppProps } from './App';
export { Chat, ChatProps, FormatOptions } from './Chat';
-export { DirectLine } from 'botframework-directlinejs';
+export * from 'botframework-directlinejs';
export { queryParams } from './Attachment';
// below are shims for compatibility with old browsers (IE 10 being the main culprit)
import 'core-js/modules/es6.string.starts-with';
diff --git a/src/Carousel.tsx b/src/Carousel.tsx
index b81352de72..80038b9545 100644
--- a/src/Carousel.tsx
+++ b/src/Carousel.tsx
@@ -3,7 +3,7 @@ import { Attachment } from 'botframework-directlinejs';
import { AttachmentView } from './Attachment';
import { FormatState } from './Store';
-interface CarouselProps {
+export interface CarouselProps {
format: FormatState,
measureParentHorizontalOverflow?: () => number,
attachments: Attachment[],
@@ -11,7 +11,7 @@ interface CarouselProps {
onImageLoad: ()=> void
}
-interface CarouselState {
+export interface CarouselState {
previousButtonEnabled: boolean;
nextButtonEnabled: boolean;
}
@@ -187,7 +187,7 @@ export class Carousel extends React.Component {
}
}
-interface CarouselAttachmentProps {
+export interface CarouselAttachmentProps {
format: FormatState
attachments: Attachment[]
onCardAction: (type: string, value: string) => void
diff --git a/src/History.tsx b/src/History.tsx
index fe6b6c2cab..0515760057 100644
--- a/src/History.tsx
+++ b/src/History.tsx
@@ -146,7 +146,7 @@ const measureOuterWidth = (el: HTMLElement): number => {
const suitableInterval = (current: Activity, next: Activity) =>
Date.parse(next.timestamp) - Date.parse(current.timestamp) > 5 * 60 * 1000;
-interface WrappedActivityProps {
+export interface WrappedActivityProps {
activity: Activity,
showTimestamp: boolean,
selected: boolean,
diff --git a/tsconfig.json b/tsconfig.json
index 83bbf5930a..77f89d074b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
{
"compilerOptions": {
+ "declaration": true,
"importHelpers": true,
"jsx": "react",
"lib": [