# el-noir/0fill architecture

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

- Interactive diagram: https://gitdiagram.com/el-noir/0fill
- Repository: https://github.com/el-noir/0fill

## Overview

ZeroFill is a frontend for authoring and managing AI conversational forms, then sharing them as public chat experiences or embedded widgets. Respondents start a chat, exchange answers, see completion progress, and submit; workspace users manage forms, submissions, organizations, and integrations. The sampled chat hook explicitly calls the public-chat client, while the README and route tree establish the wider management, import, and sharing capabilities. Several dashboard and integration links are omitted because their implementation wiring was not sampled.

Main entry points: [`src/app/chat/[token]/ChatClient.tsx`](https://github.com/el-noir/0fill/blob/main/src/app/chat/%5Btoken%5D/ChatClient.tsx) (Chat interface), [`src/hooks/useChatSession.ts`](https://github.com/el-noir/0fill/blob/main/src/hooks/useChatSession.ts) (Chat session), [`src/lib/api/public-chat.ts`](https://github.com/el-noir/0fill/blob/main/src/lib/api/public-chat.ts) (Public chat API), [`src/lib/api/auth.ts`](https://github.com/el-noir/0fill/blob/main/src/lib/api/auth.ts) (Authentication API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_authoring["Form authoring"]
  node_form_author["Form creation<br/>[page.tsx]"]
  node_builder["Form builder<br/>[FormBuilder.tsx]"]
  node_create_modes["Creation modes<br/>[index.ts]"]
  node_form_import["Google Forms import<br/>[page.tsx]"]
  node_form_types["Form types<br/>[Form.ts]"]
end

subgraph group_workspace["Workspace management"]
  node_org_dashboard["Organization dashboard<br/>[page.tsx]"]
  node_forms_list["Forms management<br/>[page.tsx]"]
  node_submissions["Submissions<br/>[page.tsx]"]
  node_analytics["Form analytics<br/>[AnalyticsView.tsx]"]
  node_integration_ui["Integration management<br/>[page.tsx]"]
  node_organizations["Organization management<br/>[page.tsx]"]
end

subgraph group_respondent["Public respondent experience"]
  node_public_chat_page["Shared chat page<br/>[page.tsx]"]
  node_chat_client["Chat interface<br/>[ChatClient.tsx]"]
  node_chat_session["Chat session<br/>[useChatSession.ts]"]
  node_chat_components["Chat presentation<br/>[MessageList.tsx]"]
  node_embed_widget["Embed widget<br/>[widget.js]"]
  node_widget_v1["Widget v1<br/>[v1.js]"]
end

subgraph group_services["Client services"]
  node_api_public["Public chat API<br/>[public-chat.ts]"]
  node_api_forms["Forms API<br/>[forms.ts]"]
  node_api_integrations["Integrations API<br/>[integrations.ts]"]
  node_auth_store[("Authentication state<br/>[authStore.ts]")]
  node_api_auth["Authentication API<br/>[auth.ts]"]
end

node_backend{{"ZeroFill API"}}
node_creator(("Form creator"))
node_respondent_actor(("Respondent"))

node_creator -->|"creates forms"| node_form_author
node_form_author -->|"offers modes"| node_create_modes
node_creator -->|"configures form"| node_builder
node_creator -->|"imports form"| node_form_import
node_creator -->|"manages workspace"| node_org_dashboard
node_creator -->|"manages forms"| node_forms_list
node_creator -->|"reviews responses"| node_submissions
node_creator -->|"configures integrations"| node_integration_ui
node_creator -->|"manages organizations"| node_organizations
node_respondent_actor -->|"opens shared link"| node_public_chat_page
node_public_chat_page -->|"renders chat"| node_chat_client
node_chat_client -->|"uses session"| node_chat_session
node_chat_client -->|"renders messages"| node_chat_components
node_chat_session -->|"starts and sends"| node_api_public
node_chat_session -->|"tracks embed events"| node_api_public
node_api_public -->|"requests chat data"| node_backend
node_respondent_actor -.->|"uses embedded form"| node_embed_widget
node_embed_widget -.->|"loads version"| node_widget_v1
node_forms_list -.->|"form operations"| node_api_forms
node_api_forms -.->|"requests form data"| node_backend
node_integration_ui -.->|"integration operations"| node_api_integrations
node_api_integrations -.->|"requests integration data"| node_backend
node_api_auth -->|"updates auth state"| node_auth_store
node_api_auth -->|"auth requests"| node_backend
node_analytics -.->|"summarizes responses"| node_submissions

click node_form_author "https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/%5BorgId%5D/forms/create/page.tsx"
click node_builder "https://github.com/el-noir/0fill/blob/main/src/components/form-builder/FormBuilder.tsx"
click node_create_modes "https://github.com/el-noir/0fill/blob/main/src/components/create-form/index.ts"
click node_form_import "https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/%5BorgId%5D/forms/import/page.tsx"
click node_form_types "https://github.com/el-noir/0fill/blob/main/src/app/types/Form.ts"
click node_org_dashboard "https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/%5BorgId%5D/page.tsx"
click node_forms_list "https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/%5BorgId%5D/forms/page.tsx"
click node_submissions "https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/%5BorgId%5D/submissions/page.tsx"
click node_analytics "https://github.com/el-noir/0fill/blob/main/src/components/forms/AnalyticsView.tsx"
click node_integration_ui "https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/%5BorgId%5D/integrations/page.tsx"
click node_organizations "https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/organizations/page.tsx"
click node_public_chat_page "https://github.com/el-noir/0fill/blob/main/src/app/chat/%5Btoken%5D/page.tsx"
click node_chat_client "https://github.com/el-noir/0fill/blob/main/src/app/chat/%5Btoken%5D/ChatClient.tsx"
click node_chat_session "https://github.com/el-noir/0fill/blob/main/src/hooks/useChatSession.ts"
click node_chat_components "https://github.com/el-noir/0fill/blob/main/src/components/chat/MessageList.tsx"
click node_embed_widget "https://github.com/el-noir/0fill/blob/main/public/widget.js"
click node_widget_v1 "https://github.com/el-noir/0fill/blob/main/public/widget/v1.js"
click node_api_public "https://github.com/el-noir/0fill/blob/main/src/lib/api/public-chat.ts"
click node_api_forms "https://github.com/el-noir/0fill/blob/main/src/lib/api/forms.ts"
click node_api_integrations "https://github.com/el-noir/0fill/blob/main/src/lib/api/integrations.ts"
click node_auth_store "https://github.com/el-noir/0fill/blob/main/src/stores/authStore.ts"
click node_api_auth "https://github.com/el-noir/0fill/blob/main/src/lib/api/auth.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_form_author,node_builder,node_create_modes,node_form_import,node_form_types toneBlue
class node_org_dashboard,node_forms_list,node_submissions,node_analytics,node_integration_ui,node_organizations toneAmber
class node_public_chat_page,node_chat_client,node_chat_session,node_chat_components,node_embed_widget,node_widget_v1,node_backend toneMint
class node_api_public,node_api_forms,node_api_integrations,node_auth_store,node_api_auth toneRose
class node_creator,node_respondent_actor toneIndigo
```

## Components

### Form authoring

- [Form creation](https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/%5BorgId%5D/forms/create/page.tsx): `src/app/(app)/dashboard/[orgId]/forms/create/page.tsx`
- [Form builder](https://github.com/el-noir/0fill/blob/main/src/components/form-builder/FormBuilder.tsx): `src/components/form-builder/FormBuilder.tsx`
- [Creation modes](https://github.com/el-noir/0fill/blob/main/src/components/create-form/index.ts): `src/components/create-form/index.ts`
- [Google Forms import](https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/%5BorgId%5D/forms/import/page.tsx): `src/app/(app)/dashboard/[orgId]/forms/import/page.tsx`
- [Form types](https://github.com/el-noir/0fill/blob/main/src/app/types/Form.ts): `src/app/types/Form.ts`

### Workspace management

- [Organization dashboard](https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/%5BorgId%5D/page.tsx): `src/app/(app)/dashboard/[orgId]/page.tsx`
- [Forms management](https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/%5BorgId%5D/forms/page.tsx): `src/app/(app)/dashboard/[orgId]/forms/page.tsx`
- [Submissions](https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/%5BorgId%5D/submissions/page.tsx): `src/app/(app)/dashboard/[orgId]/submissions/page.tsx`
- [Form analytics](https://github.com/el-noir/0fill/blob/main/src/components/forms/AnalyticsView.tsx): `src/components/forms/AnalyticsView.tsx`
- [Integration management](https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/%5BorgId%5D/integrations/page.tsx): `src/app/(app)/dashboard/[orgId]/integrations/page.tsx`
- [Organization management](https://github.com/el-noir/0fill/blob/main/src/app/(app)/dashboard/organizations/page.tsx): `src/app/(app)/dashboard/organizations/page.tsx`

### Public respondent experience

- [Shared chat page](https://github.com/el-noir/0fill/blob/main/src/app/chat/%5Btoken%5D/page.tsx): `src/app/chat/[token]/page.tsx`
- [Chat interface](https://github.com/el-noir/0fill/blob/main/src/app/chat/%5Btoken%5D/ChatClient.tsx): `src/app/chat/[token]/ChatClient.tsx`
- [Chat session](https://github.com/el-noir/0fill/blob/main/src/hooks/useChatSession.ts): `src/hooks/useChatSession.ts`
- [Chat presentation](https://github.com/el-noir/0fill/blob/main/src/components/chat/MessageList.tsx): `src/components/chat/MessageList.tsx`
- [Embed widget](https://github.com/el-noir/0fill/blob/main/public/widget.js): `public/widget.js`
- [Widget v1](https://github.com/el-noir/0fill/blob/main/public/widget/v1.js): `public/widget/v1.js`

### Client services

- [Public chat API](https://github.com/el-noir/0fill/blob/main/src/lib/api/public-chat.ts): `src/lib/api/public-chat.ts`
- [Forms API](https://github.com/el-noir/0fill/blob/main/src/lib/api/forms.ts): `src/lib/api/forms.ts`
- [Integrations API](https://github.com/el-noir/0fill/blob/main/src/lib/api/integrations.ts): `src/lib/api/integrations.ts`
- [Authentication state](https://github.com/el-noir/0fill/blob/main/src/stores/authStore.ts): `src/stores/authStore.ts`
- [Authentication API](https://github.com/el-noir/0fill/blob/main/src/lib/api/auth.ts): `src/lib/api/auth.ts`

### Other components

- **ZeroFill API**
- **Form creator**
- **Respondent**

## Connections

- Form creator → Form creation: creates forms
- Form creation → Creation modes: offers modes
- Form creator → Form builder: configures form
- Form creator → Google Forms import: imports form
- Form creator → Organization dashboard: manages workspace
- Form creator → Forms management: manages forms
- Form creator → Submissions: reviews responses
- Form creator → Integration management: configures integrations
- Form creator → Organization management: manages organizations
- Respondent → Shared chat page: opens shared link
- Shared chat page → Chat interface: renders chat
- Chat interface → Chat session: uses session
- Chat interface → Chat presentation: renders messages
- Chat session → Public chat API: starts and sends
- Chat session → Public chat API: tracks embed events
- Public chat API → ZeroFill API: requests chat data
- Respondent → Embed widget: uses embedded form
- Embed widget → Widget v1: loads version
- Forms management → Forms API: form operations
- Forms API → ZeroFill API: requests form data
- Integration management → Integrations API: integration operations
- Integrations API → ZeroFill API: requests integration data
- Authentication API → Authentication state: updates auth state
- Authentication API → ZeroFill API: auth requests
- Form analytics → Submissions: summarizes responses