Merge branch 'develop' into rethinking-copilot

2025-05-19 11:33:34 -07:00
parent 123765b676 ad41fd90f9
commit 501c5f0628
179 changed files with 3178 additions and 301 deletions
@@ -200,6 +200,7 @@ defineExpose({ state, isSubmitDisabled });
                :label="state.icon"
                color="slate"
                size="sm"
+                type="button"
                :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
                class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
                @click="isEmojiPickerOpen = !isEmojiPickerOpen"
@@ -100,7 +100,10 @@ const handleBasicInfoUpdate = async () => {
  const payload = {
    name: state.name,
    description: state.description,
-    product_name: state.productName,
+    config: {
+      ...props.assistant.config,
+      product_name: state.productName,
+    },
  };

  emit('submit', payload);
@@ -81,6 +81,7 @@ onMounted(() => {
    <button
      v-for="(item, index) in filteredMenuItems"
      :key="index"
+      type="button"
      class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
      :class="{
        'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
@@ -1,5 +1,6 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+import { useElementBounding, useWindowSize } from '@vueuse/core';
 import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
 import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
 import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
@@ -25,6 +26,10 @@ const props = defineProps({
    type: String,
    default: 'faded',
  },
+  label: {
+    type: String,
+    default: null,
+  },
 });

 const selected = defineModel({
@@ -32,6 +37,13 @@ const selected = defineModel({
  required: true,
 });

+const triggerRef = ref(null);
+const dropdownRef = ref(null);
+
+const { top } = useElementBounding(triggerRef);
+const { height } = useWindowSize();
+const { height: dropdownHeight } = useElementBounding(dropdownRef);
+
 const selectedOption = computed(() => {
  return props.options.find(o => o.value === selected.value) || {};
 });
@@ -41,6 +53,16 @@ const iconToRender = computed(() => {
  return selectedOption.value.icon || 'i-lucide-chevron-down';
 });

+const dropdownPosition = computed(() => {
+  const DROPDOWN_MAX_HEIGHT = 340;
+  // Get actual height if available or use default
+  const menuHeight = dropdownHeight.value
+    ? dropdownHeight.value + 20
+    : DROPDOWN_MAX_HEIGHT;
+  const spaceBelow = height.value - top.value;
+  return spaceBelow < menuHeight ? 'bottom-0' : 'top-0';
+});
+
 const updateSelected = newValue => {
  selected.value = newValue;
 };
@@ -51,17 +73,23 @@ const updateSelected = newValue => {
    <template #trigger="{ toggle }">
      <slot name="trigger" :toggle="toggle">
        <Button
+          ref="triggerRef"
          sm
          slate
          :variant
          :icon="iconToRender"
          :trailing-icon="selectedOption.icon ? false : true"
-          :label="hideLabel ? null : selectedOption.label"
+          :label="label || (hideLabel ? null : selectedOption.label)"
          @click="toggle"
        />
      </slot>
    </template>
-    <DropdownBody class="top-0 min-w-48 z-50" strong>
+    <DropdownBody
+      ref="dropdownRef"
+      class="min-w-48 z-50"
+      :class="dropdownPosition"
+      strong
+    >
      <DropdownSection class="max-h-80 overflow-scroll">
        <DropdownItem
          v-for="option in options"
@@ -186,12 +186,20 @@ const isBotOrAgentMessage = computed(() => {
    return true;
  }
  const senderId = props.senderId ?? props.sender?.id;
-  const senderType = props.senderType ?? props.sender?.type;
+  const senderType = props.sender?.type ?? props.senderType;

  if (!senderType || !senderId) {
    return true;
  }

+  if (
+    [SENDER_TYPES.AGENT_BOT, SENDER_TYPES.CAPTAIN_ASSISTANT].includes(
+      senderType
+    )
+  ) {
+    return true;
+  }
+
  return senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase();
 });

@@ -406,7 +414,7 @@ const avatarInfo = computed(() => {
  const { name, type, avatarUrl, thumbnail } = sender || {};

  // If sender type is agent bot, use avatarUrl
-  if (type === SENDER_TYPES.AGENT_BOT) {
+  if ([SENDER_TYPES.AGENT_BOT, SENDER_TYPES.CAPTAIN_ASSISTANT].includes(type)) {
    return {
      name: name ?? '',
      src: avatarUrl ?? '',
@@ -2,10 +2,10 @@
 import { computed } from 'vue';
 import BaseBubble from './Base.vue';
 import { useI18n } from 'vue-i18n';
-import { CSAT_RATINGS } from 'shared/constants/messages';
+import { CSAT_RATINGS, CSAT_DISPLAY_TYPES } from 'shared/constants/messages';
 import { useMessageContext } from '../provider.js';

-const { contentAttributes } = useMessageContext();
+const { contentAttributes, content } = useMessageContext();
 const { t } = useI18n();

 const response = computed(() => {
@@ -16,6 +16,14 @@ const isRatingSubmitted = computed(() => {
  return !!response.value.rating;
 });

+const displayType = computed(() => {
+  return contentAttributes.value?.displayType || CSAT_DISPLAY_TYPES.EMOJI;
+});
+
+const isStarRating = computed(() => {
+  return displayType.value === CSAT_DISPLAY_TYPES.STAR;
+});
+
 const rating = computed(() => {
  if (isRatingSubmitted.value) {
    return CSAT_RATINGS.find(
@@ -25,16 +33,33 @@ const rating = computed(() => {

  return null;
 });
+
+const starRatingValue = computed(() => {
+  return response.value.rating || 0;
+});
 </script>

 <template>
  <BaseBubble class="px-4 py-3" data-bubble-name="csat">
-    <h4>{{ t('CONVERSATION.CSAT_REPLY_MESSAGE') }}</h4>
+    <h4>{{ content || t('CONVERSATION.CSAT_REPLY_MESSAGE') }}</h4>
    <dl v-if="isRatingSubmitted" class="mt-4">
      <dt class="text-n-slate-11 italic">
        {{ t('CONVERSATION.RATING_TITLE') }}
      </dt>
-      <dd>{{ t(rating.translationKey) }}</dd>
+      <dd v-if="!isStarRating">
+        {{ t(rating.translationKey) }}
+      </dd>
+      <dd v-else class="flex mt-1">
+        <span v-for="n in 5" :key="n" class="text-2xl mr-1">
+          <i
+            :class="[
+              n <= starRatingValue
+                ? 'i-ri-star-fill text-n-amber-9'
+                : 'i-ri-star-line text-n-slate-10',
+            ]"
+          />
+        </span>
+      </dd>

      <dt v-if="response.feedbackMessage" class="text-n-slate-11 italic mt-2">
        {{ t('CONVERSATION.FEEDBACK_TITLE') }}
@@ -21,6 +21,7 @@ export const SENDER_TYPES = {
  CONTACT: 'Contact',
  USER: 'User',
  AGENT_BOT: 'agent_bot',
+  CAPTAIN_ASSISTANT: 'captain_assistant',
 };

 export const ORIENTATION = {
@@ -185,6 +185,7 @@ watch(
              "
              trailing-icon
              :disabled="disabled"
+              type="button"
              class="!h-[1.875rem] top-1 ltr:ml-px rtl:mr-px !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
              @click="toggleCountryDropdown"
            >