refactor(admin contact us): refactor admin contact us and use composalbe for api

[alireza013013]

Description

• add image/media support to rich editor and make modal width configurable
• Add maxWidth prop to Modal component with default 400, allowing flexible width
• Enable image and media embedding in rich editor for compose, create ticket, and reply modals
• Fix rules prop to be an array for proper validation in rich editor components
• Set max-width to 600 for contact us detail, compose, and ticket modals
• use composable for email and AI reply operations
  Replace direct API calls and local state management with the useContactUsAdmin composable for sending emails, fetching email addresses, generating AI replies, and polishing replies. This reduces code duplication, central
• increase max-width of detail modal and image styles

Type of Change

• Bug fix
• New feature
• Documentation update
• Other (please describe):

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings/errors
• I have added tests that prove my fix is effective or that my feature works

[vercel]

@alireza013013 is attempting to deploy a commit to the GamaEdtech Team on Vercel.

A member of the Team first needs to authorize it.

[sanaderi]

Review

Solid refactor overall — extracting the scattered useApiService calls into useContactUsAdmin meaningfully reduces duplication, and the :rules="requiredRule" → :rules="[requiredRule]" change is a legitimate bug fix, not just style (see below).

Please fix before merge

viewMessageDetailsModal.vue: <style scoped> → <style> (now global)

The style block was changed from scoped to unscoped. This makes very generic class names — .value, .label, .detail-item, .position-button-ai — leak globally into the whole app instead of staying confined to this component. At least 6 other admin "detail" modals (schools/contributions/detailModal.vue, schools/comments/modal/detail.vue, schools/images/modals/detail.vue, blogs/comments/modal/detail.vue, blogs/modal/detail.vue) also use class="value" with their own scoped styles — Vue's scoped-attribute selectors should still win on specificity, but it's fragile and unnecessary.

The real reason to drop scoped is almost certainly to reach .container-body img inside v-html-rendered content (scoped styles can't reach v-html content without :deep()). The fix is to keep scoped and use :deep(.container-body img) { ... } for just that rule, rather than dropping scoping for the whole block.

Worth a look, not blocking

Module-level singleton state in useContactUsAdmin.api.ts

data, totalCount, pageCount, emailAddresses, replyList, and every loading* ref are declared outside the exported function, making them shared singletons across every component that calls useContactUsAdmin(). In this PR's usage the modals (compose/create-ticket/view-details) are mutually exclusive — only one open at a time — so I don't have a concrete reproducible collision here (unlike the same pattern in the subscription-admin PR, where simultaneously-mounted tabs did collide). Still worth fixing on principle: it's an SSR hazard (module state is created once per server process, not per request), and it's a pattern already flagged elsewhere in another PR from the same author.

Minor

• .container-body img { width: 100% !important; height: 100% !important; max-width: 600px; max-height: 600px; } — forcing both width and height to 100% can distort images whose aspect ratio doesn't match. Consider height: auto or object-fit: contain instead.
• The new image/mediaEmbed rich-editor features use Base64UploadAdapter, embedding uploaded images as base64 data URIs directly in the HTML body sent to sendEmail/createTicket/replyTicket. Worth confirming there's no payload-size or email-provider limit this could hit once admins start attaching images.