feat: Allow customizing the responses, flows in Captain (#11385)

- Ability to provide custom instructions to captain

<img width="1107" alt="Screenshot 2025-04-28 at 6 11 43 PM"
src="https://github.com/user-attachments/assets/f94cbccc-b4d8-48fd-b6b9-55524129bc50"
/>

app/javascript/dashboard/components-next/Accordion/Accordion.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  title: { type: String, required: true },
+  isOpen: { type: Boolean, default: false },
+});
+
+const isExpanded = ref(props.isOpen);
+
+const toggleAccordion = () => {
+  isExpanded.value = !isExpanded.value;
+};
+
+watch(
+  () => props.isOpen,
+  newValue => {
+    isExpanded.value = newValue;
+  }
+);
+</script>
+
+<template>
+  <div class="border rounded-lg border-n-slate-4">
+    <button
+      class="flex items-center justify-between w-full p-4 text-left"
+      @click="toggleAccordion"
+    >
+      <span class="text-sm font-medium text-n-slate-12">{{ title }}</span>
+      <span
+        class="w-5 h-5 transition-transform duration-200 i-lucide-chevron-down"
+        :class="{ 'rotate-180': isExpanded }"
+      />
+    </button>
+    <div v-if="isExpanded" class="p-4 pt-0">
+      <slot />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/PageLayout.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { usePolicy } from 'dashboard/composables/usePolicy';
 import Button from 'dashboard/components-next/button/Button.vue';
+import BackButton from 'dashboard/components/widgets/BackButton.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import Policy from 'dashboard/components/policy.vue';
@@ -23,6 +24,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  backUrl: {
+    type: [String, Object],
+    default: '',
+  },
   buttonPolicy: {
     type: Array,
     default: () => [],
@@ -39,6 +44,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  showKnowMore: {
+    type: Boolean,
+    default: true,
+  },
   isEmpty: {
     type: Boolean,
     default: false,
@@ -73,19 +82,23 @@ const handlePageChange = event => {
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
         >
           <div class="flex gap-4 items-center">
+            <BackButton v-if="backUrl" :to="backUrl" />
             <slot name="headerTitle">
               <span class="text-xl font-medium text-n-slate-12">
                 {{ headerTitle }}
               </span>
             </slot>
-            <div v-if="!isEmpty" class="flex items-center gap-2">
+            <div
+              v-if="!isEmpty && showKnowMore"
+              class="flex items-center gap-2"
+            >
               <div class="w-0.5 h-4 rounded-2xl bg-n-weak" />
               <slot name="knowMore" />
             </div>
           </div>
 
           <div
-            v-if="!showPaywall"
+            v-if="!showPaywall && buttonLabel"
             v-on-clickaway="() => emit('close')"
             class="relative group/campaign-button"
           >
@@ -104,7 +117,7 @@ const handlePageChange = event => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto xl:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-4">
+      <div class="w-full max-w-[60rem] h-full mx-auto py-4">
         <slot v-if="!showPaywall" name="controls" />
         <div
           v-if="isFetching"

app/javascript/dashboard/components-next/captain/assistant/AssistantCard.vue

@@ -76,9 +76,12 @@ const handleAction = ({ action, value }) => {
 <template>
   <CardLayout>
     <div class="flex justify-between w-full gap-1">
-      <span class="text-base text-n-slate-12 line-clamp-1">
+      <router-link
+        :to="{ name: 'captain_assistants_edit', params: { assistantId: id } }"
+        class="text-base text-n-slate-12 line-clamp-1 hover:underline transition-colors"
+      >
         {{ name }}
-      </span>
+      </router-link>
       <div class="flex items-center gap-2">
         <div
           v-on-clickaway="() => toggleDropdown(false)"

app/javascript/dashboard/components-next/captain/assistant/AssistantPlayground.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import MessageList from './MessageList.vue';
+import CaptainAssistant from 'dashboard/api/captain/assistant';
+
+const { assistantId } = defineProps({
+  assistantId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+const messages = ref([]);
+const newMessage = ref('');
+const isLoading = ref(false);
+
+const formatMessagesForApi = () => {
+  return messages.value.map(message => ({
+    role: message.sender,
+    content: message.content,
+  }));
+};
+
+const resetConversation = () => {
+  messages.value = [];
+  newMessage.value = '';
+};
+
+const sendMessage = async () => {
+  if (!newMessage.value.trim() || isLoading.value) return;
+
+  const userMessage = {
+    content: newMessage.value,
+    sender: 'user',
+    timestamp: new Date().toISOString(),
+  };
+  messages.value.push(userMessage);
+  const currentMessage = newMessage.value;
+  newMessage.value = '';
+
+  try {
+    isLoading.value = true;
+    const { data } = await CaptainAssistant.playground({
+      assistantId,
+      messageContent: currentMessage,
+      messageHistory: formatMessagesForApi(),
+    });
+
+    messages.value.push({
+      content: data.response,
+      sender: 'assistant',
+      timestamp: new Date().toISOString(),
+    });
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Error getting assistant response:', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col h-full rounded-lg p-4 border border-n-slate-4 text-n-slate-11"
+  >
+    <div class="mb-4">
+      <div class="flex justify-between items-center mb-1">
+        <h3 class="text-lg font-medium">
+          {{ t('CAPTAIN.PLAYGROUND.HEADER') }}
+        </h3>
+        <NextButton
+          ghost
+          size="small"
+          icon="i-lucide-rotate-ccw"
+          @click="resetConversation"
+        />
+      </div>
+      <p class="text-sm text-n-slate-11">
+        {{ t('CAPTAIN.PLAYGROUND.DESCRIPTION') }}
+      </p>
+    </div>
+
+    <MessageList :messages="messages" :is-loading="isLoading" />
+
+    <div
+      class="flex items-center bg-n-solid-1 outline outline-n-container rounded-lg p-3"
+    >
+      <input
+        v-model="newMessage"
+        class="flex-1 bg-transparent border-none focus:outline-none text-sm mb-0"
+        :placeholder="t('CAPTAIN.PLAYGROUND.MESSAGE_PLACEHOLDER')"
+        @keyup.enter="sendMessage"
+      />
+      <NextButton
+        ghost
+        size="small"
+        :disabled="!newMessage.trim()"
+        icon="i-lucide-send"
+        @click="sendMessage"
+      />
+    </div>
+
+    <p class="text-xs text-n-slate-11 pt-2 text-center">
+      {{ t('CAPTAIN.PLAYGROUND.CREDIT_NOTE') }}
+    </p>
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/assistant/MessageList.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { ref, watch, nextTick } from 'vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+
+const props = defineProps({
+  messages: {
+    type: Array,
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const messageContainer = ref(null);
+
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+
+const isUserMessage = sender => sender === 'user';
+
+const getMessageAlignment = sender =>
+  isUserMessage(sender) ? 'justify-end' : 'justify-start';
+
+const getMessageDirection = sender =>
+  isUserMessage(sender) ? 'flex-row-reverse' : 'flex-row';
+
+const getAvatarName = sender =>
+  isUserMessage(sender)
+    ? t('CAPTAIN.PLAYGROUND.USER')
+    : t('CAPTAIN.PLAYGROUND.ASSISTANT');
+
+const getMessageStyle = sender =>
+  isUserMessage(sender)
+    ? 'bg-n-strong text-n-white'
+    : 'bg-n-solid-iris text-n-slate-12';
+
+const scrollToBottom = async () => {
+  await nextTick();
+  if (messageContainer.value) {
+    messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
+  }
+};
+
+watch(() => props.messages.length, scrollToBottom);
+</script>
+
+<template>
+  <div ref="messageContainer" class="flex-1 overflow-y-auto mb-4 space-y-2">
+    <div
+      v-for="(message, index) in messages"
+      :key="index"
+      class="flex"
+      :class="getMessageAlignment(message.sender)"
+    >
+      <div
+        class="flex items-start gap-1.5"
+        :class="getMessageDirection(message.sender)"
+      >
+        <Avatar :name="getAvatarName(message.sender)" rounded-full :size="24" />
+        <div
+          class="max-w-[80%] rounded-lg p-3 text-sm"
+          :class="getMessageStyle(message.sender)"
+        >
+          <div v-html="formatMessage(message.content)" />
+        </div>
+      </div>
+    </div>
+    <div v-if="isLoading" class="flex justify-start">
+      <div class="flex items-start gap-1.5">
+        <Avatar :name="getAvatarName('assistant')" rounded-full :size="24" />
+        <div
+          class="max-w-sm rounded-lg p-3 text-sm bg-n-solid-iris text-n-slate-12"
+        >
+          <div class="flex gap-1">
+            <div class="w-2 h-2 rounded-full bg-n-iris-10 animate-bounce" />
+            <div
+              class="w-2 h-2 rounded-full bg-n-iris-10 animate-bounce [animation-delay:0.2s]"
+            />
+            <div
+              class="w-2 h-2 rounded-full bg-n-iris-10 animate-bounce [animation-delay:0.4s]"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/assistant/EditAssistantForm.vue

@@ -0,0 +1,306 @@
+<script setup>
+import { reactive, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import Accordion from 'dashboard/components-next/Accordion/Accordion.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  assistant: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['submit']);
+
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainAssistants/getUIFlags'),
+};
+
+const initialState = {
+  name: '',
+  description: '',
+  productName: '',
+  welcomeMessage: '',
+  handoffMessage: '',
+  resolutionMessage: '',
+  instructions: '',
+  features: {
+    conversationFaqs: false,
+    memories: false,
+  },
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  name: { required, minLength: minLength(1) },
+  description: { required, minLength: minLength(1) },
+  productName: { required, minLength: minLength(1) },
+  welcomeMessage: { minLength: minLength(1) },
+  handoffMessage: { minLength: minLength(1) },
+  resolutionMessage: { minLength: minLength(1) },
+  instructions: { minLength: minLength(1) },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() => formState.uiFlags.value.creatingItem);
+
+const getErrorMessage = field => {
+  return v$.value[field].$error ? v$.value[field].$errors[0].$message : '';
+};
+
+const formErrors = computed(() => ({
+  name: getErrorMessage('name'),
+  description: getErrorMessage('description'),
+  productName: getErrorMessage('productName'),
+  welcomeMessage: getErrorMessage('welcomeMessage'),
+  handoffMessage: getErrorMessage('handoffMessage'),
+  resolutionMessage: getErrorMessage('resolutionMessage'),
+  instructions: getErrorMessage('instructions'),
+}));
+
+const updateStateFromAssistant = assistant => {
+  const { config = {} } = assistant;
+  state.name = assistant.name;
+  state.description = assistant.description;
+  state.productName = config.product_name;
+  state.welcomeMessage = config.welcome_message;
+  state.handoffMessage = config.handoff_message;
+  state.resolutionMessage = config.resolution_message;
+  state.instructions = config.instructions;
+  state.features = {
+    conversationFaqs: config.feature_faq || false,
+    memories: config.feature_memory || false,
+  };
+};
+
+const handleBasicInfoUpdate = async () => {
+  const result = await Promise.all([
+    v$.value.name.$validate(),
+    v$.value.description.$validate(),
+    v$.value.productName.$validate(),
+  ]).then(results => results.every(Boolean));
+  if (!result) return;
+
+  const payload = {
+    name: state.name,
+    description: state.description,
+    product_name: state.productName,
+  };
+
+  emit('submit', payload);
+};
+
+const handleSystemMessagesUpdate = async () => {
+  const result = await Promise.all([
+    v$.value.welcomeMessage.$validate(),
+    v$.value.handoffMessage.$validate(),
+    v$.value.resolutionMessage.$validate(),
+  ]).then(results => results.every(Boolean));
+  if (!result) return;
+
+  const payload = {
+    config: {
+      ...props.assistant.config,
+      welcome_message: state.welcomeMessage,
+      handoff_message: state.handoffMessage,
+      resolution_message: state.resolutionMessage,
+    },
+  };
+
+  emit('submit', payload);
+};
+
+const handleInstructionsUpdate = async () => {
+  const result = await v$.value.instructions.$validate();
+  if (!result) return;
+
+  const payload = {
+    config: {
+      ...props.assistant.config,
+      instructions: state.instructions,
+    },
+  };
+
+  emit('submit', payload);
+};
+
+const handleFeaturesUpdate = () => {
+  const payload = {
+    config: {
+      ...props.assistant.config,
+      feature_faq: state.features.conversationFaqs,
+      feature_memory: state.features.memories,
+    },
+  };
+
+  emit('submit', payload);
+};
+
+watch(
+  () => props.assistant,
+  newAssistant => {
+    if (props.mode === 'edit' && newAssistant) {
+      updateStateFromAssistant(newAssistant);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <!-- Basic Information Section -->
+    <Accordion
+      :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.BASIC_INFO')"
+      is-open
+    >
+      <div class="flex flex-col gap-4 pt-4">
+        <Input
+          v-model="state.name"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.NAME.LABEL')"
+          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.NAME.PLACEHOLDER')"
+          :message="formErrors.name"
+          :message-type="formErrors.name ? 'error' : 'info'"
+        />
+
+        <Editor
+          v-model="state.description"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.LABEL')"
+          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.PLACEHOLDER')"
+          :message="formErrors.description"
+          :message-type="formErrors.description ? 'error' : 'info'"
+        />
+
+        <Input
+          v-model="state.productName"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.LABEL')"
+          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.PLACEHOLDER')"
+          :message="formErrors.productName"
+          :message-type="formErrors.productName ? 'error' : 'info'"
+        />
+
+        <div class="flex justify-end">
+          <Button
+            size="small"
+            :loading="isLoading"
+            @click="handleBasicInfoUpdate"
+          >
+            {{ t('CAPTAIN.ASSISTANTS.FORM.UPDATE') }}
+          </Button>
+        </div>
+      </div>
+    </Accordion>
+
+    <!-- Instructions Section -->
+    <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.INSTRUCTIONS')">
+      <div class="flex flex-col gap-4 pt-4">
+        <Editor
+          v-model="state.instructions"
+          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.INSTRUCTIONS.PLACEHOLDER')"
+          :message="formErrors.instructions"
+          :max-length="2000"
+          :message-type="formErrors.instructions ? 'error' : 'info'"
+        />
+
+        <div class="flex justify-end">
+          <Button
+            size="small"
+            :loading="isLoading"
+            :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
+            @click="handleInstructionsUpdate"
+          />
+        </div>
+      </div>
+    </Accordion>
+
+    <!-- Greeting Messages Section -->
+    <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.SYSTEM_MESSAGES')">
+      <div class="flex flex-col gap-4 pt-4">
+        <Editor
+          v-model="state.handoffMessage"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.HANDOFF_MESSAGE.LABEL')"
+          :placeholder="
+            t('CAPTAIN.ASSISTANTS.FORM.HANDOFF_MESSAGE.PLACEHOLDER')
+          "
+          :message="formErrors.handoffMessage"
+          :message-type="formErrors.handoffMessage ? 'error' : 'info'"
+        />
+
+        <Editor
+          v-model="state.resolutionMessage"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.RESOLUTION_MESSAGE.LABEL')"
+          :placeholder="
+            t('CAPTAIN.ASSISTANTS.FORM.RESOLUTION_MESSAGE.PLACEHOLDER')
+          "
+          :message="formErrors.resolutionMessage"
+          :message-type="formErrors.resolutionMessage ? 'error' : 'info'"
+        />
+
+        <div class="flex justify-end">
+          <Button
+            size="small"
+            :loading="isLoading"
+            :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
+            @click="handleSystemMessagesUpdate"
+          />
+        </div>
+      </div>
+    </Accordion>
+
+    <!-- Features Section -->
+    <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.FEATURES')">
+      <div class="flex flex-col gap-4 pt-4">
+        <div class="flex flex-col gap-2">
+          <label class="text-sm font-medium text-n-slate-12">
+            {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.TITLE') }}
+          </label>
+          <div class="flex flex-col gap-2">
+            <label class="flex items-center gap-2">
+              <input
+                v-model="state.features.conversationFaqs"
+                type="checkbox"
+                class="form-checkbox"
+              />
+              {{
+                t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS')
+              }}
+            </label>
+            <label class="flex items-center gap-2">
+              <input
+                v-model="state.features.memories"
+                type="checkbox"
+                class="form-checkbox"
+              />
+              {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
+            </label>
+          </div>
+        </div>
+
+        <div class="flex justify-end">
+          <Button
+            size="small"
+            :loading="isLoading"
+            :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
+            @click="handleFeaturesUpdate"
+          />
+        </div>
+      </div>
+    </Accordion>
+  </form>
+</template>