feat: Update UI for Copilot (#11561)

- Updated UI for copilot
2025-06-02 22:02:03 -05:00
parent a5fda8e118
commit bae958334d
28 changed files with 455 additions and 243 deletions
--- a/app/javascript/dashboard/components-next/captain/PageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/PageLayout.vue
@@ -76,7 +76,7 @@ const handlePageChange = event => {

 <template>
  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
-    <header class="sticky top-0 z-10 px-6 xl:px-0">
+    <header class="sticky top-0 z-10 px-6">
      <div class="w-full max-w-[60rem] mx-auto">
        <div
          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"
@@ -116,7 +116,7 @@ const handlePageChange = event => {
        </div>
      </div>
    </header>
-    <main class="flex-1 px-6 overflow-y-auto xl:px-0">
+    <main class="flex-1 px-6 overflow-y-auto">
      <div class="w-full max-w-[60rem] h-full mx-auto py-4">
        <slot v-if="!showPaywall" name="controls" />
        <div
--- a/app/javascript/dashboard/components-next/copilot/Copilot.vue
+++ b/app/javascript/dashboard/components-next/copilot/Copilot.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { nextTick, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { nextTick, ref, watch, computed } from 'vue';
 import { useTrack } from 'dashboard/composables';
 import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -9,23 +8,17 @@ import CopilotInput from './CopilotInput.vue';
 import CopilotLoader from './CopilotLoader.vue';
 import CopilotAgentMessage from './CopilotAgentMessage.vue';
 import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
+import CopilotThinkingGroup from './CopilotThinkingGroup.vue';
 import ToggleCopilotAssistant from './ToggleCopilotAssistant.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
+import CopilotEmptyState from './CopilotEmptyState.vue';
 import SidebarActionsHeader from 'dashboard/components-next/SidebarActionsHeader.vue';
+import { useI18n } from 'vue-i18n';

 const props = defineProps({
-  supportAgent: {
-    type: Object,
-    default: () => ({}),
-  },
  messages: {
    type: Array,
    default: () => [],
  },
-  isCaptainTyping: {
-    type: Boolean,
-    default: false,
-  },
  conversationInboxType: {
    type: String,
    required: true,
@@ -44,18 +37,11 @@ const emit = defineEmits(['sendMessage', 'reset', 'setAssistant']);

 const { t } = useI18n();

-const COPILOT_USER_ROLES = ['assistant', 'system'];
-
 const sendMessage = message => {
  emit('sendMessage', message);
  useTrack(COPILOT_EVENTS.SEND_MESSAGE);
 };

-const useSuggestion = opt => {
-  emit('sendMessage', t(opt.prompt));
-  useTrack(COPILOT_EVENTS.SEND_SUGGESTED);
-};
-
 const chatContainer = ref(null);

 const scrollToBottom = async () => {
@@ -65,20 +51,40 @@ const scrollToBottom = async () => {
  }
 };

-const promptOptions = [
-  {
-    label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
-    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
-  },
-  {
-    label: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.LABEL',
-    prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
-  },
-  {
-    label: 'CAPTAIN.COPILOT.PROMPTS.RATE.LABEL',
-    prompt: 'CAPTAIN.COPILOT.PROMPTS.RATE.CONTENT',
-  },
-];
+const groupedMessages = computed(() => {
+  const result = [];
+  let thinkingGroup = [];
+  props.messages.forEach(message => {
+    if (message.message_type === 'assistant_thinking') {
+      thinkingGroup.push(message);
+    } else {
+      if (thinkingGroup.length > 0) {
+        result.push({
+          id: thinkingGroup[0].id,
+          message_type: 'thinking_group',
+          messages: thinkingGroup,
+        });
+        thinkingGroup = [];
+      }
+      result.push(message);
+    }
+  });
+  if (thinkingGroup.length > 0) {
+    result.push({
+      id: thinkingGroup[0].id,
+      message_type: 'thinking_group',
+      messages: thinkingGroup,
+    });
+  }
+  return result;
+});
+
+const isLastMessageFromAssistant = computed(() => {
+  return (
+    groupedMessages.value[groupedMessages.value.length - 1].message_type ===
+    'assistant'
+  );
+});

 const { updateUISettings } = useUISettings();

@@ -95,8 +101,22 @@ const handleSidebarAction = action => {
  }
 };

+const hasAssistants = computed(() => props.assistants.length > 0);
+const hasMessages = computed(() => props.messages.length > 0);
+const copilotButtons = computed(() => {
+  if (hasMessages.value) {
+    return [
+      {
+        key: 'reset',
+        icon: 'i-lucide-refresh-ccw',
+        tooltip: t('CAPTAIN.COPILOT.RESET'),
+      },
+    ];
+  }
+  return [];
+});
 watch(
-  [() => props.messages, () => props.isCaptainTyping],
+  [() => props.messages],
  () => {
    scrollToBottom();
  },
@@ -108,64 +128,57 @@ watch(
  <div class="flex flex-col h-full text-sm leading-6 tracking-tight w-full">
    <SidebarActionsHeader
      :title="$t('CAPTAIN.COPILOT.TITLE')"
-      :buttons="[
-        {
-          key: 'reset',
-          icon: 'i-lucide-refresh-ccw',
-          tooltip: $t('CAPTAIN.COPILOT.RESET'),
-        },
-      ]"
+      :buttons="copilotButtons"
      @click="handleSidebarAction"
      @close="closeCopilotPanel"
    />
-    <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
-      <template v-for="message in messages" :key="message.id">
-        <CopilotAgentMessage
-          v-if="message.role === 'user'"
-          :support-agent="supportAgent"
-          :message="message"
-        />
-        <CopilotAssistantMessage
-          v-else-if="COPILOT_USER_ROLES.includes(message.role)"
-          :message="message"
-          :conversation-inbox-type="conversationInboxType"
-        />
-      </template>
-
-      <CopilotLoader v-if="isCaptainTyping" />
-    </div>
-
    <div
-      v-if="!messages.length"
-      class="h-full w-full flex items-center justify-center"
+      ref="chatContainer"
+      class="flex-1 flex px-4 py-4 overflow-y-auto items-start"
    >
-      <div class="h-fit px-3 py-3 space-y-1">
-        <span class="text-xs text-n-slate-10">
-          {{ $t('COPILOT.TRY_THESE_PROMPTS') }}
-        </span>
-        <button
-          v-for="prompt in promptOptions"
-          :key="prompt.label"
-          class="px-2 py-1 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center gap-1"
-          @click="() => useSuggestion(prompt)"
-        >
-          <span>{{ t(prompt.label) }}</span>
-          <Icon icon="i-lucide-chevron-right" />
-        </button>
+      <div v-if="hasMessages" class="space-y-6 flex-1 flex flex-col w-full">
+        <template v-for="(item, index) in groupedMessages" :key="item.id">
+          <CopilotAgentMessage
+            v-if="item.message_type === 'user'"
+            :message="item.message"
+          />
+          <CopilotAssistantMessage
+            v-else-if="item.message_type === 'assistant'"
+            :message="item.message"
+            :is-last-message="index === groupedMessages.length - 1"
+            :conversation-inbox-type="conversationInboxType"
+          />
+          <CopilotThinkingGroup
+            v-else
+            :messages="item.messages"
+            :default-collapsed="isLastMessageFromAssistant"
+          />
+        </template>
+
+        <CopilotLoader v-if="!isLastMessageFromAssistant" />
      </div>
+      <CopilotEmptyState
+        v-else
+        :has-assistants="hasAssistants"
+        @use-suggestion="sendMessage"
+      />
    </div>

    <div class="mx-3 mt-px mb-2">
      <div class="flex items-center gap-2 justify-between w-full mb-1">
        <ToggleCopilotAssistant
-          v-if="assistants.length"
+          v-if="assistants.length > 1"
          :assistants="assistants"
          :active-assistant="activeAssistant"
          @set-assistant="$event => emit('setAssistant', $event)"
        />
        <div v-else />
      </div>
-      <CopilotInput class="mb-1 w-full" @send="sendMessage" />
+      <CopilotInput
+        v-if="hasAssistants"
+        class="mb-1 w-full"
+        @send="sendMessage"
+      />
    </div>
  </div>
 </template>
--- a/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue
@@ -11,6 +11,10 @@ import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 import Button from 'dashboard/components-next/button/Button.vue';

 const props = defineProps({
+  isLastMessage: {
+    type: Boolean,
+    default: false,
+  },
  message: {
    type: Object,
    required: true,
@@ -20,6 +24,15 @@ const props = defineProps({
    required: true,
  },
 });
+const hasEmptyMessageContent = computed(() => !props.message?.content);
+
+const showUseButton = computed(() => {
+  return (
+    !hasEmptyMessageContent.value &&
+    props.message.reply_suggestion &&
+    props.isLastMessage
+  );
+});

 const messageContent = computed(() => {
  const formatter = new MessageFormatter(props.message.content);
@@ -32,8 +45,6 @@ const insertIntoRichEditor = computed(() => {
  );
 });

-const hasEmptyMessageContent = computed(() => !props.message?.content);
-
 const useCopilotResponse = () => {
  if (insertIntoRichEditor.value) {
    emitter.emit(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, props.message?.content);
@@ -57,7 +68,7 @@ const useCopilotResponse = () => {
    />
    <div class="flex flex-row mt-1">
      <Button
-        v-if="!hasEmptyMessageContent"
+        v-if="showUseButton"
        :label="$t('CAPTAIN.COPILOT.USE')"
        faded
        sm
--- a/app/javascript/dashboard/components-next/copilot/CopilotEmptyState.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotEmptyState.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import Icon from '../icon/Icon.vue';
+
+defineProps({
+  hasAssistants: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['useSuggestion']);
+const { t } = useI18n();
+const route = useRoute();
+
+const routePromptMap = {
+  conversations: [
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.SUMMARIZE.CONTENT',
+    },
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.SUGGEST.CONTENT',
+    },
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.RATE.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.RATE.CONTENT',
+    },
+  ],
+  dashboard: [
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.HIGH_PRIORITY.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.HIGH_PRIORITY.CONTENT',
+    },
+    {
+      label: 'CAPTAIN.COPILOT.PROMPTS.LIST_CONTACTS.LABEL',
+      prompt: 'CAPTAIN.COPILOT.PROMPTS.LIST_CONTACTS.CONTENT',
+    },
+  ],
+};
+
+const getCurrentRoute = () => {
+  const path = route.path;
+  if (path.includes('/conversations')) return 'conversations';
+  if (path.includes('/dashboard')) return 'dashboard';
+  if (path.includes('/contacts')) return 'contacts';
+  if (path.includes('/articles')) return 'articles';
+  return 'dashboard';
+};
+
+const promptOptions = computed(() => {
+  const currentRoute = getCurrentRoute();
+  return routePromptMap[currentRoute] || routePromptMap.conversations;
+});
+
+const handleSuggestion = opt => {
+  emit('useSuggestion', t(opt.prompt));
+};
+</script>
+
+<template>
+  <div class="flex-1 flex flex-col gap-6 px-2">
+    <div class="flex flex-col space-y-4 py-4">
+      <Icon icon="i-woot-captain" class="text-n-slate-9 text-4xl" />
+      <div class="space-y-1">
+        <h3 class="text-base font-medium text-n-slate-12 leading-8">
+          {{ $t('CAPTAIN.COPILOT.PANEL_TITLE') }}
+        </h3>
+        <p class="text-sm text-n-slate-11 leading-6">
+          {{ $t('CAPTAIN.COPILOT.KICK_OFF_MESSAGE') }}
+        </p>
+      </div>
+    </div>
+    <div v-if="!hasAssistants" class="w-full space-y-2">
+      <p class="text-sm text-n-slate-11 leading-6">
+        {{ $t('CAPTAIN.ASSISTANTS.NO_ASSISTANTS_AVAILABLE') }}
+      </p>
+      <router-link
+        :to="{
+          name: 'captain_assistants_index',
+          params: { accountId: route.params.accountId },
+        }"
+        class="text-n-slate-11 underline hover:text-n-slate-12"
+      >
+        {{ $t('CAPTAIN.ASSISTANTS.ADD_NEW') }}
+      </router-link>
+    </div>
+    <div v-else class="w-full space-y-2">
+      <span class="text-xs text-n-slate-10 block">
+        {{ $t('CAPTAIN.COPILOT.TRY_THESE_PROMPTS') }}
+      </span>
+      <div class="space-y-1">
+        <button
+          v-for="prompt in promptOptions"
+          :key="prompt.label"
+          class="w-full px-3 py-2 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center justify-between hover:bg-n-slate-3 transition-colors"
+          @click="handleSuggestion(prompt)"
+        >
+          <span>{{ t(prompt.label) }}</span>
+          <Icon icon="i-lucide-chevron-right" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/copilot/CopilotLauncher.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotLauncher.vue
@@ -0,0 +1,61 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import Button from 'dashboard/components-next/button/Button.vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useMapGetter } from 'dashboard/composables/store';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+const route = useRoute();
+
+const { uiSettings, updateUISettings } = useUISettings();
+
+const isConversationRoute = computed(() => {
+  const CONVERSATION_ROUTES = [
+    'inbox_conversation',
+    'conversation_through_inbox',
+    'conversations_through_label',
+    'team_conversations_through_label',
+    'conversations_through_folders',
+    'conversation_through_mentions',
+    'conversation_through_unattended',
+    'conversation_through_participating',
+  ];
+  return CONVERSATION_ROUTES.includes(route.name);
+});
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+const showCopilotLauncher = computed(() => {
+  const isCaptainEnabled = isFeatureEnabledonAccount.value(
+    currentAccountId.value,
+    FEATURE_FLAGS.CAPTAIN
+  );
+  return (
+    isCaptainEnabled &&
+    !uiSettings.value.is_copilot_panel_open &&
+    !isConversationRoute.value
+  );
+});
+const toggleSidebar = () => {
+  updateUISettings({
+    is_copilot_panel_open: !uiSettings.value.is_copilot_panel_open,
+  });
+};
+</script>
+
+<template>
+  <div v-if="showCopilotLauncher" class="fixed bottom-4 right-4 z-50">
+    <div class="rounded-full bg-n-alpha-2 p-1">
+      <Button
+        icon="i-woot-captain"
+        class="!rounded-full !bg-n-solid-3 dark:!bg-n-alpha-2 !text-n-slate-12 text-xl"
+        lg
+        @click="toggleSidebar"
+      />
+    </div>
+  </div>
+  <template v-else />
+</template>
--- a/app/javascript/dashboard/components-next/copilot/CopilotThinkingBlock.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotThinkingBlock.vue
@@ -17,7 +17,7 @@ defineProps({
        icon="i-lucide-sparkles"
        class="w-4 h-4 mt-0.5 flex-shrink-0 text-n-slate-9"
      />
-      <div class="text-sm text-n-slate-11">
+      <div class="text-sm text-n-slate-12">
        {{ content }}
      </div>
    </div>
--- a/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotThinkingGroup.vue
@@ -51,10 +51,10 @@ watch(
      }"
    >
      <CopilotThinkingBlock
-        v-for="message in messages"
-        :key="message.id"
-        :content="message.content"
-        :reasoning="message.reasoning"
+        v-for="copilotMessage in messages"
+        :key="copilotMessage.id"
+        :content="copilotMessage.message.content"
+        :reasoning="copilotMessage.message.reasoning"
      />
    </div>
  </div>