Merge branch 'develop' into feat/email-forwarding

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

@@ -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);

app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue

@@ -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';
@@ -36,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) || {};
 });
@@ -45,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;
 };
@@ -55,6 +73,7 @@ const updateSelected = newValue => {
     <template #trigger="{ toggle }">
       <slot name="trigger" :toggle="toggle">
         <Button
+          ref="triggerRef"
           sm
           slate
           :variant
@@ -65,7 +84,12 @@ const updateSelected = newValue => {
         />
       </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"

app/javascript/dashboard/components-next/message/Message.vue

@@ -187,12 +187,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();
 });
 
@@ -415,7 +423,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 ?? '',

app/javascript/dashboard/components-next/message/constants.js

@@ -21,6 +21,7 @@ export const SENDER_TYPES = {
   CONTACT: 'Contact',
   USER: 'User',
   AGENT_BOT: 'agent_bot',
+  CAPTAIN_ASSISTANT: 'captain_assistant',
 };
 
 export const ORIENTATION = {