Allow rendering Bot Framework WebChat without DirectLine connection

[iMicknl]

Feature Request.

Is your feature request related to a problem? Please describe.

I am using the ReactWebChat component in a 'transcript viewer' scenario, where no interactivity is allowed. Unfortunately it is required to pass directLine, passing an empty object ({}) will work but throw an javascript error.

<ReactWebChat 
             directLine={{}}

TypeError: Cannot read property 'subscribe' of undefined
    at subscribeToPromiseQueue (<anonymous>:75216:33)
    at connectionStatusToNotification$ (<anonymous>:75235:35)
    at tryCatch (<anonymous>:223445:17)
    at Generator.invoke [as _invoke] (<anonymous>:223662:22)
    at Generator.next (<anonymous>:223498:21)
    at next (<anonymous>:4057:29)
    at proc (<anonymous>:4008:3)
    at <anonymous>:3487:17
    at immediately (<anonymous>:2970:12)
    at runForkEffect (<anonymous>:3486:3)

Describe the suggestion or request in detail

A way to use the ReactWebChat component in an offline / no interactivity scenario.

Describe alternatives you have considered

Passing a mock DirectLine client / RXJS Observable. However, it seems that I did need to use RXJS for this, which add a lot of overhead to my project. If there is a way to add a simple mock object to disable the connection, that would be feasible for me as well.

Additional context

See https://github.com/iMicknl/powerbi-botframework-chat-transcripts/issues/9.

Similar request: https://github.com/microsoft/BotFramework-WebChat/issues/3032

Similar customer request: https://github.com/microsoft/BotFramework-WebChat/issues/4037

[feature-request]

[iMicknl]

With the help of @xTEddie I built an OfflineHistoryConnection to mock the IBotConnection. This will make sure there is no error, thus you can use WebChat in an offline scenario / for showing history activities.

import {
  IBotConnection,
  ConnectionStatus,
  Activity,
} from "botframework-directlinejs";

import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";
import { Subscriber } from "rxjs/Subscriber";

export class OfflineHistoryConnection implements IBotConnection {

  referenceGrammarId?: string | undefined;
  public connectionStatus$: BehaviorSubject<ConnectionStatus>;
  public activity$: Observable<Activity>;

  public constructor() {

    this.connectionStatus$ = new BehaviorSubject<ConnectionStatus>(
      ConnectionStatus.Ended
    );

    this.activity$ = new Observable<Activity>(
      (observer: Subscriber<Activity>) => {
        const activity: any = {};
        observer.next(activity);
      }
    ).share();
  }

  public end(): void {
    throw new Error("Method not implemented.");
  }

  public postActivity(activity: Activity): Observable<string> {
    return Observable.of(activity.id || "");
  }

  public getSessionId?: (() => Observable<string>) | undefined;
}

Should this feature request be closed? Or would you like to add something like this to your documentation? (see #4037 for a similar customer request).

[jsomsanith]

I know it's been a while but thank you @iMicknl for this connection mock, it works perfectly