Merge branch 'develop' into rethinking-copilot

2025-05-21 15:47:07 -07:00
parent f9a1c98e38 bc42aec68e
commit 7d954a1aa4
44 changed files with 869 additions and 502 deletions
@@ -0,0 +1,65 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import ConfirmContactDeleteDialog from 'dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue';
+
+defineProps({
+  selectedContact: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const [showDeleteSection, toggleDeleteSection] = useToggle();
+const confirmDeleteContactDialogRef = ref(null);
+
+const openConfirmDeleteContactDialog = () => {
+  confirmDeleteContactDialogRef.value?.dialogRef.open();
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-start border-t border-n-strong px-6 py-5">
+    <Button
+      :label="t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT')"
+      sm
+      link
+      slate
+      class="hover:!no-underline text-n-slate-12"
+      icon="i-lucide-chevron-down"
+      trailing-icon
+      @click="toggleDeleteSection()"
+    />
+
+    <div
+      class="transition-all duration-300 ease-in-out grid w-full overflow-hidden"
+      :class="
+        showDeleteSection
+          ? 'grid-rows-[1fr] opacity-100 mt-2'
+          : 'grid-rows-[0fr] opacity-0 mt-0'
+      "
+    >
+      <div class="overflow-hidden min-h-0">
+        <span class="inline-flex text-n-slate-11 text-sm items-center gap-1">
+          {{ t('CONTACTS_LAYOUT.CARD.DELETE_CONTACT.MESSAGE') }}
+          <Button
+            :label="t('CONTACTS_LAYOUT.CARD.DELETE_CONTACT.BUTTON')"
+            sm
+            ruby
+            link
+            @click="openConfirmDeleteContactDialog()"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+  <ConfirmContactDeleteDialog
+    ref="confirmDeleteContactDialogRef"
+    :selected-contact="selectedContact"
+  />
+</template>
@@ -7,6 +7,7 @@ import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/Contac
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Flag from 'dashboard/components-next/flag/Flag.vue';
+import ContactDeleteSection from 'dashboard/components-next/Contacts/ContactsCard/ContactDeleteSection.vue';
 import countries from 'shared/constants/countries';

 const props = defineProps({
@@ -149,15 +150,15 @@ const onClickViewDetails = () => emit('showContact', props.id);
    />

    <template #after>
-      <transition
-        enter-active-class="overflow-hidden transition-all duration-300 ease-out"
-        leave-active-class="overflow-hidden transition-all duration-300 ease-in"
-        enter-from-class="overflow-hidden opacity-0 max-h-0"
-        enter-to-class="opacity-100 max-h-[690px] sm:max-h-[470px] md:max-h-[410px]"
-        leave-from-class="opacity-100 max-h-[690px] sm:max-h-[470px] md:max-h-[410px]"
-        leave-to-class="overflow-hidden opacity-0 max-h-0"
+      <div
+        class="transition-all duration-500 ease-in-out grid overflow-hidden"
+        :class="
+          isExpanded
+            ? 'grid-rows-[1fr] opacity-100'
+            : 'grid-rows-[0fr] opacity-0'
+        "
      >
-        <div v-show="isExpanded" class="w-full">
+        <div class="overflow-hidden">
          <div class="flex flex-col gap-6 p-6 border-t border-n-strong">
            <ContactsForm
              ref="contactsFormRef"
@@ -176,8 +177,14 @@ const onClickViewDetails = () => emit('showContact', props.id);
              />
            </div>
          </div>
+          <ContactDeleteSection
+            :selected-contact="{
+              id: props.id,
+              name: props.name,
+            }"
+          />
        </div>
-      </transition>
+      </div>
    </template>
  </CardLayout>
 </template>
@@ -47,11 +47,7 @@ defineExpose({ dialogRef });
    ref="dialogRef"
    type="alert"
    :title="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.TITLE')"
-    :description="
-      t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.DESCRIPTION', {
-        contactName: props.selectedContact.name,
-      })
-    "
+    :description="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.DESCRIPTION')"
    :confirm-button-label="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.CONFIRM')"
    @confirm="handleDialogConfirm"
  />
@@ -117,7 +117,7 @@ const STYLE_CONFIG = {
        'text-n-ruby-11 hover:enabled:bg-n-ruby-9/10 focus-visible:bg-n-ruby-9/10 outline-n-ruby-8',
      ghost:
        'text-n-ruby-11 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-ruby-9 hover:enabled:underline focus-visible:underline outline-transparent',
+      link: 'text-n-ruby-9 dark:text-n-ruby-11 hover:enabled:underline focus-visible:underline outline-transparent',
    },
    amber: {
      solid:
@@ -0,0 +1,21 @@
+<script setup>
+import CopilotHeader from './CopilotHeader.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/Copilot/CopilotHeader"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <!-- Default State -->
+    <Variant title="Default State">
+      <CopilotHeader />
+    </Variant>
+
+    <!-- With New Conversation Button -->
+    <Variant title="With New Conversation Button">
+      <!-- eslint-disable-next-line vue/prefer-true-attribute-shorthand -->
+      <CopilotHeader :has-messages="true" />
+    </Variant>
+  </Story>
+</template>
@@ -1,13 +1,11 @@
 <script setup>
 import Button from '../button/Button.vue';
-
 defineProps({
  hasMessages: {
    type: Boolean,
    default: false,
  },
 });
-
 defineEmits(['reset', 'close']);
 </script>

@@ -25,16 +23,9 @@ defineEmits(['reset', 'close']);
          icon="i-lucide-plus"
          ghost
          sm
-          tooltip-text="Create a new conversation"
          @click="$emit('reset')"
        />
-        <Button
-          icon="i-lucide-x"
-          ghost
-          sm
-          tooltip-text="Close Copilot"
-          @click="$emit('close')"
-        />
+        <Button icon="i-lucide-x" ghost sm @click="$emit('close')" />
      </div>
    </div>
  </div>
@@ -18,11 +18,11 @@ const sendMessage = () => {
      v-model="message"
      type="text"
      :placeholder="$t('CAPTAIN.COPILOT.SEND_MESSAGE')"
-      class="w-full reset-base bg-n-alpha-3 px-4 py-3 pr-12 text-n-slate-11 text-sm border border-n-weak rounded-lg focus:outline-none focus:ring-1 focus:ring-n-blue-11 focus:border-n-blue-11"
+      class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-n-slate-11 text-sm border border-n-weak rounded-lg focus:outline-none focus:ring-1 focus:ring-n-blue-11 focus:border-n-blue-11"
      @keyup.enter="sendMessage"
    />
    <button
-      class="absolute right-1 top-1/2 -translate-y-1/2 h-9 w-10 flex items-center justify-center text-n-slate-11 hover:text-n-blue-11"
+      class="absolute ltr:right-1 rtl:left-1 top-1/2 -translate-y-1/2 h-9 w-10 flex items-center justify-center text-n-slate-11 hover:text-n-blue-11"
      type="submit"
    >
      <i class="i-ph-arrow-up" />
@@ -0,0 +1,25 @@
+<script setup>
+import Icon from '../../components-next/icon/Icon.vue';
+defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2 p-3 rounded-lg bg-n-background/50 border border-n-weak hover:bg-n-background/80 transition-colors duration-200"
+  >
+    <div class="flex items-start gap-2">
+      <Icon
+        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">
+        {{ content }}
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,34 @@
+<script setup>
+import CopilotThinkingGroup from './CopilotThinkingGroup.vue';
+
+const messages = [
+  {
+    id: 1,
+    content: 'Analyzing the user query',
+    reasoning: 'Breaking down the request into actionable steps',
+  },
+  {
+    id: 2,
+    content: 'Searching codebase',
+    reasoning: 'Looking for relevant files and functions',
+  },
+  {
+    id: 3,
+    content: 'Generating response',
+    reasoning: 'Composing a helpful and accurate answer',
+  },
+];
+</script>
+
+<template>
+  <Story title="Captain/Copilot/CopilotThinkingGroup" group="components">
+    <Variant title="Default">
+      <CopilotThinkingGroup :messages="messages" />
+    </Variant>
+
+    <Variant title="With Default Collapsed">
+      <!-- eslint-disable-next-line -->
+      <CopilotThinkingGroup :messages="messages" :default-collapsed="true" />
+    </Variant>
+  </Story>
+</template>
@@ -2,19 +2,19 @@
 import { ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Icon from '../icon/Icon.vue';
-import CopilotThinkingBlock from 'dashboard/components/copilot/CopilotThinkingBlock.vue';
+import CopilotThinkingBlock from './CopilotThinkingBlock.vue';

 const props = defineProps({
  messages: { type: Array, required: true },
-  hasAssistantMessageAfter: { type: Boolean, default: false },
+  defaultCollapsed: { type: Boolean, default: false },
 });
 const { t } = useI18n();
-const isExpanded = ref(!props.hasAssistantMessageAfter);
+const isExpanded = ref(!props.defaultCollapsed);

 const thinkingCount = computed(() => props.messages.length);

 watch(
-  () => props.hasAssistantMessageAfter,
+  () => props.defaultCollapsed,
  newValue => {
    if (newValue) {
      isExpanded.value = false;
@@ -458,6 +458,10 @@
            "PLACEHOLDER": "Add Twitter"
          }
        }
+      },
+      "DELETE_CONTACT": {
+        "MESSAGE": "This action is permanent and irreversible.",
+        "BUTTON": "Delete now"
      }
    },
    "DETAILS": {
@@ -467,7 +471,7 @@
      "DELETE_CONTACT": "Delete contact",
      "DELETE_DIALOG": {
        "TITLE": "Confirm Deletion",
-        "DESCRIPTION": "Are you sure you want to delete this {contactName} contact?",
+        "DESCRIPTION": "Are you sure you want to delete this contact?",
        "CONFIRM": "Yes, Delete",
        "API": {
          "SUCCESS_MESSAGE": "Contact deleted successfully",