Merge pull request #4 from MobileReality/feat/more-examples

Feat/more examples

Author: gitsad

README.md

@@ -319,7 +319,7 @@ pnpm eval:view
 ## Initial Roadmap
 
 ### v0.2 — Developer Experience
-- [ ] More examples (10+ real-world use cases)
+- [x] More examples (14 real-world use cases)
 - [x] CLI tool for prompt creation (MDMA flows)
 - [ ] Improved error messages in parser and validator
 - [ ] File upload field type for forms

demo/src/ChatView.tsx

@@ -5,6 +5,7 @@ import { ChatSettings } from './chat/ChatSettings.js';
 import { ChatMessage } from './chat/ChatMessage.js';
 import { ChatInput } from './chat/ChatInput.js';
 import { ChatActionLog } from './chat/ChatActionLog.js';
+import { exampleFlows } from './example-flows.js';
 import type { MdmaRenderCustomizations } from '@mobile-reality/mdma-renderer-react';
 import type { ZodType } from 'zod';
 
@@ -47,8 +48,41 @@ export function ChatView({ customizations, systemPrompt, userSuffix, storageKey,
     stop,
     clear,
     updateMessage,
+    startFlow,
+    advanceFlow,
   } = useChat(chatOptions);
 
+  const advanceFlowRef = useRef(advanceFlow);
+  advanceFlowRef.current = advanceFlow;
+
+  // Subscribe to ACTION_TRIGGERED events on assistant message stores to advance the flow
+  const subscribedStores = useRef(new Set<import('@mobile-reality/mdma-runtime').DocumentStore>());
+
+  useEffect(() => {
+    for (const msg of messages) {
+      if (msg.role === 'assistant' && msg.store && !subscribedStores.current.has(msg.store)) {
+        subscribedStores.current.add(msg.store);
+        msg.store.getEventBus().on('ACTION_TRIGGERED', () => {
+          // Small delay so the user sees the interaction before the next step loads
+          setTimeout(() => advanceFlowRef.current(), 500);
+        });
+      }
+    }
+  }, [messages]);
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => { subscribedStores.current.clear(); };
+  }, []);
+
+  const handleLoadFlow = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    const key = e.target.value;
+    if (!key) return;
+    const flow = exampleFlows[key];
+    if (flow) startFlow(flow.steps, flow.customPrompt);
+    e.target.value = '';
+  }, [startFlow]);
+
   const { events, isOpen, setIsOpen, clearEvents } = useChatActionLog(messages);
 
   const chatEndRef = useRef<HTMLDivElement>(null);
@@ -65,6 +99,7 @@ export function ChatView({ customizations, systemPrompt, userSuffix, storageKey,
   const handleClear = useCallback(() => {
     clear();
     clearEvents();
+    subscribedStores.current.clear();
   }, [clear, clearEvents]);
 
   const lastMsgId = messages[messages.length - 1]?.id;
@@ -83,8 +118,28 @@ export function ChatView({ customizations, systemPrompt, userSuffix, storageKey,
             <div className="chat-empty">
               <p className="chat-empty-title">MDMA Chat</p>
               <p className="chat-empty-hint">
-                Describe an interactive document and the AI will generate it as a live, interactive MDMA form.
+                Describe an interactive document and the AI will generate it, or try an example flow:
               </p>
+              <select
+                defaultValue=""
+                onChange={handleLoadFlow}
+                style={{
+                  padding: '8px 12px',
+                  borderRadius: '6px',
+                  border: '1px solid #d1d5db',
+                  background: '#fff',
+                  color: '#374151',
+                  fontSize: '14px',
+                  cursor: 'pointer',
+                  marginTop: '8px',
+                  minWidth: '220px',
+                }}
+              >
+                <option value="" disabled>Load an example flow…</option>
+                {Object.entries(exampleFlows).map(([key, flow]) => (
+                  <option key={key} value={key}>{flow.label}</option>
+                ))}
+              </select>
             </div>
           )}
 

demo/src/chat/use-chat.ts

@@ -86,9 +86,11 @@ export function useChat(options?: UseChatOptions) {
 
   // Stable refs for options that shouldn't trigger re-renders
   const stableStorageKey = useRef(options?.storageKey ?? 'chat').current;
-  const stableSystemPrompt = useRef(
+  const defaultSystemPrompt = useRef(
     buildSystemPrompt({ customPrompt: options?.systemPrompt }),
   ).current;
+  // Active system prompt — can be overridden by a flow's customPrompt
+  const systemPromptRef = useRef(defaultSystemPrompt);
   const stableUserSuffix = useRef(
     options?.userSuffix !== undefined ? options.userSuffix : DEFAULT_USER_SUFFIX,
   ).current;
@@ -229,7 +231,7 @@ export function useChat(options?: UseChatOptions) {
 
     // Build conversation history for the LLM
     const history: LlmMessage[] = [
-      { role: 'system', content: stableSystemPrompt },
+      { role: 'system', content: systemPromptRef.current },
     ];
 
     for (const m of [...messages, userMsg]) {
@@ -295,8 +297,10 @@ export function useChat(options?: UseChatOptions) {
     setInput('');
     clearSavedHistory(stableStorageKey);
     msgIdRef.current = 0;
+    flowRef.current = null;
+    systemPromptRef.current = defaultSystemPrompt;
     inputRef.current?.focus();
-  }, []);
+  }, [defaultSystemPrompt]);
 
   /** Update an assistant message's content and re-parse it. */
   const updateMessage = useCallback(
@@ -309,6 +313,74 @@ export function useChat(options?: UseChatOptions) {
     [reparseLastAssistant],
   );
 
+  // Active flow state for multi-step example flows
+  const flowRef = useRef<{ steps: { userMessage: string; markdown: string }[]; currentStep: number } | null>(null);
+
+  /** Inject a single user+assistant message pair and parse the markdown. */
+  const injectStep = useCallback(
+    async (userMessage: string, markdown: string) => {
+      const userMsg: ChatMsg = {
+        id: ++msgIdRef.current,
+        role: 'user',
+        content: userMessage,
+        ast: null,
+        store: null,
+      };
+      const assistantMsg: ChatMsg = {
+        id: ++msgIdRef.current,
+        role: 'assistant',
+        content: markdown,
+        ast: null,
+        store: null,
+      };
+      setMessages((prev) => [...prev, userMsg, assistantMsg]);
+
+      const asstId = assistantMsg.id;
+      try {
+        const { ast, store } = await parseMarkdownRef.current(markdown);
+        setMessages((prev) =>
+          prev.map((m) => (m.id === asstId ? { ...m, ast, store } : m)),
+        );
+      } catch {
+        // parse error — content is still shown as raw text
+      }
+    },
+    [],
+  );
+
+  /** Start a multi-step example flow. Loads the first step immediately. */
+  const startFlow = useCallback(
+    async (steps: { userMessage: string; markdown: string }[], customPrompt?: string) => {
+      if (steps.length === 0) return;
+      // Override system prompt if a flow-specific custom prompt is provided
+      systemPromptRef.current = customPrompt
+        ? buildSystemPrompt({ customPrompt })
+        : defaultSystemPrompt;
+      flowRef.current = { steps, currentStep: 0 };
+      await injectStep(steps[0].userMessage, steps[0].markdown);
+      flowRef.current!.currentStep = 1;
+    },
+    [injectStep, defaultSystemPrompt],
+  );
+
+  /** Advance the active flow to the next step (if any). */
+  const advanceFlow = useCallback(async () => {
+    const flow = flowRef.current;
+    if (!flow || flow.currentStep >= flow.steps.length) return;
+    const step = flow.steps[flow.currentStep];
+    flow.currentStep++;
+    await injectStep(step.userMessage, step.markdown);
+  }, [injectStep]);
+
+  /** Inject a pre-built markdown document as a user+assistant message pair. */
+  const injectDocument = useCallback(
+    async (label: string, markdown: string) => {
+      flowRef.current = null; // clear any active flow
+      await injectStep(`Show me: ${label}`, markdown);
+    },
+    [injectStep],
+  );
+
   return {
     config,
     messages,
@@ -323,5 +395,8 @@ export function useChat(options?: UseChatOptions) {
     stop,
     clear,
     updateMessage,
+    injectDocument,
+    startFlow,
+    advanceFlow,
   };
 }

demo/src/documents.ts

@@ -1,23 +1,80 @@
 import basicForm from '../../examples/basic-form/document.md?raw';
+import approvalWorkflow from '../../examples/approval-workflow/document.md?raw';
+import employeeOnboarding from '../../examples/employee-onboarding/document.md?raw';
+import bugReport from '../../examples/bug-report/document.md?raw';
+import surveyFeedback from '../../examples/survey-feedback/document.md?raw';
+import orderTracking from '../../examples/order-tracking/document.md?raw';
+import meetingNotes from '../../examples/meeting-notes/document.md?raw';
+import salesDashboard from '../../examples/sales-dashboard/document.md?raw';
+import featureRequest from '../../examples/feature-request/document.md?raw';
 import incidentTriage from '../../blueprints/incident-triage/document.md?raw';
 import changeManagement from '../../blueprints/change-management/document.md?raw';
+import customerEscalation from '../../blueprints/customer-escalation/document.md?raw';
+import clinicalOps from '../../blueprints/clinical-ops/document.md?raw';
+import kycCase from '../../blueprints/kyc-case/document.md?raw';
 
 export interface DocumentEntry {
   label: string;
   markdown: string;
 }
 
 export const documents: Record<string, DocumentEntry> = {
+  // Examples — common use cases
   'basic-form': {
-    label: 'Contact Form (Basic)',
+    label: 'Contact Form',
     markdown: basicForm,
   },
+  'approval-workflow': {
+    label: 'Budget Approval',
+    markdown: approvalWorkflow,
+  },
+  'employee-onboarding': {
+    label: 'Employee Onboarding',
+    markdown: employeeOnboarding,
+  },
+  'bug-report': {
+    label: 'Bug Report',
+    markdown: bugReport,
+  },
+  'survey-feedback': {
+    label: 'Customer Survey',
+    markdown: surveyFeedback,
+  },
+  'order-tracking': {
+    label: 'Order Tracking',
+    markdown: orderTracking,
+  },
+  'meeting-notes': {
+    label: 'Sprint Retrospective',
+    markdown: meetingNotes,
+  },
+  'sales-dashboard': {
+    label: 'Sales Dashboard',
+    markdown: salesDashboard,
+  },
+  'feature-request': {
+    label: 'Feature Request',
+    markdown: featureRequest,
+  },
+  // Blueprints — industry-specific workflows
   'incident-triage': {
-    label: 'Incident Triage (Blueprint)',
+    label: 'Incident Triage',
     markdown: incidentTriage,
   },
   'change-management': {
-    label: 'Change Management (Blueprint)',
+    label: 'Change Management',
     markdown: changeManagement,
   },
+  'customer-escalation': {
+    label: 'Customer Escalation',
+    markdown: customerEscalation,
+  },
+  'clinical-ops': {
+    label: 'Clinical Procedure Approval',
+    markdown: clinicalOps,
+  },
+  'kyc-case': {
+    label: 'KYC Case Review',
+    markdown: kycCase,
+  },
 };