feat: kickstart message bubble

2024-11-21 16:58:46 +05:30
parent b9cb39a9dd
commit 3a4e13922a
2 changed files with 110 additions and 0 deletions
@@ -0,0 +1,49 @@
+<script setup>
+import MessageBubble from './MessageBubble.vue';
+
+const messages = [
+  {
+    variant: 'system',
+    text: 'Conversation auto-assigned to Stanley',
+    orientation: 'center',
+  },
+  {
+    variant: 'agent',
+    text: 'Hello Elizabeth, there was a recent change in our office supplies.',
+    orientation: 'right',
+  },
+  {
+    variant: 'private',
+    text: 'Should we give her a premium discount?',
+    orientation: 'right',
+  },
+  {
+    variant: 'private',
+    text: 'They have placed multiple orders already, can go ahead. @Michael thoughts?',
+    orientation: 'left',
+  },
+  {
+    variant: 'private',
+    text: 'Yes, let’s offer her a 20% discount',
+    orientation: 'left',
+  },
+  {
+    variant: 'agent',
+    text: 'If you want to buy our premium supplies, we can offer you a 20% discount! They come with indices and laser beams! ⚡',
+    orientation: 'right',
+  },
+  {
+    variant: 'user',
+    text: 'That’s great!',
+    orientation: 'left',
+  },
+];
+</script>
+
+<template>
+  <Story title="Components/Message" :layout="{ type: 'grid', width: '800' }">
+    <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid gap-2">
+      <MessageBubble v-for="message in messages" v-bind="message" />
+    </div>
+  </Story>
+</template>
@@ -0,0 +1,61 @@
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  variant: {
+    type: String,
+    required: true,
+    validator: value => ['user', 'agent', 'system', 'private'].includes(value),
+  },
+  orientation: {
+    type: String,
+    default: 'left',
+    validator: value => ['left', 'right', 'center'].includes(value),
+  },
+  text: {
+    type: String,
+    default: 'Hello World',
+  },
+});
+
+const varaintBaseMap = {
+  agent: 'bg-n-solid-blue p-3 text-n-slate-12',
+  private: 'bg-n-solid-amber p-3 text-n-amber-12',
+  user: 'bg-n-alpha-2 p-3 text-n-slate-12',
+  system: 'bg-n-alpha-1 px-2 py-0.5 text-n-slate-11 text-sm',
+};
+
+const orientationMap = {
+  left: 'rounded-xl rounded-bl-sm',
+  right: 'rounded-xl rounded-br-sm',
+};
+
+const containetFlexJustify = computed(() => {
+  const map = {
+    left: 'justify-start',
+    right: 'justify-end',
+    center: 'justify-center',
+  };
+
+  return map[props.orientation];
+});
+
+const messageClass = computed(() => {
+  const classToApply = [varaintBaseMap[props.variant]];
+
+  if (props.variant !== 'system') {
+    classToApply.push(orientationMap[props.orientation]);
+  } else {
+    classToApply.push('rounded-lg');
+  }
+
+  return classToApply;
+});
+</script>
+
+<template>
+  <div class="flex w-full" :class="containetFlexJustify">
+    <div class="max-w-md" :class="messageClass">
+      {{ text }}
+    </div>
+  </div>
+</template>