GSoC - Doctor Notes Enhancement

src/Common/constants.tsx

@@ -672,6 +672,11 @@ export const NOTIFICATION_EVENTS: NotificationEvent[] = [
     text: "Patient Note Added",
     icon: "l-notes",
   },
+  {
+    id: "PATIENT_NOTE_MENTIONED",
+    text: "Patient Note Mentioned",
+    icon: "l-at",
+  },
 ];
 
 export const BREATHLESSNESS_LEVEL = [

src/Common/hooks/useAuthUser.ts

@@ -7,9 +7,9 @@ type SignInReturnType = RequestResult<JwtTokenObtainPair>;
 
 type AuthContextType = {
   user: UserModel | undefined;
+  refetchUser: () => Promise<RequestResult<UserModel>>;
   signIn: (creds: LoginCredentials) => Promise<SignInReturnType>;
   signOut: () => Promise<void>;
-  refetchUser: () => Promise<RequestResult<UserModel>>;
 };
 
 export const AuthUserContext = createContext<AuthContextType | null>(null);

src/Components/Common/FilePreviewDialog.tsx

@@ -33,16 +33,17 @@ type FilePreviewProps = {
 };
 
 const previewExtensions = [
-  ".html",
-  ".htm",
-  ".pdf",
-  ".mp4",
-  ".webm",
-  ".jpg",
-  ".jpeg",
-  ".png",
-  ".gif",
-  ".webp",
+  "html",
+  "htm",
+  "pdf",
+  "mp4",
+  "mp3",
+  "webm",
+  "jpg",
+  "jpeg",
+  "png",
+  "gif",
+  "webp",
 ];
 
 const FilePreviewDialog = (props: FilePreviewProps) => {

src/Components/Common/RichTextEditor/MarkdownPreview.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import { UserBareMinimum } from "../../Users/models";
+
+interface CustomLinkProps {
+  className?: string;
+  "data-username"?: string;
+}
+
+const UserCard = ({ user }: { user: UserBareMinimum }) => (
+  <div className="z-10 flex w-64 items-center space-x-3 rounded-lg bg-gray-200 px-3 pb-3 shadow-lg">
+    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-lg font-semibold text-white">
+      {user.first_name[0]}
+    </div>
+    <div className="space-y-0">
+      <h3 className="text-sm font-semibold text-gray-800">
+        {user.first_name} {user.last_name}
+      </h3>
+      <p className="text-xs text-gray-500">@{user.username}</p>
+      <p className="text-xs text-gray-500">{user.user_type}</p>
+    </div>
+  </div>
+);
+
+const MarkdownPreview = ({
+  markdown,
+  mentioned_users,
+}: {
+  markdown: string;
+  mentioned_users?: UserBareMinimum[];
+}) => {
+  const MentionedUsers = Object.fromEntries(
+    mentioned_users?.map((u) => [u.username, u]) ?? [],
+  );
+
+  const processedMarkdown = markdown
+    .replace(/@(\w+)/g, (_, username) => {
+      const user = MentionedUsers[username];
+      if (user) {
+        return `<a href="/user/profile/${username}" data-username="${username}">@${username}</a>`;
+      } else {
+        return `@${username}`;
+      }
+    })
+    .replace(/~~(.*?)~~/g, (_, text) => `<del>${text}</del>`);
+
+  const CustomLink: React.FC<CustomLinkProps> = (props) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    if (props["data-username"]) {
+      const username = props["data-username"];
+      return (
+        <span
+          className="relative inline-block"
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+        >
+          <span
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="cursor-pointer rounded bg-blue-100 px-1 font-normal text-slate-800 no-underline"
+          >
+            @{username}
+          </span>
+          {MentionedUsers[username] && isHovered && (
+            <div className="tooltip-text absolute bottom-full z-10 mb-2 transition-opacity duration-300 ease-in-out">
+              <UserCard user={MentionedUsers[username]} />
+              <div className="absolute left-2 top-full border-8 border-solid border-transparent border-t-gray-200 shadow-md"></div>
+            </div>
+          )}
+        </span>
+      );
+    }
+    return (
+      <a
+        {...props}
+        target="_blank"
+        onClick={(e) => e.stopPropagation()}
+        className="text-blue-500 underline"
+      />
+    );
+  };
+
+  return (
+    <ReactMarkdown
+      className="prose text-sm prose-p:m-0"
+      rehypePlugins={[rehypeRaw]}
+      components={{
+        a: CustomLink,
+      }}
+    >
+      {processedMarkdown}
+    </ReactMarkdown>
+  );
+};
+
+export default MarkdownPreview;

src/Components/Common/RichTextEditor/MentionDropdown.tsx

@@ -0,0 +1,113 @@
+import React, { useEffect, useState, useMemo, useCallback } from "react";
+import routes from "../../../Redux/api";
+import useQuery from "../../../Utils/request/useQuery";
+import useSlug from "../../../Common/hooks/useSlug";
+
+interface MentionsDropdownProps {
+  onSelect: (user: { id: string; username: string }) => void;
+  position: { top: number; left: number };
+  editorRef: React.RefObject<HTMLTextAreaElement>;
+  filter: string;
+}
+
+const MentionsDropdown: React.FC<MentionsDropdownProps> = ({
+  onSelect,
+  position,
+  editorRef,
+  filter,
+}) => {
+  const facilityId = useSlug("facility");
+  const { data, loading } = useQuery(routes.getFacilityUsers, {
+    pathParams: { facility_id: facilityId },
+  });
+
+  const users = data?.results || [];
+
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      setDropdownPosition({
+        top: position.top,
+        left: position.left,
+      });
+    }
+  }, [position, editorRef]);
+
+  const filteredUsers = useMemo(() => {
+    return users.filter((user) =>
+      user.username.toLowerCase().startsWith(filter.toLowerCase()),
+    );
+  }, [users, filter]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Enter" && filteredUsers.length > 0) {
+        event.preventDefault();
+        if (selectedIndex !== null) {
+          onSelect({
+            id: filteredUsers[selectedIndex].id.toString(),
+            username: filteredUsers[selectedIndex].username,
+          });
+        } else {
+          onSelect({
+            id: filteredUsers[0].id.toString(),
+            username: filteredUsers[0].username,
+          });
+        }
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setSelectedIndex((prevIndex) => {
+          if (prevIndex === null) return 0;
+          return Math.min(filteredUsers.length - 1, prevIndex + 1);
+        });
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setSelectedIndex((prevIndex) => {
+          if (prevIndex === null) return filteredUsers.length - 1;
+          return Math.max(0, prevIndex - 1);
+        });
+      }
+    },
+    [filteredUsers, selectedIndex, onSelect],
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+
+  return (
+    <div
+      className="absolute z-10 max-h-36 w-64 overflow-y-auto rounded-md bg-white text-sm shadow-lg"
+      style={{ top: dropdownPosition.top, left: dropdownPosition.left }}
+    >
+      {loading && <div className="p-2 text-gray-500">Loading...</div>}
+      {filteredUsers.length > 0 && !loading ? (
+        filteredUsers.map((user, index) => (
+          <div
+            key={user.id}
+            className={`flex cursor-pointer items-center gap-2 p-2 ${
+              index === selectedIndex ? "bg-gray-100" : "hover:bg-gray-100"
+            }`}
+            onClick={() =>
+              onSelect({ id: user.id.toString(), username: user.username })
+            }
+          >
+            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs font-semibold text-white">
+              {user.first_name[0]}
+            </span>
+            {user.username}
+          </div>
+        ))
+      ) : (
+        <div className="p-2 text-gray-500">No users found</div>
+      )}
+    </div>
+  );
+};
+
+export default MentionsDropdown;