feat: New Scenarios page (#11975)

2025-07-30 19:34:27 +05:30
parent 1230d1f251
commit df4de508e7
27 changed files with 1161 additions and 15 deletions
--- a/app/javascript/dashboard/components-next/Editor/Editor.vue
+++ b/app/javascript/dashboard/components-next/Editor/Editor.vue
@@ -20,6 +20,7 @@ const props = defineProps({
  enableVariables: { type: Boolean, default: false },
  enableCannedResponses: { type: Boolean, default: true },
  enabledMenuOptions: { type: Array, default: () => [] },
+  enableCaptainTools: { type: Boolean, default: false },
 });

 const emit = defineEmits(['update:modelValue']);
@@ -98,6 +99,7 @@ watch(
        :enable-variables="enableVariables"
        :enable-canned-responses="enableCannedResponses"
        :enabled-menu-options="enabledMenuOptions"
+        :enable-captain-tools="enableCaptainTools"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
--- a/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';

 import Button from 'dashboard/components-next/button/Button.vue';
 import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
@@ -44,7 +45,10 @@ const onClickCancel = () => {
 </script>

 <template>
-  <div class="inline-flex relative">
+  <div
+    v-on-click-outside="() => togglePopover(false)"
+    class="inline-flex relative"
+  >
    <Button
      :label="buttonLabel"
      sm
--- a/app/javascript/dashboard/components-next/captain/assistant/AddNewScenariosDialog.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/AddNewScenariosDialog.vue
@@ -0,0 +1,155 @@
+<script setup>
+import { computed, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import { useVuelidate } from '@vuelidate/core';
+import { vOnClickOutside } from '@vueuse/components';
+import { required, minLength } from '@vuelidate/validators';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+
+const emit = defineEmits(['add']);
+
+const { t } = useI18n();
+
+const [showPopover, togglePopover] = useToggle();
+
+const state = reactive({
+  id: '',
+  title: '',
+  description: '',
+  instruction: '',
+});
+
+const rules = {
+  title: { required, minLength: minLength(1) },
+  description: { required },
+  instruction: { required },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const titleError = computed(() =>
+  v$.value.title.$error
+    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.ERROR')
+    : ''
+);
+
+const descriptionError = computed(() =>
+  v$.value.description.$error
+    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.ERROR')
+    : ''
+);
+
+const instructionError = computed(() =>
+  v$.value.instruction.$error
+    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.ERROR')
+    : ''
+);
+
+const resetState = () => {
+  Object.assign(state, {
+    id: '',
+    title: '',
+    description: '',
+    instruction: '',
+  });
+};
+
+const onClickAdd = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+
+  await emit('add', state);
+  resetState();
+  togglePopover(false);
+};
+
+const onClickCancel = () => {
+  togglePopover(false);
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="() => togglePopover(false)"
+    class="inline-flex relative"
+  >
+    <Button
+      :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.CREATE')"
+      sm
+      slate
+      class="flex-shrink-0"
+      @click="togglePopover(!showPopover)"
+    />
+
+    <div
+      v-if="showPopover"
+      class="w-[31.25rem] absolute top-10 ltr:left-0 rtl:right-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6 z-50"
+    >
+      <h3 class="text-base font-medium text-n-slate-12">
+        {{ t(`CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.TITLE`) }}
+      </h3>
+
+      <div class="flex flex-col gap-4">
+        <Input
+          v-model="state.title"
+          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.LABEL')"
+          :placeholder="
+            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.PLACEHOLDER')
+          "
+          :message="titleError"
+          :message-type="titleError ? 'error' : 'info'"
+        />
+
+        <TextArea
+          v-model="state.description"
+          :label="
+            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
+          "
+          :placeholder="
+            t(
+              'CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.PLACEHOLDER'
+            )
+          "
+          :message="descriptionError"
+          :message-type="descriptionError ? 'error' : 'info'"
+          show-character-count
+        />
+        <Editor
+          v-model="state.instruction"
+          :label="
+            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.LABEL')
+          "
+          :placeholder="
+            t(
+              'CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.PLACEHOLDER'
+            )
+          "
+          :message="instructionError"
+          :message-type="instructionError ? 'error' : 'info'"
+          :show-character-count="false"
+          enable-captain-tools
+        />
+      </div>
+
+      <div class="flex items-center justify-between w-full gap-3">
+        <Button
+          variant="faded"
+          color="slate"
+          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.CANCEL')"
+          class="w-full bg-n-alpha-2 !text-n-blue-text hover:bg-n-alpha-3"
+          @click="onClickCancel"
+        />
+        <Button
+          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.CREATE')"
+          class="w-full"
+          @click="onClickAdd"
+        />
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/RuleCard.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/RuleCard.vue
@@ -73,7 +73,6 @@ const saveEdit = () => {
      v-if="isEditing"
      v-model="editedContent"
      focus-on-mount
-      custom-input-class="flex items-center gap-2 text-sm text-n-slate-12"
      @keyup.enter="saveEdit"
    />
    <span v-else class="flex items-center gap-2 text-sm text-n-slate-12">
--- a/app/javascript/dashboard/components-next/captain/assistant/ScenariosCard.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/ScenariosCard.story.vue
@@ -0,0 +1,45 @@
+<script setup>
+import ScenariosCard from './ScenariosCard.vue';
+
+const sampleScenarios = [
+  {
+    id: 1,
+    title: 'Refund Order',
+    description: 'User requests a refund for a recent purchase.',
+    instruction:
+      'Gather order details and reason for refund. Use [Order Search](tool://order_search) then submit with [Refund Payment](tool://refund_payment).',
+    tools: ['order_search', 'refund_payment'],
+  },
+  {
+    id: 2,
+    title: 'Bug Report',
+    description: 'Customer reports a bug in the mobile app.',
+    instruction:
+      'Ask for reproduction steps and environment. Check [Known Issues](tool://known_issues) then create ticket with [Create Bug Report](tool://bug_report_create).',
+    tools: ['known_issues', 'bug_report_create'],
+  },
+];
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/ScenariosCard"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default">
+      <div
+        v-for="scenario in sampleScenarios"
+        :key="scenario.id"
+        class="px-4 py-4 bg-n-background"
+      >
+        <ScenariosCard
+          :id="scenario.id"
+          :title="scenario.title"
+          :description="scenario.description"
+          :instruction="scenario.instruction"
+          :tools="scenario.tools"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/ScenariosCard.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/ScenariosCard.vue
@@ -0,0 +1,218 @@
+<script setup>
+import { computed, h, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  instruction: {
+    type: String,
+    required: true,
+  },
+  tools: {
+    type: Array,
+    required: true,
+  },
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['select', 'hover', 'delete', 'update']);
+
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+
+const modelValue = computed({
+  get: () => props.isSelected,
+  set: () => emit('select', props.id),
+});
+
+const state = reactive({
+  id: '',
+  title: '',
+  description: '',
+  instruction: '',
+});
+
+const [isEditing, toggleEditing] = useToggle();
+
+const startEdit = () => {
+  Object.assign(state, {
+    id: props.id,
+    title: props.title,
+    description: props.description,
+    instruction: props.instruction,
+    tools: props.tools,
+  });
+  toggleEditing(true);
+};
+
+const rules = {
+  title: { required, minLength: minLength(1) },
+  description: { required },
+  instruction: { required },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const titleError = computed(() =>
+  v$.value.title.$error
+    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.ERROR')
+    : ''
+);
+
+const descriptionError = computed(() =>
+  v$.value.description.$error
+    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.ERROR')
+    : ''
+);
+
+const onClickUpdate = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+  emit('update', { ...state });
+  toggleEditing(false);
+};
+
+const instructionError = computed(() =>
+  v$.value.instruction.$error
+    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.ERROR')
+    : ''
+);
+
+const LINK_INSTRUCTION_CLASS =
+  '[&_a[href^="tool://"]]:text-n-iris-11 [&_a:not([href^="tool://"])]:text-n-slate-12 [&_a]:pointer-events-none [&_a]:cursor-default';
+
+const renderInstruction = instruction => () =>
+  h('p', {
+    class: `text-sm text-n-slate-12 py-4 mb-0 [&_ol]:list-decimal ${LINK_INSTRUCTION_CLASS}`,
+    innerHTML: instruction,
+  });
+</script>
+
+<template>
+  <CardLayout
+    selectable
+    class="relative [&>div]:!py-4"
+    :class="{
+      '[&>div]:ltr:!pr-4 [&>div]:rtl:!pl-4': !isEditing,
+      '[&>div]:ltr:!pr-10 [&>div]:rtl:!pl-10': isEditing,
+    }"
+    layout="row"
+    @mouseenter="emit('hover', true)"
+    @mouseleave="emit('hover', false)"
+  >
+    <div
+      v-show="selectable && !isEditing"
+      class="absolute top-[1.125rem] ltr:left-3 rtl:right-3"
+    >
+      <Checkbox v-model="modelValue" />
+    </div>
+
+    <div v-if="!isEditing" class="flex flex-col w-full">
+      <div class="flex items-start justify-between w-full gap-2">
+        <div class="flex flex-col items-start">
+          <span class="text-sm text-n-slate-12 font-medium">{{ title }}</span>
+          <span class="text-sm text-n-slate-11 mt-2">
+            {{ description }}
+          </span>
+        </div>
+        <div class="flex items-center gap-2">
+          <!-- <Button label="Test" slate xs ghost class="!text-sm" />
+          <span class="w-px h-4 bg-n-weak" /> -->
+          <Button icon="i-lucide-pen" slate xs ghost @click="startEdit" />
+          <span class="w-px h-4 bg-n-weak" />
+          <Button
+            icon="i-lucide-trash"
+            slate
+            xs
+            ghost
+            @click="emit('delete', id)"
+          />
+        </div>
+      </div>
+      <component :is="renderInstruction(formatMessage(instruction, false))" />
+      <span class="text-sm text-n-slate-11 font-medium mb-1">
+        {{ t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.SUGGESTED.TOOLS_USED') }}
+        {{ tools?.map(tool => `@${tool}`).join(', ') }}
+      </span>
+    </div>
+    <div v-else class="overflow-hidden flex flex-col gap-4 w-full">
+      <Input
+        v-model="state.title"
+        :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.LABEL')"
+        :placeholder="
+          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.PLACEHOLDER')
+        "
+        :message="titleError"
+        :message-type="titleError ? 'error' : 'info'"
+      />
+
+      <TextArea
+        v-model="state.description"
+        :label="
+          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
+        "
+        :placeholder="
+          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.PLACEHOLDER')
+        "
+        :message="descriptionError"
+        :message-type="descriptionError ? 'error' : 'info'"
+        show-character-count
+      />
+      <Editor
+        v-model="state.instruction"
+        :label="
+          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.LABEL')
+        "
+        :placeholder="
+          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.PLACEHOLDER')
+        "
+        :message="instructionError"
+        :message-type="instructionError ? 'error' : 'info'"
+        :show-character-count="false"
+        enable-captain-tools
+      />
+      <div class="flex items-center gap-3">
+        <Button
+          faded
+          slate
+          sm
+          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.UPDATE.CANCEL')"
+          @click="toggleEditing(false)"
+        />
+        <Button
+          sm
+          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.UPDATE.UPDATE')"
+          @click="onClickUpdate"
+        />
+      </div>
+    </div>
+  </CardLayout>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/ToolsDropdown.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/ToolsDropdown.story.vue
@@ -0,0 +1,37 @@
+<script setup>
+import { ref } from 'vue';
+import ToolsDropdown from './ToolsDropdown.vue';
+
+const items = [
+  {
+    id: 'order_search',
+    title: 'Order Search',
+    description: 'Lookup orders by customer ID, email, or order number',
+  },
+  {
+    id: 'refund_payment',
+    title: 'Refund Payment',
+    description: 'Initiates a refund on a specific payment',
+  },
+  {
+    id: 'fetch_customer',
+    title: 'Fetch Customer',
+    description: 'Pulls customer details (email, tags, last seen, etc.)',
+  },
+];
+
+const selectedIndex = ref(0);
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/ToolsDropdown"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Default">
+      <div class="relative h-80 bg-n-background p-4">
+        <ToolsDropdown :items="items" :selected-index="selectedIndex" />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/ToolsDropdown.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/ToolsDropdown.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+  },
+  selectedIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['select']);
+
+const toolsDropdownRef = ref(null);
+
+const onItemClick = idx => emit('select', idx);
+
+watch(
+  () => props.selectedIndex,
+  () => {
+    nextTick(() => {
+      const el = toolsDropdownRef.value?.querySelector(
+        `#tool-item-${props.selectedIndex}`
+      );
+      if (el) {
+        el.scrollIntoView({ block: 'nearest', behavior: 'auto' });
+      }
+    });
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div
+    ref="toolsDropdownRef"
+    class="w-[22.5rem] p-2 flex flex-col gap-1 z-50 absolute rounded-xl bg-n-alpha-3 shadow outline outline-1 outline-n-weak backdrop-blur-[50px] max-h-[20rem] overflow-y-auto"
+  >
+    <div
+      v-for="(tool, idx) in items"
+      :id="`tool-item-${idx}`"
+      :key="tool.id || idx"
+      :class="{ 'bg-n-alpha-black2': idx === selectedIndex }"
+      class="flex flex-col gap-1 rounded-md py-2 px-2 cursor-pointer hover:bg-n-alpha-black2"
+      @click="onItemClick(idx)"
+    >
+      <span class="text-n-slate-12 font-medium text-sm">{{ tool.title }}</span>
+      <span class="text-n-slate-11 text-sm">{{ tool.description }}</span>
+    </div>
+  </div>
+</template>