Merge pull request #239 from reorproject/jc/add-posthog-analytics

add posthog to system

electron/main/Store/storeConfig.ts

@@ -61,10 +61,12 @@ export interface StoreSchema {
   chatHistories: {
     [vaultDir: string]: ChatHistory[];
   };
+  analytics?: boolean;
 }
 
 export enum StoreKeys {
   hasUserOpenedAppBefore = "hasUserOpenedAppBefore",
+  Analytics = "analytics",
   SchemaVersion = "schemaVersion",
   DirectoryFromPreviousSession = "user.directoryFromPreviousSession",
   LLMs = "LLMs",

electron/main/Store/storeHandlers.ts

@@ -129,6 +129,16 @@ export const registerStoreHandlers = (
     return store.get(StoreKeys.LLMGenerationParameters);
   });
 
+  ipcMain.handle("set-analytics-mode", (event, isAnalytics) => {
+    console.log("setting analytics mode", isAnalytics);
+    store.set(StoreKeys.Analytics, isAnalytics);
+  });
+
+  ipcMain.handle("get-analytics-mode", () => {
+    console.log("getting analytics params", store.get(StoreKeys.Analytics));
+    return store.get(StoreKeys.Analytics);
+  });
+
   ipcMain.handle("has-user-opened-app-before", () => {
     return store.get(StoreKeys.hasUserOpenedAppBefore);
   });

electron/main/Store/storeMigrator.ts

@@ -17,11 +17,19 @@ export function setupDefaultStoreValues(store: Store<StoreSchema>) {
   if (!store.get(StoreKeys.MaxRAGExamples)) {
     store.set(StoreKeys.MaxRAGExamples, 15);
   }
+  setupDefaultAnalyticsValue(store);
+
   setupDefaultEmbeddingModels(store);
 
   setupDefaultHardwareConfig(store);
 }
 
+const setupDefaultAnalyticsValue = (store: Store<StoreSchema>) => {
+  if (store.get(StoreKeys.Analytics) === undefined) {
+    store.set(StoreKeys.Analytics, true);
+  }
+};
+
 const setupDefaultHardwareConfig = (store: Store<StoreSchema>) => {
   const hardwareConfig = store.get(StoreKeys.Hardware);
 

electron/preload/index.ts

@@ -143,6 +143,8 @@ declare global {
       setHardwareConfig: (config: HardwareConfig) => void;
       getLLMGenerationParams: () => Promise<LLMGenerationParameters>;
       setLLMGenerationParams: (params: LLMGenerationParameters) => void;
+      getAnalyticsMode: () => Promise<boolean>;
+      setAnalyticsMode: (isAnalytics: boolean) => void;
       getHasUserOpenedAppBefore: () => boolean;
       setHasUserOpenedAppBefore: () => void;
       getAllChatHistories: () => Promise<ChatHistory[]>;
@@ -269,6 +271,12 @@ contextBridge.exposeInMainWorld("electronStore", {
   setLLMGenerationParams: (params: LLMGenerationParameters) => {
     ipcRenderer.invoke("set-llm-generation-params", params);
   },
+  getAnalyticsMode: () => {
+    return ipcRenderer.invoke("get-analytics-mode");
+  },
+  setAnalyticsMode: (isAnalytics: boolean) => {
+    ipcRenderer.invoke("set-analytics-mode", isAnalytics);
+  },
   getHasUserOpenedAppBefore: () => {
     return ipcRenderer.invoke("has-user-opened-app-before");
   },

index.html

@@ -5,8 +5,11 @@
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- Updated Content-Security-Policy -->
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;">
-
+    <meta http-equiv="Content-Security-Policy" 
+      content="default-src 'self'; script-src 'self' 'unsafe-eval'; 
+              style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; 
+              font-src 'self' https://fonts.gstatic.com;
+              connect-src 'self' https://us.i.posthog.com;" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
     <title>Reor Project</title>

package.json

@@ -58,6 +58,7 @@
     "npm": "^10.3.0",
     "ollama": "^0.4.9",
     "openai": "^4.20.0",
+    "posthog-js": "^1.130.2",
     "react-card-flip": "^1.2.2",
     "react-icons": "^4.12.0",
     "react-markdown": "^9.0.1",

src/App.tsx

@@ -5,6 +5,7 @@ import "react-toastify/dist/ReactToastify.css";
 import FileEditorContainer from "./components/FileEditorContainer";
 import IndexingProgress from "./components/IndexingProgress";
 import InitialSetupSinglePage from "./components/Settings/InitialSettingsSinglePage";
+import posthog from "posthog-js";
 
 interface AppProps {}
 
@@ -23,6 +24,17 @@ const App: React.FC<AppProps> = () => {
     window.ipcRenderer.receive("indexing-progress", handleProgressUpdate);
   }, []);
 
+  useEffect(() => {
+    const initialisePosthog = async () => {
+      if (await window.electronStore.getAnalyticsMode()) {
+        posthog.init("phc_xi4hFToX1cZU657yzge1VW0XImaaRzuvnFUdbAKI8fu", {
+          api_host: "https://us.i.posthog.com",
+        });
+      }
+    };
+    initialisePosthog();
+  }, []);
+
   useEffect(() => {
     const handleIndexingError = (error: string) => {
       console.log("Indexing error:", error);

src/components/Chat/Chat.tsx

@@ -27,6 +27,7 @@ import { useDebounce } from "use-debounce";
 import { SimilarEntriesComponent } from "../Similarity/SimilarFilesSidebar";
 import ResizableComponent from "../Generic/ResizableComponent";
 import AddContextFiltersModal from "./AddContextFiltersModal";
+import posthog from "posthog-js";
 
 // convert ask options to enum
 enum AskOptions {
@@ -225,6 +226,10 @@ const ChatWithLLM: React.FC<ChatWithLLMProps> = ({
   const handleSubmitNewMessage = async (
     chatHistory: ChatHistory | undefined
   ) => {
+    posthog.capture("chat_message_submitted", {
+      chatId: chatHistory?.id,
+      chatLength: chatHistory?.displayableChatHistory.length,
+    });
     try {
       if (loadingResponse) return;
       if (!userTextFieldInput.trim()) return;

src/components/Editor/BacklinkSuggestionsDisplay.tsx

@@ -1,5 +1,6 @@
 import { removeFileExtension } from "@/functions/strings";
 import React, { useRef, useEffect, useState, useMemo } from "react";
+import posthog from "posthog-js";
 
 export interface SuggestionsState {
   textWithinBrackets: string;
@@ -67,11 +68,14 @@ const InEditorBacklinkSuggestionsDisplay: React.FC<SuggestionsDisplayProps> = ({
       }}
     >
       <ul className="m-0 p-0 list-none">
-        {filteredSuggestions.map((suggestion) => (
+        {filteredSuggestions.map((suggestion, index) => (
           <li
             key={suggestion} // Use a unique id property from the suggestion
             className="p-1.25 cursor-pointer hover:bg-gray-100 p-1 text-sm rounded"
             onClick={() => {
+              posthog.capture("select_backlink_suggestion", {
+                rank: index + 1,
+              });
               suggestionsState.onSelect?.(suggestion);
             }}
           >

src/components/File/hooks/use-file-by-filepath.ts

@@ -7,8 +7,9 @@ import TaskItem from "@tiptap/extension-task-item";
 import TaskList from "@tiptap/extension-task-list";
 import Text from "@tiptap/extension-text";
 import "../tiptap.scss";
-import { useDebounce } from "use-debounce";
+import { useDebounce, useDebouncedCallback } from "use-debounce";
 import { Markdown } from "tiptap-markdown";
+import posthog from "posthog-js";
 
 import { BacklinkExtension } from "@/components/Editor/BacklinkExtension";
 import {
@@ -105,6 +106,17 @@ export const useFileByFilepath = () => {
   const openRelativePathRef = useRef<(newFilePath: string) => Promise<void>>();
   openRelativePathRef.current = openRelativePath;
 
+  const debouncedBacklinkCapture = useDebouncedCallback(
+    () => posthog.capture("initialize_backlinks_2"),
+    4000
+  );
+  const handleSuggestionsStateWithEventCapture = (
+    suggState: SuggestionsState | null
+  ): void => {
+    debouncedBacklinkCapture();
+    setSuggestionsState(suggState);
+  };
+
   const editor = useEditor({
     autofocus: true,
 
@@ -141,7 +153,10 @@ export const useFileByFilepath = () => {
         linkOnPaste: true,
         openOnClick: true,
       }),
-      BacklinkExtension(openRelativePathRef, setSuggestionsState),
+      BacklinkExtension(
+        openRelativePathRef,
+        handleSuggestionsStateWithEventCapture
+      ),
     ],
   });
 

src/components/FileEditorContainer.tsx

@@ -10,6 +10,7 @@ import InEditorBacklinkSuggestionsDisplay from "./Editor/BacklinkSuggestionsDisp
 import { useFileInfoTree } from "./File/FileSideBar/hooks/use-file-info-tree";
 import SidebarComponent from "./Similarity/SimilarFilesSidebar";
 import { useChatHistory } from "./Chat/hooks/use-chat-history";
+import posthog from "posthog-js";
 
 interface FileEditorContainerProps {}
 export type SidebarAbleToShow = "files" | "search" | "chats";
@@ -67,12 +68,16 @@ const FileEditorContainer: React.FC<FileEditorContainerProps> = () => {
   });
 
   const handleAddFileToChatFilters = (file: string) => {
+    const files = [...chatFilters.files, file];
     setSidebarShowing("chats");
     setShowChatbot(true);
     setCurrentChatHistory(undefined);
     setChatFilters({
       ...chatFilters,
-      files: [...chatFilters.files, file],
+      files: files,
+    });
+    posthog.capture("add_file_to_chat", {
+      chatFilesLength: files.length,
     });
   };
 
@@ -191,7 +196,13 @@ const FileEditorContainer: React.FC<FileEditorContainerProps> = () => {
               setCurrentChatHistory={setCurrentChatHistory}
               showSimilarFiles={showSimilarFiles}
               chatFilters={chatFilters}
-              setChatFilters={setChatFilters}
+              setChatFilters={(chatFilters: ChatFilters) => {
+                posthog.capture("add_file_to_chat", {
+                  chatFilesLength: chatFilters.files.length,
+                });
+
+                setChatFilters(chatFilters);
+              }}
             />
             {/* </ResizableComponent> */}
           </div>

src/components/Flashcard/FlashcardCreateModal.tsx

@@ -10,6 +10,7 @@ import { CircularProgress } from "@mui/material";
 import { useFileInfoTree } from "../File/FileSideBar/hooks/use-file-info-tree";
 import { useFileByFilepath } from "../File/hooks/use-file-by-filepath";
 import FilesSuggestionsDisplay from "../Editor/BacklinkSuggestionsDisplay";
+import posthog from "posthog-js";
 
 interface FlashcardCreateModalProps {
   isOpen: boolean;
@@ -64,6 +65,7 @@ const FlashcardCreateModal: React.FC<FlashcardCreateModalProps> = ({
 
   // handle the creation process
   const createFlashcardsFromFile = async (): Promise<void> => {
+    posthog.capture("create_flashcard_from_file");
     // send the file as context to the backend
     const llmName = await window.llm.getDefaultLLMName();
     setIsLoadingFlashcards(true);

src/components/Flashcard/FlashcardMenuModal.tsx

@@ -4,6 +4,7 @@ import Modal from "../Generic/Modal";
 import { Button } from "@material-tailwind/react";
 import FlashcardReviewModal from "./FlashcardReviewModal";
 import FlashcardCreateModal from "./FlashcardCreateModal";
+import posthog from "posthog-js";
 
 interface FlashcardMenuModalProps {
   isOpen: boolean;
@@ -55,7 +56,10 @@ const FlashcardMenuModal: React.FC<FlashcardMenuModalProps> = ({
             cursor-pointer
             disabled:pointer-events-none
             disabled:opacity-25"
-          onClick={() => setIsCreateFlashcardMode(true)}
+          onClick={() => {
+            posthog.capture("open_create_flashcard_mode");
+            setIsCreateFlashcardMode(true);
+          }}
           // Write to the flashcards directory if the flashcards generated are valid
           // onClick={async () => await storeFlashcardPairsAsJSON(flashcardQAPairs, fileToGenerateFlashcardsFor)}
           placeholder={""}
@@ -70,7 +74,11 @@ const FlashcardMenuModal: React.FC<FlashcardMenuModalProps> = ({
             disabled:pointer-events-none
             disabled:opacity-25"
           // Write to the flashcards directory if the flashcards generated are valid
-          onClick={async () => setIsReviewFlashcardMode(true)}
+          onClick={async () => {
+            posthog.capture("open_review_flashcard_mode");
+
+            setIsReviewFlashcardMode(true);
+          }}
           placeholder={""}
         >
           {"Review my existing cards"}