\n {[\n { id: 'generator', label: '✍️ Response Generator' },\n { id: 'scenarios', label: '📋 Support Scenarios' },\n { id: 'help', label: '❓ Help' }\n ].map(tab => (\n

setActiveTab(tab.id)}\n style={{\n padding: '10px 20px',\n cursor: 'pointer',\n fontWeight: activeTab === tab.id ? 'bold' : 'normal',\n backgroundColor: activeTab === tab.id ? COLORS.secondary : COLORS.primary,\n borderRadius: '8px 8px 0 0'\n }}\n >\n {tab.label}\n

\n ))}\n

\n );\n\n const renderContent = () => {\n switch(activeTab) {\n case 'generator':\n return (\n

\n Query Type\n \n

\n Tone\n \n

\n Specific Scenario\n \n

\n Customer Name\n setCustomerName(e.target.value)}\n style={inputStyle}\n />\n

setCustomerQuery(e.target.value)}\n              style={{\n                ...inputStyle,\n                height: '100px',\n                resize: 'vertical'\n              }}\n            />\n            <button \n              onClick={handleGenerate}\n              disabled={isLoading || !customerQuery}\n              style={{\n                backgroundColor: (isLoading || !customerQuery) ? COLORS.background : COLORS.secondary,\n                color: (isLoading || !customerQuery) ? COLORS.text : 'white',\n                border: 'none',\n                padding: '10px 20px',\n                borderRadius: '5px',\n                cursor: (isLoading || !customerQuery) ? 'not-allowed' : 'pointer',\n                marginTop: '10px'\n              }}\n            >\n              {isLoading ? '🔄 Generating...' : 'Generate Customer Response'}\n            </button>\n            {generatedResponse && (\n              <div style={{ marginTop: '20px' }}>\n                <h3 style={{ color: COLORS.text }}>Generated Response:</h3>\n                <pre style={{ \n                  backgroundColor: COLORS.background, \n                  padding: '15px', \n                  borderRadius: '5px',\n                  whiteSpace: 'pre-wrap',\n                  wordWrap: 'break-word'\n                }}>\n                  {generatedResponse}\n                </pre>\n                <button \n                  onClick={copyToClipboard}\n                  style={{\n                    backgroundColor: COLORS.primary,\n                    color: 'white',\n                    border: 'none',\n                    padding: '10px 20px',\n                    borderRadius: '5px',\n                    cursor: 'pointer',\n                    marginTop: '10px'\n                  }}\n                >\n                  📋 Copy to Clipboard\n                </button>\n              </div>\n            )}\n          </div>\n        );\n      case 'scenarios':\n        return (\n          <div style={{ padding: '20px', backgroundColor: 'white' }}>\n            <h2 style={{ color: COLORS.text }}>Support Scenarios</h2>\n            {Object.entries(RESPONSE_SCENARIOS).map(([type, scenarios]) => (\n              <div key={type} style={{ marginBottom: '15px' }}>\n                <h3 style={{ color: COLORS.primary }}>{type.charAt(0).toUpperCase() + type.slice(1)} Scenarios</h3>\n                <ul>\n                  {scenarios.map(scenario => (\n                    <li key={scenario}>{scenario}</li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </div>\n        );\n      case 'help':\n        return (\n          <div style={{ padding: '20px', backgroundColor: 'white' }}>\n            <h2 style={{ color: COLORS.text }}>How to Use</h2>\n            <ol style={{ lineHeight: '1.6' }}>\n              <li>Select a query type (Billing, Technical, Shipping)</li>\n              <li>Choose a tone (Formal or Casual)</li>\n              <li>Select a specific scenario (optional)</li>\n              <li>Enter the customer's exact query</li>\n              <li>Click \"Generate Customer Response\"</li>\n              <li>Copy and use the generated response</li>\n            </ol>\n            <p style={{ marginTop: '15px', color: COLORS.text }}>\n              💡 Tip: The more specific your input, the more precise the AI-generated response.\n            </p>\n          </div>\n        );\n    }\n  };\n\n  return (\n    <div style={{ \n      maxWidth: '800px', \n      margin: 'auto', \n      fontFamily: 'Arial, sans-serif',\n      backgroundColor: COLORS.background,\n      borderRadius: '10px',\n      boxShadow: '0 4px 6px rgba(0,0,0,0.1)',\n      overflow: 'hidden'\n    }}>\n      <div style={{ \n        backgroundColor: COLORS.primary, \n        color: 'white', \n        padding: '15px', \n        textAlign: 'center' \n      }}>\n        <h1 style={{ margin: 0 }}>🚀 Customer Response Generator</h1>\n      </div>\n      {renderTabs()}\n      {renderContent()}\n      <p style={{ \n        fontSize: '0.8em', \n        padding: '10px', \n        textAlign: 'center', \n        backgroundColor: COLORS.background \n      }}>\n        <a \n          href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n          target=\"_top\"\n          style={{ color: COLORS.primary, textDecoration: 'none' }}\n        >\n          View Source\n        </a>\n      </p>\n    </div>\n  );\n}\n\n// Shared styles\nconst selectStyle = {\n  width: '100%',\n  padding: '10px',\n  borderRadius: '5px',\n  border: `1px solid ${COLORS.primary}`,\n  backgroundColor: 'white',\n  color: COLORS.text\n};\n\nconst inputStyle = {\n  width: '100%',\n  padding: '10px',\n  marginBottom: '15px',\n  borderRadius: '5px',\n  border: `1px solid ${COLORS.primary}`,\n  backgroundColor: 'white',\n  color: COLORS.text\n};\n\nfunction App() {\n  return <ResponseGenerator />;\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  return new Response(`\n    <html>\n      <head>\n        <title>Customer Response Generator</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n        <style>\n          body { margin: 0; font-family: 'Inter', sans-serif; }\n        </style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"content-type\": \"text/html\" }\n  });\n}","deleted","label",[98],"permalink","https://www.val.town/x/abas/C_s/code/main.tsx","extension","actionData","errors"]
</article></body></html>