Revert "(feat): remove app insights"

This reverts commit a319492.
CommandDash · Aug 10, 2024 · acc311a · acc311a
1 parent e19c108
commit acc311a
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 53 deletions.
diff --git a/web/package.json b/web/package.json
@@ -35,7 +35,9 @@
 	"type": "module",
 	"dependencies": {
 		"@lottiefiles/svelte-lottie-player": "^0.3.1",
+		"@microsoft/applicationinsights-web": "^3.3.1",
 		"@tailwindcss/typography": "^0.5.13",
+		"dotenv": "^16.4.5",
 		"highlight.js": "^11.10.0",
 		"isomorphic-dompurify": "^2.14.0",
 		"showdown": "^2.1.0",

diff --git a/web/src/lib/components/CreateAgentDialog.svelte b/web/src/lib/components/CreateAgentDialog.svelte
@@ -4,7 +4,8 @@
     import { goto } from "$app/navigation";
     import { toastStore } from "$lib/stores/ToastStores";
     import { ToastType } from "$lib/types/Toast";
-	import IconClose from "~icons/carbon/close";
+    import appInsights from "$lib/utils/appInsights"; // Import the appInsights instance
+    import IconClose from "~icons/carbon/close";
     import CarbonSearch from "~icons/carbon/search";
     import CarbonGithub from "~icons/carbon/logo-github";
 
@@ -26,6 +27,14 @@
 
     const onCreateAgent = () => {
         if (validateGithubURL(value)) {
+            // Track custom event for form submission
+            appInsights.trackEvent({
+                name: "CreateAgentSubmitted",
+                properties: {
+                    githubUrl: value,
+                },
+            });
+
             goto(`${base}/agent?github=${value}`);
         } else {
             toastStore.set({
@@ -34,6 +43,13 @@
             });
         }
     };
+
+    $: if (showModal) {
+        // Track custom event for dialog opened
+        appInsights.trackEvent({
+            name: "CreateAgentDialogOpened",
+        });
+    }
 </script>
 
 {#if showModal}
@@ -48,11 +64,11 @@
         >
             <div class="absolute right-0 top-0 mr-2 mt-2">
                 <button
-					class="flex items-center px-2.5 py-1 text-sm text-white"
-					on:click={onClose}
-				>
-					<IconClose class="mr-1.5 text-xl" />
-				</button>
+                    class="flex items-center px-2.5 py-1 text-sm text-white"
+                    on:click={onClose}
+                >
+                    <IconClose class="mr-1.5 text-xl" />
+                </button>
             </div>
             <h1 class="text-xl font-bold text-white">Create Agent with Github</h1>
             <div
@@ -79,4 +95,4 @@
             </button>
         </dialog>
     </div>
-{/if}
+{/if}
diff --git a/web/src/lib/components/chat/ChatIntroduction.svelte b/web/src/lib/components/chat/ChatIntroduction.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import IconVisualStudio from "../icons/IconVisualStudio.svelte";
     import { toastStore } from "$lib/stores/ToastStores";
+    import appInsights from "$lib/utils/appInsights"; // Import the appInsights instance
 
     import Icon from "@iconify/svelte";
     import { ToastType } from "$lib/types/Toast";
@@ -48,26 +49,56 @@
                     message: _response.message,
                     type: ToastType.ERROR,
                 });
+                appInsights.trackException({
+                    error: new Error(_response.message),
+                }); // Track exception
                 return;
             }
 
             toastStore.set({
                 message: "Notification sent successfully",
                 type: ToastType.SUCCESS,
             });
+
+            // Track custom event for notification sent
+            appInsights.trackEvent({
+                name: "NotificationSent",
+                properties: {
+                    agentId,
+                    emailValue,
+                },
+            });
         } catch (error) {
             console.log("error", error);
             toastStore.set({
                 message: "Ops! Something went wrong",
                 type: ToastType.ERROR,
             });
+            appInsights.trackException({ error: new Error(`${error}`) }); // Track exception
         }
     };
 
     const onQuestionnaire = (questionnaire: Questionnaire) => {
         questionnaireStore.set(questionnaire);
-    }
 
+        // Track custom event for questionnaire selected
+        appInsights.trackEvent({
+            name: "QuestionnaireSelected",
+            properties: {
+                agentId,
+                questionnaireId: questionnaire.id,
+                questionnaireMessage: questionnaire.message,
+            },
+        });
+    };
+    const trackLinkClick = () => {
+        appInsights.trackEvent({
+            name: "VSCodeLinkClicked",
+            properties: {
+                agentId,
+            },
+        });
+    };
 </script>
 
 <div class="my-auto grid gap-4 lg:grid-cols-2">
@@ -96,6 +127,7 @@
                 href="https://marketplace.visualstudio.com/items?itemName=WelltestedAI.fluttergpt"
                 target="_blank"
                 class="flex items-center justify-center w-full md:w-auto h-12 px-6 font-medium text-white transition-colors duration-150 ease-in-out bg-blue-800 rounded-md hover:bg-blue-700 space-x-2 shadow-lg"
+                on:click={trackLinkClick}
             >
                 <IconVisualStudio />
                 <div class="text-sm text-white">VSCode</div>
@@ -145,7 +177,8 @@
             {#each questionnaires as questionnaire}
                 <button
                     class={`relative rounded-xl border ${questionnaire.id === "generate-summary" ? "bg-[#497BEF] text-gray-300 border-[#497BEF] hover:bg-[#287CEB] hover:border-[#287CEB]" : "bg-gray-50 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 text-gray-600 hover:bg-gray-100"} p-3 max-xl:text-sm xl:p-3.5`}
-                    on:click={() => onQuestionnaire(questionnaire)}>
+                    on:click={() => onQuestionnaire(questionnaire)}
+                >
                     {questionnaire.message}
                 </button>
             {/each}

diff --git a/web/src/lib/components/chat/ChatMessage.svelte b/web/src/lib/components/chat/ChatMessage.svelte
@@ -2,7 +2,7 @@
     import showdown from "showdown";
     import hljs from "highlight.js";
     import DOMPurify from "isomorphic-dompurify";
-
+    import appInsights from "$lib/utils/appInsights"; 
     import { writable } from "svelte/store";
     import Icon from "@iconify/svelte";
     import IconVisualStudio from "../icons/IconVisualStudio.svelte";
@@ -180,6 +180,13 @@
             },
         ];
     };
+
+    const trackLinkClick = () => {
+        appInsights.trackEvent({
+            name: 'VSCodeLinkClicked',
+        
+        });
+    }
 </script>
 
 {#each messages as message, index}
@@ -266,6 +273,7 @@
                                 href="https://marketplace.visualstudio.com/items?itemName=WelltestedAI.fluttergpt"
                                 target="_blank"
                                 class="flex items-center justify-center w-full md:w-auto h-12 px-6 font-medium text-white transition-colors duration-150 ease-in-out bg-blue-800 rounded-md hover:bg-blue-700 space-x-2 shadow-lg"
+                                on:click={trackLinkClick}
                             >
                                 <IconVisualStudio />
                                 <div class="text-sm text-white">VSCode</div>

diff --git a/web/src/lib/components/chat/ChatWindow.svelte b/web/src/lib/components/chat/ChatWindow.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onMount, onDestroy } from "svelte";
+    import appInsights from "$lib/utils/appInsights";
 
     import { questionnaireStore } from "$lib/stores/QuestionnaireStores";
     import type { Message } from "$lib/types/Message";
@@ -35,34 +36,37 @@
         LottiePlayer = module.LottiePlayer;
 
         questionnaireStore.subscribe((questionnaire: Questionnaire) => {
-        
             switch (questionnaire?.id) {
                 case "generate-summary":
                     message = `Please give me a complete summary about ${agentDisplayName}`;
                     handleSubmit();
                     break;
                 case "ask-about":
-                    message = "Help me understand (x) feature in detail with helpful links to read more about it";
+                    message =
+                        "Help me understand (x) feature in detail with helpful links to read more about it";
                     break;
                 case "search-code":
-                    message = "Where can I find the code that does (y). Please help me with links to it";
+                    message =
+                        "Where can I find the code that does (y). Please help me with links to it";
                     break;
                 case "get-help":
-                    message = "Help me resolve the (z) problem I'm facing. Here is some helpful code: (code)";
+                    message =
+                        "Help me resolve the (z) problem I'm facing. Here is some helpful code: (code)";
                     break;
             }
-        })
+        });
     });
 
     onDestroy(() => {
         message = "";
-        questionnaireStore.set({id: "", message: ""});
+        questionnaireStore.set({ id: "", message: "" });
     });
 
     const onHome = () => {
         message = "";
-        goto('/');
-    }
+        goto("/");
+        appInsights.trackEvent({ name: "NavigateHome" });
+    };
 
     const handleSubmit = async () => {
         if (messageLoading || loading) {
@@ -72,7 +76,6 @@
 
         messages = [...messages, { role: "user", text: message }];
 
-
         const agentData = {
             agent_name: agentName,
             agent_version: agentVersion,
@@ -94,15 +97,25 @@
                     },
                 },
             );
-            
+
             const modelResponse = await response.json();
-            console.log('model response', modelResponse);
+            console.log("model response", modelResponse);
             messages = [
                 ...messages,
-                { role: "model", text: modelResponse.response, references: modelResponse.references },
+                {
+                    role: "model",
+                    text: modelResponse.response,
+                    references: modelResponse.references,
+                },
             ];
-            agentReferences = modelResponse?.references
-
+            agentReferences = modelResponse?.references;
+            appInsights.trackEvent({
+                name: "MessageSent",
+                properties: {
+                    agentName,
+                    agentVersion,
+                },
+            });
         } catch (error) {
             console.log("error", error);
         }
@@ -122,16 +135,20 @@
             <div class="flex h-max flex-col gap-6 pb-40 2xl:gap-7">
                 {#if messages.length > 0}
                     {#if !loading}
-                        <ChatMessage {messages} {agentLogo} {agentDisplayName} />
+                        <ChatMessage
+                            {messages}
+                            {agentLogo}
+                            {agentDisplayName}
+                        />
                         {#if messageLoading}
                             {#if LottiePlayer}
-                                <div
-                                    class="flex-col w-full h-48 px-2 py-3"
-                                >
+                                <div class="flex-col w-full h-48 px-2 py-3">
                                     <div
                                         class="inline-flex flex-row items-end px-2"
                                     >
-                                        <span id="workspace-loader-text">Preparing results</span>
+                                        <span id="workspace-loader-text"
+                                            >Preparing results</span
+                                        >
                                         <div class="typing-loader mx-2"></div>
                                     </div>
                                 </div>

diff --git a/web/src/lib/utils/appInsights.ts b/web/src/lib/utils/appInsights.ts
@@ -1,18 +1,18 @@
-// import { ApplicationInsights } from '@microsoft/applicationinsights-web';
+import { ApplicationInsights } from '@microsoft/applicationinsights-web';
 
-// const instrumentationKey = import.meta.env.VITE_INSTRUMENTATION_KEY;
+const instrumentationKey = import.meta.env.VITE_INSTRUMENTATION_KEY;
 
-// if (!instrumentationKey) {
-//   console.log('instrumentation key not found');
-// }
+if (!instrumentationKey) {
+  console.log('instrumentation key not found');
+}
 
-// const appInsights = new ApplicationInsights({
-//   config: {
-//     instrumentationKey: instrumentationKey
-//   }
-// });
+const appInsights = new ApplicationInsights({
+  config: {
+    instrumentationKey: instrumentationKey
+  }
+});
 
-// appInsights.loadAppInsights();
-// appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview
+appInsights.loadAppInsights();
+appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview
 
-// export default appInsights;
+export default appInsights;