@minnai/create-aura-app 0.0.10 → 0.0.12

package/templates/starter/src/src/components/ProjectSidebar/ProjectSidebar.tsx

@@ -0,0 +1,219 @@
+import React, { useState } from 'react';
+import { getStorage } from '@minnai/aura';
+
+interface ProjectSidebarProps {
+    currentProjectId: string;
+}
+
+export const ProjectSidebar: React.FC<ProjectSidebarProps> = ({ currentProjectId }) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    // Simple local history (could be more robust)
+    const [recentProjects, setRecentProjects] = useState<string[]>(() => {
+        try {
+            return JSON.parse(localStorage.getItem('aura_projects') || '[]');
+        } catch {
+            return [];
+        }
+    });
+
+    const addProject = (id: string) => {
+        const next = [id, ...recentProjects.filter(p => p !== id)].slice(0, 5); // Keep last 5
+        setRecentProjects(next);
+        localStorage.setItem('aura_projects', JSON.stringify(next));
+    };
+
+    const handleNewChat = () => {
+        const newId = 'proj_' + Math.random().toString(36).substr(2, 6);
+        addProject(newId);
+        window.location.href = `/?project=${newId}`;
+    };
+
+    const handleRestart = async () => {
+        if (confirm('Are you sure you want to reset the Tour Demo? This will clear all data.')) {
+            try {
+                const storage = getStorage();
+                console.log("[ProjectSidebar] Clearing all tour demo data...");
+
+                // Delete the main project document
+                await storage.documents.delete('projects', 'aura-tour-demo');
+
+                // Clear any task collections that might have been created
+                // The session ID is dynamic, so we can't target specific collections
+                // Instead, we rely on the project state being the source of truth
+
+            } catch (e) {
+                console.error("Failed to reset storage", e);
+            }
+
+            // Navigate to (or reload) the demo project
+            window.location.href = `/?project=aura-tour-demo`;
+        }
+    };
+
+    const handleSwitch = (id: string) => {
+        window.location.href = `/?project=${id}`;
+    };
+
+    const isTourDemo = currentProjectId === 'aura-tour-demo';
+
+    return (
+        <div
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            style={{
+                width: isHovered ? '240px' : '68px',
+                height: '100%',
+                background: '#1a1a1b',
+                display: 'flex',
+                flexDirection: 'column',
+                transition: 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                overflow: 'hidden',
+                zIndex: 100,
+                borderRight: '1px solid #2d2d2f'
+            }}>
+
+            {/* Logo Section */}
+            <div style={{ padding: '20px 16px', display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <div style={{ fontSize: '24px', lineHeight: '1' }}>🌌</div>
+                {isHovered && <span style={{ color: 'white', fontWeight: 'bold', whiteSpace: 'nowrap' }}>Aura Starter</span>}
+            </div>
+
+            <div style={{ height: '1px', background: '#2d2d2f', margin: '0 12px 20px' }} />
+
+            {/* New Chat Button */}
+            <div style={{
+                padding: '0 12px',
+                marginBottom: '15px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+                cursor: 'pointer',
+                opacity: 0.9
+            }}
+                onClick={handleNewChat}
+                title="Start New Chat"
+            >
+                <div style={{
+                    minWidth: '44px',
+                    height: '44px',
+                    borderRadius: '12px',
+                    background: '#2d2d2f',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '1.2rem',
+                    color: '#fff',
+                    transition: 'background 0.2s',
+                    border: '1px dashed #555'
+                }}>
+                    +
+                </div>
+                {isHovered && (
+                    <span style={{ color: 'white', fontSize: '0.9rem', fontWeight: '500', whiteSpace: 'nowrap' }}>New Chat</span>
+                )}
+            </div>
+
+            {/* Restart Button (Only visible/relevant for Tour Demo? Or always to reset Tour?) */}
+            {/* User asked for "Restart button should start the tourer logic but from a clean slate" */}
+            <div style={{
+                padding: '0 12px',
+                marginBottom: '15px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+                cursor: 'pointer',
+                opacity: 0.9
+            }}
+                onClick={handleRestart}
+                title="Reset & Start Tour"
+            >
+                <div style={{
+                    minWidth: '44px',
+                    height: '44px',
+                    borderRadius: '12px',
+                    background: 'rgba(255, 68, 68, 0.1)',
+                    border: '1px solid rgba(255, 68, 68, 0.3)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '1.2rem',
+                    color: '#ff4444',
+                    transition: 'background 0.2s',
+                }}>
+                    ↻
+                </div>
+                {isHovered && (
+                    <span style={{ color: '#ff4444', fontSize: '0.9rem', fontWeight: '500', whiteSpace: 'nowrap' }}>Restart Tour</span>
+                )}
+            </div>
+
+            {/* Tour Demo Item */}
+            <div style={{
+                padding: '0 12px',
+                marginBottom: '5px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+                cursor: 'pointer',
+                opacity: isTourDemo ? 1 : 0.6,
+                background: isTourDemo ? 'rgba(255,255,255,0.05)' : 'transparent',
+                borderRadius: '8px'
+            }}
+                onClick={() => handleSwitch('aura-tour-demo')}>
+                <div style={{
+                    minWidth: '44px',
+                    height: '44px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '1.2rem',
+                }}>
+                    🚀
+                </div>
+                {isHovered && (
+                    <div style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'nowrap' }}>
+                        <span style={{ color: 'white', fontSize: '0.9rem', fontWeight: '600' }}>Tour Demo</span>
+                        {isTourDemo && <span style={{ color: '#888', fontSize: '0.7rem' }}>Active</span>}
+                    </div>
+                )}
+            </div>
+
+            {/* Recent Projects */}
+            {recentProjects.map(pid => (
+                <div key={pid} style={{
+                    padding: '0 12px',
+                    marginBottom: '5px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '12px',
+                    cursor: 'pointer',
+                    opacity: currentProjectId === pid ? 1 : 0.6,
+                    background: currentProjectId === pid ? 'rgba(255,255,255,0.05)' : 'transparent',
+                    borderRadius: '8px'
+                }}
+                    onClick={() => handleSwitch(pid)}>
+                    <div style={{
+                        minWidth: '44px',
+                        height: '44px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontSize: '1.2rem',
+                        color: '#aaa'
+                    }}>
+                        💬
+                    </div>
+                    {isHovered && (
+                        <div style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'nowrap' }}>
+                            <span style={{ color: 'white', fontSize: '0.9rem', fontWeight: '500' }}>Chat {pid.substr(-4)}</span>
+                        </div>
+                    )}
+                </div>
+            ))}
+
+            <div style={{ flex: 1 }} />
+
+        </div>
+    );
+};

package/templates/starter/src/src/components/TourGuide/TourGuide.tsx

@@ -0,0 +1,16 @@
+import { useTourEngine } from './useTourEngine';
+import tourFlowYaml from './tour-flow.yaml?raw';
+import YAML from 'yaml';
+
+// Parse the YAML config
+const tourFlow = YAML.parse(tourFlowYaml);
+
+export function TourGuide({ projectId }: { projectId: string }) {
+    // The engine handles everything
+    const state = useTourEngine(tourFlow, projectId);
+
+    // Debug logging
+    console.log('[TourGuide] State:', state);
+
+    return null;
+}

package/templates/starter/src/src/components/TourGuide/index.ts

@@ -0,0 +1 @@
+export { TourGuide } from './TourGuide';

package/templates/starter/src/src/components/TourGuide/tour-flow.yaml

@@ -0,0 +1,137 @@
+name: Aura Starter Tour
+projectId: aura-tour-demo
+
+steps:
+  - step: INIT
+    run:
+      - say: "Loading brain. 🧠"
+      - say: "Loading UIs. 🎨"
+      - say: "Hello world, am I alive? 🤖"
+      - say: "Loading sense of humor..."
+      - say: "404 Not Found !!"
+      - say: "Just kidding 😅"
+      - say: "All systems nominal. Ready to go. 🚀"
+      - say: "Hi!"
+      - say: "I'm Aura 🌌."
+      - say: "I've been assigned to show you around."
+      - say: "But we should work together."
+      - say: "Loading starter tasks.."
+      - spawn: tasks-air
+        props:
+          title: "Aura Starter Tasks"
+          initialTasks:
+            - { id: init-1, label: "loading Aura", completed: false }
+            - { id: move-1, label: "move tasks to space", completed: false }
+            - { id: apple-1, label: "check Apple stock price", completed: false }
+      - say: "There we go."
+      - say: "Now, let's use the chat to close our first task."
+      - say: 'Tell me to "complete loading".'
+      - wait: task_toggled
+        match: "loading"
+      - goto: POPOUT_GUIDE
+
+  - step: POPOUT_GUIDE
+    run:
+      - say: "Perfect!"
+      - say: "Let's keep the chat tidy."
+      - say: "You can press the 'Pop Out' button to move the Tasks to the space on the right if you'd like."
+      - say: "Or you can keep it here in the chat. Both work fine!"
+      - goto: MANUAL_CHECK
+
+  - step: MANUAL_CHECK
+    run:
+      - say: "Great! Now, you try the next one manually."
+      - say: 'Click the checkbox next to "move tasks to space" to mark it as done.'
+      - wait: task_toggled
+        match: "move tasks"
+      - goto: CHAT_ADD
+
+  - step: CHAT_ADD
+    run:
+      - say: "Yes, you do, or tell me to do. Both works with Aura."
+      - say: "Now, let me show you how to add tasks via chat."
+      - say: 'Tell me: "Add task: convert stocks to Euro".'
+      - say: "We will need it later."
+      - wait: task_added
+        match: "convert"
+      - goto: APPLE_STOCK
+
+  - step: APPLE_STOCK
+    run:
+      # - say: "Excellent. Efficiency is key. 🚀"
+      # - say: "You got it, I leave updating the tasks to you now."
+      # - say: 'You can ask me contextual questions about your tasks like "how many tasks do i have open".'
+      # - say: "Now, let's cook up some fun stuff!"
+      # - say: "I'm also a financial expert (in training) 📈."
+      - say: "Ask me: `What is the Apple stock price?`."
+      - say: "Let's see what happens..."
+      - wait: air_success
+        air: stocks-air
+        onError: API_KEY_MISSING
+      - goto: STOCKS_INFO
+
+  - step: STOCKS_INFO
+    run:
+      - say: "Nice! The stock data is showing."
+      - say: "Real-time market data powered by AlphaVantage API. 📈"
+      - do: toggle_task
+        label: "check Apple stock price"
+      - goto: CONVERT
+
+  - step: API_KEY_MISSING
+    run:
+      - say: "⚠️ **WARNING: API KEY MISSING!** ⚠️"
+      - say: "I can't fetch market data without a `STOCKS_API_KEY`."
+      - say: "You can get a free API key from AlphaVantage. [Get Key Here](https://www.alphavantage.co/support/#api-key)."
+      - say: "Just put a random email and they give you the key instantly! 📧"
+      - say: "Then put the key in keys section at the bottom of [src/ambiance/stocks-air/resources.ts](file://src/ambiance/stocks-air/resources.ts)."
+      - say: "Just refresh the screen when you're done, I'll wait here (like I have a choice)! ⏳"
+      - wait: air_success
+        air: stocks-air
+      - do: toggle_task
+        label: "check Apple stock price"
+      - goto: CONVERT
+
+  - step: CONVERT
+    run:
+      - say: "Impressive numbers! Now let's fulfill that conversion task."
+      - say: 'Tell me: "Convert Apple stock price to Euro".'
+      - wait: air_success
+        air: currency-air
+        onError: FIX_BUG
+      - goto: FINAL_MANUAL
+
+  - step: FIX_BUG
+    run:
+      - say: "❌ **ERROR: REFUSED CONNECTION!** ❌"
+      - say: "Something is wrong with the currency service..."
+      - say: "I found a bug in the source code! Open [src/ambiance/currency-air/logic.ts](file://src/ambiance/currency-air/logic.ts) immediately."
+      - say: "You'll see I'm hardcoding `dollar.json` instead of using the proper URL from resources!"
+      - say: "**Fix it:** Replace the hardcoded path with `resources.api.currency.rates.config.url` and save!"
+      - wait: air_success
+        air: currency-air
+      - goto: FINAL_MANUAL
+
+  - step: FINAL_MANUAL
+    run:
+      - say: "Great job! Working together makes the dream work."
+      - say: "Let me help you wrap up the starter tasks."
+      - do: toggle_task
+        label: "loading Aura"
+      - do: toggle_task
+        label: "move tasks to space"
+      - do: toggle_task
+        label: "check Apple stock price"
+      - say: "All tasks completed! 🎉"
+      - do: confetti
+      - goto: COMPLETION
+
+  - step: COMPLETION
+    run:
+      - say: "Success! You fixed the code. You're a pro now."
+      - say: "Aura developer training is complete. 🎓"
+      - say: "Go build something amazing. 🎉"
+      - goto: DONE
+
+  - step: DONE
+    run: []