Files
chatwoot/app/javascript/widget/components/ChatHeaderExpanded.vue
Pranav Raj S 94a20af9db fix: Render articles in widget if it is available (#7654)
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sojan <sojan@pepalo.com>
2023-09-14 19:56:17 +05:30

63 lines
1.3 KiB
Vue
Executable File

<template>
<header
class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
>
<div
class="flex items-start"
:class="[avatarUrl ? 'justify-between' : 'justify-end']"
>
<img
v-if="avatarUrl"
class="h-12 rounded-full"
:src="avatarUrl"
alt="Avatar"
/>
<header-actions
:show-popout-button="showPopoutButton"
:show-end-conversation-button="false"
/>
</div>
<h2
v-dompurify-html="introHeading"
class="mt-4 text-2xl mb-1.5 font-medium"
:class="$dm('text-slate-900', 'dark:text-slate-50')"
/>
<p
v-dompurify-html="introBody"
class="text-base leading-normal"
:class="$dm('text-slate-700', 'dark:text-slate-200')"
/>
</header>
</template>
<script>
import HeaderActions from './HeaderActions';
import darkModeMixin from 'widget/mixins/darkModeMixin.js';
export default {
name: 'ChatHeaderExpanded',
components: {
HeaderActions,
},
mixins: [darkModeMixin],
props: {
avatarUrl: {
type: String,
default: '',
},
introHeading: {
type: String,
default: '',
},
introBody: {
type: String,
default: '',
},
showPopoutButton: {
type: Boolean,
default: false,
},
},
};
</script>