Use contentEditable for chat input field

web/components/chat/ChatContainer.tsx

@@ -26,15 +26,14 @@ export default function ChatContainer(props: Props) {
       default:
         return null;
     }
-    return null;
   };
 
-  console.log(messages);
   return (
     <div>
       <h1>Chat</h1>
       <Spin spinning={loading} indicator={spinIcon} />
       <Virtuoso
+        style={{ height: '80vh' }}
         ref={chatContainerRef}
         initialTopMostItemIndex={999}
         data={messages}

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -1,34 +1,42 @@
-import { MoreOutlined } from '@ant-design/icons';
-import { Input, Button } from 'antd';
-import { useEffect, useState } from 'react';
+import { SmileOutlined } from '@ant-design/icons';
+import { Button, Input } from 'antd';
+import { useRef, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import ContentEditable from 'react-contenteditable';
+import WebsocketService from '../../../services/websocket-service';
+import { websocketServiceAtom } from '../../stores/ClientConfigStore';
 import s from './ChatTextField.module.scss';
 
-interface Props {}
+interface Props {
+  value?: string;
+}
 
 export default function ChatTextField(props: Props) {
-  const [value, setValue] = useState('');
+  const { value: originalValue } = props;
+  const [value, setValue] = useState(originalValue);
   const [showEmojis, setShowEmojis] = useState(false);
-  // large is 40px
-  const size = 'large';
+  const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
 
-  useEffect(() => {
-    console.log({ value });
-  }, [value]);
+  const text = useRef(value);
+
+  // large is 40px
+  const size = 'small';
+
+  const handleChange = evt => {
+    text.current = evt.target.value;
+  };
 
   return (
     <div>
-      <Input.Group compact style={{ display: 'flex' }}>
-        <Input
-          onChange={e => setValue(e.target.value)}
-          size={size}
-          placeholder="Enter text and hit enter!"
-        />
-        <Button
-          size={size}
-          icon={<MoreOutlined />}
-          type="default"
-          onClick={() => setShowEmojis(!showEmojis)}
+      <Input.Group compact style={{ display: 'flex', width: '100%', position: 'absolute' }}>
+        <ContentEditable
+          style={{ width: '60%', maxHeight: '50px', padding: '5px' }}
+          html={text.current}
+          onChange={handleChange}
         />
+        <Button type="default" ghost title="Emoji" onClick={() => setShowEmojis(!showEmojis)}>
+          <SmileOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
+        </Button>
         <Button size={size} type="primary">
           Submit
         </Button>
@@ -36,3 +44,7 @@ export default function ChatTextField(props: Props) {
     </div>
   );
 }
+
+ChatTextField.defaultProps = {
+  value: '',
+};

web/components/stores/ClientConfigStore.tsx

@@ -59,6 +59,11 @@ export const chatMessagesAtom = atom<ChatMessage[]>({
   default: [] as ChatMessage[],
 });
 
+export const websocketServiceAtom = atom<WebsocketService>({
+  key: 'websocketServiceAtom',
+  default: null,
+});
+
 export function ClientConfigStore() {
   const setClientConfig = useSetRecoilState<ClientConfig>(clientConfigStateAtom);
   const setChatVisibility = useSetRecoilState<ChatVisibilityState>(chatVisibilityAtom);
@@ -67,8 +72,10 @@ export function ClientConfigStore() {
   const setChatDisplayName = useSetRecoilState<string>(chatDisplayNameAtom);
   const [appState, setAppState] = useRecoilState<AppState>(appStateAtom);
   const [accessToken, setAccessToken] = useRecoilState<string>(accessTokenAtom);
+  const [websocketService, setWebsocketService] =
+    useRecoilState<WebsocketService>(websocketServiceAtom);
 
-  let websocketService: WebsocketService;
+  // let websocketService: WebsocketService;
 
   const updateClientConfig = async () => {
     try {
@@ -126,8 +133,9 @@ export function ClientConfigStore() {
   const startChat = async () => {
     setChatState(ChatState.Loading);
     try {
-      websocketService = new WebsocketService(accessToken, '/ws');
-      websocketService.handleMessage = handleMessage;
+      const ws = new WebsocketService(accessToken, '/ws');
+      ws.handleMessage = handleMessage;
+      setWebsocketService(ws);
     } catch (error) {
       console.error(`ChatService -> startChat() ERROR: \n${error}`);
     }

web/components/ui/Content/Content.tsx

@@ -1,5 +1,5 @@
 import { useRecoilValue } from 'recoil';
-import { Layout, Tabs, Layout, Row, Col, Tabs } from 'antd';
+import { Layout, Row, Col, Tabs } from 'antd';
 import Grid from 'antd/lib/card/Grid';
 import {
   chatVisibilityAtom,