feat: add member to chat input reply

packages/status-react/src/contexts/chat-context.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useMemo, useReducer } from 'react'
 
-import type { Message } from '../protocol/use-messages'
+import type { Member, Message } from '../protocol'
 import type { Dispatch, Reducer } from 'react'
 
 type Context = {
@@ -12,25 +12,27 @@ const ChatContext = createContext<Context | undefined>(undefined)
 
 interface State {
   message?: Message
+  member?: Member
 }
 
 type Action =
-  | { type: 'SET_REPLY'; message?: Message }
-  | { type: 'CANCEL_REPLY' }
+  | { type: 'SET_REPLY'; message?: Message; member?: Member }
+  | { type: 'DELETE_REPLY' }
 
 const reducer: Reducer<State, Action> = (state, action) => {
   switch (action.type) {
     case 'SET_REPLY': {
-      return { ...state, message: action.message }
+      return { ...state, message: action.message, member: action.member }
     }
-    case 'CANCEL_REPLY': {
-      return { ...state, message: undefined }
+    case 'DELETE_REPLY': {
+      return { ...initialState }
     }
   }
 }
 
 const initialState: State = {
   message: undefined,
+  member: undefined,
 }
 
 interface Props {
@@ -41,6 +43,7 @@ export const ChatProvider = (props: Props) => {
   const { children } = props
 
   const [state, dispatch] = useReducer(reducer, initialState)
+
   const value = useMemo(() => ({ state, dispatch }), [state])
 
   return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>

packages/status-react/src/routes/chat/components/chat-input/index.tsx

@@ -21,7 +21,7 @@ export const ChatInput = (props: Props) => {
   const { value, editing, onSubmit } = props
 
   const [inputValue, setInputValue] = useState(value ?? '')
-  const { state } = useChatContext()
+  const { state, dispatch } = useChatContext()
 
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -37,6 +37,7 @@ export const ChatInput = (props: Props) => {
     if (event.key === 'Enter' && event.shiftKey === false) {
       onSubmit(inputValue)
       setInputValue('')
+      dispatch({ type: 'DELETE_REPLY' })
     }
   }
 
@@ -48,7 +49,9 @@ export const ChatInput = (props: Props) => {
         </IconButton>
       </Box>
       <Bubble>
-        {state.message && <InputReply message={state.message} />}
+        {state.message && (
+          <InputReply message={state.message} member={state.member} />
+        )}
         <InputWrapper>
           <Input
             ref={inputRef}

packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx

@@ -4,34 +4,30 @@ import { useChatContext } from '~/src/contexts/chat-context'
 import { CrossIcon } from '~/src/icons/cross-icon'
 import { ReplyIcon } from '~/src/icons/reply-icon'
 import { styled } from '~/src/styles/config'
-import { Box, Flex, Icon, IconButton, Image, Text } from '~/src/system'
+import { Flex, Icon, IconButton, Image, Text } from '~/src/system'
 
-import type { Message } from '~/src/protocol/use-messages'
+import type { Member, Message } from '~/src/protocol'
 
 interface Props {
   message: Message
+  member: Member
 }
 
 export const InputReply = (props: Props) => {
   const { dispatch } = useChatContext()
 
-  const { message } = props
+  const { message, member } = props
 
   return (
     <Wrapper>
       <Flex align="center" justify="between">
-        <Flex gap={1}>
-          <Icon hidden>
-            <ReplyIcon />
-          </Icon>
         <Text size="13" weight="500" truncate={false}>
-            TODO: Add name
+          {member.username}
         </Text>
-        </Flex>
 
         <IconButton
           label="Cancel reply"
-          onClick={() => dispatch({ type: 'CANCEL_REPLY' })}
+          onClick={() => dispatch({ type: 'DELETE_REPLY' })}
         >
           <CrossIcon />
         </IconButton>

packages/status-react/src/routes/chat/components/chat-message/index.tsx

@@ -85,7 +85,7 @@ export const ChatMessage = (props: Props) => {
   }
 
   const handleReplyClick = () => {
-    dispatch({ type: 'SET_REPLY', message })
+    dispatch({ type: 'SET_REPLY', message, member })
   }
 
   const handlePinClick = () => {