feat: Interface to validate response_source (#8894)

- This PR adds a UI to validate the response source quality quickly. It also helps to test with sample questions and update responses in the database when missing.

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/superadmin_pages/components/playground/BotMessage.vue

@@ -0,0 +1,17 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="w-full mb-4 flex items-center justify-start">
+    <div
+      v-dompurify-html="message"
+      class="px-4 py-3 bg-white max-w-4xl text-slate-700 leading-6 text-sm rounded-md inline-block border border-slate-100"
+    />
+  </div>
+</template>

app/javascript/superadmin_pages/components/playground/Header.vue

@@ -0,0 +1,40 @@
+<script setup>
+defineProps({
+  responseSourcePath: {
+    type: String,
+    required: true,
+  },
+  responseSourceName: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <header
+    class="flex items-center px-8 py-4 bg-white border-b border-slate-100"
+    role="banner"
+  >
+    <a :href="responseSourcePath" class="text-woot-500 hover:underline mr-4">
+      Back
+    </a>
+    <div
+      class="border border-solid border-slate-100 text-slate-700 mr-4 p-2 rounded-full"
+    >
+      <svg width="24" height="24"><use xlink:href="#icon-mist-fill" /></svg>
+    </div>
+    <div class="flex flex-col h-14 justify-center">
+      <h1 id="page-title" class="text-base font-medium text-slate-900">
+        Robin AI playground
+      </h1>
+      <p class="text-sm text-slate-600">
+        Chat with the source
+        <span class="font-medium">
+          {{ responseSourceName }}
+        </span>
+        and evaluate it’s efficiency.
+      </p>
+    </div>
+  </header>
+</template>

app/javascript/superadmin_pages/components/playground/TypingIndicator.vue

@@ -0,0 +1,13 @@
+<script setup>
+import TypingIndicator from './assets/typing.gif';
+</script>
+
+<template>
+  <div class="w-full mb-4 flex items-center justify-start">
+    <div
+      class="px-2 py-2 bg-white max-w-4xl text-slate-700 leading-6 text-sm rounded-md inline-block border border-slate-100"
+    >
+      <img :src="TypingIndicator" alt="TypingIndicator" class="h-4" />
+    </div>
+  </div>
+</template>

app/javascript/superadmin_pages/components/playground/UserMessage.vue

@@ -0,0 +1,17 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="w-full mb-4 flex items-center justify-end">
+    <div
+      v-dompurify-html="message"
+      class="px-4 py-3 bg-woot-400 text-white text-sm rounded-md inline-block"
+    />
+  </div>
+</template>