feat: Add compose conversation components (#10457)

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/inline-input/InlineInput.vue

@@ -1,9 +1,7 @@
 <script setup>
-defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
+import { ref, onMounted, nextTick } from 'vue';
+
+const props = defineProps({
   type: {
     type: String,
     default: 'text',
@@ -32,13 +30,49 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  focusOnMount: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['update:modelValue', 'enterPress']);
+const emit = defineEmits(['enterPress', 'input', 'blur', 'focus']);
+
+const modelValue = defineModel({
+  type: [String, Number],
+  default: '',
+});
+
+const inlineInputRef = ref(null);
 
 const onEnterPress = () => {
   emit('enterPress');
 };
+
+const handleInput = event => {
+  emit('input', event.target.value);
+  modelValue.value = event.target.value;
+};
+
+const handleBlur = event => {
+  emit('blur', event.target.value);
+};
+
+const handleFocus = event => {
+  emit('focus', event.target.value);
+};
+
+onMounted(() => {
+  nextTick(() => {
+    if (props.focusOnMount) {
+      inlineInputRef.value?.focus();
+    }
+  });
+});
+
+defineExpose({
+  focus: () => inlineInputRef.value?.focus(),
+});
 </script>
 
 <template>
@@ -49,7 +83,7 @@ const onEnterPress = () => {
       v-if="label"
       :for="id"
       :class="customLabelClass"
-      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+      class="mb-0.5 text-sm font-medium text-n-slate-11"
     >
       {{ label }}
     </label>
@@ -57,13 +91,16 @@ const onEnterPress = () => {
     <slot name="prefix" />
     <input
       :id="id"
-      :value="modelValue"
+      ref="inlineInputRef"
+      v-model="modelValue"
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
       :class="customInputClass"
-      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-lg bg-transparent dark:bg-transparent placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
-      @input="$emit('update:modelValue', $event.target.value)"
+      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
       @keydown.enter.prevent="onEnterPress"
     />
   </div>