# Plan: Replace "Use Templates" with "Smart Messages"

## Goal
Replace static template buttons with AI-powered Smart Messages (AIMessageWriter) everywhere EXCEPT Sales Playbook.

---

## Locations to Change

### 1. Messages.jsx - Compose Area Button (HIGH PRIORITY)
**Location:** Line 871-877
**Current:** FileText icon button opens `TemplatePicker`
**Change to:** Sparkles icon opens `AIMessageWriter`

```jsx
// BEFORE
<button onClick={() => setShowTemplatePicker(!showTemplatePicker)}>
  <FileText />
</button>

// AFTER
<button onClick={() => setShowAIWriter(!showAIWriter)}>
  <Sparkles />
</button>
```

**Files to modify:**
- `admin/src/pages/Messages.jsx`
  - Add `AIMessageWriter` import
  - Add `showAIWriter` state
  - Replace template button with AI button
  - Add AIMessageWriter modal

---

### 2. EnhancedConversationCard.jsx - Quick Actions (HIGH PRIORITY)
**Location:** Line 77 in TRIAGE_CONFIG
**Current:** `{ key: 'template', label: 'Send Template', icon: FileText }`
**Change to:** `{ key: 'smart_reply', label: 'Smart Reply', icon: Sparkles }`

**Files to modify:**
- `admin/src/components/inbox/EnhancedConversationCard.jsx`
  - Update action key and label
  - Update icon from FileText to Sparkles

---

### 3. AITriageSection.jsx - Category Labels (MEDIUM PRIORITY)
**Location:** Line 30
**Current:** `action: 'Send template'`
**Change to:** `action: 'Smart Reply'`

**Files to modify:**
- `admin/src/components/inbox/AITriageSection.jsx`

---

### 4. Messages.jsx - Handle Quick Action (HIGH PRIORITY)
**Location:** `handleQuickAction` function
**Current:** `case 'template':` opens template picker
**Change to:** `case 'smart_reply':` opens AIMessageWriter

---

## Keep Templates (DO NOT CHANGE)

These locations should keep templates as they're part of Sales Playbook:

1. **ActivationCenter.jsx** - "templates" tab with NudgeTemplates
2. **NudgeTemplates.jsx** - Nudge template management
3. **SalesPlaybook.jsx** - Template management page
4. **SlippingLeads.jsx** - Nudge messages (simple by design)

---

## Implementation Steps

### Step 1: Update EnhancedConversationCard.jsx
- [ ] Change `template` action to `smart_reply`
- [ ] Change icon from `FileText` to `Sparkles`
- [ ] Change label from "Send Template" to "Smart Reply"

### Step 2: Update AITriageSection.jsx
- [ ] Change "Send template" to "Smart Reply"

### Step 3: Update Messages.jsx
- [ ] Add `showAIWriter` state
- [ ] Import AIMessageWriter (already imported? check)
- [ ] Change template button to AI writer button
- [ ] Add AIMessageWriter component render
- [ ] Update `handleQuickAction` to handle `smart_reply`
- [ ] Remove or keep TemplatePicker (might still want it as fallback)

### Step 4: Test
- [ ] Test Smart Reply button in Messages compose area
- [ ] Test Smart Reply quick action from conversation cards
- [ ] Verify Sales Playbook still has templates
- [ ] Verify Activation Center still has templates

---

## UI Changes Summary

| Location | Before | After |
|----------|--------|-------|
| Messages compose | 📄 Template button | ✨ Smart Reply button |
| Conversation card (Question) | "Send Template" | "Smart Reply" |
| Triage section label | "Send template" | "Smart Reply" |

---

## Notes

- AIMessageWriter already exists and works well
- It calls `aiApi.draftMessage()` which generates 3 personalized suggestions
- Has tone selector (Friendly, Professional, Urgent)
- Has quick prompts (Follow up, Check in, Schedule call, etc.)
- Has voice input for custom prompts
- Can edit before sending