167 paste chat replace messagelog component

.changeset/tender-geckos-accept.md

@@ -0,0 +1,6 @@
+---
+"@twilio-labs/dev-phone-ui": patch
+---
+
+Preserve newlines in inbound and outbound sms.
+Add react text area auto resize component.

package.json

@@ -28,7 +28,12 @@
     "packages/dev-phone-ui"
   ],
   "devDependencies": {
-    "@changesets/cli": "^2.23.0",
+    "@changesets/cli": "^2.26.1",
     "turbo": "^1.2.16"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "redux": "^4.2.1"
   }
 }

packages/dev-phone-ui/package.json

@@ -25,11 +25,13 @@
     "webpack": "^5.69.1",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",
-    "webpack-license-plugin": "^4.2.2"
+    "webpack-license-plugin": "^4.2.2",
+    "@changesets/cli": "^2.26.1",
+    "turbo": "^1.2.16"
   },
   "dependencies": {
-    "@twilio-paste/core": "^19.0.0",
-    "@twilio-paste/icons": "^11.1.0",
+    "@twilio-paste/core": "^20.2.0",
+    "@twilio-paste/icons": "^12.1.0",
     "@twilio/conversations": "^2.0.0",
     "@twilio/voice-sdk": "^2.1.0",
     "date-fns": "^2.28.0",
@@ -43,6 +45,10 @@
     "twilio-sync": "^3.0.6",
     "util": "^0.12.4"
   },
+  "overrides": {
+    "@twilio-paste/core": "^20.2.0",
+    "@twilio-paste/icons": "^12.1.0"
+  },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

packages/dev-phone-ui/src/components/PhoneNumberPicker/PhoneNumberPicker.jsx

@@ -32,30 +32,6 @@ const sortUnconfiguredNumbersFirstThenAlphabetically = (pn1, pn2) => {
   return pn1.phoneNumber.localeCompare(pn2.phoneNumber);
 };
 
-const numPicker = async (currentNum, selectNum, getAvailableNums) => {
-  if (!currentNum) {
-    try {
-      const response = await fetch('/phone-numbers')
-      const data = await response.json()
-      data["phone-numbers"].sort(
-        sortUnconfiguredNumbersFirstThenAlphabetically
-      )
-      getAvailableNums(data["phone-numbers"]);
-      if (data["phone-numbers"].length !== 0) {
-        selectNum(
-          getPnDetailsByNumber(
-            data["phone-numbers"][0].phoneNumber,
-            data["phone-numbers"]
-          )
-        );
-      }
-    } catch (error) {
-      console.error(error)
-    }
-  }
-}
-
-
 function PhoneNumberPickerContainer({ children }) {
   return <Box
     maxWidth={"75%"}
@@ -70,13 +46,34 @@ function PhoneNumberPickerContainer({ children }) {
   </Box>
 }
 
-
 function PhoneNumberPicker({ configureNumberInUse, phoneNumbers }) {
   const [twilioPns, setTwilioPns] = useState(null);
   const [selectedPn, setSelectedPn] = useState(null);
 
-  useEffect(() => {
-    numPicker(selectedPn, setSelectedPn, setTwilioPns);
+  useEffect( () => {
+    const asyncFn = async() => {
+    if (!selectedPn) {
+      try {
+        const response = await fetch('/phone-numbers')
+        const data = await response.json()
+        data["phone-numbers"].sort(
+          sortUnconfiguredNumbersFirstThenAlphabetically
+        )
+        setTwilioPns(data["phone-numbers"]);
+        if (data["phone-numbers"].length !== 0) {
+          setSelectedPn(
+            getPnDetailsByNumber(
+              data["phone-numbers"][0].phoneNumber,
+              data["phone-numbers"]
+            )
+          );
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  }
+asyncFn()
   }, [selectedPn]);
 
   if (twilioPns === null) {

packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx

@@ -1,14 +1,11 @@
-import {
-    Box, Flex, SkeletonLoader, 
-    Text, ChatLog, ChatMessage,
-    ChatBubble, ChatMessageMeta, ChatMessageMetaItem, 
-    Avatar
-} from "@twilio-paste/core"
-import { UserIcon } from '@twilio-paste/icons/esm/UserIcon';
+import { Box, SkeletonLoader } from "@twilio-paste/core"
+import { ChatLog, ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem } from "@twilio-paste/chat-log";
+import { Avatar } from "@twilio-paste/avatar";
 import { useSelector } from "react-redux"
 import EmptyMessageList from "./EmptyMessageList";
 
 
+
 function MessageList({ devPhoneName }) {
     const messageList = useSelector(state => state.messageList)
     const numberInUse = useSelector(state => state.numberInUse ? state.numberInUse.phoneNumber : "");
@@ -27,7 +24,7 @@ function MessageList({ devPhoneName }) {
                                     </ChatBubble>
                                     <ChatMessageMeta aria-label={!isFromDevPhone ? "said by outbound user" : "said by dev phone"}>
                                         <ChatMessageMetaItem>
-                                            <Avatar size="sizeIcon30" name={message.author} icon={UserIcon} />
+                                            <Avatar size="sizeIcon30" name={message.author} />
                                             {message.author}
                                         </ChatMessageMetaItem>
                                     </ChatMessageMeta>

packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx

@@ -1,24 +1,46 @@
-import { useContext, useState, useMemo } from "react";
-import { Button, Input, Label, Box, Grid, Column } from "@twilio-paste/core";
-import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
+import React, { useContext, useState, useMemo } from "react";
 import { useSelector } from "react-redux";
+import { Button, Label, Box, Grid, HelpText, Column, AutoScrollPlugin } from "@twilio-paste/core";
+import { ChatComposer } from "@twilio-paste/core/chat-composer";
+import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
 import MessageList from "./MessageList"
+import {$getRoot, ClearEditorPlugin, useLexicalComposerContext, CLEAR_EDITOR_COMMAND } from "@twilio-paste/core/lexical-library";
+
+
+
+function SendButtonPlugin({onClick, canSendMessages}) {
+  const [editor] = useLexicalComposerContext(); 
+
+  const sendIt = (e) => {
+    onClick(e);
+    editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+  }
+
+
+  return (
+    <Button onClick={sendIt} type={"submit"} disabled={!canSendMessages}>
+      <SendIcon decorative />
+      Send
+    </Button>
+  )
+}
 
 function SendSmsForm({ numberInUse }) {
+  const myRef = React.createRef()
+
   const [messageBody, setMessageBody] = useState('');
 
   const channelData = useSelector(state => state.channelData)
   const destinationNumber = useSelector(state => state.destinationNumber)
 
   const conversationsClient = useContext(TwilioConversationsContext)
-  const {sendMessage, sendSms} = conversationsClient
+  const { sendMessage, sendSms } = conversationsClient
 
   const canSendMessages = useMemo(() => {
     return destinationNumber && destinationNumber.length > 6;
   }, [destinationNumber]);
 
-  // Handles the UI state for sending messages
   const sendIt = async (e) => {
     e.preventDefault()
     if (canSendMessages) {
@@ -30,25 +52,41 @@ function SendSmsForm({ numberInUse }) {
     }
   };
 
+  const myOnChange = (editorState) => {
+    editorState.read(() => {
+      const root = $getRoot();
+      setMessageBody(root.getTextContent());
+    });
+  };
+
+
   return (
-    <Box width="100%" backgroundColor={"colorBackgroundBody"}>
+
+    <Box width="100%" backgroundColor={"default"}>
       <MessageList
         devPhoneName={channelData.devPhoneName}
       />
-      <form onSubmit={(e) => sendIt(e)} method={"GET"}>
-        <Label htmlFor="sendSmsBody" required>Message</Label>
-        <Grid gutter={"space20"} marginBottom="space40">
-          <Column span={10}>
-            <Input id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
-          </Column>
-          <Column span={2}>
-            <Button type={"submit"} disabled={!canSendMessages}>
-              <SendIcon decorative />
-              Send
-            </Button>
-          </Column>
-        </Grid>
-      </form>
+      <Label htmlFor="sendSmsBody" required>Message</Label>
+
+      <Grid gutter={"space20"} marginBottom="space40">
+        <Column span={10}>
+          <ChatComposer
+            config={{
+              namespace: "send_sms",
+              onError: (e) => {
+                throw e;
+              }
+            }}
+            placeholder="Chat text"
+            ariaLabel="A basic chat composer"
+            onChange={myOnChange}
+          >
+            <ClearEditorPlugin />
+            <SendButtonPlugin canSendMessages={canSendMessages} onClick={sendIt} />
+          </ChatComposer>
+          <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
+        </Column>
+      </Grid>
     </Box>
 
   );