@cognior/iap-sdk 0.1.0

package/src/experiences/modalSequence.ts

@@ -0,0 +1,1247 @@
+// src/experiences/modalSequence.ts
+// Multi-step modal sequence renderer with trigger support
+
+import { sanitizeHtml } from "../utils/sanitize";
+import { register, getRenderer } from "./registry";
+import { resolveSelector } from "../utils/selectors";
+import { modalCssText } from "../styles/modal.css";
+import { createRuleEvaluationListener } from "../utils/ruleEvaluator";
+import type { 
+  ModalSequencePayload, 
+  ModalSequenceStep, 
+  ModalContent,
+  ModalSize,
+  TooltipPayload,
+  PopoverPayload,
+  CompletionTracker
+} from "./types";
+
+type ModalSeqFlow = { id: string; type: "modalSequence"; payload: ModalSequencePayload };
+
+export function registerModalSequence() {
+  register("modalSequence", renderModalSequence);
+}
+
+export async function renderModalSequence(flow: ModalSeqFlow): Promise<void> {
+  console.debug("[DAP] renderModalSequence called with flow:", flow);
+  console.debug("[DAP] ModalSequence payload:", flow.payload);
+  
+  const { payload, id } = flow;
+  
+  if (!payload || !Array.isArray(payload.steps) || payload.steps.length === 0) {
+    console.warn("[DAP] Modal sequence has no steps");
+    return;
+  }
+  
+  // Extract completion tracker
+  const completionTracker = payload._completionTracker;
+  const isMultiStep = payload.steps.length > 1;
+  
+  // Ensure CSS is injected
+  ensureStyles();
+  
+  // State management
+  let currentStepIndex = payload.startAt || 0;
+  let currentTriggerListeners: (() => void)[] = [];
+  let currentStepState: 'idle' | 'waiting-for-trigger' | 'rendered' | 'completed' = 'idle';
+  let activeStepTriggered = false;
+  
+  // UI cleanup functions
+  let modalShell: ReturnType<typeof createModalShell> | null = null;
+  let tooltipCleanup: (() => void) | null = null;
+  let popoverCleanup: (() => void) | null = null;
+  
+  // Focus management
+  const prevActive = document.activeElement as HTMLElement | null;
+  
+  // Keyboard handler
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      closeAll();
+    }
+  };
+  document.addEventListener("keydown", onKeyDown, true);
+  
+  // Start with first step
+  await evaluateAndRenderStep(currentStepIndex);
+  
+  async function evaluateAndRenderStep(stepIndex: number) {
+    const step = payload.steps[stepIndex];
+    if (!step) return;
+    
+    const stepId = step.stepId || `step-${stepIndex + 1}`;
+    
+    console.debug(`[DAP] Evaluating step ${stepIndex}:`, {
+      stepId,
+      elementSelector: step.elementSelector,
+      elementTrigger: step.elementTrigger,
+      kind: step.kind
+    });
+    
+    // Determine if this is a trigger-based step
+    const isTriggerBasedStep = Boolean(step.elementSelector && step.elementTrigger);
+    
+    if (isTriggerBasedStep) {
+      // Setup trigger and wait
+      await setupStepTrigger(stepIndex, step, stepId);
+      currentStepState = 'waiting-for-trigger';
+      console.debug(`[DAP] Step ${stepIndex} waiting for trigger`);
+    } else {
+      // Render immediately
+      await renderStepExperience(stepIndex, step, stepId, true);
+      currentStepState = 'rendered';
+      console.debug(`[DAP] Step ${stepIndex} rendered immediately`);
+    }
+  }
+  
+  async function setupStepTrigger(stepIndex: number, step: ModalSequenceStep, stepId: string) {
+    if (!step.elementSelector || !step.elementTrigger) return;
+    
+    try {
+      // Wait for target element
+      const targetElement = await waitForElement(step.elementSelector);
+      if (!targetElement) {
+        console.warn(`[DAP] Target element not found: ${step.elementSelector}`);
+        return;
+      }
+      
+      // Setup trigger listener
+      const triggerEvent = normalizeTrigger(step.elementTrigger);
+      const triggerHandler = () => {
+        if (activeStepTriggered) return; // Prevent duplicate triggers
+        activeStepTriggered = true;
+        
+        console.debug(`[DAP] Step ${stepIndex} triggered by ${triggerEvent}`);
+        renderStepExperience(stepIndex, step, stepId, false); // false = no navigation for trigger steps
+      };
+      
+      targetElement.addEventListener(triggerEvent, triggerHandler);
+      
+      // Store cleanup function
+      const cleanup = () => {
+        targetElement.removeEventListener(triggerEvent, triggerHandler);
+      };
+      currentTriggerListeners.push(cleanup);
+      
+    } catch (error) {
+      console.error(`[DAP] Error setting up trigger for step ${stepIndex}:`, error);
+      // Auto-advance on trigger setup failure
+      if (stepIndex < payload.steps.length - 1) {
+        setTimeout(() => transitionToStep(stepIndex + 1), 100);
+      } else {
+        closeAll();
+      }
+    }
+  }
+  
+  async function renderStepExperience(stepIndex: number, step: ModalSequenceStep, stepId: string, showNavigation: boolean) {
+    // Clean up previous UI
+    cleanupCurrentStep();
+    
+    console.debug(`[DAP] Rendering step ${stepIndex} (${step.kind})`);
+    
+    switch (step.kind) {
+      case "modal":
+        await renderModalStep(step, showNavigation);
+        break;
+        
+      case "tooltip":
+        if (step.tooltip) {
+          await renderTooltipStep(step.tooltip);
+        }
+        break;
+        
+      case "popover":
+        if (step.popover) {
+          await renderPopoverStep(step.popover);
+        }
+        break;
+        
+      case "survey":
+        // Survey implementation would go here
+        console.warn("[DAP] Survey step not implemented");
+        break;
+        
+      case "rule":
+        // Rule processing - delegate to FlowEngine
+        if (step.rule) {
+          await renderRuleStep(step.rule, stepIndex);
+        } else {
+          console.warn("[DAP] Rule step has no rule data");
+        }
+        break;
+        
+      default:
+        console.warn(`[DAP] Unknown step kind: ${(step as any).kind}`);
+    }
+    
+    currentStepState = 'rendered';
+    
+    // Auto-advance for trigger-based steps after brief delay
+    if (!showNavigation && stepIndex < payload.steps.length - 1) {
+      setTimeout(() => transitionToStep(stepIndex + 1), 2000);
+    }
+  }
+  
+  async function renderModalStep(step: ModalSequenceStep, showNavigation: boolean) {
+    modalShell = createModalShell(step.size);
+    
+    // Header - always populate the title area
+    const header = modalShell.modal.querySelector(".dap-header-bar") as HTMLElement;
+    if (step.title) {
+      const title = document.createElement("h2");
+      title.className = "dap-header-text";
+      title.textContent = step.title;
+      header.insertBefore(title, header.firstChild);
+    } else {
+      // Add empty space to maintain header layout
+      const title = document.createElement("h2");
+      title.className = "dap-header-text";
+      title.style.visibility = "hidden";
+      title.innerHTML = "&nbsp;";
+      header.insertBefore(title, header.firstChild);
+    }
+    
+    // Body content
+    const body = modalShell.modal.querySelector(".dap-modal-body") as HTMLElement;
+    if (step.body && Array.isArray(step.body)) {
+      step.body.forEach(content => {
+        const contentEl = renderModalContent(content, step);
+        if (contentEl) body.appendChild(contentEl);
+      });
+    }
+    
+    // Footer - always show footer for consistent layout
+    const footer = modalShell.modal.querySelector(".dap-modal-footer") as HTMLElement;
+    
+    if (step.footerText) {
+      const footerText = document.createElement("p");
+      footerText.className = "dap-footer-text";
+      footerText.innerHTML = sanitizeHtml(step.footerText);
+      footer.appendChild(footerText);
+    }
+    
+    if (showNavigation && isMultiStep) {
+      const nav = createNavigationButtons();
+      footer.appendChild(nav);
+    }
+    
+    // Add to DOM
+    document.documentElement.appendChild(modalShell.overlay);
+    
+    // Event handlers
+    modalShell.overlay.addEventListener("click", (e) => {
+      if (e.target === modalShell!.overlay) {
+        closeAll();
+      }
+    });
+    
+    const closeBtn = modalShell.modal.querySelector(".dap-modal-close") as HTMLButtonElement;
+    if (closeBtn) {
+      closeBtn.addEventListener("click", closeAll);
+    }
+  }
+  
+  async function renderTooltipStep(tooltipPayload: TooltipPayload) {
+    try {
+      const tooltipRenderer = getRenderer("tooltip");
+      if (tooltipRenderer) {
+        await tooltipRenderer({ 
+          id: `${id}-tooltip`, 
+          type: "tooltip", 
+          payload: tooltipPayload 
+        });
+      }
+    } catch (error) {
+      console.error("[DAP] Error rendering tooltip step:", error);
+    }
+  }
+  
+  async function renderPopoverStep(popoverPayload: PopoverPayload) {
+    try {
+      const popoverRenderer = getRenderer("popover");
+      if (popoverRenderer) {
+        await popoverRenderer({ 
+          id: `${id}-popover`, 
+          type: "popover", 
+          payload: popoverPayload 
+        });
+      }
+    } catch (error) {
+      console.error("[DAP] Error rendering popover step:", error);
+    }
+  }
+  
+  async function renderRuleStep(rulePayload: any, stepIndex: number) {
+    console.debug("[DAP] === RULE STEP PROCESSING START ===");
+    console.debug("[DAP] Step Index:", stepIndex);
+    console.debug("[DAP] Rule Payload:", rulePayload);
+    
+    try {
+      const { inputSelector, rules } = rulePayload;
+      
+      console.debug("[DAP] Extracted inputSelector:", inputSelector);
+      console.debug("[DAP] Extracted rules:", rules);
+      
+      if (!inputSelector || !rules || rules.length === 0) {
+        console.warn("[DAP] Rule step missing inputSelector or rules");
+        console.warn("[DAP] inputSelector:", inputSelector);
+        console.warn("[DAP] rules:", rules);
+        // Auto-advance to next step
+        if (stepIndex < payload.steps.length - 1) {
+          setTimeout(() => transitionToStep(stepIndex + 1), 100);
+        }
+        return;
+      }
+      
+      console.debug(`[DAP] Setting up rule evaluation listener for selector: ${inputSelector}`);
+      console.debug(`[DAP] Number of rules: ${rules.length}`);
+      rules.forEach((rule: any, index: number) => {
+        console.debug(`[DAP] Rule ${index + 1}:`, rule);
+      });
+      
+      // Find the target element for input monitoring
+      console.debug(`[DAP] Resolving selector: ${inputSelector}`);
+      const targetElement = resolveSelector(inputSelector);
+      console.debug(`[DAP] Target element found:`, targetElement);
+      
+      if (!targetElement) {
+        console.warn(`[DAP] Could not find target element for selector: ${inputSelector}`);
+        console.warn(`[DAP] Available elements with similar selectors:`);
+        // Try to find similar elements for debugging
+        try {
+          const allInputs = document.querySelectorAll('input, select, textarea');
+          console.warn(`[DAP] Found ${allInputs.length} input elements on page`);
+          allInputs.forEach((el, i) => {
+            console.warn(`[DAP] Input ${i + 1}: ${el.tagName}${el.id ? '#' + el.id : ''}${el.className ? '.' + el.className.replace(/\s+/g, '.') : ''}`);
+          });
+        } catch (e) {
+          console.warn(`[DAP] Error listing input elements:`, e);
+        }
+        
+        // Auto-advance to next step
+        if (stepIndex < payload.steps.length - 1) {
+          setTimeout(() => transitionToStep(stepIndex + 1), 100);
+        }
+        return;
+      }
+      
+      console.debug(`[DAP] Creating rule evaluation listener...`);
+      
+      // Create rule evaluation listener
+      const eventHandler = createRuleEvaluationListener(
+        rules,
+        (nextFlowId: string) => {
+          console.debug(`[DAP] *** RULE EVALUATION TRIGGERED ***`);
+          console.debug(`[DAP] Rule evaluation triggered transition to flow: ${nextFlowId}`);
+          
+          // Testing alert for rule evaluation
+          alert(`🎯 Rule Evaluated! Next Flow: ${nextFlowId}\n\nRule evaluation is working correctly.`);
+          
+          // In modal sequence context, we'll just log this for now
+          // In a real implementation, this would trigger flow switching
+          console.info(`[DAP] Would transition to flow: ${nextFlowId}`);
+          
+          // Auto-advance to next step after rule match
+          if (stepIndex < payload.steps.length - 1) {
+            console.debug(`[DAP] Auto-advancing to next step: ${stepIndex + 1}`);
+            setTimeout(() => transitionToStep(stepIndex + 1), 100);
+          } else {
+            console.debug(`[DAP] Rule step was the last step`);
+          }
+        }
+      );
+      
+      console.debug(`[DAP] Attaching event listeners to target element...`);
+      
+      // Attach event listener to the target element
+      targetElement.addEventListener('input', eventHandler);
+      targetElement.addEventListener('change', eventHandler);
+      
+      console.debug(`[DAP] Event listeners attached for 'input' and 'change' events`);
+      
+      // Create cleanup function
+      const cleanup = () => {
+        console.debug(`[DAP] Cleaning up rule step event listeners`);
+        targetElement.removeEventListener('input', eventHandler);
+        targetElement.removeEventListener('change', eventHandler);
+      };
+      
+      // Store cleanup function for later
+      currentTriggerListeners.push(cleanup);
+      
+      console.debug("[DAP] Rule step listener active - waiting for user input");
+      console.debug(`[DAP] Target element type: ${targetElement.tagName}, value: "${(targetElement as HTMLInputElement).value || ''}"`);
+      console.debug("[DAP] === RULE STEP PROCESSING COMPLETE ===");
+      
+      // Testing alert to confirm rule step setup
+      alert(`🔍 Rule Step Setup Complete!\n\nMonitoring element: ${inputSelector}\nRules: ${rules.length}\n\nTry interacting with the target element.`);
+      
+    } catch (error) {
+      console.error("[DAP] Error setting up rule step:", error);
+      if (error instanceof Error) {
+        console.error("[DAP] Stack trace:", error.stack);
+      }
+      
+      // On error, try to continue to next step
+      if (stepIndex < payload.steps.length - 1) {
+        setTimeout(() => transitionToStep(stepIndex + 1), 100);
+      }
+    }
+  }
+  
+  function createNavigationButtons(): HTMLElement {
+    const nav = document.createElement("div");
+    nav.className = "dap-modal-nav";
+    
+    // Previous button
+    const prevBtn = document.createElement("button");
+    prevBtn.className = "dap-btn dap-btn-secondary";
+    prevBtn.textContent = "Previous";
+    prevBtn.disabled = currentStepIndex === 0;
+    prevBtn.addEventListener("click", goToPrevious);
+    
+    // Step indicator
+    const indicator = document.createElement("span");
+    indicator.className = "dap-step-indicator";
+    indicator.textContent = `${currentStepIndex + 1} of ${payload.steps.length}`;
+    
+    // Next button
+    const nextBtn = document.createElement("button");
+    nextBtn.className = "dap-btn dap-btn-primary";
+    nextBtn.textContent = currentStepIndex === payload.steps.length - 1 ? "Complete" : "Next";
+    nextBtn.addEventListener("click", goToNext);
+    
+    nav.appendChild(prevBtn);
+    nav.appendChild(indicator);
+    nav.appendChild(nextBtn);
+    
+    return nav;
+  }
+  
+  function goToPrevious() {
+    if (currentStepIndex > 0) {
+      transitionToStep(currentStepIndex - 1);
+    }
+  }
+  
+  function goToNext() {
+    if (currentStepIndex < payload.steps.length - 1) {
+      transitionToStep(currentStepIndex + 1);
+    } else {
+      closeAll();
+    }
+  }
+  
+  function transitionToStep(newStepIndex: number) {
+    console.debug(`[DAP] Transitioning from step ${currentStepIndex} to step ${newStepIndex}`);
+    
+    // Clean up current step
+    cleanupCurrentStep();
+    
+    // Update state
+    const oldStepIndex = currentStepIndex;
+    currentStepIndex = newStepIndex;
+    activeStepTriggered = false;
+    currentStepState = 'idle';
+    
+    // Notify step advancement
+    if (completionTracker?.onStepAdvance) {
+      const newStepId = payload.steps[newStepIndex]?.stepId || `step-${newStepIndex + 1}`;
+      completionTracker.onStepAdvance(newStepId);
+    }
+    
+    // Render new step
+    evaluateAndRenderStep(currentStepIndex);
+  }
+  
+  function cleanupCurrentStep() {
+    console.debug(`[DAP] Cleaning up step ${currentStepIndex}`);
+    
+    // Remove trigger listeners
+    currentTriggerListeners.forEach(cleanup => cleanup());
+    currentTriggerListeners = [];
+    
+    // Clean up UI
+    if (modalShell) {
+      modalShell.overlay.remove();
+      modalShell = null;
+    }
+    
+    tooltipCleanup?.();
+    tooltipCleanup = null;
+    
+    popoverCleanup?.();
+    popoverCleanup = null;
+    
+    // Reset state
+    currentStepState = 'idle';
+    activeStepTriggered = false;
+  }
+  
+  function closeAll() {
+    console.debug("[DAP] Closing modal sequence");
+    
+    cleanupCurrentStep();
+    document.removeEventListener("keydown", onKeyDown, true);
+    prevActive?.focus();
+    
+    // Signal completion
+    if (completionTracker?.onComplete) {
+      console.debug(`[DAP] Completing modal sequence flow: ${id}`);
+      completionTracker.onComplete();
+    }
+  }
+}
+
+function createModalShell(size?: string) {
+  const overlay = document.createElement("div");
+  overlay.className = "dap-modal-wrap";
+  
+  const modal = document.createElement("div");
+  modal.className = "dap-modal";
+  
+  // Apply size class if specified
+  if (size) {
+    modal.classList.add(`dap-modal-${size}`);
+  } else {
+    modal.classList.add("dap-modal-medium"); // Default to medium size
+  }
+  
+  // Header
+  const header = document.createElement("div");
+  header.className = "dap-header-bar";
+  
+  // Close button
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "dap-modal-close";
+  closeBtn.setAttribute("aria-label", "Close modal");
+  closeBtn.innerHTML = "×";
+  header.appendChild(closeBtn);
+  
+  // Body
+  const body = document.createElement("div");
+  body.className = "dap-modal-body";
+  
+  // Footer
+  const footer = document.createElement("div");
+  footer.className = "dap-modal-footer";
+  
+  // Assemble
+  modal.appendChild(header);
+  modal.appendChild(body);
+  modal.appendChild(footer);
+  overlay.appendChild(modal);
+  
+  // Accessibility
+  modal.setAttribute("role", "dialog");
+  modal.setAttribute("aria-modal", "true");
+  
+  return { overlay, modal, header, body, footer };
+}
+
+function renderModalContent(content: ModalContent, step?: any): HTMLElement | null {
+  switch (content.kind) {
+    case "text":
+      const textEl = document.createElement("div");
+      textEl.className = "dap-content-text";
+      textEl.innerHTML = sanitizeHtml(content.html);
+      return textEl;
+      
+    case "link":
+      const linkEl = document.createElement("a");
+      linkEl.className = "dap-content-link";
+      linkEl.href = content.href;
+      linkEl.textContent = content.label || content.href;
+      linkEl.target = "_blank";
+      linkEl.rel = "noopener noreferrer";
+      return linkEl;
+      
+    case "image":
+      const imgEl = document.createElement("img");
+      imgEl.className = "dap-content-image";
+      imgEl.src = content.url;
+      imgEl.alt = content.alt || "";
+      return imgEl;
+      
+    case "video":
+      if (content.sources && content.sources.length > 0) {
+        const videoEl = document.createElement("video");
+        videoEl.className = "dap-content-video";
+        videoEl.controls = true;
+        
+        content.sources.forEach(source => {
+          const sourceEl = document.createElement("source");
+          sourceEl.src = source.src;
+          if (source.type) sourceEl.type = source.type;
+          videoEl.appendChild(sourceEl);
+        });
+        
+        return videoEl;
+      }
+      return null;
+      
+    case "youtube":
+      const iframeEl = document.createElement("iframe");
+      iframeEl.className = "dap-content-youtube";
+      iframeEl.src = content.href;
+      iframeEl.setAttribute("frameborder", "0");
+      iframeEl.setAttribute("allowfullscreen", "true");
+      return iframeEl;
+      
+    case "kb":
+      // Knowledge base rendering with in-modal viewing
+      console.debug("[DAP] Rendering KB content:", content);
+      // Store current step and KB data for navigation
+      currentSequenceStep = step;
+      currentSequenceKBData = content;
+      return renderKnowledgeBaseInSequence(content);
+      
+    case "kb-item-viewer":
+      // Knowledge base item viewer for modal sequence
+      console.debug("[DAP] Rendering KB item viewer:", content);
+      return renderKBItemViewerInSequence(content);
+      
+    case "article":
+      console.debug("[DAP] Rendering Article in sequence");
+      return createArticleViewerInSequence(content);
+      
+    default:
+      return null;
+  }
+}
+
+async function waitForElement(selector: string, timeout = 5000): Promise<Element | null> {
+  // Check if element already exists
+  const existingElement = resolveSelector(selector);
+  if (existingElement) return existingElement;
+  
+  // Wait for element to appear
+  return new Promise((resolve) => {
+    let timeoutId: number;
+    let observer: MutationObserver;
+    
+    timeoutId = window.setTimeout(() => {
+      observer?.disconnect();
+      resolve(null);
+    }, timeout);
+    
+    observer = new MutationObserver(() => {
+      const element = resolveSelector(selector);
+      if (element) {
+        clearTimeout(timeoutId);
+        observer.disconnect();
+        resolve(element);
+      }
+    });
+    
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  });
+}
+
+function normalizeTrigger(trigger: string): string {
+  switch (trigger?.toLowerCase()) {
+    case "hover":
+      return "mouseenter";
+    case "focus":
+      return "focus";
+    case "click":
+    default:
+      return "click";
+  }
+}
+
+function ensureStyles() {
+  if (!document.getElementById("dap-modal-sequence-style")) {
+    const style = document.createElement("style");
+    style.id = "dap-modal-sequence-style";
+    style.textContent = modalCssText + `
+      .dap-modal-nav {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 12px;
+        margin-top: 16px;
+      }
+      
+      .dap-step-indicator {
+        font-size: 14px;
+        color: var(--dap-text-muted);
+      }
+      
+      .dap-btn {
+        padding: 8px 16px;
+        border: 1px solid var(--dap-border);
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+      
+      .dap-btn-primary {
+        background: var(--dap-primary);
+        color: white;
+        border-color: var(--dap-primary);
+      }
+      
+      .dap-btn-secondary {
+        background: transparent;
+        color: var(--dap-text);
+      }
+      
+      .dap-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      
+      .dap-content-kb {
+        margin: 16px 0;
+      }
+      
+      .dap-kb-item {
+        margin: 8px 0;
+        padding: 8px;
+        border: 1px solid var(--dap-border);
+        border-radius: 4px;
+      }
+      
+      .dap-kb-item a {
+        font-weight: 500;
+        color: var(--dap-primary);
+        text-decoration: none;
+      }
+      
+      .dap-kb-item p {
+        margin: 4px 0 0;
+        font-size: 14px;
+        color: var(--dap-text-muted);
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
+// Knowledge Base rendering functions for modal sequences
+function renderKnowledgeBaseInSequence(content: any): HTMLElement {
+  const container = document.createElement('div');
+  container.className = 'dap-content-kb';
+  
+  console.debug("[DAP] Rendering KB sequence with content:", content);
+  console.debug("[DAP] KB items count:", content?.items?.length || 0);
+
+  if (!content.items || !Array.isArray(content.items)) {
+    console.warn("[DAP] No KB items available for rendering");
+    container.innerHTML = '<p>No knowledge base items available.</p>';
+    return container;
+  }
+
+  // Add title if available
+  if (content.title) {
+    const title = document.createElement('h3');
+    title.textContent = content.title;
+    title.className = 'dap-kb-title';
+    container.appendChild(title);
+  }
+
+  // Add description if available
+  if (content.description) {
+    const desc = document.createElement('p');
+    desc.textContent = content.description;
+    desc.className = 'dap-kb-description';
+    container.appendChild(desc);
+  }
+
+  // Create items list
+  const itemsList = document.createElement('div');
+  itemsList.className = 'dap-kb-items-list';
+
+  content.items.forEach((item: any) => {
+    const itemElement = document.createElement('button');
+    itemElement.className = 'dap-kb-item-button';
+    itemElement.type = 'button';
+    
+    // Add icon based on content type
+    const icon = document.createElement('span');
+    icon.className = 'dap-kb-item-icon';
+    
+    const type = item.type?.toLowerCase() || '';
+    if (type === 'video' || item.url?.includes('youtube') || item.url?.includes('vimeo')) {
+      icon.textContent = '▶';
+    } else if (type === 'image' || /\.(jpg|jpeg|png|gif|webp)$/i.test(item.url || '')) {
+      icon.textContent = '🖼';
+    } else if (type === 'pdf' || /\.pdf$/i.test(item.url || '')) {
+      icon.textContent = '📄';
+    } else if (type === 'doc' || type === 'docx' || /\.(doc|docx)$/i.test(item.url || '')) {
+      icon.textContent = '📝';
+    } else {
+      icon.textContent = '📰';
+    }
+    
+    const title = document.createElement('span');
+    title.className = 'dap-kb-item-title';
+    title.textContent = item.title || 'Untitled Item';
+    
+    const description = document.createElement('span');
+    description.className = 'dap-kb-item-description';
+    description.textContent = item.description || '';
+    
+    itemElement.appendChild(icon);
+    itemElement.appendChild(title);
+    if (item.description) {
+      itemElement.appendChild(description);
+    }
+    
+    // Add click handler to open item in modal
+    itemElement.addEventListener('click', () => {
+      openKBItemInSequence(item);
+    });
+    
+    itemsList.appendChild(itemElement);
+  });
+
+  container.appendChild(itemsList);
+  return container;
+}
+
+function renderKBItemViewerInSequence(content: any): HTMLElement {
+  const container = document.createElement('div');
+  container.className = 'dap-kb-item-viewer';
+
+  // Add back button
+  const backButton = document.createElement('button');
+  backButton.className = 'dap-kb-back-button';
+  backButton.innerHTML = '← Back to Knowledge Base';
+  backButton.addEventListener('click', goBackToKBListInSequence);
+  container.appendChild(backButton);
+
+  // Add title
+  const title = document.createElement('h3');
+  title.className = 'dap-kb-item-title';
+  title.textContent = content.title || 'Knowledge Base Item';
+  container.appendChild(title);
+
+  // Add content based on type
+  const type = content.type?.toLowerCase() || '';
+  const url = content.url || '';
+
+  if (type === 'video' || url.includes('youtube.com') || url.includes('youtu.be') || url.includes('vimeo.com')) {
+    const videoContainer = document.createElement('div');
+    videoContainer.className = 'dap-kb-video-container';
+    
+    if (url.includes('youtube.com') || url.includes('youtu.be')) {
+      // Handle YouTube URLs
+      let videoId = '';
+      if (url.includes('youtube.com/watch?v=')) {
+        videoId = url.split('watch?v=')[1]?.split('&')[0];
+      } else if (url.includes('youtu.be/')) {
+        videoId = url.split('youtu.be/')[1]?.split('?')[0];
+      }
+      
+      if (videoId) {
+        const iframe = document.createElement('iframe');
+        iframe.className = 'dap-kb-video';
+        iframe.src = `https://www.youtube.com/embed/${videoId}`;
+        iframe.setAttribute('frameborder', '0');
+        iframe.setAttribute('allowfullscreen', '');
+        videoContainer.appendChild(iframe);
+      }
+    } else if (url.includes('vimeo.com')) {
+      // Handle Vimeo URLs
+      const videoId = url.split('vimeo.com/')[1]?.split('?')[0];
+      if (videoId) {
+        const iframe = document.createElement('iframe');
+        iframe.className = 'dap-kb-video';
+        iframe.src = `https://player.vimeo.com/video/${videoId}`;
+        iframe.setAttribute('frameborder', '0');
+        iframe.setAttribute('allowfullscreen', '');
+        videoContainer.appendChild(iframe);
+      }
+    } else {
+      // Direct video file
+      const video = document.createElement('video');
+      video.className = 'dap-kb-video';
+      video.src = url;
+      video.controls = true;
+      videoContainer.appendChild(video);
+    }
+    
+    container.appendChild(videoContainer);
+  } else if (type === 'image' || /\.(jpg|jpeg|png|gif|webp)$/i.test(url)) {
+    const img = document.createElement('img');
+    img.className = 'dap-kb-image';
+    img.src = url;
+    img.alt = content.title || 'Knowledge Base Image';
+    container.appendChild(img);
+  } else if (type === 'pdf' || /\.pdf$/i.test(url)) {
+    const pdfContainer = document.createElement('div');
+    pdfContainer.className = 'dap-kb-pdf-container';
+    
+    const iframe = document.createElement('iframe');
+    iframe.className = 'dap-kb-pdf-iframe';
+    iframe.src = url;
+    iframe.setAttribute('frameborder', '0');
+    
+    pdfContainer.appendChild(iframe);
+    container.appendChild(pdfContainer);
+  } else if (type === 'doc' || type === 'docx' || /\.(doc|docx)$/i.test(url)) {
+    const docContainer = document.createElement('div');
+    docContainer.className = 'dap-kb-document-container';
+    
+    // For Office documents, we can try Office Online viewer or show download link
+    const iframe = document.createElement('iframe');
+    iframe.className = 'dap-kb-document-iframe';
+    iframe.src = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`;
+    iframe.setAttribute('frameborder', '0');
+    
+    docContainer.appendChild(iframe);
+    container.appendChild(docContainer);
+  } else {
+    // Article or other content - use enhanced article viewer
+    const mimeType = content.mime || content.mimeType || null;
+    
+    // Determine if this is a document-based article
+    const isDocumentArticle = mimeType && (
+      mimeType === 'application/pdf' ||
+      mimeType.includes('word') ||
+      mimeType.includes('msword') ||
+      mimeType.includes('presentation') ||
+      mimeType.includes('powerpoint') ||
+      /\.(pdf|doc|docx|ppt|pptx)$/i.test(url)
+    );
+    
+    if (isDocumentArticle) {
+      console.debug("[DAP] Rendering document-based article with enhanced viewer");
+      // Use the enhanced article viewer for document content
+      const articleViewer = createArticleViewerInSequence(content);
+      container.appendChild(articleViewer);
+    } else {
+      // Traditional article content (HTML/text)
+      const articleContainer = document.createElement('div');
+      articleContainer.className = 'dap-kb-article-container';
+      
+      if (content.content) {
+        articleContainer.innerHTML = content.content;
+      } else if (url) {
+        // Show enhanced fallback for external content
+        const fallback = createSequenceFallbackViewer(url, content.fileName || 'External Article', 
+          'This content is available at an external link.');
+        articleContainer.appendChild(fallback);
+      }
+      
+      container.appendChild(articleContainer);
+    }
+  }
+
+  // Add description if available
+  if (content.description) {
+    const desc = document.createElement('p');
+    desc.className = 'dap-kb-item-description';
+    desc.textContent = content.description;
+    container.appendChild(desc);
+  }
+
+  return container;
+}
+
+// Global variables to track KB state in sequences
+let currentSequenceKBData: any = null;
+let currentSequenceStep: any = null;
+
+function openKBItemInSequence(item: any) {
+  console.debug("[DAP] Opening KB item in sequence:", item);
+  console.debug("[DAP] KB view changed to item");
+  
+  // Find the current modal and update its content
+  const modal = document.querySelector('.dap-modal-content');
+  if (modal && currentSequenceStep) {
+    console.debug("[DAP] KB items count:", currentSequenceKBData?.items?.length || 0);
+    
+    // Update the step to show item viewer
+    const updatedStep = {
+      ...currentSequenceStep,
+      content: {
+        type: 'kb-item-viewer',
+        ...item
+      }
+    };
+    
+    // Re-render the modal content
+    const contentElement = modal.querySelector('.dap-content');
+    if (contentElement) {
+      const newContent = renderKBItemViewerInSequence(item);
+      contentElement.innerHTML = '';
+      contentElement.appendChild(newContent);
+    }
+  }
+}
+
+function goBackToKBListInSequence() {
+  console.debug("[DAP] Going back to KB list in sequence");
+  console.debug("[DAP] KB view changed to list");
+  
+  // Find the current modal and restore KB list view
+  const modal = document.querySelector('.dap-modal-content');
+  if (modal && currentSequenceKBData && currentSequenceStep) {
+    console.debug("[DAP] KB items count:", currentSequenceKBData?.items?.length || 0);
+    
+    // Restore the original KB content
+    const updatedStep = {
+      ...currentSequenceStep,
+      content: {
+        type: 'kb',
+        ...currentSequenceKBData
+      }
+    };
+    
+    // Re-render the modal content
+    const contentElement = modal.querySelector('.dap-content');
+    if (contentElement) {
+      const newContent = renderKnowledgeBaseInSequence(currentSequenceKBData);
+      contentElement.innerHTML = '';
+      contentElement.appendChild(newContent);
+    }
+  } else {
+    console.error("[DAP] Cannot go back: missing modal, KB data, or step");
+  }
+}
+
+// Article Viewer for Modal Sequences - matches the standard DAP Article behavior
+function createArticleViewerInSequence(content: any): HTMLElement {
+  console.debug("[DAP] Creating Article viewer in sequence");
+  
+  const container = document.createElement("div");
+  container.className = "dap-content-article";
+  
+  const url = content.url || content.presignedUrl || "";
+  const fileName = content.fileName || "Document";
+  const title = content.title || fileName;
+  const mimeType = content.mime || content.mimeType || null;
+  
+  console.debug("[DAP] Article URL:", url);
+  console.debug("[DAP] Article MIME:", mimeType);
+  
+  if (!url) {
+    console.error("[DAP] No URL provided for Article content");
+    container.innerHTML = `
+      <div class="dap-fallback-viewer">
+        <p><strong>No document URL provided</strong></p>
+        <p>Unable to display article content.</p>
+      </div>
+    `;
+    return container;
+  }
+  
+  // Determine viewer type based on MIME type and file extension
+  const viewerType = resolveArticleViewerType(url, mimeType, fileName);
+  console.debug("[DAP] Selected viewer type:", viewerType);
+  
+  // Add title
+  const titleEl = document.createElement("h4");
+  titleEl.className = "dap-article-title";
+  titleEl.textContent = title;
+  container.appendChild(titleEl);
+  
+  // Create appropriate viewer
+  switch (viewerType) {
+    case "pdf":
+      const pdfViewer = createSequencePDFViewer(url, fileName);
+      container.appendChild(pdfViewer);
+      break;
+      
+    case "document":
+      const docViewer = createSequenceDocumentViewer(url, fileName, mimeType);
+      container.appendChild(docViewer);
+      break;
+      
+    case "presentation":
+      const pptViewer = createSequencePresentationViewer(url, fileName, mimeType);
+      container.appendChild(pptViewer);
+      break;
+      
+    case "fallback":
+    default:
+      console.debug("[DAP] Fallback activated for sequence");
+      const fallbackViewer = createSequenceFallbackViewer(url, fileName, "This document cannot be previewed inline.");
+      container.appendChild(fallbackViewer);
+      break;
+  }
+  
+  return container;
+}
+
+// Article viewer type resolver for sequences
+function resolveArticleViewerType(url: string, mimeType: string | null, fileName: string): string {
+  console.debug("[DAP] Resolving Article viewer type");
+  console.debug("[DAP] MIME type:", mimeType || "none");
+  
+  // Check MIME type first
+  if (mimeType) {
+    if (mimeType === "application/pdf") {
+      return "pdf";
+    }
+    if (mimeType.includes("word") || mimeType.includes("msword") || 
+        mimeType === "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {
+      return "document";
+    }
+    if (mimeType.includes("presentation") || mimeType.includes("powerpoint") ||
+        mimeType === "application/vnd.openxmlformats-officedocument.presentationml.presentation") {
+      return "presentation";
+    }
+  }
+  
+  // Fallback to file extension
+  const urlLower = url.toLowerCase();
+  const fileNameLower = fileName.toLowerCase();
+  
+  if (urlLower.includes(".pdf") || fileNameLower.endsWith(".pdf")) {
+    return "pdf";
+  }
+  if (urlLower.match(/\.(doc|docx)/) || fileNameLower.match(/\.(doc|docx)$/)) {
+    return "document";
+  }
+  if (urlLower.match(/\.(ppt|pptx)/) || fileNameLower.match(/\.(ppt|pptx)$/)) {
+    return "presentation";
+  }
+  
+  return "fallback";
+}
+
+// PDF viewer for sequences
+function createSequencePDFViewer(url: string, fileName: string): HTMLElement {
+  const container = document.createElement("div");
+  container.className = "dap-pdf-viewer-container";
+  
+  const iframe = document.createElement("iframe");
+  iframe.className = "dap-pdf-iframe";
+  iframe.src = url;
+  iframe.style.width = "100%";
+  iframe.style.height = "400px";
+  iframe.style.border = "1px solid #ddd";
+  iframe.setAttribute("frameborder", "0");
+  
+  container.appendChild(iframe);
+  
+  // Add action buttons
+  const actions = createSequenceDocumentActions(url, fileName);
+  container.appendChild(actions);
+  
+  return container;
+}
+
+// Document viewer for sequences
+function createSequenceDocumentViewer(url: string, fileName: string, mimeType?: string | null): HTMLElement {
+  const container = document.createElement("div");
+  container.className = "dap-document-viewer-container";
+  
+  // Try Office Online viewer for supported document types
+  if (mimeType && (mimeType.includes("word") || mimeType.includes("msword"))) {
+    const iframe = document.createElement("iframe");
+    iframe.className = "dap-document-iframe";
+    iframe.src = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`;
+    iframe.style.width = "100%";
+    iframe.style.height = "400px";
+    iframe.style.border = "1px solid #ddd";
+    iframe.setAttribute("frameborder", "0");
+    
+    container.appendChild(iframe);
+  } else {
+    // Show fallback for unsupported document types
+    const fallback = createSequenceFallbackViewer(url, fileName, "Document preview is not supported for this file type.");
+    container.appendChild(fallback);
+  }
+  
+  // Add action buttons
+  const actions = createSequenceDocumentActions(url, fileName);
+  container.appendChild(actions);
+  
+  return container;
+}
+
+// Presentation viewer for sequences
+function createSequencePresentationViewer(url: string, fileName: string, mimeType?: string | null): HTMLElement {
+  const container = document.createElement("div");
+  container.className = "dap-presentation-viewer-container";
+  
+  // Try Office Online viewer for presentations
+  if (mimeType && mimeType.includes("presentation")) {
+    const iframe = document.createElement("iframe");
+    iframe.className = "dap-presentation-iframe";
+    iframe.src = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`;
+    iframe.style.width = "100%";
+    iframe.style.height = "400px";
+    iframe.style.border = "1px solid #ddd";
+    iframe.setAttribute("frameborder", "0");
+    
+    container.appendChild(iframe);
+  } else {
+    // Show fallback for unsupported presentation types
+    const fallback = createSequenceFallbackViewer(url, fileName, "Presentation preview is not supported for this file type.");
+    container.appendChild(fallback);
+  }
+  
+  // Add action buttons
+  const actions = createSequenceDocumentActions(url, fileName);
+  container.appendChild(actions);
+  
+  return container;
+}
+
+// Fallback viewer for sequences
+function createSequenceFallbackViewer(url: string, fileName: string, message: string): HTMLElement {
+  const container = document.createElement("div");
+  container.className = "dap-fallback-viewer";
+  
+  container.innerHTML = `
+    <div class="dap-fallback-message">
+      <p><strong>${message}</strong></p>
+      <p>File: ${fileName}</p>
+    </div>
+  `;
+  
+  // Add action buttons
+  const actions = createSequenceDocumentActions(url, fileName);
+  container.appendChild(actions);
+  
+  return container;
+}
+
+// Document action buttons for sequences
+function createSequenceDocumentActions(url: string, fileName: string): HTMLElement {
+  const actions = document.createElement("div");
+  actions.className = "dap-document-actions";
+  
+  // Download button
+  const downloadBtn = document.createElement("button");
+  downloadBtn.className = "dap-action-btn dap-download-btn";
+  downloadBtn.textContent = "Download";
+  downloadBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName || "download";
+    link.target = "_blank";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  });
+  
+  // Open in new tab button
+  const openBtn = document.createElement("button");
+  openBtn.className = "dap-action-btn dap-open-btn";
+  openBtn.textContent = "Open in New Tab";
+  openBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    window.open(url, "_blank", "noopener,noreferrer");
+  });
+  
+  actions.appendChild(downloadBtn);
+  actions.appendChild(openBtn);
+  
+  return actions;
+}