Need a way to obtain webchat.d.ts file

[code-mage]

Need a way to get access to webchat.d.ts file.

I tried building the repo, but it generates multiple d.ts files, and consolidating them is painful. It's really helpful in writing typescript code. Please provide a way to get it, either directly from cdn or by building the code.

[compulim]

Would prefer to write it manually because:

• Typing generated from tsc expose unnecessary internals of Web Chat, which confuse user
• Currently we have no plan to move our code base to TypeScript because we use dynamic typing in JavaScript heavily

[hansmbakker]

please find this d.ts code as a starter. I just added the ones needed for me, feel free to take it, improve it and make a PR out of it.

Use it from your .ts with:

import 'typings/WebChat' //you'll need to adjust this to your own setup

interface Window {
    WebChat: WebChat.IWebChat;
}

declare namespace WebChat {
    interface IWebChat {
        createStore(): IStore,
        renderWebChat(options: IWebChatOptions, element: HTMLElement): void,
        createDirectLine(tokenData: IDirectLineToken): IDirectLine
    }

    interface IDirectLineToken {
        token: string
    }

    interface IWebChatOptions {
        directLine: IDirectLine,
        store: IStore,
        styleOptions: IStyleOptions
    }

    interface IStyleOptions {
        [index: string]: number | string | boolean;
        botAvatarInitials: string,
        botAvatarBackground: string,
        botAvatarImage: string,
        bubbleBorderRadius: string,
        bubbleTextColor: string,
        bubbleFromUserBackground: string,
        bubbleFromUserTextColor: string,
        bubbleFromUserBorderRadius: string,
        hideUploadButton: boolean
    }

    interface IDirectLine { }
    interface IDispatchPayload {
        text: string
    }
    interface IDispatchAction {
        type: string,
        payload: IDispatchPayload
    }
    interface IStore {
        dispatch(action: IDispatchAction)
    }
}

[cwhitten]

@corinagum will implement the initial .d.ts file. As a team we'll think about a way to automatically generate this file with a level of control over the exposed interface that we want.

[hansmbakker]

That's great to hear :) I just wanted to contribute something for the time being since it is unclear when it will be implemented by the webchat team?

[hansmbakker]

@cwhitten @corinagum Could you please give some more insight into when we can expect this?

[corinagum]

@hansmbakker, thanks for your patience! This is assigned to me in our current milestone 4.6, which is due for release at the end of October. I am finishing up some other assignments first, but I hope to get to this one soon! Unfortunately I don't have further detail than that right now. When I begin working on this, I will move it from 'To-Do' to 'In progress' in our Project board. :)

[compulim]

I am okay to inference the types automatically, as long as:

• If something is typed, it must not have any type, everything must be concretely-typed
• If something is not supposed to be exposed, it must not be exposed in the .d.ts

We can progressively add typings, I think the most needed is defaultStyleOptions.

FYI, our project already have TypeScript set up through Babel.

[compulim]

Discussed offline with @corinagum, we will try this route:

• Write webchat.d.ts manually
  • It should include types for defaultStyleOptions
  • (Should we name it index.d.ts? Let's see how other TypeScript projects name this file)
• Update package.json and add a new field to point to this webchat.d.ts file
  • https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html
• Rename defaultStyleOptions.js to defaultStyleOptions.ts
• In defaultStyleOptions.ts, reference webchat.d.ts and import the types
• We might need to update Babel (not Webpack) to make sure if type mismatch, it will throw error
  • 70% confident that it is working today
  • In our setup, Babel is per file compilation (1 input, 1 output). Webpack is for bundle compilation (i.e. merge multiple files into a single file)
• Update Composer and other entrypoints that, when the developer type renderWebChat({ styleOptions: , IntelliSense will autocomplete the types