Core Functionality
The extension consists of two main components: the Chrome background script and the React frontend.
- Node-Based ChatGPT Conversation Management:
- The core feature of the tool is its ability to represent ChatGPT conversations as nodes in a flow diagram. Each node represents a conversation, while the edges between nodes represent relationships or continuations from parent to child nodes.
- Users can visually organize these conversations, making it easier to track, associate and navigate conversations.
- Node Spaces:
- The concept of node spaces acts as different workspaces or projects. Each node space contains its own set of nodes, all generally falling under a common theme or topic. Users can switch between node spaces, rename them, or delete them from a side panel within the UI.
- Branching Conversations:
- One of the most powerful features of the tool is the ability to create branches from a conversation. Users can select text from a chat and branch off a new conversation, visually representing the relationship between the main conversation and its sub-discussions.
- Context Menus and Node Management:
- Right-click context menus provide quick access to actions like renaming, deleting, or opening nodes and their associated chats. This ensures users can easily manage their nodes and spaces directly from the visual interface without needing to switch to another panel or view.
- Persistent Data Storage:
- The tool uses Chrome’s Storage API to persistently save node spaces, node titles, messages, and branches. This ensures that all conversation data is retained even after browser restarts or closing the extension, allowing users to pick up where they left off.
- Automatic Layout and Visualization:
- The tool integrates ELK.js to automatically layout nodes in a hierarchical structure. This ensures that nodes are spaced evenly, the diagram fully gits into view, and parent-child relationships are visually clear and organized, improving the overall user experience.
Technologies Used
Chrome Extension (Backend)
- Chrome Storage API: Used to store conversation data, node spaces, and related information persistently.
- Chrome Messaging API: Enables communication between the background script, content scripts, and the React frontend. The messaging API allows for the dynamic transfer of data, including node creation, deletion, and updates.
- Background Script: Handles the core logic for creating new nodes, managing conversations, and responding to context menu events. It also coordinates state management across multiple tabs.
- Content Script: Embedded into the ChatGPT webpage, the content script monitors for changes, such as new messages or conversations, and interacts with the background script to ensure conversation data is updated in real time.
React Frontend (UI)
- React: The primary framework used to build the user interface. It allows for component-based development, ensuring reusability and scalability.
- React Flow: A specialized library for visualizing nodes and edges, which is central to displaying the conversation flow and relationships between nodes.
- Bootstrap & Tailwind CSS: Used for styling the components and ensuring a clean, responsive UI. Bootstrap provides pre-built elements like buttons and panels, while Tailwind ensures utility-first, custom styling.
- Custom Hooks: Utilized to manage state, handle events, and communicate with Chrome storage and the background script efficiently.
- ELK.js: Provides automatic node layout functionality, ensuring that nodes are arranged hierarchically and without overlap.