├── .github
├── ISSUE_TEMPLATE
│ ├── bug_report.md
│ └── feature_request.md
├── PULL_REQUEST_TEMPLATE.md
└── workflows
│ └── build.yml
├── .gitignore
├── .prettierrc
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
├── dave.jpg
├── favicon.ico
├── hunty.png
├── meta-full.png
├── meta.jpg
├── paradigm-full.svg
├── paradigm.svg
└── t11s.jpg
├── src
├── components
│ ├── App.tsx
│ ├── Prompt.tsx
│ ├── modals
│ │ ├── APIKeyModal.tsx
│ │ └── SettingsModal.tsx
│ ├── nodes
│ │ └── LabelUpdaterNode.tsx
│ └── utils
│ │ ├── APIKeyInput.tsx
│ │ ├── BigButton.tsx
│ │ ├── ElevenLabsKeyInput.tsx
│ │ ├── LabeledInputs.tsx
│ │ ├── Markdown.tsx
│ │ ├── NavigationBar.tsx
│ │ ├── TTSButton.tsx
│ │ └── Whisper.tsx
├── index.css
├── main.tsx
├── types
│ └── highlightjs-solidity.d.ts
├── utils
│ ├── apikey.ts
│ ├── chakra.tsx
│ ├── clipboard.ts
│ ├── color.ts
│ ├── constants.ts
│ ├── debounce.ts
│ ├── fluxEdge.ts
│ ├── fluxNode.ts
│ ├── lstore.ts
│ ├── mod.ts
│ ├── models.ts
│ ├── nodeId.ts
│ ├── platform.ts
│ ├── prompt.ts
│ ├── qparams.ts
│ ├── rand.ts
│ ├── resize.ts
│ └── types.ts
└── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: "fix: "
5 | labels: bug
6 | assignees: ""
7 | ---
8 |
9 | **Platform**
10 | The OS and browser you're using.
11 |
12 | **Description**
13 | Enter your issue details here.
14 | One way to structure the description:
15 |
16 | [short summary of the bug]
17 |
18 | I tried doing this:
19 |
20 | [screenshot or video that causes the bug]
21 |
22 | I expected to see this happen: [explanation]
23 |
24 | Instead, this happened: [explanation]
25 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 | title: "feat: "
5 | labels: feature-request
6 | assignees: ""
7 | ---
8 |
9 | **Is your feature request related to a problem? Please describe.**
10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
11 |
12 | **Describe the solution you'd like**
13 | A clear and concise description of what you want to happen.
14 |
15 | **Describe alternatives you've considered**
16 | A clear and concise description of any alternative solutions or features you've considered.
17 |
18 | **Additional context**
19 | Add any other context or screenshots about the feature request here.
20 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
5 |
6 | ## Motivation
7 |
8 |
13 |
14 | ## Solution
15 |
16 |
20 |
21 | ## Checklist
22 |
23 |
26 |
27 | - [ ] Tested in Chrome
28 | - [ ] Tested in Safari
29 |
--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
1 | name: Build
2 |
3 | on: [push, pull_request]
4 |
5 | jobs:
6 | build:
7 | name: Build
8 | runs-on: ubuntu-latest
9 |
10 | steps:
11 | - name: Checkout repo
12 | uses: actions/checkout@v2
13 |
14 | - name: Setup Node
15 | uses: actions/setup-node@v1
16 | with:
17 | node-version: 16
18 |
19 | - name: Install dependencies
20 | uses: bahmutov/npm-install@v1
21 |
22 | - name: Build project
23 | run: npm run build
24 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | .env
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 90
3 | }
4 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Contributing to Flux
2 |
3 | Thanks for your interest in improving Flux!
4 |
5 | There are multiple opportunities to contribute at any level. It doesn't matter if you are just getting started with Rust or are the most weathered expert, we can use your help.
6 |
7 | **No contribution is too small and all contributions are valued.**
8 |
9 | This document will help you get started. **Do not let the document intimidate you**.
10 | It should be considered as a guide to help you navigate the process.
11 |
12 | ### Code of Conduct
13 |
14 | Flux adheres to the [Rust Code of Conduct](https://www.rust-lang.org/policies/code-of-conduct) (even though it's not a Rust project). This code of conduct describes the _minimum_ behavior expected from all contributors.
15 |
16 | Instances of violations of the Code of Conduct can be reported by contacting the team at [t11s@paradigm.xyz](mailto:t11s@paradigm.xyz).
17 |
18 | ### Ways to contribute
19 |
20 | There are fundamentally four ways an individual can contribute:
21 |
22 | 1. **By opening an issue:** For example, if you believe that you have uncovered a bug
23 | in Flux, creating a new issue in the issue tracker is the way to report it.
24 | 2. **By adding context:** Providing additional context to existing issues,
25 | such as screenshots, code snippets and helps resolve issues.
26 | 3. **By resolving issues:** Typically this is done in the form of either
27 | demonstrating that the issue reported is not a problem after all, or more often,
28 | by opening a pull request that fixes the underlying problem, in a concrete and
29 | reviewable manner.
30 |
31 | **Anybody can participate in any stage of contribution**. We urge you to participate in the discussion
32 | around bugs and participate in reviewing PRs.
33 |
34 | ### Submitting a bug report
35 |
36 | When filing a new bug report in the issue tracker, you will be presented with a basic form to fill out.
37 |
38 | If you believe that you have uncovered a bug, please fill out the form to the best of your ability. Do not worry if you cannot answer every detail,
39 | just fill in what you can. Contributors will ask follow-up questions if something is unclear.
40 |
41 | The most important pieces of information we need in a bug report are:
42 |
43 | - The OS you are on (Windows, macOS, or Linux)
44 | - The Browser you have (Chrome, Safari, etc)
45 | - Concrete steps to reproduce the bug
46 | - What you expect to happen instead
47 |
48 | ### Submitting a feature request
49 |
50 | When adding a feature request in the issue tracker, you will be presented with a basic form to fill out.
51 |
52 | Please include as detailed of an explanation as possible of the feature you would like, adding additional context if necessary.
53 |
54 | If you have examples of other tools that have the feature you are requesting, please include them as well.
55 |
56 | ### Resolving an issue
57 |
58 | Pull requests are the way concrete changes are made to the code and dependencies of Flux.
59 |
60 | Even tiny pull requests, like fixing wording, are greatly appreciated. Before making a large change, it is usually
61 | a good idea to first open an issue describing the change to solicit feedback and guidance. This will increase
62 | the likelihood of the PR getting merged.
63 |
64 | #### Commits
65 |
66 | It is a recommended best practice to keep your changes as logically grouped as possible within individual commits. There is no limit to the number of commits any single pull request may have, and many contributors find it easier to review changes that are split across multiple commits.
67 |
68 | That said, if you have a number of commits that are "checkpoints" and don't represent a single logical change, please squash those together.
69 |
70 | #### Opening the pull request
71 |
72 | From within GitHub, opening a new pull request will present you with a template that should be filled out. Please try your best at filling out the details, but feel free to skip parts if you're not sure what to put.
73 |
74 | #### Discuss and update
75 |
76 | You will probably get feedback or requests for changes to your pull request.
77 | This is a big part of the submission process, so don't be discouraged! Some contributors may sign off on the pull request right away, others may have more detailed comments or feedback.
78 | This is a necessary part of the process in order to evaluate whether the changes are correct and necessary.
79 |
80 | **Any community member can review a PR, so you might get conflicting feedback**.
81 | Keep an eye out for comments from code owners to provide guidance on conflicting feedback.
82 |
83 | #### Reviewing pull requests
84 |
85 | **Any Flux community member is welcome to review any pull request**.
86 |
87 | All contributors who choose to review and provide feedback on pull requests have a responsibility to both the project and individual making the contribution. Reviews and feedback must be helpful, insightful, and geared towards improving the contribution as opposed to simply blocking it. If there are reasons why you feel the PR should not be merged, explain what those are. Do not expect to be able to block a PR from advancing simply because you say "no" without giving an explanation. Be open to having your mind changed. Be open to working _with_ the contributor to make the pull request better.
88 |
89 | Reviews that are dismissive or disrespectful of the contributor or any other reviewers are strictly counter to the Code of Conduct.
90 |
91 | When reviewing a pull request, the primary goals are for the codebase to improve and for the person submitting the request to succeed. **Even if a pull request is not merged, the submitter should come away from the experience feeling like their effort was not unappreciated**. Every PR from a new contributor is an opportunity to grow the community.
92 |
93 | ##### Review a bit at a time
94 |
95 | Do not overwhelm new contributors.
96 |
97 | It is tempting to micro-optimize and make everything about relative performance, perfect grammar, or exact style matches. Do not succumb to that temptation..
98 |
99 | Focus first on the most significant aspects of the change:
100 |
101 | 1. Does this change make sense for Flux?
102 | 2. Does this change make Flux better, even if only incrementally?
103 | 3. Are there clear bugs or larger scale issues that need attending?
104 | 4. Are the commit messages readable and correct? If it contains a breaking change, is it clear enough?
105 |
106 | Note that only **incremental** improvement is needed to land a PR. This means that the PR does not need to be perfect, only better than the status quo. Follow-up PRs may be opened to continue iterating.
107 |
108 | When changes are necessary, _request_ them, do not _demand_ them, and **do not assume that the submitter already knows how to add a test or run a benchmark**.
109 |
110 | Specific performance optimization techniques, coding styles and conventions change over time. The first impression you give to a new contributor never does.
111 |
112 | Nits (requests for small changes that are not essential) are fine, but try to avoid stalling the pull request. Most nits can typically be fixed by the Flux maintainers merging the pull request, but they can also be an opportunity for the contributor to learn a bit more about the project.
113 |
114 | It is always good to clearly indicate nits when you comment, e.g.: `nit: change foo() to bar(). But this is not blocking`.
115 |
116 | If your comments were addressed but were not folded after new commits, or if they proved to be mistaken, please, hide them with the appropriate reason to keep the conversation flow concise and relevant.
117 |
118 | ##### Be aware of the person behind the code
119 |
120 | Be aware that _how_ you communicate requests and reviews in your feedback can have a significant impact on the success of the pull request. Yes, we may merge a particular change that makes Flux better, but the individual might just not want to have anything to do with Flux ever again. The goal is not just having good code.
121 |
122 | ##### Abandoned or stale pull requests
123 |
124 | If a pull request appears to be abandoned or stalled, it is polite to first check with the contributor to see if they intend to continue the work before checking if they would mind if you took it over (especially if it just has nits left). When doing so, it is courteous to give the original contributor credit for the work they started, either by preserving their name and e-mail address in the commit log, or by using the `Author: ` or `Co-authored-by: ` metadata tag in the commits.
125 |
126 | _Adapted from the [ethers-rs contributing guide](https://github.com/gakonst/ethers-rs/blob/master/CONTRIBUTING.md)_.
127 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 t11s
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
Flux
3 |
4 | Graph-based LLM power tool for exploring many completions in parallel.
5 |
6 |
7 | Announcement
8 | ·
9 | Try Online
10 | ·
11 | Report a Bug
12 |
13 |
14 |
15 |
16 |
17 | 
18 |
19 | ## About
20 |
21 | Flux is a power tool for interacting with large language models (LLMs) that **generates multiple completions per prompt in a tree structure and lets you explore the best ones in parallel.**
22 |
23 | Flux's tree structure allows you to:
24 |
25 | - Get a wider variety of creative responses
26 |
27 | - Test out different prompts with the same shared context
28 |
29 | - Use inconsistencies to identify where the model is uncertain
30 |
31 | It also provides a robust set of keyboard shortcuts, allows setting the system message and editing GPT messages, autosaves to local storage, uses the OpenAI API directly, and is 100% open source and MIT licensed.
32 |
33 | ## Usage
34 |
35 | Visit [flux.paradigm.xyz](https://flux.paradigm.xyz) to try Flux online or follow the instructions below to run it locally.
36 |
37 | ## Running Locally
38 |
39 | ```sh
40 | git clone https://github.com/paradigmxyz/flux.git
41 | npm install
42 | npm run dev
43 | ```
44 |
45 | ## Contributing
46 |
47 | See the [open issues](https://github.com/paradigmxyz/flux/issues) for a list of proposed features (and known issues).
48 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Flux
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "flux",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@chakra-ui/icons": "^2.0.17",
13 | "@chakra-ui/react": "^2.5.1",
14 | "@emotion/react": "^11.10.6",
15 | "@emotion/styled": "^11.10.6",
16 | "framer-motion": "^9.0.4",
17 | "highlightjs-solidity": "^2.0.6",
18 | "mixpanel-browser": "^2.46.0",
19 | "openai-streams": "^4.2.0",
20 | "re-resizable": "^6.9.9",
21 | "react": "^18.2.0",
22 | "react-beforeunload": "^2.5.3",
23 | "react-dom": "^18.2.0",
24 | "react-hotkeys-hook": "^4.3.7",
25 | "react-icons": "^4.8.0",
26 | "react-markdown": "^8.0.6",
27 | "react-textarea-autosize": "^8.4.0",
28 | "reactflow": "^11.7.0",
29 | "rehype-highlight": "^6.0.0",
30 | "yield-stream": "^2.3.0"
31 | },
32 | "devDependencies": {
33 | "@types/mixpanel-browser": "^2.38.1",
34 | "@types/node": "^18.14.2",
35 | "@types/react": "^18.0.27",
36 | "@types/react-beforeunload": "^2.1.1",
37 | "@types/react-dom": "^18.0.10",
38 | "@vitejs/plugin-react-swc": "^3.0.0",
39 | "typescript": "^4.9.3",
40 | "vite": "^4.1.0"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/public/dave.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghgoodreau/flux-experimental/7cbdbf08c0612ec035e08eb075f43c32814baa3c/public/dave.jpg
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghgoodreau/flux-experimental/7cbdbf08c0612ec035e08eb075f43c32814baa3c/public/favicon.ico
--------------------------------------------------------------------------------
/public/hunty.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghgoodreau/flux-experimental/7cbdbf08c0612ec035e08eb075f43c32814baa3c/public/hunty.png
--------------------------------------------------------------------------------
/public/meta-full.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghgoodreau/flux-experimental/7cbdbf08c0612ec035e08eb075f43c32814baa3c/public/meta-full.png
--------------------------------------------------------------------------------
/public/meta.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghgoodreau/flux-experimental/7cbdbf08c0612ec035e08eb075f43c32814baa3c/public/meta.jpg
--------------------------------------------------------------------------------
/public/paradigm-full.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/paradigm.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
86 |
--------------------------------------------------------------------------------
/public/t11s.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghgoodreau/flux-experimental/7cbdbf08c0612ec035e08eb075f43c32814baa3c/public/t11s.jpg
--------------------------------------------------------------------------------
/src/components/App.tsx:
--------------------------------------------------------------------------------
1 | import { MIXPANEL_TOKEN } from "../main";
2 | import { isValidAPIKey } from "../utils/apikey";
3 | import { Column, Row } from "../utils/chakra";
4 | import { copySnippetToClipboard } from "../utils/clipboard";
5 | import { getFluxNodeTypeColor, getFluxNodeTypeDarkColor } from "../utils/color";
6 | import { getPlatformModifierKey, getPlatformModifierKeyText } from "../utils/platform";
7 | import {
8 | API_KEY_LOCAL_STORAGE_KEY,
9 | DEFAULT_SETTINGS,
10 | FIT_VIEW_SETTINGS,
11 | HOTKEY_CONFIG,
12 | MAX_HISTORY_SIZE,
13 | MODEL_SETTINGS_LOCAL_STORAGE_KEY,
14 | NEW_TREE_CONTENT_QUERY_PARAM,
15 | OVERLAP_RANDOMNESS_MAX,
16 | REACT_FLOW_NODE_TYPES,
17 | REACT_FLOW_LOCAL_STORAGE_KEY,
18 | TOAST_CONFIG,
19 | UNDEFINED_RESPONSE_STRING,
20 | STREAM_CANCELED_ERROR_MESSAGE,
21 | SAVED_CHAT_SIZE_LOCAL_STORAGE_KEY,
22 | ELEVEN_KEY_LOCAL_STORAGE_KEY,
23 | VOICE_ID_LOCAL_STORAGE_KEY,
24 | } from "../utils/constants";
25 | import { useDebouncedEffect } from "../utils/debounce";
26 | import { newFluxEdge, modifyFluxEdge, addFluxEdge } from "../utils/fluxEdge";
27 | import {
28 | getFluxNode,
29 | getFluxNodeGPTChildren,
30 | displayNameFromFluxNodeType,
31 | newFluxNode,
32 | appendTextToFluxNodeAsGPT,
33 | getFluxNodeLineage,
34 | addFluxNode,
35 | modifyFluxNodeText,
36 | modifyReactFlowNodeProperties,
37 | getFluxNodeChildren,
38 | getFluxNodeParent,
39 | getFluxNodeSiblings,
40 | markOnlyNodeAsSelected,
41 | deleteFluxNode,
42 | deleteSelectedFluxNodes,
43 | addUserNodeLinkedToASystemNode,
44 | getConnectionAllowed,
45 | setFluxNodeStreamId,
46 | } from "../utils/fluxNode";
47 | import { useLocalStorage } from "../utils/lstore";
48 | import { mod } from "../utils/mod";
49 | import { getAvailableChatModels } from "../utils/models";
50 | import { generateNodeId, generateStreamId } from "../utils/nodeId";
51 | import { messagesFromLineage, promptFromLineage } from "../utils/prompt";
52 | import { getQueryParam, resetURL } from "../utils/qparams";
53 | import { useDebouncedWindowResize } from "../utils/resize";
54 | import {
55 | FluxNodeData,
56 | FluxNodeType,
57 | HistoryItem,
58 | Settings,
59 | CreateChatCompletionStreamResponseChoicesInner,
60 | ReactFlowNodeTypes,
61 | } from "../utils/types";
62 | import { Prompt } from "./Prompt";
63 | import { APIKeyModal } from "./modals/APIKeyModal";
64 | import { SettingsModal } from "./modals/SettingsModal";
65 | import { BigButton } from "./utils/BigButton";
66 | import { NavigationBar } from "./utils/NavigationBar";
67 | import { CheckCircleIcon } from "@chakra-ui/icons";
68 | import { Box, useDisclosure, Spinner, useToast } from "@chakra-ui/react";
69 | import mixpanel from "mixpanel-browser";
70 | import { CreateCompletionResponseChoicesInner, OpenAI } from "openai-streams";
71 | import { Resizable } from "re-resizable";
72 | import { useEffect, useState, useCallback, useRef } from "react";
73 | import { useBeforeunload } from "react-beforeunload";
74 | import { useHotkeys } from "react-hotkeys-hook";
75 | import ReactFlow, {
76 | addEdge,
77 | Background,
78 | Connection,
79 | Node,
80 | Edge,
81 | useEdgesState,
82 | useNodesState,
83 | SelectionMode,
84 | ReactFlowInstance,
85 | ReactFlowJsonObject,
86 | useReactFlow,
87 | updateEdge,
88 | } from "reactflow";
89 | import "reactflow/dist/style.css";
90 | import { yieldStream } from "yield-stream";
91 |
92 | function App() {
93 | const toast = useToast();
94 |
95 | /*//////////////////////////////////////////////////////////////
96 | UNDO REDO LOGIC
97 | //////////////////////////////////////////////////////////////*/
98 |
99 | const [past, setPast] = useState([]);
100 | const [future, setFuture] = useState([]);
101 |
102 | const takeSnapshot = () => {
103 | // Push the current graph to the past state.
104 | setPast((past) => [
105 | ...past.slice(past.length - MAX_HISTORY_SIZE + 1, past.length),
106 | { nodes, edges, selectedNodeId, lastSelectedNodeId },
107 | ]);
108 |
109 | // Whenever we take a new snapshot, the redo operations
110 | // need to be cleared to avoid state mismatches.
111 | setFuture([]);
112 | };
113 |
114 | const undo = () => {
115 | // get the last state that we want to go back to
116 | const pastState = past[past.length - 1];
117 |
118 | if (pastState) {
119 | // First we remove the state from the history.
120 | setPast((past) => past.slice(0, past.length - 1));
121 | // We store the current graph for the redo operation.
122 | setFuture((future) => [
123 | ...future,
124 | { nodes, edges, selectedNodeId, lastSelectedNodeId },
125 | ]);
126 |
127 | // Now we can set the graph to the past state.
128 | setNodes(pastState.nodes);
129 | setEdges(pastState.edges);
130 | setLastSelectedNodeId(pastState.lastSelectedNodeId);
131 | setSelectedNodeId(pastState.selectedNodeId);
132 |
133 | autoZoomIfNecessary();
134 | }
135 |
136 | if (MIXPANEL_TOKEN) mixpanel.track("Performed undo");
137 | };
138 |
139 | const redo = () => {
140 | const futureState = future[future.length - 1];
141 |
142 | if (futureState) {
143 | setFuture((future) => future.slice(0, future.length - 1));
144 | setPast((past) => [...past, { nodes, edges, selectedNodeId, lastSelectedNodeId }]);
145 | setNodes(futureState.nodes);
146 | setEdges(futureState.edges);
147 | setLastSelectedNodeId(futureState.lastSelectedNodeId);
148 | setSelectedNodeId(futureState.selectedNodeId);
149 |
150 | autoZoomIfNecessary();
151 | }
152 |
153 | if (MIXPANEL_TOKEN) mixpanel.track("Performed redo");
154 | };
155 |
156 | /*//////////////////////////////////////////////////////////////
157 | CORE REACT FLOW LOGIC
158 | //////////////////////////////////////////////////////////////*/
159 |
160 | const { setViewport, fitView } = useReactFlow();
161 |
162 | const [reactFlow, setReactFlow] = useState(null);
163 |
164 | const [nodes, setNodes, onNodesChange] = useNodesState([]);
165 | const [edges, setEdges, onEdgesChange] = useEdgesState([]);
166 |
167 | const edgeUpdateSuccessful = useRef(true);
168 |
169 | const onEdgeUpdateStart = useCallback(() => {
170 | edgeUpdateSuccessful.current = false;
171 | }, []);
172 |
173 | const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) => {
174 | if (
175 | !getConnectionAllowed(nodes, edges, {
176 | source: newConnection.source!,
177 | target: newConnection.target!,
178 | })
179 | )
180 | return;
181 |
182 | takeSnapshot();
183 |
184 | edgeUpdateSuccessful.current = true;
185 |
186 | setEdges((edges) => updateEdge(oldEdge, newConnection, edges));
187 | };
188 |
189 | const onEdgeUpdateEnd = (_: unknown, edge: Edge) => {
190 | if (!edgeUpdateSuccessful.current) {
191 | takeSnapshot();
192 |
193 | setEdges((edges) => edges.filter((e) => e.id !== edge.id));
194 | }
195 |
196 | edgeUpdateSuccessful.current = true;
197 | };
198 |
199 | const onConnect = (connection: Edge | Connection) => {
200 | if (
201 | !getConnectionAllowed(nodes, edges, {
202 | source: connection.source!,
203 | target: connection.target!,
204 | })
205 | )
206 | return;
207 |
208 | takeSnapshot();
209 | setEdges((eds) => addEdge({ ...connection }, eds));
210 | };
211 |
212 | const autoZoom = () => setTimeout(() => fitView(FIT_VIEW_SETTINGS), 50);
213 |
214 | const autoZoomIfNecessary = () => {
215 | if (settings.autoZoom) autoZoom();
216 | };
217 |
218 | const trackedAutoZoom = () => {
219 | autoZoom();
220 |
221 | if (MIXPANEL_TOKEN) mixpanel.track("Zoomed out and centered");
222 | };
223 |
224 | const save = () => {
225 | if (reactFlow) {
226 | localStorage.setItem(
227 | REACT_FLOW_LOCAL_STORAGE_KEY,
228 | JSON.stringify(reactFlow.toObject())
229 | );
230 | }
231 | };
232 |
233 | // Auto save.
234 | const isSavingReactFlow = useDebouncedEffect(
235 | save,
236 | 1000, // 1 second.
237 | [reactFlow, nodes, edges]
238 | );
239 |
240 | // Auto restore on load.
241 | useEffect(() => {
242 | if (reactFlow) {
243 | const rawFlow = localStorage.getItem(REACT_FLOW_LOCAL_STORAGE_KEY);
244 |
245 | const flow: ReactFlowJsonObject = rawFlow ? JSON.parse(rawFlow) : null;
246 |
247 | // Get the content of the newTreeWith query param.
248 | const content = getQueryParam(NEW_TREE_CONTENT_QUERY_PARAM);
249 |
250 | if (flow) {
251 | setEdges(flow.edges || []);
252 | setViewport(flow.viewport);
253 |
254 | const nodes = flow.nodes; // For brevity.
255 |
256 | if (nodes.length > 0) {
257 | // Either the first selected node we find, or the first node in the array.
258 | const toSelect = nodes.find((node) => node.selected)?.id ?? nodes[0].id;
259 |
260 | // Add the nodes to the React Flow array and select the node.
261 | selectNode(toSelect, () => nodes);
262 |
263 | // If there was a newTreeWith query param, create a new tree with that content.
264 | // We pass false for forceAutoZoom because we'll do it 500ms later to avoid lag.
265 | if (content) newUserNodeLinkedToANewSystemNode(content, false);
266 | } else newUserNodeLinkedToANewSystemNode(content, false); // Create a new node if there are none.
267 | } else newUserNodeLinkedToANewSystemNode(content, false); // Create a new node if there are none.
268 |
269 | setTimeout(() => {
270 | // Do this with a more generous timeout to make sure
271 | // the nodes are rendered and the settings have loaded in.
272 | if (settings.autoZoom) fitView(FIT_VIEW_SETTINGS);
273 | }, 500);
274 |
275 | resetURL(); // Get rid of the query params.
276 | }
277 | }, [reactFlow]);
278 |
279 | /*//////////////////////////////////////////////////////////////
280 | AI PROMPT CALLBACKS
281 | //////////////////////////////////////////////////////////////*/
282 |
283 | // Takes a prompt, submits it to the GPT API with n responses,
284 | // then creates a child node for each response under the selected node.
285 | const submitPrompt = async (overrideExistingIfPossible: boolean) => {
286 | takeSnapshot();
287 |
288 | const responses = settings.n;
289 | const temp = settings.temp;
290 | const model = settings.model;
291 |
292 | const parentNodeLineage = selectedNodeLineage;
293 | const parentNode = selectedNodeLineage[0];
294 |
295 | const newNodes = [...nodes];
296 |
297 | const currentNode = getFluxNode(newNodes, parentNode.id)!;
298 | const currentNodeChildren = getFluxNodeGPTChildren(newNodes, edges, parentNode.id);
299 |
300 | const streamId = generateStreamId();
301 |
302 | let firstCompletionId: string | undefined;
303 |
304 | // Update newNodes, adding new child nodes as
305 | // needed, re-using existing ones wherever possible if overrideExistingIfPossible is set.
306 | for (let i = 0; i < responses; i++) {
307 | // If we have enough children, and overrideExistingIfPossible is true, we'll just re-use one.
308 | if (overrideExistingIfPossible && i < currentNodeChildren.length) {
309 | const childNode = currentNodeChildren[i];
310 |
311 | if (i === 0) firstCompletionId = childNode.id;
312 |
313 | const idx = newNodes.findIndex((node) => node.id === childNode.id);
314 |
315 | newNodes[idx] = {
316 | ...childNode,
317 | data: {
318 | ...childNode.data,
319 | text: "",
320 | label: childNode.data.label ?? displayNameFromFluxNodeType(FluxNodeType.GPT),
321 | fluxNodeType: FluxNodeType.GPT,
322 | streamId,
323 | },
324 | style: {
325 | ...childNode.style,
326 | background: getFluxNodeTypeColor(FluxNodeType.GPT),
327 | },
328 | };
329 | } else {
330 | const id = generateNodeId();
331 |
332 | if (i === 0) firstCompletionId = id;
333 |
334 | // Otherwise, we'll create a new node.
335 | newNodes.push(
336 | newFluxNode({
337 | id,
338 | // Position it 50px below the current node, offset
339 | // horizontally according to the number of responses
340 | // such that the middle response is right below the current node.
341 | // Note that node x y coords are the top left corner of the node,
342 | // so we need to offset by at the width of the node (150px).
343 | x:
344 | (currentNodeChildren.length > 0
345 | ? // If there are already children we want to put the
346 | // next child to the right of the furthest right one.
347 | currentNodeChildren.reduce((prev, current) =>
348 | prev.position.x > current.position.x ? prev : current
349 | ).position.x +
350 | (responses / 2) * 180 +
351 | 90
352 | : currentNode.position.x) +
353 | (i - (responses - 1) / 2) * 180,
354 | // Add OVERLAP_RANDOMNESS_MAX of randomness to the y position so that nodes don't overlap.
355 | y: currentNode.position.y + 100 + Math.random() * OVERLAP_RANDOMNESS_MAX,
356 | fluxNodeType: FluxNodeType.GPT,
357 | text: "",
358 | streamId,
359 | })
360 | );
361 | }
362 | }
363 |
364 | if (firstCompletionId === undefined) throw new Error("No first completion id!");
365 |
366 | (async () => {
367 | const stream = await OpenAI(
368 | "chat",
369 | {
370 | model,
371 | n: responses,
372 | temperature: temp,
373 | messages: messagesFromLineage(parentNodeLineage, settings),
374 | },
375 | { apiKey: apiKey!, mode: "raw" }
376 | );
377 |
378 | const DECODER = new TextDecoder();
379 |
380 | const abortController = new AbortController();
381 |
382 | for await (const chunk of yieldStream(stream, abortController)) {
383 | if (abortController.signal.aborted) break;
384 |
385 | try {
386 | const decoded = JSON.parse(DECODER.decode(chunk));
387 |
388 | if (decoded.choices === undefined)
389 | throw new Error(
390 | "No choices in response. Decoded response: " + JSON.stringify(decoded)
391 | );
392 |
393 | const choice: CreateChatCompletionStreamResponseChoicesInner =
394 | decoded.choices[0];
395 |
396 | if (choice.index === undefined)
397 | throw new Error(
398 | "No index in choice. Decoded choice: " + JSON.stringify(choice)
399 | );
400 |
401 | const correspondingNodeId =
402 | // If we re-used a node we have to pull it from children array.
403 | overrideExistingIfPossible && choice.index < currentNodeChildren.length
404 | ? currentNodeChildren[choice.index].id
405 | : newNodes[newNodes.length - responses + choice.index].id;
406 |
407 | // The ChatGPT API will start by returning a
408 | // choice with only a role delta and no content.
409 | if (choice.delta?.content) {
410 | setNodes((newerNodes) => {
411 | try {
412 | return appendTextToFluxNodeAsGPT(newerNodes, {
413 | id: correspondingNodeId,
414 | text: choice.delta?.content ?? UNDEFINED_RESPONSE_STRING,
415 | streamId, // This will cause a throw if the streamId has changed.
416 | });
417 | } catch (e: any) {
418 | // If the stream id does not match,
419 | // it is stale and we should abort.
420 | abortController.abort(e.message);
421 |
422 | return newerNodes;
423 | }
424 | });
425 | }
426 |
427 | // We cannot return within the loop, and we do
428 | // not want to execute the code below, so we break.
429 | if (abortController.signal.aborted) break;
430 |
431 | // If the choice has a finish reason, then it's the final
432 | // choice and we can mark it as no longer animated right now.
433 | if (choice.finish_reason !== null) {
434 | // Reset the stream id.
435 | setNodes((nodes) =>
436 | setFluxNodeStreamId(nodes, { id: correspondingNodeId, streamId: undefined })
437 | );
438 |
439 | setEdges((edges) =>
440 | modifyFluxEdge(edges, {
441 | source: parentNode.id,
442 | target: correspondingNodeId,
443 | animated: false,
444 | })
445 | );
446 | }
447 | } catch (err) {
448 | console.error(err);
449 | }
450 | }
451 |
452 | // If the stream wasn't aborted or was aborted due to a cancelation.
453 | if (
454 | !abortController.signal.aborted ||
455 | abortController.signal.reason === STREAM_CANCELED_ERROR_MESSAGE
456 | ) {
457 | // Mark all the edges as no longer animated.
458 | for (let i = 0; i < responses; i++) {
459 | const correspondingNodeId =
460 | overrideExistingIfPossible && i < currentNodeChildren.length
461 | ? currentNodeChildren[i].id
462 | : newNodes[newNodes.length - responses + i].id;
463 |
464 | // Reset the stream id.
465 | setNodes((nodes) =>
466 | setFluxNodeStreamId(nodes, { id: correspondingNodeId, streamId: undefined })
467 | );
468 |
469 | setEdges((edges) =>
470 | modifyFluxEdge(edges, {
471 | source: parentNode.id,
472 | target: correspondingNodeId,
473 | animated: false,
474 | })
475 | );
476 | }
477 | }
478 | })().catch((err) =>
479 | toast({
480 | title: err.toString(),
481 | status: "error",
482 | ...TOAST_CONFIG,
483 | })
484 | );
485 |
486 | setNodes(markOnlyNodeAsSelected(newNodes, firstCompletionId!));
487 |
488 | setLastSelectedNodeId(selectedNodeId);
489 | setSelectedNodeId(firstCompletionId);
490 |
491 | setEdges((edges) => {
492 | let newEdges = [...edges];
493 |
494 | for (let i = 0; i < responses; i++) {
495 | // Update the links between
496 | // re-used nodes if necessary.
497 | if (overrideExistingIfPossible && i < currentNodeChildren.length) {
498 | const childId = currentNodeChildren[i].id;
499 |
500 | const idx = newEdges.findIndex(
501 | (edge) => edge.source === parentNode.id && edge.target === childId
502 | );
503 |
504 | newEdges[idx] = {
505 | ...newEdges[idx],
506 | animated: true,
507 | };
508 | } else {
509 | // The new nodes are added to the end of the array, so we need to
510 | // subtract responses from and add i to length of the array to access.
511 | const childId = newNodes[newNodes.length - responses + i].id;
512 |
513 | // Otherwise, add a new edge.
514 | newEdges.push(
515 | newFluxEdge({
516 | source: parentNode.id,
517 | target: childId,
518 | animated: true,
519 | })
520 | );
521 | }
522 | }
523 |
524 | return newEdges;
525 | });
526 |
527 | autoZoomIfNecessary();
528 |
529 | if (MIXPANEL_TOKEN) mixpanel.track("Submitted Prompt"); // KPI
530 | };
531 |
532 | const completeNextWords = () => {
533 | takeSnapshot();
534 |
535 | const temp = settings.temp;
536 |
537 | const lineage = selectedNodeLineage;
538 | const selectedNodeId = lineage[0].id;
539 |
540 | const streamId = generateStreamId();
541 |
542 | // Set the node's streamId so it will accept the incoming text.
543 | setNodes((nodes) => setFluxNodeStreamId(nodes, { id: selectedNodeId, streamId }));
544 |
545 | (async () => {
546 | // TODO: Stop sequences for user/assistant/etc?
547 | // TODO: Select between instruction and auto raw base models?
548 | const stream = await OpenAI(
549 | "completions",
550 | {
551 | // TODO: Allow customizing.
552 | model: "text-davinci-003",
553 | temperature: temp,
554 | prompt: promptFromLineage(lineage, settings),
555 | max_tokens: 250,
556 | stop: ["\n\n", "assistant:", "user:"],
557 | },
558 | { apiKey: apiKey!, mode: "raw" }
559 | );
560 |
561 | const DECODER = new TextDecoder();
562 |
563 | const abortController = new AbortController();
564 |
565 | for await (const chunk of yieldStream(stream, abortController)) {
566 | if (abortController.signal.aborted) break;
567 |
568 | try {
569 | const decoded = JSON.parse(DECODER.decode(chunk));
570 |
571 | if (decoded.choices === undefined)
572 | throw new Error(
573 | "No choices in response. Decoded response: " + JSON.stringify(decoded)
574 | );
575 |
576 | const choice: CreateCompletionResponseChoicesInner = decoded.choices[0];
577 |
578 | setNodes((newerNodes) => {
579 | try {
580 | return appendTextToFluxNodeAsGPT(newerNodes, {
581 | id: selectedNodeId,
582 | text: choice.text ?? UNDEFINED_RESPONSE_STRING,
583 | streamId, // This will cause a throw if the streamId has changed.
584 | });
585 | } catch (e: any) {
586 | // If the stream id does not match,
587 | // it is stale and we should abort.
588 | abortController.abort(e.message);
589 |
590 | return newerNodes;
591 | }
592 | });
593 | } catch (err) {
594 | console.error(err);
595 | }
596 | }
597 |
598 | // If the stream wasn't aborted or was aborted due to a cancelation.
599 | if (
600 | !abortController.signal.aborted ||
601 | abortController.signal.reason === STREAM_CANCELED_ERROR_MESSAGE
602 | ) {
603 | // Reset the stream id.
604 | setNodes((nodes) =>
605 | setFluxNodeStreamId(nodes, { id: selectedNodeId, streamId: undefined })
606 | );
607 | }
608 | })().catch((err) => console.error(err));
609 |
610 | if (MIXPANEL_TOKEN) mixpanel.track("Completed next words");
611 | };
612 |
613 | /*//////////////////////////////////////////////////////////////
614 | SELECTED NODE LOGIC
615 | //////////////////////////////////////////////////////////////*/
616 |
617 | const [selectedNodeId, setSelectedNodeId] = useState(null);
618 | const [lastSelectedNodeId, setLastSelectedNodeId] = useState(null);
619 |
620 | const selectedNodeLineage =
621 | selectedNodeId !== null ? getFluxNodeLineage(nodes, edges, selectedNodeId) : [];
622 |
623 | /*//////////////////////////////////////////////////////////////
624 | NODE MUTATION CALLBACKS
625 | //////////////////////////////////////////////////////////////*/
626 |
627 | const newUserNodeLinkedToANewSystemNode = (
628 | text: string | null = "",
629 | forceAutoZoom: boolean = true
630 | ) => {
631 | takeSnapshot();
632 |
633 | const systemId = generateNodeId();
634 | const userId = generateNodeId();
635 |
636 | selectNode(userId, (nodes) =>
637 | addUserNodeLinkedToASystemNode(
638 | nodes,
639 | settings.defaultPreamble,
640 | text,
641 | systemId,
642 | userId
643 | )
644 | );
645 |
646 | setEdges((edges) =>
647 | addFluxEdge(edges, {
648 | source: systemId,
649 | target: userId,
650 | animated: false,
651 | })
652 | );
653 |
654 | if (forceAutoZoom) autoZoom();
655 |
656 | if (MIXPANEL_TOKEN) mixpanel.track("New conversation tree created");
657 | };
658 |
659 | const newConnectedToSelectedNode = (type: FluxNodeType) => {
660 | const selectedNode = getFluxNode(nodes, selectedNodeId!);
661 |
662 | if (selectedNode) {
663 | takeSnapshot();
664 |
665 | const selectedNodeChildren = getFluxNodeChildren(nodes, edges, selectedNodeId!);
666 |
667 | const id = generateNodeId();
668 |
669 | selectNode(id, (nodes) =>
670 | addFluxNode(nodes, {
671 | id,
672 | x:
673 | selectedNodeChildren.length > 0
674 | ? // If there are already children we want to put the
675 | // next child to the right of the furthest right one.
676 | selectedNodeChildren.reduce((prev, current) =>
677 | prev.position.x > current.position.x ? prev : current
678 | ).position.x + 180
679 | : selectedNode.position.x,
680 | // Add OVERLAP_RANDOMNESS_MAX of randomness to
681 | // the y position so that nodes don't overlap.
682 | y: selectedNode.position.y + 100 + Math.random() * OVERLAP_RANDOMNESS_MAX,
683 | fluxNodeType: type,
684 | text: "",
685 | })
686 | );
687 |
688 | setEdges((edges) =>
689 | addFluxEdge(edges, {
690 | source: selectedNodeId!,
691 | target: id,
692 | animated: false,
693 | })
694 | );
695 |
696 | autoZoomIfNecessary();
697 |
698 | if (type === FluxNodeType.User) {
699 | if (MIXPANEL_TOKEN) mixpanel.track("New user node created");
700 | } else {
701 | if (MIXPANEL_TOKEN) mixpanel.track("New system node created");
702 | }
703 | }
704 | };
705 |
706 | const deleteSelectedNodes = () => {
707 | takeSnapshot();
708 |
709 | const selectedNodes = nodes.filter((node) => node.selected);
710 |
711 | if (
712 | selectedNodeId && // There's a selected node under the hood.
713 | (selectedNodes.length === 0 || // There are no selected nodes.
714 | // There is only one selected node, and it's the selected node.
715 | (selectedNodes.length === 1 && selectedNodes[0].id === selectedNodeId))
716 | ) {
717 | // Try to move to sibling first.
718 | const hasSibling = moveToRightSibling();
719 |
720 | // If there's no sibling, move to parent.
721 | if (!hasSibling) moveToParent();
722 |
723 | setNodes((nodes) => deleteFluxNode(nodes, selectedNodeId));
724 | } else {
725 | setNodes(deleteSelectedFluxNodes);
726 |
727 | // If any of the selected nodes are the selected node, unselect it.
728 | if (selectedNodeId && selectedNodes.some((node) => node.id === selectedNodeId)) {
729 | setLastSelectedNodeId(null);
730 | setSelectedNodeId(null);
731 | }
732 | }
733 |
734 | autoZoomIfNecessary();
735 |
736 | if (MIXPANEL_TOKEN) mixpanel.track("Deleted selected node(s)");
737 | };
738 |
739 | const onClear = () => {
740 | if (confirm("Are you sure you want to delete all nodes?")) {
741 | takeSnapshot();
742 |
743 | setNodes([]);
744 | setEdges([]);
745 | setViewport({ x: 0, y: 0, zoom: 1 });
746 |
747 | if (MIXPANEL_TOKEN) mixpanel.track("Deleted everything");
748 | }
749 | };
750 |
751 | /*//////////////////////////////////////////////////////////////
752 | NODE SELECTION CALLBACKS
753 | //////////////////////////////////////////////////////////////*/
754 |
755 | const selectNode = (
756 | id: string,
757 | computeNewNodes?: (currNodes: Node[]) => Node[]
758 | ) => {
759 | setLastSelectedNodeId(selectedNodeId);
760 | setSelectedNodeId(id);
761 | setNodes((currNodes) =>
762 | // If we were passed a computeNewNodes function, use it, otherwise just use the current nodes.
763 | markOnlyNodeAsSelected(computeNewNodes ? computeNewNodes(currNodes) : currNodes, id)
764 | );
765 | };
766 |
767 | const moveToChild = () => {
768 | const children = getFluxNodeChildren(nodes, edges, selectedNodeId!);
769 |
770 | if (children.length > 0) {
771 | selectNode(
772 | lastSelectedNodeId !== null &&
773 | children.some((node) => node.id == lastSelectedNodeId)
774 | ? lastSelectedNodeId
775 | : children[0].id
776 | );
777 |
778 | if (MIXPANEL_TOKEN) mixpanel.track("Moved to child node");
779 |
780 | return true;
781 | } else {
782 | return false;
783 | }
784 | };
785 |
786 | const moveToParent = () => {
787 | const parent = getFluxNodeParent(nodes, edges, selectedNodeId!);
788 |
789 | if (parent) {
790 | selectNode(parent.id);
791 |
792 | if (MIXPANEL_TOKEN) mixpanel.track("Moved to parent node");
793 |
794 | return true;
795 | } else {
796 | return false;
797 | }
798 | };
799 |
800 | const moveToLeftSibling = () => {
801 | const siblings = getFluxNodeSiblings(nodes, edges, selectedNodeId!);
802 |
803 | if (siblings.length > 1) {
804 | const currentIndex = siblings.findIndex((node) => node.id == selectedNodeId!)!;
805 |
806 | selectNode(siblings[mod(currentIndex - 1, siblings.length)].id);
807 |
808 | if (MIXPANEL_TOKEN) mixpanel.track("Moved to left sibling node");
809 |
810 | return true;
811 | } else {
812 | return false;
813 | }
814 | };
815 |
816 | const moveToRightSibling = () => {
817 | const siblings = getFluxNodeSiblings(nodes, edges, selectedNodeId!);
818 |
819 | if (siblings.length > 1) {
820 | const currentIndex = siblings.findIndex((node) => node.id == selectedNodeId!)!;
821 |
822 | selectNode(siblings[mod(currentIndex + 1, siblings.length)].id);
823 |
824 | if (MIXPANEL_TOKEN) mixpanel.track("Moved to right sibling node");
825 |
826 | return true;
827 | } else {
828 | return false;
829 | }
830 | };
831 |
832 | /*//////////////////////////////////////////////////////////////
833 | SETTINGS MODAL LOGIC
834 | //////////////////////////////////////////////////////////////*/
835 |
836 | const {
837 | isOpen: isSettingsModalOpen,
838 | onOpen: onOpenSettingsModal,
839 | onClose: onCloseSettingsModal,
840 | onToggle: onToggleSettingsModal,
841 | } = useDisclosure();
842 |
843 | const [settings, setSettings] = useState(() => {
844 | const rawSettings = localStorage.getItem(MODEL_SETTINGS_LOCAL_STORAGE_KEY);
845 |
846 | if (rawSettings !== null) {
847 | return JSON.parse(rawSettings) as Settings;
848 | } else {
849 | return DEFAULT_SETTINGS;
850 | }
851 | });
852 |
853 | const isGPT4 = settings.model.includes("gpt-4");
854 |
855 | // Auto save.
856 | const isSavingSettings = useDebouncedEffect(
857 | () => {
858 | localStorage.setItem(MODEL_SETTINGS_LOCAL_STORAGE_KEY, JSON.stringify(settings));
859 | },
860 | 1000, // 1 second.
861 | [settings]
862 | );
863 |
864 | /*//////////////////////////////////////////////////////////////
865 | API KEY LOGIC
866 | //////////////////////////////////////////////////////////////*/
867 |
868 | const [apiKey, setApiKey] = useLocalStorage(API_KEY_LOCAL_STORAGE_KEY);
869 | const [elevenKey, setElevenKey] = useLocalStorage(ELEVEN_KEY_LOCAL_STORAGE_KEY);
870 | const [voiceID, setVoiceID] = useLocalStorage(VOICE_ID_LOCAL_STORAGE_KEY);
871 |
872 | const [availableModels, setAvailableModels] = useState(null);
873 |
874 | // modelsLoadCounter lets us discard the results of the requests if a concurrent newer one was made.
875 | const modelsLoadCounter = useRef(0);
876 | useEffect(() => {
877 | if (isValidAPIKey(apiKey)) {
878 | const modelsLoadIndex = modelsLoadCounter.current + 1;
879 | modelsLoadCounter.current = modelsLoadIndex;
880 |
881 | setAvailableModels(null);
882 |
883 | (async () => {
884 | let modelList: string[] = [];
885 | try {
886 | modelList = await getAvailableChatModels(apiKey!);
887 | } catch (e) {
888 | toast({
889 | title: "Failed to load model list!",
890 | status: "error",
891 | ...TOAST_CONFIG,
892 | });
893 | }
894 | if (modelsLoadIndex !== modelsLoadCounter.current) return;
895 |
896 | if (modelList.length === 0) modelList.push(settings.model);
897 |
898 | setAvailableModels(modelList);
899 |
900 | if (!modelList.includes(settings.model)) {
901 | const oldModel = settings.model;
902 | const newModel = modelList.includes(DEFAULT_SETTINGS.model)
903 | ? DEFAULT_SETTINGS.model
904 | : modelList[0];
905 |
906 | setSettings((settings) => ({ ...settings, model: newModel }));
907 |
908 | toast({
909 | title: `Model "${oldModel}" no longer available!`,
910 | description: `Switched to "${newModel}"`,
911 | status: "warning",
912 | ...TOAST_CONFIG,
913 | });
914 | }
915 | })();
916 | }
917 | }, [apiKey]);
918 |
919 | const isAnythingSaving = isSavingReactFlow || isSavingSettings;
920 | const isAnythingLoading = isAnythingSaving || availableModels === null;
921 |
922 | useBeforeunload((event: BeforeUnloadEvent) => {
923 | // Prevent leaving the page before saving.
924 | if (isAnythingSaving) event.preventDefault();
925 | });
926 |
927 | /*//////////////////////////////////////////////////////////////
928 | COPY MESSAGES LOGIC
929 | //////////////////////////////////////////////////////////////*/
930 |
931 | const copyMessagesToClipboard = async () => {
932 | const messages = promptFromLineage(selectedNodeLineage, settings);
933 |
934 | if (await copySnippetToClipboard(messages)) {
935 | toast({
936 | title: "Copied messages to clipboard!",
937 | status: "success",
938 | ...TOAST_CONFIG,
939 | });
940 |
941 | if (MIXPANEL_TOKEN) mixpanel.track("Copied messages to clipboard");
942 | } else {
943 | toast({
944 | title: "Failed to copy messages to clipboard!",
945 | status: "error",
946 | ...TOAST_CONFIG,
947 | });
948 | }
949 | };
950 |
951 | /*//////////////////////////////////////////////////////////////
952 | RENAME NODE LOGIC
953 | //////////////////////////////////////////////////////////////*/
954 |
955 | const showRenameInput = () => {
956 | const selectedNode = nodes.find((node) => node.selected);
957 | const nodeId = selectedNode?.id ?? selectedNodeId;
958 |
959 | if (nodeId) {
960 | takeSnapshot();
961 |
962 | setNodes((nodes) =>
963 | modifyReactFlowNodeProperties(nodes, {
964 | id: nodeId,
965 | type: ReactFlowNodeTypes.LabelUpdater,
966 | draggable: false,
967 | })
968 | );
969 |
970 | if (MIXPANEL_TOKEN) mixpanel.track("Triggered rename input");
971 | }
972 | };
973 |
974 | /*//////////////////////////////////////////////////////////////
975 | WINDOW RESIZE LOGIC
976 | //////////////////////////////////////////////////////////////*/
977 |
978 | useDebouncedWindowResize(autoZoomIfNecessary, 100);
979 |
980 | /*//////////////////////////////////////////////////////////////
981 | CHAT RESIZE LOGIC
982 | //////////////////////////////////////////////////////////////*/
983 |
984 | const [savedChatSize, setSavedChatSize] = useLocalStorage(
985 | SAVED_CHAT_SIZE_LOCAL_STORAGE_KEY
986 | );
987 |
988 | /*//////////////////////////////////////////////////////////////
989 | HOTKEYS LOGIC
990 | //////////////////////////////////////////////////////////////*/
991 |
992 | const modifierKey = getPlatformModifierKey();
993 | const modifierKeyText = getPlatformModifierKeyText();
994 |
995 | useHotkeys(`${modifierKey}+s`, save, HOTKEY_CONFIG);
996 |
997 | useHotkeys(
998 | `${modifierKey}+p`,
999 | () => newConnectedToSelectedNode(FluxNodeType.User),
1000 | HOTKEY_CONFIG
1001 | );
1002 | useHotkeys(
1003 | `${modifierKey}+u`,
1004 | () => newConnectedToSelectedNode(FluxNodeType.System),
1005 | HOTKEY_CONFIG
1006 | );
1007 |
1008 | useHotkeys(
1009 | `${modifierKey}+shift+p`,
1010 | () => newUserNodeLinkedToANewSystemNode(),
1011 | HOTKEY_CONFIG
1012 | );
1013 |
1014 | useHotkeys(`${modifierKey}+.`, trackedAutoZoom, HOTKEY_CONFIG);
1015 | useHotkeys(
1016 | `${modifierKey}+/`,
1017 | () => {
1018 | onToggleSettingsModal();
1019 |
1020 | if (MIXPANEL_TOKEN) mixpanel.track("Toggled settings modal");
1021 | },
1022 | HOTKEY_CONFIG
1023 | );
1024 | useHotkeys(`${modifierKey}+shift+backspace`, onClear, HOTKEY_CONFIG);
1025 |
1026 | useHotkeys(`${modifierKey}+z`, undo, HOTKEY_CONFIG);
1027 | useHotkeys(`${modifierKey}+shift+z`, redo, HOTKEY_CONFIG);
1028 |
1029 | useHotkeys(`${modifierKey}+e`, showRenameInput, HOTKEY_CONFIG);
1030 |
1031 | useHotkeys(`${modifierKey}+up`, moveToParent, HOTKEY_CONFIG);
1032 | useHotkeys(`${modifierKey}+down`, moveToChild, HOTKEY_CONFIG);
1033 | useHotkeys(`${modifierKey}+left`, moveToLeftSibling, HOTKEY_CONFIG);
1034 | useHotkeys(`${modifierKey}+right`, moveToRightSibling, HOTKEY_CONFIG);
1035 | useHotkeys(`${modifierKey}+return`, () => submitPrompt(false), HOTKEY_CONFIG);
1036 | useHotkeys(`${modifierKey}+shift+return`, () => submitPrompt(true), HOTKEY_CONFIG);
1037 | useHotkeys(`${modifierKey}+k`, completeNextWords, HOTKEY_CONFIG);
1038 | useHotkeys(`${modifierKey}+backspace`, deleteSelectedNodes, HOTKEY_CONFIG);
1039 | useHotkeys(`${modifierKey}+shift+c`, copyMessagesToClipboard, HOTKEY_CONFIG);
1040 |
1041 | /*//////////////////////////////////////////////////////////////
1042 | APP
1043 | //////////////////////////////////////////////////////////////*/
1044 |
1045 | return (
1046 | <>
1047 | {!isValidAPIKey(apiKey) && }
1048 |
1049 |
1062 |
1068 |
1069 | {
1088 | setSavedChatSize(ref.style.width);
1089 | autoZoomIfNecessary();
1090 |
1091 | if (MIXPANEL_TOKEN) mixpanel.track("Resized chat window");
1092 | }}
1093 | >
1094 |
1101 |
1110 |
1112 | newUserNodeLinkedToANewSystemNode()
1113 | }
1114 | newConnectedToSelectedNode={newConnectedToSelectedNode}
1115 | deleteSelectedNodes={deleteSelectedNodes}
1116 | submitPrompt={() => submitPrompt(false)}
1117 | regenerate={() => submitPrompt(true)}
1118 | completeNextWords={completeNextWords}
1119 | undo={undo}
1120 | redo={redo}
1121 | onClear={onClear}
1122 | copyMessagesToClipboard={copyMessagesToClipboard}
1123 | showRenameInput={showRenameInput}
1124 | moveToParent={moveToParent}
1125 | moveToChild={moveToChild}
1126 | moveToLeftSibling={moveToLeftSibling}
1127 | moveToRightSibling={moveToRightSibling}
1128 | autoZoom={trackedAutoZoom}
1129 | onOpenSettingsModal={() => {
1130 | onOpenSettingsModal();
1131 |
1132 | if (MIXPANEL_TOKEN) mixpanel.track("Opened Settings Modal"); // KPI
1133 | }}
1134 | />
1135 |
1136 |
1137 | {isAnythingLoading ? (
1138 |
1139 | ) : (
1140 |
1141 | )}
1142 |
1143 |
1144 |
1145 | {
1175 | setLastSelectedNodeId(selectedNodeId);
1176 | setSelectedNodeId(node.id);
1177 | }}
1178 | >
1179 |
1180 |
1181 |
1182 |
1183 |
1184 |
1185 | {selectedNodeLineage.length >= 1 ? (
1186 | {
1196 | takeSnapshot();
1197 | setNodes((nodes) =>
1198 | modifyFluxNodeText(nodes, {
1199 | asHuman: true,
1200 | id: selectedNodeId!,
1201 | text,
1202 | })
1203 | );
1204 | }}
1205 | submitPrompt={() => submitPrompt(false)}
1206 | apiKey={apiKey}
1207 | />
1208 | ) : (
1209 |
1215 | newUserNodeLinkedToANewSystemNode()}
1221 | color={getFluxNodeTypeDarkColor(FluxNodeType.GPT)}
1222 | >
1223 | Create a new conversation tree
1224 |
1225 |
1226 | )}
1227 |
1228 |
1229 |
1230 |
1231 | );
1232 | }
1233 |
1234 | export default App;
1235 |
--------------------------------------------------------------------------------
/src/components/Prompt.tsx:
--------------------------------------------------------------------------------
1 | import { MIXPANEL_TOKEN } from "../main";
2 | import { Row, Center, Column } from "../utils/chakra";
3 | import { getFluxNodeTypeColor, getFluxNodeTypeDarkColor } from "../utils/color";
4 | import { displayNameFromFluxNodeType, setFluxNodeStreamId } from "../utils/fluxNode";
5 | import { FluxNodeData, FluxNodeType, Settings } from "../utils/types";
6 | import { LabeledSlider } from "./utils/LabeledInputs";
7 | import { BigButton } from "./utils/BigButton";
8 | import { Markdown } from "./utils/Markdown";
9 | import { EditIcon, ViewIcon, NotAllowedIcon } from "@chakra-ui/icons";
10 | import { Spinner, Text, Button } from "@chakra-ui/react";
11 | import mixpanel from "mixpanel-browser";
12 | import { useState, useEffect, useRef } from "react";
13 | import TextareaAutosize from "react-textarea-autosize";
14 | import { Node, useReactFlow } from "reactflow";
15 | import { getPlatformModifierKeyText } from "../utils/platform";
16 | import { TTSButton } from "./utils/TTSButton";
17 | import { Whisper } from "./utils/Whisper";
18 |
19 | export function Prompt({
20 | lineage,
21 | submitPrompt,
22 | onType,
23 | selectNode,
24 | newConnectedToSelectedNode,
25 | isGPT4,
26 | settings,
27 | setSettings,
28 | elevenKey,
29 | voiceID,
30 | apiKey,
31 | }: {
32 | lineage: Node[];
33 | onType: (text: string) => void;
34 | submitPrompt: () => Promise;
35 | selectNode: (id: string) => void;
36 | newConnectedToSelectedNode: (type: FluxNodeType) => void;
37 | isGPT4: boolean;
38 | settings: Settings;
39 | elevenKey: string | null;
40 | voiceID: string | null;
41 | setSettings: (settings: Settings) => void;
42 | apiKey: string | null;
43 | }) {
44 | const { setNodes } = useReactFlow();
45 |
46 | const promptNode = lineage[0];
47 |
48 | const promptNodeType = promptNode.data.fluxNodeType;
49 |
50 | const onMainButtonClick = () => {
51 | if (promptNodeType === FluxNodeType.User) {
52 | submitPrompt();
53 | } else {
54 | newConnectedToSelectedNode(FluxNodeType.User);
55 | }
56 | };
57 |
58 | const stopGenerating = () => {
59 | // Reset the stream id.
60 | setNodes((nodes) =>
61 | setFluxNodeStreamId(nodes, { id: promptNode.id, streamId: undefined })
62 | );
63 |
64 | if (MIXPANEL_TOKEN) mixpanel.track("Stopped generating response");
65 | };
66 |
67 | /*//////////////////////////////////////////////////////////////
68 | STATE
69 | //////////////////////////////////////////////////////////////*/
70 |
71 | const [isEditing, setIsEditing] = useState(
72 | promptNodeType === FluxNodeType.User || promptNodeType === FluxNodeType.System
73 | );
74 | const [hoveredNodeId, setHoveredNodeId] = useState(null);
75 |
76 | /*//////////////////////////////////////////////////////////////
77 | EFFECTS
78 | //////////////////////////////////////////////////////////////*/
79 |
80 | const textOffsetRef = useRef(-1);
81 |
82 | // Scroll to the prompt buttons
83 | // when the bottom node is swapped.
84 | useEffect(() => {
85 | window.document
86 | .getElementById("promptButtons")
87 | ?.scrollIntoView(/* { behavior: "smooth" } */);
88 |
89 | // If the user clicked on the node, we assume they want to edit it.
90 | // Otherwise, we only put them in edit mode if its a user or system node.
91 | setIsEditing(
92 | textOffsetRef.current !== -1 ||
93 | promptNodeType === FluxNodeType.User ||
94 | promptNodeType === FluxNodeType.System
95 | );
96 | }, [promptNode.id]);
97 |
98 | // Focus the textbox when the user changes into edit mode.
99 | useEffect(() => {
100 | if (isEditing) {
101 | const promptBox = window.document.getElementById(
102 | "promptBox"
103 | ) as HTMLTextAreaElement | null;
104 |
105 | // Focus the text box and move the cursor to chosen offset (defaults to end).
106 | promptBox?.setSelectionRange(textOffsetRef.current, textOffsetRef.current);
107 | promptBox?.focus();
108 |
109 | // Default to moving to the end of the text.
110 | textOffsetRef.current = -1;
111 | }
112 | }, [promptNode.id, isEditing]);
113 |
114 | /*//////////////////////////////////////////////////////////////
115 | APP
116 | //////////////////////////////////////////////////////////////*/
117 |
118 | const modifierKeyText = getPlatformModifierKeyText();
119 |
120 | return (
121 | <>
122 | {lineage
123 | .slice()
124 | .reverse()
125 | .map((node, i) => {
126 | const isLast = i === lineage.length - 1;
127 |
128 | const data = node.data;
129 |
130 | return (
131 | setHoveredNodeId(node.id)}
144 | onMouseLeave={() => setHoveredNodeId(null)}
145 | bg={getFluxNodeTypeColor(data.fluxNodeType)}
146 | key={node.id}
147 | onClick={() => {
148 | const selection = window.getSelection();
149 |
150 | // We don't want to trigger the selection
151 | // if they're just selecting/copying text.
152 | if (selection?.isCollapsed) {
153 | if (isLast) {
154 | if (data.streamId) {
155 | stopGenerating();
156 | setIsEditing(true);
157 | } else if (!isEditing) setIsEditing(true);
158 | } else {
159 | // TODO: Note this is basically broken because of codeblocks.
160 | textOffsetRef.current = selection.anchorOffset ?? 0;
161 |
162 | selectNode(node.id);
163 | setIsEditing(true);
164 | }
165 | }
166 | }}
167 | cursor={isLast && isEditing ? "text" : "pointer"}
168 | >
169 | {data.streamId && data.text === "" ? (
170 |