@tellescope/video-chat 0.0.12 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/video-chat",
-  "version": "0.0.12",
+  "version": "0.0.16",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -33,17 +33,17 @@
     "@fontsource/roboto": "^4.5.1",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
-    "@tellescope/constants": "^0.0.12",
-    "@tellescope/react-components": "^0.0.12",
-    "@tellescope/sdk": "^0.0.12",
-    "@tellescope/types-client": "^0.0.12",
-    "@tellescope/types-models": "^0.0.12",
-    "@tellescope/types-utilities": "^0.0.12",
-    "@tellescope/utilities": "^0.0.12",
+    "@tellescope/constants": "^0.0.16",
+    "@tellescope/react-components": "^0.0.16",
+    "@tellescope/sdk": "^0.0.16",
+    "@tellescope/types-client": "^0.0.16",
+    "@tellescope/types-models": "^0.0.16",
+    "@tellescope/types-utilities": "^0.0.16",
+    "@tellescope/utilities": "^0.0.16",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "amazon-chime-sdk-component-library-react": "^2.12.0",
-    "amazon-chime-sdk-js": "^2.23.0",
+    "amazon-chime-sdk-js": "^2.24.0",
     "eslint": "^7.32.0",
     "eslint-plugin-react": "^7.26.1",
     "nodemon": "^2.0.13",
@@ -54,7 +54,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "5d67de4721a3cbc3537a870281f2c657099e07b4",
+  "gitHead": "06e581f4d3a6c5b57fd0cfcc22103b94125f9da4",
   "publishConfig": {
     "access": "public"
   }

package/src/controls.tsx

@@ -0,0 +1,33 @@
+// components that work with web or native
+import React from "react"
+
+import { 
+  VideoIcon,
+  VideoOffIcon,
+  MicrophoneIcon,
+  MicrophoneOffIcon,
+} from "@tellescope/react-components/lib/esm/mui"
+import { LabeledIconButton } from "@tellescope/react-components/lib/esm/controls"
+import {
+  CurrentCallContext,
+} from "./video"
+
+export const VideoToggle = () => {
+  const { toggleVideo, videoIsEnabled } = React.useContext(CurrentCallContext)
+
+  return (
+    <LabeledIconButton Icon={videoIsEnabled ? VideoIcon : VideoOffIcon} onClick={toggleVideo} 
+      label={videoIsEnabled ? "Turn Camera Off" : "Turn Camera On"}
+    />
+  )
+}
+
+export const MicrophoneToggle = () => {
+  const { microphoneIsEnabled, toggleMicrophone } = React.useContext(CurrentCallContext)
+
+  return (
+    <LabeledIconButton Icon={microphoneIsEnabled ? MicrophoneIcon : MicrophoneOffIcon} onClick={toggleMicrophone} 
+      label={microphoneIsEnabled ? "Turn Microphone Off" : "Turn Microphone On"}
+    />
+  )
+}

package/src/index.native.ts

@@ -1 +1,2 @@
-export * from "./video" 
+export * from "./video" 
+export * from "./controls" 

package/src/index.ts

@@ -1 +1,2 @@
-export * from "./video";
+export * from "./video";
+export * from "./controls"

package/src/native/RNVideoRenderView.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: MIT-0
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { requireNativeComponent, findNodeHandle, ViewStyle } from 'react-native';
+import { NativeFunction } from './bridge';
+
+export class RNVideoView extends React.Component<{ tileId: number, style?: ViewStyle }> {
+  componentDidMount() {
+    // we need to delay the bind video 
+    // Because "componentDidMount" will be called "immediately after the initial rendering occurs"
+    // This is *before* RCTUIManager add this view to register (so that viewForReactTag() can return a view)
+    // So we need to dispatch bindVideoView after this function complete
+    setTimeout(() => {
+      NativeFunction.bindVideoView(findNodeHandle(this), this.props.tileId);
+    });
+  }
+
+  componentWillUnmount() {
+    NativeFunction.unbindVideoView(this.props.tileId);
+  }
+
+  render() {
+    return <RNVideoRenderViewNative {...this.props} />;
+  }
+}
+
+const RNVideoRenderViewNative = requireNativeComponent('RNVideoView');

package/src/native/bridge.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: MIT-0
+ */
+
+import { NativeModules, NativeEventEmitter } from 'react-native';
+
+/**
+ * These are the function that will be called from native side
+ * i.e. Native -> React Native
+ * 
+ * NativeEventEmitter.onMeetingStart(meetingName)
+ * NativeEventEmitter.onMeetingEnd()
+ * NativeEventEmitter.onAttendeesJoin(attendeeInfo)
+ * NativeEventEmitter.onAttendeesLeave(attendeeInfo)
+ * NativeEventEmitter.onAddVideoTile(tileState)
+ * NativeEventEmitter.onRemoveVideoTile(tileState)
+ * NativeEventEmitter.onError(errorMessage)
+ */
+const _eventEmitter = new NativeEventEmitter(NativeModules.NativeMobileSDKBridge);
+
+export const MobileSDKEvent = {
+  OnMeetingStart: 'OnMeetingStart',
+  OnMeetingEnd: 'OnMeetingEnd',
+  OnAttendeesJoin: 'OnAttendeesJoin',
+  OnAttendeesLeave: 'OnAttendeesLeave',
+  OnAttendeesMute: 'OnAttendeesMute',
+  OnAttendeesUnmute: 'OnAttendeesUnmute',
+  OnAddVideoTile: 'OnAddVideoTile',
+  OnRemoveVideoTile: 'OnRemoveVideoTile',
+  OnError: 'OnError',
+}
+
+export const MeetingError = {
+  OnMaximumConcurrentVideoReached: "OnMaximumConcurrentVideoReached"
+}
+
+export function getSDKEventEmitter() {
+  return _eventEmitter;
+}
+
+/**
+ * These are functions available for React native to call on native
+ * i.e. React Native -> Native
+ *
+ * NativeModules.NativeMobileSDKBridge.startMeeting(meetingId, userName)
+ * NativeModules.NativeMobileSDKBridge.stopMeeting()
+ * NativeModules.NativeMobileSDKBridge.setMute(isMute) -> boolean
+ * NativeModules.NativeMobileSDKBridge.setCameraOn(isOn) -> boolean
+ * NativeModules.NativeMobileSDKBridge.bindVideoView(reactTagId, tileId)
+ * NativeModules.NativeMobileSDKBridge.unbindVideoView(reactTagId, tileId)
+ */
+export const NativeFunction = {
+  startMeeting: NativeModules.NativeMobileSDKBridge.startMeeting,
+  stopMeeting: NativeModules.NativeMobileSDKBridge.stopMeeting,
+  setMute: NativeModules.NativeMobileSDKBridge.setMute,
+  setCameraOn: NativeModules.NativeMobileSDKBridge.setCameraOn,
+  bindVideoView: NativeModules.NativeMobileSDKBridge.bindVideoView,
+  unbindVideoView: NativeModules.NativeMobileSDKBridge.unbindVideoView,
+}

package/src/video.native.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useCallback, useContext, useEffect, useState } from "react"
-import { View, Text, StyleSheet } from "react-native"
+import { View, StyleSheet } from "react-native"
 import {
   AttendeeInfo,
   MeetingInfo,
@@ -16,14 +16,25 @@ import {
   UserIdentity,
 } from '@tellescope/types-utilities'
 import { useSession } from "@tellescope/react-components/lib/esm/authentication"
-import { Button } from "@tellescope/react-components/lib/esm/mui"
+import { Flex } from "@tellescope/react-components/lib/esm/layout"
+import { 
+  Button, 
+  Typography, 
+  convert_CSS_to_RNStyles,
+
+  VideoIcon,
+  VideoOffIcon,
+  MicrophoneIcon,
+  MicrophoneOffIcon,
+} from "@tellescope/react-components/lib/esm/mui.native"
 
 import {
   CurrentCallContext,
   JoinVideoCallReturnType,
   StartVideoCallReturnType,
   VideoProps,
-  AttendeeDisplayInfo
+  AttendeeDisplayInfo,
+  VideoViewProps,
 } from "./video.js"
 
 import {
@@ -33,17 +44,32 @@ import {
 } from "./native/bridge"
 import { RNVideoView } from "./native/RNVideoRenderView"
 
-export const WithVideo = ({ children } : VideoProps ) => {
+interface TileState {
+  isLocal: boolean,
+  isScreenShare: boolean,
+  tileId: number,
+}
+
+export const WithVideo = ({ children } : VideoProps) => {
   const [meeting, setMeeting] = useState(undefined as MeetingInfo | undefined)
 
   const [inMeeting, setInMeeting] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
+  const [muted, setMuted] = useState(false)
   const [videoIsEnabled, setVideoIsEnabled] = useState(false)
-  const [videoTiles, setVideoTiles] = useState([] as string[])
-  const [screenShareTile, setScreenShareTile] = useState('')
+  const [videoTiles, setVideoTiles] = useState([] as number[])
+  const [localTileId, setLocalTileId] = useState(null as number | null)
+  const [screenShareTile, setScreenShareTile] = useState(null as number | null)
   const [attendees, setAttendees] = useState ([] as AttendeeDisplayInfo[])
 
-  const toggleVideo = () => NativeFunction.setCameraOn(!videoIsEnabled)
+  const toggleVideo = async () => {
+    NativeFunction.setCameraOn(!videoIsEnabled)
+    setVideoIsEnabled(v => !v)
+  }
+  const toggleMic = async () => {
+    NativeFunction.setMute(!muted)
+    setMuted(m => !m)
+  }
   const emitter = getSDKEventEmitter()
 
   useEffect(() => { 
@@ -52,19 +78,22 @@ export const WithVideo = ({ children } : VideoProps ) => {
       setIsLoading(false)
     });
 
-    const endSubscription = emitter.addListener(MobileSDKEvent.OnMeetingEnd, () => {
-      setInMeeting(true)
+    // called when user clicks Leave Meeting or meeting is ended by host
+    const endSubscription = emitter.addListener(MobileSDKEvent.OnMeetingEnd, a => {
+      setInMeeting(false)
       setIsLoading(false)
     });
 
-    const joinSubscription = emitter.addListener(MobileSDKEvent.OnAttendeesJoin, ({ attendeeId, externalUserId }) => {
+    const joinSubscription = emitter.addListener(MobileSDKEvent.OnAttendeesJoin, (added: { attendeeId: string, externalUserId: string }) => {
+      const { attendeeId, externalUserId } = added
       setAttendees(as => !as.find(a => a.attendeeId === attendeeId) 
         ? [{ attendeeId, externalUserId, muted: false }, ...as] 
         : as
       )
     });
 
-    const leaveSubscription = emitter.addListener(MobileSDKEvent.OnAttendeesLeave, ({ attendeeId }) => {
+    const leaveSubscription = emitter.addListener(MobileSDKEvent.OnAttendeesLeave, (leaving: { attendeeId: string }) => {
+      const { attendeeId } = leaving
       setAttendees(as => as.filter(a => a.attendeeId !== attendeeId))
     });
 
@@ -80,25 +109,27 @@ export const WithVideo = ({ children } : VideoProps ) => {
       setAttendees(as => as.map(a => a.attendeeId === attendeeId ? { ...a, muted: false } : a))
     });
 
-    const addVideoSubscription = emitter.addListener(MobileSDKEvent.OnAddVideoTile, (tileState) => {
+    const addVideoSubscription = emitter.addListener(MobileSDKEvent.OnAddVideoTile, (tileState: TileState) => {
       if (tileState.isScreenShare) {
         setScreenShareTile(tileState.tileId)
         return
       }
-      setVideoTiles(v => [...v, tileState.titleId])
+      if (tileState.isLocal) {
+        setLocalTileId(tileState.tileId)
+      }
+      setVideoTiles(v => [...v, tileState.tileId])
       setVideoIsEnabled(v => tileState.isLocal ? true : v)
     });
 
-    const removeVideoSubscription = emitter.addListener(MobileSDKEvent.OnRemoveVideoTile, (tileState) => {
+    const removeVideoSubscription = emitter.addListener(MobileSDKEvent.OnRemoveVideoTile, (tileState: TileState) => {
       if (tileState.isScreenShare) {
-        setScreenShareTile('')
+        setScreenShareTile(null)
         return
       }
       setVideoTiles(vs => vs.filter(v => v !== tileState.tileId))
       setVideoIsEnabled(v => tileState.isLocal ? false : v)
     });
 
-
     return () => {
       startSubscription.remove();
       endSubscription.remove();
@@ -113,12 +144,42 @@ export const WithVideo = ({ children } : VideoProps ) => {
   }, [emitter]) 
 
   return (
-    <CurrentCallContext.Provider value={{ attendees, videoTiles, meeting, shareScreenId: screenShareTile, setMeeting, videoIsEnabled, toggleVideo }}>
+    <CurrentCallContext.Provider value={{ 
+      attendees, 
+      localTileId,
+      videoTiles, 
+      meeting, 
+      shareScreenId: screenShareTile, 
+      setMeeting, 
+      videoIsEnabled, 
+      toggleVideo, 
+      microphoneIsEnabled: !muted,
+      toggleMicrophone: toggleMic,
+    }}>
       {children}
     </CurrentCallContext.Provider>
   )
 }
 
+
+export const useRemoteViews = ({ style } : { style: React.CSSProperties }) => {
+  const { localTileId, videoTiles } = React.useContext(CurrentCallContext)
+  const nonLocal = videoTiles.filter(v => v !== localTileId)
+
+  return nonLocal.map(tileId => 
+    <RNVideoView style={convert_CSS_to_RNStyles(style) ?? styles.video} tileId={tileId} />
+  )
+}
+
+export const SelfView = ({ style } : VideoViewProps) => {
+  const { localTileId } = React.useContext(CurrentCallContext)
+  if (!localTileId) return null
+  
+  return (
+    <RNVideoView style={convert_CSS_to_RNStyles(style) ?? styles.video} tileId={localTileId}/>
+  )
+}
+
 export const useStartVideoCall = (): StartVideoCallReturnType => {
   const session = useSession()
   const { meeting, setMeeting, videoIsEnabled, toggleVideo } = React.useContext(CurrentCallContext)
@@ -162,7 +223,16 @@ export const useStartVideoCall = (): StartVideoCallReturnType => {
     setMeeting(undefined)
   }
 
-  return { meeting, videoIsEnabled, starting, ending, toggleVideo, createAndStartMeeting, addAttendees, endMeeting }
+  return { 
+    meeting, 
+    videoIsEnabled, 
+    starting, 
+    ending, 
+    toggleVideo, 
+    createAndStartMeeting, 
+    addAttendees, 
+    endMeeting,
+  }
 }
 
 export const useJoinVideoCall = (): JoinVideoCallReturnType => {
@@ -174,66 +244,57 @@ export const useJoinVideoCall = (): JoinVideoCallReturnType => {
 
   return { meeting, videoIsEnabled, toggleVideo, joinMeeting }
 }
-
 export const VideoTileGrid = () => {
   const { 
     // attendees, 
-    videoIsEnabled, 
     videoTiles, 
-    shareScreenId 
+    toggleVideo,
   } = useContext(CurrentCallContext)
 
   return (
-    <View style={[styles.container, { justifyContent: 'flex-start' }]}>
-      <Text style={styles.title}>TITLE</Text>
-      <View style={styles.buttonContainer}>
-        {/* <MuteButton muted={currentMuted} onPress={() => NativeFunction.setMute(!currentMuted) }/>          */}
-        {/* <CameraButton disabled={selfVideoEnabled} onPress={() =>  NativeFunction.setCameraOn(!videoIsEnabled)}/> */}
-        <Button disabled={videoIsEnabled} onPress={() =>  NativeFunction.setCameraOn(!videoIsEnabled)}>
-          Toggle Video
-        </Button>
-        {/* <HangOffButton onPress={() => NativeFunction.stopMeeting()} /> */}
-        <Button onPress={() => NativeFunction.stopMeeting()}> Leave Meeting </Button>
-      </View>
-      <Text style={styles.title}>Video</Text>
-      <View style={styles.videoContainer}>
+    <Flex column justifyContent="space-between" alignItems="center">
+      <Flex style={styles.videoContainer}>
         {
           videoTiles.length > 0 ? videoTiles.map(tileId => 
             <RNVideoView style={styles.video} key={tileId} tileId={tileId} />
-          ) : <Text style={styles.subtitle}>No one is sharing video at this moment</Text>
+          ) : <Typography style={styles.subtitle}>No one is sharing video at this moment</Typography>
         }
-      </View>
+      </Flex>
+
+      {/* 
       {
         !!shareScreenId &&    
         <React.Fragment>
-          <Text style={styles.title}>Screen Share</Text>
+          <Typography style={styles.title}>Screen Share</Typography>
           <View style={styles.videoContainer}>
             <RNVideoView style={styles.screenShare} key={shareScreenId} tileId={shareScreenId} />
           </View>
         </React.Fragment>
-      }
-      <Text style={styles.title}>Attendee</Text>
+      } 
+      */}
+
+      <Flex justifyContent="space-between" style={{ height: '5%' }}>
+        {/* <MuteButton muted={currentMuted} onPress={() => NativeFunction.setMute(!currentMuted) }/>          */}
+        {/* <CameraButton disabled={selfVideoEnabled} onPress={() =>  NativeFunction.setCameraOn(!videoIsEnabled)}/> */}
+        <Button onPress={toggleVideo}>
+          Toggle Video
+        </Button>
+        {/* <HangOffButton onPress={() => NativeFunction.stopMeeting()} /> */}
+        <Button onPress={() => NativeFunction.stopMeeting()}> Leave Meeting </Button>
+      </Flex>
+
       {/* <FlatList
         style={styles.attendeeList}
         data={attendees}
         renderItem={({ item }) => <AttendeeItem attendeeName={attendeeNameMap[item] ? attendeeNameMap[item] : item} muted={this.state.mutedAttendee.includes(item)}/>}
         keyExtractor={(item) => item}
       /> */}
-    </View>
+
+    </Flex>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '95%',
-    backgroundColor: 'white'
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
   title: {
     fontSize: 30,
     fontWeight: '700'
@@ -247,6 +308,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-around',
     width: '100%',
+    height: '95%',
     // This is an existing React Native issue:
     // When you create a native android component
     // that use GLSurfaceView (We use this internally), the entire screen will
@@ -254,8 +316,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden'
   },
   video: {
-    width: '45%',
-    margin: '1%',
+    width: '100%',
     aspectRatio: 16 / 9,
   },
   screenShare: {

package/src/video.tsx

@@ -12,14 +12,6 @@ import {
   MeetingInfo,
 } from '@tellescope/types-models'
 
-import {
-  user_display_name,
-} from "@tellescope/utilities"
-
-import {
-  Session,
-  EnduserSession,
-} from "@tellescope/sdk"
 
 import { ThemeProvider } from 'styled-components';
 import {
@@ -31,11 +23,15 @@ import {
   // VideoGrid,
   // VideoTile,
   // PreviewVideo,
-  // RemoteVideo,
+  RemoteVideo,
+  useAttendeeAudioStatus,
+  LocalVideo,
   useLocalVideo,
   useMeetingManager,
   useRosterState,
-  useRemoteVideoTileState
+  useRemoteVideoTileState,
+  VideoTile,
+  useToggleLocalMute,
   // useRemoteVideoTileState,
   // useContentShareControls, // screen sharing
 } from 'amazon-chime-sdk-component-library-react';
@@ -46,8 +42,10 @@ export type AttendeeDisplayInfo =  { attendeeId: string, externalUserId: string
 export const CurrentCallContext = React.createContext({} as {
   meeting: MeetingInfo | undefined, setMeeting: (m: MeetingInfo | undefined) => void,
   videoIsEnabled: boolean, toggleVideo: () => Promise<void>,
-  attendees: AttendeeDisplayInfo[], shareScreenId: string,
-  videoTiles: (number | string)[],
+  microphoneIsEnabled: boolean, toggleMicrophone: () => Promise<void>,
+  attendees: AttendeeDisplayInfo[], shareScreenId: number | null,
+  localTileId: number | null,
+  videoTiles: (number)[],
 })
 export interface VideoProps {
   children?: React.ReactNode,
@@ -55,10 +53,11 @@ export interface VideoProps {
 }
 const WithContext = ({ children } : { children: React.ReactNode }) => {
   const [meeting, setMeeting] = useState(undefined as MeetingInfo | undefined)
-  const { toggleVideo, isVideoEnabled: videoIsEnabled } = useLocalVideo();
+  const { toggleVideo, isVideoEnabled: videoIsEnabled, tileId: localTileId } = useLocalVideo();
   const { roster } = useRosterState()
   const { tileId } = useContentShareState()
   const { tiles } = useRemoteVideoTileState()
+  const { muted, toggleMute } = useToggleLocalMute()
 
   const attendees = [] as AttendeeDisplayInfo[]
   for (const attendeeId in roster) {
@@ -67,7 +66,18 @@ const WithContext = ({ children } : { children: React.ReactNode }) => {
   }
 
   return (
-    <CurrentCallContext.Provider value={{ attendees, videoTiles: tiles, shareScreenId: tileId?.toString() ?? '', meeting, setMeeting, videoIsEnabled, toggleVideo }}>
+    <CurrentCallContext.Provider value={{ 
+      attendees, 
+      localTileId,
+      videoTiles: tiles, 
+      shareScreenId: tileId, 
+      meeting, 
+      setMeeting, 
+      videoIsEnabled, 
+      toggleVideo, 
+      microphoneIsEnabled: !muted,
+      toggleMicrophone: async () => toggleMute(),
+    }}>
       {children}
     </CurrentCallContext.Provider>
   )
@@ -147,4 +157,19 @@ export const useJoinVideoCall = () => {
 }
 export type JoinVideoCallReturnType = ReturnType<typeof useJoinVideoCall>
 
+export interface VideoViewProps {
+  style?: CSSProperties,
+}
+export const SelfView = ({ style }: VideoViewProps) => <div style={style}><LocalVideo/></div>
+
+export const useRemoteViews = ({ style } : VideoViewProps) => {
+  const { localTileId, videoTiles } = React.useContext(CurrentCallContext)
+  const nonLocal = videoTiles.filter(v => v !== localTileId)
+
+  return nonLocal.map(tileId => 
+    <RemoteVideo style={style} tileId={tileId} />
+  )
+}
+
+
 export { VideoTileGrid }

package/lib/cjs/chat.d.ts

@@ -1,69 +0,0 @@
-import React, { CSSProperties } from "react";
-import { Styled } from "@tellescope/react-components/lib/esm/mui";
-import { ChatRoom, ChatMessage } from "@tellescope/types-client";
-import { LoadedData, SessionType } from "@tellescope/types-utilities";
-import { Session, EnduserSession } from "@tellescope/sdk";
-export interface MessagesHeaderProps {
-    room?: ChatRoom;
-    resolveSenderName?: (room: ChatRoom) => React.ReactNode;
-    style?: CSSProperties;
-}
-interface Messages_T {
-    resolveSenderName?: (room: ChatRoom) => React.ReactNode;
-    messages: LoadedData<ChatMessage[]>;
-    chatUserId: string;
-    Header?: React.JSXElementConstructor<MessagesHeaderProps>;
-    headerProps?: MessagesHeaderProps;
-    receivedMessageStyle?: CSSProperties;
-    receivedMessageTextStyle?: CSSProperties;
-    sentMessageStyle?: CSSProperties;
-    sentMessageTextStyle?: CSSProperties;
-}
-export declare const Messages: ({ resolveSenderName, messages, chatUserId, Header, headerProps, style, receivedMessageStyle, receivedMessageTextStyle, sentMessageStyle, sentMessageTextStyle, }: Messages_T & Styled) => JSX.Element;
-export interface ConversationPreviewProps {
-    onClick?: (roomId: string) => void;
-    room: ChatRoom;
-    selected?: boolean;
-    resolveSenderName?: (room: ChatRoom) => React.ReactNode;
-    style?: CSSProperties;
-    selectedStyle?: CSSProperties;
-}
-interface SidebarInfo {
-    selectedRoom?: string;
-    onRoomSelect: (roomId: string) => void;
-    style?: CSSProperties;
-    selectedItemStyle?: CSSProperties;
-    itemStyle?: CSSProperties;
-    nameStyle?: CSSProperties;
-    PreviewComponent?: React.JSXElementConstructor<ConversationPreviewProps>;
-    previewStyle?: CSSProperties;
-}
-interface ConversationsProps extends SidebarInfo {
-    resolveSenderName: (r: ChatRoom) => string;
-    rooms: LoadedData<ChatRoom[]>;
-}
-export declare const Conversations: ({ rooms, selectedRoom, onRoomSelect, resolveSenderName, PreviewComponent, style, selectedItemStyle, itemStyle }: ConversationsProps) => JSX.Element;
-export declare const EndusersConversations: ({ enduserId, ...p }: SidebarInfo & {
-    enduserId: string;
-}) => JSX.Element;
-export declare const UsersConversations: ({ userId, ...p }: SidebarInfo & {
-    userId: string;
-}) => JSX.Element;
-interface SendMessage_T {
-    session: Session | EnduserSession;
-    roomId: string;
-    onNewMessage: (m: ChatMessage) => void;
-    placeholderText?: string;
-    Icon?: React.ElementType<any>;
-    style?: CSSProperties;
-}
-export declare const SendMessage: ({ session, roomId, Icon, onNewMessage, placeholderText, style, }: SendMessage_T) => JSX.Element;
-interface SplitChat_T {
-    session: EnduserSession | Session;
-    type: SessionType;
-}
-export declare const SplitChat: ({ session, type, style }: SplitChat_T & Styled) => JSX.Element;
-export declare const UserChatSplit: ({ style }: Styled) => JSX.Element;
-export declare const EnduserChatSplit: ({ style }: Styled) => JSX.Element;
-export {};
-//# sourceMappingURL=chat.d.ts.map

package/lib/cjs/chat.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat.d.ts","sourceRoot":"","sources":["../../src/chat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyB,aAAa,EAAE,MAAM,OAAO,CAAA;AASnE,OAAO,EAEL,MAAM,EAGP,MAAM,0CAA0C,CAAA;AAoBjD,OAAO,EACL,QAAQ,EACR,WAAW,EACZ,MAAM,0BAA0B,CAAA;AAEjC,OAAO,EACL,UAAU,EAEV,WAAW,EACZ,MAAM,6BAA6B,CAAA;AAUpC,OAAO,EACL,OAAO,EACP,cAAc,EACf,MAAM,iBAAiB,CAAA;AAqCxB,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAUD,UAAU,UAAU;IAClB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,QAAQ,EAAE,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,mBAAmB,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,wBAAwB,CAAC,EAAE,aAAa,CAAC;IACzC,gBAAgB,CAAC,EAAE,aAAa,CAAC;IACjC,oBAAoB,CAAC,EAAE,aAAa,CAAC;CACtC;AACD,eAAO,MAAM,QAAQ,qKAWlB,UAAU,GAAG,MAAM,gBAarB,CAAA;AAyBD,MAAM,WAAW,wBAAwB;IACvC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,UAAU,WAAW;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iBAAiB,CAAC,EAAE,aAAa,CAAC;IAClC,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,gBAAgB,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,wBAAwB,CAAC,CAAA;IACxE,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B;AAgBD,UAAU,kBAAmB,SAAQ,WAAW;IAC9C,iBAAiB,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC3C,KAAK,EAAE,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC;CAC/B;AACD,eAAO,MAAM,aAAa,oHAA0I,kBAAkB,gBASrL,CAAA;AAGD,eAAO,MAAM,qBAAqB;eAAqD,MAAM;iBAe5F,CAAA;AAED,eAAO,MAAM,kBAAkB;YAA+C,MAAM;iBAgBnF,CAAA;AAED,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,GAAG,cAAc,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AACD,eAAO,MAAM,WAAW,qEAOrB,aAAa,gBAwBf,CAAA;AAGD,UAAU,WAAW;IACnB,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC;IAClC,IAAI,EAAE,WAAW,CAAC;CACnB;AACD,eAAO,MAAM,SAAS,6BAAqD,WAAW,GAAG,MAAM,gBAsC9F,CAAA;AAED,eAAO,MAAM,aAAa,cAAsC,MAAM,gBAKrE,CAAA;AAED,eAAO,MAAM,gBAAgB,cAAsC,MAAM,gBAKxE,CAAA"}