Add customer communication system
This commit is contained in:
sysadmin
230
LittleShop/Areas/Admin/Views/Bots/Wizard.cshtml
Normal file
230
LittleShop/Areas/Admin/Views/Bots/Wizard.cshtml
Normal file
@@ -0,0 +1,230 @@
|
||||
@model LittleShop.DTOs.BotWizardDto
|
||||
|
||||
@{
|
||||
ViewData["Title"] = "Telegram Bot Creation Wizard";
|
||||
var showCommands = ViewData["ShowCommands"] as bool? ?? false;
|
||||
var commands = ViewData["BotFatherCommands"] as string ?? "";
|
||||
}
|
||||
|
||||
<h1>Telegram Bot Creation Wizard</h1>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
@if (!showCommands)
|
||||
{
|
||||
<!-- Step 1: Basic Info -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Step 1: Bot Information</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form asp-area="Admin" asp-controller="Bots" asp-action="Wizard" method="post">
|
||||
@Html.AntiForgeryToken()
|
||||
<div asp-validation-summary="All" class="text-danger"></div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="BotName" class="form-label">Bot Display Name</label>
|
||||
<input asp-for="BotName" class="form-control"
|
||||
placeholder="e.g., LittleShop Electronics Bot" required />
|
||||
<span asp-validation-for="BotName" class="text-danger"></span>
|
||||
<small class="text-muted">This is the name users will see</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="BotUsername" class="form-label">Bot Username</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">@@</span>
|
||||
<input asp-for="BotUsername" class="form-control"
|
||||
placeholder="littleshop_bot" required />
|
||||
</div>
|
||||
<span asp-validation-for="BotUsername" class="text-danger"></span>
|
||||
<small class="text-muted">Must end with 'bot' and be unique on Telegram</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="PersonalityName" class="form-label">Personality</label>
|
||||
<select asp-for="PersonalityName" class="form-select">
|
||||
<option value="">Auto-assign (recommended)</option>
|
||||
<option value="Alan" @(Model.PersonalityName == "Alan" ? "selected" : "")>Alan (Professional)</option>
|
||||
<option value="Dave" @(Model.PersonalityName == "Dave" ? "selected" : "")>Dave (Casual)</option>
|
||||
<option value="Sarah" @(Model.PersonalityName == "Sarah" ? "selected" : "")>Sarah (Helpful)</option>
|
||||
<option value="Mike" @(Model.PersonalityName == "Mike" ? "selected" : "")>Mike (Direct)</option>
|
||||
<option value="Emma" @(Model.PersonalityName == "Emma" ? "selected" : "")>Emma (Friendly)</option>
|
||||
<option value="Tom" @(Model.PersonalityName == "Tom" ? "selected" : "")>Tom (Efficient)</option>
|
||||
</select>
|
||||
<small class="text-muted">Bot conversation style (can be changed later)</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="Description" class="form-label">Description (Optional)</label>
|
||||
<textarea asp-for="Description" class="form-control" rows="2"
|
||||
placeholder="Brief description of what this bot does"></textarea>
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Generate BotFather Commands" class="btn btn-primary" />
|
||||
<a href="/Admin/Bots" class="btn btn-secondary">Cancel</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<!-- Step 2: BotFather Commands & Token -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h5 class="mb-0">Step 2: Create Bot with BotFather</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-info">
|
||||
<strong>Follow these steps in Telegram:</strong>
|
||||
</div>
|
||||
|
||||
<div class="bg-light p-3 rounded">
|
||||
<pre class="mb-0">@commands</pre>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<button class="btn btn-sm btn-outline-secondary" onclick="copyCommands()">
|
||||
<i class="fas fa-copy"></i> Copy Instructions
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Step 3: Complete Bot Setup</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="/Admin/Bots/CompleteWizard" method="post">
|
||||
@Html.AntiForgeryToken()
|
||||
|
||||
<!-- Hidden fields to preserve data -->
|
||||
<input type="hidden" name="BotName" value="@Model.BotName" />
|
||||
<input type="hidden" name="BotUsername" value="@Model.BotUsername" />
|
||||
<input type="hidden" name="Description" value="@Model.Description" />
|
||||
<input type="hidden" name="PersonalityName" value="@Model.PersonalityName" />
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="BotToken" class="form-label">Bot Token from BotFather</label>
|
||||
<input name="BotToken" id="BotToken" class="form-control font-monospace"
|
||||
value="@Model.BotToken" placeholder="123456789:ABCdefGHIjklMNOpqrsTUVwxyz" required />
|
||||
<span asp-validation-for="BotToken" class="text-danger"></span>
|
||||
<small class="text-muted">Paste the token you received from @@BotFather</small>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2 d-md-flex">
|
||||
<button type="submit" class="btn btn-success me-md-2">
|
||||
<i class="fas fa-check"></i> Create Bot & Validate Token
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="history.back()">
|
||||
<i class="fas fa-arrow-left"></i> Back to Edit Info
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Wizard Progress</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled">
|
||||
<li class="@(!showCommands ? "text-primary fw-bold" : "text-success")">
|
||||
<i class="fas fa-@(!showCommands ? "edit" : "check")"></i>
|
||||
1. Bot Information
|
||||
</li>
|
||||
<li class="@(showCommands && string.IsNullOrEmpty(Model.BotToken) ? "text-primary fw-bold" : showCommands ? "text-success" : "text-muted")">
|
||||
<i class="fas fa-@(showCommands && string.IsNullOrEmpty(Model.BotToken) ? "robot" : showCommands ? "check" : "circle")"></i>
|
||||
2. Create with BotFather
|
||||
</li>
|
||||
<li class="@(!string.IsNullOrEmpty(Model.BotToken) ? "text-primary fw-bold" : "text-muted")">
|
||||
<i class="fas fa-@(!string.IsNullOrEmpty(Model.BotToken) ? "key" : "circle")"></i>
|
||||
3. Complete Setup
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (showCommands)
|
||||
{
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Quick Tips</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="small">
|
||||
<li>BotFather responds instantly</li>
|
||||
<li>Username must end with 'bot'</li>
|
||||
<li>Keep your token secure</li>
|
||||
<li>Token starts with numbers followed by colon</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="card mt-3">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Personality Preview</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="small">
|
||||
@if (!string.IsNullOrEmpty(Model.PersonalityName))
|
||||
{
|
||||
<strong>@Model.PersonalityName</strong><text> personality selected</text>
|
||||
}
|
||||
else
|
||||
{
|
||||
<text>Auto-assigned personality based on bot name</text>
|
||||
}
|
||||
</p>
|
||||
|
||||
<p class="small text-muted">
|
||||
Personalities affect how your bot communicates with customers.
|
||||
This can be customized later in bot settings.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<partial name="_ValidationScriptsPartial" />
|
||||
<script>
|
||||
// Test if JavaScript is working
|
||||
console.log('Wizard page scripts loaded');
|
||||
|
||||
function copyCommands() {
|
||||
const commands = `@Html.Raw(commands)`;
|
||||
navigator.clipboard.writeText(commands).then(() => {
|
||||
alert('Commands copied to clipboard!');
|
||||
});
|
||||
}
|
||||
|
||||
// Auto-generate username from bot name
|
||||
$(document).ready(function() {
|
||||
console.log('Document ready, setting up auto-generation');
|
||||
|
||||
$('#BotName').on('input', function() {
|
||||
try {
|
||||
const name = $(this).val().toLowerCase()
|
||||
.replace(/[^a-z0-9]/g, '_')
|
||||
.replace(/_+/g, '_')
|
||||
.replace(/^_|_$/g, '');
|
||||
|
||||
if (name && !name.endsWith('_bot')) {
|
||||
$('#BotUsername').val(name + '_bot');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error in auto-generation:', err);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
}
|
||||
Reference in New Issue
Block a user