Skip to content

Commit

Permalink
feat: Displays chat history on chats contextual bar (#32845)
Browse files Browse the repository at this point in the history
* wip

* test: replace e2e locator
  • Loading branch information
dougfabris authored Jul 24, 2024
1 parent 9bc0675 commit 9397779
Show file tree
Hide file tree
Showing 18 changed files with 55 additions and 271 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { lazy, useMemo } from 'react';

import type { RoomToolboxActionConfig } from '../../views/room/contexts/RoomToolboxContext';

const ChatsContextualBar = lazy(() => import('../../views/omnichannel/directory/chats/contextualBar/ChatsContextualBar'));
const ChatsContextualBar = lazy(() => import('../../views/omnichannel/directory/chats/ChatInfo/ChatInfoRouter'));

export const useRoomInfoRoomAction = () => {
return useMemo(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const ContactHistory = () => {
return (
<>
{chatId && chatId !== '' ? (
<ContactHistoryMessagesList chatId={chatId} setChatId={setChatId} close={closeTab} />
<ContactHistoryMessagesList chatId={chatId} onClose={closeTab} />
) : (
<ContactHistoryList setChatId={setChatId} close={closeTab} />
)}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
import { Box, Icon, Margins, States, StatesIcon, StatesSubtitle, StatesTitle, TextInput, Throbber } from '@rocket.chat/fuselage';
import {
Box,
Button,
ButtonGroup,
ContextualbarFooter,
Icon,
Margins,
States,
StatesIcon,
StatesSubtitle,
StatesTitle,
TextInput,
Throbber,
} from '@rocket.chat/fuselage';
import { useSetting, useTranslation, useUserPreference } from '@rocket.chat/ui-contexts';
import type { ChangeEvent, Dispatch, ReactElement, SetStateAction } from 'react';
import type { ChangeEvent, ReactElement } from 'react';
import React, { useMemo, useState } from 'react';
import { Virtuoso } from 'react-virtuoso';

import {
ContextualbarHeader,
ContextualbarAction,
ContextualbarIcon,
ContextualbarTitle,
ContextualbarClose,
Expand All @@ -21,18 +33,17 @@ import { isMessageSequential } from '../../../room/MessageList/lib/isMessageSequ
import ContactHistoryMessage from './ContactHistoryMessage';
import { useHistoryMessageList } from './useHistoryMessageList';

const ContactHistoryMessagesList = ({
chatId,
setChatId,
close,
}: {
type ContactHistoryMessagesListProps = {
chatId: string;
setChatId: Dispatch<SetStateAction<string>>;
close: () => void;
}): ReactElement => {
const [text, setText] = useState('');
onClose: () => void;
onOpenRoom?: () => void;
};

const ContactHistoryMessagesList = ({ chatId, onClose, onOpenRoom }: ContactHistoryMessagesListProps) => {
const t = useTranslation();
const [text, setText] = useState('');
const showUserAvatar = !!useUserPreference<boolean>('displayAvatars');

const { itemsList: messageList, loadMoreItems } = useHistoryMessageList(
useMemo(() => ({ roomId: chatId, filter: text }), [chatId, text]),
);
Expand All @@ -47,10 +58,9 @@ const ContactHistoryMessagesList = ({
return (
<>
<ContextualbarHeader>
<ContextualbarAction onClick={(): void => setChatId('')} title={t('Back')} name='arrow-back' />
<ContextualbarIcon name='history' />
<ContextualbarTitle>{t('Chat_History')}</ContextualbarTitle>
<ContextualbarClose onClick={close} />
<ContextualbarClose onClick={onClose} />
</ContextualbarHeader>

<ContextualbarContent paddingInline={0}>
Expand Down Expand Up @@ -111,6 +121,13 @@ const ContactHistoryMessagesList = ({
)}
</Box>
</ContextualbarContent>
{onOpenRoom && (
<ContextualbarFooter>
<ButtonGroup stretch>
<Button onClick={onOpenRoom}>{t('Open_chat')}</Button>
</ButtonGroup>
</ContextualbarFooter>
)}
</>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,75 +1,21 @@
import { Box } from '@rocket.chat/fuselage';
import { useRoute, useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts';
import { useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
import React from 'react';

import {
Contextualbar,
ContextualbarHeader,
ContextualbarIcon,
ContextualbarTitle,
ContextualbarAction,
ContextualbarClose,
} from '../../../components/Contextualbar';
import Chat from './chats/Chat';
import ChatInfoDirectory from './chats/contextualBar/ChatInfoDirectory';
import { RoomEditWithData } from './chats/contextualBar/RoomEdit';
import { FormSkeleton } from './components';
import { useOmnichannelRoomInfo } from './hooks/useOmnichannelRoomInfo';

const ChatsContextualBar = ({ chatReload }: { chatReload?: () => void }) => {
const t = useTranslation();

const directoryRoute = useRoute('omnichannel-directory');
import ContactHistoryMessagesList from '../contactHistory/MessageList/ContactHistoryMessagesList';

const ChatsContextualBar = () => {
const router = useRouter();
const context = useRouteParameter('context');
const id = useRouteParameter('id') || '';

const openInRoom = () => id && directoryRoute.push({ tab: 'chats', id, context: 'view' });

const handleClose = () => directoryRoute.push({ tab: 'chats' });

const handleCancel = () => id && directoryRoute.push({ tab: 'chats', id, context: 'info' });
const id = useRouteParameter('id');

const { data: room, isLoading, isError, refetch: reloadInfo } = useOmnichannelRoomInfo(id);

if (context === 'view' && id) {
return <Chat rid={id} />;
}

if (isLoading) {
return (
<Box pi={24}>
<FormSkeleton />
</Box>
);
}
const handleOpenRoom = () => id && router.navigate(`/live/${id}`);
const handleClose = () => router.navigate('/omnichannel-directory/chats');

if (isError || !room) {
return <Box mbs={16}>{t('Room_not_found')}</Box>;
if (context === 'info' && id) {
return <ContactHistoryMessagesList chatId={id} onClose={handleClose} onOpenRoom={handleOpenRoom} />;
}

return (
<Contextualbar>
<ContextualbarHeader expanded>
{context === 'info' && (
<>
<ContextualbarIcon name='info-circled' />
<ContextualbarTitle>{t('Room_Info')}</ContextualbarTitle>
<ContextualbarAction title={t('View_full_conversation')} name='new-window' onClick={openInRoom} />
</>
)}
{context === 'edit' && (
<>
<ContextualbarIcon name='pencil' />
<ContextualbarTitle>{t('edit-room')}</ContextualbarTitle>
</>
)}
<ContextualbarClose onClick={handleClose} />
</ContextualbarHeader>
{context === 'info' && <ChatInfoDirectory id={id} room={room} />}
{context === 'edit' && id && <RoomEditWithData id={id} reload={chatReload} reloadInfo={reloadInfo} onClose={handleCancel} />}
</Contextualbar>
);
return null;
};

export default ChatsContextualBar;
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import CallsContextualBarDirectory from './CallsContextualBarDirectory';
import ChatsContextualBar from './ChatsContextualBar';
import ContactContextualBar from './ContactContextualBar';

const ContextualBarRouter = ({ chatReload }: { chatReload?: () => void }) => {
const ContextualBarRouter = () => {
const tab = useRouteParameter('tab');

switch (tab) {
case 'contacts':
return <ContactContextualBar />;
case 'chats':
return <ChatsContextualBar chatReload={chatReload} />;
return <ChatsContextualBar />;
case 'calls':
return <CallsContextualBarDirectory />;
default:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import React, { useEffect, useCallback } from 'react';

import { ContextualbarDialog } from '../../../components/Contextualbar';
import { Page, PageHeader, PageContent } from '../../../components/Page';
import { queryClient } from '../../../lib/queryClient';
import ContextualBarRouter from './ContextualBarRouter';
import CallTab from './calls/CallTab';
import ChatTab from './chats/ChatTab';
Expand Down Expand Up @@ -35,8 +34,6 @@ const OmnichannelDirectoryPage = () => {

const handleTabClick = useCallback((tab) => router.navigate({ name: 'omnichannel-directory', params: { tab } }), [router]);

const chatReload = () => queryClient.invalidateQueries({ queryKey: ['current-chats'] });

return (
<Page flexDirection='row'>
<Page>
Expand All @@ -46,7 +43,7 @@ const OmnichannelDirectoryPage = () => {
{t('Contacts')}
</Tabs.Item>
<Tabs.Item selected={tab === 'chats'} onClick={() => handleTabClick('chats')}>
{t('Chats' as any /* TODO: this is going to change to Conversations */)}
{t('Chats')}
</Tabs.Item>
<Tabs.Item selected={tab === 'calls'} onClick={() => handleTabClick('calls')}>
{t('Calls')}
Expand All @@ -60,7 +57,7 @@ const OmnichannelDirectoryPage = () => {
</Page>
{context && (
<ContextualbarDialog>
<ContextualBarRouter chatReload={chatReload} />
<ContextualBarRouter />
</ContextualbarDialog>
)}
</Page>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ContextualbarHeader, ContextualbarIcon, ContextualbarTitle, Contextualb
import { useRoom } from '../../../../room/contexts/RoomContext';
import { useRoomToolbox } from '../../../../room/contexts/RoomToolboxContext';
import ChatInfo from './ChatInfo';
import { RoomEditWithData } from './RoomEdit';
import RoomEdit from './RoomEdit';

const PATH = 'live';

Expand Down Expand Up @@ -36,7 +36,7 @@ const ChatsContextualBar = () => {
<ContextualbarClose onClick={closeTab} />
</ContextualbarHeader>
{context === 'edit' ? (
<RoomEditWithData id={room._id} onClose={handleRoomEditBarCloseButtonClick} />
<RoomEdit id={room._id} onClose={handleRoomEditBarCloseButtonClick} />
) : (
<ChatInfo route={PATH} id={room._id} />
)}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './RoomEditWithData';
Loading

0 comments on commit 9397779

Please sign in to comment.