Was this page helpful?

Your feedback helps us sharpen the docs.

<div className="row">
          <button className="btn-ghost" onClick={() => setRating(null)}>Cancel</button>
          <button className="btn-primary" onClick={() => setSent(true)}>Send feedback</button>
        </div>
      </div>
    </div>
  );
}

function PageFoot({ prev, next }) {
  return (
    <div className="page-foot">
      {prev ? (
        <a href={prev.href}>
          <div className="label">← Previous</div>
          <div className="title"><Icon name="arrowL" size={12} /> {prev.label}</div>
        </a>
      ) : <div />}
      {next ? (
        <a href={next.href} className="next">
          <div className="label">Next →</div>
          <div className="title">{next.label} <Icon name="arrowR" size={12} /></div>
        </a>
      ) : <div />}
    </div>
  );
}

const SEARCH_INDEX = [
  { group: 'Getting started', title: 'Introduction', path: '/', href: 'index.html', icon: 'book' },
  { group: 'Getting started', title: 'Quickstart — your first agent reply', path: '/quickstart', href: 'quickstart.html', icon: 'rocket' },
  { group: 'Getting started', title: 'Authentication with API keys', path: '/auth', href: '#', icon: 'key' },
  { group: 'Getting started', title: 'Errors & retries', path: '/errors', href: '#', icon: 'warn' },
  { group: 'Concepts', title: 'Architecture — multi-tenant, filesystem-first', path: '/concepts/architecture', href: 'guide.html', icon: 'puzzle' },
  { group: 'Concepts', title: 'Admin & CS agents', path: '/concepts/agents', href: '#', icon: 'cpu' },
  { group: 'Concepts', title: 'Skills — Markdown, progressive disclosure', path: '/concepts/skills', href: '#', icon: 'puzzle' },
  { group: 'Concepts', title: 'Memory & the eight context files', path: '/concepts/memory', href: '#', icon: 'database' },
  { group: 'Concepts', title: '2-tool runtime (bash + load_skill)', path: '/concepts/tools', href: '#', icon: 'terminal' },
  { group: 'Channels', title: 'WhatsApp Cloud API', path: '/channels/whatsapp', href: '#', icon: 'at' },
  { group: 'Channels', title: 'Telegram Bot', path: '/channels/telegram', href: '#', icon: 'at' },
  { group: 'API', title: 'POST /api/admin — owner-facing agent', path: '/api/admin', href: 'api-reference.html', icon: 'code' },
  { group: 'API', title: 'POST /api/cs — customer-facing agent', path: '/api/cs', href: 'api-reference.html', icon: 'code' },
  { group: 'API', title: 'Rate limits & quotas', path: '/api/rate-limits', href: '#', icon: 'bolt' },
  { group: 'API', title: 'Webhooks reference', path: '/api/webhooks', href: '#', icon: 'webhook' },
  { group: 'Changelog', title: 'v0.1 — Phase 8/9 channels ship', path: '/changelog#0.1', href: 'changelog.html', icon: 'sparkle' },
];

React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowDown') { e.preventDefault(); setFocus(f => Math.min(flat.length - 1, f + 1)); }
      if (e.key === 'ArrowUp') { e.preventDefault(); setFocus(f => Math.max(0, f - 1)); }
      if (e.key === 'Enter' && flat[focus]) {
        window.location.href = flat[focus].href;
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, flat, focus, onClose]);

function TweaksPanel({ visible, theme, setTheme }) {
  if (!visible) return null;
  return (
    <div className="tweaks-panel visible">
      <div className="tweaks-title">Tweaks</div>
      <div className="tweaks-row">
        <span>Theme</span>
        <div className="toggle-group">
          <button className={`toggle-btn ${theme === 'light' ? 'active' : ''}`} onClick={() => setTheme('light')}>Light</button>
          <button className={`toggle-btn ${theme === 'dark' ? 'active' : ''}`} onClick={() => setTheme('dark')}>Dark</button>
        </div>
      </div>
    </div>
  );
}

function useShell(defaultTheme = 'light') {
  const [theme, setThemeState] = React.useState(() => localStorage.getItem('clawagen-theme') || defaultTheme);
  const [searchOpen, setSearchOpen] = React.useState(false);
  const [tweaksVisible, setTweaksVisible] = React.useState(false);

const setTheme = React.useCallback((t) => {
    setThemeState(t);
    localStorage.setItem('clawagen-theme', t);
    document.documentElement.setAttribute('data-theme', t);
  }, []);

React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setSearchOpen(s => !s);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

return { theme, setTheme, searchOpen, setSearchOpen, tweaksVisible };
}

Object.assign(window, {
  Icon, Topbar, Sidebar, TOC, CodeBlock, Callout, Feedback, PageFoot,
  SearchOverlay, TweaksPanel, useShell, NAV, SEARCH_INDEX,
});

Thanks for the feedback.

Was this page helpful?