@tellescope/chat 1.3.6 → 1.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/chat",
-  "version": "1.3.6",
+  "version": "1.3.9",
   "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.3",
-    "@tellescope/react-components": "^1.3.6",
-    "@tellescope/sdk": "^1.3.6",
-    "@tellescope/types-client": "^1.3.3",
-    "@tellescope/types-models": "^1.3.3",
+    "@tellescope/constants": "^1.3.9",
+    "@tellescope/react-components": "^1.3.9",
+    "@tellescope/sdk": "^1.3.9",
+    "@tellescope/types-client": "^1.3.9",
+    "@tellescope/types-models": "^1.3.9",
     "@tellescope/types-utilities": "^1.2.2",
-    "@tellescope/utilities": "^1.3.6",
+    "@tellescope/utilities": "^1.3.9",
     "@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": "4cc8d92a569718468e809e4604e93f2655674603",
+  "gitHead": "d7763c597c38536aaa0e076548c33b6f19944fb6",
   "publishConfig": {
     "access": "public"
   }

package/src/components.native.tsx

@@ -18,12 +18,14 @@ import {
   LoadingData,
   useChatRooms,
   APIError,
-  LoadingButton, 
+  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 = ({ 
@@ -94,14 +96,18 @@ const SendImageOrVideo = ({
           style={{ marginBottom: 20 }}
         >
           <View style={{ flexDirection: 'row', alignItems: 'center', minHeight: 40 }}>
-            <Typography style={{ fontSize: 18, marginRight: 10 }}>Upload</Typography>
-            <Avatar.Icon icon="image" size={CHAT_ICON_SIZE} />
+            <Typography style={{ fontSize: 18, marginRight: 10, color: 'white' }}>
+              Upload
+            </Typography>
+            <Avatar.Icon icon="image" color="white" size={CHAT_ICON_SIZE} />
           </View>
         </Button>
         <Button disabled={menuDisabled} variant="contained" onPress={() => handleImageSelect('camera')}>
           <View style={{ flexDirection: 'row', alignItems: 'center', minHeight: 40 }}>
-            <Typography style={{ fontSize: 18, marginRight: 10 }}>Take Photo</Typography>
-            <Avatar.Icon icon="camera" size={CHAT_ICON_SIZE} />
+            <Typography style={{ fontSize: 18, marginRight: 10, color: 'white' }}>
+              Take Photo
+            </Typography>
+            <Avatar.Icon icon="camera" color="white" size={CHAT_ICON_SIZE} />
           </View>
         </Button>
         <Button variant='outlined' onPress={() => setMenuOpen(false)} style={{ marginTop: 25 }}>
@@ -183,22 +189,16 @@ export const SendMessage = ({
   )
 }
 
-export interface CreateGroupChatProps {
-  excludeEndusers?: boolean,
-  excludeUsers?: boolean,
-  onGoBack?: () => void,
-  onSuccess?: (c: ChatRoom) => void,
-  onError?: (e: APIError) => void,
-  roomTitle?: string,
-}
-export const CreateGroupChat = ({
+export const CreateChatRoom = ({
   excludeEndusers,
   excludeUsers,
   onGoBack, 
   onSuccess, 
   onError=console.error,
-  roomTitle="Group Chat"
-}: CreateGroupChatProps) => {
+  roomTitle="Group Chat",
+  radio,
+}: CreateChatRoomProps) => {
+  const session = useResolvedSession()
   const [, { createElement: createRoom }] = useChatRooms()
   const [endusersLoading] = useEndusers()
   const [usersLoading] = useUsers()
@@ -227,9 +227,15 @@ export const CreateGroupChat = ({
             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,
+              userIds, 
               title: roomTitle,
             })
             .then(r => {
@@ -241,32 +247,37 @@ export const CreateGroupChat = ({
         />
       </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,
+      <List items={[...excludeUsers ? [] : users, ... excludeEndusers ? [] : endusers].filter(u => u.id !== session.userInfo.id)} 
+        render={user => (
+          <Paper flex elevation={5} style={{
+            marginBottom: 2,
           }}>
-            {user_display_name(user)}
-          </Typography>
-        </Flex>
-        </Paper>
-      )} />
+          <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,12 +1,16 @@
 import React, { CSSProperties, useEffect, useState } from "react"
-import { ChatMessage } from "@tellescope/types-client";
+import { ChatMessage, ChatRoom } from "@tellescope/types-client";
 
 import {
+  APIError,
   AsyncIconButton,
   Flex,
   SendIcon,
   TextField,
+  useChatRooms,
   useChats,
+  useEndusers,
+  useUsers,
 } from "@tellescope/react-components"
 
 interface SendMessage_T {
@@ -85,4 +89,95 @@ export const SendMessage = ({
       </Flex>
     </Flex> 
   )
+}
+
+export interface CreateChatRoomProps {
+  excludeEndusers?: boolean,
+  excludeUsers?: boolean,
+  onGoBack?: () => void,
+  onSuccess?: (c: ChatRoom) => void,
+  onError?: (e: APIError) => void,
+  roomTitle?: string,
+  radio?: boolean,
+}
+export const CreateChatRoom: React.JSXElementConstructor<CreateChatRoomProps> = ({
+  excludeEndusers,
+  excludeUsers,
+  onGoBack, 
+  onSuccess, 
+  onError=console.error,
+  roomTitle="Group Chat",
+}) => {
+  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>
+  //   )} />
+  // )
 }