Feat: receive settings (#35)

* Receive settings for POC for now

* Patch the model after settings change

components/model/Receiver.vue

@@ -52,7 +52,9 @@
         :model-id="modelCard.modelId"
         :workspace-slug="modelCard.workspaceSlug"
         :selected-version-id="modelCard.selectedVersionId"
+        :settings="modelCard.settings"
         @next="handleVersionSelection"
+        @update:settings="handleUpdateSettings"
       />
     </CommonDialog>
     <template #states>
@@ -95,6 +97,7 @@ import type { VersionListItemFragment } from '~/lib/common/generated/gql/graphql
 import { useMixpanel } from '~/lib/core/composables/mixpanel'
 import { useInterval, watchOnce } from '@vueuse/core'
 import { useAccountStore } from '~~/store/accounts'
+import type { CardSetting } from '~/lib/models/card/setting'
 
 const { trackEvent } = useMixpanel()
 const app = useNuxtApp()
@@ -122,6 +125,12 @@ const isExpired = computed(() => {
   return props.modelCard.latestVersionId !== props.modelCard.selectedVersionId
 })
 
+const handleUpdateSettings = async (settings: CardSetting[]) => {
+  await store.patchModel(props.modelCard.modelCardId, {
+    settings
+  })
+}
+
 // Cancels any in progress receive AND load selected version
 const handleVersionSelection = async (
   selectedVersion: VersionListItemFragment,

components/model/Settings.vue

@@ -27,28 +27,29 @@ import type { CardSetting, CardSettingValue } from '~/lib/models/card/setting'
 import type { JsonFormsChangeEvent } from '@jsonforms/vue'
 import { cloneDeep, omit } from 'lodash-es'
 import type { JsonSchema } from '@jsonforms/core'
-import { useHostAppStore } from '~/store/hostApp'
+// import { useHostAppStore } from '~/store/hostApp'
 
 const props = defineProps<{
   settings?: CardSetting[]
+  defaultSettings: CardSetting[]
   expandable: boolean
 }>()
 
 const emit = defineEmits<{ (e: 'update:settings', value: CardSetting[]): void }>()
 
-const store = useHostAppStore()
+// const store = useHostAppStore()
 
-const defaultSendSettings = computed(() => store.sendSettings)
-const sendSettings = ref<CardSetting[] | undefined>(
-  cloneDeep(props.settings ?? defaultSendSettings.value) // need to prevent mutation!
+// const defaultSendSettings = computed(() => store.sendSettings)
+const settings = ref<CardSetting[] | undefined>(
+  cloneDeep(props.settings ?? props.defaultSettings) // need to prevent mutation!
 )
 
 const showSettings = ref(!props.expandable)
 
 const settingsJsonForms = computed(() => {
-  if (sendSettings.value === undefined) return {}
+  if (settings.value === undefined) return {}
   const obj: JsonSchema = { type: 'object', properties: {} }
-  sendSettings.value.forEach((setting: CardSetting) => {
+  settings.value.forEach((setting: CardSetting) => {
     const mappedSetting = omit({ ...setting, $id: setting.id }, ['id'])
     if (obj && obj.properties) {
       obj.properties[setting.id] = mappedSetting
@@ -60,8 +61,8 @@ const settingsJsonForms = computed(() => {
 type DataType = Record<string, unknown>
 const data = computed(() => {
   const settingValues = {} as DataType
-  if (sendSettings.value) {
-    sendSettings.value.forEach((setting) => {
+  if (settings.value) {
+    settings.value.forEach((setting) => {
       settingValues[setting.id as string] = setting.value
     })
   }
@@ -69,14 +70,14 @@ const data = computed(() => {
 })
 
 const onParamsFormChange = (e: JsonFormsChangeEvent) => {
-  if (sendSettings.value === undefined) return
-  sendSettings.value?.forEach((setting) => {
+  if (settings.value === undefined) return
+  settings.value?.forEach((setting) => {
     if (setting) {
       if (setting.value !== (e.data as DataType)[setting.id]) {
         setting.value = (e.data as DataType)[setting.id] as CardSettingValue
       }
     }
   })
-  emit('update:settings', sendSettings.value)
+  emit('update:settings', settings.value)
 }
 </script>

components/receive/Wizard.vue

@@ -37,6 +37,7 @@
           :workspace-slug="selectedWorkspace?.slug"
           :from-wizard="true"
           @next="selectVersionAndAddModel"
+          @update:settings="handleUpdateSettings"
         />
       </div>
     </div>
@@ -57,6 +58,7 @@ import { ReceiverModelCard } from '~/lib/models/card/receiver'
 import { useMixpanel } from '~/lib/core/composables/mixpanel'
 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()
 
@@ -83,6 +85,7 @@ const selectedAccountId = ref<string>(activeAccount.value?.accountInfo.id as str
 const selectedWorkspace = ref<WorkspaceListWorkspaceItemFragment>()
 const selectedProject = ref<ProjectListProjectItemFragment>()
 const selectedModel = ref<ModelListModelItemFragment>()
+const receieveSettings = ref<CardSetting[] | undefined>(undefined)
 
 const { tryParseUrl, urlParsedData, urlParseError } = useAddByUrl()
 const updateSearchText = (text: string | undefined) => {
@@ -131,6 +134,10 @@ const title = computed(() => {
   return ''
 })
 
+const handleUpdateSettings = (settings: CardSetting[]) => {
+  receieveSettings.value = settings
+}
+
 // accountId, serverUrl,  ModelListModelItemFragment, VersionListItemFragment
 const selectVersionAndAddModel = async (
   version: VersionListItemFragment,
@@ -173,6 +180,7 @@ const selectVersionAndAddModel = async (
   )
 
   const modelCard = new ReceiverModelCard()
+  modelCard.settings = receieveSettings.value
   modelCard.accountId = selectedAccountId.value
   modelCard.serverUrl = activeAccount.value.accountInfo.serverInfo.url
 

components/send/FiltersAndSettings.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="space-y-4">
     <FilterListSelect @update:filter="updateFilter" />
-    <SendSettings
+    <ModelSettings
       v-if="hasSendSettings"
       expandable
+      :default-settings="(store.sendSettings as unknown as CardSetting[])"
       @update:settings="updateSettings"
-    ></SendSettings>
+    ></ModelSettings>
   </div>
 </template>
 <script setup lang="ts">

components/send/SettingsDialog.vue

@@ -6,11 +6,12 @@
       :title="`Settings`"
       fullscreen="none"
     >
-      <SendSettings
+      <ModelSettings
         :expandable="false"
+        :default-settings="(store.sendSettings as unknown as CardSetting[])"
         :settings="props.settings"
         @update:settings="updateSettings"
-      ></SendSettings>
+      ></ModelSettings>
       <div class="mt-4 flex justify-end items-center space-x-2">
         <FormButton size="sm" color="outline" @click="showSettingsDialog = false">
           Cancel

components/wizard/VersionSelector.vue

@@ -13,6 +13,17 @@
           Upgrade
         </FormButton>
       </div>
+      <div v-if="hasReceiveSettings">
+        <ModelSettings
+          class="mb-2"
+          expandable
+          :settings="settings"
+          :default-settings="(store.receiveSettings as unknown as CardSetting[])"
+          @update:settings="updateSettings"
+        ></ModelSettings>
+        <hr />
+      </div>
+
       <div v-if="latestVersion" class="grid grid-cols-2 gap-3 max-[275px]:grid-cols-1">
         <WizardListVersionCard
           v-for="(version, index) in versions"
@@ -44,27 +55,40 @@ import { useQuery } from '@vue/apollo-composable'
 import { modelVersionsQuery } from '~/lib/graphql/mutationsAndQueries'
 import type { VersionListItemFragment } from '~/lib/common/generated/gql/graphql'
 import { useAccountStore } from '~/store/accounts'
+import type { CardSetting } from '~/lib/models/card/setting'
+import { useHostAppStore } from '~/store/hostApp'
 
-defineEmits<{
+const emit = defineEmits<{
   (
     e: 'next',
     version: VersionListItemFragment,
     latestVersion: VersionListItemFragment
   ): void
+  (e: 'update:settings', settings: CardSetting[]): void
 }>()
 
 const props = defineProps<{
   accountId: string
   projectId: string
   modelId: string
+  settings?: CardSetting[]
   selectedVersionId?: string
   workspaceSlug?: string
   fromWizard?: boolean
 }>()
 
+const store = useHostAppStore()
 const accountStore = useAccountStore()
 const serverUrl = computed(() => accountStore.activeAccount.accountInfo.serverInfo.url)
 
+const hasReceiveSettings = computed(
+  () => store.receiveSettings && store.receiveSettings.length > 0
+)
+
+const updateSettings = (settings: CardSetting[]) => {
+  emit('update:settings', settings)
+}
+
 const {
   result: modelVersionResults,
   loading,

store/hostApp.ts

@@ -196,6 +196,7 @@ export const useHostAppStore = defineStore('hostAppStore', () => {
   }
 
   const sendSettings = ref<CardSetting[]>()
+  const receiveSettings = ref<CardSetting[]>()
 
   /**
    * Send filters
@@ -620,6 +621,10 @@ export const useHostAppStore = defineStore('hostAppStore', () => {
     sendSettings.value = await app.$sendBinding.getSendSettings()
   }
 
+  const getReceiveSettings = async () => {
+    receiveSettings.value = await app.$receiveBinding.getReceiveSettings()
+  }
+
   const tryToUpgradeModelCardSettings = (
     settings: CardSetting[],
     typeDiscriminator: string
@@ -698,6 +703,7 @@ export const useHostAppStore = defineStore('hostAppStore', () => {
     await refreshDocumentModelStore()
     await refreshSendFilters()
     await getSendSettings()
+    await getReceiveSettings()
     tryToUpgradeModelCardSettings(sendSettings.value || [], 'SenderModelCard')
 
     // Intercom shenanningans below
@@ -731,6 +737,7 @@ export const useHostAppStore = defineStore('hostAppStore', () => {
     models,
     sendFilters,
     sendSettings,
+    receiveSettings,
     selectionFilter,
     everythingFilter,
     currentNotification,