@tellescope/chat 0.0.57 → 0.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/chat",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -33,13 +33,13 @@
     "@fontsource/roboto": "^4.5.1",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "^5.0.2",
-    "@tellescope/constants": "^0.0.57",
-    "@tellescope/react-components": "^0.0.57",
-    "@tellescope/sdk": "^0.0.57",
-    "@tellescope/types-client": "^0.0.57",
-    "@tellescope/types-models": "^0.0.57",
-    "@tellescope/types-utilities": "^0.0.57",
-    "@tellescope/utilities": "^0.0.57",
+    "@tellescope/constants": "^0.0.58",
+    "@tellescope/react-components": "^0.0.58",
+    "@tellescope/sdk": "^0.0.58",
+    "@tellescope/types-client": "^0.0.58",
+    "@tellescope/types-models": "^0.0.58",
+    "@tellescope/types-utilities": "^0.0.58",
+    "@tellescope/utilities": "^0.0.58",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "eslint": "^7.32.0",
@@ -50,7 +50,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "7a830676f46cdc5d10961aa85f79ad669e4acffb",
+  "gitHead": "62c6def8118570898eebf960a615baca605f17c7",
   "publishConfig": {
     "access": "public"
   }

package/src/chat.tsx

@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties } from "react"
+import React, { useState, CSSProperties, useEffect } from "react"
 
 import {
   AsyncIconButton,
@@ -316,6 +316,9 @@ interface SendMessage_T {
   placeholderText?: string;
   Icon?: React.ElementType<any>;
   style?: CSSProperties;
+
+  // web only
+  sendOnEnterPress?: boolean,
 }
 export const SendMessage = ({ 
   roomId, 
@@ -324,22 +327,51 @@ export const SendMessage = ({
   onNewMessage, 
   placeholderText="Enter a message", 
   style={},
+  sendOnEnterPress,
 }: SendMessage_T) => {
   const [message, setMessage] = useState('')
   const [sending, setSending] = useState(false)
+
+  const [disabled, setDisabled] = useState(false)
+  const [chatFocused, setChatFocused] = React.useState(false)
   
   const [, { createElement: createMessage }] = useChats(roomId, type)
 
+  useEffect(() => {
+    if (!chatFocused) return
+    if (!sendOnEnterPress) return
+    if (typeof window === 'undefined') return
+
+    const handleSend = (e: any) => {
+      if (e.key !== 'Enter') return
+      setDisabled(true)
+
+      createMessage({ message, roomId })
+      .then(m => {
+        setMessage('')
+        onNewMessage?.(m)
+      })
+      .catch(console.error)
+      .finally(() => setDisabled(false))
+    }    
+
+    window.addEventListener('keypress', handleSend)
+    return () => { window.removeEventListener('keypress', handleSend) }
+  }, [sendOnEnterPress, chatFocused, message, roomId])
+
   return (
     <Flex row flex={1} alignContent="center" style={style}>
       <Flex column flex={1}>
         <TextField variant="outlined" value={message} onChange={setMessage} disabled={sending}
           aria-label="Enter a message" 
           placeholder={placeholderText} 
+          onFocus={() => setChatFocused(true)}
+          onBlur={() => setChatFocused(false)}
         />
       </Flex>
       <Flex column alignSelf="center">
-        <AsyncIconButton label="send" Icon={Icon} disabled={message === ''}
+        <AsyncIconButton label="send" Icon={Icon} 
+          disabled={message === '' || disabled}  
           action={() => createMessage({ message, roomId })}
           onSuccess={m => {
             setMessage('')