Skip to content

Commit

Permalink
Merge pull request #174 from webwhiz-ai/main
Browse files Browse the repository at this point in the history 
Invite user updates
  • Loading branch information
@sachinchoolur
sachinchoolur authored Mar 7, 2024
2 parents 0006347 + 6161348 commit 89aaf53
Show file tree
Hide file tree
Showing 10 changed files with 3,365 additions and 3,125 deletions.
3 changes: 3 additions & 0 deletions .yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
- name: Close Stale Issues
uses: actions/[email protected]

31 changes: 31 additions & 0 deletions frontend/src/components/Icons/EditIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React, { HTMLAttributes } from 'react';

interface IconProps extends HTMLAttributes<SVGElement> {
width?: number;
height?: number;
}
export const EditIcon = ({
width = 18,
height = 18,
...restProps
}: IconProps) => {
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
focusable="false"
{...restProps}
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
>
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
</g>
</svg>
);
};
81 changes: 76 additions & 5 deletions frontend/src/components/MediaListItem/MediaListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
Flex,
Heading,
HStack,
Tooltip,
IconButton,
Image,
Menu,
Expand All @@ -18,13 +19,16 @@ import {
AlertDialogFooter,
AlertDialogHeader,
AlertDialogContent,
AlertDialogOverlay
AlertDialogOverlay,
Badge
} from '@chakra-ui/react';
import { FiMoreHorizontal } from "react-icons/fi"
import styles from './MediaListItem.module.scss';

import { useEffect, useState, useRef } from 'react';
import { DefaultMediaImage } from '../DefaultMediaImage/DefaultMediaImage';
import { PermissionsType, CurrentUser, User } from '../../services/appConfig';
import { InviteUserParams } from '../../services/userServices';

interface MediaListItemProps extends BoxProps {
imageUrl: string;
Expand All @@ -41,11 +45,38 @@ interface MediaListItemProps extends BoxProps {
onMenuItemClick?: (type: any) => void;
actionButtonLeftIcon?: React.ReactNode;
onActionButtonClick?: () => void;
participants?: InviteUserParams[]
ownerId: string
}

export const MediaListItem = ({ onMenuItemClick, showWarning, showPrimaryActionButton, isPrimaryButtonLoading, onPrimaryActionButtonClick, className, ...restProps }: MediaListItemProps) => {
export const MediaListItem = ({ ownerId, participants, onMenuItemClick, showWarning, showPrimaryActionButton, isPrimaryButtonLoading, onPrimaryActionButtonClick, className, ...restProps }: MediaListItemProps) => {
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const cancelRef = useRef(null);
const [user, setUser] = React.useState<User>(CurrentUser.get());
const [access, setAccess] = React.useState<PermissionsType>();
React.useEffect(() => {
async function fetchData() {
try {
const userData = CurrentUser.get();
setUser(userData);
const userRole = participants?.find(
(access) => access?.id === userData._id,
)?.role;
setAccess({isAdmin: userRole === 'admin',
isEditor: userRole === 'editor',
isReader: userRole === 'reader',
isOwner: userData._id === ownerId,
});
} catch (error) {
console.log('Unable to fetch user ID', error);
} finally {
}
}
fetchData();
}, [ownerId, participants, user._id]);



const handleDelete = () => {
setIsDeleteDialogOpen(true);
};
Expand All @@ -71,6 +102,20 @@ export const MediaListItem = ({ onMenuItemClick, showWarning, showPrimaryActionB
const onSelect = React.useCallback((type) => {
onMenuItemClick && onMenuItemClick(type)
}, [onMenuItemClick])

const getTooltipText = () => {
if(access?.isAdmin) {
return 'This is an external chatbot. You have admin access.'
} else if(access?.isEditor) {
return 'This is an external chatbot. You have editor access.'
} else if(access?.isReader) {
return 'This is an external chatbot. You have reader access.'
}
return ''

}


return (
<>
<HStack
Expand Down Expand Up @@ -103,15 +148,39 @@ export const MediaListItem = ({ onMenuItemClick, showWarning, showPrimaryActionB
alt={restProps.imageAlt}
/>
) : (
<DefaultMediaImage />
)}
<DefaultMediaImage />
)}
</Flex>
<Flex alignSelf='start' direction='column'>
<Heading cursor="pointer" mb='8px' fontSize='lg' onClick={() => {
onSelect('edit')
onSelect(access?.isAdmin || access?.isOwner || access?.isEditor ? 'edit' : 'view')
}}>
{restProps.name}
</Heading>
{!(access?.isOwner) ? <Tooltip label={getTooltipText()}><Badge
mr={'20px'}
px={'12px'}
fontSize="12px"
textTransform={'capitalize'}
colorScheme={
access?.isOwner || access?.isAdmin
? 'green'
: access?.isEditor
? 'yellow'
: 'red'
}
w={'fit-content'}
h={'18px'}
fontWeight="500"
variant={'subtle'}
alignItems="center"
>
{access?.isOwner ? 'Owner' : access?.isAdmin
? 'Admin'
: access?.isEditor
? 'Editor'
: 'Reader'}
</Badge></Tooltip>: null}
{restProps.description && <Text noOfLines={2} fontSize='sm' color='gray.500' dangerouslySetInnerHTML={{ __html: restProps.description }} >
</Text>}

Expand Down Expand Up @@ -150,6 +219,8 @@ export const MediaListItem = ({ onMenuItemClick, showWarning, showPrimaryActionB
icon={<FiMoreHorizontal />}
color="gray.500"
variant='outline'
visibility={access?.isAdmin || access?.isOwner || access?.isEditor ? 'visible' : 'hidden'}
opacity={access?.isAdmin || access?.isOwner || access?.isEditor ? 1 : 0}
/>
<MenuList minW="140px">
<MenuItem fontSize="14" textAlign="right" fontWeight="medium" color="gray.600" onClick={() => {
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/containers/ChatbotList/ChatbotList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,9 @@ export const ChatbotList = () => {

const onMenuItemClick = React.useCallback(
async (type, chatbot) => {
if (type === "edit") {
if(type === 'view') {
history.push(`/app/edit-chatbot/${chatbot._id}/chat-sessions`);
} else if (type === "edit") {
history.push(`/app/edit-chatbot/${chatbot._id}/product-setup`);
} else if (type === "getCode") {
history.push(`/app/edit-chatbot/${chatbot._id}/add-to-site`);
Expand Down Expand Up @@ -239,9 +241,11 @@ export const ChatbotList = () => {
const chatbotListItems = chatbotsList?.map((chatbot) => {
return (
<MediaListItem
ownerId={chatbot.owner}
showCustomizeMenu
name={chatbot.name}
imageAlt={chatbot.name}
participants={chatbot.participants}
showGetCodeMenu
imageUrl={chatbot.imageUrl}
description={chatbot.description}
Expand Down
56 changes: 37 additions & 19 deletions frontend/src/containers/EditChatbot/EditChatbot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -826,7 +826,7 @@ console.log(permissions.get(), 'permissionspermissions')
}
return (
<>
{access.isAdmin || access.isEditor ? <Flex
{access.isOwner || access.isAdmin || access.isEditor ? <Flex
h="100%"
direction="column"
style={{
Expand Down Expand Up @@ -859,7 +859,7 @@ console.log(permissions.get(), 'permissionspermissions')
}}
/>
</Flex> : null}
{access.isAdmin || access.isEditor ?<Flex
{access.isOwner || access.isAdmin || access.isEditor ?<Flex
h="100%"
direction="column"
style={{
Expand Down Expand Up @@ -904,7 +904,7 @@ console.log(permissions.get(), 'permissionspermissions')
}

</Flex>: null}
{access.isAdmin || access.isEditor ?<Flex
{access.isOwner || access.isAdmin || access.isEditor ?<Flex
direction="column"
style={{
display: currentStep === "add-to-site" ? "flex" : "none",
Expand All @@ -916,7 +916,7 @@ console.log(permissions.get(), 'permissionspermissions')
{getAddToWebsiteContent()}
</Flex>
</Flex>: null}
{access.isAdmin || access.isEditor ?<Flex
{access.isOwner || access.isAdmin || access.isEditor ?<Flex
direction="column"
style={{
display: currentStep === "train-custom-data" ? "flex" : "none",
Expand Down Expand Up @@ -974,20 +974,38 @@ console.log(permissions.get(), 'permissionspermissions')
title="Members"
description="Manage who has access to this chatbot"
/>
{chatBot._id ? <Members
{chatBot._id ? (
<Members
onDeleteParticipant={(id) => {
const participants = chatBot.participants.filter(item => item.id !== id);
setChatbot(prev => ({ ...prev, participants }));
const participants = chatBot.participants.filter(
(item) => item.id !== id,
);
setChatbot((prev) => ({ ...prev, participants }));
}}
onAddParticipant={(participant: any) => {
setChatbot(prev => ({
...prev,
participants: [participant, ...prev.participants.filter(item => item.email !== participant.email)]
}));
setChatbot((prev) => {
if (participant.id) {
const updatedParticipants = prev.participants.map((item) => {
if (item.id === participant.id) {
return { ...item, role: participant.role };
}
return item;
});
return { ...prev, participants: updatedParticipants };
} else {
const newParticipants = [
participant,
...prev.participants.filter((item) => item.email !== participant.email),
];
return { ...prev, participants: newParticipants };
}
});
}}
participants={chatBot.participants}
chatBotId={chatBot._id}
/> : null}
/>
) : null}

</Flex> : null}
<Flex
direction="column"
Expand All @@ -1002,7 +1020,7 @@ console.log(permissions.get(), 'permissionspermissions')
{offlineMessages && offlineMessages.results && <OfflineMessagesNew isChatListLoading={isChatLoading} onPageChange={handleOfflinePageClick} chatSessionsPage={offlineMessages} />}
</Flex>
</Flex>
{access.isAdmin || access.isEditor ?<Flex
{access.isOwner || access.isAdmin || access.isEditor ?<Flex
direction="column"
style={{
display: currentStep === "chatbot" ? "flex" : "none",
Expand Down Expand Up @@ -1100,7 +1118,7 @@ console.log(permissions.get(), 'permissionspermissions')
>
<Box className={styles.title}>{chatBot.name}</Box>
<List spacing={2}>
{access.isAdmin || access.isEditor ? <ListItem
{access.isOwner || access.isAdmin || access.isEditor ? <ListItem
display="flex"
alignItems="center"
fontSize="md"
Expand All @@ -1116,7 +1134,7 @@ console.log(permissions.get(), 'permissionspermissions')

Data sources
</ListItem> : null}
{access.isAdmin || access.isEditor ?<ListItem
{access.isOwner || access.isAdmin || access.isEditor ?<ListItem
display="flex"
alignItems="center"
fontSize="md"
Expand Down Expand Up @@ -1166,7 +1184,7 @@ console.log(permissions.get(), 'permissionspermissions')
Offline messages
</ListItem>
{/* You can also use custom icons from react-icons */}
{access.isAdmin || access.isEditor ?<ListItem
{access.isOwner || access.isAdmin || access.isEditor ?<ListItem
display="flex"
alignItems="center"
fontSize="md"
Expand All @@ -1185,7 +1203,7 @@ console.log(permissions.get(), 'permissionspermissions')

Customize
</ListItem>: null}
{access.isAdmin || access.isEditor ?<ListItem
{access.isOwner || access.isAdmin || access.isEditor ?<ListItem
display="flex"
alignItems="center"
fontSize="md"
Expand All @@ -1202,7 +1220,7 @@ console.log(permissions.get(), 'permissionspermissions')

Add to site
</ListItem>: null}
{access.isAdmin || access.isEditor ? <ListItem
{access.isOwner || access.isAdmin || access.isEditor ? <ListItem
display="flex"
alignItems="center"
fontSize="md"
Expand All @@ -1218,7 +1236,7 @@ console.log(permissions.get(), 'permissionspermissions')

Try ChatBot
</ListItem> : null}
{access.isAdmin || access.isEditor ?<ListItem
{access.isOwner || access.isAdmin || access.isEditor ?<ListItem
display="flex"
alignItems="center"
fontSize="md"
Expand Down
Loading

0 comments on commit 89aaf53

Please sign in to comment.