feat: Create a new conversation from the contact panel (#2019)

* Chore: Improve button component styles

app/javascript/dashboard/store/modules/contactConversations.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import * as types from '../mutation-types';
 import ContactAPI from '../../api/contacts';
+import ConversationApi from '../../api/conversations';
 
 const state = {
   records: {},
@@ -19,6 +20,30 @@ export const getters = {
 };
 
 export const actions = {
+  create: async ({ commit }, params) => {
+    commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
+      isCreating: true,
+    });
+    const { inboxId, message, contactId, sourceId } = params;
+    try {
+      const { data } = await ConversationApi.create({
+        inbox_id: inboxId,
+        contact_id: contactId,
+        source_id: sourceId,
+        message,
+      });
+      commit(types.default.ADD_CONTACT_CONVERSATION, {
+        id: contactId,
+        data,
+      });
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
+        isCreating: false,
+      });
+    }
+  },
   get: async ({ commit }, contactId) => {
     commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
       isFetching: true,
@@ -53,6 +78,10 @@ export const mutations = {
   [types.default.SET_CONTACT_CONVERSATIONS]: ($state, { id, data }) => {
     Vue.set($state.records, id, data);
   },
+  [types.default.ADD_CONTACT_CONVERSATION]: ($state, { id, data }) => {
+    const conversations = $state.records[id] || [];
+    Vue.set($state.records, id, [...conversations, data]);
+  },
 };
 
 export default {