How joewagiman/obrool-chat works
This is the Obrool Chat React client: visitors open a handle-based business profile, browse its bio links, chat with its AI assistant, and may be prompted to submit lead details. Owners authenticate and manage profile content and AI knowledge; the editor also offers AI page decoration. The graph follows the sampled app, hooks, and API calls. Several component implementations and API sections were not sampled, so uncertain wiring—especially handle-claim and lead-submission calls—is omitted.
Main entry points: App.tsx App · api.ts Obrool API client · useAgentProfile.ts Profile loading · OwnerSidebarPanel.tsx Owner editor
Components 24
Visitor experience
- App
src/App.tsx - Profile loading
src/hooks/useAgentProfile.ts - Handle claim
src/components/LandingHandleClaim.tsx - Bio links
src/components/BioLinksSection.tsx - Profile SEO
src/utils/seo.ts - Loading and error
src/components/StatusScreens.tsx
AI conversation
- Conversation state
src/hooks/useChatConversation.ts - Chat input
src/components/ChatInput.tsx - Message list
src/components/ChatMessageList.tsx - Message rendering
src/components/MessageItem.tsx - Markdown rendering
src/lib/markdown.ts - Lead capture
src/components/LeadModal.tsx
Owner tools
- Owner authentication
src/hooks/useOwnerAuth.ts - Owner login
src/components/OwnerLoginModal.tsx - Owner editor
src/components/OwnerSidebarPanel.tsx - Profile editor
src/components/OwnerEditModal.tsx
Shared client services
- Obrool API client
src/services/api.ts - Platform detection
src/utils/platformDetector.ts - URL sanitization
src/lib/url-sanitize.ts
Other components
- Visitor
- Profile owner
- Obrool backend
- Browser local storage
- Browser document
Connections 28
- Visitor → App: opens profile
- Profile owner → App: manages profile
- App → Profile loading: loads profile
- Profile loading → Obrool API client: fetches profile
- Obrool API client → Obrool backend: HTTP requests
- Profile loading → Profile SEO: updates metadata
- Profile SEO → Browser document: writes SEO
- App → Handle claim: renders landing
- App → Loading and error: renders status
- App → Bio links: renders profile links
- App → Conversation state: uses conversation
- App → Chat input: renders input
- App → Message list: renders messages
- App → Lead capture: renders lead prompt
- Chat input → Conversation state: sends message
- Conversation state → Obrool API client: requests reply
- Message list → Message rendering: renders items
- Message rendering → Markdown rendering: renders markdown
- Markdown rendering → URL sanitization: validates links
- App → Owner authentication: uses owner auth
- Owner authentication → Browser local storage: reads and writes token
- App → Owner login: renders login
- Owner login → Obrool API client: authenticates
- App → Owner editor: renders owner tools
- App → Profile editor: renders profile editor
- Owner editor → Obrool API client: updates and decorates
- Profile editor → Obrool API client: updates profile and knowledge
- Owner editor → Platform detection: detects link platform