@tellescope/chat 1.3.24 → 1.3.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/chat",
-  "version": "1.3.24",
+  "version": "1.3.26",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -35,12 +35,12 @@
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
     "@tellescope/constants": "^1.3.24",
-    "@tellescope/react-components": "^1.3.24",
-    "@tellescope/sdk": "^1.3.24",
+    "@tellescope/react-components": "^1.3.26",
+    "@tellescope/sdk": "^1.3.25",
     "@tellescope/types-client": "^1.3.24",
     "@tellescope/types-models": "^1.3.24",
     "@tellescope/types-utilities": "^1.3.20",
-    "@tellescope/utilities": "^1.3.24",
+    "@tellescope/utilities": "^1.3.25",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "eslint": "^7.32.0",
@@ -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": "1d459c0b21e448037812b8b956d19d7fdadbb6cc",
+  "gitHead": "c4626933b58bb8f6fc07f8ba747c31377827218f",
   "publishConfig": {
     "access": "public"
   }

package/src/chat.tsx

@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties, useEffect, useRef } from "react"
+import React, { useState, CSSProperties, useEffect, useRef, useCallback } from "react"
 
 import {
   DisplayPicture,
@@ -23,12 +23,17 @@ import {
   useUsers,
   useEndusers,
   useUserAndEnduserDisplayInfo,
+  UserAndEnduserSelectorProps,
+  UserAndEnduserSelector,
+  TextField,
 } from "@tellescope/react-components"
 
 import {
   ChatRoom,
   ChatMessage,
   UserDisplayInfo,
+  User,
+  Enduser,
 } from "@tellescope/types-client"
 import {
   UserActivityStatus,
@@ -36,6 +41,7 @@ import {
 } from "@tellescope/types-models"
 
 import {
+  APIError,
   LoadedData, 
   SessionType,
 } from "@tellescope/types-utilities"
@@ -222,6 +228,7 @@ export const MessageAttachments = ({ message, chatUserId, imageDimensions } : {
           marginRight: message.senderId === chatUserId ? 0 : 10, 
           marginLeft: message.senderId === chatUserId ? 10 : 0, 
           justifyContent: message.senderId === chatUserId ? "flex-end" : "flex-start",
+          ...imageDimensions,
         }}>
           <SecureImage secureName={a.secureName} alt="image attachment" {...imageDimensions} />
         </Flex>
@@ -229,6 +236,7 @@ export const MessageAttachments = ({ message, chatUserId, imageDimensions } : {
       {message.attachments.filter(a => a.type === 'video').map(a=> (
         <Flex key={a.secureName} style={{ 
           justifyContent: message.senderId === chatUserId ? "flex-end" : "flex-start",
+          ...imageDimensions,
         }}>
           <SecureVideo secureName={a.secureName} {...imageDimensions} />
         </Flex>
@@ -502,4 +510,49 @@ const [, { findById: findRoom } ] = useChatRooms({ dontFetch: true })
     ))}
     </Flex>
   )
+}
+
+export interface CreateChatRoomProps extends Omit<UserAndEnduserSelectorProps, 'onSelect'> {
+  onSuccess?: (c: ChatRoom) => void,
+  onError?: (e: APIError) => void,
+  roomTitle?: string,
+}
+export const CreateChatRoom = ({ 
+  roomTitle: defaultRoomTitle = "Group Chat", 
+  onSuccess, onError, 
+  ...props 
+} : CreateChatRoomProps) => {
+  const [, { createElement: createRoom }] = useChatRooms({ dontFetch: true })
+  const [roomTitle, setRoomTitle] = useState(defaultRoomTitle ?? '')
+
+  const handleCreateRoom = useCallback(({ users, endusers }: { users: User[], endusers: Enduser[] }) => {
+    const userIds = users.map(u => u.id)
+    const enduserIds = endusers.map(e => e.id)
+
+    createRoom({
+      enduserIds, 
+      userIds,
+      title: roomTitle,
+    })
+    .then(r => {
+      onSuccess?.(r)
+    })
+    .catch(onError)
+  }, [createRoom, roomTitle, onSuccess, onError])
+  
+  return (
+    <UserAndEnduserSelector {...props} onSelect={handleCreateRoom} 
+      titleInput={
+        <TextField autoFocus value={roomTitle} onChange={t => setRoomTitle(t)} 
+          style={{ 
+            width: props.searchBarPlacement !== 'top'
+              ? '100%'
+              : undefined
+          }}
+          label="Title" placeholder="Enter conversation title..." 
+          size="small"
+        />
+      }
+    />
+  )
 }

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, RadioButton } from 'react-native-paper'
+import { Modal, TextInput } from "react-native"
+import { Avatar } from 'react-native-paper'
 import {
   useFileUpload,
   Flex,
@@ -11,20 +11,9 @@ import {
   Button,
   Paper,
   useChats,
-  useUsers,
-  useEndusers,
-  List,
-  LoadingData,
-  useChatRooms,
-  APIError,
-  LoadingButton,
   useResolvedSession, 
 } 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';
-import { CreateChatRoomProps } from './components';
 
 const CHAT_ICON_SIZE = 35
 const SendImageOrVideo = ({ 
@@ -181,97 +170,3 @@ export const SendMessage = ({
     </Flex> 
   )
 }
-
-export const CreateChatRoom = ({
-  excludeEndusers,
-  excludeUsers,
-  onGoBack, 
-  onSuccess, 
-  onError=console.error,
-  roomTitle="Group Chat",
-  radio,
-}: CreateChatRoomProps) => {
-  const session = useResolvedSession()
-  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))
-
-            if (session.type === 'enduser') {
-              enduserIds.push(session.userInfo.id)
-            } else {
-              userIds.push(session.userInfo.id)
-            }
-
-            createRoom({
-              enduserIds, 
-              userIds, 
-              title: roomTitle,
-            })
-            .then(r => {
-              setSelected([])
-              onSuccess?.(r)
-            })
-            .catch(onError)
-          }}
-        />
-      </Flex>
-
-      <List items={[...excludeUsers ? [] : users, ... excludeEndusers ? [] : endusers].filter(u => u.id !== session.userInfo.id)} 
-        render={user => (
-          <Paper flex elevation={5} style={{
-            marginBottom: 2,
-          }}>
-          <Flex flex={1} alignItems="center" justifyContent="space-between" 
-            onClick={() => setSelected(ss => (
-              ss.includes(user.id) 
-                ? radio 
-                  ? []
-                  : ss.filter(s => s !== user.id)
-                :radio 
-                  ? [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>
-    )} />
-  )
-}

package/src/components.tsx

@@ -1,27 +1,11 @@
-import React, { CSSProperties, useCallback, useEffect, useMemo, useState } from "react"
-import { ChatMessage, ChatRoom, Enduser, User } from "@tellescope/types-client";
+import React, { CSSProperties, useEffect, useState } from "react"
+import { ChatMessage } from "@tellescope/types-client";
 
 import {
-  APIError,
   AsyncIconButton,
-  Button,
-  EnduserOrUserSearch,
-  EnduserSearch,
   Flex,
-  HoverPaper,
-  List,
-  LoadingButton,
-  LoadingData,
-  Paper,
-  ScrollingList,
   SendIcon,
-  Typography,
-  useChatRooms,
   useChats,
-  useEndusers,
-  useFilters,
-  UserSearch,
-  useUsers,
 } from "@tellescope/react-components"
 import { user_display_name } from "@tellescope/utilities";
 import { Checkbox, TextField, FormControlLabel, Grid } from "@mui/material";
@@ -103,164 +87,4 @@ export const SendMessage = ({
       </Flex>
     </Flex> 
   )
-}
-
-export interface CreateChatRoomProps {
-  excludeEndusers?: boolean,
-  excludeUsers?: boolean,
-  onGoBack?: () => void,
-  onSuccess?: (c: ChatRoom) => void,
-  onError?: (e: APIError) => void,
-  title?: string,
-  roomTitle?: string,
-  radio?: boolean,
-  minHeight?: React.CSSProperties['maxHeight']
-  maxHeight?: React.CSSProperties['maxHeight']
-  showTitleInput?: boolean,
-  searchBarPlacement?: "top" | "bottom", 
-}
-export const CreateChatRoom: React.JSXElementConstructor<CreateChatRoomProps> = ({
-  excludeEndusers,
-  excludeUsers,
-  onGoBack, 
-  onSuccess, 
-  onError=console.error,
-  showTitleInput,
-  title="Select Members",
-  roomTitle: defaultRoomTitle = "Group Chat",
-  minHeight,
-  maxHeight='50vh',
-  searchBarPlacement="top"
-}) => {
-  const [, { createElement: createRoom }] = useChatRooms()
-  const [endusersLoading, { loadMore: loadMoreEndusers, doneLoading: doneLoadingEndusers }] = useEndusers()
-  const [usersLoading, { loadMore: loadMoreUsers, doneLoading: doneLoadingUsers }] = useUsers()
-  const [roomTitle, setRoomTitle] = useState(defaultRoomTitle)
-
-  const doneLoading = useCallback(() => 
-    (excludeUsers || doneLoadingUsers()) && (excludeEndusers || doneLoadingEndusers()), 
-    [doneLoadingEndusers, excludeUsers, excludeEndusers, doneLoadingUsers]
-  )
-
-  const loadMore = useCallback(async () => {
-    if (!excludeEndusers && !doneLoadingEndusers()) { loadMoreEndusers().catch(console.error) };
-    if (!excludeUsers && !doneLoadingUsers()) { loadMoreUsers().catch(console.error) };
-  }, [doneLoadingEndusers, doneLoadingUsers, loadMoreEndusers, loadMoreUsers])
-
-  const [selected, setSelected] = useState<string[]>([])
-
-  const { applyFilters, ...filterProps } = useFilters<any>()
-
-  const searchbarFullWidth = searchBarPlacement === "bottom"
-
-  const searchbar = useMemo(() => (
-    excludeUsers 
-      ? <EnduserSearch {...filterProps} fullWidth={searchbarFullWidth} />
-  : excludeEndusers
-      ? <UserSearch {...filterProps} fullWidth={searchbarFullWidth} />
-      : <EnduserOrUserSearch {...filterProps} fullWidth={searchbarFullWidth} />
-  ), [excludeUsers, excludeEndusers, filterProps, searchbarFullWidth])
-
-  const handleCreateRoom = useCallback((users: User[], endusers: Enduser[]) => {
-    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)
-  }, [createRoom, roomTitle, onSuccess, onError])
-  
-  return (
-    <LoadingData data={{ endusers: endusersLoading, users: usersLoading }} render={({ users, endusers }) => {
-      const itemsUnfiltered = [...excludeUsers ? [] : users, ... excludeEndusers ? [] : endusers]
-      const items = applyFilters(itemsUnfiltered)
-      return (
-      <Flex flex={1} column>
-        <Grid container alignItems="center" justifyContent={"space-between"} wrap="nowrap"
-          style={{
-            marginBottom: 10,
-          }}
-        >
-          {onGoBack &&  
-            <Button onClick={onGoBack}>
-              Back
-            </Button>
-          }
-          <Typography style={{ fontSize: 16, textAlign: 'center' }}>
-            {title}
-          </Typography>
-
-          <LoadingButton submitText='Create' submittingText='Create' 
-            disabled={selected.length === 0}
-            style={{ display: 'flex' }}
-            onClick={() => handleCreateRoom(users, endusers)}
-          />
-        </Grid>
-
-        <ScrollingList items={items} 
-          emptyText={
-            itemsUnfiltered.length === 0 
-              ? "No contacts found" 
-              : "No one found for search"
-          }
-          minHeight={minHeight} maxHeight={maxHeight}
-          doneLoading={doneLoading}
-          loadMore={loadMore}
-          title={
-            showTitleInput && 
-              <TextField autoFocus value={roomTitle} onChange={e => setRoomTitle(e.target.value)} 
-                fullWidth={searchBarPlacement !== 'top'}
-                label="Title" placeholder="Enter conversation title..." 
-                size="small"
-              />
-          }
-          titleStyle={searchBarPlacement !== "top" ?
-            {
-              width: '100%',
-            }
-            : {}
-          }
-          titleActionsComponent={searchBarPlacement === 'top' ? searchbar : undefined}
-          Item={({ item: user }) => (
-            <HoverPaper style={{
-              marginBottom: 4,
-            }}>
-            <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,
-              }}
-            >
-              <FormControlLabel control={<Checkbox checked={selected.includes(user.id)} />} label="" />
-
-              <Typography style={{ 
-                fontWeight: selected.includes(user.id) ? 'bold' : undefined,
-              }}>
-                {user_display_name(user)}
-              </Typography>
-            </Flex>
-            </HoverPaper>
-          )} 
-        />
-
-        {searchBarPlacement === 'bottom' &&
-          <Grid item alignSelf="flex-end" sx={{ mt: 1, width: '100%' }}>
-            {searchbar}
-          </Grid>
-        }
-      </Flex>
-      )}
-    } />
-  )
 }