@tellescope/chat 1.3.21 → 1.3.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/chat",
-  "version": "1.3.21",
+  "version": "1.3.23",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -34,13 +34,13 @@
     "@fontsource/roboto": "^4.5.1",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
-    "@tellescope/constants": "^1.3.20",
-    "@tellescope/react-components": "^1.3.21",
-    "@tellescope/sdk": "^1.3.21",
-    "@tellescope/types-client": "^1.3.20",
-    "@tellescope/types-models": "^1.3.20",
+    "@tellescope/constants": "^1.3.23",
+    "@tellescope/react-components": "^1.3.23",
+    "@tellescope/sdk": "^1.3.23",
+    "@tellescope/types-client": "^1.3.23",
+    "@tellescope/types-models": "^1.3.23",
     "@tellescope/types-utilities": "^1.3.20",
-    "@tellescope/utilities": "^1.3.20",
+    "@tellescope/utilities": "^1.3.23",
     "@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": "845e7199208a281a8e6b80f84510cf9870a5413a",
+  "gitHead": "23050ae45de66ab1b293ee02d7f98e46b85ea0e6",
   "publishConfig": {
     "access": "public"
   }

package/src/components.tsx

@@ -1,17 +1,30 @@
-import React, { CSSProperties, useEffect, useState } from "react"
-import { ChatMessage, ChatRoom } from "@tellescope/types-client";
+import React, { CSSProperties, useCallback, useEffect, useMemo, useState } from "react"
+import { ChatMessage, ChatRoom, Enduser, User } from "@tellescope/types-client";
 
 import {
   APIError,
   AsyncIconButton,
+  Button,
+  EnduserOrUserSearch,
+  EnduserSearch,
   Flex,
+  HoverPaper,
+  List,
+  LoadingButton,
+  LoadingData,
+  Paper,
+  ScrollingList,
   SendIcon,
-  TextField,
+  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";
 
 interface SendMessage_T {
   roomId: string,
@@ -68,7 +81,8 @@ export const SendMessage = ({
   return (
     <Flex row flex={1} alignContent="center" style={style}>
       <Flex column flex={1}>
-        <TextField variant="outlined" value={message} onChange={setMessage} disabled={sending}
+        <TextField variant="outlined" value={message}  disabled={sending}
+          onChange={e => setMessage(e.target.value)}
           aria-label="Enter a message" 
           multiline={multiline} maxRows={maxRows}
           placeholder={placeholderText} 
@@ -97,8 +111,13 @@ export interface CreateChatRoomProps {
   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,
@@ -106,78 +125,142 @@ export const CreateChatRoom: React.JSXElementConstructor<CreateChatRoomProps> =
   onGoBack, 
   onSuccess, 
   onError=console.error,
-  roomTitle="Group Chat",
+  showTitleInput,
+  title="Select Members",
+  roomTitle: defaultRoomTitle = "Group Chat",
+  minHeight,
+  maxHeight='50vh',
+  searchBarPlacement="top"
 }) => {
-  return null
-  // 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>
-  //   )} />
-  // )
+  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>
+      )}
+    } />
+  )
 }