mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-31 11:08:04 +00:00
945fa5fd16
# Pull Request Template ## Description This PR includes, ### Changes 1. **Message Orientation**: - Updated the bubble orientation of Bot, Agent, and Private Note messages to align from **left** to **right**. 2. **Activity Message bubble Styling**: - Adjusted **padding** and **border-radius** for activity message bubbles for better alignment and appearance. | **Before** | **After** | | ------------- | ------------- | | <img width="559" alt="image" src="https://github.com/user-attachments/assets/18258ae0-0d8e-4447-a005-9b6643b71f81" /> | <img width="559" alt="image" src="https://github.com/user-attachments/assets/425785d8-17f9-4629-8301-f19f23aef201" /> | --- Fixes [CW-4263](https://linear.app/chatwoot/issue/CW-4263/v410-messages-history-incoming-and-outgoing-renders-in-one-line), https://github.com/chatwoot/chatwoot/issues/11340 ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? ### Loom video https://www.loom.com/share/117bbb1dda98451883c9bb17f7cf016b?sid=05eae4d4-af11-4a41-a1d6-dc4e7e2cb281 ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Shivam Mishra <scm.mymail@gmail.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Pranav <pranav@chatwoot.com>
23 lines
600 B
Vue
23 lines
600 B
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { messageTimestamp } from 'shared/helpers/timeHelper';
|
|
import BaseBubble from './Base.vue';
|
|
import { useMessageContext } from '../provider.js';
|
|
|
|
const { content, createdAt } = useMessageContext();
|
|
|
|
const readableTime = computed(() =>
|
|
messageTimestamp(createdAt.value, 'LLL d, h:mm a')
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<BaseBubble
|
|
v-tooltip.top="readableTime"
|
|
class="px-3 py-1 !rounded-xl flex min-w-0 items-center gap-2"
|
|
data-bubble-name="activity"
|
|
>
|
|
<span v-dompurify-html="content" :title="content" />
|
|
</BaseBubble>
|
|
</template>
|