@botonic/react 0.22.0-alpha.2 → 0.22.0-beta.1

package/lib/esm/webchat/index-types.d.ts

@@ -0,0 +1,55 @@
+import * as core from '@botonic/core';
+import { RefObject } from 'react';
+import { Webview } from '../components/index-types';
+export interface WebchatStateTheme {
+    headerTitle: string;
+    brandColor: string;
+    brandImage: string;
+    triggerButtonImage: undefined;
+    textPlaceholder: string;
+    style: {
+        fontFamily: string;
+    };
+}
+export interface WebchatState {
+    width: number;
+    height: number;
+    messagesJSON: any[];
+    messagesComponents: any[];
+    replies: any[];
+    latestInput: Partial<core.Input>;
+    typing: boolean;
+    webview: Webview | null;
+    webviewParams: null;
+    session: Partial<core.Session>;
+    lastRoutePath: string | null;
+    handoff: boolean;
+    theme: WebchatStateTheme;
+    themeUpdates: Partial<WebchatStateTheme>;
+    error: {
+        message?: string;
+    };
+    devSettings: {
+        keepSessionOnReload?: boolean;
+        showSessionView?: boolean;
+    };
+    isWebchatOpen: boolean;
+    isEmojiPickerOpen: boolean;
+    isPersistentMenuOpen: boolean;
+    isCoverComponentOpen: boolean;
+    lastMessageUpdate: string;
+    currentAttachment: File | undefined;
+}
+export interface WebchatProps {
+    ref: RefObject<any>;
+    onConnectionRegained?: () => Promise<void>;
+}
+export interface WebchatDevProps extends WebchatProps {
+    initialDevSettings?: {
+        keepSessionOnReload?: boolean;
+        showSessionView?: boolean;
+    };
+}
+export interface CoverComponentProps {
+    closeComponent: () => void;
+}

package/lib/esm/webchat/index-types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index-types.js.map

package/lib/esm/webchat/index-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-types.js","sourceRoot":"src/","sources":["webchat/index-types.ts"],"names":[],"mappings":""}

package/lib/esm/webchat/index.d.ts

@@ -1,6 +1,4 @@
-/**
- * @returns {WebChatApp}
- */
-export function getBotonicApp(): WebChatApp;
-export { Webchat } from "./webchat";
-export { WebchatDev } from "./webchat-dev";
+export { Webchat } from './webchat';
+export { WebchatDev } from './webchat-dev';
+export declare function getBotonicApp(): any;
+export * from './index-types';

package/lib/esm/webchat/index.js

@@ -1,11 +1,10 @@
+// @ts-nocheck
 export { Webchat } from './webchat';
 export { WebchatDev } from './webchat-dev';
-/**
- * @returns {WebChatApp}
- */
 export function getBotonicApp() {
     // Botonic is exported from your bot
     // eslint-disable-next-line no-undef
     return Botonic;
 }
+export * from './index-types';
 //# sourceMappingURL=index.js.map

package/lib/esm/webchat/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"src/","sources":["webchat/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C;;GAEG;AACH,MAAM,UAAU,aAAa;IAC3B,oCAAoC;IACpC,oCAAoC;IACpC,OAAO,OAAO,CAAA;AAChB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"src/","sources":["webchat/index.ts"],"names":[],"mappings":"AAAA,cAAc;AACd,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,MAAM,UAAU,aAAa;IAC3B,oCAAoC;IACpC,oCAAoC;IACpC,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,cAAc,eAAe,CAAA"}

package/lib/esm/webchat-app.d.ts

@@ -55,15 +55,15 @@ export class WebchatApp {
     onUserInput({ user, input }: {
         user: any;
         input: any;
-    }): Promise<any>;
-    onConnectionRegained(): Promise<any>;
+    }): Promise<void>;
+    onConnectionRegained(): Promise<void>;
     onStateChange({ session: { user }, messagesJSON }: {
         session: {
             user: any;
         };
         messagesJSON: any;
     }): void;
-    hubtypeService: any;
+    hubtypeService: HubtypeService | undefined;
     onServiceEvent(event: any): void;
     updateUser(user: any): void;
     addBotMessage(message: any): void;
@@ -96,3 +96,4 @@ export class WebchatApp {
     render(dest: any, optionsAtRuntime?: {}): Promise<void>;
 }
 import React from 'react';
+import { HubtypeService } from '@botonic/core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.22.0-alpha.2",
+  "version": "0.22.0-beta.1",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs",

package/src/components/{index.d.ts → index-types.ts}

@@ -1,7 +1,6 @@
-import * as React from 'react'
-import { ErrorInfo } from 'react'
+import React, { ErrorInfo } from 'react'
 
-import { CoverComponentProps } from '../webchat'
+import { CoverComponentProps } from '../webchat/index-types'
 
 export type MessageType =
   | 'audio'
@@ -26,18 +25,10 @@ export interface MessageProps {
   typing?: number
 }
 
-export const Audio: React.FunctionComponent<MessageProps>
-export const Document: React.FunctionComponent<MessageProps>
-
-export const Message: React.FunctionComponent<MessageProps>
-export type Message = React.FunctionComponent<MessageProps>
-export const Video: React.FunctionComponent<MessageProps>
-
 export interface TextProps extends MessageProps {
   // converts markdown syntax to HTML
   markdown?: boolean
 }
-export const Text: React.FunctionComponent<TextProps>
 
 export interface Webview {
   name: string
@@ -56,23 +47,16 @@ export interface ButtonProps {
   disabledstyle?: boolean
 }
 
-export const Button: React.FunctionComponent<ButtonProps>
-
 export interface ReplyProps {
   path?: string
   payload?: string
   children: string
 }
-export const Reply: React.FunctionComponent<ReplyProps>
-export type Reply = React.FunctionComponent<ReplyProps>
 
 export interface PicProps {
   src: string
 }
 
-export const Carousel: React.FunctionComponent<MessageProps>
-export const Image: React.FunctionComponent<ImageProps>
-export const Pic: React.FunctionComponent<PicProps>
 export type ImageProps = PicProps
 
 export interface TitleProps {
@@ -80,17 +64,14 @@ export interface TitleProps {
   style: string
 }
 
-export const Element: React.FunctionComponent<MessageProps>
-export const Subtitle: React.FunctionComponent<SubtitleProps>
-export const Title: React.FunctionComponent<TitleProps>
 export type SubtitleProps = TitleProps
 
-type CustomProp = { custom?: React.ComponentType }
-type EnableProp = { enable?: boolean }
-type ImageProp = { image?: string } // https URL or imported Image asset
-type PersistentMenuCloseOption = { closeLabel: string }
-type PersistentMenuOption = { label: string } & ButtonProps
-type StyleProp = { style?: any }
+export type CustomProp = { custom?: React.ComponentType }
+export type EnableProp = { enable?: boolean }
+export type ImageProp = { image?: string } // https URL or imported Image asset
+export type PersistentMenuCloseOption = { closeLabel: string }
+export type PersistentMenuOption = { label: string } & ButtonProps
+export type StyleProp = { style?: any }
 
 export type PersistentMenuTheme = (
   | PersistentMenuCloseOption
@@ -202,27 +183,25 @@ export interface WebchatSettingsProps {
   persistentMenu?: PersistentMenuTheme
   theme?: ThemeProps
 }
-export const WebchatSettings: React.FunctionComponent<WebchatSettingsProps>
 
 export type WrappedComponent<Props> = React.FunctionComponent<Props> & {
   customTypeName: string
 }
 
-export class ErrorBoundary<Props> extends React.Component<Props> {
-  componentDidCatch(error: Error, errorInfo: ErrorInfo): void
-}
-
-export function createErrorBoundary<Props>(_?: {
-  errorComponent: React.ComponentType
-}): ErrorBoundary<Props>
+// TODO: Reuse types to be typed in respective functions
+// export class ErrorBoundary<Props> extends React.Component<Props> {
+//   componentDidCatch(error: Error, errorInfo: ErrorInfo): void
+// }
 
-export function customMessage<Props>(_: {
-  name: string
-  component: React.ComponentType<Props>
-  defaultProps?: Record<string, unknown>
-  errorBoundary?: ErrorBoundary<Props>
-}): WrappedComponent<Props>
+// export function createErrorBoundary<Props>(_?: {
+//   errorComponent: React.ComponentType
+// }): ErrorBoundary<Props>
 
-export function getDisplayName(component: React.ComponentType): string
+// export function customMessage<Props>(_: {
+//   name: string
+//   component: React.ComponentType<Props>
+//   defaultProps?: Record<string, unknown>
+//   errorBoundary?: ErrorBoundary<Props>
+// }): WrappedComponent<Props>
 
-export * from './multichannel'
+// export function getDisplayName(component: React.ComponentType): string

package/src/components/{index.js → index.ts}

@@ -5,7 +5,9 @@ export { customMessage } from './custom-message'
 export { Document } from './document'
 export { Element } from './element'
 export { Image } from './image'
+export * from './index-types'
 export { Location } from './location'
+export { Message } from './message'
 export { MessageTemplate } from './message-template'
 export * from './multichannel'
 export { Pic } from './pic'

package/src/components/multichannel/{index.d.ts → index-types.ts}

@@ -1,6 +1,4 @@
-import * as React from 'react'
-
-type IndexMode = 'number' | 'letter' | undefined //undefined means no index
+export type IndexMode = 'number' | 'letter' | undefined //undefined means no index
 
 export interface MultichannelViewOptions {
   boldIndex?: boolean
@@ -23,8 +21,6 @@ export interface MultichannelTextProps extends MultichannelViewOptions {
   buttonsTextSeparator?: string
 }
 
-export const MultichannelText: React.FunctionComponent<MultichannelTextProps>
-
 // Carousel
 export interface MultichannelCarouselProps extends MultichannelViewOptions {
   enableURL?: boolean
@@ -33,7 +29,6 @@ export interface MultichannelCarouselProps extends MultichannelViewOptions {
   showSubtitle?: boolean
   buttonsAsText?: boolean
 }
-export const MultichannelCarousel: React.FunctionComponent<MultichannelCarouselProps>
 
 // Button
 export interface MultichannelButtonProps {
@@ -44,10 +39,8 @@ export interface MultichannelButtonProps {
   webview?: string
   asText?: boolean
 }
-export const MultichannelButton: React.FunctionComponent<MultichannelButtonProps>
 
 // Reply
-export const MultichannelReply: React.FunctionComponent<MultichannelButtonProps>
 
 export interface MultichannelProps extends MultichannelViewOptions {
   firstIndex?: number | string
@@ -61,5 +54,3 @@ export interface MultichannelProps extends MultichannelViewOptions {
    **/
   messageSeparator?: string
 }
-
-export const Multichannel: React.FunctionComponent<MultichannelProps>

package/src/components/multichannel/{index.js → index.ts}

@@ -9,3 +9,5 @@ export { MultichannelText }
 export { MultichannelButton }
 export { MultichannelReply }
 export { MultichannelCarousel }
+
+export * from './index-types'

package/src/contexts.jsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import { createContext } from 'react'
 
 import { webchatInitialState } from './webchat/hooks'
 
-export const RequestContext = React.createContext({
+export const RequestContext = createContext({
   getString: () => '',
   setLocale: () => '',
   session: {},
@@ -12,7 +12,7 @@ export const RequestContext = React.createContext({
   defaultTyping: 0,
 })
 
-export const WebchatContext = React.createContext({
+export const WebchatContext = createContext({
   sendText: text => {},
   sendAttachment: attachment => {},
   sendPayload: payload => {},

package/src/index-types.ts

@@ -0,0 +1,186 @@
+import * as core from '@botonic/core'
+import React from 'react'
+
+import {
+  ButtonProps,
+  ReplyProps,
+  ThemeProps,
+  WebchatSettingsProps,
+  Webview,
+} from './components/index-types'
+import { WebchatState } from './webchat'
+
+/**
+ * See @botonic/core's Response for the description of the Response's semantics*/
+export interface BotResponse extends core.BotRequest {
+  response: [React.ReactNode]
+}
+
+export interface Route extends core.Route {
+  action?: React.ComponentType<any>
+  retryAction?: React.ComponentType<any>
+}
+export type Routes = core.Routes<Route>
+
+// Parameters of the actions' botonicInit method
+export interface ActionRequest {
+  defaultDelay: number
+  defaultTyping: number
+  input: core.Input
+  lastRoutePath: string
+  params: { [key: string]: string }
+  plugins: { [id: string]: core.Plugin }
+  session: core.Session
+}
+
+export interface RequestContextInterface extends ActionRequest {
+  getString: (stringId: string) => string
+  setLocale: (locale: string) => string
+}
+
+export interface CustomMessageType {
+  customTypeName: string
+}
+
+// TODO: Reuse types to be reused in respective components
+// export class WebchatApp {
+//   constructor(options: WebchatAppArgs)
+//   addBotMessage(message: WebchatMessage): void
+//   addBotText(text: string): void
+//   addUserMessage(message: WebchatMessage): void
+//   addUserPayload(payload: string): void
+//   addUserText(text: string): void
+//   clearMessages(): void
+//   close(): void
+//   closeCoverComponent(): void
+//   destroy(): void
+//   getComponent(
+//     host: HTMLElement,
+//     optionsAtRuntime?: WebchatAppArgs
+//   ): React.ForwardRefExoticComponent<any>
+//   getLastMessageUpdate(): string
+//   getMessages(): WebchatMessage[]
+//   getVisibility(): Promise<boolean>
+//   isWebchatVisible({ appId: string }): Promise<boolean>
+//   onCloseWebchat(args: any): void
+//   onInitWebchat(args: any): void
+//   onOpenWebchat(args: any): void
+//   onServiceEvent(event: Event): void
+//   onStateChange(args: OnStateChangeArgs): void
+//   onUserInput(args: OnUserInputArgs): Promise<void>
+//   open(): void
+//   openCoverComponent(): void
+//   render(dest?: HTMLElement, optionsAtRuntime?: WebchatAppArgs): void
+//   resendUnsentInputs(): Promise<void>
+//   resolveWebchatVisibility(optionsAtRuntime: {
+//     appId: string
+//     visibility: () => boolean
+//   }): Promise<boolean>
+//   setTyping(enable: boolean): void
+//   toggle(): void
+//   toggleCoverComponent(): void
+//   updateMessageInfo(msgId: string, messageInfo: MessageInfo): void
+//   updateLastMessageDate(date: string): void
+//   updateUser(user: Partial<core.SessionUser>): void
+//   updateWebchatSettings(settings: WebchatSettingsProps): void
+//   renderCustomComponent(customComponent: React.ReactNode): void
+//   unmountCustomComponent(): void
+// }
+
+// export interface WebchatArgs {
+//   blockInputs?: BlockInputOption[]
+//   coverComponent?: CoverComponentOptions
+//   defaultDelay?: number
+//   defaultTyping?: number
+//   enableAnimations?: boolean
+//   enableAttachments?: boolean
+//   enableEmojiPicker?: boolean
+//   enableUserInput?: boolean
+//   shadowDOM?: boolean | (() => boolean)
+//   hostId?: string
+//   getString?: (stringId: string, session: core.Session) => string
+//   onClose?: (app: WebchatApp, args: any) => void
+//   onInit?: (app: WebchatApp, args: any) => void
+//   onMessage?: (app: WebchatApp, message: WebchatMessage) => void
+//   onOpen?: (app: WebchatApp, args: any) => void
+//   onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
+//   persistentMenu?: PersistentMenuTheme
+//   storage?: Storage | null
+//   storageKey?: any
+//   theme?: ThemeProps
+// }
+
+// export interface WebchatAppArgs extends WebchatArgs {
+export interface WebchatAppArgs {
+  appId?: string
+  visibility?: () => boolean
+}
+
+export interface WebchatMessage {
+  ack: 0 | 1
+  buttons: ButtonProps[]
+  data: any
+  delay: number
+  display: boolean
+  from: 'user' | 'bot'
+  id: string
+  markdown: boolean
+  replies: ReplyProps[]
+  timestamp: string
+  type: core.InputType
+  typing: number
+}
+
+export interface OnUserInputArgs {
+  input: core.Input
+  lastRoutePath?: string
+  session?: core.Session
+  user: core.SessionUser
+}
+
+export interface OnStateChangeArgs {
+  messagesJSON: WebchatMessage[]
+  user: core.SessionUser
+}
+
+export interface MessageInfo {
+  data: any | 'typing_on'
+  id: string
+  type: 'update_webchat_settings' | 'sender_action'
+}
+
+export interface Event {
+  action?: 'update_message_info'
+  isError?: boolean
+  message?: MessageInfo
+}
+
+export interface WebchatContextProps {
+  sendText: (text: string, payload?: string) => void
+  sendAttachment: (attachment: File) => void
+  sendPayload: (payload: string) => void
+  sendInput: (input: core.Input) => void
+  openWebview: (webviewComponent: Webview) => void
+  addMessage: (message: WebchatMessage) => void
+  updateMessage: (message: WebchatMessage) => void
+  updateReplies: (replies: boolean) => void
+  updateLatestInput: (input: core.Input) => void
+  closeWebview: () => void
+  toggleWebchat: () => void
+  getThemeProperty: (property: string, defaultValue?: string) => any
+  resolveCase: () => void
+  theme: ThemeProps
+  webchatState: WebchatState
+  updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
+  updateUser: (user: Partial<core.SessionUser>) => void
+}
+
+// export class DevApp extends WebchatApp {
+//   constructor(args: WebchatAppArgs)
+//   onUserInput(args: OnUserInputArgs): Promise<void>
+//   render(dest: HTMLElement, optionsAtRuntime: WebchatAppArgs): void
+// }
+
+export * from './components'
+export * from './util'
+export * from './webchat'

package/src/{index.js → index.ts}

@@ -1,10 +1,11 @@
 export { BotonicInputTester, BotonicOutputTester } from './botonic-tester'
-export * from './components'
+// export * from './components'
 export { RequestContext, WebchatContext } from './contexts'
 export { DevApp } from './dev-app'
+export * from './index-types'
 export { msgsToBotonic, msgToBotonic } from './msg-to-botonic'
 export { NodeApp } from './node-app'
-export { staticAsset } from './util/environment'
-export { getBotonicApp, Webchat } from './webchat/index.js'
+// export { staticAsset } from './util/environment'
+// export { getBotonicApp, Webchat } from './webchat/index'
 export { WebchatApp } from './webchat-app'
 export { WebviewApp } from './webview-app'

package/src/webchat/{index.d.ts → index-types.ts}

@@ -1,9 +1,7 @@
 import * as core from '@botonic/core'
-import * as React from 'react'
 import { RefObject } from 'react'
 
-import { Reply, Webview } from '../components/index'
-import { Message, WebchatApp, WebchatArgs } from '../index'
+import { Webview } from '../components/index-types'
 
 export interface WebchatStateTheme {
   headerTitle: string
@@ -20,8 +18,8 @@ export interface WebchatState {
   width: number
   height: number
   messagesJSON: any[]
-  messagesComponents: Message[]
-  replies: Reply[]
+  messagesComponents: any[]
+  replies: any[]
   latestInput: Partial<core.Input>
   typing: boolean
   webview: Webview | null
@@ -41,11 +39,11 @@ export interface WebchatState {
   currentAttachment: File | undefined
 }
 
-export interface WebchatProps extends WebchatArgs {
+// export interface WebchatProps extends WebchatArgs {
+export interface WebchatProps {
   ref: RefObject<any>
   onConnectionRegained?: () => Promise<void>
 }
-export const WebChat: React.ForwardRefExoticComponent<WebchatProps>
 
 export interface WebchatDevProps extends WebchatProps {
   initialDevSettings?: {
@@ -53,9 +51,6 @@ export interface WebchatDevProps extends WebchatProps {
     showSessionView?: boolean
   }
 }
-export const WebChatDev: React.ForwardRefExoticComponent<WebchatDevProps>
-
-export function getBotonicApp(): WebchatApp
 
 export interface CoverComponentProps {
   closeComponent: () => void

package/src/webchat/{index.js → index.ts}

@@ -1,11 +1,11 @@
+// @ts-nocheck
 export { Webchat } from './webchat'
 export { WebchatDev } from './webchat-dev'
 
-/**
- * @returns {WebChatApp}
- */
 export function getBotonicApp() {
   // Botonic is exported from your bot
   // eslint-disable-next-line no-undef
   return Botonic
 }
+
+export * from './index-types'