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

feat: added text style chat messages
1 year ago · c4383f4bd2
4 changed files with 101 additions and 75 deletions
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/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-1 overflow-y-scroll w-full" ref={scrollContainerRef}>
-        <div className="w-full h-full flex flex-col justify-end">
-          {messages.map((message, index) => (
-            <Message
-              key={message.id}
-              message={message}
-              lastMsgSameUser={
-                index > 0 && messages[index - 1].from === message.from
-              }
-              sender={nodes.get(message.from)}
-            />
-          ))}
+    <div className="flex flex-col h-full w-full container mx-auto">
+      <div className="flex-1 overflow-y-auto" ref={scrollContainerRef}>
+        <div className="w-full h-full flex flex-col justify-end pl-4 pr-44">
+          {messages.map((message, index) => {
+            return (
+              <Message
+                key={message.id}
+                message={message}
+                sender={nodes.get(message.from)}
+                lastMsgSameUser={
+                  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>
--- a/src/components/PageComponents/Messages/Message.tsx
+++ b/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>
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
-      <Tooltip.Portal>
-        <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"
-          side="top"
-          align="center"
-          sideOffset={5}
-        >
-          {getStatusText(state)}
-          <Tooltip.Arrow className="fill-slate-800" />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  </Tooltip.Provider>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent
+        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"
+        align="center"
+        sideOffset={5}
+      >
+        {getStatusText(state)}
+        <TooltipArrow className="fill-slate-800" />
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
 );

 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 }) => (
-  <div className="flex items-center gap-2 flex-shrink-0">
+const TimeDisplay = ({
+  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 isFailed = message.state === MESSAGE_STATES.ACK;
-
-  const baseMessageWrapper = cn(
-    "flex items-center gap-2 w-full max-w-full pl-11",
-    !lastMsgSameUser && "flex-wrap flex-grow",
+  const { getDevices } = useDeviceStore();
+
+  const isDeviceUser = useMemo(
+    () =>
+      getDevices()
+        .map((device) => device.nodes.get(device.hardware.myNodeNum)?.num)
+        .includes(message.from),
+    [getDevices, message.from],
  );
+  const messageUser = sender?.user;

-  const containerClass = cn(
-    "w-full px-4 relative",
-    lastMsgSameUser ? "mt-1" : "mt-2",
-    !lastMsgSameUser && "pt-2",
-  );
+  const messageTextClass = getMessageTextStyles(message.state);

  return (
-    <div className={containerClass}>
-      {!lastMsgSameUser && (
-        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
-          <div className="flex items-center gap-2 min-w-0">
-            <Avatar
-              text={sender?.user?.shortName ?? "UNK"}
-              className="flex-shrink-0"
-            />
-            <span className="font-medium text-gray-900 dark:text-white truncate">
-              {sender?.user?.longName ?? "UNK"}
-            </span>
-          </div>
-          <TimeDisplay date={message.rxTime} />
+    <div className="flex flex-col w-full px-4 justify-start">
+      <div
+        className={cn(
+          "flex flex-col flex-wrap items-start py-1",
+          isDeviceUser && "items-end",
+        )}
+      >
+        <div className="flex items-center gap-2 mb-2">
+          {!lastMsgSameUser ? (
+            <div className="flex place-items-center gap-2 mb-1">
+              <Avatar text={messageUser?.shortName} />
+              <div className="flex flex-col">
+                <span className="font-medium text-gray-900 dark:text-white truncate">
+                  {messageUser?.longName}
+                </span>
+              </div>
+            </div>
+          ) : null}
        </div>
-      )}
-      <div className={baseMessageWrapper}>
-        <div className="flex-1 min-w-0 max-w-full">
-          <div className={messageTextClass}>{message.data}</div>
+        <TimeDisplay date={message.rxTime} />
+        <div className="flex place-items-center gap-2 pb-2">
+          <div className={cn(isDeviceUser && "pl-11", messageTextClass)}>
+            {message.data}
+          </div>
+          <StatusIcon state={message.state} />
        </div>
-        <StatusIcon
-          state={message.state}
-          className="ml-auto mr-6 flex-shrink-0"
-        />
      </div>
    </div>
  );
--- a/src/components/PageComponents/Messages/MessageInput.tsx
+++ b/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;
-    if (messageLength <= maxBytes) {
+    const byteLength = new Blob([newValue]).size;
+
+    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>
--- a/src/components/UI/Tooltip.tsx
+++ b/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,
+};