230 lines
11 KiB
Plaintext
230 lines
11 KiB
Plaintext
@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>
|
|
} |