\n {/* Stats Cards */}\n {stats && (\n

📊

Total Messages

{stats.total_messages}

\n \n

📅

Today

{stats.messages_today}

\n \n

✅

Replies Sent

{stats.replies_sent}

\n \n

🔥

Top Keywords

\n {stats.top_keywords.length > 0 \n ? stats.top_keywords.slice(0, 2).map(k => k.keyword).join(', ')\n : 'None yet'\n }\n

\n )}\n\n

\n {/* Settings Panel */}\n

Auto-Reply Settings

\n \n

\n {/* Enable/Disable */}\n

\n setFormData({ ...formData, enabled: e.target.checked })}\n className=\"h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded\"\n />\n \n Enable auto-replies\n \n

\n\n {/* Mode Selection */}\n

\n Reply Mode\n setFormData({ ...formData, mode: e.target.value as any })}\n className=\"mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md\"\n >\n \n \n \n \n

\n\n {/* Default Message */}\n

\n Default Message\n setFormData({ ...formData, default_message: e.target.value })}\n rows={3}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\"\n placeholder=\"Enter your default auto-reply message...\"\n />\n

\n\n {/* Business Hours Settings */}\n {formData.mode === 'business_hours' && (\n

Business Hours

\n Start Time\n setFormData({ ...formData, business_hours_start: e.target.value })}\n className=\"block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\"\n />\n

\n End Time\n setFormData({ ...formData, business_hours_end: e.target.value })}\n className=\"block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\"\n />\n

\n Business Hours Message\n setFormData({ ...formData, business_hours_message: e.target.value })}\n rows={2}\n className=\"block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\"\n placeholder=\"Message to send during business hours...\"\n />\n

\n )}\n\n {/* Away Message Settings */}\n {formData.mode === 'away' && (\n

\n Away Message\n setFormData({ ...formData, away_message: e.target.value })}\n rows={3}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\"\n placeholder=\"Enter your away message...\"\n />\n

\n )}\n\n \n {saving ? 'Saving...' : 'Save Settings'}\n \n

\n\n {/* Test Message Panel */}\n

Test Message

\n \n

\n Phone Number\n setTestMessage({ ...testMessage, to: e.target.value })}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\"\n placeholder=\"e.g., +1234567890\"\n />\n

\n \n

\n Message\n setTestMessage({ ...testMessage, message: e.target.value })}\n rows={3}\n className=\"mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\"\n placeholder=\"Enter test message...\"\n />\n

\n \n \n Send Test Message\n \n \n {testResult && (\n

\n {testResult}\n

\n )}\n

\n\n {/* Keyword Responses */}\n

Keyword Responses

\n \n {/* Add New Keyword */}\n

Add New Keyword Response

\n setNewKeyword({ ...newKeyword, keyword: e.target.value })}\n className=\"block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\"\n placeholder=\"Keyword...\"\n />\n setNewKeyword({ ...newKeyword, response: e.target.value })}\n className=\"block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\"\n placeholder=\"Response...\"\n />\n

\n setNewKeyword({ ...newKeyword, exact_match: e.target.checked })}\n className=\"h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded\"\n />\n Exact match\n

\n \n Add Keyword\n \n

\n\n {/* Keywords List */}\n

\n {keywords.map((keyword) => (\n

\n {editingKeyword?.id === keyword.id ? (\n

\n setEditingKeyword({ ...editingKeyword, keyword: e.target.value })}\n className=\"block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\"\n />\n setEditingKeyword({ ...editingKeyword, response: e.target.value })}\n className=\"block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm\"\n />\n

\n setEditingKeyword({ ...editingKeyword, exact_match: e.target.checked })}\n className=\"h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded\"\n />\n Exact\n

\n ) : (\n

\n \"{keyword.keyword}\"\n →\n {keyword.response}\n {keyword.exact_match && (\n \n Exact\n \n )}\n

\n )}\n \n

\n {editingKeyword?.id === keyword.id ? (\n <>\n \n Save\n \n setEditingKeyword(null)}\n className=\"text-gray-600 hover:text-gray-900 text-sm\"\n >\n Cancel\n \n \n ) : (\n <>\n setEditingKeyword(keyword)}\n className=\"text-blue-600 hover:text-blue-900 text-sm\"\n >\n Edit\n \n handleDeleteKeyword(keyword.id!)}\n className=\"text-red-600 hover:text-red-900 text-sm\"\n >\n Delete\n \n \n )}\n

\n ))}\n \n {keywords.length === 0 && (\n

\n No keyword responses configured yet. Add one above to get started!\n

\n )}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Lyte/untitled-3191/code/frontend/components/Dashboard.tsx","extension","actionData","errors"]