Use new js lib version

src/components/PageComponents/Messages/Message.tsx

@@ -31,17 +31,19 @@ export const Message = ({
 
   return lastMsgSameUser ? (
     <div className="ml-4 flex">
-      {message.ack ? (
+      {message.state === "ack" ? (
         <CheckCircleIcon className="my-auto h-4 text-textSecondary" />
-      ) : (
+      ) : message.state === "waiting" ? (
         <EllipsisHorizontalCircleIcon className="my-auto h-4 text-textSecondary" />
+      ) : (
+        <ExclamationCircleIcon className="my-auto h-4 text-textSecondary" />
       )}
       {"waypointID" in message ? (
         <WaypointMessage waypointID={message.waypointID} />
       ) : (
         <span
           className={`ml-4 border-l-2 border-l-backgroundPrimary pl-2 ${
-            message.ack ? "text-textPrimary" : "text-textSecondary"
+            message.state === "ack" ? "text-textPrimary" : "text-textSecondary"
           }`}
         >
           {message.text}
@@ -69,17 +71,21 @@ export const Message = ({
       </div>
       <div className="flex">
         {/* <ExclamationCircleIcon /> */}
-        {message.ack ? (
+        {message.state === "ack" ? (
           <CheckCircleIcon className="my-auto h-4 text-textSecondary" />
-        ) : (
+        ) : message.state === "waiting" ? (
           <EllipsisHorizontalCircleIcon className="my-auto h-4 text-textSecondary" />
+        ) : (
+          <ExclamationCircleIcon className="my-auto h-4 text-textSecondary" />
         )}
         {"waypointID" in message ? (
           <WaypointMessage waypointID={message.waypointID} />
         ) : (
           <span
             className={`ml-4 border-l-2 border-l-backgroundPrimary pl-2 ${
-              message.ack ? "text-textPrimary" : "text-textSecondary"
+              message.state === "ack"
+                ? "text-textPrimary"
+                : "text-textSecondary"
             }`}
           >
             {message.text}

src/components/PageComponents/Messages/MessageInput.tsx

@@ -14,7 +14,7 @@ export interface MessageInputProps {
 }
 
 export const MessageInput = ({ channel }: MessageInputProps): JSX.Element => {
-  const { connection, ackMessage } = useDevice();
+  const { connection, setMessageState } = useDevice();
 
   const { register, handleSubmit } = useForm<{
     message: string;
@@ -24,16 +24,17 @@ export const MessageInput = ({ channel }: MessageInputProps): JSX.Element => {
     }
   });
 
-  const onSubmit = handleSubmit((data) => {
-    void connection?.sendText({
-      text: data.message,
-      wantAck: true,
-      channel: channel.config.index as Types.ChannelNumber,
-      callback: (id) => {
-        ackMessage(channel.config.index, id);
-        return Promise.resolve();
-      }
-    });
+  const onSubmit = handleSubmit(async (data) => {
+    await connection
+      ?.sendText({
+        text: data.message,
+        wantAck: true,
+        channel: channel.config.index as Types.ChannelNumber
+      })
+      .then((id) => setMessageState(channel.config.index, id, "ack"))
+      .catch((e: Types.PacketError) =>
+        setMessageState(channel.config.index, e.id, e.error)
+      );
   });
 
   return (