Merge branch 'develop' into fix/article-view

app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue

@@ -90,17 +90,13 @@ export default {
       />
     </div>
     <div class="flex flex-col items-center justify-end pb-6">
-      <a
+      <PrimaryNavItem
         v-if="!isACustomBrandedInstance"
-        v-tooltip.right="$t(`SIDEBAR.DOCS`)"
-        :href="helpDocsURL"
-        class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
-        rel="noopener noreferrer nofollow"
-        target="_blank"
-      >
-        <fluent-icon icon="book-open-globe" />
-        <span class="sr-only">{{ $t(`SIDEBAR.DOCS`) }}</span>
-      </a>
+        icon="book-open-globe"
+        name="DOCS"
+        open-in-new-page
+        :to="helpDocsURL"
+      />
       <NotificationBell @open-notification-panel="openNotificationPanel" />
       <AgentDetails @toggle-menu="toggleOptions" />
       <OptionsMenu

app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue

@@ -48,7 +48,7 @@ const debouncedEmit = debounce(value => {
 
 const onSearch = value => {
   searchTerm.value = value;
-  debouncedEmit(value);
+  debouncedEmit();
 };
 
 const filteredListItems = computed(() => {

app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue

@@ -125,7 +125,7 @@ export default {
           "
           data-testid="app-title"
           @input="v$.app.title.$touch"
-          @blur="v$.app.title.$touch"
+          @blur="v$.slug.$touch"
         />
         <woot-input
           v-model="app.content.url"

app/javascript/dashboard/store/modules/contacts/mutations.js

@@ -1,5 +1,4 @@
 import types from '../../mutation-types';
-import * as Sentry from '@sentry/vue';
 
 export const mutations = {
   [types.SET_CONTACT_UI_FLAG]($state, data) {
@@ -49,23 +48,12 @@ export const mutations = {
   [types.DELETE_CONTACT]: ($state, id) => {
     const index = $state.sortOrder.findIndex(item => item === id);
     $state.sortOrder.splice(index, 1);
-    delete $state.records[id];
+    $state.records[id] = null;
   },
 
   [types.UPDATE_CONTACTS_PRESENCE]: ($state, data) => {
     Object.values($state.records).forEach(element => {
-      let availabilityStatus;
-      try {
-        availabilityStatus = data[element.id];
-      } catch (error) {
-        Sentry.setContext('contact is undefined', {
-          records: $state.records,
-          data: data,
-        });
-        Sentry.captureException(error);
-
-        return;
-      }
+      const availabilityStatus = data[element.id];
       if (availabilityStatus) {
         $state.records[element.id].availability_status = availabilityStatus;
       } else {

app/javascript/dashboard/store/modules/notifications/mutations.js

@@ -33,7 +33,7 @@ export const mutations = {
       // On reconnect, if there is existing notification with same primary_actor_id,
       // it will be deleted and the new one will be added. So it will solve with duplicate notification
       if (existingNotification) {
-        delete $state.records[existingNotification.id];
+        $state.records[existingNotification.id] = undefined;
       }
 
       $state.records[notification.id] = {
@@ -72,7 +72,7 @@ export const mutations = {
   },
   [types.DELETE_NOTIFICATION]($state, data) {
     const { notification, unread_count: unreadCount, count } = data;
-    delete $state.records[notification.id];
+    $state.records[notification.id] = undefined;
     $state.meta.unreadCount = unreadCount;
     $state.meta.count = count;
   },
@@ -83,7 +83,7 @@ export const mutations = {
   [types.DELETE_READ_NOTIFICATIONS]: $state => {
     Object.values($state.records).forEach(item => {
       if (item.read_at) {
-        delete $state.records[item.id];
+        $state.records[item.id] = undefined;
       }
     });
   },

app/javascript/design-system/histoire.scss

@@ -1,21 +0,0 @@
-@import 'dashboard/assets/scss/app';
-
-*,
-::before,
-::after {
-  --_histoire-color-primary-50: 235 245 255;
-  --_histoire-color-primary-100: 194 225 255;
-  --_histoire-color-primary-200: 153 206 255;
-  --_histoire-color-primary-300: 112 186 255;
-  --_histoire-color-primary-400: 71 166 255;
-  --_histoire-color-primary-500: 31 147 255;
-  --_histoire-color-primary-600: 25 118 204;
-  --_histoire-color-primary-700: 19 88 153;
-  --_histoire-color-primary-800: 12 59 102;
-  --_histoire-color-primary-900: 6 29 51;
-}
-
-html,
-body {
-  font-family: 'Inter', sans-serif;
-}

app/javascript/design-system/images/logo-thumbnail.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
-    <title>woot-log</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="woot-log" fill-rule="nonzero">
-            <circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
-            <path d="M362.807947,368.807947 L244.122956,368.807947 C178.699407,368.807947 125.456954,315.561812 125.456954,250.12177 C125.456954,184.703089 178.699407,131.456954 244.124143,131.456954 C309.565494,131.456954 362.807947,184.703089 362.807947,250.12177 L362.807947,368.807947 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="6" fill="#FFFFFF"></path>
-        </g>
-    </g>
-</svg>

app/javascript/histoire.setup.ts

@@ -1 +0,0 @@
-import './design-system/histoire.scss';

app/javascript/widget/router.js

@@ -34,8 +34,9 @@ export default createRouter({
           component: () => import('./views/Messages.vue'),
         },
         {
-          path: '/article',
+          path: '/article/:link',
           name: 'article-viewer',
+          props: true,
           component: () => import('./views/ArticleViewer.vue'),
         },
       ],

app/javascript/widget/views/ArticleViewer.vue

@@ -1,16 +1,16 @@
-<script>
+<script setup>
 import IframeLoader from 'shared/components/IframeLoader.vue';
 
-export default {
-  name: 'ArticleViewer',
-  components: {
-    IframeLoader,
+defineProps({
+  link: {
+    type: String,
+    required: true,
   },
-};
+});
 </script>
 
 <template>
   <div class="bg-white h-full">
-    <IframeLoader :url="$route.query.link" />
+    <IframeLoader :url="link" />
   </div>
 </template>

app/javascript/widget/views/Home.vue

@@ -79,7 +79,7 @@ export default {
       }
       this.$router.push({
         name: 'article-viewer',
-        query: { link: linkToOpen },
+        params: { link: linkToOpen },
       });
     },
     viewAllArticles() {

histoire.config.ts

@@ -1,43 +0,0 @@
-import { defineConfig } from 'histoire';
-import { HstVue } from '@histoire/plugin-vue';
-
-export default defineConfig({
-  setupFile: './histoire.setup.ts',
-  plugins: [HstVue()],
-  vite: {
-    server: {
-      port: 6179,
-    },
-  },
-  viteIgnorePlugins: ['vite-plugin-ruby'],
-  theme: {
-    darkClass: 'dark',
-    title: '@chatwoot/design',
-    logo: {
-      square: './design-system/images/logo-thumbnail.svg',
-      light: './design-system/images/logo.png',
-      dark: './design-system/images/logo-dark.png',
-    },
-  },
-  defaultStoryProps: {
-    icon: 'carbon:cube',
-    iconColor: '#1F93FF',
-    layout: {
-      type: 'grid',
-      width: '80%',
-    },
-  },
-  tree: {
-    groups: [
-      {
-        id: 'top',
-        title: '',
-      },
-      {
-        id: 'components',
-        title: 'Components',
-        include: () => true,
-      },
-    ],
-  },
-});

package.json

@@ -14,10 +14,7 @@
     "ruby:prettier": "bundle exec rubocop -a",
     "build:sdk": "BUILD_MODE=library vite build",
     "prepare": "husky install",
-    "size": "size-limit",
-    "story:dev": "histoire dev",
-    "story:build": "histoire build",
-    "story:preview": "histoire preview"
+    "size": "size-limit"
   },
   "size-limit": [
     {
@@ -100,7 +97,6 @@
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.8.1",
-    "@histoire/plugin-vue": "0.17.15",
     "@iconify-json/logos": "^1.2.0",
     "@iconify-json/lucide": "^1.2.5",
     "@size-limit/file": "^8.2.4",
@@ -117,7 +113,6 @@
     "eslint-plugin-vitest-globals": "^1.5.0",
     "eslint-plugin-vue": "^9.28.0",
     "fake-indexeddb": "^6.0.0",
-    "histoire": "0.17.15",
     "husky": "^7.0.0",
     "jsdom": "^24.1.3",
     "lint-staged": "14.0.1",

vite.config.ts

@@ -42,11 +42,6 @@ if (isLibraryMode) {
   plugins = [vue(vueOptions)];
 }
 
-const esbuildOptions = {
-  minifyIdentifiers: false,
-  keepNames: true,
-};
-
 export default defineConfig({
   plugins: plugins,
   build: {
@@ -112,5 +107,4 @@ export default defineConfig({
     mockReset: true,
     clearMocks: true,
   },
-  esbuild: isLibraryMode ? esbuildOptions : undefined,
 });