@tellescope/chat 1.3.4 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/chat",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -35,7 +35,7 @@
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
     "@tellescope/constants": "^1.3.3",
-    "@tellescope/react-components": "^1.3.4",
+    "@tellescope/react-components": "^1.3.5",
     "@tellescope/sdk": "^1.3.3",
     "@tellescope/types-client": "^1.3.3",
     "@tellescope/types-models": "^1.3.3",
@@ -51,7 +51,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "1339d078ebf1d30830b2445639fe6357878178c4",
+  "gitHead": "840b57b6260a5de2f5785b8495cd4954a240a014",
   "publishConfig": {
     "access": "public"
   }

package/src/chat.tsx

@@ -20,6 +20,9 @@ import {
   SecureImage,
   ImageDimensions,
   SecureVideo,
+  useUsers,
+  useEndusers,
+  useUserAndEnduserDisplayInfo,
 } from "@tellescope/react-components"
 
 import {
@@ -141,8 +144,8 @@ export const Message = ({
   const session = useResolvedSession()
   const chatUserId = session.userInfo.id
 
-  const [displayInfo] = useChatRoomDisplayInfo(message.roomId)
-  const displayInfoLookup = value_is_loaded(displayInfo) ? displayInfo.value : {} as ChatRoomDisplayInfo
+  const [usersLoading] = useUsers()
+  const [endusersLoading] = useEndusers()
 
   // deep copy so that the override of background color doesn't affect other messages
   const textBGStyle = { ...message.senderId === chatUserId ? sentMessageStyle : receivedMessageStyle }
@@ -190,7 +193,11 @@ export const Message = ({
   const displayPicture = (
     <DisplayPicture 
       style={{ maxWidth: '10%' }}
-      user={displayInfoLookup[message.senderId ?? ''] ?? { id: message.senderId, avatar: '' }}
+      user={
+         (session.userInfo.id === message.senderId ? session.userInfo : undefined)
+      || (value_is_loaded(usersLoading) ? usersLoading.value.find(u => u.id === message.senderId) : undefined)
+      || (value_is_loaded(endusersLoading) ? endusersLoading.value.find(e => e.id === message.senderId) : undefined) 
+      }
       size={iconSize}
     />
   )
@@ -475,4 +482,24 @@ export const UserActiveBadge = ({ user, style, size, activeThresholdMS, inactive
   return (
     <Badge color={defaultColorForStatus[status]} size={size} style={style}/>
   )
+}
+
+export const AttendeesList = ({ roomId, style, attendeeStyle } : { roomId: string, attendeeStyle?: React.CSSProperties } & Styled) => {
+const [, { findById: findRoom } ] = useChatRooms({ dontFetch: true })
+  const displayInfo = useUserAndEnduserDisplayInfo() 
+
+  const room = findRoom(roomId)
+  if (!room) return null
+  
+  if (!(room.enduserIds?.length || room.userIds?.length )) throw new Error("This room has no users or endusers")
+
+  return (
+    <Flex flex={1} column style={style}>
+    {[...room.userIds ?? [], ...room.enduserIds ?? []].map(id => (
+      <Typography style={{ fontSize: 18, narginBottom: 10, ...attendeeStyle }}>
+        {user_display_name(displayInfo[id])}
+      </Typography>
+    ))}
+    </Flex>
+  )
 }

package/src/components.native.tsx

@@ -1,6 +1,6 @@
 import { launchImageLibrary, launchCamera } from 'react-native-image-picker';
 import { Modal, View, TextInput } from "react-native"
-import { Avatar } from 'react-native-paper'
+import { Avatar, RadioButton } from 'react-native-paper'
 import {
   useFileUpload,
   Flex,
@@ -11,9 +11,19 @@ import {
   LabeledIconButton,
   Button,
   Paper,
-  useChats, 
+  useChats,
+  useUsers,
+  useEndusers,
+  List,
+  LoadingData,
+  useChatRooms,
+  APIError,
+  LoadingButton, 
 } from "@tellescope/react-components"
 import { useState } from 'react';
+import { ChatRoom } from '@tellescope/types-client';
+import { render } from 'react-dom';
+import { user_display_name } from '@tellescope/utilities';
 
 const CHAT_ICON_SIZE = 35
 const SendImageOrVideo = ({ 
@@ -171,4 +181,93 @@ export const SendMessage = ({
       </Flex>
     </Flex> 
   )
+}
+
+export interface CreateGroupChatProps {
+  excludeEndusers?: boolean,
+  excludeUsers?: boolean,
+  onGoBack?: () => void,
+  onSuccess?: (c: ChatRoom) => void,
+  onError?: (e: APIError) => void,
+  roomTitle?: string,
+}
+export const CreateGroupChat = ({
+  excludeEndusers,
+  excludeUsers,
+  onGoBack, 
+  onSuccess, 
+  onError=console.error,
+  roomTitle="Group Chat"
+}: CreateGroupChatProps) => {
+  const [, { createElement: createRoom }] = useChatRooms()
+  const [endusersLoading] = useEndusers()
+  const [usersLoading] = useUsers()
+
+  const [selected, setSelected] = useState<string[]>([])
+
+  return (
+    <LoadingData data={{ endusers: endusersLoading, users: usersLoading }} render={({ users, endusers }) => (
+    <Flex flex={1} column>
+      <Flex alignItems="center" justifyContent={"space-between"} style={{
+        marginBottom: 10,
+      }}>
+        {onGoBack &&  
+          <Button onClick={onGoBack}>
+            Back
+          </Button>
+        }
+        <Typography style={{ fontSize: 20, textAlign: 'center' }}>
+          Select Members
+        </Typography>
+
+        <LoadingButton submitText='Create' submittingText='Create' 
+          disabled={selected.length === 0}
+          style={{ display: 'flex', marginRight: 5 }}
+          onClick={() => {
+            const userIds = selected.filter(s => users.find(u => u.id === s))
+            const enduserIds = selected.filter(s => endusers.find(u => u.id === s))
+
+            createRoom({
+              enduserIds, 
+              userIds,
+              title: roomTitle,
+            })
+            .then(r => {
+              setSelected([])
+              onSuccess?.(r)
+            })
+            .catch(onError)
+          }}
+        />
+      </Flex>
+
+      <List items={[...excludeUsers ? [] : users, ... excludeEndusers ? [] : endusers]} render={user => (
+        <Paper flex elevation={5} style={{
+          marginBottom: 2,
+        }}>
+        <Flex flex={1} alignItems="center" justifyContent="space-between" 
+          onClick={() => setSelected(ss => (
+            ss.includes(user.id) 
+              ? ss.filter(s => s !== user.id)
+              : [user.id, ...ss]
+          ))}
+          style={{
+            paddingLeft: 5, paddingRight: 5,
+          }}
+        >
+          <RadioButton value={user.id}
+            status={selected.includes(user.id) ? 'checked' : 'unchecked'}
+          />
+
+          <Typography style={{ 
+            fontWeight: selected.includes(user.id) ? 'bold' : undefined,
+          }}>
+            {user_display_name(user)}
+          </Typography>
+        </Flex>
+        </Paper>
+      )} />
+    </Flex>
+    )} />
+  )
 }