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/controllers/super_admin/application_controller.rb

@@ -5,6 +5,10 @@
 # If you want to add pagination or other controller-level concerns,
 # you're free to overwrite the RESTful controller actions.
 class SuperAdmin::ApplicationController < Administrate::ApplicationController
+  include ActionView::Helpers::TagHelper
+  include ActionView::Context
+
+  helper_method :render_vue_component
   # authenticiation done via devise : SuperAdmin Model
   before_action :authenticate_super_admin!
 
@@ -23,6 +27,17 @@ class SuperAdmin::ApplicationController < Administrate::ApplicationController
 
   private
 
+  def render_vue_component(component_name, props = {})
+    html_options = {
+      id: 'app',
+      data: {
+        component_name: component_name,
+        props: props.to_json
+      }
+    }
+    content_tag(:div, '', html_options)
+  end
+
   def invalid_action_perfomed
     # rubocop:disable Rails/I18nLocaleTexts
     flash[:error] = 'Invalid action performed'

app/javascript/packs/superadmin_pages.js

@@ -1 +1,28 @@
 import 'chart.js';
+import Vue from 'vue';
+import VueDOMPurifyHTML from 'vue-dompurify-html';
+Vue.use(VueDOMPurifyHTML);
+
+const PlaygroundIndex = () =>
+  import('../superadmin_pages/views/playground/Index.vue');
+
+const ComponentMapping = {
+  PlaygroundIndex: PlaygroundIndex,
+};
+
+const renderComponent = (componentName, props) => {
+  Vue.component(componentName, ComponentMapping[componentName]);
+  new Vue({
+    data: { props: props },
+    template: `<${componentName} :component-data="props"/>`,
+  }).$mount('#app');
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  const element = document.getElementById('app');
+  if (element) {
+    const componentName = element.dataset.componentName;
+    const props = JSON.parse(element.dataset.props);
+    renderComponent(componentName, props);
+  }
+});

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>

app/javascript/superadmin_pages/views/playground/Index.vue

@@ -0,0 +1,139 @@
+<template>
+  <section class="h-full w-full flex flex-col bg-slate-25">
+    <PlaygroundHeader
+      :response-source-name="componentData.responseSourceName"
+      :response-source-path="componentData.responseSourcePath"
+    />
+    <div ref="chatContainer" class="flex-1 overflow-auto px-8 py-4">
+      <div
+        v-for="message in messages"
+        :id="`message-${message.id}`"
+        :key="message.id"
+      >
+        <UserMessage
+          v-if="message.type === 'User'"
+          :message="formatMessage(message.content)"
+        />
+        <BotMessage v-else :message="formatMessage(message.content)" />
+      </div>
+      <TypingIndicator v-if="isWaiting" />
+    </div>
+    <div class="w-full px-8 py-6">
+      <textarea
+        ref="messageInput"
+        v-model="messageContent"
+        :rows="4"
+        class="resize-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border !outline-2 border-slate-100 focus:ring-woot-500 focus:border-woot-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-woot-500 dark:focus:border-woot-500"
+        placeholder="Type a message... [CMD/CTRL + Enter to send]"
+        autofocus
+        autocomplete="off"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import Header from '../../components/playground/Header.vue';
+import UserMessage from '../../components/playground/UserMessage.vue';
+import BotMessage from '../../components/playground/BotMessage.vue';
+import TypingIndicator from '../../components/playground/TypingIndicator.vue';
+
+export default {
+  components: {
+    PlaygroundHeader: Header,
+    UserMessage,
+    BotMessage,
+    TypingIndicator,
+  },
+  mixins: [messageFormatterMixin],
+  props: {
+    componentData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return { messages: [], messageContent: '', isWaiting: false };
+  },
+  computed: {
+    previousMessages() {
+      return this.messages.map(message => ({
+        type: message.type,
+        message: message.content,
+      }));
+    },
+  },
+  mounted() {
+    this.focusInput();
+    document.addEventListener('keydown', this.handleKeyEvents);
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleKeyEvents);
+  },
+  methods: {
+    handleKeyEvents(e) {
+      const keyCode = buildHotKeys(e);
+      if (['meta+enter', 'ctrl+enter'].includes(keyCode)) {
+        this.onMessageSend();
+      }
+    },
+    focusInput() {
+      this.$refs.messageInput.focus();
+    },
+    onMessageSend() {
+      this.addMessageToData('User', this.messageContent);
+      this.sendMessageToServer(this.messageContent);
+    },
+    scrollToLastMessage() {
+      this.$nextTick(() => {
+        const messageId = this.messages[this.messages.length - 1].id;
+        const messageElement = document.getElementById(`message-${messageId}`);
+        messageElement.scrollIntoView({ behavior: 'smooth' });
+      });
+    },
+    addMessageToData(type, content) {
+      this.messages.push({ id: this.messages.length, type, content });
+      this.scrollToLastMessage();
+    },
+    async sendMessageToServer(messageContent) {
+      this.messageContent = '';
+      this.isWaiting = true;
+      const csrfToken = document
+        .querySelector('meta[name="csrf-token"]')
+        .getAttribute('content');
+
+      try {
+        const response = await fetch(window.location.href, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': csrfToken,
+          },
+          body: JSON.stringify({
+            message: messageContent,
+            previous_messages: this.previousMessages,
+          }),
+          credentials: 'include',
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const { message } = await response.json();
+        this.addMessageToData('Bot', message);
+      } catch (error) {
+        this.addMessageToData(
+          'bot',
+          'Error: Could not retrieve response. Please check the console for more details.'
+        );
+      } finally {
+        this.isWaiting = false;
+        this.focusInput();
+      }
+    },
+  },
+};
+</script>

app/views/super_admin/accounts/show.html.erb

@@ -25,7 +25,7 @@ as well as a link to its edit page.
 
   <div>
     <%= link_to(
-      t("administrate.actions.edit_resource", name: page.page_title),
+      "Edit",
       [:edit, namespace, page.resource],
       class: "button",
     ) if accessible_action?(page.resource, :edit) %>

app/views/super_admin/application/show.html.erb

@@ -0,0 +1,65 @@
+<%#
+# Show
+
+This view is the template for the show page.
+It renders the attributes of a resource,
+as well as a link to its edit page.
+
+## Local variables:
+
+- `page`:
+  An instance of [Administrate::Page::Show][1].
+  Contains methods for accessing the resource to be displayed on the page,
+  as well as helpers for describing how each attribute of the resource
+  should be displayed.
+
+[1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Show
+%>
+
+<% content_for(:title) { t("administrate.actions.show_resource", name: page.page_title) } %>
+
+<header class="main-content__header">
+  <h1 class="main-content__page-title">
+    <%= content_for(:title) %>
+  </h1>
+
+  <div>
+    <%= link_to(
+      "Edit",
+      [:edit, namespace, page.resource],
+      class: "button",
+    ) if accessible_action?(page.resource, :edit) %>
+
+    <%= link_to(
+      t("administrate.actions.destroy"),
+      [namespace, page.resource],
+      class: "button button--danger",
+      method: :delete,
+      data: { confirm: t("administrate.actions.confirm") }
+    ) if accessible_action?(page.resource, :destroy) %>
+  </div>
+</header>
+
+<section class="main-content__body">
+  <dl>
+    <% page.attributes.each do |title, attributes| %>
+      <fieldset class="<%= "field-unit--nested" if title.present? %>">
+        <% if title.present? %>
+          <legend><%= t "helpers.label.#{page.resource_name}.#{title}", default: title %></legend>
+        <% end %>
+
+        <% attributes.each do |attribute| %>
+          <dt class="attribute-label" id="<%= attribute.name %>">
+          <%= t(
+            "helpers.label.#{resource_name}.#{attribute.name}",
+            default: page.resource.class.human_attribute_name(attribute.name),
+          ) %>
+          </dt>
+
+          <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
+              ><%= render_field attribute, page: page %></dd>
+        <% end %>
+      </fieldset>
+    <% end %>
+  </dl>
+</section>

app/views/super_admin/users/show.html.erb

@@ -25,10 +25,10 @@ as well as a link to its edit page.
 
   <div>
     <%= link_to(
-      t("administrate.actions.edit_resource", name: page.page_title),
-      [:edit, namespace, page.resource],
-      class: "button",
-    ) if accessible_action?(:edit, page.resource) %>
+            t("administrate.actions.edit"),
+            [:edit, namespace,  page.resource.becomes(User)],
+            class: "button",
+          ) if authorized_action? page.resource, :edit %>
   </div>
 </header>