feat: inspections (#3213)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-common/src/components/smart/EnvInput.vue

@@ -10,6 +10,7 @@
         @keydown="handleKeystroke"
         @focusin="showSuggestionPopover = true"
       ></div>
+      <AppInspection :inspection-results="inspectionResults" />
     </div>
     <ul
       v-if="showSuggestionPopover && autoCompleteSource"
@@ -34,8 +35,11 @@
         </div>
       </li>
       <li v-if="suggestions.length === 0" class="pointer-events-none">
-        <span class="truncate py-0.5">
-          {{ t("empty.history_suggestions") }}
+        <div v-if="slots.empty" class="truncate py-0.5">
+          <slot name="empty"></slot>
+        </div>
+        <span v-else class="truncate py-0.5">
+          {{ t("empty.suggestions") }}
         </span>
       </li>
     </ul>
@@ -43,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, nextTick, computed, Ref } from "vue"
+import { ref, onMounted, watch, nextTick, computed, Ref, useSlots } from "vue"
 import {
   EditorView,
   placeholder as placeholderExt,
@@ -62,6 +66,7 @@ import { AggregateEnvironment, aggregateEnvs$ } from "~/newstore/environments"
 import { platform } from "~/platform"
 import { useI18n } from "~/composables/i18n"
 import { onClickOutside, useDebounceFn } from "@vueuse/core"
+import { InspectorResult } from "~/services/inspection"
 import { invokeAction } from "~/helpers/actions"
 
 const props = withDefaults(
@@ -75,6 +80,7 @@ const props = withDefaults(
     environmentHighlights?: boolean
     readonly?: boolean
     autoCompleteSource?: string[]
+    inspectionResults?: InspectorResult[] | undefined
   }>(),
   {
     modelValue: "",
@@ -85,6 +91,8 @@ const props = withDefaults(
     readonly: false,
     environmentHighlights: true,
     autoCompleteSource: undefined,
+    inspectionResult: undefined,
+    inspectionResults: undefined,
   }
 )
 
@@ -98,6 +106,8 @@ const emit = defineEmits<{
   (e: "click", ev: any): void
 }>()
 
+const slots = useSlots()
+
 const t = useI18n()
 
 const cachedValue = ref(props.modelValue)
@@ -142,7 +152,9 @@ const suggestions = computed(() => {
 const updateModelValue = (value: string) => {
   emit("update:modelValue", value)
   emit("change", value)
-  showSuggestionPopover.value = false
+  nextTick(() => {
+    showSuggestionPopover.value = false
+  })
 }
 
 const handleKeystroke = (ev: KeyboardEvent) => {