Files
gochat/frontend/app/javascript/widget/components/ChatHeaderExpanded.vue
T
rogee 321c61aaae Vendor Chatwoot Vue 3 frontend into frontend/
Copy the Chatwoot (v4.14.0) frontend runnable subset into frontend/ for
customization:
- app/javascript/ (Vue SPA: dashboard, widget, sdk, portal, superadmin)
- app/views/ (ERB templates for vite-plugin-ruby entrypoint resolution)
- app/helpers/, app/assets/ (Rails view helpers, static assets)
- enterprise/ (Enterprise edition frontend overlay)
- config/vite.json, vite.config.ts, bin/vite (Vite-Rails toolchain)
- package.json, pnpm-lock.yaml, tailwind/postcss/eslint configs
- Gemfile, Gemfile.lock (vite_rails gem for bin/vite binstub)

Excluded Rails backend: controllers, models, services, jobs, mailers,
policies, db, lib, spec, public, node_modules.

Update references to the new frontend location:
- .gitignore: exclude frontend build artifacts (node_modules, tmp, packs),
  keep frontend/bin/ and frontend/vendor/ via negation
- backend/scripts/parity_frontend_smoke.sh: CHATWOOT_DIR default
  reference/chatwoot -> ../frontend
- backend/scripts/parity_frontend_browser_smoke.mjs: same default update
- AGENTS.md: add frontend section with Rails/Vite coupling notes
- README: architecture tree includes frontend/
2026-07-07 14:56:01 +08:00

58 lines
1.3 KiB
Vue
Executable File

<script setup>
import HeaderActions from './HeaderActions.vue';
import { computed } from 'vue';
import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
const props = defineProps({
avatarUrl: {
type: String,
default: '',
},
introHeading: {
type: String,
default: '',
},
introBody: {
type: String,
default: '',
},
showPopoutButton: {
type: Boolean,
default: false,
},
});
const { formatMessage } = useMessageFormatter();
const containerClasses = computed(() => [
props.avatarUrl ? 'justify-between' : 'justify-end',
]);
</script>
<template>
<header
class="header-expanded pt-6 pb-4 px-5 relative box-border w-full bg-transparent"
>
<div class="flex items-start" :class="containerClasses">
<img
v-if="avatarUrl"
class="h-12 rounded-full"
:src="avatarUrl"
alt="Avatar"
/>
<HeaderActions
: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 text-n-slate-12 line-clamp-4"
/>
<p
v-dompurify-html="formatMessage(introBody)"
class="text-lg leading-normal text-n-slate-11 [&_a]:underline line-clamp-6"
/>
</header>
</template>