feat(message): rework message alignment and avatar position

Author: cwandev

apps/test/app/examples/message.vue

@@ -5,17 +5,17 @@ import { Message, MessageAvatar, MessageContent } from '@repo/elements/message'
 <template>
   <div class="space-y-2">
     <Message from="assistant">
-      <MessageAvatar src="https://github.com/openai.png" name="AI" />
       <MessageContent>
         Hello! How can I help you today?
       </MessageContent>
+      <MessageAvatar src="https://github.com/openai.png" name="AI" />
     </Message>
 
     <Message from="user">
-      <MessageAvatar src="https://github.com/haydenbleasel.png" name="Me" />
       <MessageContent>
         Show me a quick demo of the components.
       </MessageContent>
+      <MessageAvatar src="https://github.com/haydenbleasel.png" name="Me" />
     </Message>
   </div>
 </template>

packages/elements/src/message/Message.vue

@@ -9,11 +9,11 @@ const props = defineProps<Props>()
 
 <template>
   <div
-    class="group flex w-full items-end gap-2 py-4 [&>div]:max-w-full"
+    class="group flex w-full items-end justify-end gap-2 py-4 [&>div]:max-w-[80%]"
     :class="[
       props.from === 'user'
-        ? 'is-user flex-row-reverse justify-end'
-        : 'is-assistant justify-start',
+        ? 'is-user'
+        : 'is-assistant flex-row-reverse justify-end',
       props.class,
     ]"
   >