refactor: realtime log entry revamp (#2240)

Co-authored-by: liyasthomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/assets/icons/arrow-down-left.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="17" y1="7" x2="7" y2="17"></line>
+  <polyline points="17 17 7 17 7 7"></polyline>
+</svg>

packages/hoppscotch-app/assets/icons/arrow-down.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="12" y1="5" x2="12" y2="19"></line>
+  <polyline points="19 12 12 19 5 12"></polyline>
+</svg>

packages/hoppscotch-app/assets/icons/arrow-up-right.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="7" y1="17" x2="17" y2="7"></line>
+  <polyline points="7 7 17 7 17 17"></polyline>
+</svg>

packages/hoppscotch-app/assets/icons/arrow-up.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="12" y1="19" x2="12" y2="5"></line>
+  <polyline points="5 12 12 5 19 12"></polyline>
+</svg>

packages/hoppscotch-app/assets/icons/chevrons-down.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="7 13 12 18 17 13"></polyline>
+  <polyline points="7 6 12 11 17 6"></polyline>
+</svg>

packages/hoppscotch-app/assets/icons/chevrons-up.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="17 11 12 6 7 11"></polyline>
+  <polyline points="17 18 12 13 7 18"></polyline>
+</svg>

packages/hoppscotch-app/assets/icons/info-disconnect.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"></circle>
+  <line x1="12" y1="16" x2="12" y2="12"></line>
+  <line x1="12" y1="8" x2="12.01" y2="8"></line>
+</svg>

packages/hoppscotch-app/assets/icons/info-realtime.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"></circle>
+  <line x1="12" y1="16" x2="12" y2="12"></line>
+  <line x1="12" y1="8" x2="12.01" y2="8"></line>
+</svg>

packages/hoppscotch-app/components/realtime/Log.vue

@@ -1,77 +1,128 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div ref="container" class="flex flex-col flex-1 overflow-y-auto">
     <div
-      class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
+      class="sticky top-0 z-10 flex items-center justify-between flex-none pl-4 border-b bg-primary border-dividerLight"
     >
       <label for="log" class="py-2 font-semibold text-secondaryLight">
         {{ title }}
       </label>
+      <div>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.delete')"
+          svg="trash"
+          @click.native="emit('delete')"
+        />
+        <ButtonSecondary
+          id="bottompage"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.scroll_to_top')"
+          svg="arrow-up"
+          @click.native="scrollTo('top')"
+        />
+        <ButtonSecondary
+          id="bottompage"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.scroll_to_bottom')"
+          svg="arrow-down"
+          @click.native="scrollTo('bottom')"
+        />
+        <ButtonSecondary
+          id="bottompage"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.autoscroll')"
+          svg="chevrons-down"
+          :class="toggleAutoscrollColor"
+          @click.native="toggleAutoscroll()"
+        />
       </div>
-    <div ref="logsRef" name="log" class="realtime-log">
+    </div>
-      <span v-if="log" class="space-y-2">
+    <div
-        <span
+      v-if="log.length !== 0"
+      ref="logs"
+      class="overflow-y-auto border-b border-dividerLight"
+    >
+      <div
+        class="flex flex-col h-auto h-full border-r divide-y divide-dividerLight border-dividerLight"
+      >
+        <RealtimeLogEntry
           v-for="(entry, index) in log"
           :key="`entry-${index}`"
-          :style="{ color: entry.color }"
+          :entry="entry"
-          class="font-mono"
+        />
-          >{{ entry.ts }}{{ source(entry.source) }}{{ entry.payload }}</span
+      </div>
-        >
-      </span>
-      <span v-else>{{ t("response.waiting_for_connection") }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, watch } from "@nuxtjs/composition-api"
+import { ref, PropType, computed, watch } from "@nuxtjs/composition-api"
-import { getSourcePrefix as source } from "~/helpers/utils/string"
+import { useThrottleFn, useScroll } from "@vueuse/core"
 import { useI18n } from "~/helpers/utils/composables"
 
-const t = useI18n()
+export type LogEntryData = {
+  ts: number
+  source: "info" | "client" | "server" | "disconnected"
+  payload: string
+  event: "connecting" | "connected" | "disconnected" | "error"
+}
 
 const props = defineProps({
-  log: { type: Array, default: () => [] },
+  log: { type: Array as PropType<LogEntryData[]>, default: () => [] },
   title: {
     type: String,
     default: "",
   },
 })
 
-const logsRef = ref<any | null>(null)
+const emit = defineEmits<{
-const BOTTOM_SCROLL_DIST_INACCURACY = 5
+  (e: "delete"): void
+}>()
+
+const t = useI18n()
+
+const container = ref<HTMLElement | null>(null)
+const logs = ref<HTMLElement | null>(null)
+
+const autoScrollEnabled = ref(true)
+
+const logListScroll = useScroll(logs)
+
+// Disable autoscroll when scrolling to top
+watch(logListScroll.isScrolling, (isScrolling) => {
+  if (isScrolling && logListScroll.directions.top)
+    autoScrollEnabled.value = false
+})
+
+const scrollTo = (position: "top" | "bottom") => {
+  if (position === "top") {
+    logs.value?.scroll({
+      behavior: "smooth",
+      top: 0,
+    })
+  } else if (position === "bottom") {
+    logs.value?.scroll({
+      behavior: "smooth",
+      top: logs.value?.scrollHeight,
+    })
+  }
+}
 
 watch(
   () => props.log,
-  () => {
+  useThrottleFn(() => {
-    if (!logsRef.value) return
+    if (autoScrollEnabled.value) scrollTo("bottom")
-    const distToBottom =
+  }, 200),
-      logsRef.value.scrollHeight -
+  { flush: "post" }
-      logsRef.value.scrollTop -
+)
-      logsRef.value.clientHeight
+
-    if (distToBottom < BOTTOM_SCROLL_DIST_INACCURACY) {
+const toggleAutoscroll = () => {
-      nextTick(() => (logsRef.value.scrollTop = logsRef.value.scrollHeight))
+  autoScrollEnabled.value = !autoScrollEnabled.value
-    }
+}
-  }
+
+const toggleAutoscrollColor = computed(() =>
+  autoScrollEnabled.value ? "text-green-500" : "text-red-500"
 )
 </script>
 
-<style scoped lang="scss">
+<style></style>
-.realtime-log {
-  @apply p-4;
-  @apply bg-transparent;
-  @apply text-secondary;
-  @apply overflow-auto;
-
-  height: 256px;
-
-  &,
-  span {
-    @apply select-text;
-  }
-
-  span {
-    @apply block;
-    @apply break-words break-all;
-  }
-}
-</style>

packages/hoppscotch-app/components/realtime/LogEntry.vue

@@ -0,0 +1,388 @@
+<template>
+  <div v-if="entry" class="divide-y divide-dividerLight">
+    <div :style="{ color: entryColor }" class="realtime-log">
+      <div class="flex group">
+        <div class="flex flex-1 divide-x divide-dividerLight">
+          <div class="inline-flex items-center p-2">
+            <SmartIcon
+              class="svg-icons"
+              :name="iconName"
+              :style="{ color: iconColor }"
+              @click.native="copyQuery(entry.payload)"
+            />
+          </div>
+          <div class="items-center hidden px-1 w-18 sm:inline-flex">
+            <span
+              v-tippy="{ theme: 'tooltip' }"
+              :title="relativeTime"
+              class="mx-auto truncate ts-font text-secondaryLight hover:text-secondary hover:text-center"
+            >
+              {{ new Date(entry.ts).toLocaleTimeString() }}
+            </span>
+          </div>
+          <div
+            class="flex items-center flex-1 min-w-0 p-2"
+            @click="toggleExpandPayload()"
+          >
+            <div class="truncate">
+              {{ entry.payload }}
+            </div>
+          </div>
+        </div>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.copy')"
+          :svg="`${copyQueryIcon}`"
+          class="hidden group-hover:inline-flex"
+          @click.native="copyQuery(entry.payload)"
+        />
+        <ButtonSecondary
+          svg="chevron-down"
+          class="transform"
+          :class="{ 'rotate-180': !minimized }"
+          @click.native="toggleExpandPayload()"
+        />
+      </div>
+    </div>
+    <div v-if="!minimized" class="overflow-hidden bg-primaryLight">
+      <SmartTabs v-model="selectedTab" styles="bg-primaryLight">
+        <SmartTab v-if="isJSON(entry.payload)" id="json" label="JSON" />
+        <SmartTab id="raw" label="Raw" />
+      </SmartTabs>
+      <div
+        class="z-10 flex items-center justify-between pl-4 border-b border-dividerLight top-lowerSecondaryStickyFold"
+      >
+        <label class="font-semibold text-secondaryLight">
+          {{ t("response.body") }}
+        </label>
+        <div class="flex">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('state.linewrap')"
+            :class="{ '!text-accent': linewrapEnabled }"
+            svg="wrap-text"
+            @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+          />
+          <ButtonSecondary
+            ref="downloadResponse"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('action.download_file')"
+            :svg="downloadIcon"
+            @click.native="downloadResponse"
+          />
+          <ButtonSecondary
+            ref="copyResponse"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('action.copy')"
+            :svg="copyIcon"
+            @click.native="copyResponse"
+          />
+        </div>
+      </div>
+      <div ref="editor"></div>
+      <div
+        v-if="outlinePath && selectedTab === 'json'"
+        class="sticky bottom-0 z-10 flex px-2 overflow-auto border-t bg-primaryLight border-dividerLight flex-nowrap hide-scrollbar"
+      >
+        <div
+          v-for="(item, index) in outlinePath"
+          :key="`item-${index}`"
+          class="flex items-center"
+        >
+          <tippy
+            ref="outlineOptions"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <div v-if="item.kind === 'RootObject'" class="outline-item">
+                {}
+              </div>
+              <div v-if="item.kind === 'RootArray'" class="outline-item">
+                []
+              </div>
+              <div v-if="item.kind === 'ArrayMember'" class="outline-item">
+                {{ item.index }}
+              </div>
+              <div v-if="item.kind === 'ObjectMember'" class="outline-item">
+                {{ item.name }}
+              </div>
+            </template>
+            <div
+              v-if="item.kind === 'ArrayMember' || item.kind === 'ObjectMember'"
+            >
+              <div
+                v-if="item.kind === 'ArrayMember'"
+                class="flex flex-col"
+                role="menu"
+              >
+                <SmartItem
+                  v-for="(arrayMember, astIndex) in item.astParent.values"
+                  :key="`ast-${astIndex}`"
+                  :label="`${astIndex}`"
+                  @click.native="
+                    () => {
+                      jumpCursor(arrayMember)
+                      outlineOptions[index].tippy().hide()
+                    }
+                  "
+                />
+              </div>
+              <div
+                v-if="item.kind === 'ObjectMember'"
+                class="flex flex-col"
+                role="menu"
+              >
+                <SmartItem
+                  v-for="(objectMember, astIndex) in item.astParent.members"
+                  :key="`ast-${astIndex}`"
+                  :label="objectMember.key.value"
+                  @click.native="
+                    () => {
+                      jumpCursor(objectMember)
+                      outlineOptions[index].tippy().hide()
+                    }
+                  "
+                />
+              </div>
+            </div>
+            <div
+              v-if="item.kind === 'RootObject'"
+              class="flex flex-col"
+              role="menu"
+            >
+              <SmartItem
+                label="{}"
+                @click.native="
+                  () => {
+                    jumpCursor(item.astValue)
+                    outlineOptions[index].tippy().hide()
+                  }
+                "
+              />
+            </div>
+            <div
+              v-if="item.kind === 'RootArray'"
+              class="flex flex-col"
+              role="menu"
+            >
+              <SmartItem
+                label="[]"
+                @click.native="
+                  () => {
+                    jumpCursor(item.astValue)
+                    outlineOptions[index].tippy().hide()
+                  }
+                "
+              />
+            </div>
+          </tippy>
+          <i
+            v-if="index + 1 !== outlinePath.length"
+            class="opacity-50 text-secondaryLight material-icons"
+          >
+            chevron_right
+          </i>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else>{{ t("response.waiting_for_connection") }}</div>
+</template>
+
+<script setup lang="ts">
+import * as LJSON from "lossless-json"
+import * as O from "fp-ts/Option"
+import { pipe } from "fp-ts/function"
+import { ref, computed, reactive, watch } from "@nuxtjs/composition-api"
+import { useTimeAgo } from "@vueuse/core"
+import { LogEntryData } from "./Log.vue"
+import { useI18n } from "~/helpers/utils/composables"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { isJSON } from "~/helpers/functional/json"
+import useCopyResponse from "~/helpers/lenses/composables/useCopyResponse"
+import useDownloadResponse from "~/helpers/lenses/composables/useDownloadResponse"
+import { useCodemirror } from "~/helpers/editor/codemirror"
+import jsonParse, { JSONObjectMember, JSONValue } from "~/helpers/jsonParse"
+import { getJSONOutlineAtPos } from "~/helpers/newOutline"
+import {
+  convertIndexToLineCh,
+  convertLineChToIndex,
+} from "~/helpers/editor/utils"
+
+const t = useI18n()
+
+const props = defineProps<{ entry: LogEntryData }>()
+const outlineOptions = ref<any | null>(null)
+const editor = ref<any | null>(null)
+const linewrapEnabled = ref(true)
+const logPayload = computed(() => props.entry.payload)
+
+const selectedTab = ref<"json" | "raw">(
+  isJSON(props.entry.payload) ? "json" : "raw"
+)
+
+// CodeMirror Implementation
+const jsonBodyText = computed(() =>
+  pipe(
+    logPayload.value,
+    O.tryCatchK(LJSON.parse),
+    O.map((val) => LJSON.stringify(val, undefined, 2)),
+    O.getOrElse(() => logPayload.value)
+  )
+)
+
+const ast = computed(() =>
+  pipe(
+    jsonBodyText.value,
+    O.tryCatchK(jsonParse),
+    O.getOrElseW(() => null)
+  )
+)
+
+const editorText = computed(() => {
+  if (selectedTab.value === "json") return jsonBodyText.value
+  else return logPayload.value
+})
+
+const editorMode = computed(() => {
+  if (selectedTab.value === "json") return "application/ld+json"
+  else return "text/plain"
+})
+
+const { cursor } = useCodemirror(
+  editor,
+  editorText,
+  reactive({
+    extendedEditorConfig: {
+      mode: editorMode,
+      readOnly: true,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+    environmentHighlights: false,
+  })
+)
+
+const jumpCursor = (ast: JSONValue | JSONObjectMember) => {
+  const pos = convertIndexToLineCh(jsonBodyText.value, ast.start)
+  pos.line--
+  cursor.value = pos
+}
+
+const outlinePath = computed(() =>
+  pipe(
+    ast.value,
+    O.fromNullable,
+    O.map((ast) =>
+      getJSONOutlineAtPos(
+        ast,
+        convertLineChToIndex(jsonBodyText.value, cursor.value)
+      )
+    ),
+    O.getOrElseW(() => null)
+  )
+)
+
+// Code for UI Changes
+const minimized = ref(true)
+watch(minimized, () => {
+  selectedTab.value = isJSON(props.entry.payload) ? "json" : "raw"
+})
+
+const toggleExpandPayload = () => {
+  minimized.value = !minimized.value
+}
+
+const { copyIcon, copyResponse } = useCopyResponse(logPayload)
+
+const { downloadIcon, downloadResponse } = useDownloadResponse(
+  "application/json",
+  logPayload
+)
+
+const copyQueryIcon = ref("copy")
+const copyQuery = (entry: string) => {
+  copyToClipboard(entry)
+  copyQueryIcon.value = "check"
+  setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
+}
+
+// Relative Time
+const relativeTime = useTimeAgo(computed(() => props.entry.ts))
+
+// Assigns color based on entry event
+const entryColor = computed(() => {
+  switch (props.entry.event) {
+    case "connected":
+      return "#10b981"
+    case "connecting":
+      return "#10b981"
+    case "error":
+      return "#ff5555"
+    case "disconnected":
+      return "#ff5555"
+  }
+})
+
+const ICONS: Record<
+  LogEntryData["source"],
+  { iconName: string; iconColor: string }
+> = {
+  info: {
+    iconName: "info-realtime",
+    iconColor: "#10b981",
+  },
+  client: {
+    iconName: "arrow-up-right",
+    iconColor: "#eaaa45",
+  },
+  server: {
+    iconName: "arrow-down-left",
+    iconColor: "#38d4ea",
+  },
+  disconnected: {
+    iconName: "info-disconnect",
+    iconColor: "#ff5555",
+  },
+}
+
+const iconColor = computed(() => ICONS[props.entry.source].iconColor)
+const iconName = computed(() => ICONS[props.entry.source].iconName)
+</script>
+
+<style scoped lang="scss">
+.realtime-log {
+  @apply text-secondary;
+  @apply overflow-hidden;
+
+  &,
+  span {
+    @apply select-text;
+  }
+
+  span {
+    @apply block;
+    @apply break-words break-all;
+  }
+}
+
+.outline-item {
+  @apply cursor-pointer;
+  @apply flex-grow-0 flex-shrink-0;
+  @apply text-secondaryLight;
+  @apply inline-flex;
+  @apply items-center;
+  @apply px-2;
+  @apply py-1;
+  @apply transition;
+  @apply hover: text-secondary;
+}
+
+.ts-font {
+  font-size: 0.6rem;
+}
+</style>

packages/hoppscotch-app/components/realtime/Mqtt.vue

@@ -48,7 +48,11 @@
       </div>
     </template>
     <template #secondary>
-      <RealtimeLog :title="$t('mqtt.log')" :log="log" />
+      <RealtimeLog
+        :title="$t('mqtt.log')"
+        :log="log"
+        @delete="clearLogEntries()"
+      />
     </template>
     <template #sidebar>
       <div class="flex items-center justify-between p-4">
@@ -216,8 +220,8 @@ export default defineComponent({
         {
           payload: this.$t("state.connecting_to", { name: this.url }),
           source: "info",
-          color: "var(--accent-color)",
+          event: "connecting",
-          ts: new Date().toLocaleTimeString(),
+          ts: Date.now(),
         },
       ]
       const parseUrl = new URL(this.url)
@@ -253,8 +257,8 @@ export default defineComponent({
       addMQTTLogLine({
         payload: this.$t("error.something_went_wrong"),
         source: "info",
-        color: "#ff5555",
+        event: "error",
-        ts: new Date().toLocaleTimeString(),
+        ts: Date.now(),
       })
     },
     onConnectionSuccess() {
@@ -263,8 +267,8 @@ export default defineComponent({
       addMQTTLogLine({
         payload: this.$t("state.connected_to", { name: this.url }),
         source: "info",
-        color: "var(--accent-color)",
+        event: "connected",
-        ts: new Date().toLocaleTimeString(),
+        ts: Date.now(),
       })
       this.$toast.success(this.$t("state.connected"))
     },
@@ -272,8 +276,8 @@ export default defineComponent({
       addMQTTLogLine({
         payload: `Message: ${payloadString} arrived on topic: ${destinationName}`,
         source: "info",
-        color: "var(--accent-color)",
+        event: "info",
-        ts: new Date().toLocaleTimeString(),
+        ts: Date.now(),
       })
     },
     toggleConnection() {
@@ -288,9 +292,9 @@ export default defineComponent({
       this.client.disconnect()
       addMQTTLogLine({
         payload: this.$t("state.disconnected_from", { name: this.url }),
-        source: "info",
+        source: "disconnected",
-        color: "#ff5555",
+        event: "disconnected",
-        ts: new Date().toLocaleTimeString(),
+        ts: Date.now(),
       })
     },
     onConnectionLost() {
@@ -309,9 +313,9 @@ export default defineComponent({
         this.client.publish(this.pub_topic, this.msg, 0, false)
         addMQTTLogLine({
           payload: `Published message: ${this.msg} to topic: ${this.pub_topic}`,
-          ts: new Date().toLocaleTimeString(),
+          ts: Date.now(),
           source: "info",
-          color: "var(--accent-color)",
+          event: "info",
         })
       } catch (e) {
         addMQTTLogLine({
@@ -319,8 +323,8 @@ export default defineComponent({
             this.$t("error.something_went_wrong") +
             `while publishing msg: ${this.msg} to topic:  ${this.pub_topic}`,
           source: "info",
-          color: "#ff5555",
+          event: "error",
-          ts: new Date().toLocaleTimeString(),
+          ts: Date.now(),
         })
       }
     },
@@ -343,8 +347,8 @@ export default defineComponent({
             this.$t("error.something_went_wrong") +
             `while subscribing to topic:  ${this.sub_topic}`,
           source: "info",
-          color: "#ff5555",
+          event: "error",
-          ts: new Date().toLocaleTimeString(),
+          ts: Date.now(),
         })
       }
     },
@@ -356,8 +360,8 @@ export default defineComponent({
           (this.subscriptionState ? "subscribed" : "unsubscribed") +
           ` to topic: ${this.sub_topic}`,
         source: "info",
-        color: "var(--accent-color)",
+        event: "info",
-        ts: new Date().toLocaleTimeString(),
+        ts: Date.now(),
       })
     },
     usubFailure() {
@@ -367,8 +371,8 @@ export default defineComponent({
           (this.subscriptionState ? "unsubscribe" : "subscribe") +
           ` to topic: ${this.sub_topic}`,
         source: "info",
-        color: "#ff5555",
+        color: "error",
-        ts: new Date().toLocaleTimeString(),
+        ts: Date.now(),
       })
     },
     unsubscribe() {
@@ -377,6 +381,9 @@ export default defineComponent({
         onFailure: this.usubFailure,
       })
     },
+    clearLogEntries() {
+      this.log = []
+    },
   },
 })
 </script>

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -200,7 +200,11 @@
       </div>
     </template>
     <template #secondary>
-      <RealtimeLog :title="$t('socketio.log')" :log="log" />
+      <RealtimeLog
+        :title="$t('socketio.log')"
+        :log="log"
+        @delete="clearLogEntries()"
+      />
     </template>
     <template #sidebar>
       <div class="flex items-center justify-between p-4">
@@ -389,7 +393,8 @@ export default defineComponent({
         {
           payload: this.$t("state.connecting_to", { name: this.url }),
           source: "info",
-          color: "var(--accent-color)",
+          event: "connecting",
+          ts: Date.now(),
         },
       ]
 
@@ -418,8 +423,8 @@ export default defineComponent({
             {
               payload: this.$t("state.connected_to", { name: this.url }),
               source: "info",
-              color: "var(--accent-color)",
+              event: "connected",
-              ts: new Date().toLocaleTimeString(),
+              ts: Date.now(),
             },
           ]
           this.$toast.success(this.$t("state.connected"))
@@ -429,7 +434,7 @@ export default defineComponent({
           addSIOLogLine({
             payload: `[${eventName}] ${message ? JSON.stringify(message) : ""}`,
             source: "server",
-            ts: new Date().toLocaleTimeString(),
+            ts: Date.now(),
           })
         })
         this.io.on("connect_error", (error) => {
@@ -446,9 +451,9 @@ export default defineComponent({
           this.connectionState = false
           addSIOLogLine({
             payload: this.$t("state.disconnected_from", { name: this.url }),
-            source: "info",
+            source: "disconnected",
-            color: "#ff5555",
+            event: "disconnected",
-            ts: new Date().toLocaleTimeString(),
+            ts: Date.now(),
           })
           this.$toast.error(this.$t("state.disconnected"))
         })
@@ -471,15 +476,15 @@ export default defineComponent({
       addSIOLogLine({
         payload: this.$t("error.something_went_wrong"),
         source: "info",
-        color: "#ff5555",
+        event: "error",
-        ts: new Date().toLocaleTimeString(),
+        ts: Date.now(),
       })
       if (error !== null)
         addSIOLogLine({
           payload: error,
           source: "info",
-          color: "#ff5555",
+          event: "error",
-          ts: new Date().toLocaleTimeString(),
+          ts: Date.now(),
         })
     },
     sendMessage() {
@@ -500,14 +505,14 @@ export default defineComponent({
           addSIOLogLine({
             payload: `[${eventName}] ${JSON.stringify(data)}`,
             source: "server",
-            ts: new Date().toLocaleTimeString(),
+            ts: Date.now(),
           })
         })
 
         addSIOLogLine({
           payload: `[${eventName}] ${JSON.stringify(messages)}`,
           source: "client",
-          ts: new Date().toLocaleTimeString(),
+          ts: Date.now(),
         })
         this.communication.inputs = [""]
       }
@@ -516,6 +521,9 @@ export default defineComponent({
       this.clientVersion = version
       this.$refs.versionOptions.tippy().hide()
     },
+    clearLogEntries() {
+      this.log = []
+    },
   },
 })
 </script>

packages/hoppscotch-app/components/realtime/Sse.vue

@@ -47,7 +47,11 @@
       </div>
     </template>
     <template #secondary>
-      <RealtimeLog :title="$t('sse.log')" :log="log" />
+      <RealtimeLog
+        :title="$t('sse.log')"
+        :log="log"
+        @delete="clearLogEntries()"
+      />
     </template>
   </AppPaneLayout>
 </template>
@@ -136,7 +140,8 @@ export default defineComponent({
         {
           payload: this.$t("state.connecting_to", { name: this.server }),
           source: "info",
-          color: "var(--accent-color)",
+          event: "connecting",
+          ts: Date.now(),
         },
       ]
       if (typeof EventSource !== "undefined") {
@@ -149,8 +154,8 @@ export default defineComponent({
               {
                 payload: this.$t("state.connected_to", { name: this.server }),
                 source: "info",
-                color: "var(--accent-color)",
+                event: "connected",
-                ts: new Date().toLocaleTimeString(),
+                ts: Date.now(),
               },
             ]
             this.$toast.success(this.$t("state.connected"))
@@ -164,9 +169,9 @@ export default defineComponent({
               payload: this.$t("state.disconnected_from", {
                 name: this.server,
               }),
-              source: "info",
+              source: "disconnected",
-              color: "#ff5555",
+              event: "disconnected",
-              ts: new Date().toLocaleTimeString(),
+              ts: Date.now(),
             })
             this.$toast.error(this.$t("state.disconnected"))
           }
@@ -174,7 +179,7 @@ export default defineComponent({
             addSSELogLine({
               payload: data,
               source: "server",
-              ts: new Date().toLocaleTimeString(),
+              ts: Date.now(),
             })
           })
         } catch (e) {
@@ -185,9 +190,9 @@ export default defineComponent({
         this.log = [
           {
             payload: this.$t("error.browser_support_sse"),
-            source: "info",
+            source: "disconnected",
-            color: "#ff5555",
+            event: "error",
-            ts: new Date().toLocaleTimeString(),
+            ts: Date.now(),
           },
         ]
       }
@@ -201,22 +206,25 @@ export default defineComponent({
       this.connectionSSEState = false
       addSSELogLine({
         payload: this.$t("error.something_went_wrong"),
-        source: "info",
+        source: "disconnected",
-        color: "#ff5555",
+        event: "error",
-        ts: new Date().toLocaleTimeString(),
+        ts: Date.now(),
       })
       if (error !== null)
         addSSELogLine({
           payload: error,
-          source: "info",
+          source: "disconnected",
-          color: "#ff5555",
+          event: "error",
-          ts: new Date().toLocaleTimeString(),
+          ts: Date.now(),
         })
     },
     stop() {
       this.sse.close()
       this.sse.onclose()
     },
+    clearLogEntries() {
+      this.log = []
+    },
   },
 })
 </script>

packages/hoppscotch-app/components/realtime/Websocket.vue

@@ -137,22 +137,23 @@
           class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
           :alt="$t('empty.protocols')"
         />
-        <span class="mb-4 text-center">
+        <span class="mb-4 text-center">{{ $t("empty.protocols") }}</span>
-          {{ $t("empty.protocols") }}
-        </span>
       </div>
     </template>
     <template #secondary>
-      <RealtimeLog :title="$t('websocket.log')" :log="log" />
+      <RealtimeLog
+        :title="$t('websocket.log')"
+        :log="log"
+        @delete="clearLogEntries()"
+      />
     </template>
     <template #sidebar>
       <div class="flex items-center justify-between p-4">
         <label
           for="websocket-message"
           class="font-semibold text-secondaryLight"
+          >{{ $t("websocket.communication") }}</label
         >
-          {{ $t("websocket.communication") }}
-        </label>
       </div>
       <div class="flex px-4 space-x-2">
         <input
@@ -285,12 +286,16 @@ export default defineComponent({
       // Otherwise, it's disconnecting.
       else return this.disconnect()
     },
+    clearLogEntries() {
+      this.log = []
+    },
     connect() {
       this.log = [
         {
           payload: this.$t("state.connecting_to", { name: this.url }),
           source: "info",
-          color: "var(--accent-color)",
+          event: "connecting",
+          ts: Date.now(),
         },
       ]
       try {
@@ -303,8 +308,8 @@ export default defineComponent({
             {
               payload: this.$t("state.connected_to", { name: this.url }),
               source: "info",
-              color: "var(--accent-color)",
+              event: "connected",
-              ts: new Date().toLocaleTimeString(),
+              ts: Date.now(),
             },
           ]
           this.$toast.success(this.$t("state.connected"))
@@ -316,9 +321,9 @@ export default defineComponent({
           this.connectionState = false
           addWSLogLine({
             payload: this.$t("state.disconnected_from", { name: this.url }),
-            source: "info",
+            source: "disconnected",
-            color: "#ff5555",
+            event: "disconnected",
-            ts: new Date().toLocaleTimeString(),
+            ts: Date.now(),
           })
           this.$toast.error(this.$t("state.disconnected"))
         }
@@ -326,7 +331,7 @@ export default defineComponent({
           addWSLogLine({
             payload: data,
             source: "server",
-            ts: new Date().toLocaleTimeString(),
+            ts: Date.now(),
           })
         }
       } catch (e) {
@@ -351,15 +356,15 @@ export default defineComponent({
       addWSLogLine({
         payload: this.$t("error.something_went_wrong"),
         source: "info",
-        color: "#ff5555",
+        event: "error",
-        ts: new Date().toLocaleTimeString(),
+        ts: Date.now(),
       })
       if (error !== null)
         addWSLogLine({
           payload: error,
           source: "info",
-          color: "#ff5555",
+          event: "error",
-          ts: new Date().toLocaleTimeString(),
+          ts: Date.now(),
         })
     },
     sendMessage() {
@@ -368,7 +373,7 @@ export default defineComponent({
       addWSLogLine({
         payload: message,
         source: "client",
-        ts: new Date().toLocaleTimeString(),
+        ts: Date.now(),
       })
       this.communication.input = ""
     },

packages/hoppscotch-app/helpers/functional/json.ts

@@ -1,4 +1,5 @@
 import * as O from "fp-ts/Option"
+import { flow } from "fp-ts/function"
 
 /**
  * Checks and Parses JSON string
@@ -7,3 +8,10 @@ import * as O from "fp-ts/Option"
  */
 export const safeParseJSON = (str: string): O.Option<object> =>
   O.tryCatch(() => JSON.parse(str))
+
+/**
+ * Checks if given string is a JSON string
+ * @param str Raw string to be checked
+ * @returns If string is a JSON string
+ */
+export const isJSON = flow(safeParseJSON, O.isSome)

packages/hoppscotch-app/helpers/utils/string.ts

@@ -1,12 +0,0 @@
-const sourceEmojis = {
-  // Source used for info messages.
-  info: "\tℹ️ [INFO]:\t",
-  // Source used for client to server messages.
-  client: "\t⬅️ [SENT]:\t",
-  // Source used for server to client messages.
-  server: "\t➡️ [RECEIVED]:\t",
-}
-
-export function getSourcePrefix(source: keyof typeof sourceEmojis) {
-  return sourceEmojis[source]
-}

packages/hoppscotch-app/locales/en.json

@@ -1,5 +1,6 @@
 {
   "action": {
+    "autoscroll": "Autoscroll",
     "cancel": "Cancel",
     "choose_file": "Choose a file",
     "clear": "Clear",
@@ -25,6 +26,8 @@
     "remove": "Remove",
     "restore": "Restore",
     "save": "Save",
+    "scroll_to_bottom": "Scroll to bottom",
+    "scroll_to_top": "Scroll to top",
     "search": "Search",
     "send": "Send",
     "start": "Start",

pnpm-lock.yaml

@@ -3604,7 +3604,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       callsites: 3.1.0
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       source-map: 0.6.1
     dev: true
 
@@ -3623,7 +3623,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@jest/test-result': 27.5.1
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       jest-haste-map: 27.5.1
       jest-runtime: 27.5.1
     transitivePeerDependencies:
@@ -3919,11 +3919,11 @@ packages:
       ufo: 0.7.11
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-rc.2-27525415.a8d42d5:
+  /@nuxt/kit-edge/3.0.0-rc.2-27530889.9e5a3cd:
-    resolution: {integrity: sha512-WfUj777D53SWprNmghE2JcgS/IAeU/NBLTsgJQf8EZG/GFjM62w/YCiY3zGcyVMsxHBSgnE9VUv5RZ5Gl8Os/A==}
+    resolution: {integrity: sha512-D/Fm/7igO3/GE+5S8528frpJT25V+i4Y8ZcZ4MuO0i6karl4whwcSDkVOmrZBCtLa0IG+FD2f/6E4JJaB0BBHQ==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
-      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.2-27525415.a8d42d5
+      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.2-27530889.9e5a3cd
       c12: 0.2.7
       consola: 2.15.3
       defu: 6.0.0
@@ -3934,7 +3934,7 @@ packages:
       knitwork: 0.1.1
       lodash.template: 4.5.0
       mlly: 0.5.2
-      pathe: 0.2.0
+      pathe: 0.3.0
       pkg-types: 0.3.2
       scule: 0.2.1
       semver: 7.3.7
@@ -3971,19 +3971,19 @@ packages:
       - encoding
     dev: false
 
-  /@nuxt/schema-edge/3.0.0-rc.2-27525415.a8d42d5:
+  /@nuxt/schema-edge/3.0.0-rc.2-27530889.9e5a3cd:
-    resolution: {integrity: sha512-CrERM3lg+TXjBToAI/XmfLdJbGoQU600iUhZR9VIbUpNqq+nFPnIw1DxS6XioyBq/4rh/GmaHC+LxZFxNkigCA==}
+    resolution: {integrity: sha512-Ac8bXC8nXYZKGJPLIMPKZwA5i7X/oaWGeSIJ5zruUt9XwLRP2BOgOTTrM+vy/KK44pWeweCgZkYMM6CD/XewBw==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
       c12: 0.2.7
       create-require: 1.1.1
       defu: 6.0.0
       jiti: 1.13.0
-      pathe: 0.2.0
+      pathe: 0.3.0
       postcss-import-resolver: 2.0.0
       scule: 0.2.1
       std-env: 3.1.1
-      ufo: 0.8.3
+      ufo: 0.8.4
       unimport: 0.1.8
     transitivePeerDependencies:
       - esbuild
@@ -12606,7 +12606,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@types/node': 17.0.24
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
     dev: true
 
   /jest-snapshot/27.5.1:
@@ -12887,7 +12887,7 @@ packages:
     resolution: {integrity: sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==}
     hasBin: true
     dependencies:
-      minimist: 1.2.5
+      minimist: 1.2.6
 
   /json5/2.2.1:
     resolution: {integrity: sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==}
@@ -13931,7 +13931,8 @@ packages:
     resolution: {integrity: sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==}
     hasBin: true
     dependencies:
-      minimist: 1.2.5
+      minimist: 1.2.6
+    dev: false
 
   /mkdirp/0.5.6:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
@@ -14324,7 +14325,7 @@ packages:
   /nuxt-windicss/2.2.11:
     resolution: {integrity: sha512-xobq725D6vqpIgYOrLJ6CVlR4xLlFGwuq//gZikXKOdoVRpoK8C+NpHazPd4+f17urGQ4H0LqGBCIujTvV1V0g==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.2-27525415.a8d42d5
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.2-27530889.9e5a3cd
       '@windicss/plugin-utils': 1.8.4
       consola: 2.15.3
       defu: 6.0.0
@@ -14848,6 +14849,10 @@ packages:
     resolution: {integrity: sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==}
     dev: true
 
+  /pathe/0.3.0:
+    resolution: {integrity: sha512-3vUjp552BJzCw9vqKsO5sttHkbYqqsZtH0x1PNtItgqx8BXEXzoY1SYRKcL6BTyVh4lGJGLj0tM42elUDMvcYA==}
+    dev: true
+
   /pause-stream/0.0.11:
     resolution: {integrity: sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=}
     dependencies:
@@ -17808,7 +17813,7 @@ packages:
       css-tree: 1.0.0-alpha.37
       csso: 4.2.0
       js-yaml: 3.14.1
-      mkdirp: 0.5.5
+      mkdirp: 0.5.6
       object.values: 1.1.5
       sax: 1.2.4
       stable: 0.1.8
@@ -18519,6 +18524,10 @@ packages:
   /ufo/0.8.3:
     resolution: {integrity: sha512-AIkk06G21y/P+NCatfU+1qldCmI0XCszZLn8AkuKotffF3eqCvlce0KuwM7ZemLE/my0GSYADOAeM5zDYWMB+A==}
 
+  /ufo/0.8.4:
+    resolution: {integrity: sha512-/+BmBDe8GvlB2nIflWasLLAInjYG0bC9HRnfEpNi4sw77J2AJNnEVnTDReVrehoh825+Q/evF3THXTAweyam2g==}
+    dev: true
+
   /uglify-js/3.14.3:
     resolution: {integrity: sha512-mic3aOdiq01DuSVx0TseaEzMIVqebMZ0Z3vaeDhFEh9bsc24hV1TFvN74reA2vs08D0ZWfNjAcJ3UbVLaBss+g==}
     engines: {node: '>=0.8.0'}