mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-11-03 20:48:07 +00:00 
			
		
		
		
	This PR adds RTL support to the web widget for improved right-to-left language compatibility, updates colors, and cleans up code. Fixes https://linear.app/chatwoot/issue/CW-4089/rtl-issues-on-widget https://github.com/chatwoot/chatwoot/issues/9791 Other PR: https://github.com/chatwoot/chatwoot/pull/11016
		
			
				
	
	
		
			56 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			Vue
		
	
	
		
			Executable File
		
	
	
	
	
			
		
		
	
	
			56 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			Vue
		
	
	
		
			Executable File
		
	
	
	
	
<script>
 | 
						|
import AgentMessage from 'widget/components/AgentMessage.vue';
 | 
						|
import UserMessage from 'widget/components/UserMessage.vue';
 | 
						|
import { mapGetters } from 'vuex';
 | 
						|
import { MESSAGE_TYPE } from 'widget/helpers/constants';
 | 
						|
 | 
						|
export default {
 | 
						|
  components: {
 | 
						|
    AgentMessage,
 | 
						|
    UserMessage,
 | 
						|
  },
 | 
						|
  props: {
 | 
						|
    message: {
 | 
						|
      type: Object,
 | 
						|
      default: () => {},
 | 
						|
    },
 | 
						|
  },
 | 
						|
  computed: {
 | 
						|
    ...mapGetters({
 | 
						|
      allMessages: 'conversation/getConversation',
 | 
						|
    }),
 | 
						|
    isUserMessage() {
 | 
						|
      return this.message.message_type === MESSAGE_TYPE.INCOMING;
 | 
						|
    },
 | 
						|
    replyTo() {
 | 
						|
      const replyTo = this.message?.content_attributes?.in_reply_to;
 | 
						|
      return replyTo ? this.allMessages[replyTo] : null;
 | 
						|
    },
 | 
						|
  },
 | 
						|
};
 | 
						|
</script>
 | 
						|
 | 
						|
<template>
 | 
						|
  <UserMessage
 | 
						|
    v-if="isUserMessage"
 | 
						|
    :id="`cwmsg-${message.id}`"
 | 
						|
    :message="message"
 | 
						|
    :reply-to="replyTo"
 | 
						|
  />
 | 
						|
  <AgentMessage
 | 
						|
    v-else
 | 
						|
    :id="`cwmsg-${message.id}`"
 | 
						|
    :message="message"
 | 
						|
    :reply-to="replyTo"
 | 
						|
  />
 | 
						|
</template>
 | 
						|
 | 
						|
<style scoped lang="scss">
 | 
						|
.message-wrap {
 | 
						|
  display: flex;
 | 
						|
  flex-direction: row;
 | 
						|
  align-items: flex-end;
 | 
						|
  max-width: 90%;
 | 
						|
}
 | 
						|
</style>
 |