Merge branch 'develop' into feat/voice-as-twilio-capability

2026-04-17 12:16:55 +04:00
parent 94766e1200 5e82f24be5
commit 3b89787c7f
663 changed files with 29699 additions and 495 deletions
@@ -103,6 +103,7 @@ const showPagination = computed(() => {
          <ContactsActiveFiltersPreview
            v-if="showActiveFiltersPreview"
            :active-segment="activeSegment"
+            class="mb-1"
            @clear-filters="emit('clearFilters')"
            @open-filter="openFilter"
          />
@@ -57,7 +57,7 @@ useKeyboardEvents(keyboardEvents);

 <template>
  <ButtonGroup
-    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2/90 backdrop-blur-lg border border-n-weak/50 rounded-full gap-1.5 p-1.5 shadow-sm transition-shadow duration-200 hover:shadow"
+    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2/90 backdrop-blur-lg border border-n-weak/50 rounded-full gap-1.5 p-1.5 shadow-sm transition-shadow duration-200 hover:shadow !z-20"
  >
    <Button
      v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { debounce } from '@chatwoot/utils';
 import { useI18n } from 'vue-i18n';
 import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
@@ -27,7 +27,6 @@ const props = defineProps({

 const emit = defineEmits([
  'saveArticle',
-  'saveArticleAsync',
  'goBack',
  'setAuthor',
  'setCategory',
@@ -39,42 +38,37 @@ const { t } = useI18n();

 const isNewArticle = computed(() => !props.article?.id);

-const saveAndSync = value => {
-  emit('saveArticle', value);
-};
+const localTitle = ref(props.article?.title ?? '');
+const localContent = ref(props.article?.content ?? '');

-// this will only send the data to the backend
-// but will not update the local state preventing unnecessary re-renders
-// since the data is already saved and we keep the editor text as the source of truth
-const quickSave = debounce(
-  value => emit('saveArticleAsync', value),
-  400,
-  false
+// Sync local state when navigating to a different article or on initial fetch
+watch(
+  () => props.article?.id,
+  newId => {
+    if (newId) {
+      localTitle.value = props.article?.title ?? '';
+      localContent.value = props.article?.content ?? '';
+    }
+  }
 );

-// 2.5 seconds is enough to know that the user has stopped typing and is taking a pause
-// so we can save the data to the backend and retrieve the updated data
-// this will update the local state with response data
-// Only use to save for existing articles
-const saveAndSyncDebounced = debounce(saveAndSync, 2500, false);
+const debouncedSave = debounce(value => emit('saveArticle', value), 500, false);

 const handleSave = value => {
  if (isNewArticle.value) return;
-  quickSave(value);
-  saveAndSyncDebounced(value);
+  debouncedSave(value);
 };

 const articleTitle = computed({
-  get: () => props.article.title,
+  get: () => localTitle.value,
  set: value => {
+    localTitle.value = value;
    handleSave({ title: value });
  },
 });

-const localContent = ref(props.article.content || '');
-
 const articleContent = computed({
-  get: () => props.article.content,
+  get: () => localContent.value,
  set: content => {
    localContent.value = content;
    handleSave({ content });
@@ -132,7 +126,7 @@ const handleCreateArticle = event => {
        />
        <ArticleEditorControls
          :article="article"
-          @save-article="saveAndSync"
+          @save-article="values => emit('saveArticle', values)"
          @set-author="setAuthorId"
          @set-category="setCategoryId"
        />
@@ -167,8 +161,12 @@ const handleCreateArticle = event => {
  }

  .editor-root .has-selection {
+    .ProseMirror-menubar:not(:has(*)) {
+      display: none !important;
+    }
+
    .ProseMirror-menubar {
-      @apply h-8 rounded-lg !px-2 z-50 bg-n-solid-3 items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
+      @apply rounded-lg !px-3 !py-1.5 z-50 bg-n-background items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
      display: flex;
      top: var(--selection-top, auto) !important;
      left: var(--selection-left, 0) !important;
@@ -176,15 +174,10 @@ const handleCreateArticle = event => {
      position: absolute !important;

      .ProseMirror-menuitem {
-        @apply mr-0;
+        @apply ltr:mr-0 rtl:ml-0 size-4 flex items-center;

        .ProseMirror-icon {
-          @apply p-0 mt-0 !mr-0;
-
-          svg {
-            width: 20px !important;
-            height: 20px !important;
-          }
+          @apply p-0.5 flex-shrink-0 ltr:mr-2 rtl:ml-2;
        }
      }

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, useSlots } from 'vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Button from 'dashboard/components-next/button/Button.vue';

@@ -30,23 +30,40 @@ const modelValue = defineModel({
 });

 const selectedCount = computed(() => modelValue.value.size);
-const totalCount = computed(() => props.allItems.length);
-
+const visibleItemIds = computed(() => props.allItems.map(item => item.id));
+const visibleItemCount = computed(() => visibleItemIds.value.length);
+const selectedVisibleCount = computed(
+  () => visibleItemIds.value.filter(id => modelValue.value.has(id)).length
+);
 const hasSelected = computed(() => selectedCount.value > 0);
 const isIndeterminate = computed(
-  () => hasSelected.value && selectedCount.value < totalCount.value
+  () =>
+    selectedVisibleCount.value > 0 &&
+    selectedVisibleCount.value < visibleItemCount.value
 );
 const allSelected = computed(
-  () => totalCount.value > 0 && selectedCount.value === totalCount.value
+  () =>
+    visibleItemCount.value > 0 &&
+    selectedVisibleCount.value === visibleItemCount.value
 );

+const slots = useSlots();
+const hasSecondaryActions = computed(() => Boolean(slots['secondary-actions']));
+
 const bulkCheckboxState = computed({
  get: () => allSelected.value,
  set: shouldSelectAll => {
-    const newSelectedIds = shouldSelectAll
-      ? new Set(props.allItems.map(item => item.id))
-      : new Set();
-    modelValue.value = newSelectedIds;
+    if (!visibleItemCount.value) {
+      return;
+    }
+
+    const updatedSelection = new Set(modelValue.value);
+    if (shouldSelectAll) {
+      visibleItemIds.value.forEach(id => updatedSelection.add(id));
+    } else {
+      visibleItemIds.value.forEach(id => updatedSelection.delete(id));
+    }
+    modelValue.value = updatedSelection;
  },
 });
 </script>
@@ -63,7 +80,7 @@ const bulkCheckboxState = computed({
      v-if="hasSelected"
      class="flex items-center gap-3 py-1 ltr:pl-3 rtl:pr-3 ltr:pr-4 rtl:pl-4 rounded-lg bg-n-solid-2 outline outline-1 outline-n-container shadow"
    >
-      <div class="flex items-center gap-3">
+      <div class="flex items-center gap-3 min-w-0">
        <div class="flex items-center gap-1.5 min-w-0">
          <Checkbox
            v-model="bulkCheckboxState"
@@ -78,21 +95,23 @@ const bulkCheckboxState = computed({
        <span class="text-sm text-n-slate-10 truncate tabular-nums">
          {{ selectedCountLabel }}
        </span>
-        <div class="h-4 w-px bg-n-strong" />
-        <slot name="secondary-actions" />
      </div>
      <div class="flex items-center gap-3">
-        <slot name="actions" :selected-count="selectedCount">
-          <Button
-            :label="deleteLabel"
-            sm
-            ruby
-            ghost
-            class="!px-1.5"
-            icon="i-lucide-trash"
-            @click="emit('bulkDelete')"
-          />
-        </slot>
+        <slot v-if="hasSecondaryActions" name="secondary-actions" />
+        <div v-if="hasSecondaryActions" class="h-4 w-px bg-n-strong" />
+        <div class="flex items-center gap-3">
+          <slot name="actions" :selected-count="selectedCount">
+            <Button
+              :label="deleteLabel"
+              sm
+              ruby
+              ghost
+              class="!px-1.5"
+              icon="i-lucide-trash"
+              @click="emit('bulkDelete')"
+            />
+          </slot>
+        </div>
      </div>
    </div>
    <div v-else class="flex items-center gap-3">
@@ -36,7 +36,13 @@ const props = defineProps({
  },
 });

-const emit = defineEmits(['enterPress', 'input', 'blur', 'focus']);
+const emit = defineEmits([
+  'enterPress',
+  'escapePress',
+  'input',
+  'blur',
+  'focus',
+]);

 const modelValue = defineModel({
  type: [String, Number],
@@ -49,6 +55,10 @@ const onEnterPress = () => {
  emit('enterPress');
 };

+const onEscapePress = () => {
+  emit('escapePress');
+};
+
 const handleInput = event => {
  emit('input', event.target.value);
  modelValue.value = event.target.value;
@@ -102,6 +112,7 @@ defineExpose({
      @focus="handleFocus"
      @blur="handleBlur"
      @keydown.enter.prevent="onEnterPress"
+      @keydown.escape.prevent="onEscapePress"
    />
  </div>
 </template>
@@ -250,6 +250,12 @@ const menuItems = computed(() => {
          activeOn: ['conversation_through_mentions'],
          to: accountScopedRoute('conversation_mentions'),
        },
+        {
+          name: 'Participating',
+          label: t('SIDEBAR.PARTICIPATING_CONVERSATIONS'),
+          activeOn: ['conversation_through_participating'],
+          to: accountScopedRoute('conversation_participating'),
+        },
        {
          name: 'Unattended',
          activeOn: ['conversation_through_unattended'],
@@ -158,9 +158,11 @@ const activeChild = computed(() => {
    return rankedPage ?? activeOnPages[0];
  }

-  return navigableChildren.value.find(
-    child => child.to && route.path.startsWith(resolvePath(child.to))
-  );
+  return navigableChildren.value.find(child => {
+    if (!child.to) return false;
+    const childPath = resolvePath(child.to);
+    return route.path === childPath || route.path.startsWith(`${childPath}/`);
+  });
 });

 const hasActiveChild = computed(() => {