fix(regression): autocomplete wasn't triggered on

src/react/Chat.stories.tsx

@@ -1,14 +1,33 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { useEffect, useState } from 'react'
-import Chat, { fadeMessage } from './ChatContainer'
+import Chat, { fadeMessage, initialChatOpenValue } from './ChatContainer'
 import Button from './Button'
 
 const meta: Meta<typeof Chat> = {
   component: Chat,
   render (args) {
     const [messages, setMessages] = useState(args.messages)
     const [autoSpam, setAutoSpam] = useState(false)
+    const [open, setOpen] = useState(args.opened)
+
+    useEffect(() => {
+      const abortController = new AbortController()
+      addEventListener('keyup', (e) => {
+        if (e.code === 'KeyY') {
+          initialChatOpenValue.value = '/'
+          setOpen(true)
+          e.stopImmediatePropagation()
+        }
+        if (e.code === 'Escape') {
+          setOpen(false)
+          e.stopImmediatePropagation()
+        }
+      }, {
+        signal: abortController.signal,
+      })
+      return () => abortController.abort()
+    })
 
     useEffect(() => {
       setMessages(args.messages)
@@ -46,7 +65,16 @@ const meta: Meta<typeof Chat> = {
     }
 
     return <div>
-      <Chat {...args} messages={messages} />
+      <Chat {...args} opened={open} messages={messages} onClose={() => setOpen(false)} fetchCompletionItems={async (triggerType, value) => {
+        console.log('fetchCompletionItems')
+        await new Promise(resolve => {
+          setTimeout(resolve, 700)
+        })
+        let items = ['test', ...Array.from({ length: 50 }).map((_, i) => `minecraft:hello${i}`)]
+        if (value === '/') items = items.map(item => `/${item}`)
+        return items
+      }} />
+      <Button onClick={() => setOpen(s => !s)}>Open: {open ? 'on' : 'off'}</Button>
       <Button onClick={() => fadeMessages()}>Fade</Button>
       <Button onClick={() => setAutoSpam(s => !s)}>Auto Spam: {autoSpam ? 'on' : 'off'}</Button>
       <Button onClick={() => setMessages(args.messages)}>Clear</Button>
@@ -114,15 +142,6 @@ export const Primary: Story = {
       ],
       id: 0,
     }],
-    opened: false,
-    async fetchCompletionItems (triggerType, value) {
-      console.log('fetchCompletionItems')
-      await new Promise(resolve => {
-        setTimeout(resolve, 700)
-      })
-      let items = ['test', ...Array.from({ length: 50 }).map((_, i) => `minecraft:hello${i}`)]
-      if (value === '/') items = items.map(item => `/${item}`)
-      return items
-    },
-  },
+    // opened: false,
+  }
 }

src/react/ChatContainer.tsx

@@ -50,7 +50,7 @@ export const fadeMessage = (message: Message, initialTimeout: boolean, requestUp
   }, initialTimeout ? 5000 : 0)
 }
 
-const ChatComponent = ({ messages, touch, opacity, fetchCompletionItems, opened, interceptMessage, onClose }: Props) => {
+export default ({ messages, touch, opacity, fetchCompletionItems, opened, interceptMessage, onClose }: Props) => {
   const [sendHistory, _setSendHistory] = useState(JSON.parse(window.sessionStorage.chatHistory || '[]'))
 
   const [completePadText, setCompletePadText] = useState('')
@@ -80,7 +80,7 @@ const ChatComponent = ({ messages, touch, opacity, fetchCompletionItems, opened,
 
   const updateInputValue = (newValue: string) => {
     chatInput.current.value = newValue
-    chatInput.current.dispatchEvent(new Event('input'))
+    onMainInputChange()
     setTimeout(() => {
       chatInput.current.setSelectionRange(newValue.length, newValue.length)
     }, 0)
@@ -115,13 +115,18 @@ const ChatComponent = ({ messages, touch, opacity, fetchCompletionItems, opened,
       updateInputValue(initialChatOpenValue.value)
       initialChatOpenValue.value = ''
       chatInput.current.focus()
-      resetCompletionItems()
     }
     if (!opened) {
       chatMessages.current.scrollTop = chatMessages.current.scrollHeight
     }
   }, [opened])
 
+  useMemo(() => {
+    if (opened) {
+      resetCompletionItems()
+    }
+  }, [opened])
+
   useEffect(() => {
     if (!opened || (opened && openedChatWasAtBottom.current)) {
       openedChatWasAtBottom.current = false
@@ -175,6 +180,18 @@ const ChatComponent = ({ messages, touch, opacity, fetchCompletionItems, opened,
     setCompletionItems(newCompleteItems)
   }
 
+  const onMainInputChange = () => {
+    const completeValue = getCompleteValue()
+    setCompletePadText(completeValue === '/' ? '' : completeValue)
+    if (completeRequestValue.current === completeValue) {
+      updateFilteredCompleteItems(completionItemsSource)
+      return
+    }
+    if (completeValue === '/') {
+      void fetchCompletions(true)
+    }
+  }
+
   return (
     <>
       <div className={`chat-wrapper chat-messages-wrapper ${touch ? 'display-mobile' : ''}`} hidden={isCypress()}>
@@ -205,7 +222,7 @@ const ChatComponent = ({ messages, touch, opacity, fetchCompletionItems, opened,
             spellCheck={false}
             autoComplete="off"
             onFocus={() => auxInputFocus('ArrowUp')}
-            onChange={() => {}}
+            onChange={() => { }}
           />
           <input
             defaultValue=''
@@ -216,17 +233,7 @@ const ChatComponent = ({ messages, touch, opacity, fetchCompletionItems, opened,
             spellCheck={false}
             autoComplete="off"
             aria-autocomplete="both"
-            onChange={({ target: { value } }) => {
-              const completeValue = getCompleteValue()
-              setCompletePadText(completeValue === '/' ? '' : completeValue)
-              if (completeRequestValue.current === completeValue) {
-                updateFilteredCompleteItems(completionItemsSource)
-                return
-              }
-              if (completeValue === '/') {
-                void fetchCompletions(true)
-              }
-            }}
+            onChange={onMainInputChange}
             onKeyDown={(e) => {
               if (e.code === 'ArrowUp') {
                 if (chatHistoryPos.current === 0) return
@@ -267,12 +274,10 @@ const ChatComponent = ({ messages, touch, opacity, fetchCompletionItems, opened,
             spellCheck={false}
             autoComplete="off"
             onFocus={() => auxInputFocus('ArrowDown')}
-            onChange={() => {}}
+            onChange={() => { }}
           />
         </div>
       </div>
     </>
   )
 }
-
-export default ChatComponent

src/react/ChatProvider.tsx

@@ -3,7 +3,7 @@ import { formatMessage } from '../botUtils'
 import { getBuiltinCommandsList, tryHandleBuiltinCommand } from '../builtinCommands'
 import { hideCurrentModal } from '../globalState'
 import { options } from '../optionsStorage'
-import ChatComponent, { Message, fadeMessage } from './ChatContainer'
+import ChatContainer, { Message, fadeMessage } from './ChatContainer'
 import { useIsModalActive } from './utils'
 
 export default () => {
@@ -23,16 +23,15 @@ export default () => {
           faded: false,
         }
         fadeMessage(newMessage, true, () => {
+          // eslint-disable-next-line max-nested-callbacks
           setMessages(m => [...m])
         })
         return [...m, newMessage].slice(-messagesLimit)
       })
-
-      // todo update scrollbottom
     })
   }, [])
 
-  return <ChatComponent
+  return <ChatContainer
     messages={messages}
     opened={isChatActive}
     interceptMessage={(message) => {