Fixes #164 - Add typing indicator

assets/src/components/conversations/AllConversations.tsx

@@ -11,12 +11,14 @@ const AllConversations = () => {
     all = [],
     conversationsById = {},
     messagesByConversation = {},
+    othersTypingByConversation = {},
     currentlyOnline = {},
     fetchAllConversations,
     onSelectConversation,
     onUpdateConversation,
     onDeleteConversation,
     onSendMessage,
+    handleTyping,
   } = useConversations();
 
   if (loading) {
@@ -34,11 +36,13 @@ const AllConversations = () => {
       conversationIds={all}
       conversationsById={conversationsById}
       messagesByConversation={messagesByConversation}
+      othersTypingByConversation={othersTypingByConversation}
       fetch={fetchAllConversations}
       onSelectConversation={onSelectConversation}
       onUpdateConversation={onUpdateConversation}
       onDeleteConversation={onDeleteConversation}
       onSendMessage={onSendMessage}
+      handleTyping={handleTyping}
     />
   );
 };

assets/src/components/conversations/ClosedConversations.tsx

@@ -11,13 +11,15 @@ const ClosedConversations = () => {
     closed = [],
     conversationsById = {},
     messagesByConversation = {},
+    othersTypingByConversation = {},
     currentlyOnline = {},
     fetchAllConversations,
     fetchClosedConversations,
     onSelectConversation,
     onUpdateConversation,
     onDeleteConversation,
     onSendMessage,
+    handleTyping,
   } = useConversations();
 
   const fetch = async () => {
@@ -44,11 +46,13 @@ const ClosedConversations = () => {
       conversationIds={closed}
       conversationsById={conversationsById}
       messagesByConversation={messagesByConversation}
+      othersTypingByConversation={othersTypingByConversation}
       fetch={fetch}
       onSelectConversation={onSelectConversation}
       onUpdateConversation={onUpdateConversation}
       onDeleteConversation={onDeleteConversation}
       onSendMessage={onSendMessage}
+      handleTyping={handleTyping}
     />
   );
 };

assets/src/components/conversations/ConversationFooter.tsx

@@ -5,15 +5,21 @@ import {colors, Button, TextArea} from '../common';
 const ConversationFooter = ({
   sx = {},
   onSendMessage,
+  onInputChanged,
+  othersTyping,
 }: {
   sx?: any;
   onSendMessage: (message: string) => void;
+  onInputChanged: () => void;
+  othersTyping: Array<object>;
 }) => {
   const [message, setMessage] = React.useState('');
 
   const handleMessageChange = (e: any) => setMessage(e.target.value);
 
   const handleKeyDown = (e: any) => {
+    onInputChanged();
+
     const {key, metaKey} = e;
     // Not sure what the best UX is here, but we currently allow
     // sending the message by pressing "cmd/metaKey + Enter"
@@ -28,6 +34,22 @@ const ConversationFooter = ({
     setMessage('');
   };
 
+  const othersTypingMessage = (others: Array<any>) => {
+    const toStr = (name?: string, email?: string) =>
+      `${name || email || 'Anonymous User'} `;
+
+    const titles = others.map((item: any) => toStr(item.name, item.email));
+
+    switch (titles.length) {
+      case 0:
+        return '\xa0';
+      case 1:
+        return [...titles, 'is typing...'].join(' ');
+      default:
+        return `${titles.join(', ')} are typing...`;
+    }
+  };
+
   return (
     <Box style={{flex: '0 0 auto'}}>
       <Box sx={{bg: colors.white, px: 4, pt: 0, pb: 4, ...sx}}>
@@ -58,6 +80,9 @@ const ConversationFooter = ({
             </Flex>
           </form>
         </Box>
+        <Box sx={{position: 'absolute'}}>
+          {othersTypingMessage(othersTyping)}
+        </Box>
       </Box>
     </Box>
   );

assets/src/components/conversations/ConversationsContainer.tsx

@@ -22,6 +22,7 @@ type Props = {
   conversationIds: Array<string>;
   conversationsById: {[key: string]: Conversation};
   messagesByConversation: {[key: string]: Array<Message>};
+  othersTypingByConversation: {[key: string]: Array<object>};
   fetch: () => Promise<Array<string>>;
   onSelectConversation: (id: string | null, fn?: () => void) => void;
   onUpdateConversation: (id: string, params: any) => Promise<void>;
@@ -31,6 +32,7 @@ type Props = {
     conversationId: string,
     fn: () => void
   ) => void;
+  handleTyping: (conversationId: string) => () => void;
 };
 
 type State = {
@@ -298,6 +300,11 @@ class ConversationsContainer extends React.Component<Props, State> {
     });
   };
 
+  othersTyping = (
+    othersTypingByConversation: {[key: string]: Array<object>},
+    conversationId: string
+  ) => othersTypingByConversation[conversationId] || [];
+
   render() {
     const {selected: selectedConversationId, closing = []} = this.state;
     const {
@@ -426,6 +433,13 @@ class ConversationsContainer extends React.Component<Props, State> {
               <ConversationFooter
                 key={selectedConversation.id}
                 onSendMessage={this.handleSendMessage}
+                onInputChanged={this.props.handleTyping(
+                  selectedConversation.id
+                )}
+                othersTyping={this.othersTyping(
+                  this.props.othersTypingByConversation,
+                  selectedConversation.id
+                )}
               />
             )}
 

assets/src/components/conversations/ConversationsProvider.tsx

@@ -22,6 +22,7 @@ export const ConversationsContext = React.createContext<{
   conversationsById: {[key: string]: any};
   messagesByConversation: {[key: string]: any};
   currentlyOnline: {[key: string]: any};
+  othersTypingByConversation: {[key: string]: any};
 
   onSelectConversation: (id: string | null) => any;
   onUpdateConversation: (id: string, params: any) => Promise<any>;
@@ -38,6 +39,7 @@ export const ConversationsContext = React.createContext<{
   fetchClosedConversations: () => Promise<Array<string>>;
   // TODO: should this be different?
   fetchConversationById: (conversationId: string) => Promise<Array<string>>;
+  handleTyping: (conversationId: string) => () => void;
 }>({
   loading: true,
   account: null,
@@ -52,6 +54,7 @@ export const ConversationsContext = React.createContext<{
   conversationsById: {},
   messagesByConversation: {},
   currentlyOnline: {},
+  othersTypingByConversation: {},
 
   onSelectConversation: () => {},
   onSendMessage: () => {},
@@ -62,6 +65,7 @@ export const ConversationsContext = React.createContext<{
   fetchPriorityConversations: () => Promise.resolve([]),
   fetchClosedConversations: () => Promise.resolve([]),
   fetchConversationById: () => Promise.resolve([]),
+  handleTyping: () => () => {},
 });
 
 export const useConversations = () => useContext(ConversationsContext);
@@ -155,6 +159,7 @@ type State = {
   conversationsById: {[key: string]: any};
   messagesByConversation: {[key: string]: any};
   presence: PhoenixPresence;
+  othersTypingByConversation: {[key: string]: any};
 
   all: Array<string>;
   mine: Array<string>;
@@ -173,6 +178,7 @@ export class ConversationsProvider extends React.Component<Props, State> {
     conversationsById: {},
     messagesByConversation: {},
     presence: {},
+    othersTypingByConversation: {},
 
     all: [],
     mine: [],
@@ -250,6 +256,37 @@ export class ConversationsProvider extends React.Component<Props, State> {
       this.handleNewMessage(message);
     });
 
+    this.channel.on('message:other_typing', (payload) => {
+      const conversationId = payload.conversation_id;
+
+      const oldState =
+        this.state.othersTypingByConversation[conversationId] || [];
+      const typer = payload.user || payload.customer;
+
+      const alreadyTyping = oldState.find(
+        (item: any) => item.id === typer.id && item.kind === typer.kind
+      );
+
+      const newState =
+        typer && !alreadyTyping ? [...oldState, typer] : oldState;
+
+      const updateTypingState = (
+        conversationId: string,
+        newState: Array<object>
+      ) =>
+        this.setState({
+          othersTypingByConversation: {
+            ...this.state.othersTypingByConversation,
+            [conversationId]: newState,
+          },
+        });
+
+      if (typer.kind === 'customer' || typer.id !== this.state.currentUser.id) {
+        updateTypingState(payload.conversation_id, newState);
+        setTimeout(() => updateTypingState(payload.conversation_id, []), 1000);
+      }
+    });
+
     // TODO: fix race condition between this event and `shout` above
     this.channel.on('conversation:created', ({id, conversation}) => {
       // Handle conversation created
@@ -481,6 +518,16 @@ export class ConversationsProvider extends React.Component<Props, State> {
     }
   };
 
+  handleTyping = (conversationId: string) => () => {
+    if (!this.channel || !this.state.currentUser) {
+      return;
+    }
+    this.channel.push('message:typing', {
+      user_id: this.state.currentUser,
+      conversation_id: conversationId,
+    });
+  };
+
   handleUpdateConversation = async (conversationId: string, params: any) => {
     const {conversationsById} = this.state;
     const existing = conversationsById[conversationId];
@@ -707,6 +754,7 @@ export class ConversationsProvider extends React.Component<Props, State> {
       conversationsById,
       messagesByConversation,
       presence,
+      othersTypingByConversation,
     } = this.state;
     const unreadByCategory = this.getUnreadByCategory();
 
@@ -717,6 +765,7 @@ export class ConversationsProvider extends React.Component<Props, State> {
           account,
           currentUser,
           isNewUser,
+          othersTypingByConversation,
           all,
           mine,
           priority,
@@ -736,6 +785,7 @@ export class ConversationsProvider extends React.Component<Props, State> {
           fetchMyConversations: this.fetchMyConversations,
           fetchPriorityConversations: this.fetchPriorityConversations,
           fetchClosedConversations: this.fetchClosedConversations,
+          handleTyping: this.handleTyping,
         }}
       >
         {this.props.children}

assets/src/components/conversations/MyConversations.tsx

@@ -11,12 +11,14 @@ const MyConversations = () => {
     mine = [],
     conversationsById = {},
     messagesByConversation = {},
+    othersTypingByConversation = {},
     currentlyOnline = {},
     fetchMyConversations,
     onSelectConversation,
     onUpdateConversation,
     onDeleteConversation,
     onSendMessage,
+    handleTyping,
   } = useConversations();
 
   if (loading) {
@@ -34,11 +36,13 @@ const MyConversations = () => {
       conversationIds={mine}
       conversationsById={conversationsById}
       messagesByConversation={messagesByConversation}
+      othersTypingByConversation={othersTypingByConversation}
       fetch={fetchMyConversations}
       onSelectConversation={onSelectConversation}
       onUpdateConversation={onUpdateConversation}
       onDeleteConversation={onDeleteConversation}
       onSendMessage={onSendMessage}
+      handleTyping={handleTyping}
     />
   );
 };

assets/src/components/conversations/PriorityConversations.tsx

@@ -11,12 +11,14 @@ const PriorityConversations = () => {
     priority = [],
     conversationsById = {},
     messagesByConversation = {},
+    othersTypingByConversation = {},
     currentlyOnline = {},
     fetchPriorityConversations,
     onSelectConversation,
     onUpdateConversation,
     onDeleteConversation,
     onSendMessage,
+    handleTyping,
   } = useConversations();
 
   if (loading) {
@@ -34,11 +36,13 @@ const PriorityConversations = () => {
       conversationIds={priority}
       conversationsById={conversationsById}
       messagesByConversation={messagesByConversation}
+      othersTypingByConversation={othersTypingByConversation}
       fetch={fetchPriorityConversations}
       onSelectConversation={onSelectConversation}
       onUpdateConversation={onUpdateConversation}
       onDeleteConversation={onDeleteConversation}
       onSendMessage={onSendMessage}
+      handleTyping={handleTyping}
     />
   );
 };

assets/src/components/sessions/ConversationSidebar.tsx

@@ -10,11 +10,13 @@ type Props = {
   conversation: Conversation;
   currentUser: User;
   messages: Array<Message>;
+  othersTyping: Array<any>;
   onSendMessage: (
     message: string,
     conversationId: string,
     cb: () => void
   ) => void;
+  handleTyping: (conversationId: string) => () => void;
 };
 
 class ConversationSidebar extends React.Component<Props, any> {
@@ -77,6 +79,8 @@ class ConversationSidebar extends React.Component<Props, any> {
         <ConversationFooter
           sx={{px: 3, pb: 3}}
           onSendMessage={this.handleSendMessage}
+          onInputChanged={this.props.handleTyping(conversation.id)}
+          othersTyping={this.props.othersTyping}
         />
       </Flex>
     );
@@ -93,9 +97,11 @@ const ConversationsSidebarWrapper = ({
     currentUser,
     conversationsById = {},
     messagesByConversation = {},
+    othersTypingByConversation = {},
     fetchConversationById,
     onSendMessage,
     onSelectConversation,
+    handleTyping,
   } = useConversations();
 
   React.useEffect(() => {
@@ -109,6 +115,8 @@ const ConversationsSidebarWrapper = ({
     return null;
   }
 
+  const othersTyping = othersTypingByConversation[conversationId] || [];
+
   // TODO: fix case where conversation is closed!
   const conversation = conversationsById[conversationId] || null;
   const messages = messagesByConversation[conversationId] || null;
@@ -123,6 +131,8 @@ const ConversationsSidebarWrapper = ({
       messages={messages}
       currentUser={currentUser}
       onSendMessage={onSendMessage}
+      handleTyping={handleTyping}
+      othersTyping={othersTyping}
     />
   );
 };