Enhancements to Encounter Discussion/Notes | Fix Translation

src/pages/Encounters/tabs/EncounterNotesTab.tsx

@@ -13,6 +13,7 @@ import {
   Send,
   Users,
 } from "lucide-react";
+import { Link, usePathParams } from "raviger";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useInView } from "react-intersection-observer";
@@ -52,6 +53,7 @@ import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 import { PaginatedResponse } from "@/Utils/request/types";
+import { relativeTime } from "@/Utils/utils";
 import { EncounterTabProps } from "@/pages/Encounters/EncounterShow";
 import { Message } from "@/types/notes/messages";
 import { Thread } from "@/types/notes/threads";
@@ -118,6 +120,7 @@ const ThreadItem = ({
 // Message item component
 const MessageItem = ({ message }: { message: Message }) => {
   const authUser = useAuthUser();
+  const { facilityId } = usePathParams("/facility/:facilityId/*")!;
   const isCurrentUser = authUser?.external_id === message.created_by.id;
 
   return (
@@ -135,15 +138,19 @@ const MessageItem = ({ message }: { message: Message }) => {
       >
         <TooltipProvider>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <div className="flex">
-                <Avatar
-                  name={message.created_by.username}
-                  imageUrl={message.created_by.profile_picture_url}
-                  className="w-8 h-8 rounded-full object-cover"
-                />
-              </div>
-            </TooltipTrigger>
+            <Link
+              href={`/facility/${facilityId}/users/${message.created_by.username}`}
+            >
+              <TooltipTrigger asChild>
+                <div className="flex">
+                  <Avatar
+                    name={message.created_by.username}
+                    imageUrl={message.created_by.profile_picture_url}
+                    className="w-8 h-8 rounded-full object-cover"
+                  />
+                </div>
+              </TooltipTrigger>
+            </Link>
             <TooltipContent>
               <p>{message.created_by.username}</p>
             </TooltipContent>
@@ -161,15 +168,18 @@ const MessageItem = ({ message }: { message: Message }) => {
           </span>
           <div
             className={cn(
-              "p-3 rounded-lg break-words",
+              "pt-3 px-3 pb-1 rounded-lg break-words",
               isCurrentUser
                 ? "bg-primary-100 text-white rounded-br-none"
                 : "bg-gray-100 rounded-bl-none",
             )}
           >
             {message.message && (
-              <div className="mt-4">
-                <Markdown content={message.message} className="text-sm" />
+              <div className="mt-2">
+                <Markdown content={message.message} className="text-sm mb-2" />
+                <div className="text-xs text-gray-500 flex justify-end">
+                  {relativeTime(message.created_date)}
+                </div>
               </div>
             )}
           </div>
@@ -240,7 +250,7 @@ const NewThreadDialog = ({
 
         <DialogFooter>
           <Button variant="outline" onClick={onClose} disabled={isCreating}>
-            {t("Cancel")}
+            {t("cancel")}
           </Button>
           <Button
             onClick={() => onCreate(title)}
@@ -251,7 +261,7 @@ const NewThreadDialog = ({
             ) : (
               <MessageSquarePlus className="h-4 w-4 mr-2" />
             )}
-            {t("Create")}
+            {t("create")}
           </Button>
         </DialogFooter>
       </DialogContent>

src/types/notes/messages.ts

@@ -5,5 +5,6 @@ export interface Message {
   message: string;
   message_history: Record<string, unknown>;
   created_by: UserBase;
+  created_date: Date;
   updated_by: UserBase;
 }