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
parent aeddedf2a3
commit 321c61aaae
5737 changed files with 945861 additions and 3 deletions
@@ -0,0 +1,97 @@
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import { useElementSize } from '@vueuse/core';
+import { REPLY_EDITOR_MODES } from './constants';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: REPLY_EDITOR_MODES.REPLY,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  isReplyRestricted: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineEmits(['toggleMode']);
+
+const wootEditorReplyMode = useTemplateRef('wootEditorReplyMode');
+const wootEditorPrivateMode = useTemplateRef('wootEditorPrivateMode');
+
+const replyModeSize = useElementSize(wootEditorReplyMode);
+const privateModeSize = useElementSize(wootEditorPrivateMode);
+
+/**
+ * Computed boolean indicating if the editor is in private note mode
+ * When isReplyRestricted is true, force switch to private note
+ * Otherwise, respect the current mode prop
+ * @type {ComputedRef<boolean>}
+ */
+const isPrivate = computed(() => {
+  if (props.isReplyRestricted) {
+    // Force switch to private note when replies are restricted
+    return true;
+  }
+  // Otherwise respect the current mode
+  return props.mode === REPLY_EDITOR_MODES.NOTE;
+});
+
+/**
+ * Computes the width of the sliding background chip in pixels
+ * Includes 16px of padding in the calculation
+ * @type {ComputedRef<string>}
+ */
+const width = computed(() => {
+  const widthToUse = isPrivate.value
+    ? privateModeSize.width.value
+    : replyModeSize.width.value;
+
+  const widthWithPadding = widthToUse + 16;
+  return `${widthWithPadding}px`;
+});
+
+/**
+ * Computes the X translation value for the sliding background chip
+ * Translates by the width of reply mode + padding when in private mode
+ * @type {ComputedRef<string>}
+ */
+const translateValue = computed(() => {
+  const xTranslate = isPrivate.value ? replyModeSize.width.value + 16 : 0;
+
+  return `${xTranslate}px`;
+});
+</script>
+
+<template>
+  <button
+    class="flex items-center w-auto h-8 p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out z-0 active:scale-[0.995] active:duration-75"
+    :disabled="disabled || isReplyRestricted"
+    :class="{
+      'cursor-not-allowed': disabled || isReplyRestricted,
+    }"
+    @click="$emit('toggleMode')"
+  >
+    <div ref="wootEditorReplyMode" class="flex items-center gap-1 px-2 z-20">
+      {{ $t('CONVERSATION.REPLYBOX.REPLY') }}
+    </div>
+    <div ref="wootEditorPrivateMode" class="flex items-center gap-1 px-2 z-20">
+      {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
+    </div>
+    <div
+      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
+      :class="{
+        'transition-all duration-300': !disabled && !isReplyRestricted,
+      }"
+      :style="{
+        '--chip-width': width,
+        '--translate-x': translateValue,
+        '--rtl-translate-x': `calc(-1 * var(--translate-x))`,
+      }"
+    />
+  </button>
+</template>