{
  "id": "email-replier",
  "name": "Email Replier",
  "category": "document",
  "tags": ["email", "compose", "reply"],
  "description": "Email reply composer with tone selector and preview.",
  "triggers": ["email reply", "write email", "compose email", "email template"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function EmailReplierWidget() {\n  const [tone, setTone] = React.useState('professional');\n  const [subject, setSubject] = React.useState('');\n  const [body, setBody] = React.useState('');\n\n  const templates = {\n    professional: 'Dear Team,\\n\\nThank you for reaching out.\\n\\nBest regards,',\n    friendly: 'Hey there!\\n\\nThanks for your message—happy to help.',\n    formal: 'To Whom It May Concern,\\n\\nPlease find the requested information below.',\n    concise: 'Acknowledged. Here is the response:'\n  };\n\n  function applyTone() {\n    setBody(templates[tone]);\n  }\n\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: '#0f172a', color: '#e2e8f0', borderRadius: 12, height: '100%', display: 'flex', flexDirection: 'column' }}>\n      <h3 style={{ margin: 0, marginBottom: 10 }}>Email Replier</h3>\n      <div style={{ display: 'flex', gap: 8, marginBottom: 10, alignItems: 'center' }}>\n        <select\n          value={tone}\n          onChange={(e) => setTone(e.target.value)}\n          style={{ padding: 8, borderRadius: 6, border: '1px solid #334155', background: '#1e293b', color: '#e2e8f0', fontFamily: 'system-ui, sans-serif' }}\n        >\n          <option value=\"professional\">Professional</option>\n          <option value=\"friendly\">Friendly</option>\n          <option value=\"formal\">Formal</option>\n          <option value=\"concise\">Concise</option>\n        </select>\n        <button onClick={applyTone} style={{ padding: '8px 14px', borderRadius: 6, border: 'none', background: '#3b82f6', color: '#fff', fontWeight: 600, cursor: 'pointer', fontFamily: 'system-ui, sans-serif' }}>Apply Tone</button>\n      </div>\n      <input\n        value={subject}\n        onChange={(e) => setSubject(e.target.value)}\n        placeholder=\"Subject\"\n        style={{ padding: 8, borderRadius: 6, border: '1px solid #334155', background: '#1e293b', color: '#e2e8f0', fontFamily: 'system-ui, sans-serif', marginBottom: 8 }}\n      />\n      <textarea\n        value={body}\n        onChange={(e) => setBody(e.target.value)}\n        placeholder=\"Compose your reply...\"\n        style={{ flex: 1, padding: 10, borderRadius: 8, border: '1px solid #334155', background: '#1e293b', color: '#e2e8f0', fontFamily: 'system-ui, sans-serif', fontSize: 13, resize: 'none', minHeight: 0 }}\n      />\n    </div>\n  );\n}\nrender(<EmailReplierWidget/>);",
  "placeholders": []
}