feat: Vite + vue 3 💚 (#10047)

Fixes https://github.com/chatwoot/chatwoot/issues/8436 Fixes https://github.com/chatwoot/chatwoot/issues/9767 Fixes https://github.com/chatwoot/chatwoot/issues/10156 Fixes https://github.com/chatwoot/chatwoot/issues/6031 Fixes https://github.com/chatwoot/chatwoot/issues/5696 Fixes https://github.com/chatwoot/chatwoot/issues/9250 Fixes https://github.com/chatwoot/chatwoot/issues/9762 --------- Co-authored-by: Pranav <pranavrajs@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2024-10-02 13:06:30 +05:30
parent e0bf2bd9d4
commit 42f6621afb
661 changed files with 15939 additions and 31194 deletions
--- a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
+++ b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
@@ -1,5 +1,5 @@
 <script>
-import { useAlert } from 'dashboard/composables';
+import { useAlert, useTrack } from 'dashboard/composables';
 import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';

 import ContactAPI from 'dashboard/api/contacts';
@@ -53,7 +53,7 @@ export default {
      }
    },
    async onMergeContacts(parentContactId) {
-      this.$track(CONTACTS_EVENTS.MERGED_CONTACTS);
+      useTrack(CONTACTS_EVENTS.MERGED_CONTACTS);
      try {
        await this.$store.dispatch('contacts/merge', {
          childId: this.primaryContact.id,
--- a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
@@ -70,7 +70,7 @@ export default {
    />
    <form class="w-full" @submit.prevent="addCustomAttribute">
      <woot-input
-        v-model.trim="attributeName"
+        v-model="attributeName"
        :class="{ error: v$.attributeName.$error }"
        class="w-full"
        :error="attributeNameError"
@@ -79,7 +79,7 @@ export default {
        @input="v$.attributeName.$touch"
      />
      <woot-input
-        v-model.trim="attributeValue"
+        v-model="attributeValue"
        class="w-full"
        :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
--- a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
@@ -57,7 +57,7 @@ export default {
      </h2>
      <h3 class="text-base contact--work">
        {{ contact.title }}
-        <i v-if="company.name" class="icon ion-minus-round" />
+        <i v-if="company.name" class="i-lucide-circle-minus" />
        <span class="company-name">{{ company.name }}</span>
      </h3>
      <p v-if="additionalAttributes.description" class="contact--bio">
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -1,6 +1,6 @@
 <script>
-import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';

 import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
 import ContactDropdownItem from './ContactDropdownItem.vue';
@@ -97,7 +97,7 @@ export default {
            open-direction="top"
            @search-change="searchChange"
          >
-            <template slot="singleLabel" slot-scope="props">
+            <template #singleLabel="props">
              <ContactDropdownItem
                :thumbnail="props.option.thumbnail"
                :identifier="props.option.id"
@@ -106,7 +106,7 @@ export default {
                :phone-number="props.option.phone_number"
              />
            </template>
-            <template slot="option" slot-scope="props">
+            <template #option="props">
              <ContactDropdownItem
                :thumbnail="props.option.thumbnail"
                :identifier="props.option.id"
@@ -145,14 +145,14 @@ export default {
            />
          </label>
          <multiselect
-            :value="primaryContact"
+            :model-value="primaryContact"
            disabled
            :options="[]"
            :show-labels="false"
            label="name"
            track-by="id"
          >
-            <template slot="singleLabel" slot-scope="props">
+            <template #singleLabel="props">
              <ContactDropdownItem
                :thumbnail="props.option.thumbnail"
                :name="props.option.name"
--- a/app/javascript/dashboard/modules/contact/stories/AddCustomAttribute.stories.js
+++ b/app/javascript/dashboard/modules/contact/stories/AddCustomAttribute.stories.js
@@ -1,32 +0,0 @@
-import AddCustomAttribute from '../components/AddCustomAttribute';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Contact/AddCustomAttribute',
-  component: AddCustomAttribute,
-  argTypes: {
-    show: {
-      defaultValue: true,
-      control: {
-        type: 'boolean',
-      },
-    },
-    isCreating: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AddCustomAttribute },
-  template: '<add-custom-attribute v-bind="$props" @create="onCreate" />',
-});
-
-export const DefaultAttribute = Template.bind({});
-DefaultAttribute.args = {
-  onCreate: action('edit'),
-};
--- a/app/javascript/dashboard/modules/contact/stories/ContactAttribute.stories.js
+++ b/app/javascript/dashboard/modules/contact/stories/ContactAttribute.stories.js
@@ -1,43 +0,0 @@
-import ContactAttribute from '../components/ContactAttribute';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Contact/ContactAttribute',
-  component: ContactAttribute,
-  argTypes: {
-    label: {
-      defaultValue: 'Email',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      defaultValue: 'dwight@schrute.farms',
-      control: {
-        type: 'text',
-      },
-    },
-    icon: {
-      defaultValue: 'ion-email',
-      control: {
-        type: 'text',
-      },
-    },
-    showEdit: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactAttribute },
-  template: '<contact-attribute v-bind="$props" @update="onEdit" />',
-});
-
-export const DefaultAttribute = Template.bind({});
-DefaultAttribute.args = {
-  onEdit: action('edit'),
-};
--- a/app/javascript/dashboard/modules/contact/stories/ContactFields.stories.js
+++ b/app/javascript/dashboard/modules/contact/stories/ContactFields.stories.js
@@ -1,43 +0,0 @@
-import ContactFields from '../components/ContactFields';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Contact/ContactFields',
-  component: ContactFields,
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactFields },
-  template:
-    '<contact-fields v-bind="$props" :contact="contact" @update="onUpdate" @create-attribute="onCreate" />',
-});
-
-export const DefaultContactFields = Template.bind({});
-DefaultContactFields.args = {
-  contact: {
-    id: 979442,
-    name: 'Eden Hazard',
-    title: 'Playmaker',
-    thumbnail: 'https://randomuser.me/api/portraits/men/19.jpg',
-    company: {
-      id: 10,
-      name: 'Chelsea',
-    },
-    email: 'hazard@chelsea.com',
-    availability_status: 'offline',
-    phone_number: '',
-    custom_attributes: {},
-    additional_attributes: {
-      description:
-        'Known for his dribbling, he is considered to be one of the best players in the world.',
-      social_profiles: {
-        twitter: 'hazardeden10',
-        facebook: 'hazardeden10',
-        linkedin: 'hazardeden10',
-      },
-    },
-  },
-  onUpdate: action('update'),
-  onCreate: action('create'),
-};
--- a/app/javascript/dashboard/modules/contact/stories/ContactIntro.stories.js
+++ b/app/javascript/dashboard/modules/contact/stories/ContactIntro.stories.js
@@ -1,43 +0,0 @@
-import ContactIntro from '../components/ContactIntro';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Contact/ContactIntro',
-  component: ContactIntro,
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactIntro },
-  template:
-    '<contact-intro v-bind="$props" @edit="onEdit" @message="onNewMessage" />',
-});
-
-export const DefaultContactIntro = Template.bind({});
-DefaultContactIntro.args = {
-  contact: {
-    id: 979442,
-    name: 'Eden Hazard',
-    title: 'Playmaker',
-    thumbnail: 'https://randomuser.me/api/portraits/men/19.jpg',
-    company: {
-      id: 10,
-      name: 'Chelsea',
-    },
-    email: 'hazard@chelsea.com',
-    availability_status: 'offline',
-    phone_number: '',
-    custom_attributes: {},
-    additional_attributes: {
-      description:
-        'Known for his dribbling, he is considered to be one of the best players in the world.',
-      social_profiles: {
-        twitter: 'hazardeden10',
-        facebook: 'hazardeden10',
-        linkedin: 'hazardeden10',
-      },
-    },
-  },
-  onEdit: action('edit'),
-  onNewMessage: action('new message 💬'),
-};
--- a/app/javascript/dashboard/modules/contact/stories/MergeContact.stories.js
+++ b/app/javascript/dashboard/modules/contact/stories/MergeContact.stories.js
@@ -1,32 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import MergeContact from 'dashboard/modules/contact/components/MergeContact';
-
-export default {
-  title: 'Components/Contact/MergeContacts',
-  component: MergeContact,
-  argTypes: {
-    'primary-contact': {
-      defaultValue: '{}',
-      control: {
-        type: 'object',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MergeContact },
-  template:
-    '<merge-contact v-bind="$props" @submit="onSearch" @search="onSubmit"></merge-contact>',
-});
-
-export const List = Template.bind({});
-List.args = {
-  primaryContact: {
-    id: 12,
-    name: 'Mason Mount',
-  },
-  onSearch: action('Search'),
-  onSubmit: action('Submit'),
-};
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -2,6 +2,7 @@
 import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
 import AddCannedModal from 'dashboard/routes/dashboard/settings/canned/AddCanned.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { conversationUrl, frontendURL } from '../../../helper/URLHelper';
@@ -11,12 +12,14 @@ import {
 } from '../../../helper/AnalyticsHelper/events';
 import TranslateModal from 'dashboard/components/widgets/conversation/bubble/TranslateModal.vue';
 import MenuItem from '../../../components/widgets/conversation/contextMenu/menuItem.vue';
+import { useTrack } from 'dashboard/composables';

 export default {
  components: {
    AddCannedModal,
    TranslateModal,
    MenuItem,
+    ContextMenu,
  },
  props: {
    message: {
@@ -92,7 +95,7 @@ export default {
      this.handleClose();
    },
    showCannedResponseModal() {
-      this.$track(ACCOUNT_EVENTS.ADDED_TO_CANNED_RESPONSE);
+      useTrack(ACCOUNT_EVENTS.ADDED_TO_CANNED_RESPONSE);
      this.isCannedResponseModalOpen = true;
    },
    hideCannedResponseModal() {
@@ -112,7 +115,7 @@ export default {
        messageId: this.messageId,
        targetLanguage: locale || 'en',
      });
-      this.$track(CONVERSATION_EVENTS.TRANSLATE_A_MESSAGE);
+      useTrack(CONVERSATION_EVENTS.TRANSLATE_A_MESSAGE);
      this.handleClose();
      this.showTranslateModal = true;
    },
@@ -185,7 +188,7 @@ export default {
      size="small"
      @click="handleOpen"
    />
-    <woot-context-menu
+    <ContextMenu
      v-if="isOpen && !isCannedResponseModalOpen"
      :x="contextMenuPosition.x"
      :y="contextMenuPosition.y"
@@ -199,7 +202,7 @@ export default {
            label: $t('CONVERSATION.CONTEXT_MENU.REPLY_TO'),
          }"
          variant="icon"
-          @click="handleReplyTo"
+          @click.stop="handleReplyTo"
        />
        <MenuItem
          v-if="enabledOptions['copy']"
@@ -208,7 +211,7 @@ export default {
            label: $t('CONVERSATION.CONTEXT_MENU.COPY'),
          }"
          variant="icon"
-          @click="handleCopy"
+          @click.stop="handleCopy"
        />
        <MenuItem
          v-if="enabledOptions['copy']"
@@ -217,7 +220,7 @@ export default {
            label: $t('CONVERSATION.CONTEXT_MENU.TRANSLATE'),
          }"
          variant="icon"
-          @click="handleTranslate"
+          @click.stop="handleTranslate"
        />
        <hr />
        <MenuItem
@@ -226,7 +229,7 @@ export default {
            label: $t('CONVERSATION.CONTEXT_MENU.COPY_PERMALINK'),
          }"
          variant="icon"
-          @click="copyLinkToMessage"
+          @click.stop="copyLinkToMessage"
        />
        <MenuItem
          v-if="enabledOptions['cannedResponse']"
@@ -235,7 +238,7 @@ export default {
            label: $t('CONVERSATION.CONTEXT_MENU.CREATE_A_CANNED_RESPONSE'),
          }"
          variant="icon"
-          @click="showCannedResponseModal"
+          @click.stop="showCannedResponseModal"
        />
        <hr v-if="enabledOptions['delete']" />
        <MenuItem
@@ -245,10 +248,10 @@ export default {
            label: $t('CONVERSATION.CONTEXT_MENU.DELETE'),
          }"
          variant="icon"
-          @click="openDeleteModal"
+          @click.stop="openDeleteModal"
        />
      </div>
-    </woot-context-menu>
+    </ContextMenu>
  </div>
 </template>

--- a/app/javascript/dashboard/modules/notes/stories/AddNote.stories.js
+++ b/app/javascript/dashboard/modules/notes/stories/AddNote.stories.js
@@ -1,19 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import AddNote from '../components/AddNote.vue';
-
-export default {
-  title: 'Components/Notes/Add',
-  component: AddNote,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AddNote },
-  template: '<add-note v-bind="$props" @add="onAdd"></add-note>',
-});
-
-export const Add = Template.bind({});
-Add.args = {
-  onAdd: action('Added'),
-};
--- a/app/javascript/dashboard/modules/notes/stories/ContactNote.stories.js
+++ b/app/javascript/dashboard/modules/notes/stories/ContactNote.stories.js
@@ -1,52 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import ContactNote from '../components/ContactNote.vue';
-
-export default {
-  title: 'Components/Notes/Note',
-  component: ContactNote,
-  argTypes: {
-    id: {
-      control: {
-        type: 'number',
-      },
-    },
-    note: {
-      defaultValue:
-        'A copy and paste musical notes symbols & music symbols collection for easy access.',
-      control: {
-        type: 'text',
-      },
-    },
-    userName: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    timeStamp: {
-      defaultValue: 1618046084,
-      control: {
-        type: 'number',
-      },
-    },
-    thumbnail: {
-      defaultValue: 'https://randomuser.me/api/portraits/men/62.jpg',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactNote },
-  template:
-    '<contact-note v-bind="$props" @edit="onEdit" @delete="onDelete"></contact-note>',
-});
-
-export const Note = Template.bind({});
-Note.args = {
-  onEdit: action('Edit'),
-  onDelete: action('Delete'),
-};
--- a/app/javascript/dashboard/modules/notes/stories/NoteList.stories.js
+++ b/app/javascript/dashboard/modules/notes/stories/NoteList.stories.js
@@ -1,45 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import NoteList from '../components/NoteList';
-
-export default {
-  title: 'Components/Notes/List',
-  component: NoteList,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { NoteList },
-  template:
-    '<note-list v-bind="$props" @addNote="onAddNote" @editNote="onEditNote" @deleteNote="onDeleteNote" @show="onClick"></note-list>',
-});
-
-export const List = Template.bind({});
-List.args = {
-  onClick: action('show'),
-  onAddNote: action('added'),
-  onEditNote: action('edit'),
-  onDeleteNote: action('deleted'),
-  notes: [
-    {
-      id: '12345',
-      content:
-        'It is a long established fact that a reader will be distracted.',
-      user: {
-        name: 'John Doe',
-        thumbnail: 'https://randomuser.me/api/portraits/men/69.jpg',
-      },
-      created_at: 1618046084,
-    },
-    {
-      id: '12346',
-      content:
-        'It is simply dummy text of the printing and typesetting industry.',
-      user: {
-        name: 'Pearl Cruz',
-        thumbnail: 'https://randomuser.me/api/portraits/women/29.jpg',
-      },
-      created_at: 1616046076,
-    },
-  ],
-};
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -10,7 +10,7 @@ export default {
    this.$refs.searchInput.focus();
    document.addEventListener('keydown', this.handler);
  },
-  beforeDestroy() {
+  unmounted() {
    document.removeEventListener('keydown', this.handler);
  },
  methods: {
--- a/app/javascript/dashboard/modules/search/components/SearchTabs.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
@@ -35,8 +35,9 @@ export default {
  <div class="tab-container">
    <woot-tabs :index="activeTab" :border="false" @change="onTabChange">
      <woot-tabs-item
-        v-for="item in tabs"
+        v-for="(item, index) in tabs"
        :key="item.key"
+        :index="index"
        :name="item.name"
        :count="item.count"
      />
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -4,6 +4,7 @@ import SearchTabs from './SearchTabs.vue';
 import SearchResultConversationsList from './SearchResultConversationsList.vue';
 import SearchResultMessagesList from './SearchResultMessagesList.vue';
 import SearchResultContactsList from './SearchResultContactsList.vue';
+import { useTrack } from 'dashboard/composables';
 import Policy from 'dashboard/components/policy.vue';
 import {
  ROLES,
@@ -17,6 +18,7 @@ import {

 import { mapGetters } from 'vuex';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
+
 export default {
  components: {
    SearchHeader,
@@ -169,7 +171,7 @@ export default {
      return this.selectedTab === 'all';
    },
  },
-  beforeDestroy() {
+  unmounted() {
    this.query = '';
    this.$store.dispatch('conversationSearch/clearSearchResults');
  },
@@ -184,7 +186,7 @@ export default {
        this.$store.dispatch('conversationSearch/clearSearchResults');
        return;
      }
-      this.$track(CONVERSATION_EVENTS.SEARCH_CONVERSATION);
+      useTrack(CONVERSATION_EVENTS.SEARCH_CONVERSATION);
      this.$store.dispatch('conversationSearch/fullSearch', { q });
    },
    onBack() {
--- a/app/javascript/dashboard/modules/search/search.routes.js
+++ b/app/javascript/dashboard/modules/search/search.routes.js
@@ -1,4 +1,3 @@
-/* eslint-disable storybook/default-exports */
 import { frontendURL } from '../../helper/URLHelper';
 import {
  ROLES,
--- a/app/javascript/dashboard/modules/search/stories/MessageContent.stories.js
+++ b/app/javascript/dashboard/modules/search/stories/MessageContent.stories.js
@@ -1,28 +0,0 @@
-import MessageContent from '../components/MessageContent.vue';
-
-export default {
-  title: 'Components/Search/MessageContent',
-  component: MessageContent,
-  argTypes: {
-    content: {
-      defaultValue: '123',
-      control: {
-        type: 'text',
-      },
-    },
-    author: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MessageContent },
-  template: '<message-content v-bind="$props"></message-content>',
-});
-
-export const MessageResultItem = Template.bind({});
--- a/app/javascript/dashboard/modules/search/stories/SearchResultContactItem.stories.js
+++ b/app/javascript/dashboard/modules/search/stories/SearchResultContactItem.stories.js
@@ -1,53 +0,0 @@
-import SearchResultContactItem from '../components/SearchResultContactItem.vue';
-
-export default {
-  title: 'Components/Search/SearchResultContactItem',
-  component: SearchResultContactItem,
-  argTypes: {
-    id: {
-      defaultValue: '123',
-      control: {
-        type: 'text',
-      },
-    },
-    name: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    email: {
-      defaultValue: 'johndoe@faster.com',
-      control: {
-        type: 'text',
-      },
-    },
-    phone: {
-      defaultValue: '+1 123 456 7890',
-      control: {
-        type: 'text',
-      },
-    },
-    accountId: {
-      defaultValue: '7890',
-      control: {
-        type: 'text',
-      },
-    },
-    thumbnail: {
-      defaultValue: 'https://randomuser.me/api/portraits/men/62.jpg',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { SearchResultContactItem },
-  template:
-    '<search-result-contact-item v-bind="$props"></search-result-contact-item>',
-});
-
-export const ResultContactItem = Template.bind({});
--- a/app/javascript/dashboard/modules/search/stories/SearchResultConversationItem.stories.js
+++ b/app/javascript/dashboard/modules/search/stories/SearchResultConversationItem.stories.js
@@ -1,50 +0,0 @@
-import SearchResultConversationItem from '../components/SearchResultConversationItem.vue';
-
-export default {
-  title: 'Components/Search/SearchResultConversationItem',
-  component: SearchResultConversationItem,
-  argTypes: {
-    id: {
-      defaultValue: '123',
-      control: {
-        type: 'text',
-      },
-    },
-    name: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    inbox: {
-      defaultValue: {
-        name: 'Livechat',
-        channel_type: 'Channel::WebWidget',
-      },
-      control: {
-        type: 'object',
-      },
-    },
-    accountId: {
-      defaultValue: '7890',
-      control: {
-        type: 'text',
-      },
-    },
-    createdAt: {
-      defaultValue: '1677672962',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { SearchResultConversationItem },
-  template:
-    '<search-result-conversation-item v-bind="$props"></search-result-conversation-item>',
-});
-
-export const ResultConversationItem = Template.bind({});
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
@@ -45,7 +45,7 @@ export default {
 </template>

 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables.scss';
+@import 'dashboard/assets/scss/variables.scss';
 .footer-wrap {
  width: 100%;
  display: flex;
--- a/app/javascript/dashboard/modules/widget-preview/stories/Widget.stories.js
+++ b/app/javascript/dashboard/modules/widget-preview/stories/Widget.stories.js
@@ -1,29 +0,0 @@
-import Widget from '../components/Widget';
-
-const ReplyTime = {
-  'In a few minutes': 'in_a_few_minutes',
-  'In a few hours': 'in_a_few_hours',
-  'In a few day': 'in_a_day',
-};
-
-export default {
-  title: 'components/Widget',
-  component: Widget,
-  argTypes: {
-    replyTime: {
-      control: {
-        type: 'select',
-        options: ReplyTime,
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Widget },
-  template: '<Widget v-bind="$props" />',
-});
-
-export const DefaultWidget = Template.bind({});
-DefaultWidget.args = {};