chore: Improve captain layout (#12820)

2025-11-12 18:31:17 +05:30
parent 3c9c0298ba
commit fb0be60ae2
6 changed files with 70 additions and 61 deletions
--- a/app/javascript/dashboard/components-next/captain/PageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/PageLayout.vue
@@ -4,7 +4,6 @@ import { OnClickOutside } from '@vueuse/components';
 import { useRoute } from 'vue-router';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { usePolicy } from 'dashboard/composables/usePolicy';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import BackButton from 'dashboard/components/widgets/BackButton.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
@@ -117,58 +116,57 @@ const handleCreateAssistant = () => {
        <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"
        >
-          <div class="flex gap-4 items-center">
+          <div class="flex gap-3 items-center">
            <BackButton v-if="backUrl" :back-url="backUrl" />
-            <slot name="headerTitle">
-              <div v-if="showAssistantSwitcher" class="flex items-center gap-2">
-                <div class="flex items-center gap-1">
-                  <span
-                    v-if="activeAssistantName"
-                    class="text-xl font-medium truncate text-n-slate-12"
+            <div v-if="showAssistantSwitcher" class="flex items-center gap-2">
+              <div class="flex items-center gap-2">
+                <span
+                  v-if="activeAssistantName"
+                  class="text-xl font-medium truncate text-n-slate-12"
+                >
+                  {{ activeAssistantName }}
+                </span>
+                <div v-if="activeAssistantName" class="relative group">
+                  <OnClickOutside
+                    @trigger="showAssistantSwitcherDropdown = false"
                  >
-                    {{ activeAssistantName }}
-                  </span>
-                  <div v-if="activeAssistantName" class="relative group">
-                    <OnClickOutside
-                      @trigger="showAssistantSwitcherDropdown = false"
-                    >
-                      <Button
-                        icon="i-lucide-chevron-down"
-                        variant="ghost"
-                        color="slate"
-                        size="xs"
-                        class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3 [&>span]:size-4"
-                        @click="toggleAssistantSwitcher"
-                      />
+                    <Button
+                      icon="i-lucide-chevron-down"
+                      variant="ghost"
+                      color="slate"
+                      size="xs"
+                      class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3 [&>span]:size-4"
+                      @click="toggleAssistantSwitcher"
+                    />

-                      <AssistantSwitcher
-                        v-if="showAssistantSwitcherDropdown"
-                        class="absolute ltr:left-0 rtl:right-0 top-9"
-                        @close="showAssistantSwitcherDropdown = false"
-                        @create-assistant="handleCreateAssistant"
-                      />
-                    </OnClickOutside>
-                  </div>
-                  <Icon
-                    v-if="activeAssistantName"
-                    icon="i-lucide-chevron-right"
-                    class="size-6 text-n-slate-11"
-                  />
-                  <span class="text-xl font-medium text-n-slate-11">
-                    {{ headerTitle }}
-                  </span>
+                    <AssistantSwitcher
+                      v-if="showAssistantSwitcherDropdown"
+                      class="absolute ltr:left-0 rtl:right-0 top-9"
+                      @close="showAssistantSwitcherDropdown = false"
+                      @create-assistant="handleCreateAssistant"
+                    />
+                  </OnClickOutside>
                </div>
              </div>
-              <span v-else class="text-xl font-medium text-n-slate-12">
+            </div>
+            <div class="flex items-center gap-4">
+              <div
+                v-if="showAssistantSwitcher && headerTitle"
+                class="w-0.5 h-4 rounded-2xl bg-n-weak"
+              />
+              <span
+                v-if="headerTitle"
+                class="text-xl font-medium text-n-slate-12"
+              >
                {{ headerTitle }}
              </span>
-            </slot>
-            <div
-              v-if="!isEmpty && showKnowMore"
-              class="flex items-center gap-2"
-            >
-              <div class="w-0.5 h-4 rounded-2xl bg-n-weak" />
-              <slot name="knowMore" />
+              <div
+                v-if="!isEmpty && showKnowMore"
+                class="flex items-center gap-2"
+              >
+                <div class="w-0.5 h-4 rounded-2xl bg-n-weak" />
+                <slot name="knowMore" />
+              </div>
            </div>
          </div>

--- a/app/javascript/dashboard/components-next/captain/assistant/AssistantPlayground.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/AssistantPlayground.vue
@@ -75,9 +75,9 @@ const sendMessage = async () => {

 <template>
  <div
-    class="flex flex-col h-full rounded-lg p-4 border border-n-slate-4 text-n-slate-11"
+    class="flex flex-col h-full rounded-xl border py-6 border-n-weak text-n-slate-11"
  >
-    <div class="mb-4">
+    <div class="mb-8 px-6">
      <div class="flex justify-between items-center mb-1">
        <h3 class="text-lg font-medium">
          {{ t('CAPTAIN.PLAYGROUND.HEADER') }}
@@ -85,6 +85,7 @@ const sendMessage = async () => {
        <NextButton
          ghost
          sm
+          slate
          icon="i-lucide-rotate-ccw"
          @click="resetConversation"
        />
@@ -97,11 +98,11 @@ const sendMessage = async () => {
    <MessageList :messages="messages" :is-loading="isLoading" />

    <div
-      class="flex items-center bg-n-solid-1 outline outline-n-container rounded-lg p-3"
+      class="flex items-center mx-6 bg-n-background outline outline-1 outline-n-weak rounded-xl p-3"
    >
      <input
        v-model="newMessage"
-        class="flex-1 bg-transparent border-none focus:outline-none text-sm mb-0"
+        class="flex-1 bg-transparent border-none focus:outline-none text-sm mb-0 text-n-slate-12 placeholder:text-n-slate-10"
        :placeholder="t('CAPTAIN.PLAYGROUND.MESSAGE_PLACEHOLDER')"
        @keyup.enter="sendMessage"
      />
--- a/app/javascript/dashboard/components-next/captain/assistant/MessageList.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/MessageList.vue
@@ -35,8 +35,8 @@ const getAvatarName = sender =>

 const getMessageStyle = sender =>
  isUserMessage(sender)
-    ? 'bg-n-strong text-n-white'
-    : 'bg-n-solid-iris text-n-slate-12';
+    ? 'bg-n-solid-blue text-n-slate-12 rounded-br-sm rounded-bl-xl rounded-t-xl'
+    : 'bg-n-solid-iris text-n-slate-12 rounded-bl-sm rounded-br-xl rounded-t-xl';

 const scrollToBottom = async () => {
  await nextTick();
@@ -49,7 +49,10 @@ watch(() => props.messages.length, scrollToBottom);
 </script>

 <template>
-  <div ref="messageContainer" class="flex-1 overflow-y-auto mb-4 space-y-2">
+  <div
+    ref="messageContainer"
+    class="flex-1 overflow-y-auto mb-4 px-6 space-y-6"
+  >
    <div
      v-for="(message, index) in messages"
      :key="index"
@@ -57,15 +60,20 @@ watch(() => props.messages.length, scrollToBottom);
      :class="getMessageAlignment(message.sender)"
    >
      <div
-        class="flex items-start gap-1.5"
+        class="flex items-end gap-1.5 max-w-[90%] md:max-w-[60%]"
        :class="getMessageDirection(message.sender)"
      >
-        <Avatar :name="getAvatarName(message.sender)" rounded-full :size="24" />
+        <Avatar
+          :name="getAvatarName(message.sender)"
+          rounded-full
+          :size="24"
+          class="shrink-0"
+        />
        <div
-          class="max-w-[80%] rounded-lg p-3 text-sm"
+          class="px-4 py-3 text-sm [overflow-wrap:break-word]"
          :class="getMessageStyle(message.sender)"
        >
-          <div class="break-words" v-html="formatMessage(message.content)" />
+          <div v-html="formatMessage(message.content)" />
        </div>
      </div>
    </div>
--- a/app/javascript/dashboard/routes/dashboard/captain/assistants/playground/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/assistants/playground/Index.vue
@@ -10,14 +10,14 @@ const assistantId = computed(() => Number(route.params.assistantId));

 <template>
  <PageLayout
-    :header-title="$t('CAPTAIN.PLAYGROUND.HEADER')"
    show-assistant-switcher
    :show-pagination-footer="false"
+    :show-know-more="false"
    class="h-full"
  >
    <template #body>
      <div class="flex flex-col h-full">
-        <AssistantPlayground :assistant-id="assistantId" />
+        <AssistantPlayground :assistant-id="assistantId" class="bg-n-solid-1" />
      </div>
    </template>
  </PageLayout>
--- a/app/javascript/dashboard/routes/dashboard/captain/assistants/settings/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/assistants/settings/Settings.vue
@@ -104,7 +104,6 @@ const handleDeleteSuccess = () => {

 <template>
  <PageLayout
-    :header-title="$t('CAPTAIN.ASSISTANTS.SETTINGS.HEADER')"
    :is-fetching="isFetching"
    :show-pagination-footer="false"
    :show-know-more="false"
--- a/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
@@ -195,7 +195,10 @@ const navigateToPendingFAQs = () => {

 onMounted(() => {
  initializeFromURL();
-  store.dispatch('captainResponses/fetchPendingCount', selectedAssistantId);
+  store.dispatch(
+    'captainResponses/fetchPendingCount',
+    selectedAssistantId.value
+  );
 });
 </script>