OTB — Out of the BoxDigital Platform: Flipbook Menu · Rule-Based Bot · Cloudinary CDN · Interactive Maps

1// Rule-based decision tree node (simplified)
2// Each node has: text, optional options, optional handler
3const TREE: ChatNode = {
4  id: 'root',
5  text: "👋 Hey! I'm your OTB Host. How can I help?",
6  options: ['📍 Locations', '🍴 Menu', '📅 Reserve a Table', '🎉 Events', '❓ Something else'],
7  children: {
8    '📍 Locations': {
9      text: "Which location would you like to know about?",
10      options: ['🏛️ Khan Market', '🏙️ Connaught Place'],
11      children: {
12        '🏛️ Khan Market': { text: "OTB Khan Market opens at 12pm…", options: ['⬅ Back'] },
13        '🏙️ Connaught Place': { text: "OTB CP is at Inner Circle…", options: ['⬅ Back'] },
14      }
15    },
16    // … more branches
17  }
18}
19
20// Streaming typewriter effect
21const streamText = async (text: string) => {
22  for (let i = 0; i <= text.length; i++) {
23    await new Promise(r => setTimeout(r, 12))   // 12ms/char ≈ 83 chars/sec
24    setMessages(prev => prev.map(m =>
25      m.id === currentId ? { ...m, text: text.slice(0, i), isStreaming: i < text.length } : m
26    ))
27  }
28}

1// Responsive A4-ratio sizer — core algorithm
2const updateDimensions = () => {
3  const mobileView = window.innerWidth < 768
4  const headerSpace = 140   // NavBar (100px) + safety margins
5  const availableHeight = window.innerHeight - headerSpace
6  const availableWidth = window.innerWidth - (mobileView ? 20 : 80)
7
8  let pageHeight = availableHeight
9  let pageWidth = pageHeight / 1.414     // A4 aspect ratio
10  
11  if (mobileView) {
12    // Single page: clamp to available width
13    if (pageWidth > availableWidth) {
14      pageWidth = availableWidth
15      pageHeight = pageWidth * 1.414
16    }
17  } else {
18    // Double-page spread: two pages must fit
19    if (pageWidth * 2 > availableWidth) {
20      pageWidth = availableWidth / 2
21      pageHeight = pageWidth * 1.414
22    }
23  }
24  setDimensions({ width: Math.floor(pageWidth), height: Math.floor(pageHeight) })
25}

1// Intelligent Cloudinary loader — 4 code paths in one function
2export default function cloudinaryLoader({ src, width, quality }) {
3  if (!src) return '/brand/placeholder.png'               // 1. Safe fallback
4
5  if (src.includes('res.cloudinary.com')) {               // 2. Full Cloudinary URL
6    if (src.includes('/w_') || ...) return src            //    Already optimised? pass through
7    const [base, file] = src.split('/upload/')
8    const params = `f_auto,q_auto:best,w_${width}`       //    Inject transforms
9    return `${base}/upload/${params}/${file}`
10  }
11
12  if (src.startsWith('http')) return src                  // 3. External URL passthrough
13  if (src.startsWith('/brand/')) return src               // 4. Local brand assets
14
15  // 5. Public ID path → build full Cloudinary URL
16  const params = `f_auto,q_auto:best,w_${width},c_limit`
17  return `https://res.cloudinary.com/${cloudName}/image/upload/${params}/${src}`
18}