186 style scroll chat composer

.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

@@ -45,35 +45,35 @@ function PhoneNumberPickerContainer({ children }) {
     {children}
   </Box>
 }
-const numPicker = 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)
-    }
-  }
-}
 
 function PhoneNumberPicker({ configureNumberInUse, phoneNumbers }) {
   const [twilioPns, setTwilioPns] = useState(null);
   const [selectedPn, setSelectedPn] = useState(null);
 
-  useEffect(() => {
-    numPicker();
+  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/SendButtonPlugin.jsx

@@ -0,0 +1,32 @@
+import {useLexicalComposerContext, CLEAR_EDITOR_COMMAND } from "@twilio-paste/core/lexical-library";
+import { Button } from "@twilio-paste/core";
+import {CustomizationProvider} from '@twilio-paste/core/customization';
+import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
+
+// Renders a send button for the Paste Chat Composer
+function SendButtonPlugin({ onClick, canSendMessages }) {
+
+    const [editor] = useLexicalComposerContext();
+
+    const sendIt = (e) => {
+      onClick(e);
+      editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+    }
+
+    return (
+      <CustomizationProvider
+        elements={{
+          SMS_SEND_BUTTON: {
+            float: 'right',
+          },
+        }}
+      >
+      <Button element="SMS_SEND_BUTTON" onClick={sendIt} type={"submit"} disabled={!canSendMessages}>
+        <SendIcon decorative />
+        Send
+      </Button>
+      </CustomizationProvider>
+    )
+  }
+
+  export default SendButtonPlugin;

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

@@ -1,24 +1,26 @@
-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 { Label, Box, Grid, HelpText, Column, AutoScrollPlugin } from "@twilio-paste/core";
+import { ChatComposer } from "@twilio-paste/core/chat-composer";
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
 import MessageList from "./MessageList"
+import { $getRoot, ClearEditorPlugin } from "@twilio-paste/core/lexical-library";
+import SendButtonPlugin from "./SendButtonPlugin";
 
+// Top-level container for Dev Phone SMS
 function SendSmsForm({ numberInUse }) {
   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,32 +32,44 @@ 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"} overflowX="hidden" overflowY="auto">
       <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={12}>
+            <ChatComposer
+              config={{
+                namespace: "send_sms",
+                onError: (e) => {
+                  throw e;
+                }
+              }}
+              placeholder="Chat text"
+              ariaLabel="A basic chat composer"
+              onChange={myOnChange}
+              element="SEND_SMS_COMPOSER"
+            >
+              <ClearEditorPlugin />
+              <SendButtonPlugin canSendMessages={canSendMessages} onClick={sendIt} />
+            </ChatComposer>
+          <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
+        </Column>
+      </Grid>
     </Box>
 
   );
 }
 
-
-
-
-
 export default SendSmsForm;

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

@@ -29,12 +29,13 @@ function Softphone({ numberInUse }) {
     return (
         <Box
             maxWidth={"75%"}
-            maxHeight={"size80"}
+            maxHeight={"size90"}
             margin={"auto"}
             marginY={"space120"}
             backgroundColor={"colorBackgroundBody"}
             boxShadow={"shadow"}
             borderRadius={"borderRadius20"}
+            overflowY="auto"
         >
             <Grid>
                 <Column span={showCallHistory ? 4 : 0}>