getting icons showing for link and copy pasting working

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
-        title="Basic Modal"
-        visible={currentConvoModal == ConvoModal.editTldr}
-        onOk={handleEditTldr}
-        onCancel={handleCloseModal}
-      >
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal> */}
+      <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
+      <CreateItemModal pastedLink={pastedLink} show={showItemModal} />
 
       <div className="flex flex-col items-stretch mt-5 space-y-10">
         {/* convo name and action buttons on top */}