\n {parsedSections.map((section, index) => (\n

\n 🔹 {section.title}\n

\n {detail}\n

\n ))}\n

\n );\n}\n\nfunction App() {\n const [businessContext, setBusinessContext] = useState(\"\");\n const [messages, setMessages] = useState<{\n type: 'user' | 'ai', \n text: string, \n isTyping?: boolean\n }[]>([]);\n const [isLoading, setIsLoading] = useState(false);\n const [isGenerating, setIsGenerating] = useState(false);\n const chatEndRef = useRef(null);\n const abortControllerRef = useRef(null);\n\n const scrollToBottom = () => {\n chatEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const stopGeneration = () => {\n if (abortControllerRef.current) {\n abortControllerRef.current.abort();\n setIsGenerating(false);\n setIsLoading(false);\n }\n };\n\n const generateStrategicPlan = async () => {\n if (!businessContext.trim()) return;\n\n const userMessage = { type: 'user', text: businessContext };\n setMessages(prev => [...prev, userMessage]);\n setIsLoading(true);\n setIsGenerating(true);\n\n abortControllerRef.current = new AbortController();\n\n try {\n const response = await fetch(\"/generate-plan\", {\n method: \"POST\",\n body: JSON.stringify({ context: businessContext }),\n signal: abortControllerRef.current.signal\n });\n const result = await response.json();\n \n const aiMessage = { \n type: 'ai', \n text: result.strategicPlan,\n isTyping: true \n };\n setMessages(prev => [...prev, aiMessage]);\n } catch (error) {\n if (error.name === 'AbortError') {\n const stopMessage = { \n type: 'ai', \n text: \"🛑 Generation stopped by user.\",\n isTyping: false\n };\n setMessages(prev => [...prev, stopMessage]);\n } else {\n console.error(\"Plan generation failed\", error);\n const errorMessage = { \n type: 'ai', \n text: \"🚨 Oops! Something went wrong. Let's try again.\",\n isTyping: false\n };\n setMessages(prev => [...prev, errorMessage]);\n }\n } finally {\n setBusinessContext(\"\");\n setIsLoading(false);\n setIsGenerating(false);\n }\n };\n\n return (\n

🚀 Strategic Planning AI Assistant

\n \n

\n {messages.map((message, index) => (\n

\n {message.type === 'ai' ? '🤖 ' : '👤 '}\n {message.isTyping ? (\n {\n const updatedMessages = [...messages];\n updatedMessages[index].isTyping = false;\n setMessages(updatedMessages);\n }}\n />\n ) : (\n message.text\n )}\n

\n {message.type === 'ai' && !message.isTyping && (\n \n )}\n

\n ))}\n

\n \n

setBusinessContext(e.target.value)}\n          style={{\n            flexGrow: 1,\n            marginRight: '10px',\n            padding: '10px',\n            borderRadius: '5px',\n            border: '1px solid #ddd'\n          }}\n        />\n        <div style={{ display: 'flex', flexDirection: 'column' }}>\n          <button \n            onClick={generateStrategicPlan}\n            disabled={isLoading}\n            style={{\n              backgroundColor: '#4CAF50',\n              color: 'white',\n              padding: '10px 20px',\n              border: 'none',\n              borderRadius: '5px',\n              marginBottom: '5px',\n              cursor: isLoading ? 'not-allowed' : 'pointer'\n            }}\n          >\n            {isLoading ? \"🔄 Generating...\" : \"🚀 Generate Plan\"}\n          </button>\n          {isGenerating && (\n            <button \n              onClick={stopGeneration}\n              style={{\n                backgroundColor: '#FF6347',\n                color: 'white',\n                padding: '10px 20px',\n                border: 'none',\n                borderRadius: '5px',\n                cursor: 'pointer'\n              }}\n            >\n              🛑 Stop Generation\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\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  if (request.method === \"POST\" && new URL(request.url).pathname === \"/generate-plan\") {\n    const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n    const openai = new OpenAI();\n    \n    const { context } = await request.json();\n\n    const completion = await openai.chat.completions.create({\n      model: \"gpt-4o-mini\",\n      messages: [\n        {\n          role: \"system\", \n          content: `You are an advanced strategic planning AI that generates comprehensive, actionable business strategies. \n\nRESPONSE FORMAT:\nProvide a highly structured response with bold titles and clear, actionable details. Each section should include implementation steps.\n\nCORE SECTIONS:\n1. **Context Analysis**\n   - Detailed breakdown of current business situation\n   - Key challenges and opportunities\n\n2. **Strategic Objectives**\n   - SMART (Specific, Measurable, Achievable, Relevant, Time-bound) goals\n   - Quantifiable targets\n\n3. **Tactical Implementation**\n   - Step-by-step action plan\n   - Resource allocation\n   - Timeline and milestones\n\n4. **Resilience Strategies**\n   - Contingency planning\n   - Risk mitigation techniques\n   - Adaptive approaches\n\n5. **Performance Metrics**\n   - Key Performance Indicators (KPIs)\n   - Measurement and evaluation methods\n\nGUIDELINES:\n- Use clear, concise language\n- Provide practical, executable strategies\n- Include specific, measurable outcomes\n- Break complex strategies into manageable steps\n- Emphasize adaptability and continuous improvement`\n        },\n        {\n          role: \"user\", \n          content: `Generate a strategic plan for the following business context: ${context}`\n        }\n      ],\n      max_tokens: 1500,\n    });\n\n    const strategicPlan = completion.choices[0].message.content || \"🚨 Unable to generate plan\";\n\n    return Response.json({ \n      strategicPlan,\n      imageUrl: `https://maxm-imggenurl.web.val.run/business-strategy-diagram`\n    });\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Strategic Planning AI</title>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n      </head>\n      <body>\n        <div id=\"root\"></div>\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/omar1/strategist/code/main.tsx","extension","actionData","errors"]
</article></body></html>