From cac2757568337f63c67a6b924c98aaad29b83fe4 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Mon, 24 Apr 2023 17:03:09 -0400
Subject: [PATCH 01/37] first attempt at fixing newline issue from message
 bodies

---
 package.json                                  |  4 ++
 .../components/SendSmsForm/SendSmsForm.jsx    | 41 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index e6502bb..f6aa149 100644
--- a/package.json
+++ b/package.json
@@ -30,5 +30,9 @@
   "devDependencies": {
     "@changesets/cli": "^2.23.0",
     "turbo": "^1.2.16"
+  },
+  "dependencies": {
+    "redux": "^4.2.1",
+    "twilio-cli": "^5.5.0"
   }
 }
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index beeacfd..4375712 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -12,14 +12,49 @@ function SendSmsForm({ numberInUse }) {
   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]);
 
+  const inputContainer = {
+    boxSizing: "border-box",
+    display: "flex",
+    width: "100%",
+    backgroundColor: "rgb(255, 255, 255)",
+    boxShadow: "0 0 0 1px #8891aa",
+    borderRadius: "5px",
+    transition: "box-shadow 100ms ease-in",
+    cursor: "text",
+    height: "36px"
+  }
+  const textAreaStyle = {
+    boxSizing: "border-box",
+    appearance: "none",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "5px",
+    boxShadow: "none",
+    color: "inherit",
+    cursor: "auto",
+    display: "block",
+    fontFamily: "inherit",
+    fontSize: "0.875rem",
+    fontWeight: "500",
+    lineHeight: "1.25rem",
+    margin: "0",
+    outline: "none",
+    padding: "0.5rem 0.75rem",
+    resize: "none",
+    width: "100%",
+    whiteSpace: "pre-wrap",
+  }
+
+
   // Handles the UI state for sending messages
   const sendIt = async (e) => {
+    formatMessage(messageBody)
     e.preventDefault()
     if (canSendMessages) {
       sendSms(numberInUse, destinationNumber, messageBody);
@@ -39,7 +74,9 @@ function SendSmsForm({ numberInUse }) {
         <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)} />
+            <div style={inputContainer}>
+              <textarea style={textAreaStyle} id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
+            </div>
           </Column>
           <Column span={2}>
             <Button type={"submit"} disabled={!canSendMessages}>

From 8754e1b86c3c4fa5d799a89be3cdf08b0f667bc3 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 26 Apr 2023 10:16:56 -0400
Subject: [PATCH 02/37] remove format method call

---
 packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index 4375712..47042ea 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -54,7 +54,6 @@ function SendSmsForm({ numberInUse }) {
 
   // Handles the UI state for sending messages
   const sendIt = async (e) => {
-    formatMessage(messageBody)
     e.preventDefault()
     if (canSendMessages) {
       sendSms(numberInUse, destinationNumber, messageBody);

From 592988b00a9e51cf729028124d90761ccf871087 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 26 Apr 2023 11:10:28 -0400
Subject: [PATCH 03/37] add changeset and update changeset version

---
 .changeset/tender-geckos-accept.md | 5 +++++
 package.json                       | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tender-geckos-accept.md

diff --git a/.changeset/tender-geckos-accept.md b/.changeset/tender-geckos-accept.md
new file mode 100644
index 0000000..e02b68f
--- /dev/null
+++ b/.changeset/tender-geckos-accept.md
@@ -0,0 +1,5 @@
+---
+"@twilio-labs/dev-phone-ui": patch
+---
+
+Preserve newlines in inbound and outbound sms.
diff --git a/package.json b/package.json
index f6aa149..a449c7a 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "packages/dev-phone-ui"
   ],
   "devDependencies": {
-    "@changesets/cli": "^2.23.0",
+    "@changesets/cli": "^2.26.1",
     "turbo": "^1.2.16"
   },
   "dependencies": {

From 78b17ef55b66a5b355122596874028bd0711859e Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 26 Apr 2023 14:27:54 -0400
Subject: [PATCH 04/37] adding text area auto size component

---
 package.json                                  |  1 +
 .../components/SendSmsForm/SendSmsForm.jsx    | 24 +++++++------------
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index a449c7a..68aa603 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "turbo": "^1.2.16"
   },
   "dependencies": {
+    "react-textarea-autosize": "^8.4.1",
     "redux": "^4.2.1",
     "twilio-cli": "^5.5.0"
   }
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index 47042ea..ed9ea2b 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -3,6 +3,7 @@ import { Button, Input, Label, Box, Grid, Column } from "@twilio-paste/core";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
 import { useSelector } from "react-redux";
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
+import TextareaAutosize from 'react-textarea-autosize';
 import MessageList from "./MessageList"
 
 function SendSmsForm({ numberInUse }) {
@@ -18,24 +19,15 @@ function SendSmsForm({ numberInUse }) {
     return destinationNumber && destinationNumber.length > 6;
   }, [destinationNumber]);
 
-  const inputContainer = {
-    boxSizing: "border-box",
-    display: "flex",
-    width: "100%",
-    backgroundColor: "rgb(255, 255, 255)",
-    boxShadow: "0 0 0 1px #8891aa",
-    borderRadius: "5px",
-    transition: "box-shadow 100ms ease-in",
-    cursor: "text",
-    height: "36px"
-  }
+
   const textAreaStyle = {
     boxSizing: "border-box",
     appearance: "none",
-    backgroundColor: "transparent",
     border: "none",
     borderRadius: "5px",
-    boxShadow: "none",
+    backgroundColor: "rgb(255, 255, 255)",
+    transition: "box-shadow 100ms ease-in",
+    boxShadow: "0 0 0 1px #8891aa",
     color: "inherit",
     cursor: "auto",
     display: "block",
@@ -73,9 +65,9 @@ function SendSmsForm({ numberInUse }) {
         <Label htmlFor="sendSmsBody" required>Message</Label>
         <Grid gutter={"space20"} marginBottom="space40">
           <Column span={10}>
-            <div style={inputContainer}>
-              <textarea style={textAreaStyle} id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
-            </div>
+            {/* <div style={inputContainer}> */}
+              <TextareaAutosize style={textAreaStyle} id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
+            {/* </div> */}
           </Column>
           <Column span={2}>
             <Button type={"submit"} disabled={!canSendMessages}>

From 572d132bc00ec52ccd07bc0a7f3b0a37714ff07d Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 26 Apr 2023 14:29:00 -0400
Subject: [PATCH 05/37] add to changeset

---
 .changeset/tender-geckos-accept.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.changeset/tender-geckos-accept.md b/.changeset/tender-geckos-accept.md
index e02b68f..6313f3e 100644
--- a/.changeset/tender-geckos-accept.md
+++ b/.changeset/tender-geckos-accept.md
@@ -3,3 +3,4 @@
 ---
 
 Preserve newlines in inbound and outbound sms.
+Add react text area auto resize component.

From 1912981a19b15f18e14a8db3fd8ca04f862a792c Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 26 Apr 2023 14:34:59 -0400
Subject: [PATCH 06/37] remove textarea container

---
 .../dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index ed9ea2b..f01acde 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -65,9 +65,7 @@ function SendSmsForm({ numberInUse }) {
         <Label htmlFor="sendSmsBody" required>Message</Label>
         <Grid gutter={"space20"} marginBottom="space40">
           <Column span={10}>
-            {/* <div style={inputContainer}> */}
-              <TextareaAutosize style={textAreaStyle} id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
-            {/* </div> */}
+              <TextareaAutosize minRows={1} style={textAreaStyle} id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
           </Column>
           <Column span={2}>
             <Button type={"submit"} disabled={!canSendMessages}>

From ff99ef4d0e95957ef14931552aab13a1b6239f39 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 3 May 2023 16:40:05 -0400
Subject: [PATCH 07/37] replace custom textarea styling with pasteb textarea
 component

---
 .../components/SendSmsForm/SendSmsForm.jsx    | 35 ++++---------------
 1 file changed, 7 insertions(+), 28 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index f01acde..9e6ce38 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -1,9 +1,8 @@
-import { useContext, useState, useMemo } from "react";
-import { Button, Input, Label, Box, Grid, Column } from "@twilio-paste/core";
+import { useContext, useState, useEffect, useMemo } from "react";
+import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column } from "@twilio-paste/core";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
 import { useSelector } from "react-redux";
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
-import TextareaAutosize from 'react-textarea-autosize';
 import MessageList from "./MessageList"
 
 function SendSmsForm({ numberInUse }) {
@@ -20,30 +19,6 @@ function SendSmsForm({ numberInUse }) {
   }, [destinationNumber]);
 
 
-  const textAreaStyle = {
-    boxSizing: "border-box",
-    appearance: "none",
-    border: "none",
-    borderRadius: "5px",
-    backgroundColor: "rgb(255, 255, 255)",
-    transition: "box-shadow 100ms ease-in",
-    boxShadow: "0 0 0 1px #8891aa",
-    color: "inherit",
-    cursor: "auto",
-    display: "block",
-    fontFamily: "inherit",
-    fontSize: "0.875rem",
-    fontWeight: "500",
-    lineHeight: "1.25rem",
-    margin: "0",
-    outline: "none",
-    padding: "0.5rem 0.75rem",
-    resize: "none",
-    width: "100%",
-    whiteSpace: "pre-wrap",
-  }
-
-
   // Handles the UI state for sending messages
   const sendIt = async (e) => {
     e.preventDefault()
@@ -63,9 +38,11 @@ function SendSmsForm({ numberInUse }) {
       />
       <form onSubmit={(e) => sendIt(e)} method={"GET"}>
         <Label htmlFor="sendSmsBody" required>Message</Label>
+
         <Grid gutter={"space20"} marginBottom="space40">
           <Column span={10}>
-              <TextareaAutosize minRows={1} style={textAreaStyle} id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
+            <TextArea resize="vertical" maxLength={1600} id="sendSmsBody" type="text" messageBody={messageBody} onChange={(e) => setMessageBody(e.target.value)} aria-describedby="send_sms_help_text" required />
+            <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
           </Column>
           <Column span={2}>
             <Button type={"submit"} disabled={!canSendMessages}>
@@ -74,6 +51,8 @@ function SendSmsForm({ numberInUse }) {
             </Button>
           </Column>
         </Grid>
+
+
       </form>
     </Box>
 

From 000b192e2ed84e2633b4bad8d12798c04a8eebbe Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 3 May 2023 16:42:30 -0400
Subject: [PATCH 08/37] remove external resizeable textarea component

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 68aa603..a449c7a 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,6 @@
     "turbo": "^1.2.16"
   },
   "dependencies": {
-    "react-textarea-autosize": "^8.4.1",
     "redux": "^4.2.1",
     "twilio-cli": "^5.5.0"
   }

From 3895a092ccd45b9b32b4e0120620082c950e36a6 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Tue, 16 May 2023 15:04:19 -0400
Subject: [PATCH 09/37] initial commit of replacing custom messagelog with
 chatlog

---
 .../src/components/SendSmsForm/MessageBubble.jsx      |  2 +-
 .../src/components/SendSmsForm/MessageList.jsx        | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/MessageBubble.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/MessageBubble.jsx
index 9c76a80..85ae925 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/MessageBubble.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/MessageBubble.jsx
@@ -14,7 +14,7 @@ function MessageBubble({ devPhoneName, message }) {
         <Box
           as="div"
           color={isFromDevPhone ? "colorTextInverse" : "colorText"}
-          backgroundColor={isFromDevPhone ? "colorBackgroundPrimary" : "colorBackground"}
+          backgroundColor={isFromDevPhone ? "colorBackgroundPrimary" : "colorBackgroundPrimary"}
           borderRadius="borderRadius20"
           borderTopRightRadius="borderRadius0"
           fontSize="fontSize30"
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
index 1eec63e..2fd731c 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
@@ -1,4 +1,4 @@
-import { Box, Flex, SkeletonLoader, Text } from "@twilio-paste/core"
+import { Box, Flex, SkeletonLoader, Text, ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem } from "@twilio-paste/core"
 import { useSelector } from "react-redux"
 import EmptyMessageList from "./EmptyMessageList";
 import MessageBubble from "./MessageBubble"
@@ -14,8 +14,15 @@ function MessageList({ devPhoneName }) {
                     <Box width={"100%"} paddingRight={"space100"} paddingBottom={"space40"} paddingLeft={"space40"} overflowY={'scroll'} overflowX={'hidden'}>
                         {messageList.length > 0 ?
                             messageList.map((message, i) => {
+                                const isFromDevPhone = message.author === devPhoneName;
                                 return (
-                                    <MessageBubble message={message} key={message.sid} devPhoneName={devPhoneName} />
+                                    <ChatMessage variant={!isFromDevPhone ? "outbound" : "inbound"}>
+                                        <ChatBubble
+                                        >
+                                            {message.body}
+                                        </ChatBubble>
+                                    </ChatMessage>
+                                    // <MessageBubble message={message} key={message.sid} devPhoneName={devPhoneName} />
                                 )
                             })
                             : <EmptyMessageList devPhoneNumber={numberInUse} />

From 14909400a4b0ff9efcc1a85f1520f9781e66211e Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 17 May 2023 09:18:29 -0400
Subject: [PATCH 10/37] upgrade paste version to 19.0.0

---
 packages/dev-phone-ui/package.json             |  2 +-
 .../components/SendSmsForm/MessageBubble.jsx   |  2 +-
 .../src/components/SendSmsForm/MessageList.jsx | 18 +++++++++++++-----
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/dev-phone-ui/package.json b/packages/dev-phone-ui/package.json
index 66a0cf6..71322f6 100644
--- a/packages/dev-phone-ui/package.json
+++ b/packages/dev-phone-ui/package.json
@@ -28,7 +28,7 @@
     "webpack-license-plugin": "^4.2.2"
   },
   "dependencies": {
-    "@twilio-paste/core": "^11.1.2",
+    "@twilio-paste/core": "^19.0.0",
     "@twilio-paste/icons": "^6.2.1",
     "@twilio/conversations": "^2.0.0",
     "@twilio/voice-sdk": "^2.1.0",
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/MessageBubble.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/MessageBubble.jsx
index 85ae925..9c76a80 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/MessageBubble.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/MessageBubble.jsx
@@ -14,7 +14,7 @@ function MessageBubble({ devPhoneName, message }) {
         <Box
           as="div"
           color={isFromDevPhone ? "colorTextInverse" : "colorText"}
-          backgroundColor={isFromDevPhone ? "colorBackgroundPrimary" : "colorBackgroundPrimary"}
+          backgroundColor={isFromDevPhone ? "colorBackgroundPrimary" : "colorBackground"}
           borderRadius="borderRadius20"
           borderTopRightRadius="borderRadius0"
           fontSize="fontSize30"
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
index 2fd731c..0d2f019 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
@@ -1,4 +1,5 @@
-import { Box, Flex, SkeletonLoader, Text, ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem } from "@twilio-paste/core"
+import { Box, Flex, SkeletonLoader, Text, ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem, Avatar } from "@twilio-paste/core"
+import { UserIcon } from '@twilio-paste/icons/esm/UserIcon';
 import { useSelector } from "react-redux"
 import EmptyMessageList from "./EmptyMessageList";
 import MessageBubble from "./MessageBubble"
@@ -17,10 +18,17 @@ function MessageList({ devPhoneName }) {
                                 const isFromDevPhone = message.author === devPhoneName;
                                 return (
                                     <ChatMessage variant={!isFromDevPhone ? "outbound" : "inbound"}>
-                                        <ChatBubble
-                                        >
-                                            {message.body}
-                                        </ChatBubble>
+                                        <Box as="div" width="size30" display="flex" justifyContent={isFromDevPhone ? "flex-end" : 'flex-start'} marginBottom="space30">
+                                            <ChatBubble>
+                                                {message.body}
+                                            </ChatBubble>
+                                            <ChatMessageMeta aria-label="said by Gibby Radki at 3:35 PM">
+                                                <ChatMessageMetaItem>
+                                                    <Avatar name="Gibby Radki" size="sizeIcon20" />
+                                                    Gibby Radki ・ 3:35 PM
+                                                </ChatMessageMetaItem>
+                                            </ChatMessageMeta>
+                                        </Box>
                                     </ChatMessage>
                                     // <MessageBubble message={message} key={message.sid} devPhoneName={devPhoneName} />
                                 )

From 47c985db8d6607f39ee16fd3bfe3cbe4fdd6b196 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Tue, 23 May 2023 10:51:17 -0400
Subject: [PATCH 11/37] add ChatLog component

---
 .../components/SendSmsForm/MessageList.jsx    | 57 +++++++++----------
 .../components/SendSmsForm/SendSmsForm.jsx    |  9 ++-
 2 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
index 0d2f019..2413bce 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
@@ -1,4 +1,4 @@
-import { Box, Flex, SkeletonLoader, Text, ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem, Avatar } from "@twilio-paste/core"
+import { Box, Flex, SkeletonLoader, Text, ChatLog, ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem, Avatar } from "@twilio-paste/core"
 import { UserIcon } from '@twilio-paste/icons/esm/UserIcon';
 import { useSelector } from "react-redux"
 import EmptyMessageList from "./EmptyMessageList";
@@ -10,34 +10,33 @@ function MessageList({ devPhoneName }) {
 
     return (
         messageList ?
-            <Box height={'size40'}>
-                <Flex vertical vAlignContent={"bottom"} height={"100%"}>
-                    <Box width={"100%"} paddingRight={"space100"} paddingBottom={"space40"} paddingLeft={"space40"} overflowY={'scroll'} overflowX={'hidden'}>
-                        {messageList.length > 0 ?
-                            messageList.map((message, i) => {
-                                const isFromDevPhone = message.author === devPhoneName;
-                                return (
-                                    <ChatMessage variant={!isFromDevPhone ? "outbound" : "inbound"}>
-                                        <Box as="div" width="size30" display="flex" justifyContent={isFromDevPhone ? "flex-end" : 'flex-start'} marginBottom="space30">
-                                            <ChatBubble>
-                                                {message.body}
-                                            </ChatBubble>
-                                            <ChatMessageMeta aria-label="said by Gibby Radki at 3:35 PM">
-                                                <ChatMessageMetaItem>
-                                                    <Avatar name="Gibby Radki" size="sizeIcon20" />
-                                                    Gibby Radki ・ 3:35 PM
-                                                </ChatMessageMetaItem>
-                                            </ChatMessageMeta>
-                                        </Box>
-                                    </ChatMessage>
-                                    // <MessageBubble message={message} key={message.sid} devPhoneName={devPhoneName} />
-                                )
-                            })
-                            : <EmptyMessageList devPhoneNumber={numberInUse} />
-                        }
-                    </Box>
-                </Flex>
-            </Box> : <SkeletonLoader height={"size20"} />
+            // Replace Box with Chat Log
+            <Box overflowY="scroll" height="size40" tabIndex={0}>
+                <ChatLog>
+                    {messageList.length > 0 ?
+                        messageList.map((message, i) => {
+                            const isFromDevPhone = message.author === devPhoneName;
+                            return (
+                                <ChatMessage variant={!isFromDevPhone ? "outbound" : "inbound"}> 
+                                        <ChatBubble>
+                                            {message.body}
+                                        </ChatBubble>
+                                        <ChatMessageMeta aria-label="said by Gibby Radki at 3:35 PM">
+                                            <ChatMessageMetaItem>
+                                                 <Avatar size="sizeIcon30" name={message.author} icon={UserIcon} />
+                                                {message.author}
+                                            </ChatMessageMetaItem>
+                                        </ChatMessageMeta>
+                            
+                                </ChatMessage>
+                                // <MessageBubble message={message} key={message.sid} devPhoneName={devPhoneName} />
+                            )
+                        })
+                        : <EmptyMessageList devPhoneNumber={numberInUse} />
+                    }
+                </ChatLog>
+            </Box>
+            : <SkeletonLoader height={"size20"} />
     )
 
 }
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index 9e6ce38..b436ea6 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -1,5 +1,6 @@
 import { useContext, useState, useEffect, useMemo } from "react";
 import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column } from "@twilio-paste/core";
+import { ChatComposer } from "@twilio-paste/core/chat-composer";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
 import { useSelector } from "react-redux";
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
@@ -31,6 +32,11 @@ function SendSmsForm({ numberInUse }) {
     }
   };
 
+
+  const handleChange = (e) => {
+    setMessageBody(e.target.value)
+  }
+
   return (
     <Box width="100%" backgroundColor={"colorBackgroundBody"}>
       <MessageList
@@ -41,7 +47,8 @@ function SendSmsForm({ numberInUse }) {
 
         <Grid gutter={"space20"} marginBottom="space40">
           <Column span={10}>
-            <TextArea resize="vertical" maxLength={1600} id="sendSmsBody" type="text" messageBody={messageBody} onChange={(e) => setMessageBody(e.target.value)} aria-describedby="send_sms_help_text" required />
+          <ChatComposer config={{namespace: ''}} onChange={handleChange} placeholder="Chat text" ariaLabel="A basic chat composer" />
+            <TextArea resize="vertical" maxLength={1600} id="sendSmsBody" type="text" onChange={(e) => setMessageBody(e.target.value)} aria-describedby="send_sms_help_text" required />
             <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
           </Column>
           <Column span={2}>

From 78ae1153e2c44161fac8677634d59eb3f180eda1 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Tue, 23 May 2023 15:41:44 -0400
Subject: [PATCH 12/37] add editor state and onChange for ChatComposer

---
 package.json                                  |  1 +
 .../components/SendSmsForm/MessageList.jsx    | 29 ++++----
 .../components/SendSmsForm/SendSmsForm.jsx    | 67 ++++++++++++-------
 3 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index a449c7a..f1b86be 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "turbo": "^1.2.16"
   },
   "dependencies": {
+    "@twilio-paste/lexical-library": "^2.0.0",
     "redux": "^4.2.1",
     "twilio-cli": "^5.5.0"
   }
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
index 2413bce..6128e54 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
@@ -1,4 +1,9 @@
-import { Box, Flex, SkeletonLoader, Text, ChatLog, ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem, Avatar } from "@twilio-paste/core"
+import {
+    Box, Flex, SkeletonLoader, 
+    Text, ChatLog, ChatMessage,
+    ChatBubble, ChatMessageMeta, ChatMessageMetaItem, 
+    Avatar
+} from "@twilio-paste/core"
 import { UserIcon } from '@twilio-paste/icons/esm/UserIcon';
 import { useSelector } from "react-redux"
 import EmptyMessageList from "./EmptyMessageList";
@@ -17,17 +22,17 @@ function MessageList({ devPhoneName }) {
                         messageList.map((message, i) => {
                             const isFromDevPhone = message.author === devPhoneName;
                             return (
-                                <ChatMessage variant={!isFromDevPhone ? "outbound" : "inbound"}> 
-                                        <ChatBubble>
-                                            {message.body}
-                                        </ChatBubble>
-                                        <ChatMessageMeta aria-label="said by Gibby Radki at 3:35 PM">
-                                            <ChatMessageMetaItem>
-                                                 <Avatar size="sizeIcon30" name={message.author} icon={UserIcon} />
-                                                {message.author}
-                                            </ChatMessageMetaItem>
-                                        </ChatMessageMeta>
-                            
+                                <ChatMessage variant={!isFromDevPhone ? "outbound" : "inbound"}>
+                                    <ChatBubble>
+                                        {message.body}
+                                    </ChatBubble>
+                                    <ChatMessageMeta aria-label="said by Gibby Radki at 3:35 PM">
+                                        <ChatMessageMetaItem>
+                                            <Avatar size="sizeIcon30" name={message.author} icon={UserIcon} />
+                                            {message.author}
+                                        </ChatMessageMetaItem>
+                                    </ChatMessageMeta>
+
                                 </ChatMessage>
                                 // <MessageBubble message={message} key={message.sid} devPhoneName={devPhoneName} />
                             )
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index b436ea6..8506487 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -1,8 +1,13 @@
-import { useContext, useState, useEffect, useMemo } from "react";
-import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column } from "@twilio-paste/core";
+import { useContext, useState, useEffect, useRef, useMemo } from "react";
+import { useSelector } from "react-redux";
+import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column, AutoScrollPlugin } from "@twilio-paste/core";
 import { ChatComposer } from "@twilio-paste/core/chat-composer";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
-import { useSelector } from "react-redux";
+import {
+  $getRoot,
+  $createParagraphNode,
+  $createTextNode
+} from "@twilio-paste/lexical-library";
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
 import MessageList from "./MessageList"
 
@@ -33,34 +38,44 @@ function SendSmsForm({ numberInUse }) {
   };
 
 
-  const handleChange = (e) => {
-    setMessageBody(e.target.value)
-  }
+  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}>
-          <ChatComposer config={{namespace: ''}} onChange={handleChange} placeholder="Chat text" ariaLabel="A basic chat composer" />
-            <TextArea resize="vertical" maxLength={1600} id="sendSmsBody" type="text" onChange={(e) => setMessageBody(e.target.value)} aria-describedby="send_sms_help_text" required />
-            <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
-          </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}
+          >
+          </ChatComposer>
+          <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
+        </Column>
+        <Column span={2}>
+          <Button onClick={sendIt} type={"submit"} disabled={!canSendMessages}>
+            <SendIcon decorative />
+            Send
+          </Button>
+        </Column>
+      </Grid>
     </Box>
 
   );

From ab909206d9f574b328a50e6f6bd108f4a71c68d0 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Tue, 23 May 2023 16:46:27 -0400
Subject: [PATCH 13/37] remove unused imports

---
 .../dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index 8506487..707a82f 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -4,9 +4,7 @@ import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column, AutoScroll
 import { ChatComposer } from "@twilio-paste/core/chat-composer";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
 import {
-  $getRoot,
-  $createParagraphNode,
-  $createTextNode
+  $getRoot
 } from "@twilio-paste/lexical-library";
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
 import MessageList from "./MessageList"

From 673e85884625be147078dc6587fb8a756cbb7a8d Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Thu, 8 Jun 2023 16:26:46 -0400
Subject: [PATCH 14/37] replace onChange event listener with CTA button click
 for form submission

---
 .../components/SendSmsForm/SendSmsForm.jsx    | 57 +++++++++++++++----
 1 file changed, 47 insertions(+), 10 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index 707a82f..db3b6df 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -1,15 +1,16 @@
-import { useContext, useState, useEffect, useRef, useMemo } from "react";
+import React, { useContext, useState, useEffect, useRef, useMemo } from "react";
 import { useSelector } from "react-redux";
 import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column, AutoScrollPlugin } from "@twilio-paste/core";
 import { ChatComposer } from "@twilio-paste/core/chat-composer";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
-import {
-  $getRoot
-} from "@twilio-paste/lexical-library";
+import {$getRoot, $createParagraphNode, $createTextNode} from '@twilio-paste/lexical-library';
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
 import MessageList from "./MessageList"
+import { CLEAR_HISTORY_COMMAND } from "lexical";
 
 function SendSmsForm({ numberInUse }) {
+  const myRef = React.createRef()
+
   const [messageBody, setMessageBody] = useState('');
 
   const channelData = useSelector(state => state.channelData)
@@ -22,10 +23,37 @@ function SendSmsForm({ numberInUse }) {
     return destinationNumber && destinationNumber.length > 6;
   }, [destinationNumber]);
 
+  const editorStateRef = useRef();
+
+  // const messageSent = useMemo(() =>{
+  //   return 
+  // })
+
+  const disabledInitialText = () => {
+    const root = $getRoot();
+
+    if (root.getFirstChild() !== null) {
+      const paragraph = $createParagraphNode();
+      paragraph.append($createTextNode('').toggleFormat('italic'));
+  
+      root.append(paragraph);
+    }
+  };
 
-  // Handles the UI state for sending messages
-  const sendIt = async (e) => {
-    e.preventDefault()
+  // Hansdles the UI state for sending messages
+  const sendIt = async (editorState) => {
+    console.log("ROOT", editorState);
+    editorState.read(() =>{
+      const root = $getRoot();
+      setMessageBody(root.getTextContent())
+    })
+    // editorState.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
+    // editorState.read(() => {
+    //   const root = $getRoot();
+    //   setMessageBody(root.getTextContent());
+    // });
+    // console.log("Current editor state", editorStateRef)
+    // e.preventDefault()
     if (canSendMessages) {
       sendSms(numberInUse, destinationNumber, messageBody);
       await sendMessage(messageBody)
@@ -33,6 +61,7 @@ function SendSmsForm({ numberInUse }) {
     } else {
       setShowWarning(true)
     }
+
   };
 
 
@@ -45,7 +74,10 @@ function SendSmsForm({ numberInUse }) {
 
 
   return (
-    <Box width="100%" backgroundColor={"default"}>
+    // create an event listener that looks for a submission and then clears the editor state
+    // component will need to recognize thaat the message body become null and we'll need to null out the chatcomposer
+   
+    <Box  width="100%" backgroundColor={"default"}>
       <MessageList
         devPhoneName={channelData.devPhoneName}
       />
@@ -55,6 +87,7 @@ function SendSmsForm({ numberInUse }) {
         <Column span={10}>
           <ChatComposer
             config={{
+              editorState: disabledInitialText,
               namespace: "send_sms",
               onError: (e) => {
                 throw e;
@@ -62,13 +95,17 @@ function SendSmsForm({ numberInUse }) {
             }}
             placeholder="Chat text"
             ariaLabel="A basic chat composer"
-            onChange={myOnChange}
+            onChange={editorState => editorStateRef.current = editorState}
           >
           </ChatComposer>
           <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
         </Column>
         <Column span={2}>
-          <Button onClick={sendIt} type={"submit"} disabled={!canSendMessages}>
+          <Button onClick={() => {
+            if(editorStateRef.current) {
+              sendIt(editorStateRef.current)
+            }
+          }} type={"submit"} disabled={!canSendMessages}>
             <SendIcon decorative />
             Send
           </Button>

From f038db4a35ea1dadc14b9ccf1579fa1875657a82 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Mon, 12 Jun 2023 22:24:27 -0400
Subject: [PATCH 15/37] revert to onChange event and remove aria-label
 placeholder data

---
 .../components/SendSmsForm/MessageList.jsx    |  4 +--
 .../components/SendSmsForm/SendSmsForm.jsx    | 35 ++++++-------------
 2 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
index 6128e54..86cd200 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
@@ -7,7 +7,7 @@ import {
 import { UserIcon } from '@twilio-paste/icons/esm/UserIcon';
 import { useSelector } from "react-redux"
 import EmptyMessageList from "./EmptyMessageList";
-import MessageBubble from "./MessageBubble"
+
 
 function MessageList({ devPhoneName }) {
     const messageList = useSelector(state => state.messageList)
@@ -26,7 +26,7 @@ function MessageList({ devPhoneName }) {
                                     <ChatBubble>
                                         {message.body}
                                     </ChatBubble>
-                                    <ChatMessageMeta aria-label="said by Gibby Radki at 3:35 PM">
+                                    <ChatMessageMeta aria-label="">
                                         <ChatMessageMetaItem>
                                             <Avatar size="sizeIcon30" name={message.author} icon={UserIcon} />
                                             {message.author}
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index db3b6df..0de3c2b 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -25,10 +25,6 @@ function SendSmsForm({ numberInUse }) {
 
   const editorStateRef = useRef();
 
-  // const messageSent = useMemo(() =>{
-  //   return 
-  // })
-
   const disabledInitialText = () => {
     const root = $getRoot();
 
@@ -40,20 +36,8 @@ function SendSmsForm({ numberInUse }) {
     }
   };
 
-  // Hansdles the UI state for sending messages
-  const sendIt = async (editorState) => {
-    console.log("ROOT", editorState);
-    editorState.read(() =>{
-      const root = $getRoot();
-      setMessageBody(root.getTextContent())
-    })
-    // editorState.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
-    // editorState.read(() => {
-    //   const root = $getRoot();
-    //   setMessageBody(root.getTextContent());
-    // });
-    // console.log("Current editor state", editorStateRef)
-    // e.preventDefault()
+  const sendIt = async (e) => {
+    e.preventDefault()
     if (canSendMessages) {
       sendSms(numberInUse, destinationNumber, messageBody);
       await sendMessage(messageBody)
@@ -61,10 +45,8 @@ function SendSmsForm({ numberInUse }) {
     } else {
       setShowWarning(true)
     }
-
   };
 
-
   const myOnChange = (editorState) => {
     editorState.read(() => {
       const root = $getRoot();
@@ -85,9 +67,8 @@ function SendSmsForm({ numberInUse }) {
 
       <Grid gutter={"space20"} marginBottom="space40">
         <Column span={10}>
-          <ChatComposer
+        <ChatComposer
             config={{
-              editorState: disabledInitialText,
               namespace: "send_sms",
               onError: (e) => {
                 throw e;
@@ -95,17 +76,21 @@ function SendSmsForm({ numberInUse }) {
             }}
             placeholder="Chat text"
             ariaLabel="A basic chat composer"
-            onChange={editorState => editorStateRef.current = editorState}
+            onChange={myOnChange}
           >
           </ChatComposer>
           <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
         </Column>
         <Column span={2}>
-          <Button onClick={() => {
+          {/* <Button onClick={() => {
             if(editorStateRef.current) {
               sendIt(editorStateRef.current)
             }
-          }} type={"submit"} disabled={!canSendMessages}>
+          }} type={"submit"} disabled={!canSendMessages}> 
+            <SendIcon decorative />
+            Send
+          </Button>*/}
+          <Button onClick={sendIt} type={"submit"} disabled={!canSendMessages}>
             <SendIcon decorative />
             Send
           </Button>

From 1697505e224eb20255e91995118f6a516290a215 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Mon, 12 Jun 2023 22:51:41 -0400
Subject: [PATCH 16/37] upgrade react to 18, icons to 11.1 and locally define
 async in PhoneNumPicker component useEffect callback

---
 package.json                                                | 2 ++
 packages/dev-phone-ui/package.json                          | 6 +++---
 .../src/components/PhoneNumberPicker/PhoneNumberPicker.jsx  | 6 ++++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index f1b86be..5de1f83 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,8 @@
   },
   "dependencies": {
     "@twilio-paste/lexical-library": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "redux": "^4.2.1",
     "twilio-cli": "^5.5.0"
   }
diff --git a/packages/dev-phone-ui/package.json b/packages/dev-phone-ui/package.json
index 71322f6..d4d1c4c 100644
--- a/packages/dev-phone-ui/package.json
+++ b/packages/dev-phone-ui/package.json
@@ -29,14 +29,14 @@
   },
   "dependencies": {
     "@twilio-paste/core": "^19.0.0",
-    "@twilio-paste/icons": "^6.2.1",
+    "@twilio-paste/icons": "^11.1.0",
     "@twilio/conversations": "^2.0.0",
     "@twilio/voice-sdk": "^2.1.0",
     "date-fns": "^2.28.0",
     "konami": "^1.6.3",
     "process": "^0.11.10",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
diff --git a/packages/dev-phone-ui/src/components/PhoneNumberPicker/PhoneNumberPicker.jsx b/packages/dev-phone-ui/src/components/PhoneNumberPicker/PhoneNumberPicker.jsx
index 077cdcd..85eaae2 100644
--- a/packages/dev-phone-ui/src/components/PhoneNumberPicker/PhoneNumberPicker.jsx
+++ b/packages/dev-phone-ui/src/components/PhoneNumberPicker/PhoneNumberPicker.jsx
@@ -50,7 +50,8 @@ function PhoneNumberPicker({ configureNumberInUse, phoneNumbers }) {
   const [twilioPns, setTwilioPns] = useState(null);
   const [selectedPn, setSelectedPn] = useState(null);
 
-  useEffect(async () => {
+  useEffect( () => {
+    const asyncFn = async() => {
     if (!selectedPn) {
       try {
         const response = await fetch('/phone-numbers')
@@ -71,7 +72,8 @@ function PhoneNumberPicker({ configureNumberInUse, phoneNumbers }) {
         console.error(error)
       }
     }
-
+  }
+asyncFn()
   }, [selectedPn]);
 
   if (twilioPns === null) {

From 4010387d487b45ec11316f9e78a2562f7fbf82fd Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 14 Jun 2023 12:25:49 -0400
Subject: [PATCH 17/37] revert from paste chatlog to custom messaging component

---
 .../components/SendSmsForm/MessageList.jsx    | 51 ++++++-------------
 1 file changed, 16 insertions(+), 35 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
index 86cd200..1eec63e 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
@@ -1,13 +1,7 @@
-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, Flex, SkeletonLoader, Text } from "@twilio-paste/core"
 import { useSelector } from "react-redux"
 import EmptyMessageList from "./EmptyMessageList";
-
+import MessageBubble from "./MessageBubble"
 
 function MessageList({ devPhoneName }) {
     const messageList = useSelector(state => state.messageList)
@@ -15,33 +9,20 @@ function MessageList({ devPhoneName }) {
 
     return (
         messageList ?
-            // Replace Box with Chat Log
-            <Box overflowY="scroll" height="size40" tabIndex={0}>
-                <ChatLog>
-                    {messageList.length > 0 ?
-                        messageList.map((message, i) => {
-                            const isFromDevPhone = message.author === devPhoneName;
-                            return (
-                                <ChatMessage variant={!isFromDevPhone ? "outbound" : "inbound"}>
-                                    <ChatBubble>
-                                        {message.body}
-                                    </ChatBubble>
-                                    <ChatMessageMeta aria-label="">
-                                        <ChatMessageMetaItem>
-                                            <Avatar size="sizeIcon30" name={message.author} icon={UserIcon} />
-                                            {message.author}
-                                        </ChatMessageMetaItem>
-                                    </ChatMessageMeta>
-
-                                </ChatMessage>
-                                // <MessageBubble message={message} key={message.sid} devPhoneName={devPhoneName} />
-                            )
-                        })
-                        : <EmptyMessageList devPhoneNumber={numberInUse} />
-                    }
-                </ChatLog>
-            </Box>
-            : <SkeletonLoader height={"size20"} />
+            <Box height={'size40'}>
+                <Flex vertical vAlignContent={"bottom"} height={"100%"}>
+                    <Box width={"100%"} paddingRight={"space100"} paddingBottom={"space40"} paddingLeft={"space40"} overflowY={'scroll'} overflowX={'hidden'}>
+                        {messageList.length > 0 ?
+                            messageList.map((message, i) => {
+                                return (
+                                    <MessageBubble message={message} key={message.sid} devPhoneName={devPhoneName} />
+                                )
+                            })
+                            : <EmptyMessageList devPhoneNumber={numberInUse} />
+                        }
+                    </Box>
+                </Flex>
+            </Box> : <SkeletonLoader height={"size20"} />
     )
 
 }

From 0ef9026d1d06530292027c60f15f85a0077cc534 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Fri, 1 Sep 2023 12:26:40 -0400
Subject: [PATCH 18/37] upgrade paste library and add ClearEditorPlugin

---
 packages/dev-phone-ui/package.json            |  4 +--
 .../components/SendSmsForm/SendSmsForm.jsx    | 31 ++++---------------
 2 files changed, 8 insertions(+), 27 deletions(-)

diff --git a/packages/dev-phone-ui/package.json b/packages/dev-phone-ui/package.json
index d4d1c4c..29338ef 100644
--- a/packages/dev-phone-ui/package.json
+++ b/packages/dev-phone-ui/package.json
@@ -28,8 +28,8 @@
     "webpack-license-plugin": "^4.2.2"
   },
   "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",
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index 0de3c2b..af2e349 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -3,9 +3,10 @@ import { useSelector } from "react-redux";
 import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column, AutoScrollPlugin } from "@twilio-paste/core";
 import { ChatComposer } from "@twilio-paste/core/chat-composer";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
-import {$getRoot, $createParagraphNode, $createTextNode} from '@twilio-paste/lexical-library';
+import { $getRoot, $createParagraphNode, $createTextNode } from '@twilio-paste/lexical-library';
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
 import MessageList from "./MessageList"
+import { ClearEditorPlugin } from "@tw2";
 import { CLEAR_HISTORY_COMMAND } from "lexical";
 
 function SendSmsForm({ numberInUse }) {
@@ -23,19 +24,6 @@ function SendSmsForm({ numberInUse }) {
     return destinationNumber && destinationNumber.length > 6;
   }, [destinationNumber]);
 
-  const editorStateRef = useRef();
-
-  const disabledInitialText = () => {
-    const root = $getRoot();
-
-    if (root.getFirstChild() !== null) {
-      const paragraph = $createParagraphNode();
-      paragraph.append($createTextNode('').toggleFormat('italic'));
-  
-      root.append(paragraph);
-    }
-  };
-
   const sendIt = async (e) => {
     e.preventDefault()
     if (canSendMessages) {
@@ -58,8 +46,8 @@ function SendSmsForm({ numberInUse }) {
   return (
     // create an event listener that looks for a submission and then clears the editor state
     // component will need to recognize thaat the message body become null and we'll need to null out the chatcomposer
-   
-    <Box  width="100%" backgroundColor={"default"}>
+
+    <Box width="100%" backgroundColor={"default"}>
       <MessageList
         devPhoneName={channelData.devPhoneName}
       />
@@ -67,7 +55,7 @@ function SendSmsForm({ numberInUse }) {
 
       <Grid gutter={"space20"} marginBottom="space40">
         <Column span={10}>
-        <ChatComposer
+          <ChatComposer
             config={{
               namespace: "send_sms",
               onError: (e) => {
@@ -78,18 +66,11 @@ function SendSmsForm({ numberInUse }) {
             ariaLabel="A basic chat composer"
             onChange={myOnChange}
           >
+            <ClearEditorPlugin />
           </ChatComposer>
           <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
         </Column>
         <Column span={2}>
-          {/* <Button onClick={() => {
-            if(editorStateRef.current) {
-              sendIt(editorStateRef.current)
-            }
-          }} type={"submit"} disabled={!canSendMessages}> 
-            <SendIcon decorative />
-            Send
-          </Button>*/}
           <Button onClick={sendIt} type={"submit"} disabled={!canSendMessages}>
             <SendIcon decorative />
             Send

From c05e27515b2c8e6958f1d21379069db2c692b61f Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Mon, 24 Apr 2023 17:03:09 -0400
Subject: [PATCH 19/37] first attempt at fixing newline issue from message
 bodies

---
 package.json                                  |  4 ++
 .../components/SendSmsForm/SendSmsForm.jsx    | 41 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index e6502bb..f6aa149 100644
--- a/package.json
+++ b/package.json
@@ -30,5 +30,9 @@
   "devDependencies": {
     "@changesets/cli": "^2.23.0",
     "turbo": "^1.2.16"
+  },
+  "dependencies": {
+    "redux": "^4.2.1",
+    "twilio-cli": "^5.5.0"
   }
 }
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index beeacfd..4375712 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -12,14 +12,49 @@ function SendSmsForm({ numberInUse }) {
   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]);
 
+  const inputContainer = {
+    boxSizing: "border-box",
+    display: "flex",
+    width: "100%",
+    backgroundColor: "rgb(255, 255, 255)",
+    boxShadow: "0 0 0 1px #8891aa",
+    borderRadius: "5px",
+    transition: "box-shadow 100ms ease-in",
+    cursor: "text",
+    height: "36px"
+  }
+  const textAreaStyle = {
+    boxSizing: "border-box",
+    appearance: "none",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "5px",
+    boxShadow: "none",
+    color: "inherit",
+    cursor: "auto",
+    display: "block",
+    fontFamily: "inherit",
+    fontSize: "0.875rem",
+    fontWeight: "500",
+    lineHeight: "1.25rem",
+    margin: "0",
+    outline: "none",
+    padding: "0.5rem 0.75rem",
+    resize: "none",
+    width: "100%",
+    whiteSpace: "pre-wrap",
+  }
+
+
   // Handles the UI state for sending messages
   const sendIt = async (e) => {
+    formatMessage(messageBody)
     e.preventDefault()
     if (canSendMessages) {
       sendSms(numberInUse, destinationNumber, messageBody);
@@ -39,7 +74,9 @@ function SendSmsForm({ numberInUse }) {
         <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)} />
+            <div style={inputContainer}>
+              <textarea style={textAreaStyle} id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
+            </div>
           </Column>
           <Column span={2}>
             <Button type={"submit"} disabled={!canSendMessages}>

From 0c6bf1f40552f33b9b3e3a2b3159e75229724e94 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 26 Apr 2023 10:16:56 -0400
Subject: [PATCH 20/37] remove format method call

add changeset and update changeset version
---
 .changeset/tender-geckos-accept.md                           | 5 +++++
 package.json                                                 | 2 +-
 .../dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx  | 1 -
 3 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tender-geckos-accept.md

diff --git a/.changeset/tender-geckos-accept.md b/.changeset/tender-geckos-accept.md
new file mode 100644
index 0000000..e02b68f
--- /dev/null
+++ b/.changeset/tender-geckos-accept.md
@@ -0,0 +1,5 @@
+---
+"@twilio-labs/dev-phone-ui": patch
+---
+
+Preserve newlines in inbound and outbound sms.
diff --git a/package.json b/package.json
index f6aa149..a449c7a 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "packages/dev-phone-ui"
   ],
   "devDependencies": {
-    "@changesets/cli": "^2.23.0",
+    "@changesets/cli": "^2.26.1",
     "turbo": "^1.2.16"
   },
   "dependencies": {
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index 4375712..47042ea 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -54,7 +54,6 @@ function SendSmsForm({ numberInUse }) {
 
   // Handles the UI state for sending messages
   const sendIt = async (e) => {
-    formatMessage(messageBody)
     e.preventDefault()
     if (canSendMessages) {
       sendSms(numberInUse, destinationNumber, messageBody);

From 42406a45b7092e6a592a433d7f6d803a4ff08806 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 26 Apr 2023 14:27:54 -0400
Subject: [PATCH 21/37] adding text area auto size component

---
 package.json                                  |  1 +
 .../components/SendSmsForm/SendSmsForm.jsx    | 24 +++++++------------
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index a449c7a..68aa603 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "turbo": "^1.2.16"
   },
   "dependencies": {
+    "react-textarea-autosize": "^8.4.1",
     "redux": "^4.2.1",
     "twilio-cli": "^5.5.0"
   }
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index 47042ea..ed9ea2b 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -3,6 +3,7 @@ import { Button, Input, Label, Box, Grid, Column } from "@twilio-paste/core";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
 import { useSelector } from "react-redux";
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
+import TextareaAutosize from 'react-textarea-autosize';
 import MessageList from "./MessageList"
 
 function SendSmsForm({ numberInUse }) {
@@ -18,24 +19,15 @@ function SendSmsForm({ numberInUse }) {
     return destinationNumber && destinationNumber.length > 6;
   }, [destinationNumber]);
 
-  const inputContainer = {
-    boxSizing: "border-box",
-    display: "flex",
-    width: "100%",
-    backgroundColor: "rgb(255, 255, 255)",
-    boxShadow: "0 0 0 1px #8891aa",
-    borderRadius: "5px",
-    transition: "box-shadow 100ms ease-in",
-    cursor: "text",
-    height: "36px"
-  }
+
   const textAreaStyle = {
     boxSizing: "border-box",
     appearance: "none",
-    backgroundColor: "transparent",
     border: "none",
     borderRadius: "5px",
-    boxShadow: "none",
+    backgroundColor: "rgb(255, 255, 255)",
+    transition: "box-shadow 100ms ease-in",
+    boxShadow: "0 0 0 1px #8891aa",
     color: "inherit",
     cursor: "auto",
     display: "block",
@@ -73,9 +65,9 @@ function SendSmsForm({ numberInUse }) {
         <Label htmlFor="sendSmsBody" required>Message</Label>
         <Grid gutter={"space20"} marginBottom="space40">
           <Column span={10}>
-            <div style={inputContainer}>
-              <textarea style={textAreaStyle} id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
-            </div>
+            {/* <div style={inputContainer}> */}
+              <TextareaAutosize style={textAreaStyle} id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
+            {/* </div> */}
           </Column>
           <Column span={2}>
             <Button type={"submit"} disabled={!canSendMessages}>

From 05ecf19bad85b2484a63656fcda7e4dc1b87c6c5 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 26 Apr 2023 14:29:00 -0400
Subject: [PATCH 22/37] add to changeset

---
 .changeset/tender-geckos-accept.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.changeset/tender-geckos-accept.md b/.changeset/tender-geckos-accept.md
index e02b68f..6313f3e 100644
--- a/.changeset/tender-geckos-accept.md
+++ b/.changeset/tender-geckos-accept.md
@@ -3,3 +3,4 @@
 ---
 
 Preserve newlines in inbound and outbound sms.
+Add react text area auto resize component.

From 623b60ebb270161462faaac75acc557ad2babfe3 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 26 Apr 2023 14:34:59 -0400
Subject: [PATCH 23/37] remove textarea container

---
 .../dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index ed9ea2b..f01acde 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -65,9 +65,7 @@ function SendSmsForm({ numberInUse }) {
         <Label htmlFor="sendSmsBody" required>Message</Label>
         <Grid gutter={"space20"} marginBottom="space40">
           <Column span={10}>
-            {/* <div style={inputContainer}> */}
-              <TextareaAutosize style={textAreaStyle} id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
-            {/* </div> */}
+              <TextareaAutosize minRows={1} style={textAreaStyle} id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
           </Column>
           <Column span={2}>
             <Button type={"submit"} disabled={!canSendMessages}>

From 5eb5800754fcb8327bdaa5c5c8214bc6e4c79761 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 3 May 2023 16:40:05 -0400
Subject: [PATCH 24/37] replace custom textarea styling with pasteb textarea
 component

---
 .../components/SendSmsForm/SendSmsForm.jsx    | 35 ++++---------------
 1 file changed, 7 insertions(+), 28 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index f01acde..9e6ce38 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -1,9 +1,8 @@
-import { useContext, useState, useMemo } from "react";
-import { Button, Input, Label, Box, Grid, Column } from "@twilio-paste/core";
+import { useContext, useState, useEffect, useMemo } from "react";
+import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column } from "@twilio-paste/core";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
 import { useSelector } from "react-redux";
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
-import TextareaAutosize from 'react-textarea-autosize';
 import MessageList from "./MessageList"
 
 function SendSmsForm({ numberInUse }) {
@@ -20,30 +19,6 @@ function SendSmsForm({ numberInUse }) {
   }, [destinationNumber]);
 
 
-  const textAreaStyle = {
-    boxSizing: "border-box",
-    appearance: "none",
-    border: "none",
-    borderRadius: "5px",
-    backgroundColor: "rgb(255, 255, 255)",
-    transition: "box-shadow 100ms ease-in",
-    boxShadow: "0 0 0 1px #8891aa",
-    color: "inherit",
-    cursor: "auto",
-    display: "block",
-    fontFamily: "inherit",
-    fontSize: "0.875rem",
-    fontWeight: "500",
-    lineHeight: "1.25rem",
-    margin: "0",
-    outline: "none",
-    padding: "0.5rem 0.75rem",
-    resize: "none",
-    width: "100%",
-    whiteSpace: "pre-wrap",
-  }
-
-
   // Handles the UI state for sending messages
   const sendIt = async (e) => {
     e.preventDefault()
@@ -63,9 +38,11 @@ function SendSmsForm({ numberInUse }) {
       />
       <form onSubmit={(e) => sendIt(e)} method={"GET"}>
         <Label htmlFor="sendSmsBody" required>Message</Label>
+
         <Grid gutter={"space20"} marginBottom="space40">
           <Column span={10}>
-              <TextareaAutosize minRows={1} style={textAreaStyle} id="sendSmsBody" type="text" value={messageBody} onChange={(e) => setMessageBody(e.target.value)} />
+            <TextArea resize="vertical" maxLength={1600} id="sendSmsBody" type="text" messageBody={messageBody} onChange={(e) => setMessageBody(e.target.value)} aria-describedby="send_sms_help_text" required />
+            <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
           </Column>
           <Column span={2}>
             <Button type={"submit"} disabled={!canSendMessages}>
@@ -74,6 +51,8 @@ function SendSmsForm({ numberInUse }) {
             </Button>
           </Column>
         </Grid>
+
+
       </form>
     </Box>
 

From 3baf128e3803ef56b40ace8659b5bd7a1944151a Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 3 May 2023 16:42:30 -0400
Subject: [PATCH 25/37] remove external resizeable textarea component

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 68aa603..a449c7a 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,6 @@
     "turbo": "^1.2.16"
   },
   "dependencies": {
-    "react-textarea-autosize": "^8.4.1",
     "redux": "^4.2.1",
     "twilio-cli": "^5.5.0"
   }

From 671c7acd8cccc4d2ccbe67d38e57658ad90fcd40 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Tue, 23 May 2023 10:51:17 -0400
Subject: [PATCH 26/37] add ChatLog component

---
 .../src/components/SendSmsForm/MessageList.jsx           | 7 +------
 .../src/components/SendSmsForm/SendSmsForm.jsx           | 9 ++++++++-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
index d4a6f1a..53644f3 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
@@ -1,9 +1,4 @@
-import {
-    Box, Flex, SkeletonLoader, 
-    Text, ChatLog, ChatMessage,
-    ChatBubble, ChatMessageMeta, ChatMessageMetaItem, 
-    Avatar
-} from "@twilio-paste/core"
+import { Box, Flex, SkeletonLoader, Text, ChatLog, ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem, Avatar } from "@twilio-paste/core"
 import { UserIcon } from '@twilio-paste/icons/esm/UserIcon';
 import { useSelector } from "react-redux"
 import EmptyMessageList from "./EmptyMessageList";
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index 9e6ce38..b436ea6 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -1,5 +1,6 @@
 import { useContext, useState, useEffect, useMemo } from "react";
 import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column } from "@twilio-paste/core";
+import { ChatComposer } from "@twilio-paste/core/chat-composer";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
 import { useSelector } from "react-redux";
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
@@ -31,6 +32,11 @@ function SendSmsForm({ numberInUse }) {
     }
   };
 
+
+  const handleChange = (e) => {
+    setMessageBody(e.target.value)
+  }
+
   return (
     <Box width="100%" backgroundColor={"colorBackgroundBody"}>
       <MessageList
@@ -41,7 +47,8 @@ function SendSmsForm({ numberInUse }) {
 
         <Grid gutter={"space20"} marginBottom="space40">
           <Column span={10}>
-            <TextArea resize="vertical" maxLength={1600} id="sendSmsBody" type="text" messageBody={messageBody} onChange={(e) => setMessageBody(e.target.value)} aria-describedby="send_sms_help_text" required />
+          <ChatComposer config={{namespace: ''}} onChange={handleChange} placeholder="Chat text" ariaLabel="A basic chat composer" />
+            <TextArea resize="vertical" maxLength={1600} id="sendSmsBody" type="text" onChange={(e) => setMessageBody(e.target.value)} aria-describedby="send_sms_help_text" required />
             <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
           </Column>
           <Column span={2}>

From 1a289a3d0ed25be38fd0247b58f591bb393b785f Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Tue, 23 May 2023 15:41:44 -0400
Subject: [PATCH 27/37] add editor state and onChange for ChatComposer

---
 package.json                                  |  1 +
 .../components/SendSmsForm/MessageList.jsx    |  7 +-
 .../components/SendSmsForm/SendSmsForm.jsx    | 67 ++++++++++++-------
 3 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index a449c7a..f1b86be 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "turbo": "^1.2.16"
   },
   "dependencies": {
+    "@twilio-paste/lexical-library": "^2.0.0",
     "redux": "^4.2.1",
     "twilio-cli": "^5.5.0"
   }
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
index 53644f3..d4a6f1a 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
@@ -1,4 +1,9 @@
-import { Box, Flex, SkeletonLoader, Text, ChatLog, ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem, Avatar } from "@twilio-paste/core"
+import {
+    Box, Flex, SkeletonLoader, 
+    Text, ChatLog, ChatMessage,
+    ChatBubble, ChatMessageMeta, ChatMessageMetaItem, 
+    Avatar
+} from "@twilio-paste/core"
 import { UserIcon } from '@twilio-paste/icons/esm/UserIcon';
 import { useSelector } from "react-redux"
 import EmptyMessageList from "./EmptyMessageList";
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index b436ea6..8506487 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -1,8 +1,13 @@
-import { useContext, useState, useEffect, useMemo } from "react";
-import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column } from "@twilio-paste/core";
+import { useContext, useState, useEffect, useRef, useMemo } from "react";
+import { useSelector } from "react-redux";
+import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column, AutoScrollPlugin } from "@twilio-paste/core";
 import { ChatComposer } from "@twilio-paste/core/chat-composer";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
-import { useSelector } from "react-redux";
+import {
+  $getRoot,
+  $createParagraphNode,
+  $createTextNode
+} from "@twilio-paste/lexical-library";
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
 import MessageList from "./MessageList"
 
@@ -33,34 +38,44 @@ function SendSmsForm({ numberInUse }) {
   };
 
 
-  const handleChange = (e) => {
-    setMessageBody(e.target.value)
-  }
+  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}>
-          <ChatComposer config={{namespace: ''}} onChange={handleChange} placeholder="Chat text" ariaLabel="A basic chat composer" />
-            <TextArea resize="vertical" maxLength={1600} id="sendSmsBody" type="text" onChange={(e) => setMessageBody(e.target.value)} aria-describedby="send_sms_help_text" required />
-            <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
-          </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}
+          >
+          </ChatComposer>
+          <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
+        </Column>
+        <Column span={2}>
+          <Button onClick={sendIt} type={"submit"} disabled={!canSendMessages}>
+            <SendIcon decorative />
+            Send
+          </Button>
+        </Column>
+      </Grid>
     </Box>
 
   );

From 9fa63c7ae9caee767950be121ec85cc1fde77339 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Tue, 23 May 2023 16:46:27 -0400
Subject: [PATCH 28/37] remove unused imports

---
 .../dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index 8506487..707a82f 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -4,9 +4,7 @@ import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column, AutoScroll
 import { ChatComposer } from "@twilio-paste/core/chat-composer";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
 import {
-  $getRoot,
-  $createParagraphNode,
-  $createTextNode
+  $getRoot
 } from "@twilio-paste/lexical-library";
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
 import MessageList from "./MessageList"

From 462fe09d8ea0ab4e541e6e3a4be7fb2522d6604f Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Thu, 8 Jun 2023 16:26:46 -0400
Subject: [PATCH 29/37] replace onChange event listener with CTA button click
 for form submission

---
 .../components/SendSmsForm/SendSmsForm.jsx    | 57 +++++++++++++++----
 1 file changed, 47 insertions(+), 10 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index 707a82f..db3b6df 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -1,15 +1,16 @@
-import { useContext, useState, useEffect, useRef, useMemo } from "react";
+import React, { useContext, useState, useEffect, useRef, useMemo } from "react";
 import { useSelector } from "react-redux";
 import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column, AutoScrollPlugin } from "@twilio-paste/core";
 import { ChatComposer } from "@twilio-paste/core/chat-composer";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
-import {
-  $getRoot
-} from "@twilio-paste/lexical-library";
+import {$getRoot, $createParagraphNode, $createTextNode} from '@twilio-paste/lexical-library';
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
 import MessageList from "./MessageList"
+import { CLEAR_HISTORY_COMMAND } from "lexical";
 
 function SendSmsForm({ numberInUse }) {
+  const myRef = React.createRef()
+
   const [messageBody, setMessageBody] = useState('');
 
   const channelData = useSelector(state => state.channelData)
@@ -22,10 +23,37 @@ function SendSmsForm({ numberInUse }) {
     return destinationNumber && destinationNumber.length > 6;
   }, [destinationNumber]);
 
+  const editorStateRef = useRef();
+
+  // const messageSent = useMemo(() =>{
+  //   return 
+  // })
+
+  const disabledInitialText = () => {
+    const root = $getRoot();
+
+    if (root.getFirstChild() !== null) {
+      const paragraph = $createParagraphNode();
+      paragraph.append($createTextNode('').toggleFormat('italic'));
+  
+      root.append(paragraph);
+    }
+  };
 
-  // Handles the UI state for sending messages
-  const sendIt = async (e) => {
-    e.preventDefault()
+  // Hansdles the UI state for sending messages
+  const sendIt = async (editorState) => {
+    console.log("ROOT", editorState);
+    editorState.read(() =>{
+      const root = $getRoot();
+      setMessageBody(root.getTextContent())
+    })
+    // editorState.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
+    // editorState.read(() => {
+    //   const root = $getRoot();
+    //   setMessageBody(root.getTextContent());
+    // });
+    // console.log("Current editor state", editorStateRef)
+    // e.preventDefault()
     if (canSendMessages) {
       sendSms(numberInUse, destinationNumber, messageBody);
       await sendMessage(messageBody)
@@ -33,6 +61,7 @@ function SendSmsForm({ numberInUse }) {
     } else {
       setShowWarning(true)
     }
+
   };
 
 
@@ -45,7 +74,10 @@ function SendSmsForm({ numberInUse }) {
 
 
   return (
-    <Box width="100%" backgroundColor={"default"}>
+    // create an event listener that looks for a submission and then clears the editor state
+    // component will need to recognize thaat the message body become null and we'll need to null out the chatcomposer
+   
+    <Box  width="100%" backgroundColor={"default"}>
       <MessageList
         devPhoneName={channelData.devPhoneName}
       />
@@ -55,6 +87,7 @@ function SendSmsForm({ numberInUse }) {
         <Column span={10}>
           <ChatComposer
             config={{
+              editorState: disabledInitialText,
               namespace: "send_sms",
               onError: (e) => {
                 throw e;
@@ -62,13 +95,17 @@ function SendSmsForm({ numberInUse }) {
             }}
             placeholder="Chat text"
             ariaLabel="A basic chat composer"
-            onChange={myOnChange}
+            onChange={editorState => editorStateRef.current = editorState}
           >
           </ChatComposer>
           <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
         </Column>
         <Column span={2}>
-          <Button onClick={sendIt} type={"submit"} disabled={!canSendMessages}>
+          <Button onClick={() => {
+            if(editorStateRef.current) {
+              sendIt(editorStateRef.current)
+            }
+          }} type={"submit"} disabled={!canSendMessages}>
             <SendIcon decorative />
             Send
           </Button>

From d1d49ff7fddcf2c25b4ad08636c4bba842645489 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Mon, 12 Jun 2023 22:24:27 -0400
Subject: [PATCH 30/37] revert to onChange event and remove aria-label
 placeholder data

---
 .../components/SendSmsForm/MessageList.jsx    |  1 +
 .../components/SendSmsForm/SendSmsForm.jsx    | 35 ++++++-------------
 2 files changed, 11 insertions(+), 25 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
index d4a6f1a..2ade8df 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
@@ -9,6 +9,7 @@ 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 : "");
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index db3b6df..0de3c2b 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -25,10 +25,6 @@ function SendSmsForm({ numberInUse }) {
 
   const editorStateRef = useRef();
 
-  // const messageSent = useMemo(() =>{
-  //   return 
-  // })
-
   const disabledInitialText = () => {
     const root = $getRoot();
 
@@ -40,20 +36,8 @@ function SendSmsForm({ numberInUse }) {
     }
   };
 
-  // Hansdles the UI state for sending messages
-  const sendIt = async (editorState) => {
-    console.log("ROOT", editorState);
-    editorState.read(() =>{
-      const root = $getRoot();
-      setMessageBody(root.getTextContent())
-    })
-    // editorState.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
-    // editorState.read(() => {
-    //   const root = $getRoot();
-    //   setMessageBody(root.getTextContent());
-    // });
-    // console.log("Current editor state", editorStateRef)
-    // e.preventDefault()
+  const sendIt = async (e) => {
+    e.preventDefault()
     if (canSendMessages) {
       sendSms(numberInUse, destinationNumber, messageBody);
       await sendMessage(messageBody)
@@ -61,10 +45,8 @@ function SendSmsForm({ numberInUse }) {
     } else {
       setShowWarning(true)
     }
-
   };
 
-
   const myOnChange = (editorState) => {
     editorState.read(() => {
       const root = $getRoot();
@@ -85,9 +67,8 @@ function SendSmsForm({ numberInUse }) {
 
       <Grid gutter={"space20"} marginBottom="space40">
         <Column span={10}>
-          <ChatComposer
+        <ChatComposer
             config={{
-              editorState: disabledInitialText,
               namespace: "send_sms",
               onError: (e) => {
                 throw e;
@@ -95,17 +76,21 @@ function SendSmsForm({ numberInUse }) {
             }}
             placeholder="Chat text"
             ariaLabel="A basic chat composer"
-            onChange={editorState => editorStateRef.current = editorState}
+            onChange={myOnChange}
           >
           </ChatComposer>
           <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
         </Column>
         <Column span={2}>
-          <Button onClick={() => {
+          {/* <Button onClick={() => {
             if(editorStateRef.current) {
               sendIt(editorStateRef.current)
             }
-          }} type={"submit"} disabled={!canSendMessages}>
+          }} type={"submit"} disabled={!canSendMessages}> 
+            <SendIcon decorative />
+            Send
+          </Button>*/}
+          <Button onClick={sendIt} type={"submit"} disabled={!canSendMessages}>
             <SendIcon decorative />
             Send
           </Button>

From 1d4f7625fc04f612ae4f7f479ee18d3448c28731 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Mon, 12 Jun 2023 22:51:41 -0400
Subject: [PATCH 31/37] upgrade react to 18, icons to 11.1 and locally define
 async in PhoneNumPicker component useEffect callback

---
 package.json                                  |  2 +
 packages/dev-phone-ui/package.json            |  5 ++
 .../PhoneNumberPicker/PhoneNumberPicker.jsx   | 48 +++++++++----------
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index f1b86be..5de1f83 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,8 @@
   },
   "dependencies": {
     "@twilio-paste/lexical-library": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "redux": "^4.2.1",
     "twilio-cli": "^5.5.0"
   }
diff --git a/packages/dev-phone-ui/package.json b/packages/dev-phone-ui/package.json
index 1199181..ef3ac13 100644
--- a/packages/dev-phone-ui/package.json
+++ b/packages/dev-phone-ui/package.json
@@ -35,8 +35,13 @@
     "date-fns": "^2.28.0",
     "konami": "^1.6.3",
     "process": "^0.11.10",
+<<<<<<< HEAD
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+=======
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+>>>>>>> 1697505 (upgrade react to 18, icons to 11.1 and locally define async in PhoneNumPicker component useEffect callback)
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
diff --git a/packages/dev-phone-ui/src/components/PhoneNumberPicker/PhoneNumberPicker.jsx b/packages/dev-phone-ui/src/components/PhoneNumberPicker/PhoneNumberPicker.jsx
index c504032..85eaae2 100644
--- a/packages/dev-phone-ui/src/components/PhoneNumberPicker/PhoneNumberPicker.jsx
+++ b/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) {

From 2544749bf5791e7e00b08423b507d36622791a82 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Wed, 14 Jun 2023 12:25:49 -0400
Subject: [PATCH 32/37] revert from paste chatlog to custom messaging component

---
 .../src/components/SendSmsForm/MessageList.jsx            | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
index 2ade8df..710aded 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
@@ -1,10 +1,4 @@
-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, Flex, SkeletonLoader, Text } from "@twilio-paste/core"
 import { useSelector } from "react-redux"
 import EmptyMessageList from "./EmptyMessageList";
 

From 0b2bf8c651580696a1a1d4acc8dbf6c110b6312d Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Fri, 1 Sep 2023 12:26:40 -0400
Subject: [PATCH 33/37] upgrade paste library and add ClearEditorPlugin

---
 packages/dev-phone-ui/package.json            |  4 +--
 .../components/SendSmsForm/SendSmsForm.jsx    | 31 ++++---------------
 2 files changed, 8 insertions(+), 27 deletions(-)

diff --git a/packages/dev-phone-ui/package.json b/packages/dev-phone-ui/package.json
index ef3ac13..384ce00 100644
--- a/packages/dev-phone-ui/package.json
+++ b/packages/dev-phone-ui/package.json
@@ -28,8 +28,8 @@
     "webpack-license-plugin": "^4.2.2"
   },
   "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",
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index 0de3c2b..af2e349 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -3,9 +3,10 @@ import { useSelector } from "react-redux";
 import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column, AutoScrollPlugin } from "@twilio-paste/core";
 import { ChatComposer } from "@twilio-paste/core/chat-composer";
 import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
-import {$getRoot, $createParagraphNode, $createTextNode} from '@twilio-paste/lexical-library';
+import { $getRoot, $createParagraphNode, $createTextNode } from '@twilio-paste/lexical-library';
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
 import MessageList from "./MessageList"
+import { ClearEditorPlugin } from "@tw2";
 import { CLEAR_HISTORY_COMMAND } from "lexical";
 
 function SendSmsForm({ numberInUse }) {
@@ -23,19 +24,6 @@ function SendSmsForm({ numberInUse }) {
     return destinationNumber && destinationNumber.length > 6;
   }, [destinationNumber]);
 
-  const editorStateRef = useRef();
-
-  const disabledInitialText = () => {
-    const root = $getRoot();
-
-    if (root.getFirstChild() !== null) {
-      const paragraph = $createParagraphNode();
-      paragraph.append($createTextNode('').toggleFormat('italic'));
-  
-      root.append(paragraph);
-    }
-  };
-
   const sendIt = async (e) => {
     e.preventDefault()
     if (canSendMessages) {
@@ -58,8 +46,8 @@ function SendSmsForm({ numberInUse }) {
   return (
     // create an event listener that looks for a submission and then clears the editor state
     // component will need to recognize thaat the message body become null and we'll need to null out the chatcomposer
-   
-    <Box  width="100%" backgroundColor={"default"}>
+
+    <Box width="100%" backgroundColor={"default"}>
       <MessageList
         devPhoneName={channelData.devPhoneName}
       />
@@ -67,7 +55,7 @@ function SendSmsForm({ numberInUse }) {
 
       <Grid gutter={"space20"} marginBottom="space40">
         <Column span={10}>
-        <ChatComposer
+          <ChatComposer
             config={{
               namespace: "send_sms",
               onError: (e) => {
@@ -78,18 +66,11 @@ function SendSmsForm({ numberInUse }) {
             ariaLabel="A basic chat composer"
             onChange={myOnChange}
           >
+            <ClearEditorPlugin />
           </ChatComposer>
           <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
         </Column>
         <Column span={2}>
-          {/* <Button onClick={() => {
-            if(editorStateRef.current) {
-              sendIt(editorStateRef.current)
-            }
-          }} type={"submit"} disabled={!canSendMessages}> 
-            <SendIcon decorative />
-            Send
-          </Button>*/}
           <Button onClick={sendIt} type={"submit"} disabled={!canSendMessages}>
             <SendIcon decorative />
             Send

From ad8be78bf61e8c68c9e4ec488401942cf5b6f174 Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Thu, 7 Sep 2023 14:00:28 -0400
Subject: [PATCH 34/37] move dependencies to dev ui package.json

---
 package.json                                                 | 4 +---
 packages/dev-phone-ui/package.json                           | 5 ++++-
 .../dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx  | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 5de1f83..8c9a751 100644
--- a/package.json
+++ b/package.json
@@ -32,10 +32,8 @@
     "turbo": "^1.2.16"
   },
   "dependencies": {
-    "@twilio-paste/lexical-library": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "redux": "^4.2.1",
-    "twilio-cli": "^5.5.0"
+    "redux": "^4.2.1"
   }
 }
diff --git a/packages/dev-phone-ui/package.json b/packages/dev-phone-ui/package.json
index 29338ef..08a0b21 100644
--- a/packages/dev-phone-ui/package.json
+++ b/packages/dev-phone-ui/package.json
@@ -25,9 +25,12 @@
     "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/lexical-library": "^2.0.0",
     "@twilio-paste/core": "^20.2.0",
     "@twilio-paste/icons": "^12.1.0",
     "@twilio/conversations": "^2.0.0",
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index af2e349..e87a78f 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -6,8 +6,8 @@ import { SendIcon } from '@twilio-paste/icons/esm/SendIcon';
 import { $getRoot, $createParagraphNode, $createTextNode } from '@twilio-paste/lexical-library';
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
 import MessageList from "./MessageList"
-import { ClearEditorPlugin } from "@tw2";
-import { CLEAR_HISTORY_COMMAND } from "lexical";
+// import { ClearEditorPlugin } from "@tw2";
+import { ClearEditorPlugin } from "@twilio-paste/lexical-library";
 
 function SendSmsForm({ numberInUse }) {
   const myRef = React.createRef()

From 04524024316a24ff290afc73d8131f25abfda01f Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Thu, 5 Oct 2023 09:54:08 -0700
Subject: [PATCH 35/37] implement clear editor plugin component using editor
 state

---
 packages/dev-phone-ui/package.json            |  9 +++--
 .../components/SendSmsForm/MessageList.jsx    |  6 ++--
 .../components/SendSmsForm/SendSmsForm.jsx    | 36 ++++++++++++-------
 3 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/packages/dev-phone-ui/package.json b/packages/dev-phone-ui/package.json
index 384ce00..9ef2bed 100644
--- a/packages/dev-phone-ui/package.json
+++ b/packages/dev-phone-ui/package.json
@@ -35,19 +35,18 @@
     "date-fns": "^2.28.0",
     "konami": "^1.6.3",
     "process": "^0.11.10",
-<<<<<<< HEAD
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-=======
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
->>>>>>> 1697505 (upgrade react to 18, icons to 11.1 and locally define async in PhoneNumPicker component useEffect callback)
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
     "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"
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
index 710aded..27f26a1 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/MessageList.jsx
@@ -1,4 +1,6 @@
-import { Box, Flex, SkeletonLoader, Text } from "@twilio-paste/core"
+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";
 
@@ -22,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>
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index af2e349..d4629ce 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -1,13 +1,30 @@
-import React, { useContext, useState, useEffect, useRef, useMemo } from "react";
+import React, { useContext, useState, useMemo } from "react";
 import { useSelector } from "react-redux";
-import { Button, Input, Label, Box, Grid, TextArea, HelpText, Column, AutoScrollPlugin } from "@twilio-paste/core";
+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 { $getRoot, $createParagraphNode, $createTextNode } from '@twilio-paste/lexical-library';
 import { TwilioConversationsContext } from '../WebsocketManagers/ConversationsManager';
 import MessageList from "./MessageList"
-import { ClearEditorPlugin } from "@tw2";
-import { CLEAR_HISTORY_COMMAND } from "lexical";
+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()
@@ -44,8 +61,6 @@ function SendSmsForm({ numberInUse }) {
 
 
   return (
-    // create an event listener that looks for a submission and then clears the editor state
-    // component will need to recognize thaat the message body become null and we'll need to null out the chatcomposer
 
     <Box width="100%" backgroundColor={"default"}>
       <MessageList
@@ -67,15 +82,10 @@ function SendSmsForm({ numberInUse }) {
             onChange={myOnChange}
           >
             <ClearEditorPlugin />
+            <SendButtonPlugin canSendMessages={canSendMessages} onClick={sendIt} />
           </ChatComposer>
           <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
         </Column>
-        <Column span={2}>
-          <Button onClick={sendIt} type={"submit"} disabled={!canSendMessages}>
-            <SendIcon decorative />
-            Send
-          </Button>
-        </Column>
       </Grid>
     </Box>
 

From 8646e838fe1d0192543cf8f0e6ed242d9dfbe00c Mon Sep 17 00:00:00 2001
From: gyasi-eco <gcalhoun@twilio.com>
Date: Tue, 17 Oct 2023 15:28:41 -0400
Subject: [PATCH 36/37] fix soft phone overflow cutoff and chatcomposer submit
 button location

---
 .../components/SendSmsForm/SendSmsForm.jsx    | 36 ++++++++++++++-----
 .../src/components/Softphone/Softphone.jsx    |  3 +-
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index d4629ce..1ed006e 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -1,16 +1,16 @@
 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 { Button, Label, Box, Grid, HelpText, Column, AutoScrollPlugin, Flex } 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";
+import { $getRoot, ClearEditorPlugin, useLexicalComposerContext, CLEAR_EDITOR_COMMAND } from "@twilio-paste/core/lexical-library";
 
 
 
-function SendButtonPlugin({onClick, canSendMessages}) {
-  const [editor] = useLexicalComposerContext(); 
+function SendButtonPlugin({ onClick, canSendMessages }) {
+  const [editor] = useLexicalComposerContext();
 
   const sendIt = (e) => {
     onClick(e);
@@ -61,15 +61,15 @@ function SendSmsForm({ numberInUse }) {
 
 
   return (
-
-    <Box width="100%" backgroundColor={"default"}>
+    <Box width="100%" backgroundColor={"default"} overflowX="hidden" overflowY="auto">
       <MessageList
         devPhoneName={channelData.devPhoneName}
       />
       <Label htmlFor="sendSmsBody" required>Message</Label>
 
       <Grid gutter={"space20"} marginBottom="space40">
-        <Column span={10}>
+        <Column span={12}>
+
           <ChatComposer
             config={{
               namespace: "send_sms",
@@ -80,9 +80,27 @@ function SendSmsForm({ numberInUse }) {
             placeholder="Chat text"
             ariaLabel="A basic chat composer"
             onChange={myOnChange}
+            style={{ display: "flex" }}
           >
-            <ClearEditorPlugin />
-            <SendButtonPlugin canSendMessages={canSendMessages} onClick={sendIt} />
+            <Flex horizontal>
+              <Flex grow>
+                <Box
+                >
+                  <ClearEditorPlugin />
+                </Box>
+              </Flex>
+              <Flex grow>
+                <Box
+                  padding="space10"
+                  width="100%"
+                  display="flex"
+                  justifyContent="end"
+                >
+                  <SendButtonPlugin canSendMessages={canSendMessages} onClick={sendIt} />
+                </Box>
+              </Flex>
+            </Flex>
+
           </ChatComposer>
           <HelpText id="send_sms_help_text">Enter at most 1600 characters</HelpText>
         </Column>
diff --git a/packages/dev-phone-ui/src/components/Softphone/Softphone.jsx b/packages/dev-phone-ui/src/components/Softphone/Softphone.jsx
index cd100a0..ef8ae78 100644
--- a/packages/dev-phone-ui/src/components/Softphone/Softphone.jsx
+++ b/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}>

From 516695c307a219c4e9bd9dd1d395a4fc3c80750e Mon Sep 17 00:00:00 2001
From: Ricky Holtz <eholtz@twilio.com>
Date: Fri, 3 Nov 2023 13:49:45 +0100
Subject: [PATCH 37/37] Restyle and reorganize components

---
 .../SendSmsForm/SendButtonPlugin.jsx          | 32 ++++++++
 .../components/SendSmsForm/SendSmsForm.jsx    | 80 +++++--------------
 2 files changed, 51 insertions(+), 61 deletions(-)
 create mode 100644 packages/dev-phone-ui/src/components/SendSmsForm/SendButtonPlugin.jsx

diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendButtonPlugin.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendButtonPlugin.jsx
new file mode 100644
index 0000000..b3bd428
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
index 1ed006e..b34d6f3 100644
--- a/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
+++ b/packages/dev-phone-ui/src/components/SendSmsForm/SendSmsForm.jsx
@@ -1,34 +1,14 @@
 import React, { useContext, useState, useMemo } from "react";
 import { useSelector } from "react-redux";
-import { Button, Label, Box, Grid, HelpText, Column, AutoScrollPlugin, Flex } from "@twilio-paste/core";
+import { 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>
-  )
-}
+import { $getRoot, ClearEditorPlugin } from "@twilio-paste/core/lexical-library";
+import SendButtonPlugin from "./SendButtonPlugin";
 
+// Top-level container for Dev Phone SMS
 function SendSmsForm({ numberInUse }) {
-  const myRef = React.createRef()
-
   const [messageBody, setMessageBody] = useState('');
 
   const channelData = useSelector(state => state.channelData)
@@ -69,39 +49,21 @@ function SendSmsForm({ numberInUse }) {
 
       <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}
-            style={{ display: "flex" }}
-          >
-            <Flex horizontal>
-              <Flex grow>
-                <Box
-                >
-                  <ClearEditorPlugin />
-                </Box>
-              </Flex>
-              <Flex grow>
-                <Box
-                  padding="space10"
-                  width="100%"
-                  display="flex"
-                  justifyContent="end"
-                >
-                  <SendButtonPlugin canSendMessages={canSendMessages} onClick={sendIt} />
-                </Box>
-              </Flex>
-            </Flex>
-
-          </ChatComposer>
+            <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>
@@ -110,8 +72,4 @@ function SendSmsForm({ numberInUse }) {
   );
 }
 
-
-
-
-
 export default SendSmsForm;