opendesk

1<template>
2  <!-- Full-bleed white section, so the block reads as one box with a gray top
3       and a white bottom rather than a card floating inside another card -->
4  <div class="border-t border-outline-gray-1 bg-surface-base">
5    <div class="flex h-8 items-center gap-1.5 ps-3.5 pe-1.5 text-sm">
6      <LucideMessageSquare class="size-3 shrink-0 text-ink-gray-6" />
7      <span class="shrink-0 text-ink-gray-6">{{ __("Comment") }}</span>
8      <Button
9        class="ms-auto shrink-0"
10        variant="ghost"
11        size="xs"
12        icon="lucide-x"
13        :label="__('Remove comment')"
14        @click="emit('remove')"
15      />
16    </div>
17    <Editor
18      :model-value="action.value"
19      :extensions="extensions"
20      :placeholder="__('Comment')"
21      @update:model-value="emit('update:value', $event ?? '')"
22    >
23      <template #default>
24        <EditorContent
25          class="prose prose-v3 [--prose-font-size:13px] max-w-none max-h-[140px] min-h-16 overflow-y-auto px-3.5 py-2"
26        />
27      </template>
28    </Editor>
29    <!-- Fixed height so the reset button appearing doesn't grow the footer -->
30    <div
31      class="flex h-9 items-center gap-2 ps-3.5 pe-1.5 pb-2 text-xs text-ink-gray-5"
32    >
33      <span class="cursor-default">
34        {{ __("Visible to your team only, never sent to the customer.") }}
35      </span>
36      <Button
37        v-if="isEdited"
38        class="ms-auto"
39        variant="ghost"
40        size="sm"
41        :label="__('Reset to default')"
42        @click="emit('update:value', action.original_value ?? '')"
43      />
44    </div>
45  </div>
46</template>
47
48<script setup lang="ts">
49import { buildEditorExtensions } from "@/components/editor/config";
50import { useAgentStore } from "@/stores/agent";
51import { __ } from "@/translation";
52import { SavedReplyAction } from "@/types";
53import { Button } from "frappe-ui";
54import { Editor, EditorContent } from "frappe-ui/editor";
55import { storeToRefs } from "pinia";
56import { computed } from "vue";
57import LucideMessageSquare from "~icons/lucide/message-square";
58
59const props = defineProps<{
60  action: SavedReplyAction;
61}>();
62
63const emit = defineEmits<{
64  "update:value": [value: string];
65  remove: [];
66}>();
67
68/** Only actions staged with the original text can report an edit. */
69const isEdited = computed(
70  () =>
71    props.action.original_value !== undefined &&
72    props.action.original_value !== props.action.value
73);
74
75// Same editor the Comment tab uses: rich text with @-mentions
76const { dropdown: agentDropdown } = storeToRefs(useAgentStore());
77const extensions = buildEditorExtensions({
78  mentions: () => agentDropdown.value ?? [],
79});
80</script>
81