feat(editor): enable ticket mentions on new-ticket forms and fix @mention popup layering\n\n- New Ticket page/dialog/portal now support @ to link tickets\n- Mention popup uses fixed strategy + high z-index\n- Add minimal Tippy box styling to globals.css\n- Keeps existing server-side permissions for mentions

This commit is contained in:
codex-bot 2025-10-23 09:48:16 -03:00
parent b0f57009ac
commit 904134604c
5 changed files with 25 additions and 2 deletions

View file

@ -198,6 +198,7 @@ export function PortalTicketForm() {
placeholder="Compartilhe passos para reproduzir, mensagens de erro ou informações adicionais."
className="rounded-2xl border border-slate-200 shadow-sm focus-within:border-neutral-900 focus-within:ring-neutral-900/20"
disabled={machineInactive || isSubmitting}
ticketMention={{ enabled: allowTicketMentions }}
/>
</div>
</div>
@ -252,3 +253,4 @@ export function PortalTicketForm() {
</Card>
)
}
const allowTicketMentions = true

View file

@ -57,7 +57,7 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
},
mode: "onTouched",
})
const { convexUserId, isStaff } = useAuth()
const { convexUserId, isStaff, role } = useAuth()
const queuesEnabled = Boolean(isStaff && convexUserId)
const queueArgs = queuesEnabled
? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> }
@ -297,6 +297,7 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
})
}
placeholder="Detalhe o problema, passos para reproduzir, links, etc."
ticketMention={{ enabled: allowTicketMentions }}
/>
<FieldError
errors={
@ -440,3 +441,7 @@ export function NewTicketDialog({ triggerClassName }: { triggerClassName?: strin
</Dialog>
)
}
const allowTicketMentions = useMemo(() => {
const normalized = (role ?? "").toLowerCase()
return normalized === "admin" || normalized === "agent" || normalized === "collaborator"
}, [role])

View file

@ -16,6 +16,9 @@ import Placeholder from "@tiptap/extension-placeholder"
import Mention from "@tiptap/extension-mention"
import { ReactRenderer } from "@tiptap/react"
import tippy, { type Instance, type Props as TippyProps } from "tippy.js"
// Nota: o CSS do Tippy não é obrigatório, mas melhora muito a renderização
// do popover de sugestões. O componente aplica um z-index alto e estratégia
// "fixed" para evitar problemas de sobreposição/scrolling mesmo sem CSS global.
import { cn } from "@/lib/utils"
import sanitize from "sanitize-html"
import { Button } from "@/components/ui/button"
@ -357,6 +360,8 @@ const TicketMentionExtension = Mention.extend({
interactive: true,
trigger: "manual",
placement: "bottom-start",
zIndex: 99999,
popperOptions: { strategy: "fixed" },
})
},
onUpdate(props) {