feat: hoppscotch agent and agent interceptor (#4396)

Co-authored-by: CuriousCorrelation <CuriousCorrelation@gmail.com>
Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>

packages/hoppscotch-common/src/services/debug.service.ts

@@ -5,7 +5,10 @@ import { Service } from "dioc"
  * supposed to be used only in development.
  *
  * This service logs events from the container and also events
- * from all the services that are bound to the container.
+ * from all the services that are bound to the container. Along with that
+ * this service exposes all registered services (including this) to global
+ * scope (window) under the ID of the service so it can be accessed using
+ * the console for debugging.
  *
  * This service injects couple of utilities into the global scope:
  *  - `_getService(id: string): Service | undefined` - Returns the service instance with the given ID or undefined.
@@ -15,27 +18,30 @@ export class DebugService extends Service {
   public static readonly ID = "DEBUG_SERVICE"
 
   override onServiceInit() {
-    console.log("DebugService is initialized...")
+    console.debug("DebugService is initialized...")
 
     const container = this.getContainer()
 
     // Log container events
     container.getEventStream().subscribe((event) => {
       if (event.type === "SERVICE_BIND") {
-        console.log(
+        console.debug(
           "[CONTAINER] Service Bind:",
           event.bounderID ?? "<CONTAINER>",
           "->",
           event.boundeeID
         )
       } else if (event.type === "SERVICE_INIT") {
-        console.log("[CONTAINER] Service Init:", event.serviceID)
+        console.debug("[CONTAINER] Service Init:", event.serviceID)
 
         // Subscribe to event stream of the newly initialized service
         const service = container.getBoundServiceWithID(event.serviceID)
 
+        // Expose the service globally for debugging via a global variable
+        ;(window as any)[event.serviceID] = service
+
         service?.getEventStream().subscribe((ev: any) => {
-          console.log(`[${event.serviceID}] Event:`, ev)
+          console.debug(`[${event.serviceID}] Event:`, ev)
         })
       }
     })
@@ -43,8 +49,11 @@ export class DebugService extends Service {
     // Subscribe to event stream of all already bound services (if any)
     for (const [id, service] of container.getBoundServices()) {
       service.getEventStream().subscribe((event: any) => {
-        console.log(`[${id}]`, event)
+        console.debug(`[${id}]`, event)
       })
+
+      // Expose the service globally for debugging via a global variable
+      ;(window as any)[id] = service
     }
 
     // Inject debug utilities into the global scope

packages/hoppscotch-common/src/services/ui-extension.service.ts

@@ -0,0 +1,25 @@
+import { Service } from "dioc"
+import { Component, shallowRef } from "vue"
+
+/**
+ * A registrar that allows other services to register
+ * additional stuff into the UI
+ */
+export class UIExtensionService extends Service {
+  public static readonly ID = "UI_EXTENSION_SERVICE"
+
+  /**
+   * Defines the Root UI Extensions that are registered.
+   * These components are rendered in `layouts/default.vue`.
+   * NOTE: This is supposed to be readonly, to register
+   */
+  public rootUIExtensionComponents = shallowRef<Component[]>([])
+
+  /**
+   * Registers a root UI extension component that will be rendered
+   * in the root of the UI
+   */
+  public addRootUIExtension(component: Component) {
+    this.rootUIExtensionComponents.value.push(component)
+  }
+}