Merge pull request #100 from omgate234/feat/meeting-recorder

Feat/meeting recorder

Author: 0xrohitgarg

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.0.41]() - 2025-09-15
+## Improved
+- Bump Videodb Player to 0.0.6, which disposes the player on unmount
+
+
 ## [0.0.40]() - 2025-06-01
 ## Fixed 
 - Default screen will not display demo videos if images and audios are uploaded

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@videodb/chat-vue",
   "description": "Chat component for Director",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "author": "VideoDB",
   "license": "Apache-2.0",
   "private": false,
@@ -68,15 +68,14 @@
     "vue-tsc": "^2.0.29"
   },
   "dependencies": {
-    "@videodb/player-vue": "^0.0.5",
+    "@videodb/player-vue": "~0.0.6",
     "dayjs": "^1.11.13",
     "katex": "^0.16.11",
     "marked": "^4.2.5",
     "marked-katex-extension": "^5.1.2",
     "prismjs": "^1.29.0",
     "socket.io-client": "^4.7.5",
     "swiper": "^11.1.10",
-    "uuid": "^10.0.0",
     "vue3-popper": "^1.5.0"
   }
 }

package.json

@@ -119,7 +119,6 @@
 </template>
 
 <script setup>
-import { v4 as uuidv4 } from "uuid";
 import { computed, nextTick, ref, watch } from "vue";
 import { useVideoDBChat } from "../../context";
 import ChatEnterIcon from "../icons/ChatEnter.vue";
@@ -285,7 +284,7 @@ const handlePaste = (event) => {
       const newImageAttachment = {
         type: "image",
         image_data: file,
-        key: uuidv4(),
+        key: crypto.randomUUID(),
         upload: true,
         upload_status: "in_queue",
       };
@@ -301,7 +300,7 @@ const handleFileUpload = (event) => {
     const newImageAttachment = {
       type: "image",
       image_data: file,
-      key: uuidv4(),
+      key: crypto.randomUUID(),
       upload: true,
       upload_status: "in_queue",
     };

src/components/chat/ChatInput.vue

@@ -9,7 +9,7 @@
     <div class="vdb-c-flex vdb-c-h-full vdb-c-w-full">
       <!-- Collapsible Sidebar -->
       <Sidebar
-        v-if="sidebarConfig.enabled"
+        v-if="showSidebar && sidebarConfig.enabled"
         ref="sidebarRef"
         :status="
           configStatus !== null && isSetupComplete ? 'active' : 'inactive'
@@ -44,6 +44,7 @@
         "
         @session-click="handleSessionClick"
         @collection-click="handleCollectionClick"
+        @share-session="handleShareSession"
       />
 
       <!-- Main Content -->
@@ -68,6 +69,7 @@
             >
               <!-- Header -->
               <div
+                v-if="showHeader"
                 class="vdb-c-sticky vdb-c-top-0 vdb-c-z-40 vdb-c-flex vdb-c-w-full vdb-c-items-center vdb-c-justify-center vdb-c-bg-white vdb-c-px-12 md:vdb-c-px-[30px]"
                 ref="headerRef"
               >
@@ -200,6 +202,7 @@
 
           <!-- Chat Input -->
           <div
+            v-if="showChatInput"
             class="vdb-c-chat-input-container vdb-c-transition-all vdb-c-duration-300 vdb-c-ease-in-out"
             :class="{
               'vdb-c-pointer-events-none vdb-c-opacity-20': !(
@@ -326,6 +329,14 @@
       @upload="handleUpload"
       @cancel-upload="showUploadDialog = false"
     />
+
+    <!-- Share Modal -->
+    <ShareModal
+      :show-dialog="showShareModal"
+      :session-id="sessionToShare?.session_id"
+      :on-make-public="makeSessionPublic"
+      @close="showShareModal = false"
+    />
   </section>
 </template>
 
@@ -348,6 +359,7 @@ import UploadVideoQueryCard from "./elements/UploadVideoQueryCard.vue";
 import ConfirmModal from "../modals/ConfirmModal.vue";
 import CreateCollectionModal from "../modals/CreateCollectionModal.vue";
 import DeleteCollectionErrorModal from "../modals/DeleteCollectionErrorModal.vue";
+import ShareModal from "../modals/ShareModal.vue";
 import UploadModal from "../modals/UploadModal.vue";
 import Header from "./elements/Header.vue";
 
@@ -447,6 +459,18 @@ const props = defineProps({
       ],
     }),
   },
+  showSidebar: {
+    type: Boolean,
+    default: true,
+  },
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+  showChatInput: {
+    type: Boolean,
+    default: true,
+  },
 });
 const emit = defineEmits([]);
 
@@ -492,6 +516,7 @@ const {
   renameSession,
   saveMeetingContext,
   fetchMeetingContext,
+  makeSessionPublic,
 } = useChatHook(props.chatHookConfig);
 
 const {
@@ -566,6 +591,8 @@ const showDeleteImageDialog = ref(false);
 const imageToDelete = ref(null);
 const showDeleteCollectionErrorModal = ref(false);
 const deleteCollectionErrorCode = ref(null);
+const showShareModal = ref(false);
+const sessionToShare = ref(null);
 
 const isSetupComplete = computed(() => {
   return (
@@ -786,6 +813,11 @@ const handleUpdateSessionName = async ({ sessionId: _sessionId, name }) => {
   }
 };
 
+const handleShareSession = (session) => {
+  sessionToShare.value = session;
+  showShareModal.value = true;
+};
+
 // --- Upload Dialog Handlers ---
 const showUploadDialog = ref(false);
 const handleUpload = async (uploadData) => {

src/components/chat/ChatInterface.vue

@@ -327,6 +327,15 @@
                           >Rename</span
                         >
                       </button>
+                      <button
+                        @click.stop="shareSession(session)"
+                        class="vdb-c-mb-[2.5px] vdb-c-flex vdb-c-w-full vdb-c-items-center vdb-c-gap-8 vdb-c-rounded-lg vdb-c-px-12 vdb-c-py-8 hover:vdb-c-bg-roy"
+                      >
+                        <ShareIcon />
+                        <span class="vdb-c-text-sm vdb-c-text-black"
+                          >Share</span
+                        >
+                      </button>
                       <div
                         class="vdb-c-my-2 vdb-c-mb-[2.5px] vdb-c-h-px vdb-c-bg-[#EDEDED]"
                       ></div>
@@ -423,6 +432,7 @@ import CopyIcon from "../../icons/CopyIcon.vue";
 import CheckIcon from "../../icons/Check.vue";
 import DotVertical from "../../icons/DotVertical.vue";
 import EditIcon from "../../icons/Edit.vue";
+import ShareIcon from "../../icons/Share.vue";
 import Popper from "vue3-popper";
 
 const props = defineProps({
@@ -515,6 +525,7 @@ const emit = defineEmits([
   "create-collection",
   "delete-collection",
   "update-session-name",
+  "share-session",
 ]);
 
 const closeSidebar = () => {
@@ -630,6 +641,10 @@ const copySessionId = async (sessionId) => {
     console.error("Failed to copy session ID", error);
   }
 };
+
+const shareSession = (session) => {
+  emit("share-session", session);
+};
 </script>
 
 <style>

src/components/chat/elements/Sidebar.vue

@@ -1,5 +1,4 @@
 import io from "socket.io-client";
-import { v4 as uuidv4 } from "uuid";
 import { computed, onBeforeMount, reactive, ref, toRefs, watch } from "vue";
 
 const fetchData = async (rootUrl, endpoint) => {
@@ -189,6 +188,34 @@ export function useVideoDBAgent(config) {
     return res;
   };
 
+  const makeSessionPublic = async (sessionId, isPublic = true) => {
+    const res = {};
+    try {
+      const response = await fetch(`${httpUrl}/session/${sessionId}/public`, {
+        method: "PUT",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ is_public: isPublic }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      const data = await response.json();
+      res.status = "success";
+      res.success = true;
+      res.data = data;
+    } catch (error) {
+      res.status = "error";
+      res.success = false;
+      res.error = error.message;
+    }
+    return res;
+  };
+
   const refetchCollectionVideos = async () => {
     fetchCollectionVideos(session.collectionId).then((res) => {
       activeCollectionVideos.value = res.data;
@@ -322,7 +349,7 @@ export function useVideoDBAgent(config) {
   const loadSession = (sessionId) => {
     let fetchPastMessages = true;
     if (!sessionId) {
-      sessionId = uuidv4();
+      sessionId = crypto.randomUUID();
       fetchPastMessages = false;
     }
     if (debug) console.log("debug :videodb-chat session loading", sessionId);
@@ -692,5 +719,6 @@ export function useVideoDBAgent(config) {
     generateAudioUrl,
     saveMeetingContext,
     fetchMeetingContext,
+    makeSessionPublic,
   };
 }

src/components/hooks/useVideoDBAgent.js

@@ -0,0 +1,42 @@
+<template>
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    :class="className"
+  >
+    <path
+      d="M7.81825 1.18188C7.64251 1.00615 7.35759 1.00615 7.18185 1.18188L4.18185 4.18188C4.00611 4.35762 4.00611 4.64254 4.18185 4.81828C4.35759 4.99401 4.64251 4.99401 4.81825 4.81828L7.05005 2.58648V9.49996C7.05005 9.74849 7.25152 9.94996 7.50005 9.94996C7.74858 9.94996 7.95005 9.74849 7.95005 9.49996V2.58648L10.1819 4.81828C10.3576 4.99401 10.6425 4.99401 10.8182 4.81828C10.994 4.64254 10.994 4.35762 10.8182 4.18188L7.81825 1.18188ZM2.5 9.99997C2.77614 9.99997 3 10.2238 3 10.5V12C3 12.5538 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2238 12.2239 9.99997 12.5 9.99997C12.7761 9.99997 13 10.2238 13 10.5V12C13 13.104 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2238 2.22386 9.99997 2.5 9.99997Z"
+      :fill="fill"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+</template>
+
+<script>
+import { defineProps } from "vue";
+export default {
+  name: "Share",
+};
+
+defineProps({
+  className: {
+    type: String,
+    default: "",
+  },
+  fill: {
+    type: String,
+    default: "#FFF5EC",
+  },
+});
+</script>
+
+<style scoped>
+svg path {
+  color: currentColor;
+  fill: currentColor;
+}
+</style>