feat: handle loading states

components/ResearchForm.vue

@@ -6,27 +6,31 @@
     numQuestions: number
   }
 
+  defineProps<{
+    isLoadingFeedback: boolean
+  }>()
+
   const emit = defineEmits<{
     (e: 'submit', value: ResearchInputData): void
   }>()
 
-  const input = ref('天空为什么是蓝的？')
-  const breadth = ref(2)
-  const depth = ref(2)
-  const numQuestions = ref(3)
-  const isLoading = ref(false)
+  const form = reactive({
+    query: '',
+    breadth: 2,
+    depth: 2,
+    numQuestions: 3,
+  })
+
+  const isSubmitButtonDisabled = computed(() => !form.query || !form.breadth || !form.depth || !form.numQuestions)
 
   function handleSubmit() {
     emit('submit', {
-      query: input.value,
-      breadth: breadth.value,
-      depth: depth.value,
-      numQuestions: numQuestions.value,
+      ...form,
     })
   }
 
-  onMounted(() => {
-    input.value = '天空为什么是蓝的？' // default
+  defineExpose({
+    form,
   })
 </script>
 
@@ -37,30 +41,30 @@
     </template>
     <div class="flex flex-col gap-2">
       <UFormField label="Research Topic" required>
-        <UTextarea class="w-full" v-model="input" :rows="3" placeholder="Enter whatever you want to research..." required />
+        <UTextarea class="w-full" v-model="form.query" :rows="3" placeholder="Enter whatever you want to research..." required />
       </UFormField>
 
       <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
-        <UFormField label="Number of Questions">
+        <UFormField label="Number of Questions" required>
           <template #help> Number of questions for you to clarify. </template>
-          <UInput v-model="numQuestions" class="w-full" type="number" :min="1" :max="5" :step="1" />
+          <UInput v-model="form.numQuestions" class="w-full" type="number" :min="1" :max="5" :step="1" />
         </UFormField>
 
-        <UFormField label="Depth">
+        <UFormField label="Depth" required>
           <template #help> How deep you want to dig. </template>
-          <UInput v-model="depth" class="w-full" type="number" :min="1" :max="5" :step="1" />
+          <UInput v-model="form.depth" class="w-full" type="number" :min="1" :max="5" :step="1" />
         </UFormField>
 
-        <UFormField label="Breadth">
+        <UFormField label="Breadth" required>
           <template #help> Number of searches in each depth. </template>
-          <UInput v-model="breadth" class="w-full" type="number" :min="1" :max="5" :step="1" />
+          <UInput v-model="form.breadth" class="w-full" type="number" :min="1" :max="5" :step="1" />
         </UFormField>
       </div>
     </div>
 
     <template #footer>
-      <UButton type="submit" color="primary" :loading="isLoading" block @click="handleSubmit">
-        {{ isLoading ? 'Researching...' : 'Start Research' }}
+      <UButton type="submit" color="primary" :loading="isLoadingFeedback" :disabled="isSubmitButtonDisabled" block @click="handleSubmit">
+        {{ isLoadingFeedback ? 'Researching...' : 'Start Research' }}
       </UButton>
     </template>
   </UCard>