diff --git a/web/chat/chat-thread-composer.react.js b/web/chat/chat-thread-composer.react.js
--- a/web/chat/chat-thread-composer.react.js
+++ b/web/chat/chat-thread-composer.react.js
@@ -1,6 +1,7 @@
 // @flow
 import classNames from 'classnames';
 import * as React from 'react';
+import { useDispatch } from 'react-redux';
 
 import { userSearchIndexForPotentialMembers } from 'lib/selectors/user-selectors';
 import { getPotentialMemberItems } from 'lib/shared/search-utils';
@@ -11,6 +12,7 @@
 import type { InputState } from '../input/input-state';
 import { useSelector } from '../redux/redux-utils';
 import SWMansionIcon from '../SWMansionIcon.react';
+import { updateNavInfoActionType } from '../types/nav-types';
 import css from './chat-thread-composer.css';
 
 type Props = {
@@ -22,10 +24,16 @@
 };
 
 function ChatThreadComposer(props: Props): React.Node {
-  const { userInfoInputArray, otherUserInfos, isThreadSelected } = props;
+  const {
+    userInfoInputArray,
+    otherUserInfos,
+    threadID,
+    isThreadSelected,
+  } = props;
 
   const [usernameInputText, setUsernameInputText] = React.useState('');
 
+  const dispatch = useDispatch();
   const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);
 
   const userListItems = React.useMemo(
@@ -39,10 +47,38 @@
     [usernameInputText, otherUserInfos, userSearchIndex, userInfoInputArray],
   );
 
-  // eslint-disable-next-line no-unused-vars
-  const onSelectUserFromSearch = React.useCallback((id: string) => {}, []);
-  // eslint-disable-next-line no-unused-vars
-  const onRemoveUserFromSelected = React.useCallback((id: string) => {}, []);
+  const onSelectUserFromSearch = React.useCallback(
+    (id: string) => {
+      const userInfo = otherUserInfos[id];
+      if (!userInfo) {
+        return;
+      }
+      dispatch({
+        type: updateNavInfoActionType,
+        payload: {
+          selectedUserList: [...userInfoInputArray.map(user => user.id), id],
+        },
+      });
+      setUsernameInputText('');
+    },
+    [dispatch, otherUserInfos, userInfoInputArray],
+  );
+
+  const onRemoveUserFromSelected = React.useCallback(
+    (id: string) => {
+      const selectedUserIDs = userInfoInputArray.map(user => user.id);
+      if (!selectedUserIDs.includes(id)) {
+        return;
+      }
+      dispatch({
+        type: updateNavInfoActionType,
+        payload: {
+          selectedUserList: selectedUserIDs.filter(userID => userID !== id),
+        },
+      });
+    },
+    [dispatch, userInfoInputArray],
+  );
 
   const userSearchResultList = React.useMemo(() => {
     if (
@@ -73,7 +109,15 @@
     usernameInputText.length,
   ]);
 
-  const hideSearch = React.useCallback(() => {}, []);
+  const hideSearch = React.useCallback(() => {
+    dispatch({
+      type: updateNavInfoActionType,
+      payload: {
+        tab: 'chat',
+        activeChatThreadID: threadID,
+      },
+    });
+  }, [dispatch, threadID]);
 
   const tagsList = React.useMemo(() => {
     if (!userInfoInputArray?.length) {