feat: Support variables in canned response (#6077)

- Added the option to insert variables in canned responses.
- Populate variables on selecting a canned response.
- Show a warning if there are any undefined variables in the message before sending a message.

app/javascript/dashboard/components/widgets/conversation/VariableList.vue

@@ -0,0 +1,37 @@
+<template>
+  <mention-box :items="items" @mention-select="handleVariableClick" />
+</template>
+
+<script>
+import { MESSAGE_VARIABLES } from 'shared/constants/messages';
+import MentionBox from '../mentions/MentionBox.vue';
+
+export default {
+  components: { MentionBox },
+  props: {
+    searchKey: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    items() {
+      return MESSAGE_VARIABLES.filter(variable => {
+        return (
+          variable.label.includes(this.searchKey) ||
+          variable.key.includes(this.searchKey)
+        );
+      }).map(variable => ({
+        label: variable.key,
+        key: variable.key,
+        description: variable.label,
+      }));
+    },
+  },
+  methods: {
+    handleVariableClick(item = {}) {
+      this.$emit('click', item.key);
+    },
+  },
+};
+</script>