fix: Message input not focusing after enable

src/components/chat/ui/ChatInput.tsx

@@ -1,11 +1,12 @@
 import { css, cx } from '@linaria/core';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import useSendbirdStateContext from '@uikit/hooks/useSendbirdStateContext';
 import MessageInputWrapperView from '@uikit/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView';
 
 import { themedColors } from '../../../foundation/colors/css';
 import { useBlockWhileBotResponding } from '../../../hooks/useBlockWhileBotResponding';
+import { usePrevious } from '../../../hooks/usePrevious';
 import { isIOSMobile } from '../../../utils';
 import { AlertModal } from '../../ui/AlertModal';
 import { useChatContext } from '../context/ChatProvider';
@@ -15,13 +16,24 @@ export const ChatInput = () => {
   const { channel, botUser, dataSource, handlers } = useChatContext();
 
   const ref = useRef<HTMLDivElement>(null);
+
   const [limitError, setLimitError] = useState(false);
 
   const { config } = useSendbirdStateContext();
   const isMessageInputDisabled = useBlockWhileBotResponding({
     lastMessage: dataSource.messages[dataSource.messages.length - 1],
     botUser,
   });
+  const prevIsMessageInputDisabled = usePrevious(isMessageInputDisabled);
+
+  // Focus the input only when isMessageInputDisabled changes from true to false
+  useEffect(() => {
+    if (prevIsMessageInputDisabled === true && !isMessageInputDisabled) {
+      if (ref.current) {
+        ref.current.focus();
+      }
+    }
+  }, [isMessageInputDisabled, prevIsMessageInputDisabled]);
 
   return (
     <div className={cx(container, isIOSMobile && iosMobileContainer)}>

src/hooks/usePrevious.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export function usePrevious(value: any) {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = value;
+  });
+
+  return ref.current; // Return the previous value
+}