# joewagiman/obrool-chat architecture

> Architecture diagram of the GitHub repository joewagiman/obrool-chat, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/joewagiman/obrool-chat
- Repository: https://github.com/joewagiman/obrool-chat

## Overview

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: [`src/App.tsx`](https://github.com/joewagiman/obrool-chat/blob/main/src/App.tsx) (App), [`src/services/api.ts`](https://github.com/joewagiman/obrool-chat/blob/main/src/services/api.ts) (Obrool API client), [`src/hooks/useAgentProfile.ts`](https://github.com/joewagiman/obrool-chat/blob/main/src/hooks/useAgentProfile.ts) (Profile loading), [`src/components/OwnerSidebarPanel.tsx`](https://github.com/joewagiman/obrool-chat/blob/main/src/components/OwnerSidebarPanel.tsx) (Owner editor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Visitor experience"]
  node_app["App<br/>[App.tsx]"]
  node_profile_hook["Profile loading<br/>[useAgentProfile.ts]"]
  node_landing["Handle claim"]
  node_bio["Bio links"]
  node_seo["Profile SEO<br/>[seo.ts]"]
  node_status["Loading and error<br/>[StatusScreens.tsx]"]
end

subgraph group_conversation["AI conversation"]
  node_chat_hook["Conversation state"]
  node_chat_input["Chat input<br/>[ChatInput.tsx]"]
  node_message_list["Message list"]
  node_message_item["Message rendering<br/>[MessageItem.tsx]"]
  node_markdown["Markdown rendering<br/>[markdown.ts]"]
  node_lead_modal["Lead capture<br/>[LeadModal.tsx]"]
end

subgraph group_owner["Owner tools"]
  node_auth_hook["Owner authentication<br/>[useOwnerAuth.ts]"]
  node_login_modal["Owner login"]
  node_owner_panel["Owner editor"]
  node_edit_modal["Profile editor<br/>[OwnerEditModal.tsx]"]
end

subgraph group_shared["Shared client services"]
  node_api["Obrool API client<br/>[api.ts]"]
  node_platform["Platform detection"]
  node_sanitizer["URL sanitization<br/>[url-sanitize.ts]"]
end

node_visitor(("Visitor"))
node_owner_actor(("Profile owner"))
node_backend{{"Obrool backend"}}
node_browser_storage[("Browser local storage")]
node_document["Browser document"]

node_visitor -->|"opens profile"| node_app
node_owner_actor -->|"manages profile"| node_app
node_app -->|"loads profile"| node_profile_hook
node_profile_hook -->|"fetches profile"| node_api
node_api -->|"HTTP requests"| node_backend
node_profile_hook -->|"updates metadata"| node_seo
node_seo -->|"writes SEO"| node_document
node_app -->|"renders landing"| node_landing
node_app -->|"renders status"| node_status
node_app -->|"renders profile links"| node_bio
node_app -->|"uses conversation"| node_chat_hook
node_app -->|"renders input"| node_chat_input
node_app -->|"renders messages"| node_message_list
node_app -->|"renders lead prompt"| node_lead_modal
node_chat_input -->|"sends message"| node_chat_hook
node_chat_hook -->|"requests reply"| node_api
node_message_list -->|"renders items"| node_message_item
node_message_item -->|"renders markdown"| node_markdown
node_markdown -->|"validates links"| node_sanitizer
node_app -->|"uses owner auth"| node_auth_hook
node_auth_hook -->|"reads and writes token"| node_browser_storage
node_app -->|"renders login"| node_login_modal
node_login_modal -->|"authenticates"| node_api
node_app -->|"renders owner tools"| node_owner_panel
node_app -->|"renders profile editor"| node_edit_modal
node_owner_panel -->|"updates and decorates"| node_api
node_edit_modal -->|"updates profile and knowledge"| node_api
node_owner_panel -->|"detects link platform"| node_platform

click node_app "https://github.com/joewagiman/obrool-chat/blob/main/src/App.tsx"
click node_profile_hook "https://github.com/joewagiman/obrool-chat/blob/main/src/hooks/useAgentProfile.ts"
click node_landing "https://github.com/joewagiman/obrool-chat/blob/main/src/components/LandingHandleClaim.tsx"
click node_bio "https://github.com/joewagiman/obrool-chat/blob/main/src/components/BioLinksSection.tsx"
click node_seo "https://github.com/joewagiman/obrool-chat/blob/main/src/utils/seo.ts"
click node_status "https://github.com/joewagiman/obrool-chat/blob/main/src/components/StatusScreens.tsx"
click node_chat_hook "https://github.com/joewagiman/obrool-chat/blob/main/src/hooks/useChatConversation.ts"
click node_chat_input "https://github.com/joewagiman/obrool-chat/blob/main/src/components/ChatInput.tsx"
click node_message_list "https://github.com/joewagiman/obrool-chat/blob/main/src/components/ChatMessageList.tsx"
click node_message_item "https://github.com/joewagiman/obrool-chat/blob/main/src/components/MessageItem.tsx"
click node_markdown "https://github.com/joewagiman/obrool-chat/blob/main/src/lib/markdown.ts"
click node_lead_modal "https://github.com/joewagiman/obrool-chat/blob/main/src/components/LeadModal.tsx"
click node_auth_hook "https://github.com/joewagiman/obrool-chat/blob/main/src/hooks/useOwnerAuth.ts"
click node_login_modal "https://github.com/joewagiman/obrool-chat/blob/main/src/components/OwnerLoginModal.tsx"
click node_owner_panel "https://github.com/joewagiman/obrool-chat/blob/main/src/components/OwnerSidebarPanel.tsx"
click node_edit_modal "https://github.com/joewagiman/obrool-chat/blob/main/src/components/OwnerEditModal.tsx"
click node_api "https://github.com/joewagiman/obrool-chat/blob/main/src/services/api.ts"
click node_platform "https://github.com/joewagiman/obrool-chat/blob/main/src/utils/platformDetector.ts"
click node_sanitizer "https://github.com/joewagiman/obrool-chat/blob/main/src/lib/url-sanitize.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_profile_hook,node_landing,node_bio,node_seo,node_status,node_document toneBlue
class node_chat_hook,node_chat_input,node_message_list,node_message_item,node_markdown,node_lead_modal,node_browser_storage toneAmber
class node_auth_hook,node_login_modal,node_owner_panel,node_edit_modal toneMint
class node_api,node_platform,node_sanitizer toneRose
class node_visitor,node_owner_actor,node_backend toneIndigo
```

## Components

### Visitor experience

- [App](https://github.com/joewagiman/obrool-chat/blob/main/src/App.tsx): `src/App.tsx`
- [Profile loading](https://github.com/joewagiman/obrool-chat/blob/main/src/hooks/useAgentProfile.ts): `src/hooks/useAgentProfile.ts`
- [Handle claim](https://github.com/joewagiman/obrool-chat/blob/main/src/components/LandingHandleClaim.tsx): `src/components/LandingHandleClaim.tsx`
- [Bio links](https://github.com/joewagiman/obrool-chat/blob/main/src/components/BioLinksSection.tsx): `src/components/BioLinksSection.tsx`
- [Profile SEO](https://github.com/joewagiman/obrool-chat/blob/main/src/utils/seo.ts): `src/utils/seo.ts`
- [Loading and error](https://github.com/joewagiman/obrool-chat/blob/main/src/components/StatusScreens.tsx): `src/components/StatusScreens.tsx`

### AI conversation

- [Conversation state](https://github.com/joewagiman/obrool-chat/blob/main/src/hooks/useChatConversation.ts): `src/hooks/useChatConversation.ts`
- [Chat input](https://github.com/joewagiman/obrool-chat/blob/main/src/components/ChatInput.tsx): `src/components/ChatInput.tsx`
- [Message list](https://github.com/joewagiman/obrool-chat/blob/main/src/components/ChatMessageList.tsx): `src/components/ChatMessageList.tsx`
- [Message rendering](https://github.com/joewagiman/obrool-chat/blob/main/src/components/MessageItem.tsx): `src/components/MessageItem.tsx`
- [Markdown rendering](https://github.com/joewagiman/obrool-chat/blob/main/src/lib/markdown.ts): `src/lib/markdown.ts`
- [Lead capture](https://github.com/joewagiman/obrool-chat/blob/main/src/components/LeadModal.tsx): `src/components/LeadModal.tsx`

### Owner tools

- [Owner authentication](https://github.com/joewagiman/obrool-chat/blob/main/src/hooks/useOwnerAuth.ts): `src/hooks/useOwnerAuth.ts`
- [Owner login](https://github.com/joewagiman/obrool-chat/blob/main/src/components/OwnerLoginModal.tsx): `src/components/OwnerLoginModal.tsx`
- [Owner editor](https://github.com/joewagiman/obrool-chat/blob/main/src/components/OwnerSidebarPanel.tsx): `src/components/OwnerSidebarPanel.tsx`
- [Profile editor](https://github.com/joewagiman/obrool-chat/blob/main/src/components/OwnerEditModal.tsx): `src/components/OwnerEditModal.tsx`

### Shared client services

- [Obrool API client](https://github.com/joewagiman/obrool-chat/blob/main/src/services/api.ts): `src/services/api.ts`
- [Platform detection](https://github.com/joewagiman/obrool-chat/blob/main/src/utils/platformDetector.ts): `src/utils/platformDetector.ts`
- [URL sanitization](https://github.com/joewagiman/obrool-chat/blob/main/src/lib/url-sanitize.ts): `src/lib/url-sanitize.ts`

### Other components

- **Visitor**
- **Profile owner**
- **Obrool backend**
- **Browser local storage**
- **Browser document**

## Connections

- 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