Merge pull request #423 from danditomaso/issue-407-text-style-messages

feat: added text style chat messages

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -51,7 +51,7 @@ export const ChannelChat = ({
 
   if (!messages?.length) {
     return (
-      <div className="flex flex-col h-full w-full">
+      <div className="flex flex-col h-full w-full container mx-auto">
         <div className="flex-1 flex items-center justify-center">
           <EmptyState />
         </div>
@@ -63,23 +63,25 @@ export const ChannelChat = ({
   }
 
   return (
-    <div className="flex flex-col h-full w-full">
+    <div className="flex flex-col h-full w-full container mx-auto">
-      <div className="flex-1 overflow-y-scroll w-full" ref={scrollContainerRef}>
+      <div className="flex-1 overflow-y-auto" ref={scrollContainerRef}>
-        <div className="w-full h-full flex flex-col justify-end">
+        <div className="w-full h-full flex flex-col justify-end pl-4 pr-44">
-          {messages.map((message, index) => (
+          {messages.map((message, index) => {
-            <Message
+            return (
-              key={message.id}
+              <Message
-              message={message}
+                key={message.id}
-              lastMsgSameUser={
+                message={message}
-                index > 0 && messages[index - 1].from === message.from
+                sender={nodes.get(message.from)}
-              }
+                lastMsgSameUser={
-              sender={nodes.get(message.from)}
+                  index > 0 && messages[index - 1].from === message.from
-            />
+                }
-          ))}
+              />
+            );
+          })}
           <div ref={messagesEndRef} className="w-full" />
         </div>
       </div>
-      <div className="flex-shrink-0 mt-2 p-4 w-full bg-gray-900">
+      <div className="flex-shrink-0 mt-2 p-4 w-full dark:bg-gray-900">
         <MessageInput to={to} channel={channel} maxBytes={200} />
       </div>
     </div>

src/components/PageComponents/Messages/Message.tsx

@@ -1,10 +1,21 @@
-import type { MessageWithState } from "@app/core/stores/deviceStore.ts";
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@app/components/UI/Tooltip";
+import { useAppStore } from "@app/core/stores/appStore";
+import {
+  type MessageWithState,
+  useDeviceStore,
+} from "@app/core/stores/deviceStore.ts";
 import { cn } from "@app/core/utils/cn";
 import { Avatar } from "@components/UI/Avatar";
 import type { Protobuf } from "@meshtastic/js";
-import * as Tooltip from "@radix-ui/react-tooltip";
 import { AlertCircle, CheckCircle2, CircleEllipsis } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
+import { useMemo } from "react";
 
 const MESSAGE_STATES = {
   ACK: "ack",
@@ -17,7 +28,7 @@ type MessageState = MessageWithState["state"];
 interface MessageProps {
   lastMsgSameUser: boolean;
   message: MessageWithState;
-  sender?: Protobuf.Mesh.NodeInfo;
+  sender: Protobuf.Mesh.NodeInfo;
 }
 
 interface StatusTooltipProps {
@@ -45,22 +56,20 @@ const STATUS_ICON_MAP: Record<MessageState, LucideIcon> = {
 const getStatusText = (state: MessageState): string => STATUS_TEXT_MAP[state];
 
 const StatusTooltip = ({ state, children }: StatusTooltipProps) => (
-  <Tooltip.Provider>
+  <TooltipProvider>
-    <Tooltip.Root>
+    <Tooltip>
-      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
-      <Tooltip.Portal>
+      <TooltipContent
-        <Tooltip.Content
+        className="rounded-md bg-slate-800 px-3 py-1.5 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95"
-          className="rounded-md bg-slate-800 px-3 py-1.5 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95"
+        side="top"
-          side="top"
+        align="center"
-          align="center"
+        sideOffset={5}
-          sideOffset={5}
+      >
-        >
+        {getStatusText(state)}
-          {getStatusText(state)}
+        <TooltipArrow className="fill-slate-800" />
-          <Tooltip.Arrow className="fill-slate-800" />
+      </TooltipContent>
-        </Tooltip.Content>
+    </Tooltip>
-      </Tooltip.Portal>
+  </TooltipProvider>
-    </Tooltip.Root>
-  </Tooltip.Provider>
 );
 
 const StatusIcon = ({ state, className, ...otherProps }: StatusIconProps) => {
@@ -88,7 +97,7 @@ const getMessageTextStyles = (state: MessageState) => {
   const isWaiting = state === MESSAGE_STATES.WAITING;
 
   return cn(
-    "pl-2 break-words overflow-hidden",
+    "break-words overflow-hidden",
     isAcknowledged
       ? "text-black dark:text-white"
       : "text-black dark:text-gray-400",
@@ -96,8 +105,11 @@ const getMessageTextStyles = (state: MessageState) => {
   );
 };
 
-const TimeDisplay = ({ date }: { date: Date }) => (
+const TimeDisplay = ({
-  <div className="flex items-center gap-2 flex-shrink-0">
+  date,
+  className,
+}: { date: Date; className?: string }) => (
+  <div className={cn("flex items-center gap-2 flex-shrink-0", className)}>
     <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
       {date.toLocaleDateString()}
     </span>
@@ -111,44 +123,46 @@ const TimeDisplay = ({ date }: { date: Date }) => (
 );
 
 export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => {
-  const messageTextClass = getMessageTextStyles(message.state);
+  const { getDevices } = useDeviceStore();
-  const isFailed = message.state === MESSAGE_STATES.ACK;
+
-
+  const isDeviceUser = useMemo(
-  const baseMessageWrapper = cn(
+    () =>
-    "flex items-center gap-2 w-full max-w-full pl-11",
+      getDevices()
-    !lastMsgSameUser && "flex-wrap flex-grow",
+        .map((device) => device.nodes.get(device.hardware.myNodeNum)?.num)
+        .includes(message.from),
+    [getDevices, message.from],
   );
+  const messageUser = sender?.user;
 
-  const containerClass = cn(
+  const messageTextClass = getMessageTextStyles(message.state);
-    "w-full px-4 relative",
-    lastMsgSameUser ? "mt-1" : "mt-2",
-    !lastMsgSameUser && "pt-2",
-  );
 
   return (
-    <div className={containerClass}>
+    <div className="flex flex-col w-full px-4 justify-start">
-      {!lastMsgSameUser && (
+      <div
-        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+        className={cn(
-          <div className="flex items-center gap-2 min-w-0">
+          "flex flex-col flex-wrap items-start py-1",
-            <Avatar
+          isDeviceUser && "items-end",
-              text={sender?.user?.shortName ?? "UNK"}
+        )}
-              className="flex-shrink-0"
+      >
-            />
+        <div className="flex items-center gap-2 mb-2">
-            <span className="font-medium text-gray-900 dark:text-white truncate">
+          {!lastMsgSameUser ? (
-              {sender?.user?.longName ?? "UNK"}
+            <div className="flex place-items-center gap-2 mb-1">
-            </span>
+              <Avatar text={messageUser?.shortName} />
-          </div>
+              <div className="flex flex-col">
-          <TimeDisplay date={message.rxTime} />
+                <span className="font-medium text-gray-900 dark:text-white truncate">
+                  {messageUser?.longName}
+                </span>
+              </div>
+            </div>
+          ) : null}
         </div>
-      )}
+        <TimeDisplay date={message.rxTime} />
-      <div className={baseMessageWrapper}>
+        <div className="flex place-items-center gap-2 pb-2">
-        <div className="flex-1 min-w-0 max-w-full">
+          <div className={cn(isDeviceUser && "pl-11", messageTextClass)}>
-          <div className={messageTextClass}>{message.data}</div>
+            {message.data}
+          </div>
+          <StatusIcon state={message.state} />
         </div>
-        <StatusIcon
-          state={message.state}
-          className="ml-auto mr-6 flex-shrink-0"
-        />
       </div>
     </div>
   );

src/components/PageComponents/Messages/MessageInput.tsx

@@ -32,7 +32,7 @@ export const MessageInput = ({
   } = useDevice();
   const myNodeNum = hardware.myNodeNum;
   const [localDraft, setLocalDraft] = useState(messageDraft);
-  const [messageBytes, setMessageBytes] = useState(maxBytes);
+  const [messageBytes, setMessageBytes] = useState(0);
 
   const debouncedSetMessageDraft = useMemo(
     () => debounce(setMessageDraft, 300),
@@ -69,11 +69,12 @@ export const MessageInput = ({
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
-    const messageLength = newValue.length;
+    const byteLength = new Blob([newValue]).size;
-    if (messageLength <= maxBytes) {
+
+    if (byteLength <= maxBytes) {
       setLocalDraft(newValue);
       debouncedSetMessageDraft(newValue);
-      setMessageBytes(maxBytes - messageLength);
+      setMessageBytes(byteLength);
     }
   };
 
@@ -89,6 +90,7 @@ export const MessageInput = ({
             sendText(message);
             setLocalDraft("");
             setMessageDraft("");
+            setMessageBytes(0);
           });
         }}
       >
@@ -103,9 +105,10 @@ export const MessageInput = ({
               onChange={handleInputChange}
             />
           </span>
-          <div className="flex items-center">
+          <div className="flex items-center w-24 p-2 place-content-end">
             {messageBytes}/{maxBytes}
           </div>
+
           <Button type="submit">
             <SendIcon size={16} />
           </Button>

src/components/UI/Tooltip.tsx

@@ -9,6 +9,7 @@ const Tooltip = ({ ...props }) => <TooltipPrimitive.Root {...props} />;
 Tooltip.displayName = TooltipPrimitive.Tooltip.displayName;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipArrow = TooltipPrimitive.Arrow;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -26,4 +27,10 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipArrow,
+};