Skip to content

feat: meeting recorder style updates, highlights and logs clean up #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 9, 2025
Merged

feat: meeting recorder style updates, highlights and logs clean up #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aff6daf
chore: cleanup logs
omgate234 Sep 9, 2025
5ccddb7
feat: highlights and modal size
omgate234 Sep 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 84 additions & 3 deletions src/components/canvas-handlers/meeting-recorder/MeetingAnalysisModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div
v-if="isOpen"
ref="modalRef"
class="max-h-[8] vdb-c-select-none vdb-c-border vdb-c-border-[#E5E7EB] vdb-c-bg-[#FFFFFF]"
class="vdb-c-max-h-[80%] vdb-c-select-none vdb-c-border vdb-c-border-[#E5E7EB] vdb-c-bg-[#FFFFFF]"
:class="
isFloating
? 'vdb-c-absolute vdb-c-z-10 vdb-c-overflow-hidden vdb-c-rounded-12 vdb-c-shadow-[0_8px_24px_rgba(0,0,0,0.08)]'
Expand All @@ -15,7 +15,7 @@
>
<!-- Shell -->
<div
class="vdb-c-flex vdb-c-max-h-[80vh] vdb-c-flex-col vdb-c-items-start vdb-c-overflow-hidden vdb-c-pb-24 vdb-c-transition-all vdb-c-duration-300"
class="scrollbar-hide vdb-c-flex vdb-c-h-full vdb-c-flex-col vdb-c-items-start vdb-c-overflow-hidden vdb-c-pb-24 vdb-c-transition-all vdb-c-duration-300"
:class="isFloating ? 'vdb-c-rounded-12' : 'vdb-c-rounded-0'"
>
<!-- Header -->
Expand Down Expand Up @@ -60,7 +60,7 @@

<!-- Main (scroll area) -->
<div
class="scrollbar-hide vdb-c-flex vdb-c-w-full vdb-c-flex-1 vdb-c-flex-col vdb-c-items-start vdb-c-gap-30 vdb-c-overflow-y-auto vdb-c-px-20 vdb-c-py-16"
class="scrollbar-hide vdb-c-flex vdb-c-min-h-0 vdb-c-w-full vdb-c-flex-1 vdb-c-flex-col vdb-c-items-start vdb-c-gap-30 vdb-c-overflow-y-auto vdb-c-px-20 vdb-c-py-16"
>
<!-- Live Insights -->
<section
Expand Down Expand Up @@ -91,6 +91,47 @@
</div>
</div>

<!-- Highlights Card -->
<div
class="vdb-c-flex vdb-c-w-full vdb-c-flex-col vdb-c-items-center vdb-c-justify-center vdb-c-gap-16 vdb-c-rounded-[10px] vdb-c-border vdb-c-border-yellow-200 vdb-c-bg-yellow-50 vdb-c-p-12"
>
<div
class="vdb-c-flex vdb-c-w-full vdb-c-flex-col vdb-c-items-start vdb-c-gap-12"
>
<div
class="vdb-c-inline-flex vdb-c-items-center vdb-c-gap-12 vdb-c-rounded-[48px] vdb-c-bg-white vdb-c-px-12 vdb-c-py-8 vdb-c-text-[13px] vdb-c-font-[600] vdb-c-text-black"
>
Highlights
</div>
<div
v-if="highlights.length === 0"
class="vdb-c-text-[13px] vdb-c-text-[#6B7280]"
>
No highlights available
</div>
<ul
v-else
class="scrollbar-hide vdb-c-max-h-[200px] vdb-c-w-full vdb-c-list-disc vdb-c-overflow-auto vdb-c-pl-20"
>
<li
v-for="(item, idx) in visibleHighlights"
:key="'hl-' + idx + '-' + item.text"
class="vdb-c-text-[14px] vdb-c-leading-[24px] vdb-c-text-black"
>
{{ normalize(item.text) }}
</li>
</ul>
</div>

<button
v-if="highlights.length > 2"
class="vdb-c-inline-flex vdb-c-items-center vdb-c-gap-1 vdb-c-rounded-[999px] vdb-c-border vdb-c-border-[#EFEFEF] vdb-c-bg-white vdb-c-p-8 vdb-c-text-[13px] vdb-c-font-[500] vdb-c-leading-[16px] vdb-c-tracking-[0.065px] vdb-c-text-black vdb-c-transition hover:vdb-c-bg-[#F9FAFB]"
@click="toggleSeeAll('highlights')"
>
{{ showAllHighlights ? "See less" : "See all" }}
</button>
</div>

<!-- High Priority Card -->
<div
class="vdb-c-flex vdb-c-w-full vdb-c-flex-col vdb-c-items-center vdb-c-justify-center vdb-c-gap-16 vdb-c-rounded-[10px] vdb-c-border vdb-c-border-[#FFE9D3] vdb-c-bg-[#FFF5EC] vdb-c-p-12"
Expand All @@ -103,7 +144,14 @@
>
High Priority
</div>
<div
v-if="highPriority.length === 0"
class="vdb-c-text-[13px] vdb-c-text-[#6B7280]"
>
No high priority insights available
</div>
<ul
v-else
class="scrollbar-hide vdb-c-max-h-[200px] vdb-c-w-full vdb-c-list-disc vdb-c-overflow-auto vdb-c-pl-20"
>
<li
Expand Down Expand Up @@ -138,7 +186,14 @@
Opportunity
</div>

<div
v-if="opportunities.length === 0"
class="vdb-c-text-[13px] vdb-c-text-[#6B7280]"
>
No opportunities available
</div>
<ul
v-else
class="scrollbar-hide vdb-c-max-h-[200px] vdb-c-w-full vdb-c-list-disc vdb-c-overflow-auto vdb-c-pl-20"
>
<li
Expand Down Expand Up @@ -183,7 +238,14 @@
Suggested Questions/Actions
</div>

<div
v-if="questions.length === 0"
class="vdb-c-text-[13px] vdb-c-text-[#6B7280]"
>
No suggested questions or actions
</div>
<TransitionGroup
v-else
name="list-fade"
tag="ul"
class="scrollbar-hide vdb-c-max-h-[200px] vdb-c-w-full vdb-c-list-disc vdb-c-overflow-auto vdb-c-pl-20"
Expand Down Expand Up @@ -221,6 +283,13 @@
</div>

<div
v-if="localChecklist.length === 0"
class="vdb-c-text-[13px] vdb-c-text-[#6B7280]"
>
No checklist items
</div>
<div
v-else
class="vdb-c-flex vdb-c-w-full vdb-c-flex-col vdb-c-items-start vdb-c-gap-12"
>
<TransitionGroup
Expand Down Expand Up @@ -345,9 +414,15 @@ const opportunities = computed(() =>
(x) => (x.type || "").toLowerCase() === "opportunity",
),
);
const highlights = computed(() =>
liveInsights.value.filter(
(x) => (x.type || "").toLowerCase() === "highlights",
),
);

const showAllHigh = ref(false);
const showAllOpp = ref(false);
const showAllHighlights = ref(false);
const latestTwo = (arr) => (arr.length <= 2 ? arr : arr.slice(-2));

const visibleHighPriority = computed(() =>
Expand All @@ -356,6 +431,9 @@ const visibleHighPriority = computed(() =>
const visibleOpportunities = computed(() =>
showAllOpp.value ? opportunities.value : latestTwo(opportunities.value),
);
const visibleHighlights = computed(() =>
showAllHighlights.value ? highlights.value : latestTwo(highlights.value),
);

/**
* Snap the floating modal to the parent container's top-right corner
Expand Down Expand Up @@ -399,6 +477,8 @@ watch(
function toggleSeeAll(which) {
if (which === "high") showAllHigh.value = !showAllHigh.value;
if (which === "opp") showAllOpp.value = !showAllOpp.value;
if (which === "highlights")
showAllHighlights.value = !showAllHighlights.value;
}

function toggleChecklist(idx) {
Expand Down Expand Up @@ -449,6 +529,7 @@ watch(
if (open) {
showAllHigh.value = false;
showAllOpp.value = false;
showAllHighlights.value = false;
// Ensure correct initial anchor when opening in floating mode
if (props.isFloating) snapToTopRight();
}
Expand Down
25 changes: 1 addition & 24 deletions src/components/canvas-handlers/meeting-recorder/MeetingRecorderCanvas.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@

<script setup>
import { useVideoDBChat } from "../../../context";
import { ref, watch, computed } from "vue";
import { ref, computed } from "vue";
import Button from "./Button.vue";
import Robot from "./Robot.vue";
import Live from "./Live.vue";
Expand All @@ -62,29 +62,6 @@ const props = defineProps({
// Use content from canvas state instead of props
const content = computed(() => canvasState.content || {});

// Watch for content changes to update canvas state
watch(
() => content.value,
(newContent) => {
console.log("MeetingRecorderCanvas content updated:", newContent);

// If content has live_analysis, we might want to show live analysis button
if (newContent?.live_analysis && newContent.live_analysis.length > 0) {
// Live analysis is available
console.log("Live analysis data available:", newContent.live_analysis);
}

// If content has meeting_assistant data, we can show meeting analysis
if (newContent?.meeting_assistant) {
console.log(
"Meeting assistant data available:",
newContent.meeting_assistant,
);
}
},
{ deep: true, immediate: true },
);

function openMeetingAnalysis() {
isMeetingAnalysisOpen.value = true;
isFloating.value = true; // start in floating mode
Expand Down
15 changes: 4 additions & 11 deletions src/components/message-handlers/MeetingRecorder.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,7 @@ const mainGoals = [
"Strategic Planning",
"Daily Standup",
"Client meeting",
"Demo Showcase",
"Other",
];
const selectedMainGoals = ref(new Set()); // empty
Expand Down Expand Up @@ -263,11 +264,7 @@ function toggleTopic(t) {
}

const canSave = computed(
() =>
objective.value.trim().length > 0 &&
selectedTopics.value.size > 0 &&
(selectedMainGoals.value.size > 0 ||
discussionTopicText.value.trim().length > 0),
() => objective.value.trim().length > 0 && selectedMainGoals.value.size > 0,
);

/* chat ctx */
Expand All @@ -285,11 +282,7 @@ onMounted(() => {
watch(
() => props.content,
(c) => {
console.log(">>> CanvasState", canvasState);

console.log(">>> CanvasState-Status", canvasState.show, canvasState.type);
if (canvasState.show && canvasState.type === "meeting_recorder") {
console.log("canvasState.content", c);
canvasState.content = c;
}
},
Expand All @@ -299,7 +292,6 @@ watch(
watch(
() => message.value?.metadata,
(m) => {
console.log(">>> Message Metadata", message.value);
const ctx = m?.meeting_context;
if (!ctx) return;
if (Array.isArray(ctx.main_goals))
Expand Down Expand Up @@ -328,7 +320,8 @@ async function handleSave() {
},
};

appendMessageMetadata && appendMessageMetadata(props.msgId, metadata);
const targetMsgId = props.content?.msg_id || props.msgId;
appendMessageMetadata && appendMessageMetadata(targetMsgId, metadata);
openCanvas && openCanvas("meeting_recorder", props.content);

// 2) Auto-close the drawer
Expand Down