BetterChatGPT

Manages chat conversations, messages, and model configurations using Zustand store with unidirectional data flow. When users send messages, the system atomically adds messages to store, creates placeholder assistant responses, streams API responses incrementally, and updates token/cost calculations in real-time without server persistence. Uses React hooks (useAddChat, useInitialiseNewChat) to trigger state mutations and component re-renders on every token received from the OpenAI/Azure API.

Abstracts API communication through a service layer that supports both OpenAI and Azure OpenAI endpoints, with configurable base URLs, API keys, and optional HTTP proxy for regional restrictions. Implements streaming response handling that incrementally parses server-sent events (SSE) and pushes tokens to the Zustand store. Supports custom model parameters (temperature, top_p, max_tokens) per conversation and handles authentication via bearer tokens or Azure-specific headers.

Maintains a library of pre-written prompt templates that users can search, preview, and insert into the message input field. Prompts are stored as text templates with optional placeholders for dynamic values. Search functionality filters prompts by name and content using client-side string matching. Insertion appends the prompt to the current message input or replaces it entirely based on user preference. Supports user-created custom prompts saved to localStorage.

Builds the entire UI using React components with clear separation of concerns: ChatContent (message display), ChatInput (message composition), SettingsMenu (configuration), and Navigation (folder/chat selection). Components are organized hierarchically with props-based communication and Zustand store subscriptions for state updates. Uses React hooks (useState, useEffect, useContext) for local component state and side effects. CSS styling uses Tailwind or similar utility-first framework for rapid UI development.

Provides Docker Compose configuration for containerized deployment, allowing users to run BetterChatGPT in isolated environments without local Node.js setup. Includes GitHub Actions workflows for automated builds and publishing of desktop applications (likely Electron-based) for macOS, Windows, and Linux. Desktop apps bundle the web UI with a native window frame and system integration (file dialogs, notifications). Deployment is automated via CI/CD pipelines that trigger on releases.

Integrates with Google Drive API to automatically backup conversations and sync state across devices. Implements OAuth authentication for secure credential handling and periodic sync of chat data to Google Drive. Supports selective sync (backup only, sync only, or bidirectional) and conflict resolution for conversations modified on multiple devices.

Calculates token usage and USD costs for each message using a token counting algorithm (likely based on tiktoken or similar) that runs client-side. Tracks cumulative tokens and costs per conversation and displays them in real-time as responses stream in. Supports multiple model pricing tiers (gpt-4, gpt-3.5-turbo, etc.) with configurable pricing per 1K tokens. Updates cost metrics atomically in the Zustand store whenever a message is added or edited.

Implements a FolderInterface data model that allows users to organize conversations into nested folders with custom color tags. The navigation component renders a tree-like structure with collapsible folders and displays filtered chat lists based on selected folder. Supports drag-and-drop or programmatic assignment of chats to folders, with folder metadata (name, color) persisted in localStorage alongside chat data. Filtering logic runs client-side by matching chat folder IDs against selected folder context.

Provides serialization and deserialization of conversations to/from multiple formats: JSON (full fidelity with all metadata), Markdown (human-readable text), and PNG/image (visual snapshot). Export logic traverses the chat message tree, formats content according to selected format, and triggers browser download. Import logic parses uploaded files, validates schema, and reconstructs ChatInterface and MessageInterface objects in the Zustand store. Supports Google Drive sync for cloud backup of exported conversations.

Allows users to edit, delete, reorder, or insert messages at any position in a conversation with support for different roles (user, assistant, system). Editing a message triggers a re-render of all downstream messages and optionally re-streams the response from the edited point. Reordering uses array splice operations in the Zustand store. Role-based composition lets users manually craft system prompts or assistant responses for testing. All changes are persisted to localStorage and reflected immediately in the UI.

Implements a localization system using a locale configuration structure that maps UI strings, API model names, and pricing data to multiple languages. Supports dynamic locale switching without page reload by updating React context and re-rendering all components. Locale data is organized by feature (chat, settings, models) and includes both UI text and metadata translations. Persists user's language preference to localStorage for session continuity.

Allows users to configure OpenAI model parameters (temperature, top_p, max_tokens, frequency_penalty, presence_penalty) on a per-conversation basis through a ConfigInterface object. Stores configuration in the Zustand store and sends it with each API request. Supports preset templates (e.g., 'creative', 'precise', 'balanced') that populate common parameter combinations. Configuration UI provides sliders and input fields for each parameter with real-time validation and preview of parameter effects.

Automatically generates conversation titles based on the first user message using heuristics or a lightweight summarization approach (likely extracting key phrases or using the first N characters). Allows users to manually override auto-generated titles with custom names. Title is stored in the ChatInterface object and displayed in the navigation sidebar. Updates title in real-time as users edit the first message.

Integrates with ShareGPT API to publish conversations publicly with a shareable link. Serializes the conversation to ShareGPT's format, sends it to their API, and receives a public URL. Users can share this URL with others who can view the conversation without needing a BetterChatGPT account. Integration is optional and requires no additional configuration beyond a button click.