+
+
+
+
+ Notes
+
+
+
+
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: '26c17445-fbfb-4b34-99d6-f461e734ca97',
+ name: 'hello-world-front-component',
+ description: 'A sample front component',
+ component: HelloWorld,
+});
diff --git a/packages/twenty-apps/hello-world/src/logic-functions/hello-world.ts b/packages/twenty-apps/hello-world/src/logic-functions/hello-world.ts
new file mode 100644
index 00000000000..10cacba13f2
--- /dev/null
+++ b/packages/twenty-apps/hello-world/src/logic-functions/hello-world.ts
@@ -0,0 +1,18 @@
+import { defineLogicFunction } from 'twenty-sdk';
+
+const handler = async (): Promise<{ message: string }> => {
+ return { message: 'Hello, World!' };
+};
+
+export default defineLogicFunction({
+ universalIdentifier: '4f0b7137-1399-4e50-ac00-3c3bb2555c38',
+ name: 'hello-world-logic-function',
+ description: 'A simple logic function',
+ timeoutSeconds: 5,
+ handler,
+ httpRouteTriggerSettings: {
+ path: '/hello-world-logic-function',
+ httpMethod: 'GET',
+ isAuthRequired: false,
+ },
+});
diff --git a/packages/twenty-apps/hello-world/src/logic-functions/post-install.ts b/packages/twenty-apps/hello-world/src/logic-functions/post-install.ts
new file mode 100644
index 00000000000..b28118597f5
--- /dev/null
+++ b/packages/twenty-apps/hello-world/src/logic-functions/post-install.ts
@@ -0,0 +1,13 @@
+import { definePostInstallLogicFunction, type InstallLogicFunctionPayload } from 'twenty-sdk';
+
+const handler = async (payload: InstallLogicFunctionPayload): PromiseHello, World!
+This is your first front component.
+Seeding call recordings...
;
+ }
+
+ if (status === 'error') {
+ return Failed to seed call recordings.
;
+ }
+
+ return Seeded {count} call recordings.
;
+};
+
+export default defineFrontComponent({
+ universalIdentifier:
+ SEED_CALL_RECORDINGS_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
+ name: 'Seed Call Recordings',
+ description: 'Seeds the workspace with mock call recordings for testing',
+ isHeadless: true,
+ component: SeedCallRecordings,
+ command: {
+ universalIdentifier: SEED_CALL_RECORDINGS_COMMAND_UNIVERSAL_IDENTIFIER,
+ label: 'Seed call recordings',
+ icon: 'IconDatabase',
+ isPinned: false,
+ availabilityType: 'GLOBAL',
+ },
+});
diff --git a/packages/twenty-apps/internal/call-recording/src/front-components/summarize-person-recordings.tsx b/packages/twenty-apps/internal/call-recording/src/front-components/summarize-person-recordings.tsx
new file mode 100644
index 00000000000..0a6eabb33e6
--- /dev/null
+++ b/packages/twenty-apps/internal/call-recording/src/front-components/summarize-person-recordings.tsx
@@ -0,0 +1,186 @@
+import { useEffect, useState } from 'react';
+import { SummaryViewer } from 'src/components/SummaryViewer';
+import { SummaryViewerSkeleton } from 'src/components/SummaryViewerSkeleton';
+import {
+ SUMMARIZE_PERSON_RECORDINGS_COMMAND_UNIVERSAL_IDENTIFIER,
+ SUMMARIZE_PERSON_RECORDINGS_FRONT_COMPONENT_UNIVERSAL_IDENTIFIER,
+} from 'src/constants/summarize-person-recordings-universal-identifiers';
+import { defineFrontComponent, useRecordId } from 'twenty-sdk';
+import { CoreApiClient } from 'twenty-sdk/generated';
+import { isDefined } from 'twenty-shared/utils';
+
+const SUMMARIZATION_SYSTEM_PROMPT = [
+ 'You are a helpful assistant that summarizes call transcripts.',
+ 'Provide a concise summary with:',
+ '1) A brief overview of the calls',
+ '2) Key themes across all calls',
+ '3) Action items (if any)',
+ '4) Risks or opportunities identified',
+ 'Use markdown formatting.',
+].join(' ');
+
+type Recording = {
+ id: string;
+ name: string | null;
+ createdAt: string;
+ summary: { markdown: string | null } | null;
+};
+
+const summarizeAllRecordings = async (
+ recordings: Recording[],
+): Promise
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/twenty-companion/src/main.js b/packages/twenty-companion/src/main.js
new file mode 100644
index 00000000000..bc82859c10b
--- /dev/null
+++ b/packages/twenty-companion/src/main.js
@@ -0,0 +1,1969 @@
+const { app, BrowserWindow, ipcMain, protocol, Notification, shell, nativeImage } = require('electron');
+const path = require('node:path');
+const url = require('url');
+const fs = require('fs');
+const RecallAiSdk = require('@recallai/desktop-sdk');
+const axios = require('axios');
+const OpenAI = require('openai');
+const sdkLogger = require('./sdk-logger');
+const twentyClient = require('./twenty-client');
+require('dotenv').config();
+
+const twentyIconDataUrl = require('./assets/twenty-logo-256.png');
+
+function getAppIcon() {
+ try {
+ return nativeImage.createFromDataURL(twentyIconDataUrl);
+ } catch (error) {
+ console.error('Failed to load app icon:', error);
+ return undefined;
+ }
+}
+
+// Function to get the OpenRouter headers
+function getHeaderLines() {
+ return [
+ "HTTP-Referer: https://recall.ai", // Replace with your actual app's URL
+ "X-Title: Twenty AI Notetaker"
+ ];
+}
+
+let openai = null;
+
+function getOpenAIClient() {
+ if (openai) return openai;
+ if (!process.env.OPENROUTER_KEY) return null;
+
+ openai = new OpenAI({
+ baseURL: "https://openrouter.ai/api/v1",
+ apiKey: process.env.OPENROUTER_KEY,
+ defaultHeaders: {
+ "HTTP-Referer": "https://recall.ai",
+ "X-Title": "Twenty AI Notetaker"
+ }
+ });
+ return openai;
+}
+
+// Define available models with their capabilities
+const MODELS = {
+ // Primary models
+ PRIMARY: "anthropic/claude-3.7-sonnet",
+ FALLBACKS: []
+};
+
+// Handle creating/removing shortcuts on Windows when installing/uninstalling.
+if (require('electron-squirrel-startup')) {
+ app.quit();
+}
+
+// Check Twenty CRM integration status at startup
+twentyClient.isConfigured();
+
+// Store detected meeting information
+let detectedMeeting = null;
+
+let mainWindow;
+
+const createWindow = () => {
+ // Create the browser window.
+ mainWindow = new BrowserWindow({
+ width: 1024,
+ height: 768,
+ icon: getAppIcon(),
+ webPreferences: {
+ preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
+ contextIsolation: true,
+ nodeIntegration: false,
+ },
+ titleBarStyle: 'hiddenInset',
+ backgroundColor: '#f9f9f9',
+ });
+
+ // Allow the debug panel header to act as a drag region
+ mainWindow.on('ready-to-show', () => {
+ try {
+ // Set regions that can be used to drag the window
+ if (process.platform === 'darwin') {
+ // Only needed on macOS
+ mainWindow.setWindowButtonVisibility(true);
+ }
+ } catch (error) {
+ console.error('Error setting drag regions:', error);
+ }
+ });
+
+ // and load the index.html of the app.
+ mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
+
+ // Open the DevTools in development
+ if (process.env.NODE_ENV === 'development') {
+ // mainWindow.webContents.openDevTools();
+ }
+
+ // Listen for navigation events
+ ipcMain.on('navigate', (event, page) => {
+ if (page === 'note-editor') {
+ mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY + '/../note-editor/index.html');
+ } else if (page === 'home') {
+ mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
+ }
+ });
+};
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.whenReady().then(() => {
+ if (process.platform === 'darwin' && app.dock) {
+ const dockIcon = getAppIcon();
+ if (dockIcon && !dockIcon.isEmpty()) {
+ app.dock.setIcon(dockIcon);
+ console.log('Twenty dock icon set successfully');
+ } else {
+ console.error('Failed to set dock icon: image is empty or undefined');
+ }
+ }
+
+ console.log("Registering IPC handlers...");
+ // Log all registered IPC handlers
+ console.log("IPC handlers:", Object.keys(ipcMain._invokeHandlers));
+
+ // Set up SDK logger IPC handlers
+ ipcMain.on('sdk-log', (event, logEntry) => {
+ // Forward logs from renderer to any open windows
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.webContents.send('sdk-log', logEntry);
+ }
+ });
+
+ // Set up logger event listener to send logs from main to renderer
+ sdkLogger.onLog((logEntry) => {
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.webContents.send('sdk-log', logEntry);
+ }
+ });
+
+ // Create meetings file if it doesn't exist
+ try {
+ if (!fs.existsSync(meetingsFilePath)) {
+ const initialData = { upcomingMeetings: [], pastMeetings: [] };
+ fs.writeFileSync(meetingsFilePath, JSON.stringify(initialData, null, 2));
+ }
+ } catch (e) {
+ console.error("Couldn't create the meetings file:", e);
+ }
+
+ // Initialize the Recall.ai SDK
+ initSDK();
+
+ createWindow();
+
+ // When the window is ready, send the initial meeting detection status
+ mainWindow.webContents.on('did-finish-load', () => {
+ // Send the initial meeting detection status
+ mainWindow.webContents.send('meeting-detection-status', { detected: detectedMeeting !== null });
+ });
+
+ // On OS X it's common to re-create a window in the app when the
+ // dock icon is clicked and there are no other windows open.
+ app.on('activate', () => {
+ if (BrowserWindow.getAllWindows().length === 0) {
+ createWindow();
+ }
+ });
+});
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+ if (process.platform !== 'darwin') {
+ app.quit();
+ }
+});
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and import them here.
+
+// Path to meetings data file in the user's Application Support directory
+const meetingsFilePath = path.join(app.getPath('userData'), 'meetings.json');
+
+// Global state to track active recordings
+const activeRecordings = {
+ // Map of recordingId -> {noteId, platform, state}
+ recordings: {},
+
+ // Register a new recording
+ addRecording: function (recordingId, noteId, platform = 'unknown') {
+ this.recordings[recordingId] = {
+ noteId,
+ platform,
+ state: 'recording',
+ startTime: new Date()
+ };
+ console.log(`Recording registered in global state: ${recordingId} for note ${noteId}`);
+ },
+
+ // Update a recording's state
+ updateState: function (recordingId, state) {
+ if (this.recordings[recordingId]) {
+ this.recordings[recordingId].state = state;
+ console.log(`Recording ${recordingId} state updated to: ${state}`);
+ return true;
+ }
+ return false;
+ },
+
+ // Remove a recording
+ removeRecording: function (recordingId) {
+ if (this.recordings[recordingId]) {
+ delete this.recordings[recordingId];
+ console.log(`Recording ${recordingId} removed from global state`);
+ return true;
+ }
+ return false;
+ },
+
+ // Get active recording for a note
+ getForNote: function (noteId) {
+ for (const [recordingId, info] of Object.entries(this.recordings)) {
+ if (info.noteId === noteId) {
+ return { recordingId, ...info };
+ }
+ }
+ return null;
+ },
+
+ // Get all active recordings
+ getAll: function () {
+ return { ...this.recordings };
+ }
+};
+
+// File operation manager to prevent race conditions on both reads and writes
+const fileOperationManager = {
+ isProcessing: false,
+ pendingOperations: [],
+ cachedData: null,
+ lastReadTime: 0,
+
+ // Read the meetings data with caching to reduce file I/O
+ readMeetingsData: async function () {
+ // If we have cached data that's recent (less than 500ms old), use it
+ const now = Date.now();
+ if (this.cachedData && (now - this.lastReadTime < 500)) {
+ return JSON.parse(JSON.stringify(this.cachedData)); // Deep clone
+ }
+
+ try {
+ // Read from file
+ const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
+ const data = JSON.parse(fileData);
+
+ // Update cache
+ this.cachedData = data;
+ this.lastReadTime = now;
+
+ return data;
+ } catch (error) {
+ console.error('Error reading meetings data:', error);
+ // If file doesn't exist or is invalid, return empty structure
+ return { upcomingMeetings: [], pastMeetings: [] };
+ }
+ },
+
+ // Schedule an operation that needs to update the meetings data
+ scheduleOperation: async function (operationFn) {
+ return new Promise((resolve, reject) => {
+ // Add this operation to the queue
+ this.pendingOperations.push({
+ operationFn, // This function will receive the current data and return updated data
+ resolve,
+ reject
+ });
+
+ // Process the queue if not already processing
+ if (!this.isProcessing) {
+ this.processQueue();
+ }
+ });
+ },
+
+ // Process the operation queue sequentially
+ processQueue: async function () {
+ if (this.pendingOperations.length === 0 || this.isProcessing) {
+ return;
+ }
+
+ this.isProcessing = true;
+
+ try {
+ // Get the next operation
+ const nextOp = this.pendingOperations.shift();
+
+ // Read the latest data
+ const currentData = await this.readMeetingsData();
+
+ try {
+ // Execute the operation function with the current data
+ const updatedData = await nextOp.operationFn(currentData);
+
+ // If the operation returned data, write it
+ if (updatedData) {
+ // Update cache immediately
+ this.cachedData = updatedData;
+ this.lastReadTime = Date.now();
+
+ // Write to file
+ await fs.promises.writeFile(meetingsFilePath, JSON.stringify(updatedData, null, 2));
+ }
+
+ // Resolve the operation's promise
+ nextOp.resolve({ success: true });
+ } catch (opError) {
+ console.error('Error in file operation:', opError);
+ nextOp.reject(opError);
+ }
+ } catch (error) {
+ console.error('Error in file operation manager:', error);
+
+ // If there was an operation that failed, reject its promise
+ if (this.pendingOperations.length > 0) {
+ const failedOp = this.pendingOperations.shift();
+ failedOp.reject(error);
+ }
+ } finally {
+ this.isProcessing = false;
+
+ // Check if more operations were added while we were processing
+ if (this.pendingOperations.length > 0) {
+ setImmediate(() => this.processQueue());
+ }
+ }
+ },
+
+ // Helper to write data directly - internally uses scheduleOperation
+ writeData: async function (data) {
+ return this.scheduleOperation(() => data); // Simply return the data to write
+ }
+};
+
+function buildRecallRecordingUrl(uploadId) {
+ if (!uploadId) return null;
+ return `recall://recording/${uploadId}`;
+}
+
+// Create a desktop SDK upload token
+async function createDesktopSdkUpload() {
+ try {
+ const response = await axios.get("http://localhost:13373/start-recording", { timeout: 10000 });
+
+ if (response.data.status !== 'success') {
+ console.error("Failed to create upload token:", response.data.message);
+ return null;
+ } else {
+ console.log("Upload token created successfully:", response.data.upload_token);
+ return response.data;
+ }
+ } catch (error) {
+ console.error("Error creating upload token:", JSON.stringify(error.errors || error.message || error));
+ if (error.response) {
+ console.error("Response data:", error.response.data);
+ console.error("Response status:", error.response.status);
+ }
+ return null;
+ }
+}
+
+// Poll Recall for the audio URL then call the Twenty end-recording logic function.
+// Recall may need time to process the upload after progress hits 100%.
+async function endCallRecordingWithRetry(windowId, maxAttempts = 10, delayMs = 5000) {
+ try {
+ const meetingsData = await fileOperationManager.readMeetingsData();
+ const meeting = meetingsData.pastMeetings.find(
+ (meetingItem) => meetingItem.recallUploadId === windowId
+ || meetingItem.recordingId === windowId,
+ );
+
+ if (!meeting?.twentyRecordId || !meeting?.recallRecordingId) {
+ console.log('[Twenty] No Twenty record or Recall recording ID found, skipping end-recording');
+ return;
+ }
+
+ for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+ try {
+ const recallResponse = await axios.get(
+ `http://localhost:13373/recording/${meeting.recallRecordingId}`,
+ { timeout: 15000 },
+ );
+
+ const audioUrl = recallResponse.data?.video_url || null;
+ const transcriptUrl = recallResponse.data?.transcript_url || null;
+
+ if (audioUrl) {
+ await twentyClient.endCallRecording({
+ callRecordingId: meeting.twentyRecordId,
+ audioUrl,
+ transcriptUrl,
+ participants: meeting.participants,
+ localTranscript: meeting.transcript || [],
+ });
+ return;
+ }
+ } catch (error) {
+ console.error(`[Twenty] Attempt ${attempt}/${maxAttempts} — error fetching recording:`, error.message);
+ }
+
+ if (attempt < maxAttempts) {
+ console.log(`[Twenty] Audio URL not ready, retrying in ${delayMs / 1000}s (${attempt}/${maxAttempts})`);
+ await new Promise((resolve) => setTimeout(resolve, delayMs));
+ }
+ }
+
+ console.error('[Twenty] Audio URL never became available, giving up');
+ } catch (error) {
+ console.error('Failed to end callRecording in Twenty:', error.message);
+ }
+}
+
+// Initialize the Recall.ai SDK
+function initSDK() {
+ console.log("Initializing Recall.ai SDK");
+
+ // Log the SDK initialization
+ sdkLogger.logApiCall('init', {
+ dev: process.env.NODE_ENV === 'development',
+ api_url: process.env.RECALLAI_API_URL
+ });
+
+ RecallAiSdk.init({
+ api_url: process.env.RECALLAI_API_URL
+ });
+
+ RecallAiSdk.addEventListener('permission-status', (evt) => {
+ console.log(`Permission: ${evt.permission}, Status: ${evt.status}`);
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.webContents.send('permission-status', evt);
+ }
+ });
+
+ RecallAiSdk.addEventListener('log', (evt) => {
+ if (evt.level === 'debug') return;
+
+ const prefix = `[SDK ${evt.level}] [${evt.subsystem}/${evt.category}]`;
+ if (evt.level === 'error') {
+ console.error(prefix, evt.message);
+ } else if (evt.level === 'warning') {
+ console.warn(prefix, evt.message);
+ } else {
+ console.log(prefix, evt.message);
+ }
+
+ // Track active speaker from LibbotMeetingRecorder participant updates
+ if (evt.message && evt.message.includes('isActiveSpeaker: true')) {
+ const nameMatch = evt.message.match(/name:\s*([^,]+),/);
+ if (nameMatch) {
+ const speakerName = nameMatch[1].trim();
+ if (speakerName !== currentActiveSpeaker) {
+ currentActiveSpeaker = speakerName;
+ console.log(`[speaker-debug] Active speaker changed to: ${currentActiveSpeaker}`);
+ }
+ }
+ }
+ });
+
+ // Listen for meeting detected events
+ RecallAiSdk.addEventListener('meeting-detected', (evt) => {
+ console.log("Meeting detected:", evt);
+
+ // Log the meeting detected event
+ sdkLogger.logEvent('meeting-detected', {
+ platform: evt.window.platform,
+ windowId: evt.window.id
+ });
+
+ detectedMeeting = evt;
+
+ // Map platform codes to readable names
+ const platformNames = {
+ 'zoom': 'Zoom',
+ 'google-meet': 'Google Meet',
+ 'slack': 'Slack',
+ 'teams': 'Microsoft Teams'
+ };
+
+ // Get a user-friendly platform name, or use the raw platform name if not in our map
+ const platformName = platformNames[evt.window.platform] || evt.window.platform;
+
+ // Send a notification
+ let notification = new Notification({
+ title: `${platformName} Meeting Detected`,
+ body: platformName,
+ });
+
+ // Handle notification click
+ notification.on('click', () => {
+ console.log("Notification clicked for platform:", platformName);
+ joinDetectedMeeting();
+ });
+
+ notification.show();
+
+ // Send the meeting detected status to the renderer process
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.webContents.send('meeting-detection-status', { detected: true });
+ }
+ });
+
+ // Listen for meeting updated events (to capture title and URL)
+ // NOTE: meeting-detected events do NOT guarantee title and URL will be populated.
+ // The meeting title and URL are only reliably available in meeting-updated events,
+ // which fire as the meeting metadata becomes available after initial detection.
+ RecallAiSdk.addEventListener('meeting-updated', async (evt) => {
+ console.log("Meeting updated:", evt);
+
+ const { window } = evt;
+
+ // Log the meeting updated event with the URL for tracking purposes
+ sdkLogger.logEvent('meeting-updated', {
+ platform: window.platform,
+ windowId: window.id,
+ title: window.title,
+ url: window.url
+ });
+
+ // Update the detectedMeeting object with the new information
+ if (detectedMeeting && detectedMeeting.window.id === window.id) {
+ detectedMeeting = {
+ ...detectedMeeting,
+ window: {
+ ...detectedMeeting.window,
+ title: window.title,
+ url: window.url
+ }
+ };
+
+ console.log("Updated meeting title:", window.title);
+
+ // If a note has already been created for this meeting, update its title retroactively
+ if (window.title && global.activeMeetingIds && global.activeMeetingIds[window.id]) {
+ const noteId = global.activeMeetingIds[window.id].noteId;
+
+ if (noteId) {
+ console.log("Updating existing note title for:", noteId);
+
+ try {
+ // Read the current meetings data
+ const meetingsData = await fileOperationManager.readMeetingsData();
+
+ // Find the meeting in pastMeetings
+ const meeting = meetingsData.pastMeetings.find(m => m.id === noteId);
+
+ if (meeting) {
+ const oldTitle = meeting.title;
+
+ // Update the title
+ meeting.title = window.title;
+
+ // Save the updated data
+ await fileOperationManager.writeData(meetingsData);
+ console.log(`Successfully updated meeting title from "${oldTitle}" to "${window.title}"`);
+
+ // Notify the renderer to update the UI
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.webContents.send('meeting-title-updated', {
+ meetingId: noteId,
+ newTitle: window.title
+ });
+ }
+ } else {
+ console.error("Meeting not found in pastMeetings with ID:", noteId);
+ }
+ } catch (error) {
+ console.error("Error updating meeting title:", error);
+ }
+ }
+ }
+ }
+ });
+
+ // Listen for meeting closed events
+ RecallAiSdk.addEventListener('meeting-closed', async (evt) => {
+ console.log("Meeting closed:", evt);
+
+ // Log the SDK meeting-closed event
+ sdkLogger.logEvent('meeting-closed', {
+ windowId: evt.window.id
+ });
+
+ // Clean up the global tracking when a meeting ends
+ if (evt.window && evt.window.id && global.activeMeetingIds && global.activeMeetingIds[evt.window.id]) {
+ console.log(`Cleaning up meeting tracking for: ${evt.window.id}`);
+ delete global.activeMeetingIds[evt.window.id];
+ }
+
+ detectedMeeting = null;
+
+ // Send the meeting closed status to the renderer process
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.webContents.send('meeting-detection-status', { detected: false });
+ }
+ });
+
+ // Listen for recording ended events
+ RecallAiSdk.addEventListener('recording-ended', async (evt) => {
+ console.log("Recording ended:", evt);
+
+ // Log the SDK recording-ended event
+ sdkLogger.logEvent('recording-ended', {
+ windowId: evt.window.id
+ });
+
+ try {
+ // Update the note with recording information
+ await updateNoteWithRecordingInfo(evt.window.id);
+
+ // Add a small delay before uploading (good practice for file system operations)
+ setTimeout(async () => {
+ try {
+ // Try to get a new upload token for the upload if needed
+ const uploadData = await createDesktopSdkUpload();
+
+ if (uploadData && uploadData.upload_token) {
+ console.log('Uploading recording with new upload token:', uploadData.upload_token);
+
+ // Log the uploadRecording API call
+ sdkLogger.logApiCall('uploadRecording', {
+ windowId: evt.window.id,
+ uploadToken: `${uploadData.upload_token.substring(0, 8)}...` // Log truncated token for security
+ });
+
+ await RecallAiSdk.uploadRecording({
+ windowId: evt.window.id,
+ uploadToken: uploadData.upload_token
+ });
+ } else {
+ // Fallback to regular upload
+ console.log('Uploading recording without new token');
+
+ // Log the uploadRecording API call (fallback)
+ sdkLogger.logApiCall('uploadRecording', {
+ windowId: evt.window.id
+ });
+
+ await RecallAiSdk.uploadRecording({ windowId: evt.window.id });
+ }
+ } catch (uploadError) {
+ console.error('Error during upload:', uploadError);
+ // Fallback to regular upload
+
+ // Log the uploadRecording API call (error fallback)
+ sdkLogger.logApiCall('uploadRecording', {
+ windowId: evt.window.id,
+ error: 'Fallback after error'
+ });
+
+ await RecallAiSdk.uploadRecording({ windowId: evt.window.id });
+ }
+ }, 3000); // Wait 3 seconds before uploading
+ } catch (error) {
+ console.error("Error handling recording ended:", error);
+ }
+ });
+
+ RecallAiSdk.addEventListener('permissions-granted', async (evt) => {
+ console.log("PERMISSIONS GRANTED");
+ });
+
+ // Track upload progress
+ RecallAiSdk.addEventListener('upload-progress', async (evt) => {
+ const { progress, window } = evt;
+ console.log(`Upload progress: ${progress}%`);
+
+ // Log the SDK upload-progress event
+ // sdkLogger.logEvent('upload-progress', {
+ // windowId: window.id,
+ // progress
+ // });
+
+ if (progress === 100) {
+ console.log(`Upload completed for recording: ${window.id}`);
+
+ if (twentyClient.isConfigured()) {
+ endCallRecordingWithRetry(window.id);
+ }
+ }
+ });
+
+ // Track SDK state changes
+ RecallAiSdk.addEventListener('sdk-state-change', async (evt) => {
+ const { sdk: { state: { code } }, window } = evt;
+ console.log("Recording state changed:", code, "for window:", window?.id);
+
+ // Log the SDK sdk-state-change event
+ sdkLogger.logEvent('sdk-state-change', {
+ state: code,
+ windowId: window?.id
+ });
+
+ // Update recording state in our global tracker
+ if (window && window.id) {
+ // Get the meeting note ID associated with this window
+ let noteId = null;
+ if (global.activeMeetingIds && global.activeMeetingIds[window.id]) {
+ noteId = global.activeMeetingIds[window.id].noteId;
+ }
+
+ // Update the recording state in our tracker
+ if (code === 'recording') {
+ console.log('Recording in progress...');
+ if (noteId) {
+ // If recording started, add it to our active recordings
+ activeRecordings.addRecording(window.id, noteId, window.platform || 'unknown');
+ }
+ } else if (code === 'paused') {
+ console.log('Recording paused');
+ activeRecordings.updateState(window.id, 'paused');
+ } else if (code === 'idle') {
+ console.log('Recording stopped');
+ activeRecordings.removeRecording(window.id);
+ }
+
+ // Notify renderer process about recording state change
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.webContents.send('recording-state-change', {
+ recordingId: window.id,
+ state: code,
+ noteId
+ });
+ }
+ }
+ });
+
+ // Listen for real-time transcript events
+ RecallAiSdk.addEventListener('realtime-event', async (evt) => {
+ // Only log non-video frame events to prevent flooding the logger
+ if (evt.event !== 'video_separate_png.data') {
+ console.log("Received realtime event:", evt.event);
+
+ // Log the SDK realtime-event event
+ sdkLogger.logEvent('realtime-event', {
+ eventType: evt.event,
+ windowId: evt.window?.id
+ });
+ }
+
+ // Handle different event types
+ if (evt.event === 'transcript.data' && evt.data && evt.data.data) {
+ await processTranscriptData(evt);
+ }
+ else if (evt.event === 'transcript.provider_data' && evt.data && evt.data.data) {
+ await processTranscriptProviderData(evt);
+ }
+ else if (evt.event === 'participant_events.join' && evt.data && evt.data.data) {
+ await processParticipantJoin(evt);
+ }
+ else if (evt.event === 'video_separate_png.data' && evt.data && evt.data.data) {
+ await processVideoFrame(evt);
+ }
+ });
+
+ // Handle errors
+ RecallAiSdk.addEventListener('error', async (evt) => {
+ console.error("RecallAI SDK Error:", evt);
+ const { type, message } = evt;
+
+ // Log the SDK error event
+ sdkLogger.logEvent('error', {
+ errorType: type,
+ errorMessage: message
+ });
+
+ // Show notification for errors
+ let notification = new Notification({
+ title: 'Recording Error',
+ body: `Error: ${type} - ${message}`,
+ });
+ notification.show();
+ });
+}
+
+// Handle saving meetings data
+ipcMain.handle('saveMeetingsData', async (event, data) => {
+ try {
+ // Use the file operation manager to safely write the file
+ await fileOperationManager.writeData(data);
+ return { success: true };
+ } catch (error) {
+ console.error('Failed to save meetings data:', error);
+ return { success: false, error: error.message };
+ }
+});
+
+// Debug handler to check if IPC handlers are registered
+ipcMain.handle('debugGetHandlers', async () => {
+ console.log("Checking registered IPC handlers...");
+ const handlers = Object.keys(ipcMain._invokeHandlers);
+ console.log("Registered handlers:", handlers);
+ return handlers;
+});
+
+// Handler to get active recording ID for a note
+ipcMain.handle('getActiveRecordingId', async (event, noteId) => {
+ console.log(`getActiveRecordingId called for note: ${noteId}`);
+
+ try {
+ // If noteId is provided, get recording for that specific note
+ if (noteId) {
+ const recordingInfo = activeRecordings.getForNote(noteId);
+ return {
+ success: true,
+ data: recordingInfo
+ };
+ }
+
+ // Otherwise return all active recordings
+ return {
+ success: true,
+ data: activeRecordings.getAll()
+ };
+ } catch (error) {
+ console.error('Error getting active recording ID:', error);
+ return { success: false, error: error.message };
+ }
+});
+
+// Handle deleting a meeting
+ipcMain.handle('deleteMeeting', async (event, meetingId) => {
+ try {
+ console.log(`Deleting meeting with ID: ${meetingId}`);
+
+ // Read current data
+ const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
+ const meetingsData = JSON.parse(fileData);
+
+ // Find the meeting
+ const pastMeetingIndex = meetingsData.pastMeetings.findIndex(meeting => meeting.id === meetingId);
+ const upcomingMeetingIndex = meetingsData.upcomingMeetings.findIndex(meeting => meeting.id === meetingId);
+
+ let meetingDeleted = false;
+ let recordingId = null;
+
+ // Remove from past meetings if found
+ if (pastMeetingIndex !== -1) {
+ // Store the recording ID for later cleanup if needed
+ recordingId = meetingsData.pastMeetings[pastMeetingIndex].recordingId;
+
+ // Remove the meeting
+ meetingsData.pastMeetings.splice(pastMeetingIndex, 1);
+ meetingDeleted = true;
+ }
+
+ // Remove from upcoming meetings if found
+ if (upcomingMeetingIndex !== -1) {
+ // Store the recording ID for later cleanup if needed
+ recordingId = meetingsData.upcomingMeetings[upcomingMeetingIndex].recordingId;
+
+ // Remove the meeting
+ meetingsData.upcomingMeetings.splice(upcomingMeetingIndex, 1);
+ meetingDeleted = true;
+ }
+
+ if (!meetingDeleted) {
+ return { success: false, error: 'Meeting not found' };
+ }
+
+ // Save the updated data
+ await fileOperationManager.writeData(meetingsData);
+
+ // If the meeting had a recording, cleanup the reference in the global tracking
+ if (recordingId && global.activeMeetingIds && global.activeMeetingIds[recordingId]) {
+ console.log(`Cleaning up tracking for deleted meeting with recording ID: ${recordingId}`);
+ delete global.activeMeetingIds[recordingId];
+ }
+
+ console.log(`Successfully deleted meeting: ${meetingId}`);
+ return { success: true };
+ } catch (error) {
+ console.error('Error deleting meeting:', error);
+ return { success: false, error: error.message };
+ }
+});
+
+// Handle generating AI summary for a meeting (non-streaming)
+ipcMain.handle('generateMeetingSummary', async (event, meetingId) => {
+ try {
+ console.log(`Manual summary generation requested for meeting: ${meetingId}`);
+
+ // Read current data
+ const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
+ const meetingsData = JSON.parse(fileData);
+
+ // Find the meeting
+ const pastMeetingIndex = meetingsData.pastMeetings.findIndex(meeting => meeting.id === meetingId);
+
+ if (pastMeetingIndex === -1) {
+ return { success: false, error: 'Meeting not found' };
+ }
+
+ const meeting = meetingsData.pastMeetings[pastMeetingIndex];
+
+ // Check if there's a transcript to summarize
+ if (!meeting.transcript || meeting.transcript.length === 0) {
+ return {
+ success: false,
+ error: 'No transcript available for this meeting'
+ };
+ }
+
+ // Log summary generation to console instead of showing a notification
+ console.log('Generating AI summary for meeting: ' + meetingId);
+
+ // Generate the summary
+ const summary = await generateMeetingSummary(meeting);
+
+ // Get meeting title for use in the new content
+ const meetingTitle = meeting.title || "Meeting Notes";
+
+ const recallLink = meeting.recallUrl
+ ? `\n\n---\nRecording: ${meeting.recallUrl}`
+ : '';
+
+ // Create content with the AI-generated summary
+ meeting.content = `# ${meetingTitle}\n\n${summary}${recallLink}`;
+
+ meeting.hasSummary = true;
+
+ // Save the updated data with summary
+ await fileOperationManager.writeData(meetingsData);
+
+ console.log('Updated meeting note with AI summary');
+
+ // Notify the renderer to refresh the note if it's open
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.webContents.send('summary-generated', meetingId);
+ }
+
+ return {
+ success: true,
+ summary
+ };
+ } catch (error) {
+ console.error('Error generating meeting summary:', error);
+ return { success: false, error: error.message };
+ }
+});
+
+// Handle starting a manual desktop recording
+ipcMain.handle('startManualRecording', async (event, meetingId) => {
+ try {
+ console.log(`Starting manual desktop recording for meeting: ${meetingId}`);
+
+ // Read current data
+ const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
+ const meetingsData = JSON.parse(fileData);
+
+ // Find the meeting
+ const pastMeetingIndex = meetingsData.pastMeetings.findIndex(meeting => meeting.id === meetingId);
+
+ if (pastMeetingIndex === -1) {
+ return { success: false, error: 'Meeting not found' };
+ }
+
+ const meeting = meetingsData.pastMeetings[pastMeetingIndex];
+
+ try {
+ // Prepare desktop audio recording - this is the key difference from our previous implementation
+ // It returns a key that we use as the window ID
+
+ // Log the prepareDesktopAudioRecording API call
+ sdkLogger.logApiCall('prepareDesktopAudioRecording');
+
+ const key = await RecallAiSdk.prepareDesktopAudioRecording();
+ console.log('Prepared desktop audio recording with key:', key);
+
+ // Create a recording token
+ const uploadData = await createDesktopSdkUpload();
+ if (!uploadData || !uploadData.upload_token) {
+ return { success: false, error: 'Failed to create recording token' };
+ }
+
+ // Store the recording ID in the meeting
+ meeting.recordingId = key;
+
+ // Store Recall upload/recording IDs for later linking
+ meeting.recallUploadId = uploadData.upload_id;
+ meeting.recallRecordingId = uploadData.recording_id;
+ meeting.recallUrl = buildRecallRecordingUrl(uploadData.upload_id);
+
+ // Initialize transcript array if not present
+ if (!meeting.transcript) {
+ meeting.transcript = [];
+ }
+
+ // Store tracking info for the recording
+ global.activeMeetingIds = global.activeMeetingIds || {};
+ global.activeMeetingIds[key] = {
+ platformName: 'Desktop Recording',
+ noteId: meetingId
+ };
+
+ // Register the recording in our active recordings tracker
+ activeRecordings.addRecording(key, meetingId, 'Desktop Recording');
+
+ // Save the updated data
+ await fileOperationManager.writeData(meetingsData);
+
+ // Start recording with the key from prepareDesktopAudioRecording
+ console.log('Starting desktop recording with key:', key);
+
+ // Log the startRecording API call
+ sdkLogger.logApiCall('startRecording', {
+ windowId: key,
+ uploadToken: `${uploadData.upload_token.substring(0, 8)}...` // Log truncated token for security
+ });
+
+ await RecallAiSdk.startRecording({
+ windowId: key,
+ uploadToken: uploadData.upload_token
+ });
+
+ return {
+ success: true,
+ recordingId: key
+ };
+ } catch (sdkError) {
+ console.error('RecallAI SDK error:', sdkError);
+ return { success: false, error: 'Failed to prepare desktop recording: ' + sdkError.message };
+ }
+ } catch (error) {
+ console.error('Error starting manual recording:', error);
+ return { success: false, error: error.message };
+ }
+});
+
+// Handle stopping a manual desktop recording
+ipcMain.handle('stopManualRecording', async (event, recordingId) => {
+ try {
+ console.log(`Stopping manual desktop recording: ${recordingId}`);
+
+ // Stop the recording - using the windowId property as shown in the reference
+
+ // Log the stopRecording API call
+ sdkLogger.logApiCall('stopRecording', {
+ windowId: recordingId
+ });
+
+ // Update our active recordings tracker
+ activeRecordings.updateState(recordingId, 'stopping');
+
+ await RecallAiSdk.stopRecording({
+ windowId: recordingId
+ });
+
+ // The recording-ended event will be triggered automatically,
+ // which will handle uploading and generating the summary
+
+ return { success: true };
+ } catch (error) {
+ console.error('Error stopping manual recording:', error);
+ return { success: false, error: error.message };
+ }
+});
+
+// Handle generating AI summary with streaming
+ipcMain.handle('generateMeetingSummaryStreaming', async (event, meetingId) => {
+ try {
+ console.log(`Streaming summary generation requested for meeting: ${meetingId}`);
+
+ // Read current data
+ const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
+ const meetingsData = JSON.parse(fileData);
+
+ // Find the meeting
+ const pastMeetingIndex = meetingsData.pastMeetings.findIndex(meeting => meeting.id === meetingId);
+
+ if (pastMeetingIndex === -1) {
+ return { success: false, error: 'Meeting not found' };
+ }
+
+ const meeting = meetingsData.pastMeetings[pastMeetingIndex];
+
+ // Check if there's a transcript to summarize
+ if (!meeting.transcript || meeting.transcript.length === 0) {
+ return {
+ success: false,
+ error: 'No transcript available for this meeting'
+ };
+ }
+
+ // Log summary generation to console instead of showing a notification
+ console.log('Generating streaming summary for meeting: ' + meetingId);
+
+ // Get meeting title for use in the new content
+ const meetingTitle = meeting.title || "Meeting Notes";
+
+ // Initial content with placeholders
+ meeting.content = `# ${meetingTitle}\n\nGenerating summary...`;
+
+ // Update the note on the frontend right away
+ mainWindow.webContents.send('summary-update', {
+ meetingId,
+ content: meeting.content
+ });
+
+ const recallLink = meeting.recallUrl
+ ? `\n\n---\nRecording: ${meeting.recallUrl}`
+ : '';
+
+ // Create progress callback for streaming updates
+ const streamProgress = (currentText) => {
+ // Update content with current streaming text
+ meeting.content = `# ${meetingTitle}\n\n## AI-Generated Meeting Summary\n${currentText}${recallLink}`;
+
+ // Send immediate update to renderer - don't debounce or delay this
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ try {
+ // Force immediate send of the update
+ mainWindow.webContents.send('summary-update', {
+ meetingId,
+ content: meeting.content,
+ timestamp: Date.now()
+ });
+ } catch (err) {
+ console.error('Error sending streaming update to renderer:', err);
+ }
+ }
+ };
+
+ // Generate summary with streaming
+ const summary = await generateMeetingSummary(meeting, streamProgress);
+
+ // Make sure the final content is set correctly
+ meeting.content = `# ${meetingTitle}\n\n${summary}${recallLink}`;
+ meeting.hasSummary = true;
+
+ // Save the updated data with summary
+ await fileOperationManager.writeData(meetingsData);
+
+ console.log('Updated meeting note with AI summary (streaming)');
+
+ // Final notification to renderer
+ mainWindow.webContents.send('summary-generated', meetingId);
+
+ return {
+ success: true,
+ summary
+ };
+ } catch (error) {
+ console.error('Error generating streaming summary:', error);
+ return { success: false, error: error.message };
+ }
+});
+
+// Handle loading meetings data
+ipcMain.handle('loadMeetingsData', async () => {
+ try {
+ // Use our file operation manager to safely read the data
+ const data = await fileOperationManager.readMeetingsData();
+
+ // Return the data
+ return {
+ success: true,
+ data: data
+ };
+ } catch (error) {
+ console.error('Failed to load meetings data:', error);
+ return { success: false, error: error.message };
+ }
+});
+
+// Function to create a new meeting note and start recording
+async function createMeetingNoteAndRecord(platformName) {
+ console.log("Creating meeting note for platform:", platformName);
+ try {
+ if (!detectedMeeting) {
+ console.error('No active meeting detected');
+ return;
+ }
+
+ // Guard against duplicate calls for the same meeting window
+ global.activeMeetingIds = global.activeMeetingIds || {};
+
+ if (global.activeMeetingIds[detectedMeeting.window.id]?.noteId) {
+ console.log("Meeting already being recorded for window:", detectedMeeting.window.id);
+ return global.activeMeetingIds[detectedMeeting.window.id].noteId;
+ }
+
+ console.log("Detected meeting info:", detectedMeeting.window.id, detectedMeeting.window.platform);
+
+ // Store the meeting window ID for later reference with transcript events
+ global.activeMeetingIds[detectedMeeting.window.id] = { platformName };
+
+ // Read the current meetings data
+ let meetingsData;
+ try {
+ const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
+ meetingsData = JSON.parse(fileData);
+ } catch (error) {
+ console.error('Error reading meetings data:', error);
+ meetingsData = { upcomingMeetings: [], pastMeetings: [] };
+ }
+
+ // Generate a unique ID for the new meeting
+ const id = 'meeting-' + Date.now();
+
+ // Current date and time
+ const now = new Date();
+
+ // Use the actual meeting title if available, otherwise fall back to platform name + time
+ // NOTE: meeting-updated may fire after the user clicks to join, so this might not be
+ // populated yet. The meeting-updated handler will update the title retroactively if needed.
+ const meetingTitle = detectedMeeting.window.title
+ ? detectedMeeting.window.title
+ : `${platformName} Meeting - ${now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+
+ // Create a template for the note content
+ const template = `# ${meetingTitle}\nRecording: In Progress...`;
+
+ // Create a new meeting object
+ const newMeeting = {
+ id: id,
+ type: 'document',
+ title: meetingTitle,
+ subtitle: now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+ hasDemo: false,
+ date: now.toISOString(),
+ participants: [],
+ content: template,
+ recordingId: detectedMeeting.window.id,
+ platform: platformName,
+ transcript: [] // Initialize an empty array for transcript data
+ };
+
+ // Update the active meeting tracking with the note ID
+ if (global.activeMeetingIds && global.activeMeetingIds[detectedMeeting.window.id]) {
+ global.activeMeetingIds[detectedMeeting.window.id].noteId = id;
+ }
+
+ // Create a call recording record in Twenty CRM
+ if (twentyClient.isConfigured()) {
+ try {
+ const twentyRecord = await twentyClient.createCallRecording(meetingTitle);
+
+ if (twentyRecord?.id) {
+ newMeeting.twentyRecordId = twentyRecord.id;
+
+ if (global.activeMeetingIds && global.activeMeetingIds[detectedMeeting.window.id]) {
+ global.activeMeetingIds[detectedMeeting.window.id].twentyRecordId = twentyRecord.id;
+ }
+
+ console.log('Created callRecording in Twenty:', twentyRecord.id);
+ }
+ } catch (error) {
+ console.error('Failed to create callRecording in Twenty:', error.message);
+ }
+ }
+
+ // Register this meeting in our active recordings tracker (even before starting)
+ // This ensures the UI knows about it immediately
+ activeRecordings.addRecording(detectedMeeting.window.id, id, platformName);
+
+ // Add to pastMeetings
+ meetingsData.pastMeetings.unshift(newMeeting);
+
+ // Save the updated data
+ console.log(`Saving meeting data to ${meetingsFilePath} with ID: ${id}`);
+ await fileOperationManager.writeData(meetingsData);
+
+ // Verify the file was written by reading it back
+ try {
+ const verifyData = await fs.promises.readFile(meetingsFilePath, 'utf8');
+ const parsedData = JSON.parse(verifyData);
+ const verifyMeeting = parsedData.pastMeetings.find(m => m.id === id);
+
+ if (verifyMeeting) {
+ console.log(`Successfully verified meeting ${id} was saved`);
+
+ // Tell the renderer to open the new note
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ // We need a significant delay to make sure the file is fully processed and loaded
+ // This ensures the renderer has time to process the file and recognize the new meeting
+ setTimeout(async () => {
+ try {
+ // Force a file reload before sending the message
+ await fs.promises.readFile(meetingsFilePath, 'utf8');
+
+ console.log(`Sending IPC message to open meeting note: ${id}`);
+ mainWindow.webContents.send('open-meeting-note', id);
+
+ // Send another message after 2 seconds as a backup
+ setTimeout(() => {
+ console.log(`Sending backup IPC message to open meeting note: ${id}`);
+ mainWindow.webContents.send('open-meeting-note', id);
+ }, 2000);
+ } catch (error) {
+ console.error('Error before sending open-meeting-note message:', error);
+ }
+ }, 1500); // Increased delay for safety
+ }
+ } else {
+ console.error(`Meeting ${id} not found in saved data!`);
+ }
+ } catch (verifyError) {
+ console.error('Error verifying saved data:', verifyError);
+ }
+
+ // Start recording with upload token
+ console.log('Starting recording for meeting:', detectedMeeting.window.id);
+
+ try {
+ // Get upload token
+ const uploadData = await createDesktopSdkUpload();
+
+ if (!uploadData || !uploadData.upload_token) {
+ console.error('Failed to get upload token. Recording without upload token.');
+
+ // Log the startRecording API call (no token fallback)
+ sdkLogger.logApiCall('startRecording', {
+ windowId: detectedMeeting.window.id
+ });
+
+ await RecallAiSdk.startRecording({
+ windowId: detectedMeeting.window.id
+ });
+ } else {
+ console.log('Starting recording with upload token:', uploadData.upload_token);
+
+ // Store Recall upload/recording IDs on the meeting for later linking
+ const savedMeeting = meetingsData.pastMeetings.find(m => m.id === id);
+ if (savedMeeting) {
+ savedMeeting.recallUploadId = uploadData.upload_id;
+ savedMeeting.recallRecordingId = uploadData.recording_id;
+ savedMeeting.recallUrl = buildRecallRecordingUrl(uploadData.upload_id);
+ await fileOperationManager.writeData(meetingsData);
+ }
+
+ // Log the startRecording API call with upload token
+ sdkLogger.logApiCall('startRecording', {
+ windowId: detectedMeeting.window.id,
+ uploadToken: `${uploadData.upload_token.substring(0, 8)}...` // Log truncated token for security
+ });
+
+ await RecallAiSdk.startRecording({
+ windowId: detectedMeeting.window.id,
+ uploadToken: uploadData.upload_token
+ });
+ }
+ } catch (error) {
+ console.error('Error starting recording with upload token:', error);
+
+ // Fallback to recording without token
+
+ // Log the startRecording API call (error fallback)
+ sdkLogger.logApiCall('startRecording', {
+ windowId: detectedMeeting.window.id,
+ error: 'Fallback after error'
+ });
+
+ await RecallAiSdk.startRecording({
+ windowId: detectedMeeting.window.id
+ });
+ }
+
+ return id;
+ } catch (error) {
+ console.error('Error creating meeting note:', error);
+ }
+}
+
+// Function to process video frames
+async function processVideoFrame(evt) {
+ try {
+ const windowId = evt.window?.id;
+ if (!windowId) {
+ console.error("Missing window ID in video frame event");
+ return;
+ }
+
+ // Check if we have this meeting in our active meetings
+ if (!global.activeMeetingIds || !global.activeMeetingIds[windowId]) {
+ console.log(`No active meeting found for window ID: ${windowId}`);
+ return;
+ }
+
+ const noteId = global.activeMeetingIds[windowId].noteId;
+ if (!noteId) {
+ console.log(`No note ID found for window ID: ${windowId}`);
+ return;
+ }
+
+ // Extract the video data
+ const frameData = evt.data.data;
+ if (!frameData || !frameData.buffer) {
+ console.log("No video frame data in event");
+ return;
+ }
+
+ // Get data from the event
+ const frameBuffer = frameData.buffer; // base64 encoded PNG
+ const frameTimestamp = frameData.timestamp;
+ const frameType = frameData.type; // 'webcam' or 'screenshare'
+ const participantData = frameData.participant;
+
+ // Extract participant info
+ const participantId = participantData?.id;
+ const participantName = participantData?.name || 'Unknown';
+
+ // Log minimal info to avoid flooding the console
+ // console.log(`Received ${frameType} frame from ${participantName} (ID: ${participantId}) at ${frameTimestamp.absolute}`);
+
+ // Send the frame to the renderer
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.webContents.send('video-frame', {
+ noteId,
+ participantId,
+ participantName,
+ frameType,
+ buffer: frameBuffer,
+ timestamp: frameTimestamp
+ });
+ }
+ } catch (error) {
+ console.error('Error processing video frame:', error);
+ }
+}
+
+// Function to process participant join events
+async function processParticipantJoin(evt) {
+ try {
+ const windowId = evt.window?.id;
+ if (!windowId) {
+ console.error("Missing window ID in participant join event");
+ return;
+ }
+
+ // Check if we have this meeting in our active meetings
+ if (!global.activeMeetingIds || !global.activeMeetingIds[windowId]) {
+ console.log(`No active meeting found for window ID: ${windowId}`);
+ return;
+ }
+
+ const noteId = global.activeMeetingIds[windowId].noteId;
+ if (!noteId) {
+ console.log(`No note ID found for window ID: ${windowId}`);
+ return;
+ }
+
+ // Extract the participant data
+ const participantData = evt.data.data.participant;
+ if (!participantData) {
+ console.log("No participant data in event");
+ return;
+ }
+
+ const participantName = participantData.name || "Unknown Participant";
+ const participantId = participantData.id;
+ const isHost = participantData.is_host;
+ const platform = participantData.platform;
+
+ console.log(`Participant joined: ${participantName} (ID: ${participantId}, Host: ${isHost})`);
+
+ // Skip "Host" and "Guest" generic names
+ if (participantName === "Host" || participantName === "Guest" || participantName.includes("others") || (participantName.split(" ").length > 3)) {
+ console.log(`Skipping generic participant name: ${participantName}`);
+ return;
+ }
+
+ // Use the file operation manager to safely update the meetings data
+ await fileOperationManager.scheduleOperation(async (meetingsData) => {
+ // Find the meeting note with this ID
+ const noteIndex = meetingsData.pastMeetings.findIndex(meeting => meeting.id === noteId);
+ if (noteIndex === -1) {
+ console.log(`No meeting note found with ID: ${noteId}`);
+ return null; // Return null to indicate no changes needed
+ }
+
+ // Get the meeting and initialize participants array if needed
+ const meeting = meetingsData.pastMeetings[noteIndex];
+ if (!meeting.participants) {
+ meeting.participants = [];
+ }
+
+ // Check if participant already exists (based on ID)
+ const existingParticipantIndex = meeting.participants.findIndex(p => p.id === participantId);
+
+ if (existingParticipantIndex !== -1) {
+ // Update existing participant
+ meeting.participants[existingParticipantIndex] = {
+ id: participantId,
+ name: participantName,
+ isHost: isHost,
+ platform: platform,
+ joinTime: new Date().toISOString(),
+ status: 'active'
+ };
+ } else {
+ // Add new participant
+ meeting.participants.push({
+ id: participantId,
+ name: participantName,
+ isHost: isHost,
+ platform: platform,
+ joinTime: new Date().toISOString(),
+ status: 'active'
+ });
+ }
+
+ console.log(`Added/updated participant data for meeting: ${noteId}`);
+
+ // Notify the renderer if this note is currently being edited
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.webContents.send('participants-updated', noteId);
+ }
+
+ // Return the updated data to be written
+ return meetingsData;
+ });
+
+ console.log(`Processed participant join event for meeting: ${noteId}`);
+ } catch (error) {
+ console.error('Error processing participant join event:', error);
+ }
+}
+
+// Tracks the currently active speaker as detected by the SDK's participant updates
+let currentActiveSpeaker = null;
+
+async function processTranscriptProviderData(evt) {
+ // provider_data from AssemblyAI streaming only contains WebSocket handshake
+ // messages, not actual transcript data with speaker IDs — intentionally ignored
+}
+
+// Function to process transcript data and store it with the meeting note
+async function processTranscriptData(evt) {
+ try {
+ const windowId = evt.window?.id;
+ if (!windowId) {
+ console.error("Missing window ID in transcript event");
+ return;
+ }
+
+ // Check if we have this meeting in our active meetings
+ if (!global.activeMeetingIds || !global.activeMeetingIds[windowId]) {
+ console.log(`No active meeting found for window ID: ${windowId}`);
+ return;
+ }
+
+ const noteId = global.activeMeetingIds[windowId].noteId;
+ if (!noteId) {
+ console.log(`No note ID found for window ID: ${windowId}`);
+ return;
+ }
+
+ const words = evt.data.data.words || [];
+ if (words.length === 0) {
+ return;
+ }
+
+ // The SDK's transcript.data always attributes speech to the host on Google Meet.
+ // Use the active speaker tracked from SDK's internal participant updates instead.
+ const speaker = currentActiveSpeaker || evt.data.data.participant?.name || "Unknown Speaker";
+ console.log(`[speaker-debug] Using active speaker: ${speaker} (currentActiveSpeaker=${currentActiveSpeaker}, transcript.participant=${evt.data.data.participant?.name})`);
+
+ const text = words.map(word => word.text).join(" ");
+ console.log(`Transcript from ${speaker}: "${text}"`);
+
+ await fileOperationManager.scheduleOperation(async (meetingsData) => {
+ const noteIndex = meetingsData.pastMeetings.findIndex(meeting => meeting.id === noteId);
+ if (noteIndex === -1) {
+ console.log(`No meeting note found with ID: ${noteId}`);
+ return null;
+ }
+
+ const meeting = meetingsData.pastMeetings[noteIndex];
+
+ if (!meeting.transcript) {
+ meeting.transcript = [];
+ }
+
+ // Store in the same format as the AssemblyAI transcript file so the
+ // backend can upload it directly with correct speakers + timestamps
+ meeting.transcript.push({
+ participant: { name: speaker },
+ words: words.map(word => ({
+ text: word.text,
+ start_timestamp: word.start_timestamp || undefined,
+ end_timestamp: word.end_timestamp || undefined,
+ })),
+ });
+
+ console.log(`Added transcript data for meeting: ${noteId}`);
+
+ // Notify the renderer if this note is currently being edited
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.webContents.send('transcript-updated', noteId);
+ }
+
+ // Return the updated data to be written
+ return meetingsData;
+ });
+
+ console.log(`Processed transcript data for meeting: ${noteId}`);
+ } catch (error) {
+ console.error('Error processing transcript data:', error);
+ }
+}
+
+// Function to generate AI summary from transcript with streaming support
+async function generateMeetingSummary(meeting, progressCallback = null) {
+ try {
+ if (!process.env.OPENROUTER_KEY || process.env.OPENROUTER_KEY === 'open_api_key') {
+ console.log('Skipping AI summary: no valid OPENROUTER_KEY configured in .env');
+ return 'AI summary unavailable — set a valid OPENROUTER_KEY in your .env file to enable this feature.';
+ }
+
+ if (!meeting.transcript || meeting.transcript.length === 0) {
+ console.log('No transcript available to summarize');
+ return 'No transcript available to summarize.';
+ }
+
+ console.log(`Generating AI summary for meeting: ${meeting.id}`);
+
+ // Format the transcript into a single text for the AI to process
+ const transcriptText = meeting.transcript.map(entry =>
+ `${entry.speaker}: ${entry.text}`
+ ).join('\n');
+
+ // Format detected participants if available
+ let participantsText = "";
+ if (meeting.participants && meeting.participants.length > 0) {
+ participantsText = "Detected participants:\n" + meeting.participants.map(p =>
+ `- ${p.name}${p.isHost ? ' (Host)' : ''}`
+ ).join('\n');
+ }
+
+ // Define a system prompt to guide the AI's response with a specific format
+ const systemMessage =
+ "You are an AI assistant that summarizes meeting transcripts. " +
+ "You MUST format your response using the following structure:\n\n" +
+ "# Participants\n" +
+ "- [List all participants mentioned in the transcript]\n\n" +
+ "# Summary\n" +
+ "- [Key discussion point 1]\n" +
+ "- [Key discussion point 2]\n" +
+ "- [Key decisions made]\n" +
+ "- [Include any important deadlines or dates mentioned]\n\n" +
+ "# Action Items\n" +
+ "- [Action item 1] - [Responsible person if mentioned]\n" +
+ "- [Action item 2] - [Responsible person if mentioned]\n" +
+ "- [Add any other action items discussed]\n\n" +
+ "Stick strictly to this format with these exact section headers. Keep each bullet point concise but informative.";
+
+ // Prepare the messages array for the API
+ const messages = [
+ { role: "system", content: systemMessage },
+ {
+ role: "user", content: `Summarize the following meeting transcript with the EXACT format specified in your instructions:
+${participantsText ? participantsText + "\n\n" : ""}
+Transcript:
+${transcriptText}`
+ }
+ ];
+
+ // If no progress callback provided, use the non-streaming version
+ if (!progressCallback) {
+ const response = await getOpenAIClient().chat.completions.create({
+ model: MODELS.PRIMARY, // Use our primary model for a good balance of quality and speed
+ messages: messages,
+ max_tokens: 1000,
+ temperature: 0.7,
+ fallbacks: MODELS.FALLBACKS, // Use our defined fallback models
+ transform_to_openai: true, // Ensures consistent response format across models
+ route: "fallback" // Automatically use fallbacks if the primary model is unavailable
+ });
+
+ // Log which model was actually used
+ console.log(`AI summary generated successfully using model: ${response.model}`);
+
+ // Return the generated summary
+ return response.choices[0].message.content;
+ } else {
+ // Use streaming version and accumulate the response
+ let fullText = '';
+
+ const stream = await getOpenAIClient().chat.completions.create({
+ model: MODELS.PRIMARY, // Use our primary model for a good balance of quality and speed
+ messages: messages,
+ max_tokens: 1000,
+ temperature: 0.7,
+ stream: true,
+ fallbacks: MODELS.FALLBACKS, // Use our defined fallback models
+ transform_to_openai: true, // Ensures consistent response format across models
+ route: "fallback" // Automatically use fallbacks if the primary model is unavailable
+ });
+
+ // Handle streaming events
+ return new Promise((resolve, reject) => {
+ // Process the stream
+ (async () => {
+ try {
+ // Log the model being used when first chunk arrives (if available)
+ let modelLogged = false;
+
+ for await (const chunk of stream) {
+ // Log the model on first chunk if available
+ if (!modelLogged && chunk.model) {
+ console.log(`Streaming with model: ${chunk.model}`);
+ modelLogged = true;
+ }
+
+ // Extract the text content from the chunk
+ const content = chunk.choices[0]?.delta?.content || '';
+
+ if (content) {
+ // Add the new text chunk to our accumulated text
+ fullText += content;
+
+ // Log each token for debugging (less verbose)
+ if (content.length < 50) {
+ console.log(`Received token: "${content}"`);
+ } else {
+ console.log(`Received content of length: ${content.length}`);
+ }
+
+ // Call the progress callback immediately with each token
+ if (progressCallback) {
+ progressCallback(fullText);
+ }
+ }
+ }
+
+ console.log('AI summary streaming completed');
+ resolve(fullText);
+ } catch (error) {
+ console.error('Stream error:', error);
+ reject(error);
+ }
+ })();
+ });
+ }
+ } catch (error) {
+ console.error('Error generating meeting summary:', error);
+
+ // Check if it's an OpenRouter/OpenAI specific error
+ if (error.status) {
+ return `Error generating summary: API returned status ${error.status}: ${error.message}`;
+ } else if (error.response) {
+ // Handle errors with a response object
+ return `Error generating summary: ${error.response.status} - ${error.response.data?.error?.message || error.message}`;
+ } else {
+ // Default error handling
+ return `Error generating summary: ${error.message}`;
+ }
+ }
+}
+
+// Function to update a note with recording information when recording ends
+async function updateNoteWithRecordingInfo(recordingId) {
+ try {
+ // Read the current meetings data
+ let meetingsData;
+ try {
+ const fileData = await fs.promises.readFile(meetingsFilePath, 'utf8');
+ meetingsData = JSON.parse(fileData);
+ } catch (error) {
+ console.error('Error reading meetings data:', error);
+ return;
+ }
+
+ // Find the meeting note with this recording ID
+ const noteIndex = meetingsData.pastMeetings.findIndex(meeting =>
+ meeting.recordingId === recordingId
+ );
+
+ if (noteIndex === -1) {
+ console.log('No meeting note found for recording ID:', recordingId);
+ return;
+ }
+
+ // Format current date
+ const now = new Date();
+ const formattedDate = now.toLocaleString();
+
+ // Update the meeting note content
+ const meeting = meetingsData.pastMeetings[noteIndex];
+ const content = meeting.content;
+
+ // Replace the "Recording: In Progress..." line with completed information
+ let updatedContent = content.replace(
+ "Recording: In Progress...",
+ `Recording: Completed at ${formattedDate}\n`
+ );
+
+ // Update the meeting object
+ meeting.content = updatedContent;
+ meeting.recordingComplete = true;
+ meeting.recordingEndTime = now.toISOString();
+
+ // Save the initial update
+ await fileOperationManager.writeData(meetingsData);
+
+ // Build the Recall link footer
+ const recallLink = meeting.recallUrl
+ ? `\n\n---\nRecording: ${meeting.recallUrl}`
+ : '';
+
+ // Generate AI summary if there's a transcript
+ if (meeting.transcript && meeting.transcript.length > 0) {
+ console.log(`Generating AI summary for meeting ${meeting.id}...`);
+
+ // Log summary generation to console instead of showing a notification
+ console.log('Generating AI summary for meeting: ' + meeting.id);
+
+ // Get meeting title for use in the new content
+ const meetingTitle = meeting.title || "Meeting Notes";
+
+ // Create initial content with placeholder
+ meeting.content = `# ${meetingTitle}\nGenerating summary...`;
+
+ // Notify any open editors immediately
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.webContents.send('summary-update', {
+ meetingId: meeting.id,
+ content: meeting.content
+ });
+ }
+
+ // Create progress callback for streaming updates
+ const streamProgress = (currentText) => {
+ // Update content with current streaming text
+ meeting.content = `# ${meetingTitle}\n\n${currentText}${recallLink}`;
+
+ // Send immediate update to renderer if note is open
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ try {
+ mainWindow.webContents.send('summary-update', {
+ meetingId: meeting.id,
+ content: meeting.content,
+ timestamp: Date.now()
+ });
+ } catch (err) {
+ console.error('Error sending streaming update to renderer:', err);
+ }
+ }
+ };
+
+ // Generate the summary with streaming updates
+ const summary = await generateMeetingSummary(meeting, streamProgress);
+
+ // Set the content with summary and Recall link
+ meeting.content = `${summary}${recallLink}`;
+
+ meeting.hasSummary = true;
+
+ // Save the updated data with summary
+ await fileOperationManager.writeData(meetingsData);
+
+ console.log('Updated meeting note with AI summary');
+ } else {
+ meeting.content = updatedContent + recallLink;
+ await fileOperationManager.writeData(meetingsData);
+ }
+
+ // If the note is currently open, notify the renderer to refresh it
+ if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.webContents.send('recording-completed', meeting.id);
+ }
+ } catch (error) {
+ console.error('Error updating note with recording info:', error);
+ }
+}
+
+ipcMain.handle('openExternal', async (event, url) => {
+ if (url && (url.startsWith('https://') || url.startsWith('http://'))) {
+ await shell.openExternal(url);
+ }
+});
+
+ipcMain.handle('getRecordingVideoUrl', async (event, recallRecordingId) => {
+ try {
+ const response = await axios.get(`http://localhost:13373/recording/${recallRecordingId}`, { timeout: 15000 });
+ if (response.data.status === 'success' && response.data.video_url) {
+ return { success: true, videoUrl: response.data.video_url, transcriptUrl: response.data.transcript_url };
+ }
+ return { success: false, error: response.data.message || 'Recording not ready yet' };
+ } catch (error) {
+ console.error('Error fetching recording video URL:', error.message);
+ return { success: false, error: error.message };
+ }
+});
+
+// Function to check if there's a detected meeting available
+ipcMain.handle('checkForDetectedMeeting', async () => {
+ return detectedMeeting !== null;
+});
+
+// Function to join the detected meeting
+ipcMain.handle('joinDetectedMeeting', async () => {
+ return joinDetectedMeeting();
+});
+
+// Function to handle joining a detected meeting
+async function joinDetectedMeeting() {
+ try {
+ console.log("Join detected meeting called");
+
+ if (!detectedMeeting) {
+ console.log("No detected meeting available");
+ return { success: false, error: "No active meeting detected" };
+ }
+
+ // Map platform codes to readable names
+ const platformNames = {
+ 'zoom': 'Zoom',
+ 'google-meet': 'Google Meet',
+ 'slack': 'Slack',
+ 'teams': 'Microsoft Teams'
+ };
+
+ // Get a user-friendly platform name, or use the raw platform name if not in our map
+ const platformName = platformNames[detectedMeeting.window.platform] || detectedMeeting.window.platform;
+
+ console.log("Joining detected meeting for platform:", platformName);
+
+ // Ensure main window exists and is visible
+ if (!mainWindow || mainWindow.isDestroyed()) {
+ console.log("Creating new main window");
+ createWindow();
+ }
+
+ // Bring window to front with focus
+ if (mainWindow.isMinimized()) mainWindow.restore();
+ mainWindow.show();
+ mainWindow.focus();
+
+ // Process with more reliable timing
+ return new Promise((resolve) => {
+ // Wait a moment for the window to be fully focused and ready
+ setTimeout(async () => {
+ console.log("Window is ready, creating new meeting note");
+
+ try {
+ // Create a new meeting note and start recording
+ const id = await createMeetingNoteAndRecord(platformName);
+
+ console.log("Created new meeting with ID:", id);
+ resolve({ success: true, meetingId: id });
+ } catch (err) {
+ console.error("Error creating meeting note:", err);
+ resolve({ success: false, error: err.message });
+ }
+ }, 800); // Increased timeout for more reliability
+ });
+ } catch (error) {
+ console.error("Error in joinDetectedMeeting:", error);
+ return { success: false, error: error.message };
+ }
+}
diff --git a/packages/twenty-companion/src/pages/note-editor/index.html b/packages/twenty-companion/src/pages/note-editor/index.html
new file mode 100644
index 00000000000..0f1f038d472
--- /dev/null
+++ b/packages/twenty-companion/src/pages/note-editor/index.html
@@ -0,0 +1,149 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/twenty-companion/src/pages/note-editor/renderer.js b/packages/twenty-companion/src/pages/note-editor/renderer.js
new file mode 100644
index 00000000000..a0980a5aa76
--- /dev/null
+++ b/packages/twenty-companion/src/pages/note-editor/renderer.js
@@ -0,0 +1,79 @@
+// Import styles
+import './styles.css';
+
+// Initialize the markdown editor when the DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+ // Initialize SimpleMDE Markdown Editor
+ const editor = new SimpleMDE({
+ element: document.getElementById('editor'),
+ spellChecker: false,
+ autofocus: true,
+ status: false,
+ toolbar: [
+ 'bold', 'italic', 'heading', '|',
+ 'quote', 'unordered-list', 'ordered-list', '|',
+ 'link', 'image', '|',
+ 'preview', 'side-by-side', 'fullscreen',
+ ],
+ placeholder: 'Write your notes here...',
+ initialValue: document.getElementById('editor').textContent.trim(),
+ });
+
+ // Handle sidebar toggle
+ const toggleSidebarBtn = document.getElementById('toggleSidebar');
+ const sidebar = document.getElementById('sidebar');
+ const editorContent = document.querySelector('.editor-content');
+
+ toggleSidebarBtn.addEventListener('click', () => {
+ sidebar.classList.toggle('hidden');
+ editorContent.classList.toggle('full-width');
+ });
+
+ // Handle back button
+ const backButton = document.getElementById('backButton');
+ backButton.addEventListener('click', () => {
+ window.electronAPI.navigate('home');
+ });
+
+ // Chat input handling
+ const chatInput = document.getElementById('chatInput');
+ const sendButton = document.getElementById('sendButton');
+
+ // When send button is clicked
+ sendButton.addEventListener('click', () => {
+ const message = chatInput.value.trim();
+ if (message) {
+ console.log('Sending message:', message);
+ // Here you would handle the AI chat functionality
+ // For now, just clear the input
+ chatInput.value = '';
+ }
+ });
+
+ // Send message on Enter key
+ chatInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ sendButton.click();
+ }
+ });
+
+ // Handle share buttons
+ const shareButtons = document.querySelectorAll('.share-btn');
+ shareButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ const action = button.textContent.trim();
+ console.log(`Share action: ${action}`);
+ // Implement actual sharing functionality here
+ });
+ });
+
+ // Handle AI option buttons
+ const aiButtons = document.querySelectorAll('.ai-btn');
+ aiButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ const action = button.textContent.trim();
+ console.log(`AI action: ${action}`);
+ // Implement actual AI functionality here
+ });
+ });
+});
\ No newline at end of file
diff --git a/packages/twenty-companion/src/pages/note-editor/styles.css b/packages/twenty-companion/src/pages/note-editor/styles.css
new file mode 100644
index 00000000000..a5eeedbe77d
--- /dev/null
+++ b/packages/twenty-companion/src/pages/note-editor/styles.css
@@ -0,0 +1,356 @@
+:root {
+ --primary-bg: #f9f9f9;
+ --card-bg: #fff;
+ --light-purple: #f3e9ff;
+ --light-green: #e8f5e9;
+ --border-color: #e0e0e0;
+ --text-primary: #000;
+ --text-secondary: #666;
+ --sidebar-width: 320px;
+}
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ background-color: var(--primary-bg);
+ margin: 0;
+ overflow-x: hidden;
+ color: var(--text-primary);
+}
+
+.app-container {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+/* Header Styles */
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 20px;
+ background-color: var(--card-bg);
+ border-bottom: 1px solid var(--border-color);
+ position: sticky;
+ top: 0;
+ z-index: 100;
+}
+
+#drag-region {
+ -webkit-app-region: drag;
+}
+
+.header-left, .header-right {
+ display: flex;
+ align-items: center;
+}
+
+.header-left {
+ margin-left: 60px;
+ gap: 8px;
+}
+
+.app-logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px;
+ overflow: hidden;
+ flex-shrink: 0;
+}
+
+.header-center {
+ flex-grow: 1;
+ max-width: 400px;
+ margin: 0 20px;
+}
+
+.search-container {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.search-icon {
+ position: absolute;
+ left: 10px;
+ color: var(--text-secondary);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.search-input {
+ width: 100%;
+ padding: 8px 8px 8px 35px;
+ border-radius: 5px;
+ border: 1px solid var(--border-color);
+ background-color: #f2f2f2;
+ font-size: 14px;
+ -webkit-app-region: no-drag;
+}
+
+.btn {
+ padding: 8px 16px;
+ border-radius: 5px;
+ border: none;
+ cursor: pointer;
+ font-weight: 500;
+ -webkit-app-region: no-drag;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.back-btn {
+ background-color: transparent;
+ color: var(--text-secondary);
+ padding: 8px;
+}
+
+.toggle-sidebar-btn {
+ background-color: transparent;
+ color: var(--text-secondary);
+ padding: 8px;
+ margin-right: 10px;
+ display: none;
+}
+
+.user-avatar {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ overflow: hidden;
+ background-color: #ddd;
+ -webkit-app-region: no-drag;
+}
+
+/* Note Editor Layout */
+.note-container {
+ display: flex;
+ flex: 1;
+ position: relative;
+}
+
+.editor-content {
+ flex: 1;
+ padding: 40px;
+ background-color: var(--card-bg);
+ max-width: calc(100% - var(--sidebar-width));
+ transition: max-width 0.3s ease;
+}
+
+.editor-content.full-width {
+ max-width: 100%;
+}
+
+.note-header {
+ margin-bottom: 30px;
+}
+
+.note-title {
+ font-size: 28px;
+ font-weight: 600;
+ margin-bottom: 10px;
+}
+
+.note-meta {
+ display: flex;
+ gap: 15px;
+ color: var(--text-secondary);
+ font-size: 14px;
+ margin-top: 10px;
+}
+
+.note-date, .note-author {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+}
+
+/* Editor */
+.CodeMirror, .editor-preview {
+ font-size: 16px;
+ line-height: 1.6;
+}
+
+.CodeMirror {
+ border: none;
+ height: calc(100vh - 230px);
+}
+
+.editor-toolbar {
+ border: none;
+ opacity: 0.8;
+}
+
+/* Sidebar */
+.sidebar {
+ width: var(--sidebar-width);
+ background-color: var(--card-bg);
+ border-left: 1px solid var(--border-color);
+ padding: 20px;
+ overflow-y: auto;
+ transition: transform 0.3s ease;
+}
+
+.sidebar.hidden {
+ transform: translateX(var(--sidebar-width));
+}
+
+.sidebar-section {
+ margin-bottom: 30px;
+}
+
+.sidebar-section h3 {
+ font-size: 14px;
+ color: var(--text-secondary);
+ margin-bottom: 15px;
+ font-weight: 500;
+}
+
+.share-options, .share-export {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 15px;
+}
+
+.share-btn {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 16px;
+ border-radius: 5px;
+ border: 1px solid var(--border-color);
+ background-color: var(--card-bg);
+ color: var(--text-primary);
+ font-size: 14px;
+ cursor: pointer;
+ flex: 1;
+ justify-content: center;
+}
+
+.share-btn.wide {
+ flex: 1;
+}
+
+.ai-options {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.ai-btn {
+ padding: 10px 16px;
+ border-radius: 5px;
+ border: 1px solid var(--border-color);
+ background-color: var(--card-bg);
+ color: var(--text-primary);
+ font-size: 14px;
+ cursor: pointer;
+ text-align: left;
+}
+
+/* Chat Input */
+.chat-input {
+ display: flex;
+ margin: 20px auto;
+ width: 90%;
+ max-width: 800px;
+ position: relative;
+ bottom: 20px;
+}
+
+#chatInput {
+ flex: 1;
+ padding: 12px 20px;
+ border-radius: 20px;
+ border: 1px solid var(--border-color);
+ font-size: 14px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+#sendButton {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ background: transparent;
+ border: none;
+ cursor: pointer;
+}
+
+/* SimpleMDE customizations */
+.CodeMirror-fullscreen, .editor-preview-side {
+ z-index: 999;
+}
+
+.editor-toolbar.fullscreen {
+ z-index: 1000;
+}
+
+/* Custom markdown rendering */
+.editor-preview h1, .editor-preview-side h1 {
+ font-size: 22px;
+ color: #333;
+ margin: 25px 0 15px 0;
+}
+
+.editor-preview h2, .editor-preview-side h2 {
+ font-size: 18px;
+ color: #444;
+ margin: 20px 0 10px 0;
+}
+
+.editor-preview ul, .editor-preview-side ul {
+ padding-left: 20px;
+ margin: 10px 0;
+}
+
+.editor-preview a, .editor-preview-side a {
+ color: #0077ff;
+ text-decoration: none;
+}
+
+.editor-preview a:hover, .editor-preview-side a:hover {
+ text-decoration: underline;
+}
+
+/* Make code look nice */
+.editor-preview code, .editor-preview-side code {
+ background-color: #f4f4f4;
+ padding: 2px 4px;
+ border-radius: 3px;
+ font-family: monospace;
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+ .editor-content {
+ padding: 20px;
+ }
+
+ .sidebar {
+ width: 100%;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 200;
+ transform: translateX(100%);
+ }
+
+ .sidebar.hidden {
+ transform: translateX(0);
+ }
+
+ .editor-content {
+ max-width: 100%;
+ }
+}
diff --git a/packages/twenty-companion/src/preload.js b/packages/twenty-companion/src/preload.js
new file mode 100644
index 00000000000..bbd556782dd
--- /dev/null
+++ b/packages/twenty-companion/src/preload.js
@@ -0,0 +1,40 @@
+// See the Electron documentation for details on how to use preload scripts:
+// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
+
+const { contextBridge, ipcRenderer } = require('electron');
+
+// Set up the SDK logger bridge between main and renderer
+contextBridge.exposeInMainWorld('sdkLoggerBridge', {
+ // Receive logs from main process
+ onSdkLog: (callback) => ipcRenderer.on('sdk-log', (_, logEntry) => callback(logEntry)),
+
+ // Send logs from renderer to main process
+ sendSdkLog: (logEntry) => ipcRenderer.send('sdk-log', logEntry)
+});
+
+contextBridge.exposeInMainWorld('electronAPI', {
+ navigate: (page) => ipcRenderer.send('navigate', page),
+ saveMeetingsData: (data) => ipcRenderer.invoke('saveMeetingsData', data),
+ loadMeetingsData: () => ipcRenderer.invoke('loadMeetingsData'),
+ deleteMeeting: (meetingId) => ipcRenderer.invoke('deleteMeeting', meetingId),
+ generateMeetingSummary: (meetingId) => ipcRenderer.invoke('generateMeetingSummary', meetingId),
+ generateMeetingSummaryStreaming: (meetingId) => ipcRenderer.invoke('generateMeetingSummaryStreaming', meetingId),
+ startManualRecording: (meetingId) => ipcRenderer.invoke('startManualRecording', meetingId),
+ stopManualRecording: (recordingId) => ipcRenderer.invoke('stopManualRecording', recordingId),
+ debugGetHandlers: () => ipcRenderer.invoke('debugGetHandlers'),
+ checkForDetectedMeeting: () => ipcRenderer.invoke('checkForDetectedMeeting'),
+ joinDetectedMeeting: () => ipcRenderer.invoke('joinDetectedMeeting'),
+ onOpenMeetingNote: (callback) => ipcRenderer.on('open-meeting-note', (_, meetingId) => callback(meetingId)),
+ onRecordingCompleted: (callback) => ipcRenderer.on('recording-completed', (_, meetingId) => callback(meetingId)),
+ onTranscriptUpdated: (callback) => ipcRenderer.on('transcript-updated', (_, meetingId) => callback(meetingId)),
+ onSummaryGenerated: (callback) => ipcRenderer.on('summary-generated', (_, meetingId) => callback(meetingId)),
+ onSummaryUpdate: (callback) => ipcRenderer.on('summary-update', (_, data) => callback(data)),
+ onRecordingStateChange: (callback) => ipcRenderer.on('recording-state-change', (_, data) => callback(data)),
+ onParticipantsUpdated: (callback) => ipcRenderer.on('participants-updated', (_, meetingId) => callback(meetingId)),
+ onVideoFrame: (callback) => ipcRenderer.on('video-frame', (_, data) => callback(data)),
+ onMeetingDetectionStatus: (callback) => ipcRenderer.on('meeting-detection-status', (_, data) => callback(data)),
+ onMeetingTitleUpdated: (callback) => ipcRenderer.on('meeting-title-updated', (_, data) => callback(data)),
+ getActiveRecordingId: (noteId) => ipcRenderer.invoke('getActiveRecordingId', noteId),
+ openExternal: (url) => ipcRenderer.invoke('openExternal', url),
+ getRecordingVideoUrl: (recordingId) => ipcRenderer.invoke('getRecordingVideoUrl', recordingId)
+});
diff --git a/packages/twenty-companion/src/renderer.js b/packages/twenty-companion/src/renderer.js
new file mode 100644
index 00000000000..72505d7c1cb
--- /dev/null
+++ b/packages/twenty-companion/src/renderer.js
@@ -0,0 +1,2059 @@
+/**
+ * This file will automatically be loaded by webpack and run in the "renderer" context.
+ * To learn more about the differences between the "main" and the "renderer" context in
+ * Electron, visit:
+ *
+ * https://electronjs.org/docs/tutorial/process-model
+ */
+
+import './index.css';
+
+// Create empty meetings data structure to be filled from the file
+const meetingsData = {
+ upcomingMeetings: [],
+ pastMeetings: []
+};
+
+// Create empty arrays that will be filled from file
+const upcomingMeetings = [];
+const pastMeetings = [];
+
+// Group past meetings by date
+let pastMeetingsByDate = {};
+
+// Global recording state variables
+window.isRecording = false;
+window.currentRecordingId = null;
+
+
+// Function to check if there's an active recording for the current note
+async function checkActiveRecordingState() {
+ if (!currentEditingMeetingId) return;
+
+ try {
+ console.log('Checking active recording state for note:', currentEditingMeetingId);
+ const result = await window.electronAPI.getActiveRecordingId(currentEditingMeetingId);
+
+ if (result.success && result.data) {
+ console.log('Found active recording for current note:', result.data);
+ updateRecordingButtonUI(true, result.data.recordingId);
+ } else {
+ console.log('No active recording found for note');
+ updateRecordingButtonUI(false, null);
+ }
+ } catch (error) {
+ console.error('Error checking recording state:', error);
+ }
+}
+
+// Function to update the recording button UI
+function updateRecordingButtonUI(isActive, recordingId) {
+ const recordButton = document.getElementById('recordButton');
+ if (!recordButton) return;
+
+ // Get the elements inside the button
+ const recordIcon = recordButton.querySelector('.record-icon');
+ const stopIcon = recordButton.querySelector('.stop-icon');
+
+ if (isActive) {
+ // Recording is active
+ console.log('Updating UI for active recording:', recordingId);
+ window.isRecording = true;
+ window.currentRecordingId = recordingId;
+
+ // Update button UI
+ recordButton.classList.add('recording');
+ recordIcon.style.display = 'none';
+ stopIcon.style.display = 'block';
+ } else {
+ // No active recording
+ console.log('Updating UI for inactive recording');
+ window.isRecording = false;
+ window.currentRecordingId = null;
+
+ // Update button UI
+ recordButton.classList.remove('recording');
+ recordIcon.style.display = 'block';
+ stopIcon.style.display = 'none';
+ }
+}
+
+// Function to format date for section headers
+function formatDateHeader(dateString) {
+ const date = new Date(dateString);
+ const now = new Date();
+ const yesterday = new Date(now);
+ yesterday.setDate(yesterday.getDate() - 1);
+
+ // Check if date is today, yesterday, or earlier
+ if (date.toDateString() === now.toDateString()) {
+ return 'Today';
+ } else if (date.toDateString() === yesterday.toDateString()) {
+ return 'Yesterday';
+ } else {
+ // Format as "Fri, Apr 25" or similar
+ const options = { weekday: 'short', month: 'short', day: 'numeric' };
+ return date.toLocaleDateString('en-US', options);
+ }
+}
+
+// We'll initialize pastMeetings and pastMeetingsByDate when we load data from file
+
+// Save meetings data back to file
+async function saveMeetingsData() {
+ // Save to localStorage as a backup
+ localStorage.setItem('meetingsData', JSON.stringify(meetingsData));
+
+ // Save to the actual file using IPC
+ try {
+ console.log('Saving meetings data to file...');
+ const result = await window.electronAPI.saveMeetingsData(meetingsData);
+ if (result.success) {
+ console.log('Meetings data saved successfully to file');
+ } else {
+ console.error('Failed to save meetings data to file:', result.error);
+ }
+ } catch (error) {
+ console.error('Error saving meetings data to file:', error);
+ }
+}
+
+// Keep track of which meeting is being edited
+let currentEditingMeetingId = null;
+
+// Function to save the current note
+async function saveCurrentNote() {
+ const editorElement = document.getElementById('simple-editor');
+ const noteTitleElement = document.getElementById('noteTitle');
+
+ // Early exit if elements aren't available
+ if (!editorElement || !noteTitleElement) {
+ console.warn('Cannot save note: Editor elements not found');
+ return;
+ }
+
+ // Early exit if no current meeting ID
+ if (!currentEditingMeetingId) {
+ console.warn('Cannot save note: No active meeting ID');
+ return;
+ }
+
+ // Get title text, defaulting to "New Note" if empty
+ const noteTitle = noteTitleElement.textContent.trim() || 'New Note';
+
+ // Set title back to element in case it was empty
+ if (!noteTitleElement.textContent.trim()) {
+ noteTitleElement.textContent = noteTitle;
+ }
+
+ // Find which meeting is currently active by ID
+ const activeMeeting = [...upcomingMeetings, ...pastMeetings].find(m => m.id === currentEditingMeetingId);
+
+ if (activeMeeting) {
+ console.log(`Saving note with ID: ${currentEditingMeetingId}, Title: ${noteTitle}`);
+
+ // Get the current content from the editor
+ const content = editorElement.value;
+ console.log(`Note content length: ${content.length} characters`);
+
+ // Update the title and content in the meeting object
+ activeMeeting.title = noteTitle;
+ activeMeeting.content = content;
+
+ // Update the data arrays directly to make sure they stay in sync
+ const pastIndex = meetingsData.pastMeetings.findIndex(m => m.id === currentEditingMeetingId);
+ if (pastIndex !== -1) {
+ meetingsData.pastMeetings[pastIndex].title = noteTitle;
+ meetingsData.pastMeetings[pastIndex].content = content;
+ console.log('Updated meeting in pastMeetings array');
+ }
+
+ const upcomingIndex = meetingsData.upcomingMeetings.findIndex(m => m.id === currentEditingMeetingId);
+ if (upcomingIndex !== -1) {
+ meetingsData.upcomingMeetings[upcomingIndex].title = noteTitle;
+ meetingsData.upcomingMeetings[upcomingIndex].content = content;
+ console.log('Updated meeting in upcomingMeetings array');
+ }
+
+ // Also update the subtitle if it's a date-based one
+ const dateObj = new Date(activeMeeting.date);
+ if (dateObj) {
+ document.getElementById('noteDate').textContent = formatDate(dateObj);
+ }
+
+ try {
+ // Save the data to file
+ await saveMeetingsData();
+ console.log('Note saved successfully:', noteTitle);
+ } catch (error) {
+ console.error('Error saving note:', error);
+ }
+ } else {
+ console.error(`Cannot save note: Meeting not found with ID: ${currentEditingMeetingId}`);
+
+ // Log all available meetings for debugging
+ console.log('Available meeting IDs:', [...upcomingMeetings, ...pastMeetings].map(m => m.id).join(', '));
+ }
+}
+
+// Format date for display in the note header
+function formatDate(date) {
+ const options = { month: 'short', day: 'numeric' };
+ return date.toLocaleDateString('en-US', options);
+}
+
+// Simple debounce function
+function debounce(func, wait) {
+ let timeout;
+ return function(...args) {
+ const context = this;
+ clearTimeout(timeout);
+ timeout = setTimeout(() => func.apply(context, args), wait);
+ };
+}
+
+
+
+// Function to create meeting card elements
+function createMeetingCard(meeting) {
+ const card = document.createElement('div');
+ card.className = 'meeting-card';
+ card.dataset.id = meeting.id;
+
+ let iconHtml = '';
+
+ if (meeting.type === 'profile') {
+ iconHtml = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Paint shopping plan
+ +
+# Meeting Title
+* Paint shopping plan
+
+# Meeting Date and Time
+* April 24, 2025, 22:36:12
+
+# Participants
+* Nick Faro
+
+# Description
+* The meeting involved Nick Faro discussing plans to purchase a can of paint. The conversation was brief and included a humorous remark about going to Mars. There were no specific action items or further details discussed during the meeting.
+
+Chat with meeting transcript: https://notes.granola.ai/d/393a95cf-4788-4a47-9deb-3952c665a56b
+
+
+
+
+
+
+ 
+
+ `;
+ } else if (meeting.type === 'calendar') {
+ iconHtml = `
+
+ `;
+ } else if (meeting.type === 'document') {
+ iconHtml = `
+
+ `;
+ }
+
+ let subtitleHtml = meeting.hasDemo
+ ? ``
+ : `${meeting.subtitle}
`;
+
+ card.innerHTML = `
+ ${iconHtml}
+
+
+ ${meeting.title}
+ ${subtitleHtml}
+
+
+
+ `;
+
+ return card;
+}
+
+// Function to show home view
+function showHomeView() {
+ document.getElementById('homeView').style.display = 'block';
+ document.getElementById('editorView').style.display = 'none';
+ document.getElementById('backButton').style.display = 'none';
+ document.getElementById('newNoteBtn').style.display = 'block';
+ document.getElementById('toggleSidebar').style.display = 'none';
+
+ // Show Record Meeting button and set its state based on meeting detection
+ const joinMeetingBtn = document.getElementById('joinMeetingBtn');
+ if (joinMeetingBtn) {
+ // Always show the button
+ joinMeetingBtn.style.display = 'block';
+ joinMeetingBtn.innerHTML = 'Record Meeting';
+
+ // Enable/disable based on meeting detection
+ if (window.meetingDetected) {
+ joinMeetingBtn.disabled = false;
+ } else {
+ joinMeetingBtn.disabled = true;
+ }
+ }
+}
+
+// Function to show editor view
+function showEditorView(meetingId) {
+ console.log(`Showing editor view for meeting ID: ${meetingId}`);
+
+ // Make the views visible/hidden
+ document.getElementById('homeView').style.display = 'none';
+ document.getElementById('editorView').style.display = 'block';
+ document.getElementById('backButton').style.display = 'block';
+ document.getElementById('newNoteBtn').style.display = 'none';
+ document.getElementById('toggleSidebar').style.display = 'none'; // Hide the sidebar toggle
+
+ // Always hide the join meeting button when in editor view
+ const joinMeetingBtn = document.getElementById('joinMeetingBtn');
+ if (joinMeetingBtn) {
+ joinMeetingBtn.style.display = 'none';
+ }
+
+ // Find the meeting in either upcoming or past meetings
+ let meeting = [...upcomingMeetings, ...pastMeetings].find(m => m.id === meetingId);
+
+ if (!meeting) {
+ console.error(`Meeting not found: ${meetingId}`);
+ return;
+ }
+
+ // Set the current editing meeting ID
+ currentEditingMeetingId = meetingId;
+ console.log(`Now editing meeting: ${meetingId} - ${meeting.title}`);
+
+
+
+ // Set the meeting title
+ document.getElementById('noteTitle').textContent = meeting.title;
+
+ // Set the date display
+ const dateObj = new Date(meeting.date);
+ document.getElementById('noteDate').textContent = formatDate(dateObj);
+
+ // Show/hide the Recall recording link
+ const recallLinkEl = document.getElementById('recallLink');
+ if (recallLinkEl) {
+ if (meeting.recallRecordingId) {
+ recallLinkEl.style.display = 'inline-flex';
+ recallLinkEl.onclick = async (e) => {
+ e.preventDefault();
+ recallLinkEl.textContent = 'Loading...';
+ try {
+ const result = await window.electronAPI.getRecordingVideoUrl(meeting.recallRecordingId);
+ if (result.success && result.videoUrl) {
+ window.electronAPI.openExternal(result.videoUrl);
+ } else {
+ alert('Recording not available yet: ' + (result.error || 'Please try again later.'));
+ }
+ } catch (err) {
+ alert('Error fetching recording: ' + err.message);
+ } finally {
+ recallLinkEl.innerHTML = `
+
+ View Recording
+ `;
+ }
+ };
+ } else {
+ recallLinkEl.style.display = 'none';
+ }
+ }
+
+ // Get the editor element
+ const editorElement = document.getElementById('simple-editor');
+
+ // Important: Reset the editor content completely
+ if (editorElement) {
+ editorElement.value = '';
+ }
+
+ // Add a small delay to ensure the DOM has updated before setting content
+ setTimeout(() => {
+ if (meeting.content) {
+ editorElement.value = meeting.content;
+ console.log(`Loaded content for meeting: ${meetingId}, length: ${meeting.content.length} characters`);
+ } else {
+ // If content is missing, create template
+ const now = new Date();
+ const template = `# Meeting Title\n• ${meeting.title}\n\n# Meeting Date and Time\n• ${now.toLocaleString()}\n\n# Participants\n• \n\n# Description\n• \n\nChat with meeting transcript: `;
+ editorElement.value = template;
+
+ // Save this template to the meeting
+ meeting.content = template;
+ saveMeetingsData();
+ console.log(`Created new template for meeting: ${meetingId}`);
+ }
+
+ // Set up auto-save handler for this specific note
+ setupAutoSaveHandler();
+
+ // Add event listener to the title
+ setupTitleEditing();
+
+ // Check if this note has an active recording and update the record button
+ checkActiveRecordingState();
+
+ // Update debug panel with any available data if it's open
+ const debugPanel = document.getElementById('debugPanel');
+ if (debugPanel && !debugPanel.classList.contains('hidden')) {
+ // Update transcript if available
+ if (meeting.transcript && meeting.transcript.length > 0) {
+ updateDebugTranscript(meeting.transcript);
+ } else {
+ // Clear transcript area if no transcript
+ const transcriptContent = document.getElementById('transcriptContent');
+ if (transcriptContent) {
+ transcriptContent.innerHTML = `
+
+
+ `;
+ }
+ }
+
+ // Update participants if available
+ if (meeting.participants && meeting.participants.length > 0) {
+ updateDebugParticipants(meeting.participants);
+ } else {
+ // Clear participants area if no participants
+ const participantsContent = document.getElementById('participantsContent');
+ if (participantsContent) {
+ participantsContent.innerHTML = `
+ No transcript available yet
+
+
+ `;
+ }
+ }
+
+ // Reset video preview when changing notes
+ const videoContent = document.getElementById('videoContent');
+ if (videoContent) {
+ videoContent.innerHTML = `
+ No participants detected yet
+
+
+
+ `;
+ }
+ }
+ }, 50);
+}
+
+// Setup the title editing and save function
+function setupTitleEditing() {
+ const titleElement = document.getElementById('noteTitle');
+
+ // Remove existing event listeners if any
+ titleElement.removeEventListener('blur', titleBlurHandler);
+ titleElement.removeEventListener('keydown', titleKeydownHandler);
+
+ // Add event listeners
+ titleElement.addEventListener('blur', titleBlurHandler);
+ titleElement.addEventListener('keydown', titleKeydownHandler);
+}
+
+// Event handler for title blur
+async function titleBlurHandler() {
+ await saveCurrentNote();
+}
+
+// Event handler for title keydown
+function titleKeydownHandler(e) {
+ if (e.key === 'Enter') {
+ e.preventDefault(); // Prevent new line
+ e.target.blur(); // Remove focus to trigger save
+ }
+}
+
+// Create a single reference to the auto-save handler to ensure we can remove it properly
+let currentAutoSaveHandler = null;
+
+
+// Function to set up auto-save handler
+function setupAutoSaveHandler() {
+ // Create a debounced auto-save handler
+ const autoSaveHandler = debounce(async () => {
+ console.log('Auto-saving note due to content change');
+ if (currentEditingMeetingId) {
+ console.log(`Auto-save triggered for meeting: ${currentEditingMeetingId}`);
+ await saveCurrentNote();
+ } else {
+ console.warn('Cannot auto-save: No active meeting ID');
+ }
+ }, 1000);
+
+ // First remove any existing handler
+ if (currentAutoSaveHandler) {
+ const editorElement = document.getElementById('simple-editor');
+ if (editorElement) {
+ console.log('Removing existing auto-save handler');
+ editorElement.removeEventListener('input', currentAutoSaveHandler);
+ }
+ }
+
+ // Store the reference for future cleanup
+ currentAutoSaveHandler = autoSaveHandler;
+
+ // Get the editor element and attach the new handler
+ const editorElement = document.getElementById('simple-editor');
+ if (editorElement) {
+ editorElement.addEventListener('input', autoSaveHandler);
+ console.log(`Set up editor auto-save handler for meeting: ${currentEditingMeetingId || 'none'}`);
+
+ // Manually trigger a save once to ensure the content is saved
+ setTimeout(() => {
+ console.log('Triggering initial save after setup');
+ editorElement.dispatchEvent(new Event('input'));
+ }, 500);
+ } else {
+ console.warn('Editor element not found for auto-save setup');
+ }
+}
+
+// Function to create a new meeting
+async function createNewMeeting() {
+ console.log('Creating new note...');
+
+ // Save any existing note before creating a new one
+ if (currentEditingMeetingId) {
+ await saveCurrentNote();
+ console.log('Saved current note before creating new one');
+ }
+
+ // Reset the current editing ID to ensure we start fresh
+ currentEditingMeetingId = null;
+
+ // Generate a unique ID
+ const id = 'meeting-' + Date.now();
+ console.log('Generated new meeting ID:', id);
+
+ // Current date and time
+ const now = new Date();
+
+ // Generate the template for the content
+ const template = `# Meeting Title\n• New Note\n\n# Meeting Date and Time\n• ${now.toLocaleString()}\n\n# Participants\n• \n\n# Description\n• \n\nChat with meeting transcript: `;
+
+ // Create a new meeting object - ensure it's of type document
+ const newMeeting = {
+ id: id,
+ type: 'document', // Explicitly set as document type, not calendar
+ title: 'New Note',
+ subtitle: now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+ hasDemo: false,
+ date: now.toISOString(),
+ participants: [],
+ content: template // Set the content directly
+ };
+
+ // Log what we're adding
+ console.log(`Adding new meeting: id=${id}, title=${newMeeting.title}, content.length=${template.length}`);
+
+ // Add to pastMeetings - make sure to push to both arrays
+ pastMeetings.unshift(newMeeting);
+ meetingsData.pastMeetings.unshift(newMeeting);
+
+ // Update the grouped meetings
+ const dateKey = formatDateHeader(newMeeting.date);
+ if (!pastMeetingsByDate[dateKey]) {
+ pastMeetingsByDate[dateKey] = [];
+ }
+ pastMeetingsByDate[dateKey].unshift(newMeeting);
+
+ // Save the data to file
+ try {
+ await saveMeetingsData();
+ console.log('New meeting created and saved:', newMeeting.title);
+ } catch (error) {
+ console.error('Error saving new meeting:', error);
+ }
+
+ // Set current editing ID to the new meeting ID BEFORE showing the editor
+ currentEditingMeetingId = id;
+ console.log('Set currentEditingMeetingId to:', id);
+
+ // Force a reset of the editor before showing the new meeting
+ const editorElement = document.getElementById('simple-editor');
+ if (editorElement) {
+ editorElement.value = '';
+ }
+
+ // Now show the editor view with the new meeting
+ showEditorView(id);
+
+ // Automatically start recording for the new note
+ try {
+ console.log('Auto-starting recording for new note');
+ // Start manual recording for the new note
+ window.electronAPI.startManualRecording(id)
+ .then(result => {
+ if (result.success) {
+ console.log('Auto-started recording for new note with ID:', result.recordingId);
+ // Update recording button UI
+ window.isRecording = true;
+ window.currentRecordingId = result.recordingId;
+
+ // Update recording button UI
+ const recordButton = document.getElementById('recordButton');
+ if (recordButton) {
+ const recordIcon = recordButton.querySelector('.record-icon');
+ const stopIcon = recordButton.querySelector('.stop-icon');
+
+ recordButton.classList.add('recording');
+ recordIcon.style.display = 'none';
+ stopIcon.style.display = 'block';
+ }
+ } else {
+ console.error('Failed to auto-start recording:', result.error);
+ }
+ })
+ .catch(error => {
+ console.error('Error auto-starting recording:', error);
+ });
+ } catch (error) {
+ console.error('Exception auto-starting recording:', error);
+ }
+
+ return id;
+}
+
+// Function to render meetings to the page
+function renderMeetings() {
+ // Clear previous content
+ const mainContent = document.querySelector('.main-content .content-container');
+ mainContent.innerHTML = '';
+
+ // Create all notes section (replaces both upcoming and date-grouped sections)
+ const notesSection = document.createElement('section');
+ notesSection.className = 'meetings-section';
+ notesSection.innerHTML = `
+ Video preview will appear here
+Notes
+ + `; + mainContent.appendChild(notesSection); + + // Get the notes container + const notesContainer = notesSection.querySelector('#notes-list'); + + // Add all meetings to the notes section (both upcoming and past) + const allMeetings = [...upcomingMeetings, ...pastMeetings]; + + // Sort by date, newest first + allMeetings.sort((a, b) => { + return new Date(b.date) - new Date(a.date); + }); + + // Filter out calendar entries and add only document type meetings to the container + allMeetings + .filter(meeting => meeting.type !== 'calendar') // Skip calendar entries + .forEach(meeting => { + notesContainer.appendChild(createMeetingCard(meeting)); + }); +} + +// Load meetings data from file +async function loadMeetingsDataFromFile() { + console.log("Loading meetings data from file..."); + try { + const result = await window.electronAPI.loadMeetingsData(); + console.log("Load result success:", result.success); + + if (result.success) { + console.log(`Got data with ${result.data.pastMeetings?.length || 0} past meetings`); + if (result.data.pastMeetings && result.data.pastMeetings.length > 0) { + console.log("Most recent meeting:", result.data.pastMeetings[0].id, result.data.pastMeetings[0].title); + } + + // Initialize arrays if they don't exist in the loaded data + if (!result.data.upcomingMeetings) { + result.data.upcomingMeetings = []; + } + + if (!result.data.pastMeetings) { + result.data.pastMeetings = []; + } + + // Update the meetings data objects + Object.assign(meetingsData, result.data); + + // Clear and reassign the references + upcomingMeetings.length = 0; + pastMeetings.length = 0; + + console.log("Before updating arrays, pastMeetings count:", pastMeetings.length); + + // Filter out calendar entries when loading data + meetingsData.upcomingMeetings + .filter(meeting => meeting.type !== 'calendar') + .forEach(meeting => upcomingMeetings.push(meeting)); + + meetingsData.pastMeetings + .filter(meeting => meeting.type !== 'calendar') + .forEach(meeting => pastMeetings.push(meeting)); + + console.log("After updating arrays, pastMeetings count:", pastMeetings.length); + if (pastMeetings.length > 0) { + console.log("First past meeting:", pastMeetings[0].id, pastMeetings[0].title); + } + + // Regroup past meetings by date + pastMeetingsByDate = {}; + meetingsData.pastMeetings.forEach(meeting => { + const dateKey = formatDateHeader(meeting.date); + if (!pastMeetingsByDate[dateKey]) { + pastMeetingsByDate[dateKey] = []; + } + pastMeetingsByDate[dateKey].push(meeting); + }); + + console.log('Meetings data loaded from file'); + + // Re-render the meetings + renderMeetings(); + } else { + console.error('Failed to load meetings data from file:', result.error); + } + } catch (error) { + console.error('Error loading meetings data from file:', error); + } +} + +// Function to update the transcript section in the debug panel +function updateDebugTranscript(transcript) { + const transcriptContent = document.getElementById('transcriptContent'); + if (!transcriptContent) return; + + // Check if user was at bottom before clearing content + const wasAtBottom = transcriptContent.scrollTop + transcriptContent.clientHeight >= transcriptContent.scrollHeight - 5; + + // Clear previous content + transcriptContent.innerHTML = ''; + + if (!transcript || transcript.length === 0) { + // Show placeholder if no transcript is available + transcriptContent.innerHTML = ` +
+
+ `;
+ return;
+ }
+
+ // Create transcript entries
+ const transcriptDiv = document.createElement('div');
+ transcriptDiv.className = 'transcript-entries';
+
+ transcript.forEach((entry, index) => {
+ const entryDiv = document.createElement('div');
+ entryDiv.className = 'transcript-entry';
+
+ const speaker = entry.participant?.name || entry.speaker || 'Unknown';
+ const text = entry.words
+ ? entry.words.map(word => word.text).join(' ')
+ : entry.text || '';
+ const firstWord = entry.words?.[0];
+ const absTimestamp = firstWord?.start_timestamp?.absolute;
+ const formattedTime = absTimestamp
+ ? new Date(absTimestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+ : '';
+
+ entryDiv.innerHTML = `
+ No transcript available yet
+${speaker}
+ ${text}
+
+ `;
+
+ // Add a highlight class for the newest entry
+ if (index === transcript.length - 1) {
+ entryDiv.classList.add('newest-entry');
+ }
+
+ transcriptDiv.appendChild(entryDiv);
+ });
+
+ transcriptContent.appendChild(transcriptDiv);
+
+ // Only auto-scroll to bottom if user was at the bottom before the update
+ if (wasAtBottom) {
+ // Use setTimeout to ensure DOM has updated
+ setTimeout(() => {
+ transcriptContent.scrollTop = transcriptContent.scrollHeight;
+ }, 0);
+ }
+}
+
+// Function to update the video preview in the debug panel
+function updateDebugVideoPreview(frameData) {
+ // Get the image data from the frame
+ const { buffer, participantId, participantName, frameType } = frameData;
+
+ // Determine if this is a screenshare or participant video
+ const isScreenshare = frameType !== 'webcam';
+
+ if (isScreenshare) {
+ updateScreensharePreview(frameData);
+ } else {
+ updateParticipantVideoPreview(frameData);
+ }
+
+ // Make sure debug panel toggle shows new content notification if panel is closed
+ const debugPanel = document.getElementById('debugPanel');
+ if (debugPanel && debugPanel.classList.contains('hidden')) {
+ const debugPanelToggle = document.getElementById('debugPanelToggle');
+ if (debugPanelToggle && !debugPanelToggle.classList.contains('has-new-content')) {
+ debugPanelToggle.classList.add('has-new-content');
+ }
+ }
+}
+
+// Function to update participant video preview
+function updateParticipantVideoPreview(frameData) {
+ const videoContent = document.getElementById('videoContent');
+ if (!videoContent) return;
+
+ const { buffer, participantId, participantName, frameType } = frameData;
+
+ // Check if we already have a container for this participant
+ let participantVideoContainer = document.getElementById(`video-participant-${participantId}`);
+
+ // If no container exists, create one
+ if (!participantVideoContainer) {
+ // Clear the placeholder content if this is the first frame
+ if (videoContent.querySelector('.placeholder-content')) {
+ videoContent.innerHTML = '';
+ }
+
+ // Create a container for this participant's video
+ participantVideoContainer = document.createElement('div');
+ participantVideoContainer.id = `video-participant-${participantId}`;
+ participantVideoContainer.className = 'video-participant-container';
+
+ // Add the name label
+ const nameLabel = document.createElement('div');
+ nameLabel.className = 'video-participant-name';
+ nameLabel.textContent = participantName;
+ participantVideoContainer.appendChild(nameLabel);
+
+ // Create an image element for the video frame
+ const videoImg = document.createElement('img');
+ videoImg.className = 'video-frame';
+ videoImg.id = `video-frame-${participantId}`;
+ participantVideoContainer.appendChild(videoImg);
+
+ // Add the frame type label
+ const typeLabel = document.createElement('div');
+ typeLabel.className = 'video-frame-type';
+ typeLabel.textContent = 'Camera';
+ participantVideoContainer.appendChild(typeLabel);
+
+ // Add to the video content area
+ videoContent.appendChild(participantVideoContainer);
+ }
+
+ // Update the image with the new frame
+ const videoImg = document.getElementById(`video-frame-${participantId}`);
+ if (videoImg) {
+ videoImg.src = `data:image/png;base64,${buffer}`;
+ }
+}
+
+// Function to update screenshare preview
+function updateScreensharePreview(frameData) {
+ const screenshareContent = document.getElementById('screenshareContent');
+ if (!screenshareContent) return;
+
+ const { buffer, participantId, participantName, frameType } = frameData;
+
+ // Check if we already have a container for this screenshare
+ let screenshareContainer = document.getElementById(`screenshare-participant-${participantId}`);
+
+ // If no container exists, create one
+ if (!screenshareContainer) {
+ // Clear the placeholder content if this is the first frame
+ if (screenshareContent.querySelector('.placeholder-content')) {
+ screenshareContent.innerHTML = '';
+ }
+
+ // Create a container for this participant's screenshare
+ screenshareContainer = document.createElement('div');
+ screenshareContainer.id = `screenshare-participant-${participantId}`;
+ screenshareContainer.className = 'video-participant-container';
+
+ // Create an image element for the screenshare frame
+ const screenshareImg = document.createElement('img');
+ screenshareImg.className = 'video-frame';
+ screenshareImg.id = `screenshare-frame-${participantId}`;
+ screenshareContainer.appendChild(screenshareImg);
+
+ // Add the frame type label
+ const typeLabel = document.createElement('div');
+ typeLabel.className = 'video-frame-type';
+ typeLabel.textContent = 'Screen';
+ screenshareContainer.appendChild(typeLabel);
+
+ // Add to the screenshare content area
+ screenshareContent.appendChild(screenshareContainer);
+ }
+
+ // Update the image with the new frame
+ const screenshareImg = document.getElementById(`screenshare-frame-${participantId}`);
+ if (screenshareImg) {
+ screenshareImg.src = `data:image/png;base64,${buffer}`;
+ }
+}
+
+// Function to update the participants section in the debug panel
+function updateDebugParticipants(participants) {
+ const participantsContent = document.getElementById('participantsContent');
+ if (!participantsContent) return;
+
+ // Clear previous content
+ participantsContent.innerHTML = '';
+
+ if (!participants || participants.length === 0) {
+ // Show placeholder if no participants are available
+ participantsContent.innerHTML = `
+
+
+ `;
+ return;
+ }
+
+ // Create participants list
+ const participantsList = document.createElement('div');
+ participantsList.className = 'participants-list';
+
+ // Add each participant
+ participants.forEach(participant => {
+ const participantDiv = document.createElement('div');
+ participantDiv.className = 'participant-entry';
+
+ participantDiv.innerHTML = `
+ No participants detected yet
+
+
+
+ ${participant.name || 'Unknown'}
+ ${participant.status || 'Active'}
+ `;
+
+ participantsList.appendChild(participantDiv);
+ });
+
+ participantsContent.appendChild(participantsList);
+}
+
+// Function to initialize the debug panel
+function initDebugPanel() {
+ const debugPanelToggle = document.getElementById('debugPanelToggle');
+ const debugPanel = document.getElementById('debugPanel');
+ const closeDebugPanelBtn = document.getElementById('closeDebugPanelBtn');
+
+ // Set up toggle button for the debug panel
+ if (debugPanelToggle && debugPanel) {
+ debugPanelToggle.addEventListener('click', () => {
+ // Toggle the debug panel visibility
+ if (debugPanel.classList.contains('hidden')) {
+ debugPanel.classList.remove('hidden');
+ document.querySelector('.app-container').classList.add('debug-panel-open');
+
+ // Update the toggle button position and remove any notification indicators
+ debugPanelToggle.style.right = '50%';
+ debugPanelToggle.classList.remove('has-new-content');
+ debugPanelToggle.innerHTML = `
+
+ `;
+
+ // If there's an active meeting, refresh the debug panels with latest data
+ if (currentEditingMeetingId) {
+ const meeting = [...upcomingMeetings, ...pastMeetings].find(m => m.id === currentEditingMeetingId);
+ if (meeting) {
+ // Update transcript if available
+ if (meeting.transcript && meeting.transcript.length > 0) {
+ updateDebugTranscript(meeting.transcript);
+ } else {
+ // Clear transcript area if no transcript
+ const transcriptContent = document.getElementById('transcriptContent');
+ if (transcriptContent) {
+ transcriptContent.innerHTML = `
+
+
+ `;
+ }
+ }
+
+ // Update participants if available
+ if (meeting.participants && meeting.participants.length > 0) {
+ updateDebugParticipants(meeting.participants);
+ } else {
+ // Clear participants area if no participants
+ const participantsContent = document.getElementById('participantsContent');
+ if (participantsContent) {
+ participantsContent.innerHTML = `
+ No transcript available yet
+
+
+ `;
+ }
+ }
+
+ // Reset video preview when opening debug panel
+ const videoContent = document.getElementById('videoContent');
+ if (videoContent) {
+ videoContent.innerHTML = `
+ No participants detected yet
+
+
+
+ `;
+ }
+ }
+ }
+ } else {
+ debugPanel.classList.add('hidden');
+ document.querySelector('.app-container').classList.remove('debug-panel-open');
+
+ // Reset the toggle button position
+ debugPanelToggle.style.right = '0';
+ debugPanelToggle.innerHTML = `
+
+ `;
+ }
+ });
+ }
+
+ // Set up close button for the debug panel
+ if (closeDebugPanelBtn && debugPanel) {
+ closeDebugPanelBtn.addEventListener('click', () => {
+ debugPanel.classList.add('hidden');
+ // Restore the editorView to full width
+ document.querySelector('.app-container').classList.remove('debug-panel-open');
+
+ // Reset the toggle button position and icon
+ const debugPanelToggle = document.getElementById('debugPanelToggle');
+ if (debugPanelToggle) {
+ debugPanelToggle.style.right = '0';
+ debugPanelToggle.innerHTML = `
+
+ `;
+ }
+ });
+ }
+
+ // Set up clear button for the logger section
+ const clearLoggerBtn = document.getElementById('clearLoggerBtn');
+ if (clearLoggerBtn) {
+ clearLoggerBtn.addEventListener('click', () => {
+ sdkLogger.clear();
+ });
+ }
+}
+
+// SDK Logger functions
+const sdkLogger = {
+ logs: [],
+ maxLogs: 100,
+
+ // Initialize the logger
+ init() {
+ // Listen for logs from the main process
+ window.sdkLoggerBridge?.onSdkLog(logEntry => {
+ // Add an origin flag to logs created in this renderer to prevent duplicates
+ if (!logEntry.originatedFromRenderer) {
+ this.addLogEntry(logEntry);
+ }
+ });
+
+ // Log initialization
+ this.log('SDK Logger initialized', 'info');
+ },
+
+ // Log an API call
+ logApiCall(method, params = {}) {
+ const logEntry = {
+ type: 'api-call',
+ method,
+ params,
+ timestamp: new Date()
+ };
+
+ // Send to main process
+ this._sendToMainProcess(logEntry);
+
+ // Add to local logs
+ this.addLogEntry(logEntry);
+ },
+
+ // Log an event
+ logEvent(eventType, data = {}) {
+ const logEntry = {
+ type: 'event',
+ eventType,
+ data,
+ timestamp: new Date()
+ };
+
+ // Send to main process
+ this._sendToMainProcess(logEntry);
+
+ // Add to local logs
+ this.addLogEntry(logEntry);
+ },
+
+ // Log an error
+ logError(errorType, message) {
+ const logEntry = {
+ type: 'error',
+ errorType,
+ message,
+ timestamp: new Date()
+ };
+
+ // Send to main process
+ this._sendToMainProcess(logEntry);
+
+ // Add to local logs
+ this.addLogEntry(logEntry);
+ },
+
+ // Log a generic message
+ log(message, level = 'info') {
+ const logEntry = {
+ type: level,
+ message,
+ timestamp: new Date()
+ };
+
+ // Send to main process
+ this._sendToMainProcess(logEntry);
+
+ // Add to local logs
+ this.addLogEntry(logEntry);
+ },
+
+ // Helper to send logs to main process
+ _sendToMainProcess(logEntry) {
+ if (window.sdkLoggerBridge?.sendSdkLog) {
+ // Mark this log entry as originating from this renderer to prevent duplicates
+ const markedLogEntry = { ...logEntry, originatedFromRenderer: true };
+ window.sdkLoggerBridge.sendSdkLog(markedLogEntry);
+ }
+ },
+
+ // Add a log entry to the UI and internal array
+ addLogEntry(entry) {
+ // Add to internal logs array
+ this.logs.push(entry);
+
+ // Trim logs if we have too many
+ if (this.logs.length > this.maxLogs) {
+ this.logs = this.logs.slice(-this.maxLogs);
+ }
+
+ // Add to UI
+ const loggerContent = document.getElementById('sdkLoggerContent');
+ if (loggerContent) {
+ const logElement = document.createElement('div');
+ logElement.className = `sdk-log-entry ${entry.type}`;
+
+ const timestamp = document.createElement('div');
+ timestamp.className = 'timestamp';
+ timestamp.textContent = this.formatTimestamp(entry.timestamp instanceof Date ? entry.timestamp : new Date(entry.timestamp));
+ logElement.appendChild(timestamp);
+
+ // Format content based on log type
+ let content = '';
+
+ switch (entry.type) {
+ case 'api-call':
+ content = `RecallAiSdk.${entry.method}()`;
+ if (entry.params && Object.keys(entry.params).length > 0) {
+ content += `Video preview will appear here
+${this.formatParams(entry.params)}
`;
+ }
+ break;
+
+ case 'event':
+ content = `Event: ${entry.eventType}`;
+ if (entry.data && Object.keys(entry.data).length > 0) {
+ content += `${this.formatParams(entry.data)}
`;
+ }
+ break;
+
+ case 'error':
+ content = `Error: ${entry.errorType}`;
+ if (entry.message) {
+ content += `${entry.message}
`;
+ }
+ break;
+
+ default:
+ content = entry.message;
+ }
+
+ logElement.innerHTML += content;
+
+ // Add to the top of the log
+ loggerContent.insertBefore(logElement, loggerContent.firstChild);
+
+ // Only auto-scroll to top if user is already at the top
+ const isAtTop = loggerContent.scrollTop <= 5;
+ if (isAtTop) {
+ loggerContent.scrollTop = 0;
+ }
+ }
+ },
+
+ // Clear all logs
+ clear() {
+ this.logs = [];
+ const loggerContent = document.getElementById('sdkLoggerContent');
+ if (loggerContent) {
+ loggerContent.innerHTML = '';
+ }
+ },
+
+ // Format timestamp to readable string
+ formatTimestamp(date) {
+ return date.toLocaleTimeString('en-US', {
+ hour12: false,
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ fractionalSecondDigits: 3
+ });
+ },
+
+ // Format parameters object to JSON string
+ formatParams(params) {
+ try {
+ return JSON.stringify(params, null, 2)
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''')
+ .replace(/\n/g, '') + .replace(/ /g, ' '); + } catch (e) { + return String(params); + } + } +}; + +// Initialize the app when the DOM is loaded +document.addEventListener('DOMContentLoaded', async () => { + console.log('DOM content loaded, loading data from file...'); + + // Initialize the SDK Logger + sdkLogger.init(); + + // Initialize the debug panel + initDebugPanel(); + + // Try to load the latest data from file - this is the only data source + await loadMeetingsDataFromFile(); + + // Render meetings only after loading from file + console.log('Data loaded, rendering meetings...'); + renderMeetings(); + + // Initially show home view + showHomeView(); + + // Listen for meeting detection status updates + window.electronAPI.onMeetingDetectionStatus((data) => { + console.log('Meeting detection status update:', data); + const joinMeetingBtn = document.getElementById('joinMeetingBtn'); + + // Store the meeting detection state globally + window.meetingDetected = data.detected; + + if (joinMeetingBtn) { + // Only update button state if we're in the home view + const inHomeView = document.getElementById('homeView').style.display !== 'none'; + + if (inHomeView) { + // Always show the button, but enable/disable based on meeting detection + joinMeetingBtn.style.display = 'block'; + joinMeetingBtn.disabled = !data.detected; + } + } + }); + + // Listen for requests to open a meeting note (from notification click) + window.electronAPI.onOpenMeetingNote((meetingId) => { + console.log('Received request to open meeting note:', meetingId); + + // Ensure we have the latest data before showing the note + loadMeetingsDataFromFile().then(() => { + console.log('Data refreshed, checking for meeting ID:', meetingId); + + // Log the list of available meeting IDs to help with debugging + console.log('Available meeting IDs:', pastMeetings.map(m => m.id)); + + // Verify the meeting exists in our data + const meeting = [...upcomingMeetings, ...pastMeetings].find(m => m.id === meetingId); + + if (meeting) { + console.log('Found meeting to open:', meeting.title); + setTimeout(() => { + showEditorView(meetingId); + }, 200); // Add a small delay to ensure UI is ready + } else { + console.error('Meeting not found with ID:', meetingId); + // Attempt to reload data again after a delay + setTimeout(() => { + console.log('Retrying data load after delay...'); + loadMeetingsDataFromFile().then(() => { + const retryMeeting = [...upcomingMeetings, ...pastMeetings].find(m => m.id === meetingId); + if (retryMeeting) { + console.log('Found meeting on second attempt:', retryMeeting.title); + showEditorView(meetingId); + } else { + console.error('Meeting still not found after retry. Available meetings:', + pastMeetings.map(m => `${m.id}: ${m.title}`)); + } + }); + }, 1500); + } + }); + }); + + // Listen for recording completed events + window.electronAPI.onRecordingCompleted((meetingId) => { + console.log('Recording completed for meeting:', meetingId); + // If this note is currently being edited, reload its content + if (currentEditingMeetingId === meetingId) { + loadMeetingsDataFromFile().then(() => { + // Refresh the editor with the updated content + const meeting = [...upcomingMeetings, ...pastMeetings].find(m => m.id === meetingId); + if (meeting) { + document.getElementById('simple-editor').value = meeting.content; + } + }); + } + }); + + // Listen for video frame events + window.electronAPI.onVideoFrame((data) => { + // Only handle video frames for the currently open meeting + if (data.noteId === currentEditingMeetingId) { + console.log(`Video frame received for participant: ${data.participantName}`); + + // Update the video preview in the debug panel + updateDebugVideoPreview(data); + } + }); + + // Listen for participants update events + window.electronAPI.onParticipantsUpdated((meetingId) => { + console.log('Participants updated for meeting:', meetingId); + + // If this note is currently being edited, refresh the data + // and update the debug panel's participants section + if (currentEditingMeetingId === meetingId) { + loadMeetingsDataFromFile().then(() => { + const meeting = [...upcomingMeetings, ...pastMeetings].find(m => m.id === meetingId); + if (meeting && meeting.participants && meeting.participants.length > 0) { + // Log the latest participant + const latestParticipant = meeting.participants[meeting.participants.length - 1]; + console.log(`Participant updated: ${latestParticipant.name}`); + + // Update the participants area in the debug panel + updateDebugParticipants(meeting.participants); + + // Show notification about new participant if debug panel is closed + const debugPanel = document.getElementById('debugPanel'); + if (debugPanel && debugPanel.classList.contains('hidden')) { + const debugPanelToggle = document.getElementById('debugPanelToggle'); + if (debugPanelToggle) { + // Add pulse effect to show there's new content + debugPanelToggle.classList.add('has-new-content'); + + // Create a mini notification for participant join + const miniNotification = document.createElement('div'); + miniNotification.className = 'debug-notification participant-notification'; + miniNotification.innerHTML = ` + New Participant: + ${latestParticipant.name || 'Unknown'} + `; + + // Add to document + document.body.appendChild(miniNotification); + + // Remove after a short time + setTimeout(() => { + miniNotification.classList.add('fade-out'); + setTimeout(() => { + document.body.removeChild(miniNotification); + }, 500); + }, 5000); + } + } + } + }); + } + }); + + // Listen for transcript update events + window.electronAPI.onTranscriptUpdated((meetingId) => { + console.log('Transcript updated for meeting:', meetingId); + + // If this note is currently being edited, we can refresh the data + // and update the debug panel's transcript section + if (currentEditingMeetingId === meetingId) { + loadMeetingsDataFromFile().then(() => { + const meeting = [...upcomingMeetings, ...pastMeetings].find(m => m.id === meetingId); + if (meeting && meeting.transcript && meeting.transcript.length > 0) { + const latestEntry = meeting.transcript[meeting.transcript.length - 1]; + const latestSpeaker = latestEntry.participant?.name || latestEntry.speaker || 'Unknown'; + const latestText = latestEntry.words + ? latestEntry.words.map(word => word.text).join(' ') + : latestEntry.text || ''; + console.log(`Latest transcript: ${latestSpeaker}: "${latestText}"`); + + updateDebugTranscript(meeting.transcript); + + const debugPanel = document.getElementById('debugPanel'); + if (debugPanel && debugPanel.classList.contains('hidden')) { + const debugPanelToggle = document.getElementById('debugPanelToggle'); + if (debugPanelToggle) { + debugPanelToggle.classList.add('has-new-content'); + + if (window.isRecording) { + const miniNotification = document.createElement('div'); + miniNotification.className = 'debug-notification transcript-notification'; + miniNotification.innerHTML = ` + ${latestSpeaker}: + ${latestText.slice(0, 40)}${latestText.length > 40 ? '...' : ''} + `; + + // Add to document + document.body.appendChild(miniNotification); + + // Remove after a short time + setTimeout(() => { + miniNotification.classList.add('fade-out'); + setTimeout(() => { + document.body.removeChild(miniNotification); + }, 500); + }, 5000); + } + } + } + } + }); + } + }); + + // Listen for meeting title updates + window.electronAPI.onMeetingTitleUpdated((data) => { + console.log('Meeting title updated:', data); + + const { meetingId, newTitle } = data; + + // Reload the meetings data + loadMeetingsDataFromFile().then(() => { + // Re-render the meetings list to show the updated title + renderMeetings(); + + // If this is the currently open meeting, update the editor title too + if (currentEditingMeetingId === meetingId) { + const noteTitleElement = document.getElementById('noteTitle'); + if (noteTitleElement) { + noteTitleElement.textContent = newTitle; + console.log('Updated editor title to:', newTitle); + } + } + }); + }); + + // Listen for summary generation events + window.electronAPI.onSummaryGenerated((meetingId) => { + console.log('Summary generated for meeting:', meetingId); + + // If this note is currently being edited, refresh the content + if (currentEditingMeetingId === meetingId) { + loadMeetingsDataFromFile().then(() => { + const meeting = [...upcomingMeetings, ...pastMeetings].find(m => m.id === meetingId); + if (meeting) { + // Update the editor with the new content containing the summary + document.getElementById('simple-editor').value = meeting.content; + } + }); + } + }); + + // Listen for streaming summary updates + window.electronAPI.onSummaryUpdate((data) => { + const { meetingId, content, timestamp } = data; + + // If this note is currently being edited, update the content immediately + if (currentEditingMeetingId === meetingId) { + // Get the editor element + const editorElement = document.getElementById('simple-editor'); + + // Update the editor with the latest streamed content + // Use requestAnimationFrame for smoother updates that don't block the main thread + requestAnimationFrame(() => { + editorElement.value = content; + + // Force the editor to scroll to the bottom to follow the new text + // This creates a better experience of watching text appear + editorElement.scrollTop = editorElement.scrollHeight; + }); + } + }); + + // Add event listeners for buttons + document.querySelector('.new-note-btn').addEventListener('click', async () => { + console.log('New note button clicked'); + await createNewMeeting(); + }); + + // Join Meeting button handler + document.getElementById('joinMeetingBtn').addEventListener('click', async () => { + console.log('Join Meeting button clicked'); + + // Get the button element + const joinButton = document.getElementById('joinMeetingBtn'); + + // Show loading state + const originalText = joinButton.textContent; + joinButton.disabled = true; + joinButton.innerHTML = ` + + Joining... + `; + + // First check if there's a detected meeting + if (window.electronAPI.checkForDetectedMeeting) { + try { + const hasDetectedMeeting = await window.electronAPI.checkForDetectedMeeting(); + if (hasDetectedMeeting) { + console.log('Found detected meeting, joining...'); + await window.electronAPI.joinDetectedMeeting(); + // Keep button disabled as we're navigating to a different view + } else { + console.log('No active meeting detected'); + + // Reset button state + joinButton.disabled = false; + joinButton.textContent = originalText; + + // Show a little toast message + const toast = document.createElement('div'); + toast.className = 'toast'; + toast.textContent = 'No active meeting detected'; + document.body.appendChild(toast); + + // Remove toast after 3 seconds + setTimeout(() => { + toast.style.opacity = '0'; + setTimeout(() => { + document.body.removeChild(toast); + }, 300); + }, 3000); + } + } catch (error) { + console.error('Error joining meeting:', error); + + // Reset button state + joinButton.disabled = false; + joinButton.textContent = originalText; + + // Show error toast + const toast = document.createElement('div'); + toast.className = 'toast'; + toast.textContent = 'Error joining meeting'; + document.body.appendChild(toast); + + // Remove toast after 3 seconds + setTimeout(() => { + toast.style.opacity = '0'; + setTimeout(() => { + document.body.removeChild(toast); + }, 300); + }, 3000); + } + } else { + // Fallback for direct call + try { + await window.electronAPI.joinDetectedMeeting(); + // Keep button disabled as we're navigating to a different view + } catch (error) { + console.error('Error joining meeting:', error); + + // Reset button state + joinButton.disabled = false; + joinButton.textContent = originalText; + } + } + }); + + document.querySelector('.search-input').addEventListener('input', (e) => { + console.log('Search query:', e.target.value); + // TODO: Implement search functionality + }); + + // Add click event delegation for meeting cards and their actions + document.querySelector('.main-content').addEventListener('click', (e) => { + // Check if delete button was clicked + if (e.target.closest('.delete-meeting-btn')) { + e.stopPropagation(); // Prevent opening the note + const deleteBtn = e.target.closest('.delete-meeting-btn'); + const meetingId = deleteBtn.dataset.id; + + if (confirm('Are you sure you want to delete this note? This cannot be undone.')) { + console.log('Deleting meeting:', meetingId); + + // Show loading state + deleteBtn.disabled = true; + deleteBtn.innerHTML = ``; + + // Use the main process deletion via IPC + window.electronAPI.deleteMeeting(meetingId) + .then(result => { + if (result.success) { + console.log('Meeting deleted successfully on server'); + + // After successful server deletion, update local data + // Remove from local pastMeetings array + const pastMeetingIndex = pastMeetings.findIndex(meeting => meeting.id === meetingId); + if (pastMeetingIndex !== -1) { + pastMeetings.splice(pastMeetingIndex, 1); + } + + // Remove from meetingsData as well + const pastDataIndex = meetingsData.pastMeetings.findIndex(meeting => meeting.id === meetingId); + if (pastDataIndex !== -1) { + meetingsData.pastMeetings.splice(pastDataIndex, 1); + } + + // Also check upcomingMeetings + const upcomingMeetingIndex = upcomingMeetings.findIndex(meeting => meeting.id === meetingId); + if (upcomingMeetingIndex !== -1) { + upcomingMeetings.splice(upcomingMeetingIndex, 1); + } + + const upcomingDataIndex = meetingsData.upcomingMeetings.findIndex(meeting => meeting.id === meetingId); + if (upcomingDataIndex !== -1) { + meetingsData.upcomingMeetings.splice(upcomingDataIndex, 1); + } + + // Update the grouped meetings + pastMeetingsByDate = {}; + meetingsData.pastMeetings.forEach(meeting => { + const dateKey = formatDateHeader(meeting.date); + if (!pastMeetingsByDate[dateKey]) { + pastMeetingsByDate[dateKey] = []; + } + pastMeetingsByDate[dateKey].push(meeting); + }); + + // Re-render the meetings list + renderMeetings(); + } else { + // Server side deletion failed + console.error('Server deletion failed:', result.error); + alert('Failed to delete note: ' + (result.error || 'Unknown error')); + } + }) + .catch(error => { + console.error('Error deleting meeting:', error); + alert('Failed to delete note: ' + (error.message || 'Unknown error')); + }) + .finally(() => { + // Reset button state whether success or failure + deleteBtn.disabled = false; + deleteBtn.innerHTML = ``; + }); + } + return; + } + + // Find the meeting card that was clicked (for opening) + const card = e.target.closest('.meeting-card'); + if (card) { + const meetingId = card.dataset.id; + showEditorView(meetingId); + } + }); + + // Back button event listener + document.getElementById('backButton').addEventListener('click', async () => { + // Save content before going back to home + await saveCurrentNote(); + showHomeView(); + renderMeetings(); // Refresh the meeting list + }); + + // Set up the initial auto-save handler + setupAutoSaveHandler(); + + // Toggle sidebar button with initial state + const toggleSidebarBtn = document.getElementById('toggleSidebar'); + const sidebar = document.getElementById('sidebar'); + const editorContent = document.querySelector('.editor-content'); + const chatInputContainer = document.querySelector('.chat-input-container'); + + // Start with sidebar hidden + sidebar.classList.add('hidden'); + editorContent.classList.add('full-width'); + chatInputContainer.style.display = 'none'; + + toggleSidebarBtn.addEventListener('click', () => { + sidebar.classList.toggle('hidden'); + editorContent.classList.toggle('full-width'); + + // Show/hide chat input with sidebar + if (sidebar.classList.contains('hidden')) { + chatInputContainer.style.display = 'none'; + } else { + chatInputContainer.style.display = 'block'; + } + }); + + // Chat input handling + const chatInput = document.getElementById('chatInput'); + const sendButton = document.getElementById('sendButton'); + + // When send button is clicked + sendButton.addEventListener('click', () => { + const message = chatInput.value.trim(); + if (message) { + console.log('Sending message:', message); + // Here you would handle the AI chat functionality + // For now, just clear the input + chatInput.value = ''; + } + }); + + // Send message on Enter key + chatInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') { + sendButton.click(); + } + }); + + // Handle share buttons + const shareButtons = document.querySelectorAll('.share-btn'); + shareButtons.forEach(button => { + button.addEventListener('click', () => { + const action = button.textContent.trim(); + console.log(`Share action: ${action}`); + // Implement actual sharing functionality here + }); + }); + + // Handle AI option buttons + const aiButtons = document.querySelectorAll('.ai-btn'); + aiButtons.forEach(button => { + button.addEventListener('click', async () => { + const action = button.textContent.trim(); + console.log(`AI action: ${action}`); + + // Handle different AI actions + if (action === 'Generate meeting summary') { + if (!currentEditingMeetingId) { + alert('No meeting is currently open'); + return; + } + + // Show loading state + const originalText = button.textContent; + button.textContent = 'Generating summary...'; + button.disabled = true; + + try { + // Use streaming version instead of standard version + console.log('Starting streaming summary generation'); + + // Log the summary generation request to the SDK logger + sdkLogger.log('Requesting AI summary generation for meeting: ' + currentEditingMeetingId); + + window.electronAPI.generateMeetingSummaryStreaming(currentEditingMeetingId) + .then(result => { + if (result.success) { + console.log('Summary generated successfully (streaming)'); + } else { + console.error('Failed to generate summary:', result.error); + alert('Failed to generate summary: ' + result.error); + } + }) + .catch(error => { + console.error('Error generating summary:', error); + alert('Error generating summary: ' + (error.message || error)); + }) + .finally(() => { + // Reset button state + button.textContent = originalText; + button.disabled = false; + }); + } catch (error) { + console.error('Error starting streaming summary generation:', error); + alert('Error starting summary generation: ' + (error.message || error)); + + // Reset button state + button.textContent = originalText; + button.disabled = false; + } + } else if (action === 'List action items') { + alert('List action items functionality coming soon'); + } else if (action === 'Write follow-up email') { + alert('Write follow-up email functionality coming soon'); + } else if (action === 'List Q&A') { + alert('List Q&A functionality coming soon'); + } + }); + }); + + // UI variables will be initialized when the recording button is set up + + // Listen for recording state change events + window.electronAPI.onRecordingStateChange((data) => { + console.log('Recording state change received:', data); + + // If this state change is for the current note, update the UI + if (data.noteId === currentEditingMeetingId) { + console.log('Updating recording button for current note'); + const isActive = data.state === 'recording' || data.state === 'paused'; + updateRecordingButtonUI(isActive, isActive ? data.recordingId : null); + } + }); + + // Setup record/stop button toggle + const recordButton = document.getElementById('recordButton'); + if (recordButton) { + + recordButton.addEventListener('click', async () => { + // Only allow recording if we're in a note + if (!currentEditingMeetingId) { + alert('You need to be in a note to start recording'); + return; + } + + window.isRecording = !window.isRecording; + + // Get the elements inside the button + const recordIcon = recordButton.querySelector('.record-icon'); + const stopIcon = recordButton.querySelector('.stop-icon'); + + if (window.isRecording) { + try { + // Start recording + console.log('Starting manual recording for meeting:', currentEditingMeetingId); + recordButton.disabled = true; // Temporarily disable to prevent double-clicks + + // Change to stop mode immediately for better feedback + recordButton.classList.add('recording'); + recordIcon.style.display = 'none'; + stopIcon.style.display = 'block'; + + // Call the API to start recording + const result = await window.electronAPI.startManualRecording(currentEditingMeetingId); + recordButton.disabled = false; + + if (result.success) { + console.log('Manual recording started with ID:', result.recordingId); + window.currentRecordingId = result.recordingId; + + // Show a little toast message + const toast = document.createElement('div'); + toast.className = 'toast'; + toast.textContent = 'Recording started...'; + document.body.appendChild(toast); + + // Remove toast after 3 seconds + setTimeout(() => { + toast.style.opacity = '0'; + setTimeout(() => { + document.body.removeChild(toast); + }, 300); + }, 3000); + } else { + // If starting failed, revert UI + console.error('Failed to start recording:', result.error); + alert('Failed to start recording: ' + result.error); + window.isRecording = false; + recordButton.classList.remove('recording'); + recordIcon.style.display = 'block'; + stopIcon.style.display = 'none'; + } + } catch (error) { + // Handle errors + console.error('Error starting recording:', error); + alert('Error starting recording: ' + (error.message || error)); + + // Reset UI state + window.isRecording = false; + recordButton.classList.remove('recording'); + recordIcon.style.display = 'block'; + stopIcon.style.display = 'none'; + recordButton.disabled = false; + } + } else { + // Stop recording + if (window.currentRecordingId) { + try { + console.log('Stopping manual recording:', window.currentRecordingId); + recordButton.disabled = true; // Temporarily disable + + // Call the API to stop recording + const result = await window.electronAPI.stopManualRecording(window.currentRecordingId); + + // Change to record mode + recordButton.classList.remove('recording'); + recordIcon.style.display = 'block'; + stopIcon.style.display = 'none'; + recordButton.disabled = false; + + if (result.success) { + console.log('Manual recording stopped successfully'); + + // Show a little toast message + const toast = document.createElement('div'); + toast.className = 'toast'; + toast.textContent = 'Recording stopped. Generating summary...'; + document.body.appendChild(toast); + + // Remove toast after 3 seconds + setTimeout(() => { + toast.style.opacity = '0'; + setTimeout(() => { + document.body.removeChild(toast); + }, 300); + }, 3000); + + // The recording-completed event handler will take care of refreshing the content + // and generating the summary when the recording finishes processing + + } else { + console.error('Failed to stop recording:', result.error); + alert('Failed to stop recording: ' + result.error); + } + + // Reset recording ID + window.currentRecordingId = null; + } catch (error) { + console.error('Error stopping recording:', error); + alert('Error stopping recording: ' + (error.message || error)); + recordButton.disabled = false; + } + } else { + console.warn('No active recording ID found'); + // Reset UI anyway + recordButton.classList.remove('recording'); + recordIcon.style.display = 'block'; + stopIcon.style.display = 'none'; + } + } + }); + } + + // Handle generate notes button (Auto button) + const generateButton = document.querySelector('.generate-btn'); + if (generateButton) { + generateButton.addEventListener('click', async () => { + console.log('Generating AI summary from transcript...'); + + // Check if we have an active meeting + if (!currentEditingMeetingId) { + alert('No meeting is currently open'); + return; + } + + // Store the original HTML content (including the sparkle icon) + const originalHTML = generateButton.innerHTML; + + // Show loading state - but keep the same structure + generateButton.innerHTML = ` + + Generating... + `; + generateButton.disabled = true; + + try { + // Use streaming version for better user experience + console.log('Starting streaming summary generation'); + + // Log the Auto button summary generation to the SDK logger + sdkLogger.log('Auto button: Requesting AI summary generation for meeting: ' + currentEditingMeetingId); + + const result = await window.electronAPI.generateMeetingSummaryStreaming(currentEditingMeetingId); + + if (result.success) { + console.log('Summary generated successfully (streaming)'); + // Show a little toast message + const toast = document.createElement('div'); + toast.className = 'toast'; + toast.textContent = 'Summary generated successfully!'; + document.body.appendChild(toast); + + // Remove toast after 3 seconds + setTimeout(() => { + toast.style.opacity = '0'; + setTimeout(() => { + document.body.removeChild(toast); + }, 300); + }, 3000); + } else { + console.error('Failed to generate summary:', result.error); + alert('Failed to generate summary: ' + result.error); + } + } catch (error) { + console.error('Error generating summary:', error); + alert('Error generating summary: ' + (error.message || error)); + } finally { + // Reset button state with the original HTML (including sparkle icon) + generateButton.innerHTML = originalHTML; + generateButton.disabled = false; + } + }); + } + + + + // Listen for recording completed events + window.electronAPI.onRecordingCompleted((meetingId) => { + console.log('Recording completed for meeting:', meetingId); + if (currentEditingMeetingId === meetingId) { + // Reload the meeting data first + loadMeetingsDataFromFile().then(() => { + // Refresh the editor with the updated content + const meeting = [...upcomingMeetings, ...pastMeetings].find(m => m.id === meetingId); + if (meeting) { + document.getElementById('simple-editor').value = meeting.content; + } + }); + } + }); + +}); diff --git a/packages/twenty-companion/src/sdk-logger.js b/packages/twenty-companion/src/sdk-logger.js new file mode 100644 index 00000000000..00a477d06f1 --- /dev/null +++ b/packages/twenty-companion/src/sdk-logger.js @@ -0,0 +1,84 @@ +// SDK Logger for tracking RecallAI SDK operations +// This module is shared between main and renderer processes + +// Create an event emitter for communication between processes +const { EventEmitter } = require('events'); +const logger = new EventEmitter(); + +// Export the logger +module.exports = { + // Log an SDK API call + logApiCall: function(method, params = {}) { + const logEntry = { + type: 'api-call', + method, + params, + timestamp: new Date() + }; + + // Emit the log event + logger.emit('log', logEntry); + + // Return a reference to the logger for chaining + return this; + }, + + // Log an SDK event + logEvent: function(eventType, data = {}) { + const logEntry = { + type: 'event', + eventType, + data, + timestamp: new Date() + }; + + // Emit the log event + logger.emit('log', logEntry); + + // Return a reference to the logger for chaining + return this; + }, + + // Log an error + logError: function(errorType, message) { + const logEntry = { + type: 'error', + errorType, + message, + timestamp: new Date() + }; + + // Emit the log event + logger.emit('log', logEntry); + + // Return a reference to the logger for chaining + return this; + }, + + // Log a generic message + log: function(message, level = 'info') { + const logEntry = { + type: level, + message, + timestamp: new Date() + }; + + // Emit the log event + logger.emit('log', logEntry); + + // Return a reference to the logger for chaining + return this; + }, + + // Set up a listener for logs + onLog: function(callback) { + logger.on('log', callback); + return this; + }, + + // Remove a log listener + removeLogListener: function(callback) { + logger.off('log', callback); + return this; + } +}; diff --git a/packages/twenty-companion/src/server.js b/packages/twenty-companion/src/server.js new file mode 100644 index 00000000000..077e0885ae5 --- /dev/null +++ b/packages/twenty-companion/src/server.js @@ -0,0 +1,104 @@ +const express = require('express'); +const axios = require('axios'); +const { z } = require('zod'); +const app = express(); + +require('dotenv').config(); + +// API configuration for Recall.ai +const RECALLAI_API_URL = process.env.RECALLAI_API_URL || 'https://api.recall.ai'; +const RECALLAI_API_KEY = process.env.RECALLAI_API_KEY; + +app.get('/start-recording', async (req, res) => { + console.log('Creating upload token with configured Recall.ai API key'); + + if (!RECALLAI_API_KEY) { + console.error("RECALLAI_API_KEY is missing! Set it in .env file"); + return res.json({ status: 'error', message: 'RECALLAI_API_KEY is missing' }); + } + + const url = `${RECALLAI_API_URL}/api/v1/sdk_upload/`; + + try { + const response = await axios.post(url, { + recording_config: { + transcript: { + provider: { + assembly_ai_v3_streaming: {} + } + }, + realtime_endpoints: [ + { + type: "desktop_sdk_callback", + events: [ + "participant_events.join", + "video_separate_png.data", + "transcript.data", + "transcript.provider_data" + ] + }, + ], + } + }, { + headers: { 'Authorization': `Token ${RECALLAI_API_KEY}` }, + timeout: 9000, + }); + + res.json({ + status: 'success', + upload_token: response.data.upload_token, + upload_id: response.data.id, + recording_id: response.data.recording_id, + }); + } catch (e) { + console.error("Error creating upload token:", JSON.stringify(e.errors || e.response?.data || e.message)); + res.json({ status: 'error', message: e.message }); + } +}); + +app.get('/recording/:recordingId', async (req, res) => { + const parseResult = z.string().uuid().safeParse(req.params.recordingId); + + if (!RECALLAI_API_KEY) { + return res.json({ status: 'error', message: 'RECALLAI_API_KEY is missing' }); + } + + if (!parseResult.success) { + return res.status(400).json({ status: 'error', message: 'Invalid recording ID' }); + } + + const validatedRecordingId = parseResult.data; + + try { + const response = await axios.get( + `${RECALLAI_API_URL}/api/v1/recording/${validatedRecordingId}/`, + { + headers: { 'Authorization': `Token ${RECALLAI_API_KEY}` }, + timeout: 10000, + } + ); + + const data = response.data; + const videoUrl = data.media_shortcuts?.video_mixed?.data?.download_url || null; + const transcriptUrl = data.media_shortcuts?.transcript?.data?.download_url || null; + const statusCode = data.status?.code || 'unknown'; + + res.json({ + status: 'success', + recording_status: statusCode, + video_url: videoUrl, + transcript_url: transcriptUrl, + }); + } catch (e) { + console.error("Error fetching recording:", JSON.stringify(e.response?.data || e.message)); + res.json({ status: 'error', message: e.response?.data || e.message }); + } +}); + +if (require.main === module) { + app.listen(13373, () => { + console.log(`Server listening on http://localhost:13373`); + }); +} + +module.exports = app; diff --git a/packages/twenty-companion/src/twenty-client.js b/packages/twenty-companion/src/twenty-client.js new file mode 100644 index 00000000000..b8d4583642a --- /dev/null +++ b/packages/twenty-companion/src/twenty-client.js @@ -0,0 +1,119 @@ +const axios = require('axios'); + +const LOG_PREFIX = '[Twenty]'; + +let configLogged = false; + +function getApiUrl() { + return process.env.TWENTY_API_URL; +} + +function getWorkspaceSubdomain() { + return process.env.TWENTY_WORKSPACE_SUBDOMAIN; +} + +function getApiKey() { + return process.env.TWENTY_API_KEY; +} + +function isConfigured() { + const configured = Boolean(getApiUrl() && getApiKey()); + + if (!configLogged) { + configLogged = true; + + if (!configured) { + console.log( + `${LOG_PREFIX} Integration disabled — TWENTY_API_URL or TWENTY_API_KEY not set`, + ); + } else { + console.log( + `${LOG_PREFIX} Integration enabled — ${getApiUrl()}`, + ); + } + } + + return configured; +} + +function getClient() { + return axios.create({ + baseURL: `${getApiUrl()}/rest`, + headers: { + Authorization: `Bearer ${getApiKey()}`, + 'Content-Type': 'application/json', + }, + timeout: 10000, + }); +} + +function logError(action, error) { + const status = error.response?.status; + const body = error.response?.data; + + console.error( + `${LOG_PREFIX} ${action} failed —`, + status ? `HTTP ${status}` : error.code || error.message, + body ? JSON.stringify(body) : '', + ); +} + +async function createCallRecording(name) { + console.log(`${LOG_PREFIX} Creating callRecording: "${name}"`); + + const client = getClient(); + + try { + const response = await client.post('/callRecordings', { + name, + createdAt: new Date().toISOString(), + }); + const record = response.data?.data?.createCallRecording; + + console.log( + `${LOG_PREFIX} callRecording created — id=${record?.id}`, + ); + + return record; + } catch (error) { + logError('createCallRecording', error); + throw error; + } +} + +async function endCallRecording({ callRecordingId, audioUrl, transcriptUrl, participants, localTranscript }) { + console.log( + `${LOG_PREFIX} Ending callRecording ${callRecordingId} — audioUrl=${audioUrl} transcriptUrl=${transcriptUrl || 'none'} participants=${participants?.length || 0} localTranscriptEntries=${localTranscript?.length || 0}`, + ); + + try { + const apiUrl = new URL(getApiUrl()); + const subdomain = getWorkspaceSubdomain(); + const host = subdomain + ? `${subdomain}.${apiUrl.hostname}:${apiUrl.port}` + : apiUrl.host; + + const response = await axios.post( + `${getApiUrl()}/s/end-recording`, + { callRecordingId, audioUrl, transcriptUrl, participants, localTranscript }, + { + headers: { + 'Content-Type': 'application/json', + Host: host, + }, + timeout: 30000, + }, + ); + + console.log( + `${LOG_PREFIX} callRecording ended — id=${callRecordingId}`, + ); + + return response.data; + } catch (error) { + logError('endCallRecording', error); + throw error; + } +} + +module.exports = { isConfigured, createCallRecording, endCallRecording }; diff --git a/packages/twenty-companion/test.json b/packages/twenty-companion/test.json new file mode 100644 index 00000000000..2cbd76d8054 --- /dev/null +++ b/packages/twenty-companion/test.json @@ -0,0 +1,72 @@ +{ + "node": { + "__typename": "CallRecording", + "createdAt": "2026-02-26T16:00:55.408Z", + "deletedAt": null, + "endedAt": "2026-02-26T16:02:16.961Z", + "id": "b40e2efb-ab41-4bb0-9a63-6408d785deb6", + "name": "Call Thomas Trompette / Paul Rastoin", + "noteTargets": { + "edges": [], + "__typename": "NoteTargetConnection" + }, + "person": { + "__typename": "Person", + "avatarFile": null, + "id": "e08d3628-c488-435f-b070-8f4c7a72818e", + "name": { + "firstName": "Thomas", + "lastName": "Trompette", + "__typename": "FullName" + } + }, + "personId": "e08d3628-c488-435f-b070-8f4c7a72818e", + "position": -14, + "recordingFile": [ + { + "fileId": "4b91d422-9081-49a3-8db2-99e687f33770", + "label": "video.mp4", + "extension": ".mp4", + "url": "http://localhost:3000/file/files-field/4b91d422-9081-49a3-8db2-99e687f33770?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ3b3Jrc3BhY2VJZCI6IjIwMjAyMDIwLTFjMjUtNGQwMi1iZjI1LTZhZWNjZjdlYTQxOSIsImZpbGVJZCI6IjRiOTFkNDIyLTkwODEtNDlhMy04ZGIyLTk5ZTY4N2YzMzc3MCIsInN1YiI6IjIwMjAyMDIwLTFjMjUtNGQwMi1iZjI1LTZhZWNjZjdlYTQxOSIsInR5cGUiOiJGSUxFIiwiaWF0IjoxNzcyMTIxODA1LCJleHAiOjE3NzIyMDgyMDV9.nncA5m4Pux6ExsqzalWQsNY3OjRsGjE0XqaIzoP3RxM", + "__typename": "FileObject" + } + ], + "status": "ENDED", + "summary": { + "blocknote": "[{\"id\":\"02a77590-4e98-4fcb-9fc6-b057d6e19807\",\"type\":\"bulletListItem\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Brief overview\\nShort sales qualification call between sales rep Thomas Trompette and prospect Paul Rastoin. Thomas collected basic company info and license requirements and ended the call promising to follow up with an offer.\",\"styles\":{}}],\"children\":[]},{\"id\":\"b95193dd-f779-4f7a-82a4-6a3e081c1990\",\"type\":\"bulletListItem\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Key discussion points\",\"styles\":{}}],\"children\":[{\"id\":\"f1bc4cf9-0a18-4e33-91d9-a05b965e5f8b\",\"type\":\"bulletListItem\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Introductions: Paul identified himself; company name was not clearly confirmed during the call.\",\"styles\":{}}],\"children\":[]},{\"id\":\"b4665bc7-4841-42f3-abd5-6c80cfe99117\",\"type\":\"bulletListItem\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Company location: listed as \\\"provided\\\" (no further detail on call).\",\"styles\":{}}],\"children\":[]},{\"id\":\"737973a7-454b-424e-98a1-0d1ee7ac049c\",\"type\":\"bulletListItem\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"License need: prospect indicated they want 47 licenses.\",\"styles\":{}}],\"children\":[]},{\"id\":\"d7f85ef1-2228-4b05-8781-ce482b1872a6\",\"type\":\"bulletListItem\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Why choose this CRM: prospect said they evaluated alternatives and strongly preferred this product over competitors (notably critical of Salesforce).\",\"styles\":{}}],\"children\":[]},{\"id\":\"3f62b0cb-2dfe-4c2f-b8c3-a1444ccbd8dc\",\"type\":\"bulletListItem\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Next-step stated by rep: Thomas will call back with an offer and expects it to be competitive.\",\"styles\":{}}],\"children\":[]}]},{\"id\":\"3c2993cc-ee06-4043-8733-90b9fd1393df\",\"type\":\"bulletListItem\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Action items\",\"styles\":{}}],\"children\":[{\"id\":\"b425486e-6f11-4fff-8e05-b8e67cc627cd\",\"type\":\"numberedListItem\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas / sales team to call back with a formal offer.\",\"styles\":{}}],\"children\":[]},{\"id\":\"45343680-e95a-4eb0-a8af-471c99c5c38f\",\"type\":\"numberedListItem\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Before sending the offer, confirm company name and exact location, and reconfirm the 47-license requirement.\",\"styles\":{}}],\"children\":[]},{\"id\":\"eae3f20d-cac6-4e91-82be-0442ee4434f8\",\"type\":\"numberedListItem\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"(Recommended) Confirm budget and desired implementation/timeline as part of the follow-up.\",\"styles\":{}}],\"children\":[]}]}]", + "markdown": "- Brief overview \n Short sales qualification call between sales rep Thomas Trompette and prospect Paul Rastoin. Thomas collected basic company info and license requirements and ended the call promising to follow up with an offer.\n\n- Key discussion points \n - Introductions: Paul identified himself; company name was not clearly confirmed during the call. \n - Company location: listed as \"provided\" (no further detail on call). \n - License need: prospect indicated they want 47 licenses. \n - Why choose this CRM: prospect said they evaluated alternatives and strongly preferred this product over competitors (notably critical of Salesforce). \n - Next-step stated by rep: Thomas will call back with an offer and expects it to be competitive.\n\n- Action items \n 1. Thomas / sales team to call back with a formal offer. \n 2. Before sending the offer, confirm company name and exact location, and reconfirm the 47-license requirement. \n 3. (Recommended) Confirm budget and desired implementation/timeline as part of the follow-up.", + "__typename": "RichTextV2" + }, + "taskTargets": { + "edges": [], + "__typename": "TaskTargetConnection" + }, + "transcript": { + "blocknote": "[{\"id\":\"5dcb57ba-42aa-44a7-afec-ac06eb903df3\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Paul Rastoin:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" hey there my name is paul\",\"styles\":{}}],\"children\":[]},{\"id\":\"a14e4247-2e82-4b7d-9d4b-938de65a4ff0\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas Trompette:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" okay it's thomas\",\"styles\":{}}],\"children\":[]},{\"id\":\"4b551c43-441d-467c-a1ce-2f950a2299e9\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas Trompette:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" please start by telling me what your company name is\",\"styles\":{}}],\"children\":[]},{\"id\":\"bafaaca6-41b2-4cd3-9290-e02facb8d143\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas Trompette:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" hi frenchie champaya amazing company the best ever nobody's ever seen this before\",\"styles\":{}}],\"children\":[]},{\"id\":\"8c3d5b71-f0d8-4902-bc09-5b016e4df1f7\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas Trompette:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" great and where is your company based\",\"styles\":{}}],\"children\":[]},{\"id\":\"11dcb45b-707d-40b6-bd00-7c6c5417f834\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas Trompette:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" provided\",\"styles\":{}}],\"children\":[]},{\"id\":\"bdcd69a1-3abf-4201-8d80-86a19ce5eeb1\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas Trompette:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" you should swing by i'll show you what deluxe places means\",\"styles\":{}}],\"children\":[]},{\"id\":\"56be2680-4248-44b1-9bd0-1a9a9dc9675a\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas Trompette:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" perfect how many licenses are you looking to purchase\",\"styles\":{}}],\"children\":[]},{\"id\":\"8bc8fcc6-b9d7-4f36-9899-ba79d108ba64\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas Trompette:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" let's say forty seven perfect number just perfect\",\"styles\":{}}],\"children\":[]},{\"id\":\"623d69cb-fe4d-473c-95f6-f842ccc837b3\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas Trompette:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" wonderful and lastly why did you choose twenty over all the crm platform solutions\",\"styles\":{}}],\"children\":[]},{\"id\":\"57d9a14a-93a6-416e-a27f-c52b33a0eb33\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas Trompette:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" look checked all of them salesforce bullshit export fucking communist but twenty highlighted guys\",\"styles\":{}}],\"children\":[]},{\"id\":\"73af4288-304d-43ad-8ddf-332658b7a769\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas Trompette:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" okay\",\"styles\":{}}],\"children\":[]},{\"id\":\"18b70f79-6992-4648-bb20-bd6b958c6e91\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas Trompette:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" thank you so much i have everything i need and we call you back with our offer\",\"styles\":{}}],\"children\":[]},{\"id\":\"d9f9184d-45c2-484d-a37b-932ac50d1072\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Thomas Trompette:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" better be a good one\",\"styles\":{}}],\"children\":[]},{\"id\":\"f291a5cd-9ad3-466b-ad6a-79e8533a85f1\",\"type\":\"paragraph\",\"props\":{\"textColor\":\"default\",\"backgroundColor\":\"default\",\"textAlignment\":\"left\"},\"content\":[{\"type\":\"text\",\"text\":\"Paul Rastoin:\",\"styles\":{\"bold\":true}},{\"type\":\"text\",\"text\":\" see you bye bye\",\"styles\":{}}],\"children\":[]}]", + "markdown": "**Paul Rastoin:** hey there my name is paul\n\n**Thomas Trompette:** okay it's thomas\n\n**Thomas Trompette:** please start by telling me what your company name is\n\n**Thomas Trompette:** hi frenchie champaya amazing company the best ever nobody's ever seen this before\n\n**Thomas Trompette:** great and where is your company based\n\n**Thomas Trompette:** provided\n\n**Thomas Trompette:** you should swing by i'll show you what deluxe places means\n\n**Thomas Trompette:** perfect how many licenses are you looking to purchase\n\n**Thomas Trompette:** let's say forty seven perfect number just perfect\n\n**Thomas Trompette:** wonderful and lastly why did you choose twenty over all the crm platform solutions\n\n**Thomas Trompette:** look checked all of them salesforce bullshit export fucking communist but twenty highlighted guys\n\n**Thomas Trompette:** okay\n\n**Thomas Trompette:** thank you so much i have everything i need and we call you back with our offer\n\n**Thomas Trompette:** better be a good one\n\n**Paul Rastoin:** see you bye bye", + "__typename": "RichTextV2" + }, + "transcriptFile": [ + { + "fileId": "6a819428-6d0d-4a8a-9160-6be98b2d753c", + "label": "diarized-processed1.1.json", + "extension": ".json", + "url": "http://localhost:3000/file/files-field/6a819428-6d0d-4a8a-9160-6be98b2d753c?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ3b3Jrc3BhY2VJZCI6IjIwMjAyMDIwLTFjMjUtNGQwMi1iZjI1LTZhZWNjZjdlYTQxOSIsImZpbGVJZCI6IjZhODE5NDI4LTZkMGQtNGE4YS05MTYwLTZiZTk4YjJkNzUzYyIsInN1YiI6IjIwMjAyMDIwLTFjMjUtNGQwMi1iZjI1LTZhZWNjZjdlYTQxOSIsInR5cGUiOiJGSUxFIiwiaWF0IjoxNzcyMTIxODA1LCJleHAiOjE3NzIyMDgyMDV9.ToTCCCIsyH0OzhEl7mGngRtXBNPkmT4XslnUilPqzcA", + "__typename": "FileObject" + } + ], + "updatedAt": "2026-02-26T16:02:32.706Z", + "workspaceMember": { + "__typename": "WorkspaceMember", + "id": "20202020-0687-4c41-b707-ed1bfca972a7", + "name": { + "firstName": "Paul", + "lastName": "Rastoin", + "__typename": "FullName" + } + }, + "workspaceMemberId": "20202020-0687-4c41-b707-ed1bfca972a7" + }, + "cursor": "eyJwb3NpdGlvbiI6LTE0LCJpZCI6ImI0MGUyZWZiLWFiNDEtNGJiMC05YTYzLTY0MDhkNzg1ZGViNiJ9", + "__typename": "CallRecordingEdge" +}, diff --git a/packages/twenty-companion/twenty.icns b/packages/twenty-companion/twenty.icns new file mode 100644 index 00000000000..2ed76d2263f Binary files /dev/null and b/packages/twenty-companion/twenty.icns differ diff --git a/packages/twenty-companion/webpack.main.config.js b/packages/twenty-companion/webpack.main.config.js new file mode 100644 index 00000000000..1c5f8e29a56 --- /dev/null +++ b/packages/twenty-companion/webpack.main.config.js @@ -0,0 +1,14 @@ +module.exports = { + /** + * This is the main entry point for your application, it's the first file + * that runs in the main process. + */ + entry: './src/main.js', + // Put your normal webpack config below here + module: { + rules: require('./webpack.rules'), + }, + externals: { + '@recallai/desktop-sdk': 'commonjs @recallai/desktop-sdk' + } +}; diff --git a/packages/twenty-companion/webpack.renderer.config.js b/packages/twenty-companion/webpack.renderer.config.js new file mode 100644 index 00000000000..7d8f0fec656 --- /dev/null +++ b/packages/twenty-companion/webpack.renderer.config.js @@ -0,0 +1,17 @@ +const rules = require('./webpack.rules'); + +rules.push({ + test: /\.css$/, + use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], +}); + +module.exports = { + // Put your normal webpack config below here + module: { + rules, + }, + entry: { + renderer: './src/renderer.js', + 'note-editor/renderer': './src/pages/note-editor/renderer.js', + }, +}; diff --git a/packages/twenty-companion/webpack.rules.js b/packages/twenty-companion/webpack.rules.js new file mode 100644 index 00000000000..706d2a81032 --- /dev/null +++ b/packages/twenty-companion/webpack.rules.js @@ -0,0 +1,17 @@ +module.exports = [ + // Add support for native node modules + { + // We're specifying native_modules in the test because the asset relocator loader generates a + // "fake" .node file which is really a cjs file. + test: /native_modules[/\\].+\.node$/, + use: 'node-loader', + }, + { + test: /\.(png|jpe?g|gif)$/i, + type: 'asset/inline', + }, + { + test: /\.svg$/i, + type: 'asset/resource', + }, +]; diff --git a/packages/twenty-docs/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/developers/contribute/capabilities/frontend-development/style-guide.mdx index 9fcd36f3e5d..a67980ce769 100644 --- a/packages/twenty-docs/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### Use StyledComponents -Style the components with [styled-components](https://emotion.sh/docs/styled). +Style the components with [Linaria styled](https://github.com/callstack/linaria). ```tsx // ❌ Bad diff --git a/packages/twenty-docs/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/developers/self-host/capabilities/troubleshooting.mdx index fff725daa76..62d67b7b6dc 100644 --- a/packages/twenty-docs/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/developers/self-host/capabilities/troubleshooting.mdx @@ -136,7 +136,7 @@ That's expected as user is unauthorized when logged out since its identity is no Comment out checker plugin in `packages/twenty-ui/vite-config.ts` like in example below ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/style-guide.mdx index 4e467a549d9..083e2aef088 100644 --- a/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### استخدام مكونات منسقة -قم بتنسيق المكونات باستخدام [styled-components](https://emotion.sh/docs/styled). +قم بتنسيق المكونات باستخدام [Linaria styled](https://github.com/callstack/linaria). ```tsx // ❌ سيء diff --git a/packages/twenty-docs/l/ar/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/l/ar/developers/self-host/capabilities/troubleshooting.mdx index 8aa2ba3ef76..3bf00d4c357 100644 --- a/packages/twenty-docs/l/ar/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/l/ar/developers/self-host/capabilities/troubleshooting.mdx @@ -145,7 +145,7 @@ npx nx worker twenty-server ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-docs/l/cs/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/l/cs/developers/contribute/capabilities/frontend-development/style-guide.mdx index 7f827be1d9e..7c4a61e9641 100644 --- a/packages/twenty-docs/l/cs/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/l/cs/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### Používejte StyledComponents -Styling komponenty s [styled-components](https://emotion.sh/docs/styled). +Stylujte komponenty pomocí [Linaria styled](https://github.com/callstack/linaria). ```tsx // ❌ Špatné diff --git a/packages/twenty-docs/l/cs/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/l/cs/developers/self-host/capabilities/troubleshooting.mdx index 0f0f50f5437..90da88d552c 100644 --- a/packages/twenty-docs/l/cs/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/l/cs/developers/self-host/capabilities/troubleshooting.mdx @@ -146,7 +146,7 @@ Zakomentujte plugin checker v `packages/twenty-ui/vite-config.ts` jako v příkl ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/style-guide.mdx index 850e42d7c2b..0e8b16643dd 100644 --- a/packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### Verwenden Sie StyledComponents -Stylen Sie die Komponenten mit [styled-components](https://emotion.sh/docs/styled). +Stylen Sie die Komponenten mit [Linaria styled](https://github.com/callstack/linaria). ```tsx // ❌ Schlecht diff --git a/packages/twenty-docs/l/de/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/l/de/developers/self-host/capabilities/troubleshooting.mdx index d93d9cad516..8d011c7b5be 100644 --- a/packages/twenty-docs/l/de/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/l/de/developers/self-host/capabilities/troubleshooting.mdx @@ -145,7 +145,7 @@ Kommentieren Sie das Checker-Plugin in `packages/twenty-ui/vite-config.ts` wie i ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/style-guide.mdx index ea4c1651d08..07ed20717ff 100644 --- a/packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### Usar StyledComponents -Estiliza los componentes con [styled-components](https://emotion.sh/docs/styled). +Estiliza los componentes con [Linaria styled](https://github.com/callstack/linaria). ```tsx // ❌ Bad diff --git a/packages/twenty-docs/l/es/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/l/es/developers/self-host/capabilities/troubleshooting.mdx index 887408ed525..6aa989676f7 100644 --- a/packages/twenty-docs/l/es/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/l/es/developers/self-host/capabilities/troubleshooting.mdx @@ -145,7 +145,7 @@ Comente el plugin checker en `packages/twenty-ui/vite-config.ts` como en el ejem ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/style-guide.mdx index 54b3473c05f..6c502fb1cf0 100644 --- a/packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### Utilisez StyledComponents -Styliser les composants avec [styled-components](https://emotion.sh/docs/styled). +Styliser les composants avec [Linaria styled](https://github.com/callstack/linaria). ```tsx // ❌ Bad diff --git a/packages/twenty-docs/l/fr/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/l/fr/developers/self-host/capabilities/troubleshooting.mdx index b1f25938eb2..5cf1d384e3e 100644 --- a/packages/twenty-docs/l/fr/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/l/fr/developers/self-host/capabilities/troubleshooting.mdx @@ -145,7 +145,7 @@ Commentez le plugin de vérification dans `packages/twenty-ui/vite-config.ts` co ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-docs/l/it/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/l/it/developers/contribute/capabilities/frontend-development/style-guide.mdx index 73383d5986f..80bba5d6216 100644 --- a/packages/twenty-docs/l/it/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/l/it/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### Usa StyledComponents -Stile i componenti con [styled-components](https://emotion.sh/docs/styled). +Stilizza i componenti con [Linaria styled](https://github.com/callstack/linaria). ```tsx // ❌ Male diff --git a/packages/twenty-docs/l/it/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/l/it/developers/self-host/capabilities/troubleshooting.mdx index 55fb1825d10..15e13ab08d4 100644 --- a/packages/twenty-docs/l/it/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/l/it/developers/self-host/capabilities/troubleshooting.mdx @@ -146,7 +146,7 @@ Commenta il plugin checker in `packages/twenty-ui/vite-config.ts` come mostrato ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-docs/l/ja/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/l/ja/developers/contribute/capabilities/frontend-development/style-guide.mdx index 39daabcda23..bf8e412718b 100644 --- a/packages/twenty-docs/l/ja/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/l/ja/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### StyledComponentsを使用する -コンポーネントを[styled-components](https://emotion.sh/docs/styled)でスタイル設定する。 +コンポーネントを[Linaria styled](https://github.com/callstack/linaria)でスタイル設定する。 ```tsx // ❌ Bad diff --git a/packages/twenty-docs/l/ja/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/l/ja/developers/self-host/capabilities/troubleshooting.mdx index 0e2a94959fd..0cd20cdad85 100644 --- a/packages/twenty-docs/l/ja/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/l/ja/developers/self-host/capabilities/troubleshooting.mdx @@ -152,7 +152,7 @@ npx nx worker twenty-server ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-docs/l/ko/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/l/ko/developers/contribute/capabilities/frontend-development/style-guide.mdx index 49b2328ec1c..81acf92246e 100644 --- a/packages/twenty-docs/l/ko/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/l/ko/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### StyledComponents 사용 -[styled-components](https://emotion.sh/docs/styled)로 구성 요소를 스타일링하십시오. +[Linaria styled](https://github.com/callstack/linaria)로 구성 요소를 스타일링하십시오. ```tsx // ❌ Bad diff --git a/packages/twenty-docs/l/ko/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/l/ko/developers/self-host/capabilities/troubleshooting.mdx index 591bab724b6..91608b308ce 100644 --- a/packages/twenty-docs/l/ko/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/l/ko/developers/self-host/capabilities/troubleshooting.mdx @@ -145,7 +145,7 @@ npx nx worker twenty-server ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-docs/l/pt/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/l/pt/developers/contribute/capabilities/frontend-development/style-guide.mdx index 48d4c509eba..7db8c34a7fd 100644 --- a/packages/twenty-docs/l/pt/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/l/pt/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### Use StyledComponents -Estilize os componentes com [styled-components](https://emotion.sh/docs/styled). +Estilize os componentes com [Linaria styled](https://github.com/callstack/linaria). ```tsx // ❌ Bad diff --git a/packages/twenty-docs/l/pt/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/l/pt/developers/self-host/capabilities/troubleshooting.mdx index 7ad56863ade..4f76404a502 100644 --- a/packages/twenty-docs/l/pt/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/l/pt/developers/self-host/capabilities/troubleshooting.mdx @@ -145,7 +145,7 @@ Comente o plugin checker em `packages/twenty-ui/vite-config.ts` como no exemplo ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-docs/l/ro/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/l/ro/developers/contribute/capabilities/frontend-development/style-guide.mdx index 6949fb055ed..1cbf9ba7237 100644 --- a/packages/twenty-docs/l/ro/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/l/ro/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### Folosește ComponentaStilizată -Stilizează componentele cu [styled-components](https://emotion.sh/docs/styled). +Stilizează componentele cu [Linaria styled](https://github.com/callstack/linaria). ```tsx // ❌ Rău diff --git a/packages/twenty-docs/l/ro/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/l/ro/developers/self-host/capabilities/troubleshooting.mdx index dda1e4a0768..2c1a800ad7f 100644 --- a/packages/twenty-docs/l/ro/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/l/ro/developers/self-host/capabilities/troubleshooting.mdx @@ -146,7 +146,7 @@ Comentați pluginul checker în `packages/twenty-ui/vite-config.ts`, ca în exem ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-docs/l/ru/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/l/ru/developers/contribute/capabilities/frontend-development/style-guide.mdx index 60e37a40e61..f91d5dd9f16 100644 --- a/packages/twenty-docs/l/ru/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/l/ru/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### Использование StyledComponents -Стилизуйте компоненты с помощью [styled-components](https://emotion.sh/docs/styled). +Стилизуйте компоненты с помощью [Linaria styled](https://github.com/callstack/linaria). ```tsx // ❌ Плохо diff --git a/packages/twenty-docs/l/ru/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/l/ru/developers/self-host/capabilities/troubleshooting.mdx index 81e2dedac51..41f3c1dc890 100644 --- a/packages/twenty-docs/l/ru/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/l/ru/developers/self-host/capabilities/troubleshooting.mdx @@ -146,7 +146,7 @@ npx nx worker twenty-server ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/style-guide.mdx index 142478bdf9d..69f5a182424 100644 --- a/packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -193,7 +193,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### StyledComponents kullanın -Bileşenleri [styled-components](https://emotion.sh/docs/styled) ile stillendirin. +Bileşenleri [Linaria styled](https://github.com/callstack/linaria) ile stillendirin. ```tsx // ❌ Kötü diff --git a/packages/twenty-docs/l/tr/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/l/tr/developers/self-host/capabilities/troubleshooting.mdx index c3e70d05759..7c30a2883a3 100644 --- a/packages/twenty-docs/l/tr/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/l/tr/developers/self-host/capabilities/troubleshooting.mdx @@ -145,7 +145,7 @@ Aşağıdaki örnekte olduğu gibi `packages/twenty-ui/vite-config.ts` içindeki ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-docs/l/zh/developers/contribute/capabilities/frontend-development/style-guide.mdx b/packages/twenty-docs/l/zh/developers/contribute/capabilities/frontend-development/style-guide.mdx index 14e4a3ac5ef..d7a9db2d2e2 100644 --- a/packages/twenty-docs/l/zh/developers/contribute/capabilities/frontend-development/style-guide.mdx +++ b/packages/twenty-docs/l/zh/developers/contribute/capabilities/frontend-development/style-guide.mdx @@ -194,7 +194,7 @@ setHotkeyScopeAndMemorizePreviousScope( ### 使用StyledComponents -使用[styled-components](https://emotion.sh/docs/styled)对组件进行样式化。 +使用[Linaria styled](https://github.com/callstack/linaria)对组件进行样式化。 ```tsx // ❌ Bad diff --git a/packages/twenty-docs/l/zh/developers/self-host/capabilities/troubleshooting.mdx b/packages/twenty-docs/l/zh/developers/self-host/capabilities/troubleshooting.mdx index cc1ec60a5f4..ab13f4fc9fb 100644 --- a/packages/twenty-docs/l/zh/developers/self-host/capabilities/troubleshooting.mdx +++ b/packages/twenty-docs/l/zh/developers/self-host/capabilities/troubleshooting.mdx @@ -145,7 +145,7 @@ npx nx worker twenty-server ``` plugins: [ - react({ jsxImportSource: '@emotion/react' }), + react({ jsxImportSource: 'react' }), tsconfigPaths(), svgr(), dts(dtsConfig), diff --git a/packages/twenty-front/.storybook/preview.tsx b/packages/twenty-front/.storybook/preview.tsx index 6175fbda54d..e882e1981e8 100644 --- a/packages/twenty-front/.storybook/preview.tsx +++ b/packages/twenty-front/.storybook/preview.tsx @@ -1,4 +1,3 @@ -import { ThemeProvider } from '@emotion/react'; import { i18n } from '@lingui/core'; import { I18nProvider } from '@lingui/react'; import { type Preview } from '@storybook/react-vite'; @@ -71,15 +70,13 @@ const preview: Preview = { return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ const contactInfoHeader = await canvas.findByText('Contact Info');
+ expect(contactInfoHeader).toBeVisible();
+
+ const businessHeader = await canvas.findByText('Business');
+ expect(businessHeader).toBeVisible();
+
+ const companyName = await canvas.findByText('Acme Corporation');
+ expect(companyName).toBeVisible();
+ },
+};
+
+export const WithInlineViewFields: Story = {
+ render: () => {
+ const coreView = createCoreView({
+ viewFields: [
+ {
+ id: 'vf-name',
+ fieldMetadataId: nameField.id,
+ position: 0,
+ isVisible: true,
+ size: 200,
+ aggregateOperation: null,
+ viewId: FIELDS_VIEW_ID,
+ },
+ {
+ id: 'vf-employees',
+ fieldMetadataId: employeesField.id,
+ position: 1,
+ isVisible: true,
+ size: 200,
+ aggregateOperation: null,
+ viewId: FIELDS_VIEW_ID,
+ },
+ {
+ id: 'vf-address',
+ fieldMetadataId: addressField.id,
+ position: 2,
+ isVisible: true,
+ size: 200,
+ aggregateOperation: null,
+ viewId: FIELDS_VIEW_ID,
+ },
+ ],
+ });
+
+ const widget = createFieldsWidget(FIELDS_VIEW_ID);
+
+ const pageLayoutData = createPageLayoutWithWidget(
+ widget,
+ companyObjectMetadataItem.id,
+ );
+
+ jotaiStore.set(
+ objectMetadataItemsState.atom,
+ generatedMockObjectMetadataItems,
+ );
+ jotaiStore.set(isAppMetadataReadyState.atom, true);
+ jotaiStore.set(coreViewsState.atom, [coreView]);
+ jotaiStore.set(
+ pageLayoutPersistedComponentState.atomFamily({
+ instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
+ }),
+ pageLayoutData,
+ );
+ jotaiStore.set(
+ pageLayoutDraftComponentState.atomFamily({
+ instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
+ }),
+ pageLayoutData,
+ );
+ setRecordInStore(TEST_RECORD_ID, mockCompanyRecord);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ const companyName = await canvas.findByText('Acme Corporation');
+ expect(companyName).toBeVisible();
+
+ const contactInfoHeader = canvas.queryByText('Contact Info');
+ expect(contactInfoHeader).toBeNull();
+
+ const generalHeader = canvas.queryByText('General');
+ expect(generalHeader).toBeNull();
+ },
+};
+
+export const Empty: Story = {
+ render: () => {
+ const coreView = createCoreView({
+ viewFieldGroups: [
+ {
+ id: 'group-empty',
+ name: 'Empty Group',
+ position: 0,
+ isVisible: false,
+ viewId: FIELDS_VIEW_ID,
+ viewFields: [],
+ },
+ ],
+ });
+
+ const widget = createFieldsWidget(FIELDS_VIEW_ID);
+
+ const pageLayoutData = createPageLayoutWithWidget(
+ widget,
+ companyObjectMetadataItem.id,
+ );
+
+ jotaiStore.set(
+ objectMetadataItemsState.atom,
+ generatedMockObjectMetadataItems,
+ );
+ jotaiStore.set(isAppMetadataReadyState.atom, true);
+ jotaiStore.set(coreViewsState.atom, [coreView]);
+ jotaiStore.set(
+ pageLayoutPersistedComponentState.atomFamily({
+ instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
+ }),
+ pageLayoutData,
+ );
+ jotaiStore.set(
+ pageLayoutDraftComponentState.atomFamily({
+ instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
+ }),
+ pageLayoutData,
+ );
+ setRecordInStore(TEST_RECORD_ID, mockCompanyRecord);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ await waitFor(() => {
+ expect(canvas.getByText('No fields to display')).toBeVisible();
+ });
+
+ await waitFor(() => {
+ expect(
+ canvas.getByText('Configure this widget to display fields'),
+ ).toBeVisible();
+ });
+ },
+};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useCreateFieldsWidgetEditorGroup.ts b/packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useCreateFieldsWidgetEditorGroup.ts
index f8c06551876..baa65edb19d 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useCreateFieldsWidgetEditorGroup.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useCreateFieldsWidgetEditorGroup.ts
@@ -1,4 +1,6 @@
+import { fieldsWidgetEditorModeDraftComponentState } from '@/page-layout/states/fieldsWidgetEditorModeDraftComponentState';
import { fieldsWidgetGroupsDraftComponentState } from '@/page-layout/states/fieldsWidgetGroupsDraftComponentState';
+import { fieldsWidgetUngroupedFieldsDraftComponentState } from '@/page-layout/states/fieldsWidgetUngroupedFieldsDraftComponentState';
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
import { useStore } from 'jotai';
import { useCallback } from 'react';
@@ -18,33 +20,107 @@ export const useCreateFieldsWidgetEditorGroup = ({
pageLayoutId,
);
+ const fieldsWidgetUngroupedFieldsDraftState =
+ useAtomComponentStateCallbackState(
+ fieldsWidgetUngroupedFieldsDraftComponentState,
+ pageLayoutId,
+ );
+
+ const fieldsWidgetEditorModeDraftState = useAtomComponentStateCallbackState(
+ fieldsWidgetEditorModeDraftComponentState,
+ pageLayoutId,
+ );
+
const store = useStore();
const createGroup = useCallback(
- (name: string) => {
- const allDraftGroups = store.get(fieldsWidgetGroupsDraftState);
+ ({ name, afterGroupId }: { name: string; afterGroupId?: string }) => {
+ const allEditorModes = store.get(fieldsWidgetEditorModeDraftState);
+
+ const currentEditorMode = allEditorModes[widgetId] ?? 'ungrouped';
- const currentGroups = allDraftGroups[widgetId] ?? [];
- const maxPosition = Math.max(...currentGroups.map((g) => g.position), -1);
const newId = v4();
- store.set(fieldsWidgetGroupsDraftState, (prev) => ({
- ...prev,
- [widgetId]: [
- ...(prev[widgetId] ?? []),
- {
- id: newId,
- name,
- position: maxPosition + 1,
- isVisible: true,
- fields: [],
- },
- ],
- }));
+ if (currentEditorMode === 'ungrouped') {
+ const allUngroupedFields = store.get(
+ fieldsWidgetUngroupedFieldsDraftState,
+ );
+
+ const ungroupedFields = allUngroupedFields[widgetId] ?? [];
+
+ store.set(fieldsWidgetGroupsDraftState, (prev) => ({
+ ...prev,
+ [widgetId]: [
+ {
+ id: newId,
+ name,
+ position: 0,
+ isVisible: true,
+ fields: ungroupedFields.map((field, index) => ({
+ ...field,
+ position: index,
+ globalIndex: index,
+ })),
+ },
+ ],
+ }));
+
+ store.set(fieldsWidgetUngroupedFieldsDraftState, (prev) => ({
+ ...prev,
+ [widgetId]: [],
+ }));
+
+ store.set(fieldsWidgetEditorModeDraftState, (prev) => ({
+ ...prev,
+ [widgetId]: 'grouped' as const,
+ }));
+ } else {
+ const allDraftGroups = store.get(fieldsWidgetGroupsDraftState);
+
+ const currentGroups = allDraftGroups[widgetId] ?? [];
+
+ const afterGroup = afterGroupId
+ ? currentGroups.find((g) => g.id === afterGroupId)
+ : undefined;
+
+ const newPosition =
+ afterGroup !== undefined
+ ? afterGroup.position + 1
+ : Math.max(...currentGroups.map((g) => g.position), -1) + 1;
+
+ const shiftedGroups =
+ afterGroup !== undefined
+ ? currentGroups.map((g) =>
+ g.position >= newPosition
+ ? { ...g, position: g.position + 1 }
+ : g,
+ )
+ : currentGroups;
+
+ store.set(fieldsWidgetGroupsDraftState, (prev) => ({
+ ...prev,
+ [widgetId]: [
+ ...shiftedGroups,
+ {
+ id: newId,
+ name,
+ position: newPosition,
+ isVisible: true,
+ fields: [],
+ },
+ ],
+ }));
+ }
return newId;
},
- [fieldsWidgetGroupsDraftState, widgetId, store],
+ [
+ fieldsWidgetGroupsDraftState,
+ fieldsWidgetUngroupedFieldsDraftState,
+ fieldsWidgetEditorModeDraftState,
+ widgetId,
+ store,
+ ],
);
return { createGroup };
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useDeleteFieldsWidgetEditorGroup.ts b/packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useDeleteFieldsWidgetEditorGroup.ts
index 56b3a4cb534..7e6dd14fd35 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useDeleteFieldsWidgetEditorGroup.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useDeleteFieldsWidgetEditorGroup.ts
@@ -1,4 +1,6 @@
+import { fieldsWidgetEditorModeDraftComponentState } from '@/page-layout/states/fieldsWidgetEditorModeDraftComponentState';
import { fieldsWidgetGroupsDraftComponentState } from '@/page-layout/states/fieldsWidgetGroupsDraftComponentState';
+import { fieldsWidgetUngroupedFieldsDraftComponentState } from '@/page-layout/states/fieldsWidgetUngroupedFieldsDraftComponentState';
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
import { useStore } from 'jotai';
import { useCallback } from 'react';
@@ -17,18 +19,107 @@ export const useDeleteFieldsWidgetEditorGroup = ({
pageLayoutId,
);
+ const fieldsWidgetUngroupedFieldsDraftState =
+ useAtomComponentStateCallbackState(
+ fieldsWidgetUngroupedFieldsDraftComponentState,
+ pageLayoutId,
+ );
+
+ const fieldsWidgetEditorModeDraftState = useAtomComponentStateCallbackState(
+ fieldsWidgetEditorModeDraftComponentState,
+ pageLayoutId,
+ );
+
const store = useStore();
const deleteGroup = useCallback(
(groupId: string) => {
+ const allDraftGroups = store.get(fieldsWidgetGroupsDraftState);
+
+ const currentGroups = allDraftGroups[widgetId] ?? [];
+
+ const deletedGroup = currentGroups.find((group) => group.id === groupId);
+
+ if (!deletedGroup) {
+ return;
+ }
+
+ const deletedGroupFields = deletedGroup.fields;
+ const remainingGroups = currentGroups.filter(
+ (group) => group.id !== groupId,
+ );
+
+ if (remainingGroups.length === 0) {
+ store.set(fieldsWidgetGroupsDraftState, (prev) => ({
+ ...prev,
+ [widgetId]: [],
+ }));
+
+ store.set(fieldsWidgetUngroupedFieldsDraftState, (prev) => ({
+ ...prev,
+ [widgetId]: deletedGroupFields.map((field, index) => ({
+ ...field,
+ position: index,
+ globalIndex: index,
+ })),
+ }));
+
+ store.set(fieldsWidgetEditorModeDraftState, (prev) => ({
+ ...prev,
+ [widgetId]: 'ungrouped' as const,
+ }));
+
+ return;
+ }
+
+ const sortedRemaining = [...remainingGroups].sort(
+ (a, b) => a.position - b.position,
+ );
+
+ const deletedGroupPosition = deletedGroup.position;
+
+ const nextGroup = sortedRemaining.find(
+ (group) => group.position > deletedGroupPosition,
+ );
+
+ const targetGroup =
+ nextGroup ?? sortedRemaining[sortedRemaining.length - 1];
+
store.set(fieldsWidgetGroupsDraftState, (prev) => ({
...prev,
- [widgetId]: (prev[widgetId] ?? []).filter(
- (group) => group.id !== groupId,
- ),
+ [widgetId]: remainingGroups.map((group) => {
+ if (group.id !== targetGroup.id) {
+ return group;
+ }
+
+ const existingFields = [...group.fields].sort(
+ (a, b) => a.position - b.position,
+ );
+
+ const maxPosition =
+ existingFields.length > 0
+ ? Math.max(...existingFields.map((f) => f.position))
+ : -1;
+
+ const appendedFields = deletedGroupFields.map((field, index) => ({
+ ...field,
+ position: maxPosition + 1 + index,
+ }));
+
+ return {
+ ...group,
+ fields: [...existingFields, ...appendedFields],
+ };
+ }),
}));
},
- [fieldsWidgetGroupsDraftState, widgetId, store],
+ [
+ fieldsWidgetGroupsDraftState,
+ fieldsWidgetUngroupedFieldsDraftState,
+ fieldsWidgetEditorModeDraftState,
+ widgetId,
+ store,
+ ],
);
return { deleteGroup };
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useFieldsWidgetEditorGroupsData.ts b/packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useFieldsWidgetEditorGroupsData.ts
index e5933721405..479a26938eb 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useFieldsWidgetEditorGroupsData.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useFieldsWidgetEditorGroupsData.ts
@@ -1,31 +1,45 @@
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { type FieldsWidgetGroup } from '@/page-layout/widgets/fields/types/FieldsWidgetGroup';
+import { type FieldsWidgetEditorMode } from '@/page-layout/widgets/fields/types/FieldsWidgetEditorMode';
+import {
+ type FieldsWidgetGroup,
+ type FieldsWidgetGroupField,
+} from '@/page-layout/widgets/fields/types/FieldsWidgetGroup';
import { useGetViewById } from '@/views/hooks/useGetViewById';
-import { useLingui } from '@lingui/react/macro';
import { useMemo } from 'react';
-import { isDefined } from 'twenty-shared/utils';
+import { isDefined, isNonEmptyArray } from 'twenty-shared/utils';
type UseFieldsWidgetEditorGroupsDataParams = {
viewId: string | null;
objectNameSingular: string;
};
+type UseFieldsWidgetEditorGroupsDataResult = {
+ groups: FieldsWidgetGroup[];
+ ungroupedFields: FieldsWidgetGroupField[];
+ editorMode: FieldsWidgetEditorMode;
+ isFromView: boolean;
+};
+
export const useFieldsWidgetEditorGroupsData = ({
viewId,
objectNameSingular,
-}: UseFieldsWidgetEditorGroupsDataParams) => {
- const { t } = useLingui();
+}: UseFieldsWidgetEditorGroupsDataParams): UseFieldsWidgetEditorGroupsDataResult => {
const { view } = useGetViewById(viewId);
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});
- const groups = useMemo