Refine EC2 deploy and email templates UI
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
71a75892a5
commit
f2d4763ec0
33
.github/workflows/deploy-ec2.yml
vendored
33
.github/workflows/deploy-ec2.yml
vendored
@ -18,7 +18,7 @@ on:
|
|||||||
- 'README.md'
|
- 'README.md'
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
build-app:
|
build-and-deploy:
|
||||||
runs-on: ubuntu-22.04
|
runs-on: ubuntu-22.04
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout code
|
- name: Checkout code
|
||||||
@ -40,37 +40,10 @@ jobs:
|
|||||||
|
|
||||||
- name: Save application image
|
- name: Save application image
|
||||||
run: |
|
run: |
|
||||||
docker save -o junohub-app_latest.tar ${{ env.IMAGE_NAME }}:latest
|
mkdir -p docker
|
||||||
|
docker save -o docker/junohub-app_latest.tar ${{ env.IMAGE_NAME }}:latest
|
||||||
echo "✅ Saved application image"
|
echo "✅ Saved application image"
|
||||||
|
|
||||||
- name: Upload application image
|
|
||||||
uses: actions/upload-artifact@v4
|
|
||||||
with:
|
|
||||||
name: app-image
|
|
||||||
path: junohub-app_latest.tar
|
|
||||||
|
|
||||||
deploy:
|
|
||||||
runs-on: ubuntu-22.04
|
|
||||||
needs: [build-app]
|
|
||||||
steps:
|
|
||||||
- name: Checkout code
|
|
||||||
uses: actions/checkout@v4
|
|
||||||
|
|
||||||
- name: Download application image
|
|
||||||
uses: actions/download-artifact@v4
|
|
||||||
with:
|
|
||||||
name: app-image
|
|
||||||
path: docker
|
|
||||||
|
|
||||||
- name: Verify image tar
|
|
||||||
run: |
|
|
||||||
if [ ! -f docker/junohub-app_latest.tar ]; then
|
|
||||||
echo "ERROR: Application image tar missing after download"
|
|
||||||
ls -la docker/ || true
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
echo "✅ Application image tar ready for deploy"
|
|
||||||
|
|
||||||
- name: Set up environment file
|
- name: Set up environment file
|
||||||
run: |
|
run: |
|
||||||
# Base env for production container
|
# Base env for production container
|
||||||
|
|||||||
@ -189,7 +189,7 @@ export default function EmailTemplatesPage() {
|
|||||||
: ""
|
: ""
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full flex flex-col space-y-4 md:space-y-6">
|
<div className="h-full flex flex-col space-y-4 md:space-y-6 mt-4 md:mt-6">
|
||||||
<div className="bg-white/5 backdrop-blur-xl rounded-xl md:rounded-2xl border border-white/10 overflow-hidden flex flex-col flex-1 min-h-0">
|
<div className="bg-white/5 backdrop-blur-xl rounded-xl md:rounded-2xl border border-white/10 overflow-hidden flex flex-col flex-1 min-h-0">
|
||||||
<div className="p-4 md:p-6 border-b border-white/10 flex flex-col sm:flex-row gap-3 md:gap-4 justify-between bg-white/5 flex-shrink-0">
|
<div className="p-4 md:p-6 border-b border-white/10 flex flex-col sm:flex-row gap-3 md:gap-4 justify-between bg-white/5 flex-shrink-0">
|
||||||
<div className="relative flex-1 min-w-0">
|
<div className="relative flex-1 min-w-0">
|
||||||
@ -288,21 +288,21 @@ export default function EmailTemplatesPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{editing && (
|
{editing && (
|
||||||
<div className="fixed inset-0 z-40 flex items-center justify-end bg-black/40 backdrop-blur-sm">
|
<div className="fixed inset-0 z-40 flex items-start justify-center bg-slate-900/40 dark:bg-black/50 px-4 pt-20 md:pt-24">
|
||||||
<div className="w-full max-w-2xl h-full md:h-auto md:max-h-[90vh] bg-slate-950/95 border-l border-white/10 md:rounded-l-2xl md:mr-4 md:mb-4 shadow-2xl flex flex-col">
|
<div className="w-full max-w-3xl max-h-[90vh] bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-50 border border-slate-200 dark:border-white/10 rounded-2xl shadow-2xl flex flex-col">
|
||||||
<div className="px-5 py-4 border-b border-white/10 flex items-center justify-between">
|
<div className="px-5 py-4 border-b border-slate-200 dark:border-white/10 flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-lg font-bold text-white">
|
<h2 className="text-lg font-bold">
|
||||||
{editing.id ? "Edit template" : "New template"}
|
{editing.id ? "Edit template" : "New template"}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xs text-slate-400 mt-0.5">
|
<p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
|
||||||
Use {"{{variable}}"} placeholders to personalize replies.
|
Use {"{{variable}}"} placeholders to personalize replies.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setEditing(null)}
|
onClick={() => setEditing(null)}
|
||||||
className="text-slate-400 hover:text-white text-sm"
|
className="text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white text-sm"
|
||||||
>
|
>
|
||||||
Close
|
Close
|
||||||
</button>
|
</button>
|
||||||
@ -312,7 +312,7 @@ export default function EmailTemplatesPage() {
|
|||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-semibold text-slate-300 mb-1">
|
<label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
|
||||||
Name
|
Name
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
@ -325,13 +325,13 @@ export default function EmailTemplatesPage() {
|
|||||||
: prev,
|
: prev,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
className="w-full h-9 px-3 rounded-lg bg-slate-900/60 border border-white/10 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
|
className="w-full h-9 px-3 rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<div className="grid grid-cols-2 gap-3">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-semibold text-slate-300 mb-1">
|
<label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
|
||||||
Intent
|
Intent
|
||||||
</label>
|
</label>
|
||||||
<select
|
<select
|
||||||
@ -346,7 +346,7 @@ export default function EmailTemplatesPage() {
|
|||||||
: prev,
|
: prev,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
className="w-full h-9 px-3 rounded-lg bg-slate-900/60 border border-white/10 text-xs text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
|
className="w-full h-9 px-3 rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
|
||||||
>
|
>
|
||||||
{INTENT_OPTIONS.map((opt) => (
|
{INTENT_OPTIONS.map((opt) => (
|
||||||
<option key={opt.value} value={opt.value}>
|
<option key={opt.value} value={opt.value}>
|
||||||
@ -356,7 +356,7 @@ export default function EmailTemplatesPage() {
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-semibold text-slate-300 mb-1">
|
<label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
|
||||||
Mood
|
Mood
|
||||||
</label>
|
</label>
|
||||||
<select
|
<select
|
||||||
@ -371,7 +371,7 @@ export default function EmailTemplatesPage() {
|
|||||||
: prev,
|
: prev,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
className="w-full h-9 px-3 rounded-lg bg-slate-900/60 border border-white/10 text-xs text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
|
className="w-full h-9 px-3 rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
|
||||||
>
|
>
|
||||||
{MOOD_OPTIONS.map((opt) => (
|
{MOOD_OPTIONS.map((opt) => (
|
||||||
<option key={opt.value} value={opt.value}>
|
<option key={opt.value} value={opt.value}>
|
||||||
@ -383,7 +383,7 @@ export default function EmailTemplatesPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-semibold text-slate-300 mb-1">
|
<label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
|
||||||
Description (optional)
|
Description (optional)
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
@ -399,37 +399,37 @@ export default function EmailTemplatesPage() {
|
|||||||
: prev,
|
: prev,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
className="w-full h-9 px-3 rounded-lg bg-slate-900/60 border border-white/10 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
|
className="w-full h-9 px-3 rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
|
||||||
placeholder="Short summary for your team"
|
placeholder="Short summary for your team"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-2 text-xs text-slate-400">
|
<div className="space-y-2 text-xs text-slate-600 dark:text-slate-400">
|
||||||
<p className="font-semibold text-slate-200">
|
<p className="font-semibold text-slate-800 dark:text-slate-200">
|
||||||
Available variables
|
Available variables
|
||||||
</p>
|
</p>
|
||||||
<ul className="space-y-1">
|
<ul className="space-y-1">
|
||||||
<li>
|
<li>
|
||||||
<code className="px-1.5 py-0.5 bg-slate-900/80 rounded border border-white/10 text-[11px]">
|
<code className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900/80 rounded border border-slate-200 dark:border-white/10 text-[11px]">
|
||||||
{"{{customer_name}}"}
|
{"{{customer_name}}"}
|
||||||
</code>{" "}
|
</code>{" "}
|
||||||
– Customer’s name
|
– Customer’s name
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<code className="px-1.5 py-0.5 bg-slate-900/80 rounded border border-white/10 text-[11px]">
|
<code className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900/80 rounded border border-slate-200 dark:border-white/10 text-[11px]">
|
||||||
{"{{customer_email}}"}
|
{"{{customer_email}}"}
|
||||||
</code>{" "}
|
</code>{" "}
|
||||||
– Customer’s email
|
– Customer’s email
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<code className="px-1.5 py-0.5 bg-slate-900/80 rounded border border-white/10 text-[11px]">
|
<code className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900/80 rounded border border-slate-200 dark:border-white/10 text-[11px]">
|
||||||
{"{{store_name}}"}
|
{"{{store_name}}"}
|
||||||
</code>{" "}
|
</code>{" "}
|
||||||
– Store name
|
– Store name
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<code className="px-1.5 py-0.5 bg-slate-900/80 rounded border border-white/10 text-[11px]">
|
<code className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900/80 rounded border border-slate-200 dark:border-white/10 text-[11px]">
|
||||||
{"{{ticket_summary}}"}
|
{"{{ticket_summary}}"}
|
||||||
</code>{" "}
|
</code>{" "}
|
||||||
– Short summary of the customer’s email
|
– Short summary of the customer’s email
|
||||||
@ -439,7 +439,7 @@ export default function EmailTemplatesPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-xs font-semibold text-slate-300 mb-1">
|
<label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
|
||||||
Template body
|
Template body
|
||||||
</label>
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
@ -450,29 +450,29 @@ export default function EmailTemplatesPage() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
rows={8}
|
rows={8}
|
||||||
className="w-full rounded-lg bg-slate-900/60 border border-white/10 text-xs text-slate-100 font-mono p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
|
className="w-full rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-xs text-slate-900 dark:text-slate-100 font-mono p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<p className="text-xs font-semibold text-slate-300 mb-1">
|
<p className="text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
|
||||||
Preview with example data
|
Preview with example data
|
||||||
</p>
|
</p>
|
||||||
<div className="rounded-lg border border-white/10 bg-slate-900/80 p-4 text-xs text-slate-100 whitespace-pre-wrap">
|
<div className="rounded-lg border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-slate-900/80 p-4 text-xs text-slate-900 dark:text-slate-100 whitespace-pre-wrap">
|
||||||
{currentPreview || "Preview will appear here."}
|
{currentPreview || "Preview will appear here."}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="px-5 py-3 border-t border-white/10 flex items-center justify-between">
|
<div className="px-5 py-3 border-t border-slate-200 dark:border-white/10 flex items-center justify-between">
|
||||||
<p className="text-[11px] text-slate-500">
|
<p className="text-[11px] text-slate-500 dark:text-slate-500">
|
||||||
Templates use simple {"{{variable}}"} placeholders only.
|
Templates use simple {"{{variable}}"} placeholders only.
|
||||||
</p>
|
</p>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setEditing(null)}
|
onClick={() => setEditing(null)}
|
||||||
className="h-8 px-3 rounded-lg border border-white/10 text-xs text-slate-300 hover:bg-white/10"
|
className="h-8 px-3 rounded-lg border border-slate-200 dark:border-white/10 text-xs text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10"
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user