@tellescope/chat 0.0.57 → 0.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/chat",
-  "version": "0.0.57",
+  "version": "0.0.60",
   "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.60",
+    "@tellescope/react-components": "^0.0.60",
+    "@tellescope/sdk": "^0.0.60",
+    "@tellescope/types-client": "^0.0.60",
+    "@tellescope/types-models": "^0.0.60",
+    "@tellescope/types-utilities": "^0.0.60",
+    "@tellescope/utilities": "^0.0.60",
     "@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": "576d65bb0853dd189a81a4a5f463ed9ece05832d",
   "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,
@@ -172,6 +172,12 @@ export const Message = ({
   )
 }
 
+export const MessageAttachments = ({ message } : { message: ChatMessage }) => {
+  return (
+    <Typography>Attachments: {JSON.stringify(message.attachments, null, 2)}</Typography>
+  )
+}
+
 interface Messages_T extends MessageStyles {
   resolveSenderName?: (room: ChatRoom) => React.ReactNode; 
   messages: LoadedData<ChatMessage[]>,
@@ -192,7 +198,12 @@ export const Messages = ({
     <Flex column flex={1}>
       {Header && <Header {...headerProps}/>}
       <List reverse style={style} items={messages} render={message => (
-        <Message key={message.id} message={message} {...messageStyles}/>
+        <Flex column>
+          {message.message && <Message key={message.id} message={message} {...messageStyles}/>}
+          {message.attachments && message.attachments.length > 0 && 
+            <MessageAttachments message={message} />
+          }
+        </Flex>
       )}/>    
     </Flex>
   )}/>
@@ -316,6 +327,9 @@ interface SendMessage_T {
   placeholderText?: string;
   Icon?: React.ElementType<any>;
   style?: CSSProperties;
+
+  // web only
+  sendOnEnterPress?: boolean,
 }
 export const SendMessage = ({ 
   roomId, 
@@ -324,22 +338,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('')