Add auto complete back.

src/components/common/messaging/Message.tsx

@@ -10,6 +10,8 @@ import { QueuedMessage } from "../../../redux/reducers/queue";
 import { MessageObject } from "../../../context/revoltjs/util";
 import MessageBase, { MessageContent, MessageDetail, MessageInfo } from "./MessageBase";
 import Overline from "../../ui/Overline";
+import { useContext } from "preact/hooks";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 interface Props {
     attachContext?: boolean
@@ -23,7 +25,8 @@ interface Props {
 export default function Message({ attachContext, message, contrast, content: replacement, head, queued }: Props) {
     // TODO: Can improve re-renders here by providing a list
     // TODO: of dependencies. We only need to update on u/avatar.
-    let user = useUser(message.author);
+    const user = useUser(message.author);
+    const client = useContext(AppContext);
 
     const content = message.content as string;
     return (
@@ -31,6 +34,7 @@ export default function Message({ attachContext, message, contrast, content: rep
             head={head}
             contrast={contrast}
             sending={typeof queued !== 'undefined'}
+            mention={message.mentions?.includes(client.user!._id)}
             failed={typeof queued?.error !== 'undefined'}
             onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel, queued }) : undefined}>
             <MessageInfo>

src/components/common/messaging/MessageBox.tsx

@@ -20,6 +20,7 @@ import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib
 
 import FilePreview from './bars/FilePreview';
 import { debounce } from "../../../lib/debounce";
+import AutoComplete, { useAutoComplete } from "../AutoComplete";
 
 type Props = WithDispatcher & {
     channel: Channel;
@@ -226,9 +227,11 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
     }
 
     const debouncedStopTyping = useCallback(debounce(stopTyping, 1000), [ channel._id ]);
+    const { onChange, onKeyUp, onKeyDown, onFocus, onBlur, ...autoCompleteProps } = useAutoComplete(setMessage, { users: { type: 'channel', id: channel._id } });
 
     return (
         <>
+            <AutoComplete {...autoCompleteProps} />
             <FilePreview state={uploadState} addFile={() => uploadState.type === 'attached' &&
                 grabFiles(20_000_000, files => setUploadState({ type: 'attached', files: [ ...uploadState.files, ...files ] }),
                     () => openScreen({ id: "error", error: "FileTooLarge" }), true)}
@@ -271,7 +274,10 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
                     padding={14}
                     id="message"
                     value={draft ?? ''}
+                    onKeyUp={onKeyUp}
                     onKeyDown={e => {
+                        if (onKeyDown(e)) return;
+
                         if (
                             e.key === "ArrowUp" &&
                             (!draft || draft.length === 0)
@@ -298,7 +304,10 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
                     onChange={e => {
                         setMessage(e.currentTarget.value);
                         startTyping();
-                    }} />
+                        onChange(e);
+                    }}
+                    onFocus={onFocus}
+                    onBlur={onBlur} />
                 <Action>
                     <IconButton onClick={send}>
                         <Send size={20} />