feat: track settings change on mixpanel events (#65)

* adds properties to update settings

* adds settings track on publish

* added track on publish/receive

* renaming

* fix some types

* introduced a helper function

* created a separate composable

* updated the comparing

components/receive/Wizard.vue

@@ -5,7 +5,12 @@
     :title="title"
     :show-back-button="step !== 1"
     @back="step--"
-    @fully-closed="step = 1"
+    @fully-closed="
+      () => {
+        step = 1
+        settingsWereChanged = false
+      }
+    "
   >
     <div>
       <div v-if="step === 1">
@@ -56,11 +61,13 @@ import { useHostAppStore } from '~/store/hostApp'
 import { useAccountStore } from '~/store/accounts'
 import { ReceiverModelCard } from '~/lib/models/card/receiver'
 import { useMixpanel } from '~/lib/core/composables/mixpanel'
+import { useSettingsTracking } from '~/lib/core/composables/trackSettings'
 import { useAddByUrl } from '~/lib/core/composables/addByUrl'
 import { getSlugFromHostAppNameAndVersion } from '~/lib/common/helpers/hostAppSlug'
 import type { CardSetting } from '~/lib/models/card/setting'
 
 const { trackEvent } = useMixpanel()
+const { trackSettingsChange } = useSettingsTracking()
 
 const showReceiveDialog = defineModel<boolean>('open', { default: false })
 
@@ -86,6 +93,7 @@ const selectedWorkspace = ref<WorkspaceListWorkspaceItemFragment>()
 const selectedProject = ref<ProjectListProjectItemFragment>()
 const selectedModel = ref<ModelListModelItemFragment>()
 const receieveSettings = ref<CardSetting[] | undefined>(undefined)
+const settingsWereChanged = ref(false)
 
 const { tryParseUrl, urlParsedData, urlParseError } = useAddByUrl()
 const updateSearchText = (text: string | undefined) => {
@@ -136,6 +144,7 @@ const title = computed(() => {
 
 const handleUpdateSettings = (settings: CardSetting[]) => {
   receieveSettings.value = settings
+  settingsWereChanged.value = true
 }
 
 // accountId, serverUrl,  ModelListModelItemFragment, VersionListItemFragment
@@ -155,6 +164,18 @@ const selectVersionAndAddModel = async (
       m.typeDiscriminator === 'ReceiverModelCard'
   ) as ReceiverModelCard
 
+  // track settings only if user changed them on receive
+  // compare against existing model settings if it exists, otherwise compare against defaults
+  if (settingsWereChanged.value && receieveSettings.value) {
+    trackSettingsChange(
+      'Load Settings Changed',
+      receieveSettings.value,
+      existingModel?.settings || hostAppStore.receiveSettings || [],
+      selectedAccountId.value,
+      true
+    )
+  }
+
   if (existingModel) {
     emit('close')
     // Patch the existing model card with new versions!

components/send/SettingsDialog.vue

@@ -23,11 +23,11 @@
 </template>
 
 <script setup lang="ts">
-import { useMixpanel } from '~/lib/core/composables/mixpanel'
+import { useSettingsTracking } from '~/lib/core/composables/trackSettings'
 import { useHostAppStore } from '~/store/hostApp'
 import type { CardSetting } from '~/lib/models/card/setting'
 
-const { trackEvent } = useMixpanel()
+const { trackSettingsChange } = useSettingsTracking()
 
 const props = defineProps<{
   settings?: CardSetting[]
@@ -48,9 +48,12 @@ const updateSettings = (settings: CardSetting[]) => {
 }
 
 const saveSettings = async () => {
-  void trackEvent('DUI3 Action', {
-    name: 'Send Settings Updated'
-  })
+  trackSettingsChange(
+    'Model Card Settings Updated',
+    newSettings,
+    store.sendSettings || []
+  )
+
   await store.patchModel(props.modelCardId, {
     settings: newSettings,
     expired: true

components/send/Wizard.vue

@@ -5,7 +5,12 @@
     :title="title"
     :show-back-button="step !== 1"
     @back="step--"
-    @fully-closed="step = 1"
+    @fully-closed="
+      () => {
+        step = 1
+        settingsWereChanged = false
+      }
+    "
   >
     <div v-if="step === 1">
       <WizardProjectSelector
@@ -32,7 +37,12 @@
       <SendFiltersAndSettings
         v-model="filter"
         @update:filter="(f) => (filter = f)"
-        @update:settings="(s) => (settings = s)"
+        @update:settings="
+          (s) => {
+            settings = s
+            settingsWereChanged = true
+          }
+        "
       />
       <div class="mt-2">
         <FormButton full-width @click="addModel">Publish</FormButton>
@@ -54,10 +64,12 @@ import { SenderModelCard } from '~/lib/models/card/send'
 import { useHostAppStore } from '~/store/hostApp'
 import { useAccountStore } from '~/store/accounts'
 import { useMixpanel } from '~/lib/core/composables/mixpanel'
+import { useSettingsTracking } from '~/lib/core/composables/trackSettings'
 import type { CardSetting } from '~/lib/models/card/setting'
 import { useAddByUrl } from '~/lib/core/composables/addByUrl'
 
 const { trackEvent } = useMixpanel()
+const { trackSettingsChange } = useSettingsTracking()
 
 const showSendDialog = defineModel<boolean>('open', { default: false })
 
@@ -72,6 +84,7 @@ const selectedProject = ref<ProjectListProjectItemFragment>()
 const selectedModel = ref<ModelListModelItemFragment>()
 const filter = ref<ISendFilter | undefined>(undefined)
 const settings = ref<CardSetting[] | undefined>(undefined)
+const settingsWereChanged = ref(false)
 
 const { tryParseUrl, urlParsedData, urlParseError } = useAddByUrl()
 const updateSearchText = (text: string | undefined) => {
@@ -139,6 +152,18 @@ const addModel = async () => {
       m.modelId === selectedModel.value?.id &&
       m.typeDiscriminator.includes('SenderModelCard')
   ) as SenderModelCard
+
+  // track settings only if user changed them
+  // compare against existing model card settings
+  if (settingsWereChanged.value && settings.value) {
+    trackSettingsChange(
+      'Publish Settings Changed',
+      settings.value,
+      existingModel?.settings || hostAppStore.sendSettings || [],
+      selectedAccountId.value,
+      true
+    )
+  }
   if (existingModel) {
     emit('close')
     // Patch the existing model card with new send filter and non-expired state!