getting icons showing for link and copy pasting working

packages/common/models/conversation.ts

@@ -126,6 +126,10 @@ export class Link {
       return LinkType.pdf;
     } else if (url.includes(LinkType.codePile)) {
       return LinkType.codePile;
+    } else if (url.includes("meet.google.com")) {
+      return LinkType.googleMeet;
+    } else if (url.includes(".zoom.")) {
+      return LinkType.zoom;
     } else {
       return LinkType.default;
     }
@@ -143,4 +147,5 @@ export enum LinkType {
   codePile = "codepile",
   pastePics = "paste.pics",
   googleMeet = "googleMeet",
+  zoom = "zoom",
 }

packages/web/components/Drawer/CreateItemModal.tsx

@@ -0,0 +1,61 @@
+import { Link } from "@nirvana/common/models/conversation";
+import Modal from "antd/lib/modal/Modal";
+import { useState, useEffect } from "react";
+import toast from "react-hot-toast";
+import LinkIcon from "./LinkIcon";
+
+export default function CreateItemModal(props: {
+  pastedLink: string;
+  show: boolean;
+}) {
+  const [linkVal, setLinkVal] = useState<string>("");
+
+  useEffect(() => {
+    if (props.pastedLink) {
+      setLinkVal(props.pastedLink);
+    }
+  }, [props.pastedLink]);
+
+  const handleCreate = () => {
+    console.log("added drawer item");
+    toast.success("added drawer item to conversation");
+  };
+
+  const handleCancel = () => {
+    toast.success("closing");
+  };
+
+  return (
+    <Modal
+      title="Basic Modal"
+      onOk={handleCreate}
+      onCancel={handleCancel}
+      visible={props.show}
+      {...props}
+    >
+      <span className="flex flex-col">
+        <span className="flex flex-col items-start">
+          <span className="text-lg">Link</span>
+          <span className="text-gray-300 text-xs mb-2">
+            Please make sure this is valid for others to access.
+          </span>
+          {/* icon and link input */}
+          <span className="flex flex-row items-center space-x-2 w-full">
+            <LinkIcon
+              className="text-3xl"
+              linkType={Link.getLinkType(linkVal)}
+            />
+
+            <input
+              autoFocus
+              className="flex-1 rounded-lg bg-gray-50 p-3"
+              value={linkVal}
+              placeholder="https://jira.atlassian.com/team/xxx"
+              onChange={(e) => setLinkVal(e.target.value)}
+            />
+          </span>
+        </span>
+      </span>
+    </Modal>
+  );
+}

packages/web/components/Drawer/LinkIcon.tsx

@@ -10,7 +10,7 @@ import {
 } from "react-icons/fa";
 import Link, { LinkType } from "@nirvana/common/models/conversation";
 
-import { SiGooglemeet } from "react-icons/si";
+import { SiGooglemeet, SiZoom } from "react-icons/si";
 
 export default function LinkIcon(props: {
   className?: string;
@@ -61,6 +61,8 @@ export default function LinkIcon(props: {
       return (
         <SiGooglemeet {...rest} className={`${className} text-emerald-500 `} />
       );
+    case LinkType.zoom:
+      return <SiZoom {...rest} className={`${className} text-sky-500 `} />;
     default:
       return (
         <FaFileAlt {...rest} className={`${className} text-orange-500 `} />

packages/web/components/MainTabsOrPages/ViewConvo.tsx

@@ -55,7 +55,9 @@ import { firestoreDb as db } from "../../services/firebaseService";
 import Collections from "@nirvana/common/services/collections";
 import TimelineAudioClip from "../Conversations/TimelineAudioClip";
 import Modal from "antd/lib/modal/Modal";
-import { configure } from "react-hotkeys";
+import { configure, GlobalHotKeys, KeyMap } from "react-hotkeys";
+import CreateItemModal from "../Drawer/CreateItemModal";
+import isValidHttpUrl from "../../helpers/urlHelper";
 
 const testDrawerItems: {
   linkType: LinkType;
@@ -240,18 +242,44 @@ export default function ViewConvo(props: { conversationId: string }) {
   const isRecording = useRecoilValue(isRecordingAtom);
   const audioQueueCurrentItem = useRecoilValue(audioQueueCurrentClipSelector);
 
+  const [showItemModal, setShowItemModal] = useState<boolean>(false);
+  const [pastedLink, setPastedLink] = useState<string>("");
+
+  const handleOpenDrawerItemModal = () => {
+    navigator.clipboard
+      .readText()
+      .then((text) => {
+        console.log("Pasted content: ", text);
+
+        // check that the link is valid
+        if (!isValidHttpUrl(text)) {
+          toast.error("Not a valid link");
+          return;
+        }
+
+        // set it as we should show modal regardless now
+        setPastedLink(text);
+
+        setShowItemModal(true);
+      })
+      .catch((err) => {
+        console.error("Failed to read clipboard contents: ", err);
+        toast.error("Please enable permissions for clipboard");
+      });
+  };
+
+  const keyMap: KeyMap = {
+    PASTE_LINK: "ctrl+v",
+  };
+
+  const handlers = {
+    PASTE_LINK: handleOpenDrawerItemModal,
+  };
+
   return (
     <>
-      {/* <Modal
+      <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
-        title="Basic Modal"
+      <CreateItemModal pastedLink={pastedLink} show={showItemModal} />
-        visible={currentConvoModal == ConvoModal.editTldr}
-        onOk={handleEditTldr}
-        onCancel={handleCloseModal}
-      >
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal> */}
 
       <div className="flex flex-col items-stretch mt-5 space-y-10">
         {/* convo name and action buttons on top */}