HH-546: flatten conversation AI actions (#128)

* fix(HH-546): flatten conversation AI actions

* fix(HH-546): wrap AI actions on narrow screens

---------

Co-authored-by: Rogee <rogee@ipao.vip>

frontend/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -1,11 +1,12 @@
 <script>
-import { ref } from 'vue';
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { useCaptain } from 'dashboard/composables/useCaptain';
-import { useTrack } from 'dashboard/composables';
-import { vOnClickOutside } from '@vueuse/components';
+import { useAlert } from 'dashboard/composables';
+import { useMapGetter } from 'dashboard/composables/store';
 import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
-import { CAPTAIN_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import EditorModeToggle from './EditorModeToggle.vue';
 import CopilotMenuBar from './CopilotMenuBar.vue';
@@ -17,9 +18,6 @@ export default {
     EditorModeToggle,
     CopilotMenuBar,
   },
-  directives: {
-    OnClickOutside: vOnClickOutside,
-  },
   props: {
     mode: {
       type: String,
@@ -60,6 +58,10 @@ export default {
   },
   emits: ['setReplyMode', 'toggleEditorSize', 'executeCopilotAction'],
   setup(props, { emit }) {
+    const store = useStore();
+    const { t } = useI18n();
+    const currentChat = useMapGetter('getSelectedChat');
+
     const setReplyMode = mode => {
       emit('setReplyMode', mode);
     };
@@ -79,27 +81,32 @@ export default {
     };
 
     const { captainTasksEnabled } = useCaptain();
-    const showCopilotMenu = ref(false);
-    const copilotToggleRef = ref(null);
 
     const handleCopilotAction = (actionKey, data) => {
       emit('executeCopilotAction', actionKey, data || props.editorContent);
-      showCopilotMenu.value = false;
     };
 
-    const toggleCopilotMenu = () => {
-      const isOpening = !showCopilotMenu.value;
-      if (isOpening) {
-        useTrack(CAPTAIN_EVENTS.EDITOR_AI_MENU_OPENED, {
-          conversationId: props.conversationId,
-          entryPoint: 'top_panel',
-        });
+    const aiTakeoverActive = computed(
+      () => currentChat.value?.ai_takeover_active === true
+    );
+
+    const toggleAITakeover = async () => {
+      try {
+        const wasActive = aiTakeoverActive.value;
+        await store.dispatch(
+          wasActive ? 'exitAITakeover' : 'startAITakeover',
+          currentChat.value?.id
+        );
+        useAlert(
+          wasActive
+            ? t('CONVERSATION.AI_TAKEOVER.EXIT_SUCCESS')
+            : t('CONVERSATION.AI_TAKEOVER.START_SUCCESS')
+        );
+      } catch (error) {
+        useAlert(
+          error?.response?.data?.error || t('CONVERSATION.AI_TAKEOVER.ERROR')
+        );
       }
-      showCopilotMenu.value = isOpening;
-    };
-
-    const handleClickOutside = () => {
-      showCopilotMenu.value = false;
     };
 
     const keyboardEvents = {
@@ -121,10 +128,8 @@ export default {
       REPLY_EDITOR_MODES,
       captainTasksEnabled,
       handleCopilotAction,
-      showCopilotMenu,
-      copilotToggleRef,
-      toggleCopilotMenu,
-      handleClickOutside,
+      aiTakeoverActive,
+      toggleAITakeover,
     };
   },
   computed: {
@@ -152,7 +157,7 @@ export default {
 
 <template>
   <div
-    class="flex justify-between gap-2 h-[3.25rem] items-center ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2"
+    class="flex min-h-[3.25rem] flex-wrap items-center justify-between gap-2 py-2 ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2 sm:h-[3.25rem] sm:flex-nowrap sm:py-0"
   >
     <EditorModeToggle
       :mode="mode"
@@ -160,43 +165,44 @@ export default {
       :is-reply-restricted="isReplyRestricted"
       @toggle-mode="handleModeToggle"
     />
-    <div class="flex items-center mx-4 my-0">
+    <div class="flex min-w-0 flex-1 items-center">
       <div v-if="isMessageLengthReachingThreshold" class="text-xs">
         <span :class="charLengthClass">
           {{ characterLengthWarning }}
         </span>
       </div>
     </div>
-    <div v-if="captainTasksEnabled" class="flex items-center gap-2">
-      <div class="relative">
-        <NextButton
-          ref="copilotToggleRef"
-          ghost
-          :disabled="disabled || isEditorDisabled"
-          :class="{
-            'text-n-violet-9 hover:enabled:!bg-n-violet-3': !showCopilotMenu,
-            'text-n-violet-9 bg-n-violet-3': showCopilotMenu,
-          }"
-          sm
-          icon="i-ph-sparkle-fill"
-          @click="toggleCopilotMenu"
-        />
-        <CopilotMenuBar
-          v-if="showCopilotMenu"
-          v-on-click-outside="[
-            handleClickOutside,
-            { ignore: [copilotToggleRef] },
-          ]"
-          :has-selection="false"
-          :has-content="hasContent"
-          :conversation-id="conversationId"
-          class="ltr:right-0 rtl:left-0 bottom-full mb-2"
-          @execute-copilot-action="handleCopilotAction"
-        />
-      </div>
+    <div
+      data-testid="reply-top-panel-actions"
+      class="flex w-full flex-shrink-0 flex-wrap items-center justify-end gap-2 sm:w-auto sm:flex-nowrap"
+    >
       <NextButton
+        type="button"
+        :label="
+          aiTakeoverActive
+            ? $t('CONVERSATION.AI_TAKEOVER.EXIT')
+            : $t('CONVERSATION.AI_TAKEOVER.START')
+        "
+        slate
+        outline
+        sm
+        class="flex-shrink-0"
+        @click="toggleAITakeover"
+      />
+      <CopilotMenuBar
+        v-if="captainTasksEnabled"
+        inline
+        :disabled="disabled || isEditorDisabled"
+        :has-selection="false"
+        :has-content="hasContent"
+        :conversation-id="conversationId"
+        @execute-copilot-action="handleCopilotAction"
+      />
+      <NextButton
+        v-if="captainTasksEnabled"
+        type="button"
         ghost
-        class="text-n-slate-11"
+        class="flex-shrink-0 text-n-slate-11"
         sm
         icon="i-lucide-maximize-2"
         @click="$emit('toggleEditorSize')"