Skip to content

Latest commit

 

History

History
133 lines (87 loc) · 4.26 KB

readme.md

File metadata and controls

133 lines (87 loc) · 4.26 KB
Raw

GitChat 🌿🌿🌿

  • Ever got frustrated when revising a chat history with LLM, the whole follow-ups got disappeared?

  • Ever tried to merge different threads with LLM into to one, so you copy-pasted all chats into a new chat to have better context?

  • Ever wondered "what if I can have multiple response with different input, and compare them", but bothered that the current chat interface is too linear?

Try out Gitchat! It loosly applies the git concept - you can merge, branch and modify the chat history. By treating messages as interconnected nodes in a flowchart-like structure.

It offers unprecedented flexibility in Large Language Model (LLM) interactions, allowing users to create branches, merge conversations, and rewire chat histories.

gitChat2.mp4

Features

  1. Non-linear Conversation Presentation

    • Visualize conversations as nodes and edges in a flowchart structure
    • Easily manage and manipulate conversation context

  2. Context Replication

    • Create new conversation branches by replicating existing nodes
    • Avoid the need to copy/paste entire conversations as in traditional LLM interfaces

  3. Flexible Context Management

    • Route or unroute different conversation branches when creating new chats
    • Easily control the context provided to the LLM for each interaction

  4. Editable Conversation History

    • Delete or modify LLM responses and user inputs
    • Regenerate responses based on edited content

  5. Cascade-style Response Regeneration

    • Automatically regenerate all child LLM responses when modifying an earlier user input
    • Maintain conversation coherence without resetting the entire thread

  6. Interactive Node Management

    • Add new user input or LLM response nodes
    • Connect nodes to create new conversation flows

  7. Context Menu Operations

    • Replicate nodes to create parallel conversation branches
    • Create connected nodes to extend conversations

  8. Responsive Layout

    • Zoom and pan functionality for easy navigation
    • Minimap for an overview of the conversation structure

Getting Started

Prerequisites

  • Node.js (version 14 or later)
  • npm (usually comes with Node.js)

Installation

  1. Clone the repository:

    git clone https://github.com/DrustZ/GitChat

  2. Navigate to the project directory:

    cd GitChat

  3. For the webapp, install dependencies:

    cd nodechat
npm install

  4. Start the webapp:

    npm start

  5. Do it again for the server (remember to create a .env for your openai key OPENAI_API_KEY = ):

    cd server
npm install
npm start

  6. Open your browser and visit http://localhost:3000 to see the application.

Usage

  1. Adding Nodes:

    • Click the "Add User Input" or "Add LLM Response" buttons to create new nodes.
    • Type your message in the input field at the bottom and click "Send" to add a new user input followed by an LLM response.

  2. Editing Nodes:

    • Double-click on a node to edit its content.

  3. Creating Connections:

    • Drag from the bottom handle of one node to the top handle of another to create a connection.

  4. Replicating Nodes:

    • Right-click on a node and select "Replicate Node" from the context menu.

  5. Creating Connected Nodes:

    • Right-click on a node and select "Create Connected Node" to add a new node connected to the selected one.

  6. Deleting Connections:

    • Click on a connection to delete it.

  7. Regenerating Responses:

    • Edit a user input node and all subsequent LLM response nodes will automatically regenerate.

  8. Navigation:

    • Use the mouse wheel to zoom in and out.
    • Click and drag on the background to pan the view.
    • Use the minimap in the top-right corner for quick navigation.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Acknowledgments

  • Non-linear chat idea inspired by the Sensecape project. Check out their video!

  • Also, got inspiration from discussion with Xingyu Bruce Liu

  • This project uses React Flow for the flowchart functionality.