From a319492dc12fa3ea0eed2a2c6d0fc60180c81be9 Mon Sep 17 00:00:00 2001
From: Samyak Jain <56000318+samyakkkk@users.noreply.github.com>
Date: Sat, 10 Aug 2024 17:51:42 +0530
Subject: [PATCH] (feat): remove app insights

---
 web/package.json                              |  2 -
 .../lib/components/CreateAgentDialog.svelte   | 30 +++-------
 .../components/chat/ChatIntroduction.svelte   | 37 +------------
 .../lib/components/chat/ChatMessage.svelte    | 10 +---
 web/src/lib/components/chat/ChatWindow.svelte | 55 +++++++------------
 web/src/lib/utils/appInsights.ts              | 26 ++++-----
 web/src/routes/+page.svelte                   | 25 +++------
 web/src/routes/agent/+page.svelte             | 19 +------
 8 files changed, 53 insertions(+), 151 deletions(-)

diff --git a/web/package.json b/web/package.json
index 817e30ca..fb98509c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -35,9 +35,7 @@
 	"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
index 8ce6b99a..f9ad7a5a 100644
--- a/web/src/lib/components/CreateAgentDialog.svelte
+++ b/web/src/lib/components/CreateAgentDialog.svelte
@@ -4,8 +4,7 @@
     import { goto } from "$app/navigation";
     import { toastStore } from "$lib/stores/ToastStores";
     import { ToastType } from "$lib/types/Toast";
-    import appInsights from "$lib/utils/appInsights"; // Import the appInsights instance
-    import IconClose from "~icons/carbon/close";
+	import IconClose from "~icons/carbon/close";
     import CarbonSearch from "~icons/carbon/search";
     import CarbonGithub from "~icons/carbon/logo-github";
 
@@ -27,14 +26,6 @@
 
     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({
@@ -43,13 +34,6 @@
             });
         }
     };
-
-    $: if (showModal) {
-        // Track custom event for dialog opened
-        appInsights.trackEvent({
-            name: "CreateAgentDialogOpened",
-        });
-    }
 </script>
 
 {#if showModal}
@@ -64,11 +48,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
@@ -95,4 +79,4 @@
             </button>
         </dialog>
     </div>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/web/src/lib/components/chat/ChatIntroduction.svelte b/web/src/lib/components/chat/ChatIntroduction.svelte
index b1d50854..621c484d 100644
--- a/web/src/lib/components/chat/ChatIntroduction.svelte
+++ b/web/src/lib/components/chat/ChatIntroduction.svelte
@@ -1,7 +1,6 @@
 <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";
@@ -49,9 +48,6 @@
                     message: _response.message,
                     type: ToastType.ERROR,
                 });
-                appInsights.trackException({
-                    error: new Error(_response.message),
-                }); // Track exception
                 return;
             }
 
@@ -59,46 +55,19 @@
                 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">
@@ -127,7 +96,6 @@
                 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>
@@ -177,8 +145,7 @@
             {#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
index 8d0e8638..b0aea399 100644
--- 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,13 +180,6 @@
             },
         ];
     };
-
-    const trackLinkClick = () => {
-        appInsights.trackEvent({
-            name: 'VSCodeLinkClicked',
-        
-        });
-    }
 </script>
 
 {#each messages as message, index}
@@ -273,7 +266,6 @@
                                 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
index 453f4a6b..b9f4b420 100644
--- a/web/src/lib/components/chat/ChatWindow.svelte
+++ b/web/src/lib/components/chat/ChatWindow.svelte
@@ -1,6 +1,5 @@
 <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";
@@ -36,37 +35,34 @@
         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("/");
-        appInsights.trackEvent({ name: "NavigateHome" });
-    };
+        goto('/');
+    }
 
     const handleSubmit = async () => {
         if (messageLoading || loading) {
@@ -76,6 +72,7 @@
 
         messages = [...messages, { role: "user", text: message }];
 
+
         const agentData = {
             agent_name: agentName,
             agent_version: agentVersion,
@@ -97,25 +94,15 @@
                     },
                 },
             );
-
+            
             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;
-            appInsights.trackEvent({
-                name: "MessageSent",
-                properties: {
-                    agentName,
-                    agentVersion,
-                },
-            });
+            agentReferences = modelResponse?.references
+
         } catch (error) {
             console.log("error", error);
         }
@@ -135,20 +122,16 @@
             <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
index eca05256..a521877f 100644
--- 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;
\ No newline at end of file
+// export default appInsights;
\ No newline at end of file
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index c863c2bf..e9f3edb1 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { page } from "$app/stores";
-    import appInsights from "$lib/utils/appInsights";
+
     import CarbonSearch from "~icons/carbon/search";
     import CarbonAdd from "~icons/carbon/add";
     import CarbonGithub from "~icons/carbon/logo-github";
@@ -35,22 +35,14 @@
         const _response = await response.json();
         if (!response.ok) {
             loading = false;
-            appInsights.trackException({
-                error: new Error("Failed to fetch agents"),
-            }); // Track
         }
         agents = _response;
         filteredAgents = _response;
         loading = false;
-        appInsights.trackEvent({ name: "AgentsLoaded" }); // Track custom event   });
     });
 
     const navigateAgents = (agent: Agent) => {
         goto(`/agent/${agent.name}`);
-        appInsights.trackEvent({
-            name: "NavigateAgent",
-            properties: { agentName: agent.name },
-        }); // Track custom event
     };
 
     const search = debounce(async (value: string) => {
@@ -64,7 +56,6 @@
                 agent.author.source_url?.toLowerCase().includes(searchValue)
             );
         });
-        appInsights.trackEvent({ name: "Search", properties: { searchValue } }); // Track cus
     }, SEARCH_DEBOUNCE_DELAY);
 
     const formatGithubUrl = (url: string) => {
@@ -108,13 +99,13 @@
                 </h3>
             </div>
             <button
-                class="flex ml-auto h-9 items-center gap-1 whitespace-nowrap rounded-lg border border-gray-300 bg-gradient-to-r from-gray-700 via-gray-900 to-black text-white py-1 px-3 shadow-lg hover:bg-gradient-to-r hover:from-gray-600 hover:via-gray-800 hover:to-black hover:shadow-md dark:border-gray-700 dark:bg-gradient-to-r dark:from-gray-800 dark:via-gray-900 dark:to-black dark:hover:from-gray-700 dark:hover:via-gray-800 dark:hover:to-black transition duration-200 ease-in-out transform hover:-translate-y-1"
-                on:click={() => {
-                    showModal = true;
-                }}
-            >
-                <CarbonGithub />Create Agent
-            </button>
+    class="flex ml-auto h-9 items-center gap-1 whitespace-nowrap rounded-lg border border-gray-300 bg-gradient-to-r from-gray-700 via-gray-900 to-black text-white py-1 px-3 shadow-lg hover:bg-gradient-to-r hover:from-gray-600 hover:via-gray-800 hover:to-black hover:shadow-md dark:border-gray-700 dark:bg-gradient-to-r dark:from-gray-800 dark:via-gray-900 dark:to-black dark:hover:from-gray-700 dark:hover:via-gray-800 dark:hover:to-black transition duration-200 ease-in-out transform hover:-translate-y-1"
+    on:click={() => {
+        showModal = true;
+    }}
+>
+    <CarbonGithub />Create Agent
+</button>
         </div>
         <div class="mt-6 flex flex-wrap gap-2 items-center">
             <div
diff --git a/web/src/routes/agent/+page.svelte b/web/src/routes/agent/+page.svelte
index 8c1cbff1..3cb99f74 100644
--- a/web/src/routes/agent/+page.svelte
+++ b/web/src/routes/agent/+page.svelte
@@ -2,7 +2,6 @@
     import { onMount } from "svelte";
     import { error as pageError } from "@sveltejs/kit";
     import { page } from "$app/stores";
-    import appInsights from "$lib/utils/appInsights";
 
     import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
     import { type Agent } from "$lib/types/Agent";
@@ -16,10 +15,6 @@
         loading = true;
         const ref: string = $page.url.searchParams.get("github") || "";
 
-        appInsights.trackPageView({
-            name: "AgentPage",
-        });
-
         const response = await fetch(
             "https://api.commanddash.dev/agent/get-latest-agent",
             {
@@ -35,21 +30,11 @@
         if (!response.ok) {
             loading = false;
             errorMessage = _response.message;
-            appInsights.trackException({ error: new Error(_response.message) }); // Track exception
             throw pageError(response.status, _response.message);
         }
 
         currentAgentDetails = _response as Agent;
         loading = false;
-        // Track custom event for agent details loaded
-        appInsights.trackEvent({
-            name: "AgentDetailsLoaded",
-            properties: {
-                agentName: currentAgentDetails.name,
-                agentVersion: currentAgentDetails.version,
-                agentDisplayName: currentAgentDetails.metadata.display_name,
-            },
-        });
     });
 </script>
 
@@ -70,7 +55,9 @@
 {#if loading}
     <LoadingPage />
 {:else if !loading && !currentAgentDetails}
-    <div class="h-screen inline-flex justify-center items-center flex-col">
+    <div
+        class="h-screen inline-flex justify-center items-center flex-col"
+    >
         <h1 class="text-2xl">Error:</h1>
         <h1 class="text-xl">{errorMessage}</h1>
     </div>