diff --git a/src/client/webapp/elements/sections/send-message.tsx b/src/client/webapp/elements/sections/send-message.tsx
new file mode 100644
index 0000000..d1142c2
--- /dev/null
+++ b/src/client/webapp/elements/sections/send-message.tsx
@@ -0,0 +1,76 @@
+import * as electronRemote from '@electron/remote';
+const electronConsole = electronRemote.getGlobal('console') as Console;
+import Logger from '../../../../logger/logger';
+const LOG = Logger.create(__filename, electronConsole);
+
+import React, { FC, FormEvent, KeyboardEvent, RefObject, useCallback, useMemo, useRef, useState } from 'react'
+import { Channel } from '../../data-types';
+import CombinedGuild from '../../guild-combined';
+import BaseElements from '../require/base-elements';
+import ReactHelper from '../require/react-helper';
+
+export interface SendMessageProps {
+ guild: CombinedGuild;
+ channel: Channel;
+}
+
+const SendMessage: FC
= (props: SendMessageProps) => {
+ const { guild, channel } = props;
+
+ const contentEditableRef = useRef(null);
+ const [ text, setText ] = useState('');
+ const [ enabled, setEnabled ] = useState(true);
+
+ const [ sendCallable ] = ReactHelper.useAsyncVoidCallback(
+ async (isMounted: RefObject) => {
+ if (!enabled) return;
+ setEnabled(false);
+
+ // TODO: Deal with errors (toasts are probably the best way)
+ await guild.requestSendMessage(channel.id, text);
+ if (!isMounted.current) return;
+
+ if (contentEditableRef.current) contentEditableRef.current.innerText = '';
+ setEnabled(true);
+ if (contentEditableRef.current) contentEditableRef.current.focus();
+ },
+ [ enabled, guild, channel, text ]
+ );
+
+ const onTextInput = useCallback((e: FormEvent) => {
+ setText(e.currentTarget.innerText);
+ }, []);
+
+ const onTextKeyDown = useCallback((e: KeyboardEvent) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ sendCallable();
+ }
+ }, [ text ]);
+
+ // WARNING: The types on this are funky because of react's lack of explicit support for 'plaintext-only'
+ const contentEditableType = useMemo(() => {
+ if (enabled) return 'plaintext-only' as 'true'; // WARNING: we have to do this to trick react's bad typings
+ else return 'false';
+ }, [ enabled ]);
+
+ const textInputClassName = useMemo(() => {
+ return enabled ? 'text-input' : 'text-input disabled';
+ }, [ enabled ]);
+
+ return (
+
+
+
{BaseElements.SEND_MESSAGE_ATTACH}
+
+
+