add 'connect your assistant' guidance
This commit is contained in:
@@ -16,6 +16,7 @@ import { WorkspaceEditor } from "@/components/packages/workspace-editor";
|
||||
import { ChannelUsers } from "@/components/channel-users/channel-users";
|
||||
import { AssignedUsersPanel } from "@/components/tenants/assigned-users-panel";
|
||||
import { SubscriptionToggle } from "@/components/tenants/subscription-toggle";
|
||||
import { ConnectPanel } from "@/components/tenants/connect-panel";
|
||||
import { formatDateTime, formatRelative } from "@/lib/format";
|
||||
import { CHANNEL_PACKAGE_IDS } from "@/lib/packages";
|
||||
|
||||
@@ -216,6 +217,19 @@ export default async function TenantDetailPage({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Connect: how the customer actually reaches their assistant.
|
||||
The portal manages the assistant; the assistant lives in the
|
||||
customer's messaging app. This bridges that gap right at the
|
||||
top of the page (and calls out the case where no channel is
|
||||
enabled, which would otherwise leave a running assistant
|
||||
unreachable). */}
|
||||
<section className="mb-8 animate-in animate-in-delay-1">
|
||||
<ConnectPanel
|
||||
enabledChannels={enabledChannels}
|
||||
phase={tenant.status?.phase ?? "Pending"}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Usage */}
|
||||
<section className="mb-8 animate-in animate-in-delay-1">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
|
||||
|
||||
@@ -487,12 +487,27 @@ export function ProvisioningStatus({ requestId, canAct }: Props) {
|
||||
<p className="text-sm text-text-secondary max-w-sm mx-auto mb-4">
|
||||
{t("readyDescription")}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
|
||||
>
|
||||
{t("goToDashboard")}
|
||||
</button>
|
||||
{(() => {
|
||||
// Prefer deep-linking straight to the tenant page, where the
|
||||
// ConnectPanel shows how to start chatting. Fall back to a
|
||||
// reload only if we somehow don't have a tenant name yet.
|
||||
const tenantName = data.tenant?.name || data.request.tenantName;
|
||||
return tenantName ? (
|
||||
<Link
|
||||
href={`/tenants/${tenantName}`}
|
||||
className="inline-block py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
|
||||
>
|
||||
{t("connectCta")}
|
||||
</Link>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
|
||||
>
|
||||
{t("goToDashboard")}
|
||||
</button>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
149
src/components/tenants/connect-panel.tsx
Normal file
149
src/components/tenants/connect-panel.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { THREEMA_GATEWAY } from "@/lib/threema-gateway-config";
|
||||
|
||||
/**
|
||||
* ConnectPanel
|
||||
*
|
||||
* The portal is a *management* console — config, billing, usage — but
|
||||
* the assistant itself lives in the customer's messaging app. Nothing
|
||||
* previously told the customer how to actually start talking to the
|
||||
* thing they just provisioned ("Your assistant is ready… now what?").
|
||||
*
|
||||
* This panel closes that gap on the tenant-detail page: for each
|
||||
* enabled channel it shows the concrete first-contact steps, and when
|
||||
* NO channel is enabled it says so explicitly (a running assistant with
|
||||
* no channel is unreachable).
|
||||
*
|
||||
* It is intentionally complementary to ChannelUsers below it:
|
||||
* - ConnectPanel → "how do *I* reach the assistant"
|
||||
* - ChannelUsers → "*who* is allowed to reach it"
|
||||
* The Threema/Telegram/Discord steps reference the authorised-users
|
||||
* list rather than duplicating it.
|
||||
*/
|
||||
|
||||
// Render order is fixed (not the order packages happen to appear in
|
||||
// spec.packages) so the panel layout is stable across tenants.
|
||||
const CHANNEL_ORDER = ["threema", "telegram", "discord"] as const;
|
||||
|
||||
const CHANNEL_NAMES: Record<string, string> = {
|
||||
threema: "Threema",
|
||||
telegram: "Telegram",
|
||||
discord: "Discord",
|
||||
};
|
||||
|
||||
// Per-channel instruction key in the `connect` message namespace.
|
||||
const CHANNEL_STEPS_KEY: Record<string, string> = {
|
||||
threema: "threemaSteps",
|
||||
telegram: "telegramSteps",
|
||||
discord: "discordSteps",
|
||||
};
|
||||
|
||||
export function ConnectPanel({
|
||||
enabledChannels,
|
||||
phase,
|
||||
}: {
|
||||
enabledChannels: string[];
|
||||
/** Tenant phase — connection details only "work" once it's Ready. */
|
||||
phase: string;
|
||||
}) {
|
||||
const t = useTranslations("connect");
|
||||
|
||||
const channels = CHANNEL_ORDER.filter((c) => enabledChannels.includes(c));
|
||||
const ready = phase === "Ready" || phase === "Running" || phase === "Active";
|
||||
|
||||
// No channel at all → the assistant is unreachable. Make it loud.
|
||||
if (channels.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg
|
||||
className="h-5 w-5 text-amber-400 shrink-0 mt-0.5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zM12 15.75h.008v.008H12v-.008z"
|
||||
/>
|
||||
</svg>
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-semibold text-amber-300">
|
||||
{t("noChannelsTitle")}
|
||||
</div>
|
||||
<p className="text-xs text-text-secondary mt-1 leading-relaxed">
|
||||
{t("noChannelsBody")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-accent/30 bg-accent/5 p-5">
|
||||
<h2 className="font-display text-base font-semibold text-text-primary mb-1">
|
||||
{t("title")}
|
||||
</h2>
|
||||
<p className="text-xs text-text-secondary mb-4 leading-relaxed">
|
||||
{t("description")}
|
||||
</p>
|
||||
|
||||
{!ready && (
|
||||
<p className="text-xs text-amber-300 bg-amber-500/10 border border-amber-500/20 rounded-lg px-3 py-2 mb-4 leading-relaxed">
|
||||
{t("notReadyNote")}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
{channels.map((c) => (
|
||||
<div
|
||||
key={c}
|
||||
className="rounded-lg border border-border bg-surface-1 p-3"
|
||||
>
|
||||
<div className="text-sm font-medium text-text-primary mb-1.5">
|
||||
{CHANNEL_NAMES[c]}
|
||||
</div>
|
||||
|
||||
{c === "threema" ? (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="bg-white p-1.5 rounded-md shrink-0">
|
||||
{/* Shared gateway QR — identical for every tenant, so
|
||||
it can render before/after provisioning alike.
|
||||
eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={THREEMA_GATEWAY.qrCodePath}
|
||||
alt={`QR code for ${THREEMA_GATEWAY.displayName}`}
|
||||
width={88}
|
||||
height={88}
|
||||
style={{ display: "block" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs text-text-secondary leading-relaxed">
|
||||
<div className="mb-1.5">
|
||||
<span className="text-text-muted">
|
||||
{t("threemaBotIdLabel")}:{" "}
|
||||
</span>
|
||||
<span className="font-mono text-sm text-accent">
|
||||
{THREEMA_GATEWAY.displayName}
|
||||
</span>
|
||||
</div>
|
||||
<div className="whitespace-pre-line">{t("threemaSteps")}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-text-secondary leading-relaxed whitespace-pre-line">
|
||||
{t(CHANNEL_STEPS_KEY[c])}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -94,7 +94,7 @@
|
||||
"provisioningDescription": "Ihr KI-Assistent wird bereitgestellt. Dies dauert in der Regel wenige Minuten.",
|
||||
"phase": "Phase",
|
||||
"readyTitle": "Ihr Assistent ist bereit!",
|
||||
"readyDescription": "Ihr KI-Assistent wurde bereitgestellt und ist aktiv. Sie können ihn nun über das Dashboard verwalten.",
|
||||
"readyDescription": "Ihr KI-Assistent wurde bereitgestellt und läuft. Verbinden Sie ihn als Nächstes mit Ihrer Messaging-App, um den Chat zu starten.",
|
||||
"goToDashboard": "Zum Dashboard",
|
||||
"submittedAt": "Eingereicht",
|
||||
"instanceName": "Instanzname",
|
||||
@@ -143,7 +143,8 @@
|
||||
"telegram": "Öffnen Sie Telegram, schreiben Sie an @userinfobot und fügen Sie die zurückgegebene numerische ID hier ein. Weitere Benutzer können Sie später auf der Mandantenseite hinzufügen.",
|
||||
"discord": "Aktivieren Sie den Entwicklermodus in Discord (Erweiterte Einstellungen), Rechtsklick auf Ihren Namen → Benutzer-ID kopieren, und hier einfügen. Weitere Benutzer können Sie später auf der Mandantenseite hinzufügen.",
|
||||
"threema": "Die 8 Zeichen, die in Ihrer Threema-App unter Einstellungen → Meine Threema-ID angezeigt werden. Sobald Ihr Mandant freigegeben ist und Threema aktiviert wurde, können Sie aus diesem Account heraus mit dem Assistenten chatten. Weitere autorisierte IDs können später auf der Mandantenseite hinzugefügt werden."
|
||||
}
|
||||
},
|
||||
"connectCta": "Assistenten verbinden"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Dashboard",
|
||||
@@ -976,5 +977,16 @@
|
||||
"backToDashboard": "Zurück zum Dashboard",
|
||||
"notFoundTitle": "Seite nicht gefunden",
|
||||
"notFoundDescription": "Die angeforderte Seite existiert nicht oder wurde verschoben."
|
||||
},
|
||||
"connect": {
|
||||
"title": "Mit Ihrem Assistenten verbinden",
|
||||
"description": "Ihr Assistent läuft in Ihrer Messaging-App. So beginnen Sie den Chat mit ihm.",
|
||||
"notReadyNote": "Ihr Assistent wird noch eingerichtet. Diese Verbindungsdetails funktionieren, sobald er bereit ist.",
|
||||
"noChannelsTitle": "Noch kein Messaging-Kanal",
|
||||
"noChannelsBody": "Ihr Assistent läuft, hat aber keinen Kanal zum Chatten. Aktivieren Sie unten im Bereich Pakete einen Kanal – Threema, Telegram oder Discord –, um ihn zu nutzen.",
|
||||
"threemaBotIdLabel": "Threema-ID",
|
||||
"threemaSteps": "1. Öffnen Sie Threema und scannen Sie diesen QR-Code (oder fügen Sie die obige ID als Kontakt hinzu).\n2. Senden Sie eine Nachricht, um den Chat zu starten.\nStellen Sie sicher, dass Ihre eigene Threema-ID in der Liste der autorisierten Benutzer unten steht – nur gelistete IDs erhalten eine Antwort.",
|
||||
"telegramSteps": "Öffnen Sie den verbundenen Telegram-Bot und senden Sie ihm eine Nachricht, um den Chat zu starten. Nur die Benutzer-IDs in der Liste der autorisierten Benutzer unten erhalten eine Antwort.",
|
||||
"discordSteps": "Schreiben Sie dem verbundenen Discord-Bot oder erwähnen Sie ihn in einem Kanal, dem er beigetreten ist. Nur die Benutzer-IDs in der Liste der autorisierten Benutzer unten erhalten eine Antwort."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
"provisioningDescription": "Your AI assistant is being provisioned. This usually takes a few minutes.",
|
||||
"phase": "Phase",
|
||||
"readyTitle": "Your assistant is ready!",
|
||||
"readyDescription": "Your AI assistant has been provisioned and is running. You can now manage it from the dashboard.",
|
||||
"readyDescription": "Your AI assistant has been provisioned and is running. Next, connect it to your messaging app to start chatting.",
|
||||
"goToDashboard": "Go to Dashboard",
|
||||
"submittedAt": "Submitted",
|
||||
"instanceName": "Instance name",
|
||||
@@ -143,7 +143,8 @@
|
||||
"telegram": "Open Telegram, message @userinfobot, and paste the numeric id it returns. You can add more users later from the tenant page.",
|
||||
"discord": "Enable Developer Mode in Discord (Advanced settings), right-click your name → Copy User ID, and paste it here. You can add more users later from the tenant page.",
|
||||
"threema": "The 8 characters shown in your Threema app under Settings → My Threema ID. Once your tenant is approved and Threema is enabled, you'll be able to chat with the assistant from this account. More authorized IDs can be added later from the tenant page."
|
||||
}
|
||||
},
|
||||
"connectCta": "Connect your assistant"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Dashboard",
|
||||
@@ -976,5 +977,16 @@
|
||||
"backToDashboard": "Back to dashboard",
|
||||
"notFoundTitle": "Page not found",
|
||||
"notFoundDescription": "The page you're looking for doesn't exist or has moved."
|
||||
},
|
||||
"connect": {
|
||||
"title": "Connect to your assistant",
|
||||
"description": "Your assistant runs inside your messaging app. Here's how to start chatting with it.",
|
||||
"notReadyNote": "Your assistant is still being set up. These connection details will work as soon as it's ready.",
|
||||
"noChannelsTitle": "No messaging channel yet",
|
||||
"noChannelsBody": "Your assistant is running but has no channel to chat through. Enable a channel — Threema, Telegram, or Discord — in the Packages section below to start using it.",
|
||||
"threemaBotIdLabel": "Threema ID",
|
||||
"threemaSteps": "1. Open Threema and scan this QR code (or add the ID above as a contact).\n2. Send it a message to start chatting.\nMake sure your own Threema ID is on the authorised users list below — only listed IDs get a reply.",
|
||||
"telegramSteps": "Open the Telegram bot you connected and send it a message to start chatting. Only the user IDs on the authorised users list below get a reply.",
|
||||
"discordSteps": "Message the Discord bot you connected, or mention it in a channel it has joined. Only the user IDs on the authorised users list below get a reply."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
"provisioningDescription": "Votre assistant IA est en cours de mise en service. Cela prend généralement quelques minutes.",
|
||||
"phase": "Phase",
|
||||
"readyTitle": "Votre assistant est prêt !",
|
||||
"readyDescription": "Votre assistant IA a été mis en service et est actif. Vous pouvez maintenant le gérer depuis le tableau de bord.",
|
||||
"readyDescription": "Votre assistant IA a été provisionné et fonctionne. Connectez-le maintenant à votre application de messagerie pour commencer à discuter.",
|
||||
"goToDashboard": "Aller au tableau de bord",
|
||||
"submittedAt": "Soumis",
|
||||
"instanceName": "Nom de l'instance",
|
||||
@@ -143,7 +143,8 @@
|
||||
"telegram": "Ouvrez Telegram, écrivez à @userinfobot et collez l'ID numérique qu'il retourne. Vous pourrez ajouter d'autres utilisateurs plus tard depuis la page du tenant.",
|
||||
"discord": "Activez le mode développeur dans Discord (paramètres avancés), clic-droit sur votre nom → Copier l'ID utilisateur, puis collez-le ici. Vous pourrez ajouter d'autres utilisateurs plus tard depuis la page du tenant.",
|
||||
"threema": "Les 8 caractères affichés dans votre app Threema sous Réglages → Mon identifiant Threema. Une fois votre tenant approuvé et Threema activé, vous pourrez discuter avec l'assistant depuis ce compte. D'autres ID autorisés peuvent être ajoutés plus tard depuis la page du tenant."
|
||||
}
|
||||
},
|
||||
"connectCta": "Connecter votre assistant"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Tableau de bord",
|
||||
@@ -976,5 +977,16 @@
|
||||
"backToDashboard": "Retour au tableau de bord",
|
||||
"notFoundTitle": "Page introuvable",
|
||||
"notFoundDescription": "La page que vous recherchez n'existe pas ou a été déplacée."
|
||||
},
|
||||
"connect": {
|
||||
"title": "Connectez-vous à votre assistant",
|
||||
"description": "Votre assistant fonctionne dans votre application de messagerie. Voici comment commencer à discuter avec lui.",
|
||||
"notReadyNote": "Votre assistant est encore en cours de configuration. Ces informations de connexion fonctionneront dès qu'il sera prêt.",
|
||||
"noChannelsTitle": "Aucun canal de messagerie",
|
||||
"noChannelsBody": "Votre assistant fonctionne mais n'a aucun canal pour discuter. Activez un canal — Threema, Telegram ou Discord — dans la section Forfaits ci-dessous pour commencer à l'utiliser.",
|
||||
"threemaBotIdLabel": "Identifiant Threema",
|
||||
"threemaSteps": "1. Ouvrez Threema et scannez ce QR code (ou ajoutez l'identifiant ci-dessus comme contact).\n2. Envoyez-lui un message pour commencer à discuter.\nAssurez-vous que votre propre identifiant Threema figure dans la liste des utilisateurs autorisés ci-dessous — seuls les identifiants listés reçoivent une réponse.",
|
||||
"telegramSteps": "Ouvrez le bot Telegram que vous avez connecté et envoyez-lui un message pour commencer à discuter. Seuls les identifiants utilisateur de la liste des utilisateurs autorisés ci-dessous reçoivent une réponse.",
|
||||
"discordSteps": "Écrivez au bot Discord que vous avez connecté, ou mentionnez-le dans un salon qu'il a rejoint. Seuls les identifiants utilisateur de la liste des utilisateurs autorisés ci-dessous reçoivent une réponse."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
"provisioningDescription": "Il suo assistente IA è in fase di attivazione. Di solito richiede pochi minuti.",
|
||||
"phase": "Fase",
|
||||
"readyTitle": "Il suo assistente è pronto!",
|
||||
"readyDescription": "Il suo assistente IA è stato attivato ed è operativo. Ora può gestirlo dalla dashboard.",
|
||||
"readyDescription": "Il tuo assistente IA è stato provisionato ed è in funzione. Ora collegalo alla tua app di messaggistica per iniziare a chattare.",
|
||||
"goToDashboard": "Vada alla dashboard",
|
||||
"submittedAt": "Inviato",
|
||||
"instanceName": "Nome istanza",
|
||||
@@ -143,7 +143,8 @@
|
||||
"telegram": "Apra Telegram, scriva a @userinfobot e incolli qui l'ID numerico restituito. Potrà aggiungere altri utenti in seguito dalla pagina del tenant.",
|
||||
"discord": "Attivi la Modalità sviluppatore in Discord (Impostazioni avanzate), clic destro sul suo nome → Copia ID utente, poi incolli qui. Potrà aggiungere altri utenti in seguito dalla pagina del tenant.",
|
||||
"threema": "Gli 8 caratteri mostrati nella sua app Threema in Impostazioni → Il mio ID Threema. Una volta approvato il suo tenant e attivato Threema, potrà chattare con l'assistente da questo account. Altri ID autorizzati possono essere aggiunti in seguito dalla pagina del tenant."
|
||||
}
|
||||
},
|
||||
"connectCta": "Collega il tuo assistente"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Dashboard",
|
||||
@@ -976,5 +977,16 @@
|
||||
"backToDashboard": "Torna alla dashboard",
|
||||
"notFoundTitle": "Pagina non trovata",
|
||||
"notFoundDescription": "La pagina che stai cercando non esiste o è stata spostata."
|
||||
},
|
||||
"connect": {
|
||||
"title": "Collegati al tuo assistente",
|
||||
"description": "Il tuo assistente funziona all'interno della tua app di messaggistica. Ecco come iniziare a chattare con lui.",
|
||||
"notReadyNote": "Il tuo assistente è ancora in fase di configurazione. Questi dettagli di connessione funzioneranno non appena sarà pronto.",
|
||||
"noChannelsTitle": "Nessun canale di messaggistica",
|
||||
"noChannelsBody": "Il tuo assistente è in funzione ma non ha alcun canale per chattare. Attiva un canale — Threema, Telegram o Discord — nella sezione Pacchetti qui sotto per iniziare a usarlo.",
|
||||
"threemaBotIdLabel": "ID Threema",
|
||||
"threemaSteps": "1. Apri Threema e scansiona questo codice QR (oppure aggiungi l'ID sopra come contatto).\n2. Inviagli un messaggio per iniziare a chattare.\nAssicurati che il tuo ID Threema sia presente nell'elenco degli utenti autorizzati qui sotto: solo gli ID elencati ricevono una risposta.",
|
||||
"telegramSteps": "Apri il bot Telegram che hai collegato e inviagli un messaggio per iniziare a chattare. Solo gli ID utente nell'elenco degli utenti autorizzati qui sotto ricevono una risposta.",
|
||||
"discordSteps": "Scrivi al bot Discord che hai collegato, oppure menzionalo in un canale a cui si è unito. Solo gli ID utente nell'elenco degli utenti autorizzati qui sotto ricevono una risposta."
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user