├── .prettierrc
├── src
    ├── vite-env.d.ts
    ├── utils
    │   ├── mod.ts
    │   ├── nodeId.ts
    │   ├── rand.ts
    │   ├── apikey.ts
    │   ├── qparams.ts
    │   ├── clipboard.ts
    │   ├── resize.ts
    │   ├── debounce.ts
    │   ├── lstore.ts
    │   ├── types.ts
    │   ├── color.ts
    │   ├── fluxEdge.ts
    │   ├── constants.ts
    │   ├── prompt.ts
    │   ├── fluxNode.ts
    │   └── chakra.tsx
    ├── index.css
    ├── components
    │   ├── utils
    │   │   ├── BigButton.tsx
    │   │   ├── APIKeyInput.tsx
    │   │   ├── TextAndCodeBlock.tsx
    │   │   ├── LabeledInputs.tsx
    │   │   └── NavigationBar.tsx
    │   ├── modals
    │   │   ├── APIKeyModal.tsx
    │   │   └── SettingsModal.tsx
    │   ├── nodes
    │   │   └── LabelUpdaterNode.tsx
    │   ├── Prompt.tsx
    │   └── App.tsx
    └── main.tsx
├── public
    ├── dave.jpg
    ├── meta.jpg
    ├── t11s.jpg
    ├── favicon.ico
    ├── meta-full.png
    ├── paradigm-full.svg
    └── paradigm.svg
├── vite.config.ts
├── tsconfig.node.json
├── .gitignore
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    └── PULL_REQUEST_TEMPLATE.md
├── tsconfig.json
├── index.html
├── LICENSE
├── package.json
├── README.md
└── CONTRIBUTING.md


/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "printWidth": 90
3 | }
4 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/public/dave.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hey/flux/main/public/dave.jpg


--------------------------------------------------------------------------------
/public/meta.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hey/flux/main/public/meta.jpg


--------------------------------------------------------------------------------
/public/t11s.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hey/flux/main/public/t11s.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hey/flux/main/public/favicon.ico


--------------------------------------------------------------------------------
/public/meta-full.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hey/flux/main/public/meta-full.png


--------------------------------------------------------------------------------
/src/utils/mod.ts:
--------------------------------------------------------------------------------
1 | export function mod(n: number, m: number) {
2 |   return ((n % m) + m) % m;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/utils/nodeId.ts:
--------------------------------------------------------------------------------
1 | export function generateNodeId() {
2 |   return Math.random().toString().replace("0.", "");
3 | }
4 | 


--------------------------------------------------------------------------------
/src/utils/rand.ts:
--------------------------------------------------------------------------------
1 | export function randomNumber(min: number, max: number) {
2 |   return Math.random() * (max - min) + min;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/utils/apikey.ts:
--------------------------------------------------------------------------------
1 | export function isValidAPIKey(apiKey: string | null) {
2 |   return apiKey?.length == 51 && apiKey?.startsWith("sk-");
3 | }
4 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react-swc";
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | });
8 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/utils/qparams.ts:
--------------------------------------------------------------------------------
1 | export function getQueryParam(parameterName: string) {
2 |   const urlParams = new URLSearchParams(window.location.search);
3 |   return urlParams.get(parameterName);
4 | }
5 | 
6 | export function resetURL() {
7 |   history.replaceState({}, document.title, window.location.pathname);
8 | }
9 | 


--------------------------------------------------------------------------------
/src/utils/clipboard.ts:
--------------------------------------------------------------------------------
 1 | export const copySnippetToClipboard = async (text: string): Promise<boolean> => {
 2 |   try {
 3 |     await navigator.clipboard.writeText(text);
 4 |     return true;
 5 |   } catch (err) {
 6 |     console.error("Failed to copy to clipboard", err);
 7 |     return false;
 8 |   }
 9 | };
10 | 


--------------------------------------------------------------------------------
/.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


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | .selected {
 2 |   box-shadow: 0px 0px 0px 2px red, 0px 0px 30px 2px red !important;
 3 | }
 4 | 
 5 | .react-flow__node {
 6 |   border-radius: 6px;
 7 |   border-width: 0px;
 8 | }
 9 | 
10 | .react-flow__node:not(.selected):hover {
11 |   box-shadow: 0 0 0 0.5px #1a192b !important;
12 | }
13 | 
14 | /* Enable if you
15 | want bigger handles:
16 | .react-flow__handle {
17 |   width: 20px;
18 |   height: 7px;
19 |   border-radius: 5px;
20 | } */
21 | 


--------------------------------------------------------------------------------
/.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/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | Thank you for your Pull Request. Please provide a description above and review
 3 | the requirements below.
 4 | -->
 5 | 
 6 | ## Motivation
 7 | 
 8 | <!--
 9 | Explain the context and why you're making that change. What is the problem
10 | you're trying to solve? In some cases there is not a problem and this can be
11 | thought of as being the motivation for your change.
12 | -->
13 | 
14 | ## Solution
15 | 
16 | <!--
17 | Summarize the solution and provide any necessary context needed to understand
18 | the code change.
19 | -->
20 | 


--------------------------------------------------------------------------------
/src/components/utils/BigButton.tsx:
--------------------------------------------------------------------------------
 1 | import { ButtonProps, Button, Tooltip } from "@chakra-ui/react";
 2 | 
 3 | import { adjustColor } from "../../utils/color";
 4 | 
 5 | export function BigButton({
 6 |   color,
 7 |   tooltip,
 8 |   ...others
 9 | }: { color: string; tooltip: string } & ButtonProps) {
10 |   return (
11 |     <Tooltip label={tooltip}>
12 |       <Button
13 |         color="white"
14 |         bg={color}
15 |         _hover={{
16 |           bg: adjustColor(color, -20),
17 |         }}
18 |         {...others}
19 |       />
20 |     </Tooltip>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/src/utils/resize.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | 
 3 | export function useDebouncedWindowResize(callback: () => void, timeout: number) {
 4 |   useEffect(() => {
 5 |     let resizeTimeout: NodeJS.Timeout;
 6 | 
 7 |     const handleResize = () => {
 8 |       clearTimeout(resizeTimeout);
 9 |       resizeTimeout = setTimeout(callback, timeout);
10 |     };
11 | 
12 |     window.addEventListener("resize", handleResize);
13 | 
14 |     return () => {
15 |       window.removeEventListener("resize", handleResize);
16 |       clearTimeout(resizeTimeout);
17 |     };
18 |   }, [callback, timeout]);
19 | }
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["DOM", "DOM.Iterable", "ESNext"],
 6 |     "allowJs": false,
 7 |     "skipLibCheck": true,
 8 |     "esModuleInterop": false,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "strict": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "module": "ESNext",
13 |     "moduleResolution": "Node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "noEmit": true,
17 |     "jsx": "react-jsx"
18 |   },
19 |   "include": ["src"],
20 |   "references": [{ "path": "./tsconfig.node.json" }]
21 | }
22 | 


--------------------------------------------------------------------------------
/src/utils/debounce.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | export function useDebouncedEffect(
 4 |   callback: () => void,
 5 |   timeout: number,
 6 |   deps: any[]
 7 | ): boolean {
 8 |   const [isWaiting, setIsWaiting] = useState(false);
 9 | 
10 |   useEffect(() => {
11 |     setIsWaiting(true);
12 | 
13 |     const handler = setTimeout(() => {
14 |       callback();
15 | 
16 |       setIsWaiting(false);
17 |     }, timeout);
18 | 
19 |     // This line is secret sauce: cancel the
20 |     // timeout if the effect gets triggered again.
21 |     return () => clearTimeout(handler);
22 |   }, [timeout, ...deps]);
23 | 
24 |   return isWaiting; // Useful for showing loading animations, etc.
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/utils/APIKeyInput.tsx:
--------------------------------------------------------------------------------
 1 | import { BoxProps } from "@chakra-ui/react";
 2 | import { LabeledPasswordInputWithLink } from "./LabeledInputs";
 3 | 
 4 | export function APIKeyInput({
 5 |   apiKey,
 6 |   setApiKey,
 7 |   ...others
 8 | }: {
 9 |   apiKey: string | null;
10 |   setApiKey: (apiKey: string) => void;
11 | } & BoxProps) {
12 |   return (
13 |     <LabeledPasswordInputWithLink
14 |       width="80%"
15 |       label="OpenAI API Key"
16 |       linkLabel="Get a key"
17 |       placeholder="sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
18 |       link="https://platform.openai.com/account/api-keys"
19 |       value={apiKey ?? ""}
20 |       setValue={setApiKey}
21 |       {...others}
22 |     />
23 |   );
24 | }
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 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import ReactDOM from "react-dom/client";
 4 | 
 5 | import { ReactFlowProvider } from "reactflow";
 6 | 
 7 | import { ChakraProvider } from "@chakra-ui/react";
 8 | 
 9 | import mixpanel from "mixpanel-browser";
10 | 
11 | import App from "./components/App";
12 | 
13 | import "./index.css";
14 | 
15 | export const MIXPANEL_TOKEN = import.meta.env.VITE_MIXPANEL_TOKEN;
16 | 
17 | if (MIXPANEL_TOKEN) mixpanel.init(MIXPANEL_TOKEN);
18 | 
19 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
20 |   <React.StrictMode>
21 |     <ReactFlowProvider>
22 |       <ChakraProvider>
23 |         <App />
24 |       </ChakraProvider>
25 |     </ReactFlowProvider>
26 |   </React.StrictMode>
27 | );
28 | 


--------------------------------------------------------------------------------
/src/utils/lstore.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | 
 3 | export function readLocalStorage<T>(key: string): T | null {
 4 |   const storedValue = localStorage.getItem(key);
 5 |   return storedValue ? JSON.parse(storedValue) : null;
 6 | }
 7 | 
 8 | export function writeLocalStorage(key: string, value: any) {
 9 |   localStorage.setItem(key, JSON.stringify(value));
10 | }
11 | 
12 | export function useLocalStorage<T>(
13 |   key: string
14 | ): [T | null, React.Dispatch<React.SetStateAction<T | null>>] {
15 |   const [value, setValue] = useState<T | null>(() => readLocalStorage(key));
16 | 
17 |   useEffect(() => setValue(readLocalStorage(key)), [key]);
18 | 
19 |   useEffect(() => writeLocalStorage(key, value), [key, value]);
20 | 
21 |   return [value, setValue];
22 | }
23 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |     <title>Flux</title>
 9 | 
10 |     <meta name="description" content="LLM power tool." />
11 | 
12 |     <meta property="og:title" content="Flux" />
13 |     <meta property="og:url" content="https://flux.paradigm.xyz" />
14 |     <meta property="og:image" content="https://flux.paradigm.xyz/meta.jpg" />
15 |     <meta property="og:description" content="LLM power tool." />
16 |     <meta property="og:type" content="website" />
17 | 
18 |     <meta name="twitter:card" content="summary_large_image" />
19 |     <meta name="twitter:title" content="Flux" />
20 |     <meta name="twitter:description" content="LLM power tool." />
21 |     <meta name="twitter:image" content="https://flux.paradigm.xyz/meta.jpg" />
22 |   </head>
23 |   <body>
24 |     <div id="root"></div>
25 |     <script type="module" src="/src/main.tsx"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/src/utils/types.ts:
--------------------------------------------------------------------------------
 1 | import { Node, Edge } from "reactflow";
 2 | 
 3 | import { ChatCompletionResponseMessage } from "openai-streams";
 4 | 
 5 | export type FluxNodeData = {
 6 |   label: string;
 7 |   fluxNodeType: FluxNodeType;
 8 |   text: string;
 9 |   generating: boolean;
10 | };
11 | 
12 | export enum FluxNodeType {
13 |   System = "System",
14 |   User = "User",
15 |   GPT = "GPT",
16 |   TweakedGPT = "GPT (tweaked)",
17 | }
18 | 
19 | export type Settings = {
20 |   defaultPreamble: string;
21 |   autoZoom: boolean;
22 |   model: string;
23 |   temp: number;
24 |   n: number;
25 | };
26 | 
27 | export enum ReactFlowNodeTypes {
28 |   LabelUpdater = "LabelUpdater",
29 | }
30 | 
31 | // The stream response is weird and has a delta instead of message field.
32 | export interface CreateChatCompletionStreamResponseChoicesInner {
33 |   index?: number;
34 |   delta?: ChatCompletionResponseMessage;
35 |   finish_reason?: string;
36 | }
37 | 
38 | export type HistoryItem = {
39 |   nodes: Node[];
40 |   edges: Edge[];
41 |   selectedNodeId: string | null;
42 |   lastSelectedNodeId: string | null;
43 | };
44 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/src/utils/color.ts:
--------------------------------------------------------------------------------
 1 | import { FluxNodeType } from "./types";
 2 | 
 3 | export function adjustColor(color: string, amount: number) {
 4 |   return (
 5 |     "#" +
 6 |     color
 7 |       .replace(/^#/, "")
 8 |       .replace(/../g, (color) =>
 9 |         (
10 |           "0" + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)
11 |         ).substr(-2)
12 |       )
13 |   );
14 | }
15 | 
16 | export function getFluxNodeTypeColor(fluxNodeType: FluxNodeType) {
17 |   switch (fluxNodeType) {
18 |     case FluxNodeType.User:
19 |       return "#EEEEEE";
20 |     case FluxNodeType.GPT:
21 |       return "#d9f3d6";
22 |     case FluxNodeType.TweakedGPT:
23 |       return "#f7d0a1";
24 |     case FluxNodeType.System:
25 |       return "#C5E2F6";
26 |   }
27 | }
28 | 
29 | export function getFluxNodeTypeDarkColor(fluxNodeType: FluxNodeType) {
30 |   switch (fluxNodeType) {
31 |     case FluxNodeType.User:
32 |       return "#A9ABAE";
33 |     case FluxNodeType.GPT:
34 |       return "#619F83";
35 |     case FluxNodeType.TweakedGPT:
36 |       return "#CB7937";
37 |     case FluxNodeType.System:
38 |       return "#5F8AF7";
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/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 |     "fast-deep-equal": "^3.1.3",
17 |     "framer-motion": "^9.0.4",
18 |     "mixpanel-browser": "^2.46.0",
19 |     "openai": "^3.1.0",
20 |     "openai-streams": "^4.2.0",
21 |     "re-resizable": "^6.9.9",
22 |     "react": "^18.2.0",
23 |     "react-beforeunload": "^2.5.3",
24 |     "react-dom": "^18.2.0",
25 |     "react-hotkeys-hook": "^4.3.7",
26 |     "react-syntax-highlighter": "^15.5.0",
27 |     "react-textarea-autosize": "^8.4.0",
28 |     "reactflow": "^11.5.6",
29 |     "yield-stream": "^2.3.0"
30 |   },
31 |   "devDependencies": {
32 |     "@types/mixpanel-browser": "^2.38.1",
33 |     "@types/node": "^18.14.2",
34 |     "@types/react": "^18.0.27",
35 |     "@types/react-beforeunload": "^2.1.1",
36 |     "@types/react-dom": "^18.0.10",
37 |     "@types/react-syntax-highlighter": "^15.5.6",
38 |     "@vitejs/plugin-react-swc": "^3.0.0",
39 |     "typescript": "^4.9.3",
40 |     "vite": "^4.1.0"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/utils/fluxEdge.ts:
--------------------------------------------------------------------------------
 1 | import { Edge } from "reactflow";
 2 | 
 3 | /*//////////////////////////////////////////////////////////////
 4 |                           CONSTRUCTORS
 5 | //////////////////////////////////////////////////////////////*/
 6 | 
 7 | export function newFluxEdge({
 8 |   source,
 9 |   target,
10 |   animated,
11 | }: {
12 |   source: string;
13 |   target: string;
14 |   animated: boolean;
15 | }): Edge {
16 |   return {
17 |     id: `${source}-${target}`,
18 |     source,
19 |     target,
20 |     animated,
21 |   };
22 | }
23 | 
24 | /*//////////////////////////////////////////////////////////////
25 |                           TRANSFORMERS
26 | //////////////////////////////////////////////////////////////*/
27 | 
28 | export function addFluxEdge(
29 |   existingEdges: Edge[],
30 |   { source, target, animated }: { source: string; target: string; animated: boolean }
31 | ): Edge[] {
32 |   const newEdge = newFluxEdge({ source, target, animated });
33 | 
34 |   return [...existingEdges, newEdge];
35 | }
36 | 
37 | export function modifyFluxEdge(
38 |   existingEdges: Edge[],
39 |   { source, target, animated }: { source: string; target: string; animated: boolean }
40 | ): Edge[] {
41 |   return existingEdges.map((edge) => {
42 |     if (edge.id !== `${source}-${target}`) return edge;
43 | 
44 |     const copy = { ...edge };
45 | 
46 |     copy.animated = animated;
47 | 
48 |     return copy;
49 |   });
50 | }
51 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <h1 align="center">Flux</h1>
 3 |   <p align="center">
 4 |     LLM power tool
 5 |     <br />
 6 |     <br />
 7 |     <a href="https://twitter.com/transmissions11/status/1640775967856803840">Announcement</a>
 8 |     ·
 9 |     <a href="http://flux.paradigm.xyz">Try Online</a>
10 |     ·
11 |     <a href="https://github.com/transmissions11/flux/issues">Report a Bug</a>
12 |   </p>
13 | </div>
14 | 
15 | <br />
16 | 
17 | ![A screenshot of a Flux workspace.](/public/meta-full.png)
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/transmissions11/flux.git
41 | npm install
42 | npm run dev
43 | ```
44 | 
45 | ## Contributing
46 | 
47 | See the [open issues](https://github.com/transmissions11/flux/issues) for a list of proposed features (and known issues).
48 | 


--------------------------------------------------------------------------------
/src/components/modals/APIKeyModal.tsx:
--------------------------------------------------------------------------------
 1 | import mixpanel from "mixpanel-browser";
 2 | 
 3 | import { Modal, ModalOverlay, ModalContent, Link, Text } from "@chakra-ui/react";
 4 | 
 5 | import { MIXPANEL_TOKEN } from "../../main";
 6 | 
 7 | import { Column } from "../../utils/chakra";
 8 | import { isValidAPIKey } from "../../utils/apikey";
 9 | import { APIKeyInput } from "../utils/APIKeyInput";
10 | 
11 | export function APIKeyModal({
12 |   apiKey,
13 |   setApiKey,
14 | }: {
15 |   apiKey: string | null;
16 |   setApiKey: (apiKey: string) => void;
17 | }) {
18 |   const setApiKeyTracked = (apiKey: string) => {
19 |     setApiKey(apiKey);
20 | 
21 |     if (isValidAPIKey(apiKey)) {
22 |       if (MIXPANEL_TOKEN) mixpanel.track("Entered API Key");
23 | 
24 |       // Hacky way to get the prompt box to focus after the
25 |       // modal closes. Long term should probably use a ref.
26 |       setTimeout(() => window.document.getElementById("promptBox")?.focus(), 50);
27 |     }
28 |   };
29 | 
30 |   return (
31 |     <Modal
32 |       isOpen={true}
33 |       onClose={() => {}}
34 |       size="3xl"
35 |       isCentered={true}
36 |       motionPreset="none"
37 |     >
38 |       <ModalOverlay />
39 |       <ModalContent>
40 |         <Column mainAxisAlignment="center" crossAxisAlignment="center" height="500px">
41 |           <APIKeyInput apiKey={apiKey} setApiKey={setApiKeyTracked} />
42 |           <Text mt={5} width="80%" textAlign="center" fontSize="md">
43 |             We will <u>never</u> upload, log, or store your API key outside of your
44 |             browser's local storage. Verify for yourself{" "}
45 |             <Link href="https://github.com/transmissions11/flux" color="green" isExternal>
46 |               here
47 |             </Link>
48 |             .
49 |           </Text>
50 |         </Column>
51 |       </ModalContent>
52 |     </Modal>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/src/utils/constants.ts:
--------------------------------------------------------------------------------
 1 | import { UseToastOptions } from "@chakra-ui/toast";
 2 | 
 3 | import { Options } from "react-hotkeys-hook";
 4 | 
 5 | import { NodeProps } from "reactflow";
 6 | 
 7 | import { ReactFlowNodeTypes, Settings } from "./types";
 8 | 
 9 | import { LabelUpdaterNode } from "../components/nodes/LabelUpdaterNode";
10 | 
11 | export const REACT_FLOW_NODE_TYPES: Record<
12 |   ReactFlowNodeTypes,
13 |   (args: NodeProps) => JSX.Element
14 | > = {
15 |   LabelUpdater: LabelUpdaterNode,
16 | };
17 | 
18 | export const SUPPORTED_MODELS = ["gpt-3.5-turbo", "gpt-4"];
19 | 
20 | export const DEFAULT_SETTINGS: Settings = {
21 |   temp: 1.2,
22 |   n: 3,
23 |   autoZoom: true,
24 |   model: "gpt-3.5-turbo",
25 |   defaultPreamble: `You are ChatGPT, a large language model trained by OpenAI. Answer as concisely as possible. Knowledge cutoff: 2021-09 Current date: ${
26 |     new Date().toISOString().split("T")[0]
27 |   }`,
28 | };
29 | 
30 | export const HOTKEY_CONFIG: Options = {
31 |   preventDefault: true,
32 |   enableOnFormTags: true,
33 | };
34 | 
35 | export const TOAST_CONFIG: UseToastOptions = {
36 |   isClosable: true,
37 |   variant: "left-accent",
38 |   position: "bottom-left",
39 | };
40 | 
41 | export const MAX_HISTORY_SIZE = 256;
42 | 
43 | export const OVERLAP_RANDOMNESS_MAX = 20;
44 | 
45 | export const API_KEY_LOCAL_STORAGE_KEY = "FLUX_OPENAI_API_KEY";
46 | export const REACT_FLOW_LOCAL_STORAGE_KEY = "FLUX_REACT_FLOW_DATA";
47 | export const MODEL_SETTINGS_LOCAL_STORAGE_KEY = "FLUX_MODEL_SETTINGS";
48 | 
49 | export const NEW_TREE_CONTENT_QUERY_PARAM = "newTreeWith";
50 | 
51 | export const UNDEFINED_RESPONSE_STRING = "[UNDEFINED RESPONSE]";
52 | 
53 | export const FIT_VIEW_SETTINGS = { padding: 0.1, duration: 200 };
54 | 
55 | export const NEW_TREE_X_OFFSET = 600;
56 | 
57 | export const CODE_BLOCK_DETECT_REGEX =
58 |   /\s*(```(?:[a-zA-Z0-9-]*\n|\n?)([\s\S]+?)\n```)\s*/;
59 | export const CODE_BLOCK_LANGUAGE_DETECT_REGEX = /^```[a-zA-Z0-9-]*$/m;
60 | 


--------------------------------------------------------------------------------
/src/utils/prompt.ts:
--------------------------------------------------------------------------------
 1 | import { Node } from "reactflow";
 2 | 
 3 | import { ChatCompletionRequestMessage } from "openai-streams";
 4 | 
 5 | import { FluxNodeData, FluxNodeType, Settings } from "./types";
 6 | 
 7 | export function messagesFromLineage(
 8 |   lineage: Node<FluxNodeData>[],
 9 |   settings: Settings
10 | ): ChatCompletionRequestMessage[] {
11 |   const messages: ChatCompletionRequestMessage[] = [];
12 | 
13 |   // Iterate backwards.
14 |   for (let i = lineage.length - 1; i >= 0; i--) {
15 |     const node = lineage[i];
16 | 
17 |     if (node.data.fluxNodeType === FluxNodeType.System) {
18 |       messages.push({
19 |         role: "system",
20 |         content: node.data.text,
21 |       });
22 |     } else if (i === lineage.length - 1) {
23 |       // If this is the first node and it's
24 |       // not a system node, we'll push the
25 |       // default preamble on there.
26 |       messages.push({
27 |         role: "system",
28 |         content: settings.defaultPreamble,
29 |       });
30 |     }
31 | 
32 |     if (node.data.fluxNodeType === FluxNodeType.User) {
33 |       messages.push({
34 |         role: "user",
35 |         content: node.data.text,
36 |       });
37 |     } else if (
38 |       node.data.fluxNodeType === FluxNodeType.TweakedGPT ||
39 |       node.data.fluxNodeType === FluxNodeType.GPT
40 |     ) {
41 |       messages.push({
42 |         role: "assistant",
43 |         content: node.data.text,
44 |       });
45 |     }
46 |   }
47 | 
48 |   console.table(messages);
49 | 
50 |   return messages;
51 | }
52 | 
53 | export function promptFromLineage(
54 |   lineage: Node<FluxNodeData>[],
55 |   settings: Settings,
56 |   endWithNewlines: boolean = false
57 | ): string {
58 |   const messages = messagesFromLineage(lineage, settings);
59 | 
60 |   let prompt = "";
61 | 
62 |   messages.forEach((message, i) => {
63 |     prompt += `${message.role}: ${message.content}`;
64 | 
65 |     if (endWithNewlines ? true : i !== messages.length - 1) {
66 |       prompt += "\n\n";
67 |     }
68 |   });
69 | 
70 |   console.log(prompt);
71 | 
72 |   return prompt;
73 | }
74 | 


--------------------------------------------------------------------------------
/public/paradigm-full.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="44 44 575 137"><path d="M162 86.57L90 45l-9 5.2v10.39l-9-5.2-9 5.2v10.39l-9-5.2-9 5.2v83.14l9 5.2 9-5.2v10.39l9 5.2 9-5.2v10.39l9 5.2 72-41.57v-10.39l-9-5.2 9-5.2v-10.39l-9-5.2 9-5.2V86.57zm-99 57.16l-9 5.2V76.18l9 5.2v62.35zm27 5.19v-10.39l36-20.78 9 5.2-45 25.97zm27-36.37l-27 15.59V96.96l27 15.59zm9-5.2L90 86.57V76.18l45 25.98-9 5.19zM72 65.78l9 5.2v10.39l-9-5.2V65.78zm0 20.79l9 5.2v41.57l-9 5.2V86.57zm0 62.35l9-5.2v10.39l-9 5.2v-10.39zm81-15.59L90 169.7v-10.39l54-31.18 9 5.2zm0-20.78l-9 5.2-9-5.2 9-5.2 9 5.2zm-9-15.59L90 65.78V55.39l63 36.37-9 5.2z" fill="#00e100"/><path d="M199.39 148.92H189V76.18h31.7c14.55 0 23.38 8.83 23.38 21.82s-8.83 21.82-23.38 21.82h-21.3v29.1zM233.69 98c0-7.27-4.16-12.99-12.99-12.99h-21.3v25.98h21.3c8.83 0 12.99-5.72 12.99-12.99zm14.24 10.91c1.04-8.63 8.31-15.59 22.97-15.59 8.94 0 16.52 2.39 20.37 8.83 1.66 2.81 2.6 6.55 2.6 10.91v35.85h-9.98v-6.76c-3.12 4.16-9.35 8.31-18.19 8.31-11.02 0-20.37-5.72-20.37-17.67 0-9.35 6.34-16 19.85-17.15l18.71-1.56v-1.04c0-7.27-3.12-11.95-12.99-11.95-7.9 0-12.16 3.12-12.68 7.79h-10.29zm35.95 16.63v-4.16l-17.67 1.56c-7.28.62-10.91 4.16-10.91 9.87 0 7.28 5.2 9.87 11.43 9.87 9.36.01 17.15-6.23 17.15-17.14zm40.74-22.34c-7.27 0-11.95 4.16-11.95 13.51v32.22h-9.98V94.88h9.98v6.24c2.6-4.68 6.75-7.28 14.55-7.28h2.81v9.35h-5.41zm8.42 5.71c1.04-8.63 8.31-15.59 22.97-15.59 8.94 0 16.52 2.39 20.37 8.83 1.66 2.81 2.6 6.55 2.6 10.91v35.85H369v-6.76c-3.12 4.16-9.35 8.31-18.19 8.31-11.02 0-20.37-5.72-20.37-17.67 0-9.35 6.34-16 19.85-17.15l18.71-1.56v-1.04c0-7.27-3.12-11.95-12.99-11.95-7.9 0-12.16 3.12-12.68 7.79h-10.29zM369 125.54v-4.16l-17.67 1.56c-7.28.62-10.91 4.16-10.91 9.87 0 7.28 5.2 9.87 11.43 9.87 9.35.01 17.15-6.23 17.15-17.14zm59.03 16.11c-3.12 5.2-9.35 8.83-17.67 8.83-16.21 0-25.04-12.99-25.04-28.58 0-15.59 8.83-28.58 25.04-28.58 8.31 0 14.55 3.64 17.67 8.83V76.18H438v72.75h-9.98v-7.28zm-16.11-40.01c-10.91 0-16.63 8.83-16.63 20.26 0 11.43 5.72 20.27 16.63 20.27s16.63-9.35 16.63-20.27c0-10.91-5.72-20.26-16.63-20.26zm64.54 38.97v8.31h-32.01v-8.31h11.02V103.2h-11.02v-8.31h20.99v45.73h11.02zm-11.02-54.04h-9.98V76.18h9.98v10.39zm53 54.04c-2.08 3.12-7.79 7.79-17.15 7.79-15.17 0-25.04-12.47-25.04-27.54s9.87-27.54 25.04-27.54c9.35 0 15.07 4.68 17.15 7.79v-6.24h9.98v48.32c0 17.15-9.87 25.98-25.57 25.98-12.06 0-20.89-6.24-22.97-15.59h10.39c.94 3.74 4.78 7.79 12.57 7.79 11.43 0 15.59-7.27 15.59-18.19v-2.57zm-16.1-38.97c-9.87 0-16.11 8.83-16.11 19.23 0 10.39 6.23 19.23 16.11 19.23 10.39 0 16.63-8.83 16.63-19.23-.01-10.4-6.24-19.23-16.63-19.23zm45.2-.52c3.12-5.72 9.35-7.79 15.59-7.79 7.27 0 14.03 3.12 17.15 9.35 3.12-5.72 8.83-9.35 18.19-9.35 11.43 0 19.75 6.76 19.75 20.26v35.33h-9.98v-33.77c0-8.83-3.64-13.51-11.85-13.51-6.76 0-13.51 4.16-13.51 15.07v32.22h-9.98v-33.77c0-8.83-3.64-13.51-11.85-13.51-6.76 0-13.51 4.16-13.51 15.07v32.22h-9.98V94.88h9.98v6.24z"/></svg>


--------------------------------------------------------------------------------
/src/components/nodes/LabelUpdaterNode.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | import { Box, Input } from "@chakra-ui/react";
 4 | 
 5 | import { Handle, Position, useReactFlow } from "reactflow";
 6 | 
 7 | import { Row } from "../../utils/chakra";
 8 | import { FluxNodeData } from "../../utils/types";
 9 | import { modifyFluxNodeLabel, modifyReactFlowNodeProperties } from "../../utils/fluxNode";
10 | 
11 | export function LabelUpdaterNode({
12 |   id,
13 |   data,
14 |   isConnectable,
15 | }: {
16 |   id: string;
17 |   data: FluxNodeData;
18 |   isConnectable: boolean;
19 | }) {
20 |   const { setNodes } = useReactFlow();
21 | 
22 |   const [renameLabel, setRenameLabel] = useState(data.label);
23 | 
24 |   // Select the input element on mount.
25 |   useEffect(() => {
26 |     const input = document.getElementById("renameInput") as HTMLInputElement | null;
27 | 
28 |     // Have to do this with a bit of a delay to
29 |     // ensure it works when triggered via navbar.
30 |     setTimeout(() => input?.select(), 50);
31 |   }, []);
32 | 
33 |   const cancel = () => {
34 |     setNodes((nodes) =>
35 |       // Reset the node type to the default
36 |       // type and make it draggable again.
37 |       modifyReactFlowNodeProperties(nodes, {
38 |         id,
39 |         type: undefined,
40 |         draggable: true,
41 |       })
42 |     );
43 |   };
44 | 
45 |   const submit = () => {
46 |     setNodes((nodes) =>
47 |       modifyFluxNodeLabel(nodes, {
48 |         id,
49 |         label: renameLabel,
50 |       })
51 |     );
52 |   };
53 | 
54 |   return (
55 |     <Box width="150px" height="38px">
56 |       <Handle type="target" position={Position.Top} isConnectable={isConnectable} />
57 | 
58 |       <Row mainAxisAlignment="center" crossAxisAlignment="center" height="100%" px={2}>
59 |         <Input
60 |           onBlur={cancel}
61 |           id="renameInput"
62 |           value={renameLabel}
63 |           onChange={(e: any) => setRenameLabel(e.target.value)}
64 |           onKeyDown={(e) => e.key === "Enter" && submit()}
65 |           className="nodrag" // https://reactflow.dev/docs/api/nodes/custom-nodes/#prevent-dragging--selecting
66 |           textAlign="center"
67 |           size="xs"
68 |           // px={6}
69 |         />
70 | 
71 |         {/* <Row
72 |           mainAxisAlignment="center"
73 |           crossAxisAlignment="center"
74 |           position="absolute"
75 |           top={0}
76 |           right="14px"
77 |           height="100%"
78 |           zIndex={1}
79 |         >
80 |           <CloseIcon
81 |             rounded="sm"
82 |             p={1}
83 |             cursor="pointer"
84 |             _hover={{ backgroundColor: "none" }}
85 |             onClick={cancel}
86 |           />
87 |         </Row> */}
88 |       </Row>
89 | 
90 |       <Handle type="source" position={Position.Bottom} isConnectable={isConnectable} />
91 |     </Box>
92 |   );
93 | }
94 | 


--------------------------------------------------------------------------------
/src/components/utils/TextAndCodeBlock.tsx:
--------------------------------------------------------------------------------
  1 | import { MouseEvent, useState, useEffect, memo } from "react";
  2 | 
  3 | import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
  4 | import { coy } from "react-syntax-highlighter/dist/esm/styles/prism";
  5 | 
  6 | import { Button, Box, Text } from "@chakra-ui/react";
  7 | 
  8 | import { CopyIcon } from "@chakra-ui/icons";
  9 | 
 10 | import {
 11 |   CODE_BLOCK_DETECT_REGEX,
 12 |   CODE_BLOCK_LANGUAGE_DETECT_REGEX,
 13 | } from "../../utils/constants";
 14 | import { Row } from "../../utils/chakra";
 15 | import { copySnippetToClipboard } from "../../utils/clipboard";
 16 | 
 17 | const CopyCodeButton = ({ code }: { code: string }) => {
 18 |   const [copied, setCopied] = useState(false);
 19 | 
 20 |   const handleCopyButtonClick = async (e: MouseEvent) => {
 21 |     e.stopPropagation(); // Prevent this from triggering edit mode in the parent.
 22 | 
 23 |     if (await copySnippetToClipboard(code)) setCopied(true);
 24 |   };
 25 | 
 26 |   useEffect(() => {
 27 |     if (copied) {
 28 |       const timer = setTimeout(() => setCopied(false), 2000);
 29 |       return () => clearTimeout(timer);
 30 |     }
 31 |   }, [copied]);
 32 | 
 33 |   return (
 34 |     <Button
 35 |       onClick={handleCopyButtonClick}
 36 |       size="xs"
 37 |       variant="ghost"
 38 |       px="5px"
 39 |       _hover={{ background: "#EEEEEE" }}
 40 |     >
 41 |       <CopyIcon boxSize={4} mr={1} /> {copied ? "Copied!" : "Copy Code"}
 42 |     </Button>
 43 |   );
 44 | };
 45 | 
 46 | const TitleBar = ({ language, code }: { language?: string; code: string }) => {
 47 |   return (
 48 |     <Row
 49 |       mainAxisAlignment="flex-start"
 50 |       crossAxisAlignment="stretch"
 51 |       expand
 52 |       justifyContent="space-between"
 53 |       alignItems="center"
 54 |       px="10px"
 55 |       py="5px"
 56 |       backgroundColor="#f5f5f5"
 57 |       borderBottom="1px solid #eee"
 58 |       borderRadius="6px"
 59 |     >
 60 |       <Box>{language || "plaintext"}</Box>
 61 |       <CopyCodeButton code={code} />
 62 |     </Row>
 63 |   );
 64 | };
 65 | 
 66 | export const TextAndCodeBlock = memo(({ text }: { text: string }) => {
 67 |   let remainingText = text;
 68 | 
 69 |   const elements: React.ReactNode[] = [];
 70 | 
 71 |   while (remainingText.length > 0) {
 72 |     const match = CODE_BLOCK_DETECT_REGEX.exec(remainingText);
 73 | 
 74 |     if (!match) {
 75 |       elements.push(<Text key={elements.length}>{remainingText}</Text>);
 76 |       break;
 77 |     }
 78 | 
 79 |     const before = remainingText.substring(0, match.index);
 80 |     const language =
 81 |       CODE_BLOCK_LANGUAGE_DETECT_REGEX.exec(match[1])?.[0]?.substring(3) || "plaintext";
 82 |     const code = match[2].trim();
 83 |     const after = remainingText.substring(match.index + match[0].length);
 84 | 
 85 |     if (before.length > 0)
 86 |       elements.push(
 87 |         <Text key={elements.length} mb={4}>
 88 |           {before}
 89 |         </Text>
 90 |       );
 91 | 
 92 |     elements.push(
 93 |       <Box key={elements.length} borderRadius="4px" overflow="hidden">
 94 |         <TitleBar language={language} code={code} />
 95 |         <SyntaxHighlighter
 96 |           language={language}
 97 |           wrapLongLines
 98 |           style={coy}
 99 |           codeTagProps={{ style: { wordBreak: "break-word" } }}
100 |           customStyle={{ padding: "10px", margin: "0px", borderRadius: "0 0 4px 4px" }}
101 |         >
102 |           {code}
103 |         </SyntaxHighlighter>
104 |       </Box>
105 |     );
106 | 
107 |     remainingText = after;
108 |   }
109 | 
110 |   return <Box width="100%">{elements}</Box>;
111 | });
112 | 


--------------------------------------------------------------------------------
/src/components/modals/SettingsModal.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | 
  3 | import {
  4 |   Button,
  5 |   Text,
  6 |   Modal,
  7 |   ModalBody,
  8 |   ModalCloseButton,
  9 |   ModalContent,
 10 |   ModalFooter,
 11 |   ModalHeader,
 12 |   ModalOverlay,
 13 |   Checkbox,
 14 | } from "@chakra-ui/react";
 15 | 
 16 | import { LabeledSelect, LabeledSlider } from "../utils/LabeledInputs";
 17 | 
 18 | import { APIKeyInput } from "../utils/APIKeyInput";
 19 | import { Settings, FluxNodeType } from "../../utils/types";
 20 | import { getFluxNodeTypeDarkColor } from "../../utils/color";
 21 | import { DEFAULT_SETTINGS, SUPPORTED_MODELS } from "../../utils/constants";
 22 | 
 23 | export const SettingsModal = React.memo(function SettingsModal({
 24 |   isOpen,
 25 |   onClose,
 26 |   settings,
 27 |   setSettings,
 28 |   apiKey,
 29 |   setApiKey,
 30 | }: {
 31 |   isOpen: boolean;
 32 |   onClose: () => void;
 33 |   settings: Settings;
 34 |   setSettings: (settings: Settings) => void;
 35 |   apiKey: string | null;
 36 |   setApiKey: (apiKey: string) => void;
 37 | }) {
 38 |   const reset = () =>
 39 |     confirm(
 40 |       "Are you sure you want to reset your settings to default? This cannot be undone!"
 41 |     ) && setSettings(DEFAULT_SETTINGS);
 42 | 
 43 |   const hardReset = () => {
 44 |     if (
 45 |       confirm(
 46 |         "Are you sure you want to delete ALL data (including your saved API key, conversations, etc?) This cannot be undone!"
 47 |       ) &&
 48 |       confirm(
 49 |         "Are you 100% sure? Reminder this cannot be undone and you will lose EVERYTHING!"
 50 |       )
 51 |     ) {
 52 |       // Clear local storage.
 53 |       localStorage.clear();
 54 | 
 55 |       // Ensure that the page is reloaded even if there are unsaved changes.
 56 |       window.onbeforeunload = null;
 57 | 
 58 |       // Reload the window.
 59 |       window.location.reload();
 60 |     }
 61 |   };
 62 | 
 63 |   return (
 64 |     <Modal isOpen={isOpen} onClose={onClose} size="2xl">
 65 |       <ModalOverlay />
 66 |       <ModalContent>
 67 |         <ModalHeader>Settings</ModalHeader>
 68 |         <ModalCloseButton />
 69 |         <ModalBody>
 70 |           <LabeledSelect
 71 |             label="Model"
 72 |             value={settings.model}
 73 |             options={SUPPORTED_MODELS}
 74 |             setValue={(v) => setSettings({ ...settings, model: v })}
 75 |           />
 76 | 
 77 |           <APIKeyInput mt={4} width="100%" apiKey={apiKey} setApiKey={setApiKey} />
 78 | 
 79 |           <LabeledSlider
 80 |             mt={4}
 81 |             label="Temperature (randomness)"
 82 |             value={settings.temp}
 83 |             setValue={(v) => setSettings({ ...settings, temp: v })}
 84 |             color={getFluxNodeTypeDarkColor(FluxNodeType.User)}
 85 |             max={1.25}
 86 |             min={0}
 87 |             step={0.01}
 88 |           />
 89 | 
 90 |           <LabeledSlider
 91 |             mt={3}
 92 |             label="Number of Responses"
 93 |             value={settings.n}
 94 |             setValue={(v) => setSettings({ ...settings, n: v })}
 95 |             color={getFluxNodeTypeDarkColor(FluxNodeType.User)}
 96 |             max={10}
 97 |             min={1}
 98 |             step={1}
 99 |           />
100 | 
101 |           <Checkbox
102 |             mt={3}
103 |             fontWeight="bold"
104 |             isChecked={settings.autoZoom}
105 |             colorScheme="gray"
106 |             onChange={(event) =>
107 |               setSettings({ ...settings, autoZoom: event.target.checked })
108 |             }
109 |           >
110 |             Auto Zoom
111 |           </Checkbox>
112 |         </ModalBody>
113 | 
114 |         <ModalFooter>
115 |           <Button mb={2} onClick={reset} mr={3} color="orange">
116 |             Restore Defaults
117 |           </Button>
118 | 
119 |           <Button mb={2} onClick={hardReset} mr="auto" color="red">
120 |             Hard Reset
121 |           </Button>
122 |         </ModalFooter>
123 |       </ModalContent>
124 |     </Modal>
125 |   );
126 | });
127 | 


--------------------------------------------------------------------------------
/src/components/utils/LabeledInputs.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | 
  3 | import {
  4 |   Box,
  5 |   BoxProps,
  6 |   Button,
  7 |   Input,
  8 |   InputGroup,
  9 |   InputRightElement,
 10 |   Link,
 11 |   Select,
 12 |   Slider,
 13 |   SliderFilledTrack,
 14 |   SliderThumb,
 15 |   SliderTrack,
 16 |   Textarea,
 17 | } from "@chakra-ui/react";
 18 | import { Row } from "../../utils/chakra";
 19 | import { ExternalLinkIcon } from "@chakra-ui/icons";
 20 | 
 21 | export function LabeledSlider({
 22 |   label,
 23 |   value,
 24 |   setValue,
 25 |   color,
 26 |   max,
 27 |   min,
 28 |   step,
 29 |   ...others
 30 | }: {
 31 |   label: string;
 32 |   value: number;
 33 |   setValue: (value: number) => void;
 34 |   color: string;
 35 |   max: number;
 36 |   min: number;
 37 |   step: number;
 38 | } & BoxProps) {
 39 |   return (
 40 |     <Box {...others}>
 41 |       <b>{label}:</b> {value}
 42 |       <Slider
 43 |         mx="2px"
 44 |         aria-label="temp-slider"
 45 |         value={value}
 46 |         onChange={(v) => setValue(v)}
 47 |         max={max}
 48 |         min={min}
 49 |         step={step}
 50 |       >
 51 |         <SliderTrack>
 52 |           <SliderFilledTrack bg={color} />
 53 |         </SliderTrack>
 54 | 
 55 |         <SliderThumb />
 56 |       </Slider>
 57 |     </Box>
 58 |   );
 59 | }
 60 | 
 61 | export function LabeledInput({
 62 |   label,
 63 |   value,
 64 |   setValue,
 65 |   ...others
 66 | }: {
 67 |   label: string;
 68 |   value: string;
 69 |   setValue: (value: string) => void;
 70 | } & BoxProps) {
 71 |   return (
 72 |     <Box {...others}>
 73 |       <b>{label}:</b>
 74 |       <Input mt={1} onChange={(e) => setValue(e.target.value)} value={value} />
 75 |     </Box>
 76 |   );
 77 | }
 78 | 
 79 | export function LabeledPasswordInputWithLink({
 80 |   label,
 81 |   linkLabel,
 82 |   placeholder,
 83 |   link,
 84 |   value,
 85 |   setValue,
 86 |   ...others
 87 | }: {
 88 |   label: string;
 89 |   linkLabel: string;
 90 |   placeholder?: string;
 91 |   link: string;
 92 |   value: string;
 93 |   setValue: (value: string) => void;
 94 | } & BoxProps) {
 95 |   const [show, setShow] = useState(false);
 96 | 
 97 |   return (
 98 |     <Box {...others}>
 99 |       <Row mainAxisAlignment="space-between" crossAxisAlignment="center">
100 |         <b>{label}:</b>
101 |         <Link
102 |           _focus={{ boxShadow: "none" }}
103 |           href={link}
104 |           isExternal
105 |           fontSize="sm"
106 |           color="green"
107 |         >
108 |           {linkLabel}
109 |           <ExternalLinkIcon ml="5px" mb="3px" />
110 |         </Link>
111 |       </Row>
112 |       <InputGroup size="md" borderBottom="0px" borderColor="#EEF2F6" mt={1}>
113 |         <Input
114 |           type={show ? "text" : "password"}
115 |           value={value}
116 |           placeholder={placeholder}
117 |           onChange={(e) => setValue(e.target.value)}
118 |         />
119 |         <InputRightElement width="auto">
120 |           <Button
121 |             width="55px"
122 |             h="1.75rem"
123 |             size="sm"
124 |             bgColor="#EEEEEE"
125 |             mr="6px"
126 |             onClick={() => setShow(!show)}
127 |           >
128 |             {show ? "Hide" : "Show"}
129 |           </Button>
130 |         </InputRightElement>
131 |       </InputGroup>
132 |     </Box>
133 |   );
134 | }
135 | 
136 | export function LabeledTextArea({
137 |   label,
138 |   value,
139 |   setValue,
140 |   textAreaId,
141 |   ...others
142 | }: {
143 |   label: string;
144 |   value: string;
145 |   textAreaId: string | undefined;
146 |   setValue: (value: string) => void;
147 | } & BoxProps) {
148 |   return (
149 |     <Box {...others} whiteSpace="pre-wrap">
150 |       <b>{label}:</b>
151 |       <Textarea
152 |         mt={3}
153 |         height="150px"
154 |         onChange={(e) => setValue(e.target.value)}
155 |         value={value}
156 |         id={textAreaId}
157 |         placeholder="Enter text here..."
158 |       />
159 |     </Box>
160 |   );
161 | }
162 | 
163 | export function SelfSelectingLabeledTextArea({
164 |   label,
165 |   value,
166 |   setValue,
167 |   id,
168 |   ...others
169 | }: {
170 |   label: string;
171 |   value: string;
172 |   id: string;
173 |   setValue: (value: string) => void;
174 | } & BoxProps) {
175 |   useEffect(
176 |     () => (window.document.getElementById(id) as HTMLTextAreaElement | null)?.select(),
177 |     []
178 |   );
179 | 
180 |   return (
181 |     <LabeledTextArea
182 |       {...others}
183 |       label={label}
184 |       value={value}
185 |       setValue={setValue}
186 |       textAreaId={id}
187 |     />
188 |   );
189 | }
190 | 
191 | export function LabeledSelect({
192 |   label,
193 |   value,
194 |   setValue,
195 |   options,
196 |   ...others
197 | }: {
198 |   label: string;
199 |   value: string;
200 |   options: string[];
201 |   setValue: (value: string) => void;
202 | } & BoxProps) {
203 |   return (
204 |     <Box {...others}>
205 |       <b>{label}:</b>
206 |       <Select mt={2} onChange={(e) => setValue(e.target.value)} value={value}>
207 |         {options.map((o) => (
208 |           <option key={o}>{o}</option>
209 |         ))}
210 |       </Select>
211 |     </Box>
212 |   );
213 | }
214 | 


--------------------------------------------------------------------------------
/public/paradigm.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013
 9 | </metadata>
10 | <g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
11 | fill="#00e100" stroke="none">
12 | <path d="M2095 4793 c-49 -30 -99 -58 -110 -63 -20 -10 -39 -22 -85 -52 l-25
13 | -16 0 -176 c0 -97 -1 -176 -3 -176 -6 0 -120 64 -212 119 -47 28 -90 51 -96
14 | 51 -7 0 -80 -39 -163 -87 l-151 -88 0 -177 c0 -98 -3 -178 -6 -178 -3 0 -63
15 | 34 -133 74 -191 112 -164 108 -273 43 -165 -97 -183 -108 -200 -114 -17 -5
16 | -18 -83 -18 -1454 0 -812 4 -1449 9 -1449 4 0 57 -29 117 -64 60 -36 128 -75
17 | 151 -87 l41 -22 116 67 c64 36 121 66 126 66 6 0 10 4 10 8 0 8 43 32 55 32 3
18 | 0 5 -80 5 -178 l0 -178 56 -32 c31 -18 60 -32 64 -32 5 0 10 -3 12 -7 3 -8 69
19 | -47 144 -85 l41 -21 150 87 c82 47 152 86 154 86 3 0 4 -80 4 -177 l0 -178
20 | 155 -91 c128 -75 158 -89 175 -81 11 6 22 13 25 16 3 3 21 14 40 25 60 32 119
21 | 66 303 173 98 56 181 103 184 103 4 0 14 6 22 14 9 7 43 28 76 45 32 18 72 42
22 | 87 52 15 11 28 18 28 14 0 -3 6 -1 13 5 11 10 385 228 417 243 8 4 29 15 45
23 | 26 32 19 123 72 385 223 91 52 224 129 297 171 72 42 147 85 167 96 40 23 103
24 | 60 131 79 11 6 27 15 35 19 8 4 59 33 113 65 54 32 103 58 108 58 5 0 9 79 9
25 | 184 l0 183 -82 49 c-46 27 -87 51 -91 53 -5 2 -38 20 -74 41 -64 38 -65 38
26 | -41 53 25 16 133 79 188 109 19 11 50 29 68 40 l32 20 0 178 0 179 -102 60
27 | c-57 33 -108 64 -115 70 -7 6 -19 11 -26 11 -8 0 -20 7 -27 15 -7 8 -19 15
28 | -28 15 -13 0 -12 3 3 20 10 11 22 20 26 20 4 0 66 34 138 76 l131 76 0 184 c0
29 | 101 -4 184 -8 184 -5 0 -103 55 -218 121 -115 67 -225 131 -244 141 -19 11
30 | -39 24 -45 28 -5 4 -35 21 -65 37 -30 17 -111 63 -180 103 -69 40 -244 141
31 | -390 225 -146 84 -331 191 -411 237 -80 47 -152 88 -160 91 -8 4 -27 15 -44
32 | 26 -16 10 -129 75 -250 144 -121 70 -227 131 -235 137 -8 5 -51 30 -95 55 -44
33 | 25 -98 56 -120 69 l-40 23 -90 -54z m125 -328 c7 -8 16 -15 21 -15 4 0 72 -38
34 | 151 -84 79 -46 235 -136 348 -201 113 -64 215 -124 227 -131 13 -8 25 -13 27
35 | -12 2 2 12 -4 22 -13 11 -9 62 -40 114 -70 52 -30 104 -59 115 -66 11 -7 27
36 | -15 35 -19 8 -4 39 -22 68 -41 29 -18 54 -33 56 -33 3 0 87 -48 188 -107 101
37 | -58 199 -115 218 -126 19 -11 49 -28 65 -38 17 -11 37 -22 45 -26 8 -4 48 -26
38 | 88 -50 40 -24 77 -43 82 -43 6 0 10 -4 10 -10 0 -5 4 -10 9 -10 5 0 47 -22 93
39 | -49 45 -27 102 -60 125 -72 33 -18 40 -25 32 -36 -6 -7 -15 -13 -19 -13 -4 0
40 | -68 -36 -141 -79 l-134 -79 -40 23 c-71 40 -90 50 -410 235 -126 73 -257 149
41 | -290 169 -33 19 -62 36 -65 36 -3 0 -17 8 -32 18 -16 9 -40 25 -55 34 -16 10
42 | -30 18 -33 18 -3 0 -45 24 -95 54 -80 47 -295 171 -393 227 -20 11 -53 30 -72
43 | 42 -19 12 -41 25 -48 28 -8 4 -87 49 -175 101 -150 86 -162 96 -167 126 -8 50
44 | 0 327 9 327 5 0 14 -7 21 -15z m-634 -354 c5 -5 29 -20 54 -33 25 -14 88 -50
45 | 140 -81 l95 -55 1 -168 c0 -166 -3 -204 -15 -187 -3 5 -72 46 -152 92 l-146
46 | 83 0 179 c0 99 3 179 7 179 3 0 10 -4 16 -9z m-535 -414 c37 -20 95 -54 130
47 | -76 l64 -38 3 -1080 c2 -857 -1 -1083 -10 -1090 -19 -16 -278 -163 -290 -166
48 | -7 -1 -10 383 -10 1248 0 688 1 1254 1 1259 1 4 11 2 24 -6 12 -8 52 -31 88
49 | -51z m1319 -39 c58 -33 125 -73 150 -88 72 -45 153 -91 173 -97 9 -3 17 -9 17
50 | -14 0 -5 5 -9 11 -9 6 0 56 -27 111 -60 54 -33 101 -60 103 -60 3 0 50 -27
51 | 106 -60 55 -33 102 -60 103 -60 5 0 382 -220 393 -230 7 -5 15 -10 18 -10 10
52 | 0 185 -102 185 -109 0 -6 -14 -14 -115 -71 -27 -15 -81 -46 -119 -69 -77 -45
53 | -63 -46 -176 21 -36 21 -72 43 -80 47 -8 5 -111 65 -229 133 -118 67 -233 134
54 | -255 147 -23 13 -60 34 -83 47 -23 13 -108 63 -190 110 -81 48 -173 101 -204
55 | 118 -31 17 -65 38 -77 46 -23 17 -24 27 -23 242 l1 128 38 -21 c20 -12 84 -48
56 | 142 -81z m-686 -328 c2 0 46 -25 97 -55 l94 -54 0 -718 c0 -697 0 -717 -19
57 | -735 -11 -10 -23 -18 -28 -18 -6 0 -88 -47 -158 -90 -84 -52 -99 -58 -104 -42
58 | -3 15 -1 1773 2 1780 1 1 27 -13 57 -33 31 -19 57 -35 59 -35z m751 -432 c99
59 | -58 191 -111 205 -119 14 -8 33 -20 43 -28 9 -8 17 -11 17 -7 0 4 12 -1 28
60 | -12 15 -10 104 -63 197 -117 209 -120 201 -114 173 -130 -13 -7 -79 -45 -148
61 | -85 -149 -87 -279 -162 -415 -240 -55 -31 -155 -89 -222 -128 l-123 -71 0 102
62 | c-1 114 -1 765 0 895 l0 84 33 -20 c17 -11 113 -67 212 -124z m1740 -284 c50
63 | -29 113 -65 142 -80 29 -15 50 -31 47 -35 -3 -5 -51 -34 -107 -66 -56 -31
64 | -104 -60 -107 -63 -3 -3 -24 -15 -46 -27 l-42 -22 -113 64 c-62 36 -117 65
65 | -121 65 -4 0 -8 3 -8 8 0 4 -13 13 -30 20 -16 8 -30 17 -30 21 0 13 295 177
66 | 310 172 8 -3 56 -28 105 -57z m-635 -355 c3 -3 10 -8 16 -10 28 -11 184 -103
67 | 184 -110 0 -8 -245 -149 -259 -149 -5 0 -11 -4 -13 -8 -3 -7 -71 -48 -199
68 | -120 -20 -11 -67 -39 -104 -61 -37 -23 -69 -41 -72 -41 -2 0 -57 -31 -121 -69
69 | -64 -38 -191 -111 -282 -163 -91 -52 -239 -138 -330 -190 l-165 -96 -5 62 c-3
70 | 33 -3 114 0 180 l5 118 105 60 c58 33 142 82 188 109 45 27 87 49 92 49 6 0
71 | 10 4 10 8 0 4 12 13 28 20 15 7 45 23 67 36 22 13 85 49 140 81 55 31 111 65
72 | 125 73 14 9 27 17 30 17 3 0 16 8 30 17 24 15 267 156 320 185 14 8 43 25 65
73 | 37 l40 23 50 -26 c28 -14 52 -29 55 -32z m603 -348 c37 -22 71 -41 76 -41 5 0
74 | 11 -3 13 -7 2 -5 24 -19 50 -32 25 -14 57 -33 70 -42 22 -17 22 -18 3 -25 -20
75 | -8 -423 -239 -805 -462 -19 -11 -51 -29 -70 -40 -19 -11 -177 -102 -350 -202
76 | -173 -100 -335 -194 -360 -208 -25 -14 -78 -45 -118 -69 -41 -24 -76 -43 -78
77 | -43 -3 0 -30 -16 -60 -35 -30 -19 -57 -35 -60 -35 -3 0 -29 -16 -59 -35 -30
78 | -19 -55 -31 -55 -27 0 4 -4 2 -8 -4 -14 -21 -142 -86 -143 -72 0 7 0 87 0 178
79 | l-1 165 79 46 c67 39 551 319 638 369 17 9 147 85 290 167 143 83 276 160 295
80 | 171 19 11 91 52 160 92 69 40 143 83 165 95 22 13 87 51 144 84 57 33 107 59
81 | 110 57 3 -2 36 -22 74 -45z m-2268 -677 l0 -177 -153 -88 c-84 -49 -154 -89
82 | -156 -89 -1 0 -2 80 -2 179 l-1 178 56 32 c31 18 79 45 106 62 28 16 57 33 65
83 | 36 8 4 26 15 39 25 45 34 47 29 46 -158z"/>
84 | </g>
85 | </svg>
86 | 


--------------------------------------------------------------------------------
/src/components/utils/NavigationBar.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Menu,
  3 |   MenuButton,
  4 |   Button,
  5 |   MenuList,
  6 |   MenuGroup,
  7 |   MenuItem,
  8 |   MenuDivider,
  9 |   Box,
 10 |   Text,
 11 |   Avatar,
 12 |   AvatarGroup,
 13 |   Link,
 14 | } from "@chakra-ui/react";
 15 | import { ChevronDownIcon } from "@chakra-ui/icons";
 16 | 
 17 | import { Row } from "../../utils/chakra";
 18 | import { FluxNodeType } from "../../utils/types";
 19 | 
 20 | import dave from "/dave.jpg";
 21 | import t11s from "/t11s.jpg";
 22 | import paradigm from "/paradigm.svg";
 23 | 
 24 | export function NavigationBar({
 25 |   newUserNodeLinkedToANewSystemNode,
 26 |   newConnectedToSelectedNode,
 27 |   submitPrompt,
 28 |   regenerate,
 29 |   completeNextWords,
 30 |   undo,
 31 |   redo,
 32 |   onClear,
 33 |   copyMessagesToClipboard,
 34 |   showRenameInput,
 35 |   deleteSelectedNodes,
 36 |   moveToParent,
 37 |   moveToChild,
 38 |   moveToLeftSibling,
 39 |   moveToRightSibling,
 40 |   autoZoom,
 41 |   onOpenSettingsModal,
 42 | }: {
 43 |   newUserNodeLinkedToANewSystemNode: () => void;
 44 |   newConnectedToSelectedNode: (nodeType: FluxNodeType) => void;
 45 |   submitPrompt: () => void;
 46 |   regenerate: () => void;
 47 |   completeNextWords: () => void;
 48 |   deleteSelectedNodes: () => void;
 49 |   undo: () => void;
 50 |   redo: () => void;
 51 |   onClear: () => void;
 52 |   copyMessagesToClipboard: () => void;
 53 |   showRenameInput: () => void;
 54 |   moveToParent: () => void;
 55 |   moveToChild: () => void;
 56 |   moveToLeftSibling: () => void;
 57 |   moveToRightSibling: () => void;
 58 |   autoZoom: () => void;
 59 |   onOpenSettingsModal: () => void;
 60 | }) {
 61 |   return (
 62 |     <Row
 63 |       mainAxisAlignment="flex-start"
 64 |       crossAxisAlignment="center"
 65 |       height="100%"
 66 |       width="auto"
 67 |       overflowX="auto"
 68 |     >
 69 |       <Row
 70 |         mainAxisAlignment="flex-start"
 71 |         crossAxisAlignment="center"
 72 |         height="100%"
 73 |         width="auto"
 74 |       >
 75 |         <Text whiteSpace="nowrap">
 76 |           <b>Flux</b> by
 77 |         </Text>
 78 | 
 79 |         <AvatarGroup ml="4px" size="sm">
 80 |           <Avatar
 81 |             bg="#ADADAD"
 82 |             color="transparent"
 83 |             name="Transmissions11"
 84 |             src={t11s}
 85 |             as={Link}
 86 |             isExternal
 87 |             href="https://twitter.com/transmissions11"
 88 |           />
 89 |           <Avatar
 90 |             bg="#6B2E80"
 91 |             color="transparent"
 92 |             name="Dave White"
 93 |             src={dave}
 94 |             as={Link}
 95 |             isExternal
 96 |             href="https://twitter.com/_Dave__White_"
 97 |           />
 98 |           <Avatar
 99 |             bg="white"
100 |             color="transparent"
101 |             name="Paradigm"
102 |             src={paradigm}
103 |             as={Link}
104 |             isExternal
105 |             href="https://twitter.com/paradigm"
106 |           />
107 |         </AvatarGroup>
108 | 
109 |         <Box mx="20px" height="100%" width="1px" bg="#EEEEEE" />
110 | 
111 |         <Menu>
112 |           <MenuButton
113 |             as={Button}
114 |             rightIcon={<ChevronDownIcon />}
115 |             variant="ghost"
116 |             height="80%"
117 |             px="5px"
118 |           >
119 |             File
120 |           </MenuButton>
121 |           <MenuList width="300px">
122 |             <MenuGroup title="Trees">
123 |               <MenuItem command="⇧⌘P" onClick={newUserNodeLinkedToANewSystemNode}>
124 |                 New conversation tree
125 |               </MenuItem>
126 |             </MenuGroup>
127 | 
128 |             <MenuDivider />
129 | 
130 |             <MenuGroup title="Nodes">
131 |               <MenuItem
132 |                 command="⌘P"
133 |                 onClick={() => newConnectedToSelectedNode(FluxNodeType.User)}
134 |               >
135 |                 New user node
136 |               </MenuItem>
137 | 
138 |               <MenuItem
139 |                 command="⌘U"
140 |                 onClick={() => newConnectedToSelectedNode(FluxNodeType.System)}
141 |               >
142 |                 New system node
143 |               </MenuItem>
144 |             </MenuGroup>
145 | 
146 |             <MenuDivider />
147 | 
148 |             <MenuGroup title="GPT">
149 |               <MenuItem command="⌘⏎" onClick={submitPrompt}>
150 |                 Generate GPT responses
151 |               </MenuItem>
152 | 
153 |               <MenuItem command="⇧⌘⏎" onClick={regenerate}>
154 |                 Regenerate GPT responses
155 |               </MenuItem>
156 | 
157 |               <MenuItem command="⌘K" onClick={completeNextWords}>
158 |                 Complete next words
159 |               </MenuItem>
160 |             </MenuGroup>
161 |           </MenuList>
162 |         </Menu>
163 |         <Menu>
164 |           <MenuButton
165 |             as={Button}
166 |             rightIcon={<ChevronDownIcon />}
167 |             variant="ghost"
168 |             height="80%"
169 |             px="5px"
170 |             ml="11px"
171 |           >
172 |             Edit
173 |           </MenuButton>
174 |           <MenuList width="300px">
175 |             <MenuGroup title="History">
176 |               <MenuItem command="⌘Z" onClick={undo}>
177 |                 Undo
178 |               </MenuItem>
179 | 
180 |               <MenuItem command="⇧⌘Z" onClick={redo}>
181 |                 Redo
182 |               </MenuItem>
183 |             </MenuGroup>
184 | 
185 |             <MenuDivider />
186 | 
187 |             <MenuGroup title="Delete">
188 |               <MenuItem command="⌘⌫" onClick={deleteSelectedNodes}>
189 |                 Delete selected node(s)
190 |               </MenuItem>
191 | 
192 |               <MenuItem command="⇧⌘⌫" onClick={onClear}>
193 |                 Delete everything
194 |               </MenuItem>
195 |             </MenuGroup>
196 | 
197 |             <MenuDivider />
198 | 
199 |             <MenuGroup title="Rename">
200 |               <MenuItem command="⌘E" onClick={showRenameInput}>
201 |                 Rename selected node
202 |               </MenuItem>
203 |             </MenuGroup>
204 | 
205 |             <MenuDivider />
206 | 
207 |             <MenuGroup title="Copy">
208 |               <MenuItem command="Ctrl+C" onClick={copyMessagesToClipboard}>
209 |                 Copy messages to clipboard
210 |               </MenuItem>
211 |             </MenuGroup>
212 |           </MenuList>
213 |         </Menu>
214 |         <Menu>
215 |           <MenuButton
216 |             as={Button}
217 |             rightIcon={<ChevronDownIcon />}
218 |             variant="ghost"
219 |             height="80%"
220 |             px="5px"
221 |             ml="11px"
222 |           >
223 |             Navigate
224 |           </MenuButton>
225 |           <MenuList width="300px">
226 |             <MenuGroup title="Parents/Children">
227 |               <MenuItem command="⌘↑" onClick={moveToParent}>
228 |                 Up to parent node
229 |               </MenuItem>
230 |               <MenuItem command="⌘↓" onClick={moveToChild}>
231 |                 Down child node
232 |               </MenuItem>
233 |             </MenuGroup>
234 | 
235 |             <MenuDivider />
236 | 
237 |             <MenuGroup title="Siblings">
238 |               <MenuItem command="⌘←" onClick={moveToLeftSibling}>
239 |                 Left to sibling node
240 |               </MenuItem>
241 |               <MenuItem command="⌘→" onClick={moveToRightSibling}>
242 |                 Right to sibling node
243 |               </MenuItem>
244 |             </MenuGroup>
245 | 
246 |             <MenuDivider />
247 | 
248 |             <MenuGroup title="Global">
249 |               <MenuItem command="⌘." onClick={autoZoom}>
250 |                 Zoom out & center
251 |               </MenuItem>
252 |             </MenuGroup>
253 |           </MenuList>
254 |         </Menu>
255 |         <Button
256 |           variant="ghost"
257 |           height="80%"
258 |           px="5px"
259 |           ml="11px"
260 |           onClick={onOpenSettingsModal}
261 |         >
262 |           Settings
263 |         </Button>
264 |         <Button
265 |           variant="ghost"
266 |           height="80%"
267 |           px="5px"
268 |           ml="16px"
269 |           as="a"
270 |           href="https://twitter.com/transmissions11/status/1640775967856803840"
271 |         >
272 |           About
273 |         </Button>
274 |       </Row>
275 |     </Row>
276 |   );
277 | }
278 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/src/components/Prompt.tsx:
--------------------------------------------------------------------------------
  1 | import { Node } from "reactflow";
  2 | 
  3 | import { useState, useEffect, useRef } from "react";
  4 | 
  5 | import { Spinner, Text, Button } from "@chakra-ui/react";
  6 | 
  7 | import { EditIcon, ViewIcon } from "@chakra-ui/icons";
  8 | 
  9 | import TextareaAutosize from "react-textarea-autosize";
 10 | 
 11 | import { getFluxNodeTypeColor, getFluxNodeTypeDarkColor } from "../utils/color";
 12 | import { TextAndCodeBlock } from "./utils/TextAndCodeBlock";
 13 | import { FluxNodeData, FluxNodeType, Settings } from "../utils/types";
 14 | import { displayNameFromFluxNodeType } from "../utils/fluxNode";
 15 | import { LabeledSlider } from "./utils/LabeledInputs";
 16 | import { Row, Center, Column } from "../utils/chakra";
 17 | import { BigButton } from "./utils/BigButton";
 18 | 
 19 | export function Prompt({
 20 |   lineage,
 21 |   submitPrompt,
 22 |   onType,
 23 |   selectNode,
 24 |   newConnectedToSelectedNode,
 25 |   isGPT4,
 26 |   settings,
 27 |   setSettings,
 28 | }: {
 29 |   lineage: Node<FluxNodeData>[];
 30 |   onType: (text: string) => void;
 31 |   submitPrompt: () => Promise<void>;
 32 |   selectNode: (id: string) => void;
 33 |   newConnectedToSelectedNode: (type: FluxNodeType) => void;
 34 |   isGPT4: boolean;
 35 |   settings: Settings;
 36 |   setSettings: (settings: Settings) => void;
 37 | }) {
 38 |   const promptNode = lineage[0];
 39 | 
 40 |   const promptNodeType = promptNode.data.fluxNodeType;
 41 | 
 42 |   const onMainButtonClick = () => {
 43 |     if (promptNodeType === FluxNodeType.User) {
 44 |       submitPrompt();
 45 |     } else {
 46 |       newConnectedToSelectedNode(FluxNodeType.User);
 47 |     }
 48 |   };
 49 | 
 50 |   /*//////////////////////////////////////////////////////////////
 51 |                               STATE
 52 |   //////////////////////////////////////////////////////////////*/
 53 | 
 54 |   const [isEditing, setIsEditing] = useState(
 55 |     promptNodeType === FluxNodeType.User || promptNodeType === FluxNodeType.System
 56 |   );
 57 |   const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
 58 | 
 59 |   /*//////////////////////////////////////////////////////////////
 60 |                               EFFECTS
 61 |   //////////////////////////////////////////////////////////////*/
 62 | 
 63 |   const textOffsetRef = useRef<number>(-1);
 64 | 
 65 |   // Scroll to the prompt buttons
 66 |   // when the bottom node is swapped.
 67 |   useEffect(() => {
 68 |     window.document
 69 |       .getElementById("promptButtons")
 70 |       ?.scrollIntoView(/* { behavior: "smooth" } */);
 71 | 
 72 |     // If the user clicked on the node, we assume they want to edit it.
 73 |     // Otherwise, we only put them in edit mode if its a user or system node.
 74 |     setIsEditing(
 75 |       textOffsetRef.current !== -1 ||
 76 |         promptNodeType === FluxNodeType.User ||
 77 |         promptNodeType === FluxNodeType.System
 78 |     );
 79 |   }, [promptNode.id]);
 80 | 
 81 |   // Focus the textbox when the user changes into edit mode.
 82 |   useEffect(() => {
 83 |     if (isEditing) {
 84 |       const promptBox = window.document.getElementById(
 85 |         "promptBox"
 86 |       ) as HTMLTextAreaElement | null;
 87 | 
 88 |       // Focus the text box and move the cursor to chosen offset (defaults to end).
 89 |       promptBox?.setSelectionRange(textOffsetRef.current, textOffsetRef.current);
 90 |       promptBox?.focus();
 91 | 
 92 |       // Default to moving to the end of the text.
 93 |       textOffsetRef.current = -1;
 94 |     }
 95 |   }, [promptNode.id, isEditing]);
 96 | 
 97 |   /*//////////////////////////////////////////////////////////////
 98 |                               APP
 99 |   //////////////////////////////////////////////////////////////*/
100 | 
101 |   return (
102 |     <>
103 |       {lineage
104 |         .slice()
105 |         .reverse()
106 |         .map((node, i) => {
107 |           const isLast = i === lineage.length - 1;
108 | 
109 |           const data = node.data;
110 | 
111 |           return (
112 |             <Row
113 |               mb={2}
114 |               p={3}
115 |               mainAxisAlignment="flex-start"
116 |               crossAxisAlignment="flex-start"
117 |               borderRadius="6px"
118 |               borderLeftWidth={isLast ? "4px" : "0px"}
119 |               _hover={{
120 |                 boxShadow: isLast ? "none" : "0 0 0 0.5px #1a192b",
121 |               }}
122 |               borderColor={getFluxNodeTypeDarkColor(data.fluxNodeType)}
123 |               position="relative"
124 |               onMouseEnter={() => setHoveredNodeId(node.id)}
125 |               onMouseLeave={() => setHoveredNodeId(null)}
126 |               bg={getFluxNodeTypeColor(data.fluxNodeType)}
127 |               key={node.id}
128 |               onClick={
129 |                 isLast
130 |                   ? isEditing
131 |                     ? undefined
132 |                     : () => setIsEditing(true)
133 |                   : () => {
134 |                       const selection = window.getSelection();
135 | 
136 |                       // We don't want to trigger the selection
137 |                       // if they're just selecting/copying text.
138 |                       if (selection?.isCollapsed) {
139 |                         // TODO: Note this is basically broken because of codeblocks.
140 |                         textOffsetRef.current = selection.anchorOffset ?? 0;
141 | 
142 |                         selectNode(node.id);
143 |                         setIsEditing(true);
144 |                       }
145 |                     }
146 |               }
147 |               cursor={isLast && isEditing ? "text" : "pointer"}
148 |             >
149 |               {data.generating && data.text === "" ? (
150 |                 <Center expand>
151 |                   <Spinner />
152 |                 </Center>
153 |               ) : (
154 |                 <>
155 |                   <Button
156 |                     display={
157 |                       hoveredNodeId === promptNode.id && promptNode.id === node.id
158 |                         ? "block"
159 |                         : "none"
160 |                     }
161 |                     onClick={() => setIsEditing(!isEditing)}
162 |                     position="absolute"
163 |                     top={1}
164 |                     right={1}
165 |                     zIndex={10}
166 |                     variant="outline"
167 |                     border="0px"
168 |                     _hover={{ background: "none" }}
169 |                     p={1}
170 |                   >
171 |                     {isEditing ? <ViewIcon boxSize={4} /> : <EditIcon boxSize={4} />}
172 |                   </Button>
173 |                   <Text fontWeight="bold" width="auto" whiteSpace="nowrap">
174 |                     {displayNameFromFluxNodeType(data.fluxNodeType)}
175 |                     :&nbsp;
176 |                   </Text>
177 |                   <Column
178 |                     width="100%"
179 |                     marginRight="30px"
180 |                     whiteSpace="pre-wrap" // Preserve newlines.
181 |                     mainAxisAlignment="flex-start"
182 |                     crossAxisAlignment="flex-start"
183 |                     borderRadius="6px"
184 |                     wordBreak="break-word"
185 |                   >
186 |                     {isLast && isEditing ? (
187 |                       <TextareaAutosize
188 |                         id="promptBox"
189 |                         style={{
190 |                           width: "100%",
191 |                           backgroundColor: "transparent",
192 |                           outline: "none",
193 |                         }}
194 |                         value={data.text ?? ""}
195 |                         onChange={(e) => onType(e.target.value)}
196 |                         placeholder={
197 |                           data.fluxNodeType === FluxNodeType.User
198 |                             ? "Write a poem about..."
199 |                             : data.fluxNodeType === FluxNodeType.System
200 |                             ? "You are ChatGPT..."
201 |                             : undefined
202 |                         }
203 |                       />
204 |                     ) : (
205 |                       <TextAndCodeBlock text={data.text} />
206 |                     )}
207 |                   </Column>
208 |                 </>
209 |               )}
210 |             </Row>
211 |           );
212 |         })}
213 | 
214 |       <Row
215 |         mainAxisAlignment="center"
216 |         crossAxisAlignment="stretch"
217 |         width="100%"
218 |         height="100px"
219 |         id="promptButtons"
220 |       >
221 |         <BigButton
222 |           tooltip={promptNodeType === FluxNodeType.User ? "⌘⏎" : "⌘P"}
223 |           onClick={onMainButtonClick}
224 |           color={getFluxNodeTypeDarkColor(promptNodeType)}
225 |           width="100%"
226 |           height="100%"
227 |           fontSize="lg"
228 |         >
229 |           {promptNodeType === FluxNodeType.User ? "Generate" : "Compose"}
230 |           <Text fontWeight="extrabold">
231 |             &nbsp;
232 |             {promptNodeType === FluxNodeType.User
233 |               ? displayNameFromFluxNodeType(FluxNodeType.GPT, isGPT4)
234 |               : displayNameFromFluxNodeType(FluxNodeType.User, isGPT4)}
235 |             &nbsp;
236 |           </Text>
237 |           response
238 |         </BigButton>
239 |       </Row>
240 | 
241 |       {promptNodeType === FluxNodeType.User ? (
242 |         <>
243 |           <LabeledSlider
244 |             mt={3}
245 |             label="Temperature (randomness)"
246 |             value={settings.temp}
247 |             setValue={(v) => setSettings({ ...settings, temp: v })}
248 |             color={getFluxNodeTypeDarkColor(FluxNodeType.User)}
249 |             max={1.25}
250 |             min={0}
251 |             step={0.01}
252 |           />
253 | 
254 |           <LabeledSlider
255 |             mt={3}
256 |             label="Number of Responses"
257 |             value={settings.n}
258 |             setValue={(v) => setSettings({ ...settings, n: v })}
259 |             color={getFluxNodeTypeDarkColor(FluxNodeType.User)}
260 |             max={10}
261 |             min={1}
262 |             step={1}
263 |           />
264 |         </>
265 |       ) : null}
266 |     </>
267 |   );
268 | }
269 | 


--------------------------------------------------------------------------------
/src/utils/fluxNode.ts:
--------------------------------------------------------------------------------
  1 | import { Node, Edge } from "reactflow";
  2 | 
  3 | import { NEW_TREE_X_OFFSET, OVERLAP_RANDOMNESS_MAX } from "./constants";
  4 | import { FluxNodeType, FluxNodeData, ReactFlowNodeTypes } from "./types";
  5 | import { getFluxNodeTypeColor } from "./color";
  6 | import { generateNodeId } from "./nodeId";
  7 | 
  8 | /*//////////////////////////////////////////////////////////////
  9 |                          CONSTRUCTORS
 10 | //////////////////////////////////////////////////////////////*/
 11 | 
 12 | export function newFluxNode({
 13 |   id,
 14 |   x,
 15 |   y,
 16 |   fluxNodeType,
 17 |   text,
 18 |   generating,
 19 | }: {
 20 |   id?: string;
 21 |   x: number;
 22 |   y: number;
 23 |   fluxNodeType: FluxNodeType;
 24 |   text: string;
 25 |   generating: boolean;
 26 | }): Node<FluxNodeData> {
 27 |   return {
 28 |     id: id ?? generateNodeId(),
 29 |     position: { x, y },
 30 |     style: {
 31 |       background: getFluxNodeTypeColor(fluxNodeType),
 32 |     },
 33 |     data: {
 34 |       label: displayNameFromFluxNodeType(fluxNodeType),
 35 |       fluxNodeType,
 36 |       text,
 37 |       generating,
 38 |     },
 39 |   };
 40 | }
 41 | 
 42 | /*//////////////////////////////////////////////////////////////
 43 |                          TRANSFORMERS
 44 | //////////////////////////////////////////////////////////////*/
 45 | 
 46 | export function addFluxNode(
 47 |   existingNodes: Node<FluxNodeData>[],
 48 |   {
 49 |     id,
 50 |     x,
 51 |     y,
 52 |     fluxNodeType,
 53 |     text,
 54 |     generating,
 55 |   }: {
 56 |     id?: string;
 57 |     x: number;
 58 |     y: number;
 59 |     fluxNodeType: FluxNodeType;
 60 |     text: string;
 61 |     generating: boolean;
 62 |   }
 63 | ): Node<FluxNodeData>[] {
 64 |   const newNode = newFluxNode({ x, y, fluxNodeType, text, id, generating });
 65 | 
 66 |   return [...existingNodes, newNode];
 67 | }
 68 | 
 69 | export function addUserNodeLinkedToASystemNode(
 70 |   nodes: Node<FluxNodeData>[],
 71 |   systemNodeText: string,
 72 |   userNodeText: string | null = "",
 73 |   systemId: string = generateNodeId(),
 74 |   userId: string = generateNodeId()
 75 | ) {
 76 |   const nodesCopy = [...nodes];
 77 | 
 78 |   const systemNode = newFluxNode({
 79 |     id: systemId,
 80 |     x:
 81 |       nodesCopy.length > 0
 82 |         ? nodesCopy.reduce((prev, current) =>
 83 |             prev.position.x > current.position.x ? prev : current
 84 |           ).position.x + NEW_TREE_X_OFFSET
 85 |         : window.innerWidth / 2 / 2 - 75,
 86 |     y: 500,
 87 |     fluxNodeType: FluxNodeType.System,
 88 |     text: systemNodeText,
 89 |     generating: false,
 90 |   });
 91 | 
 92 |   nodesCopy.push(systemNode);
 93 | 
 94 |   nodesCopy.push(
 95 |     newFluxNode({
 96 |       id: userId,
 97 |       x: systemNode.position.x,
 98 |       // Add OVERLAP_RANDOMNESS_MAX of randomness to
 99 |       // the y position so that nodes don't overlap.
100 |       y: systemNode.position.y + 100 + Math.random() * OVERLAP_RANDOMNESS_MAX,
101 |       fluxNodeType: FluxNodeType.User,
102 |       text: userNodeText ?? "",
103 |       generating: false,
104 |     })
105 |   );
106 | 
107 |   return nodesCopy;
108 | }
109 | 
110 | export function modifyReactFlowNodeProperties(
111 |   existingNodes: Node<FluxNodeData>[],
112 |   {
113 |     id,
114 |     type,
115 |     draggable,
116 |   }: { id: string; type: ReactFlowNodeTypes | undefined; draggable: boolean }
117 | ): Node<FluxNodeData>[] {
118 |   return existingNodes.map((node) => {
119 |     if (node.id !== id) return node;
120 | 
121 |     const copy = { ...node, data: { ...node.data }, type, draggable };
122 | 
123 |     return copy;
124 |   });
125 | }
126 | 
127 | export function modifyFluxNodeText(
128 |   existingNodes: Node<FluxNodeData>[],
129 |   { asHuman, id, text }: { asHuman: boolean; id: string; text: string }
130 | ): Node<FluxNodeData>[] {
131 |   return existingNodes.map((node) => {
132 |     if (node.id !== id) return node;
133 | 
134 |     const copy = { ...node, data: { ...node.data } };
135 | 
136 |     copy.data.text = text;
137 | 
138 |     // If the node's fluxNodeType is GPT and we're changing
139 |     // it as a human then its type becomes GPT + Human.
140 |     if (asHuman && copy.data.fluxNodeType === FluxNodeType.GPT) {
141 |       copy.style = {
142 |         ...copy.style,
143 |         background: getFluxNodeTypeColor(FluxNodeType.TweakedGPT),
144 |       };
145 | 
146 |       copy.data.fluxNodeType = FluxNodeType.TweakedGPT;
147 |       copy.data.label = displayNameFromFluxNodeType(
148 |         FluxNodeType.TweakedGPT,
149 |         undefined,
150 |         copy.data.label
151 |       );
152 |     }
153 | 
154 |     return copy;
155 |   });
156 | }
157 | 
158 | export function modifyFluxNodeLabel(
159 |   existingNodes: Node<FluxNodeData>[],
160 |   { id, type, label }: { id: string; type?: FluxNodeType; label: string }
161 | ): Node<FluxNodeData>[] {
162 |   return existingNodes.map((node) => {
163 |     if (node.id !== id) return node;
164 | 
165 |     const copy = { ...node, data: { ...node.data, label }, type, draggable: undefined };
166 | 
167 |     return copy;
168 |   });
169 | }
170 | 
171 | export function appendTextToFluxNodeAsGPT(
172 |   existingNodes: Node<FluxNodeData>[],
173 |   { id, text }: { id: string; text: string }
174 | ): Node<FluxNodeData>[] {
175 |   return existingNodes.map((node) => {
176 |     if (node.id !== id) return node;
177 | 
178 |     const copy = { ...node, data: { ...node.data } };
179 | 
180 |     copy.data.text += text;
181 | 
182 |     return copy;
183 |   });
184 | }
185 | 
186 | export function markFluxNodeAsDoneGenerating(
187 |   existingNodes: Node<FluxNodeData>[],
188 |   id: string
189 | ): Node<FluxNodeData>[] {
190 |   return existingNodes.map((node) => {
191 |     if (node.id !== id) return node;
192 | 
193 |     return { ...node, data: { ...node.data, generating: false } };
194 |   });
195 | }
196 | 
197 | export function deleteFluxNode(
198 |   existingNodes: Node<FluxNodeData>[],
199 |   id: string
200 | ): Node<FluxNodeData>[] {
201 |   return existingNodes.filter((node) => node.id !== id);
202 | }
203 | 
204 | export function deleteSelectedFluxNodes(
205 |   existingNodes: Node<FluxNodeData>[]
206 | ): Node<FluxNodeData>[] {
207 |   return existingNodes.filter((node) => !node.selected);
208 | }
209 | 
210 | export function markOnlyNodeAsSelected(
211 |   existingNodes: Node<FluxNodeData>[],
212 |   id: string
213 | ): Node<FluxNodeData>[] {
214 |   return existingNodes.map((node) => {
215 |     return { ...node, selected: node.id === id };
216 |   });
217 | }
218 | 
219 | /*//////////////////////////////////////////////////////////////
220 |                             GETTERS
221 | //////////////////////////////////////////////////////////////*/
222 | 
223 | export function getFluxNode(
224 |   nodes: Node<FluxNodeData>[],
225 |   id: string
226 | ): Node<FluxNodeData> | undefined {
227 |   return nodes.find((node) => node.id === id);
228 | }
229 | 
230 | export function getFluxNodeGPTChildren(
231 |   existingNodes: Node<FluxNodeData>[],
232 |   existingEdges: Edge[],
233 |   id: string
234 | ): Node<FluxNodeData>[] {
235 |   return existingNodes.filter(
236 |     (node) =>
237 |       (node.data.fluxNodeType === FluxNodeType.GPT ||
238 |         node.data.fluxNodeType === FluxNodeType.TweakedGPT) &&
239 |       getFluxNodeParent(existingNodes, existingEdges, node.id)?.id === id
240 |   );
241 | }
242 | 
243 | export function getFluxNodeChildren(
244 |   existingNodes: Node<FluxNodeData>[],
245 |   existingEdges: Edge[],
246 |   id: string
247 | ) {
248 |   return existingNodes.filter(
249 |     (node) => getFluxNodeParent(existingNodes, existingEdges, node.id)?.id === id
250 |   );
251 | }
252 | 
253 | export function getFluxNodeSiblings(
254 |   existingNodes: Node<FluxNodeData>[],
255 |   existingEdges: Edge[],
256 |   id: string
257 | ): Node<FluxNodeData>[] {
258 |   const parent = getFluxNodeParent(existingNodes, existingEdges, id);
259 | 
260 |   if (!parent) return [];
261 | 
262 |   return getFluxNodeChildren(existingNodes, existingEdges, parent.id);
263 | }
264 | 
265 | export function getFluxNodeParent(
266 |   existingNodes: Node<FluxNodeData>[],
267 |   existingEdges: Edge[],
268 |   id: string
269 | ): Node<FluxNodeData> | undefined {
270 |   let edge: Edge | undefined;
271 | 
272 |   // We iterate in reverse to ensure we don't try to route
273 |   // through a stale (now hidden) edge to find the parent.
274 |   for (let i = existingEdges.length - 1; i >= 0; i--) {
275 |     const e = existingEdges[i];
276 | 
277 |     if (e.target === id) {
278 |       edge = e;
279 |       break;
280 |     }
281 |   }
282 | 
283 |   if (!edge) return;
284 | 
285 |   return existingNodes.find((node) => node.id === edge!.source);
286 | }
287 | 
288 | // Get the lineage of the node,
289 | // where index 0 is the node,
290 | // index 1 is the node's parent,
291 | // index 2 is the node's grandparent, etc.
292 | // TODO: Eventually would be nice to have
293 | // support for connecting multiple parents!
294 | export function getFluxNodeLineage(
295 |   existingNodes: Node<FluxNodeData>[],
296 |   existingEdges: Edge[],
297 |   id: string
298 | ): Node<FluxNodeData>[] {
299 |   const lineage: Node<FluxNodeData>[] = [];
300 | 
301 |   let currentNode = getFluxNode(existingNodes, id);
302 | 
303 |   while (currentNode) {
304 |     lineage.push(currentNode);
305 | 
306 |     currentNode = getFluxNodeParent(existingNodes, existingEdges, currentNode.id);
307 |   }
308 | 
309 |   return lineage;
310 | }
311 | 
312 | export function isFluxNodeInLineage(
313 |   existingNodes: Node<FluxNodeData>[],
314 |   existingEdges: Edge[],
315 |   { nodeToCheck, nodeToGetLineageOf }: { nodeToCheck: string; nodeToGetLineageOf: string }
316 | ): boolean {
317 |   const lineage = getFluxNodeLineage(existingNodes, existingEdges, nodeToGetLineageOf);
318 | 
319 |   return lineage.some((node) => node.id === nodeToCheck);
320 | }
321 | 
322 | export function getConnectionAllowed(
323 |   existingNodes: Node<FluxNodeData>[],
324 |   existingEdges: Edge[],
325 |   { source, target }: { source: string; target: string }
326 | ): boolean {
327 |   return (
328 |     // Check the lineage of the source node to make
329 |     // sure we aren't creating a recursive connection.
330 |     !isFluxNodeInLineage(existingNodes, existingEdges, {
331 |       nodeToCheck: target,
332 |       nodeToGetLineageOf: source,
333 |       // Check if the target node already has a parent.
334 |     }) && getFluxNodeParent(existingNodes, existingEdges, target) === undefined
335 |   );
336 | }
337 | 
338 | /*//////////////////////////////////////////////////////////////
339 |                             RENDERERS
340 | //////////////////////////////////////////////////////////////*/
341 | 
342 | export function displayNameFromFluxNodeType(
343 |   fluxNodeType: FluxNodeType,
344 |   isGPT4?: boolean,
345 |   overrideLabel?: string
346 | ) {
347 |   switch (fluxNodeType) {
348 |     case FluxNodeType.User:
349 |       return "User";
350 |     case FluxNodeType.GPT:
351 |       return isGPT4 === undefined ? "GPT" : isGPT4 ? "GPT-4" : "GPT-3.5";
352 |     case FluxNodeType.TweakedGPT:
353 |       return `${overrideLabel} (edited)`;
354 |     case FluxNodeType.System:
355 |       return "System";
356 |   }
357 | }
358 | 


--------------------------------------------------------------------------------
/src/utils/chakra.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { Flex, FlexProps } from "@chakra-ui/react";
  3 | 
  4 | /* Typings */
  5 | export type MainAxisAlignmentStrings =
  6 |   | "space-between"
  7 |   | "space-around"
  8 |   | "flex-start"
  9 |   | "center"
 10 |   | "flex-end";
 11 | 
 12 | export type MainAxisAlignment =
 13 |   | MainAxisAlignmentStrings
 14 |   | { md: MainAxisAlignmentStrings; base: MainAxisAlignmentStrings };
 15 | 
 16 | export type CrossAxisAlignmentStrings = "flex-start" | "center" | "flex-end" | "stretch";
 17 | 
 18 | export type CrossAxisAlignment =
 19 |   | CrossAxisAlignmentStrings
 20 |   | {
 21 |       md: CrossAxisAlignmentStrings;
 22 |       base: CrossAxisAlignmentStrings;
 23 |     };
 24 | 
 25 | export class PixelMeasurement {
 26 |   size: number;
 27 | 
 28 |   constructor(num: number) {
 29 |     this.size = num;
 30 |   }
 31 | 
 32 |   asPxString(): string {
 33 |     return this.size + "px";
 34 |   }
 35 | 
 36 |   toString(): string {
 37 |     return this.asPxString();
 38 |   }
 39 | 
 40 |   asNumber(): number {
 41 |     return this.size;
 42 |   }
 43 | }
 44 | 
 45 | export class PercentageSize {
 46 |   percent: number;
 47 | 
 48 |   constructor(num: number) {
 49 |     if (num > 1) {
 50 |       throw new Error("Cannot have a percentage higher than 1!");
 51 |     }
 52 | 
 53 |     this.percent = num;
 54 |   }
 55 | }
 56 | 
 57 | export class PercentOnDesktopPixelOnMobileSize {
 58 |   percent: number;
 59 |   pixel: number;
 60 | 
 61 |   constructor({
 62 |     percentageSize,
 63 |     pixelSize,
 64 |   }: {
 65 |     percentageSize: number;
 66 |     pixelSize: number;
 67 |   }) {
 68 |     if (percentageSize > 1) {
 69 |       throw new Error("Cannot have a percentage higher than 1!");
 70 |     }
 71 | 
 72 |     this.percent = percentageSize;
 73 |     this.pixel = pixelSize;
 74 |   }
 75 | }
 76 | 
 77 | export class PixelSize {
 78 |   pixel: number;
 79 | 
 80 |   constructor(num: number) {
 81 |     this.pixel = num;
 82 |   }
 83 | }
 84 | 
 85 | export class ResponsivePixelSize {
 86 |   desktop: number;
 87 |   mobile: number;
 88 | 
 89 |   constructor({ desktop, mobile }: { desktop: number; mobile: number }) {
 90 |     this.mobile = mobile;
 91 |     this.desktop = desktop;
 92 |   }
 93 | }
 94 | 
 95 | /**************************************
 96 |  *
 97 |  *
 98 |  *  Components
 99 |  *    - Center.tsx
100 |  *    - Column.tsx
101 |  *    - Row.tsx
102 |  *    - RowOnDesktopColumnOnMobile.tsx
103 |  *    - RowOrColumn.tsx
104 |  *
105 |  ***************************************
106 |  */
107 | 
108 | /**
109 |  *  Center.tsx
110 |  *
111 |  *  Creates a Flex where `justifyContent === 'center'` and `alignItems === 'center'`
112 |  * If `expand === true` it will set the height and width of the Flex to 100%.
113 |  * Passes all extra props to the Flex.
114 |  */
115 | 
116 | export type CenterProps = {
117 |   children: React.ReactNode;
118 |   expand?: boolean;
119 | } & FlexProps;
120 | 
121 | export const Center = ({ children, expand, ...others }: CenterProps) => {
122 |   if (expand) {
123 |     others.height = "100%";
124 |     others.width = "100%";
125 |   }
126 | 
127 |   return (
128 |     <Flex justifyContent="center" alignItems="center" {...others}>
129 |       {children}
130 |     </Flex>
131 |   );
132 | };
133 | 
134 | /**
135 |  * Column.tsx
136 |  *
137 |  * Creates a Flex with a column direction
138 |  * and sets the `justifyContent` to the `mainAxisAlignment`
139 |  * and the `alignItems` to the `crossAxisAlignment`.
140 |  * If `expand === true` it will set the height and width of the Flex to 100%.
141 |  * Passes all extra props to the Flex.
142 |  */
143 | 
144 | export type ColumnProps = {
145 |   mainAxisAlignment: MainAxisAlignment;
146 |   crossAxisAlignment: CrossAxisAlignment;
147 |   children: React.ReactNode;
148 |   expand?: boolean;
149 | } & FlexProps;
150 | 
151 | export const Column = ({
152 |   mainAxisAlignment,
153 |   crossAxisAlignment,
154 |   children,
155 |   expand,
156 |   ...others
157 | }: ColumnProps) => {
158 |   if (expand) {
159 |     others.height = "100%";
160 |     others.width = "100%";
161 |   }
162 | 
163 |   return (
164 |     <Flex
165 |       flexDirection="column"
166 |       justifyContent={mainAxisAlignment}
167 |       alignItems={crossAxisAlignment}
168 |       {...others}
169 |     >
170 |       {children}
171 |     </Flex>
172 |   );
173 | };
174 | 
175 | /**
176 |  * Row.tsx
177 |  *
178 |  * Creates a Flex with a row direction
179 |  * and sets the `justifyContent` to the `mainAxisAlignment`
180 |  * and the `alignItems` to the `crossAxisAlignment`.
181 |  * If `expand === true` it will set the height and width of the Flex to 100%.
182 |  * Passes all extra props to the Flex.
183 |  */
184 | 
185 | export type RowProps = {
186 |   mainAxisAlignment: MainAxisAlignment;
187 |   crossAxisAlignment: CrossAxisAlignment;
188 |   children: React.ReactNode;
189 |   expand?: boolean;
190 | } & FlexProps;
191 | 
192 | export const Row = ({
193 |   mainAxisAlignment,
194 |   crossAxisAlignment,
195 |   children,
196 |   expand,
197 |   ...others
198 | }: RowProps) => {
199 |   if (expand) {
200 |     others.height = "100%";
201 |     others.width = "100%";
202 |   }
203 | 
204 |   return (
205 |     <Flex
206 |       flexDirection="row"
207 |       justifyContent={mainAxisAlignment}
208 |       alignItems={crossAxisAlignment}
209 |       {...others}
210 |     >
211 |       {children}
212 |     </Flex>
213 |   );
214 | };
215 | 
216 | /**
217 |  *  RowOnDesktopColumnOnMobile.tsx
218 |  *
219 |  * Creates a Flex with a row direction on desktop and a column direction on mobile.
220 |  * and sets the `justifyContent` to the `mainAxisAlignment`
221 |  * and the `alignItems` to the `crossAxisAlignment`.
222 |  * If `expand === true` it will set the height and width of the Flex to 100%.
223 |  * Passes all extra props to the Flex.
224 |  */
225 | export const RowOnDesktopColumnOnMobile = ({
226 |   mainAxisAlignment,
227 |   crossAxisAlignment,
228 |   children,
229 |   expand,
230 |   ...others
231 | }: RowProps) => {
232 |   if (expand) {
233 |     others.height = "100%";
234 |     others.width = "100%";
235 |   }
236 | 
237 |   return (
238 |     <Flex
239 |       flexDirection={{ md: "row", base: "column" }}
240 |       justifyContent={mainAxisAlignment}
241 |       alignItems={crossAxisAlignment}
242 |       {...others}
243 |     >
244 |       {children}
245 |     </Flex>
246 |   );
247 | };
248 | 
249 | /**
250 |  * RowOrColumn.tsx
251 |  *
252 |  * Creates a Flex which will be a row if `isRow` is true
253 |  * and sets the `justifyContent` to the `mainAxisAlignment`
254 |  * and the `alignItems` to the `crossAxisAlignment`.
255 |  * If `expand === true` it will set the height and width of the Flex to 100%.
256 |  * Passes all extra props to the Flex.
257 |  */
258 | export const RowOrColumn = ({
259 |   mainAxisAlignment,
260 |   crossAxisAlignment,
261 |   children,
262 |   expand,
263 |   isRow,
264 |   ...others
265 | }: RowProps & { isRow: boolean }) => {
266 |   if (expand) {
267 |     others.height = "100%";
268 |     others.width = "100%";
269 |   }
270 | 
271 |   return (
272 |     <Flex
273 |       flexDirection={isRow ? "row" : "column"}
274 |       justifyContent={mainAxisAlignment}
275 |       alignItems={crossAxisAlignment}
276 |       {...others}
277 |     >
278 |       {children}
279 |     </Flex>
280 |   );
281 | };
282 | 
283 | /**************************************
284 |  *
285 |  *
286 |  *  Hooks
287 |  *    - useWindowSize.ts
288 |  *    - useLockedViewHeight.ts
289 |  *    - useIsMobile.ts
290 |  *    - useSpacedLayout.ts
291 |  *
292 |  ***************************************
293 |  */
294 | 
295 | /**
296 |  * useWindowSize.ts
297 |  *
298 |  * Gets the height and width of the current window.
299 |  */
300 | export const useWindowSize = () => {
301 |   const [windowSize, setWindowSize] = useState({
302 |     width: window.innerWidth,
303 |     height: window.innerHeight,
304 |   });
305 | 
306 |   useEffect(() => {
307 |     // Handler to call on window resize
308 |     function handleResize() {
309 |       // Set window width/height to state
310 |       setWindowSize({
311 |         width: window.innerWidth,
312 |         height: window.innerHeight,
313 |       });
314 |     }
315 | 
316 |     // Add event listener
317 |     window.addEventListener("resize", handleResize);
318 | 
319 |     // Call handler right away so state gets updated with initial window size
320 |     handleResize();
321 | 
322 |     // Remove event listener on cleanup
323 |     return () => window.removeEventListener("resize", handleResize);
324 |   }, []); // Empty array ensures that effect is only run on mount
325 | 
326 |   return windowSize;
327 | };
328 | 
329 | /**
330 |  * useLockedViewHeight.ts
331 |  *
332 |  * Returns the pixel count of the height of the window,
333 |  * but will not return a value lower or higher than the minimum/maximum passed.
334 |  */
335 | export function useLockedViewHeight({
336 |   min = -1,
337 |   max = Number.MAX_SAFE_INTEGER,
338 | }: {
339 |   min?: number;
340 |   max?: number;
341 | }) {
342 |   const { height } = useWindowSize();
343 | 
344 |   if (height <= min) {
345 |     return {
346 |       windowHeight: new PixelMeasurement(min),
347 |       isLocked: true,
348 |     };
349 |   } else if (height >= max) {
350 |     return {
351 |       windowHeight: new PixelMeasurement(max),
352 |       isLocked: true,
353 |     };
354 |   } else {
355 |     return {
356 |       windowHeight: new PixelMeasurement(height),
357 |       isLocked: false,
358 |     };
359 |   }
360 | }
361 | 
362 | /**
363 |  * useIsMobile.ts
364 |  *
365 |  * Returns whether the width of the window makes it likely a mobile device.
366 |  * */
367 | export function useIsMobile() {
368 |   const { width } = useWindowSize();
369 | 
370 |   return width < 768;
371 | }
372 | 
373 | /**
374 |  * useSpacedLayout.ts
375 |  *
376 |  * Takes the height of the parent, the desired spacing between children,
377 |  * and the desired percentage sizes of the children (relative to their parent minus the spacing desired and the size of fixed sized children)
378 |  * or the size of the child in pixels
379 |  * and returns the pixel size of each child
380 |  * that makes that child conform to the desired percentage.
381 |  */
382 | export function useSpacedLayout({
383 |   parentHeight,
384 |   spacing,
385 |   childSizes,
386 | }: {
387 |   parentHeight: number;
388 |   spacing: number;
389 |   childSizes: (
390 |     | PercentageSize
391 |     | PercentOnDesktopPixelOnMobileSize
392 |     | PixelSize
393 |     | ResponsivePixelSize
394 |   )[];
395 | }) {
396 |   const isMobile = useIsMobile();
397 | 
398 |   let parentMinusSpacingAndFixedChildSizes =
399 |     parentHeight -
400 |     spacing * (childSizes.length - 1) -
401 |     childSizes.reduce((past, value) => {
402 |       if (
403 |         value instanceof PixelSize ||
404 |         (value instanceof PercentOnDesktopPixelOnMobileSize && isMobile)
405 |       ) {
406 |         return past + value.pixel;
407 |       } else if (value instanceof ResponsivePixelSize) {
408 |         return past + (isMobile ? value.mobile : value.desktop);
409 |       } else {
410 |         return past;
411 |       }
412 |     }, 0);
413 | 
414 |   let spacedChildren: PixelMeasurement[] = [];
415 | 
416 |   for (const size of childSizes) {
417 |     if (
418 |       size instanceof PercentageSize ||
419 |       (size instanceof PercentOnDesktopPixelOnMobileSize && !isMobile)
420 |     ) {
421 |       spacedChildren.push(
422 |         new PixelMeasurement(size.percent * parentMinusSpacingAndFixedChildSizes)
423 |       );
424 |     } else if (size instanceof PercentOnDesktopPixelOnMobileSize && isMobile) {
425 |       spacedChildren.push(new PixelMeasurement(size.pixel));
426 |     } else if (size instanceof ResponsivePixelSize) {
427 |       spacedChildren.push(new PixelMeasurement(isMobile ? size.mobile : size.desktop));
428 |     } else {
429 |       spacedChildren.push(new PixelMeasurement(size.pixel));
430 |     }
431 |   }
432 | 
433 |   return {
434 |     parentHeight: new PixelMeasurement(parentHeight),
435 |     spacing: new PixelMeasurement(spacing),
436 |     childSizes: spacedChildren,
437 |   };
438 | }
439 | 


--------------------------------------------------------------------------------
/src/components/App.tsx:
--------------------------------------------------------------------------------
   1 | import { useEffect, useState, useCallback, useRef } from "react";
   2 | 
   3 | import ReactFlow, {
   4 |   addEdge,
   5 |   Background,
   6 |   Connection,
   7 |   Node,
   8 |   Edge,
   9 |   useEdgesState,
  10 |   useNodesState,
  11 |   SelectionMode,
  12 |   ReactFlowInstance,
  13 |   ReactFlowJsonObject,
  14 |   useReactFlow,
  15 |   updateEdge,
  16 | } from "reactflow";
  17 | 
  18 | import "reactflow/dist/style.css";
  19 | 
  20 | import mixpanel from "mixpanel-browser";
  21 | 
  22 | import { Resizable } from "re-resizable";
  23 | 
  24 | import { yieldStream } from "yield-stream";
  25 | 
  26 | import { useHotkeys } from "react-hotkeys-hook";
  27 | 
  28 | import { useBeforeunload } from "react-beforeunload";
  29 | 
  30 | import { CheckCircleIcon } from "@chakra-ui/icons";
  31 | import { Box, useDisclosure, Spinner, useToast } from "@chakra-ui/react";
  32 | 
  33 | import { CreateCompletionResponseChoicesInner, OpenAI } from "openai-streams";
  34 | 
  35 | import { Prompt } from "./Prompt";
  36 | 
  37 | import { APIKeyModal } from "./modals/APIKeyModal";
  38 | import { SettingsModal } from "./modals/SettingsModal";
  39 | 
  40 | import { MIXPANEL_TOKEN } from "../main";
  41 | 
  42 | import {
  43 |   getFluxNode,
  44 |   getFluxNodeGPTChildren,
  45 |   displayNameFromFluxNodeType,
  46 |   newFluxNode,
  47 |   appendTextToFluxNodeAsGPT,
  48 |   getFluxNodeLineage,
  49 |   addFluxNode,
  50 |   modifyFluxNodeText,
  51 |   modifyReactFlowNodeProperties,
  52 |   getFluxNodeChildren,
  53 |   getFluxNodeParent,
  54 |   getFluxNodeSiblings,
  55 |   markOnlyNodeAsSelected,
  56 |   deleteFluxNode,
  57 |   deleteSelectedFluxNodes,
  58 |   addUserNodeLinkedToASystemNode,
  59 |   markFluxNodeAsDoneGenerating,
  60 |   getConnectionAllowed,
  61 | } from "../utils/fluxNode";
  62 | import {
  63 |   FluxNodeData,
  64 |   FluxNodeType,
  65 |   HistoryItem,
  66 |   Settings,
  67 |   CreateChatCompletionStreamResponseChoicesInner,
  68 |   ReactFlowNodeTypes,
  69 | } from "../utils/types";
  70 | import {
  71 |   API_KEY_LOCAL_STORAGE_KEY,
  72 |   DEFAULT_SETTINGS,
  73 |   FIT_VIEW_SETTINGS,
  74 |   HOTKEY_CONFIG,
  75 |   MAX_HISTORY_SIZE,
  76 |   MODEL_SETTINGS_LOCAL_STORAGE_KEY,
  77 |   NEW_TREE_CONTENT_QUERY_PARAM,
  78 |   OVERLAP_RANDOMNESS_MAX,
  79 |   REACT_FLOW_NODE_TYPES,
  80 |   REACT_FLOW_LOCAL_STORAGE_KEY,
  81 |   TOAST_CONFIG,
  82 |   UNDEFINED_RESPONSE_STRING,
  83 | } from "../utils/constants";
  84 | import { mod } from "../utils/mod";
  85 | import { BigButton } from "./utils/BigButton";
  86 | import { Column, Row } from "../utils/chakra";
  87 | import { isValidAPIKey } from "../utils/apikey";
  88 | import { generateNodeId } from "../utils/nodeId";
  89 | import { useLocalStorage } from "../utils/lstore";
  90 | import { NavigationBar } from "./utils/NavigationBar";
  91 | import { useDebouncedEffect } from "../utils/debounce";
  92 | import { useDebouncedWindowResize } from "../utils/resize";
  93 | import { getQueryParam, resetURL } from "../utils/qparams";
  94 | import { copySnippetToClipboard } from "../utils/clipboard";
  95 | import { messagesFromLineage, promptFromLineage } from "../utils/prompt";
  96 | import { newFluxEdge, modifyFluxEdge, addFluxEdge } from "../utils/fluxEdge";
  97 | import { getFluxNodeTypeColor, getFluxNodeTypeDarkColor } from "../utils/color";
  98 | 
  99 | function App() {
 100 |   const toast = useToast();
 101 | 
 102 |   /*//////////////////////////////////////////////////////////////
 103 |                           UNDO REDO LOGIC
 104 |   //////////////////////////////////////////////////////////////*/
 105 | 
 106 |   const [past, setPast] = useState<HistoryItem[]>([]);
 107 |   const [future, setFuture] = useState<HistoryItem[]>([]);
 108 | 
 109 |   const takeSnapshot = () => {
 110 |     // Push the current graph to the past state.
 111 |     setPast((past) => [
 112 |       ...past.slice(past.length - MAX_HISTORY_SIZE + 1, past.length),
 113 |       { nodes, edges, selectedNodeId, lastSelectedNodeId },
 114 |     ]);
 115 | 
 116 |     // Whenever we take a new snapshot, the redo operations
 117 |     // need to be cleared to avoid state mismatches.
 118 |     setFuture([]);
 119 |   };
 120 | 
 121 |   const undo = () => {
 122 |     // get the last state that we want to go back to
 123 |     const pastState = past[past.length - 1];
 124 | 
 125 |     if (pastState) {
 126 |       // First we remove the state from the history.
 127 |       setPast((past) => past.slice(0, past.length - 1));
 128 |       // We store the current graph for the redo operation.
 129 |       setFuture((future) => [
 130 |         ...future,
 131 |         { nodes, edges, selectedNodeId, lastSelectedNodeId },
 132 |       ]);
 133 | 
 134 |       // Now we can set the graph to the past state.
 135 |       setNodes(pastState.nodes);
 136 |       setEdges(pastState.edges);
 137 |       setLastSelectedNodeId(pastState.lastSelectedNodeId);
 138 |       setSelectedNodeId(pastState.selectedNodeId);
 139 | 
 140 |       autoZoomIfNecessary();
 141 |     }
 142 |   };
 143 | 
 144 |   const redo = () => {
 145 |     const futureState = future[future.length - 1];
 146 | 
 147 |     if (futureState) {
 148 |       setFuture((future) => future.slice(0, future.length - 1));
 149 |       setPast((past) => [...past, { nodes, edges, selectedNodeId, lastSelectedNodeId }]);
 150 |       setNodes(futureState.nodes);
 151 |       setEdges(futureState.edges);
 152 |       setLastSelectedNodeId(futureState.lastSelectedNodeId);
 153 |       setSelectedNodeId(futureState.selectedNodeId);
 154 | 
 155 |       autoZoomIfNecessary();
 156 |     }
 157 |   };
 158 | 
 159 |   /*//////////////////////////////////////////////////////////////
 160 |                         CORE REACT FLOW LOGIC
 161 |   //////////////////////////////////////////////////////////////*/
 162 | 
 163 |   const { setViewport, fitView } = useReactFlow();
 164 | 
 165 |   const [reactFlow, setReactFlow] = useState<ReactFlowInstance | null>(null);
 166 | 
 167 |   const [nodes, setNodes, onNodesChange] = useNodesState([]);
 168 |   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 169 | 
 170 |   const edgeUpdateSuccessful = useRef(true);
 171 | 
 172 |   const onEdgeUpdateStart = useCallback(() => {
 173 |     edgeUpdateSuccessful.current = false;
 174 |   }, []);
 175 | 
 176 |   const onEdgeUpdate = (oldEdge: Edge<any>, newConnection: Connection) => {
 177 |     if (
 178 |       !getConnectionAllowed(nodes, edges, {
 179 |         source: newConnection.source!,
 180 |         target: newConnection.target!,
 181 |       })
 182 |     )
 183 |       return;
 184 | 
 185 |     edgeUpdateSuccessful.current = true;
 186 |     setEdges((edges) => updateEdge(oldEdge, newConnection, edges));
 187 |   };
 188 | 
 189 |   const onEdgeUpdateEnd = useCallback((_: unknown, edge: Edge<any>) => {
 190 |     if (!edgeUpdateSuccessful.current) {
 191 |       setEdges((edges) => edges.filter((e) => e.id !== edge.id));
 192 |     }
 193 | 
 194 |     edgeUpdateSuccessful.current = true;
 195 |   }, []);
 196 | 
 197 |   const onConnect = (connection: Edge<any> | Connection) => {
 198 |     if (
 199 |       !getConnectionAllowed(nodes, edges, {
 200 |         source: connection.source!,
 201 |         target: connection.target!,
 202 |       })
 203 |     )
 204 |       return;
 205 | 
 206 |     takeSnapshot();
 207 |     setEdges((eds) => addEdge({ ...connection }, eds));
 208 |   };
 209 | 
 210 |   const autoZoom = () => setTimeout(() => fitView(FIT_VIEW_SETTINGS), 50);
 211 | 
 212 |   const autoZoomIfNecessary = () => {
 213 |     if (settings.autoZoom) autoZoom();
 214 |   };
 215 | 
 216 |   const save = () => {
 217 |     if (reactFlow) {
 218 |       localStorage.setItem(
 219 |         REACT_FLOW_LOCAL_STORAGE_KEY,
 220 |         JSON.stringify(reactFlow.toObject())
 221 |       );
 222 | 
 223 |       console.log("Saved React Flow state!");
 224 |     }
 225 |   };
 226 | 
 227 |   // Auto save.
 228 |   const isSavingReactFlow = useDebouncedEffect(
 229 |     save,
 230 |     1000, // 1 second.
 231 |     [reactFlow, nodes, edges]
 232 |   );
 233 | 
 234 |   // Auto restore on load.
 235 |   useEffect(() => {
 236 |     if (reactFlow) {
 237 |       const rawFlow = localStorage.getItem(REACT_FLOW_LOCAL_STORAGE_KEY);
 238 | 
 239 |       const flow: ReactFlowJsonObject = rawFlow ? JSON.parse(rawFlow) : null;
 240 | 
 241 |       // Get the content of the newTreeWith query param.
 242 |       const content = getQueryParam(NEW_TREE_CONTENT_QUERY_PARAM);
 243 | 
 244 |       if (flow) {
 245 |         console.log("Restoring react flow from local storage.");
 246 | 
 247 |         setEdges(flow.edges || []);
 248 |         setViewport(flow.viewport);
 249 | 
 250 |         const nodes = flow.nodes; // For brevity.
 251 | 
 252 |         if (nodes.length > 0) {
 253 |           // Either the first selected node we find, or the first node in the array.
 254 |           const toSelect = nodes.find((node) => node.selected)?.id ?? nodes[0].id;
 255 | 
 256 |           // Add the nodes to the React Flow array and select the node.
 257 |           selectNode(toSelect, () => nodes);
 258 | 
 259 |           // If there was a newTreeWith query param, create a new tree with that content.
 260 |           // We pass false for forceAutoZoom because we'll do it 500ms later to avoid lag.
 261 |           if (content) newUserNodeLinkedToANewSystemNode(content, false);
 262 |         } else newUserNodeLinkedToANewSystemNode(content, false); // Create a new node if there are none.
 263 |       } else newUserNodeLinkedToANewSystemNode(content, false); // Create a new node if there are none.
 264 | 
 265 |       setTimeout(() => {
 266 |         // Do this with a more generous timeout to make sure
 267 |         // the nodes are rendered and the settings have loaded in.
 268 |         if (settings.autoZoom) fitView(FIT_VIEW_SETTINGS);
 269 |       }, 500);
 270 | 
 271 |       resetURL(); // Get rid of the query params.
 272 |     }
 273 |   }, [reactFlow]);
 274 | 
 275 |   /*//////////////////////////////////////////////////////////////
 276 |                           AI PROMPT CALLBACKS
 277 |   //////////////////////////////////////////////////////////////*/
 278 | 
 279 |   // Takes a prompt, submits it to the GPT API with n responses,
 280 |   // then creates a child node for each response under the selected node.
 281 |   const submitPrompt = async (overrideExistingIfPossible: boolean) => {
 282 |     takeSnapshot();
 283 | 
 284 |     if (MIXPANEL_TOKEN) mixpanel.track("Submitted Prompt");
 285 | 
 286 |     const responses = settings.n;
 287 |     const temp = settings.temp;
 288 |     const model = settings.model;
 289 | 
 290 |     const parentNodeLineage = selectedNodeLineage;
 291 |     const parentNodeId = selectedNodeLineage[0].id;
 292 | 
 293 |     const newNodes = [...nodes];
 294 | 
 295 |     const currentNode = getFluxNode(newNodes, parentNodeId)!;
 296 |     const currentNodeChildren = getFluxNodeGPTChildren(newNodes, edges, parentNodeId);
 297 | 
 298 |     let firstCompletionId: string | undefined;
 299 | 
 300 |     // Update newNodes, adding new child nodes as
 301 |     // needed, re-using existing ones wherever possible if overrideExistingIfPossible is set.
 302 |     for (let i = 0; i < responses; i++) {
 303 |       // If we have enough children, and overrideExistingIfPossible is true, we'll just re-use one.
 304 |       if (overrideExistingIfPossible && i < currentNodeChildren.length) {
 305 |         const childNode = currentNodeChildren[i];
 306 | 
 307 |         if (i === 0) firstCompletionId = childNode.id;
 308 | 
 309 |         const idx = newNodes.findIndex((node) => node.id === childNode.id);
 310 | 
 311 |         newNodes[idx] = {
 312 |           ...childNode,
 313 |           data: {
 314 |             ...childNode.data,
 315 |             text: "",
 316 |             label: displayNameFromFluxNodeType(FluxNodeType.GPT),
 317 |             fluxNodeType: FluxNodeType.GPT,
 318 |             generating: true,
 319 |           },
 320 |           style: {
 321 |             ...childNode.style,
 322 |             background: getFluxNodeTypeColor(FluxNodeType.GPT),
 323 |           },
 324 |         };
 325 |       } else {
 326 |         const id = generateNodeId();
 327 | 
 328 |         if (i === 0) firstCompletionId = id;
 329 | 
 330 |         // Otherwise, we'll create a new node.
 331 |         newNodes.push(
 332 |           newFluxNode({
 333 |             id,
 334 |             // Position it 50px below the current node, offset
 335 |             // horizontally according to the number of responses
 336 |             // such that the middle response is right below the current node.
 337 |             // Note that node x y coords are the top left corner of the node,
 338 |             // so we need to offset by at the width of the node (150px).
 339 |             x:
 340 |               (currentNodeChildren.length > 0
 341 |                 ? // If there are already children we want to put the
 342 |                   // next child to the right of the furthest right one.
 343 |                   currentNodeChildren.reduce((prev, current) =>
 344 |                     prev.position.x > current.position.x ? prev : current
 345 |                   ).position.x +
 346 |                   (responses / 2) * 180 +
 347 |                   90
 348 |                 : currentNode.position.x) +
 349 |               (i - (responses - 1) / 2) * 180,
 350 |             // Add OVERLAP_RANDOMNESS_MAX of randomness to the y position so that nodes don't overlap.
 351 |             y: currentNode.position.y + 100 + Math.random() * OVERLAP_RANDOMNESS_MAX,
 352 |             fluxNodeType: FluxNodeType.GPT,
 353 |             text: "",
 354 |             generating: true,
 355 |           })
 356 |         );
 357 |       }
 358 |     }
 359 | 
 360 |     if (firstCompletionId === undefined) throw new Error("No first completion id!");
 361 | 
 362 |     (async () => {
 363 |       const stream = await OpenAI(
 364 |         "chat",
 365 |         {
 366 |           model,
 367 |           n: responses,
 368 |           temperature: temp,
 369 |           messages: messagesFromLineage(parentNodeLineage, settings),
 370 |         },
 371 |         { apiKey: apiKey!, mode: "raw" }
 372 |       );
 373 | 
 374 |       const DECODER = new TextDecoder();
 375 | 
 376 |       for await (const chunk of yieldStream(stream)) {
 377 |         try {
 378 |           const decoded = JSON.parse(DECODER.decode(chunk));
 379 | 
 380 |           if (decoded.choices === undefined)
 381 |             throw new Error(
 382 |               "No choices in response. Decoded response: " + JSON.stringify(decoded)
 383 |             );
 384 | 
 385 |           const choice: CreateChatCompletionStreamResponseChoicesInner =
 386 |             decoded.choices[0];
 387 | 
 388 |           if (choice.index === undefined)
 389 |             throw new Error(
 390 |               "No index in choice. Decoded choice: " + JSON.stringify(choice)
 391 |             );
 392 | 
 393 |           const correspondingNodeId =
 394 |             // If we re-used a node we have to pull it from children array.
 395 |             overrideExistingIfPossible && choice.index < currentNodeChildren.length
 396 |               ? currentNodeChildren[choice.index].id
 397 |               : newNodes[newNodes.length - responses + choice.index].id;
 398 | 
 399 |           // The ChatGPT API will start by returning a
 400 |           // choice with only a role delta and no content.
 401 |           if (choice.delta?.content) {
 402 |             setNodes((newerNodes) => {
 403 |               return appendTextToFluxNodeAsGPT(newerNodes, {
 404 |                 id: correspondingNodeId,
 405 |                 text: choice.delta?.content ?? UNDEFINED_RESPONSE_STRING,
 406 |               });
 407 |             });
 408 |           }
 409 | 
 410 |           // If the choice has a finish reason, then it's the final
 411 |           // choice and we can mark it as no longer animated right now.
 412 |           if (choice.finish_reason !== null) {
 413 |             setNodes((nodes) => markFluxNodeAsDoneGenerating(nodes, correspondingNodeId));
 414 | 
 415 |             setEdges((edges) =>
 416 |               modifyFluxEdge(edges, {
 417 |                 source: parentNodeId,
 418 |                 target: correspondingNodeId,
 419 |                 animated: false,
 420 |               })
 421 |             );
 422 |           }
 423 |         } catch (err) {
 424 |           console.error(err);
 425 |         }
 426 |       }
 427 | 
 428 |       // Mark all the edges as no longer animated.
 429 |       for (let i = 0; i < responses; i++) {
 430 |         const correspondingNodeId =
 431 |           overrideExistingIfPossible && i < currentNodeChildren.length
 432 |             ? currentNodeChildren[i].id
 433 |             : newNodes[newNodes.length - responses + i].id;
 434 | 
 435 |         setNodes((nodes) => markFluxNodeAsDoneGenerating(nodes, correspondingNodeId));
 436 | 
 437 |         setEdges((edges) =>
 438 |           modifyFluxEdge(edges, {
 439 |             source: parentNodeId,
 440 |             target: correspondingNodeId,
 441 |             animated: false,
 442 |           })
 443 |         );
 444 |       }
 445 |     })().catch((err) =>
 446 |       toast({
 447 |         title: err.toString(),
 448 |         status: "error",
 449 |         ...TOAST_CONFIG,
 450 |       })
 451 |     );
 452 | 
 453 |     setNodes(markOnlyNodeAsSelected(newNodes, firstCompletionId!));
 454 | 
 455 |     setLastSelectedNodeId(selectedNodeId);
 456 |     setSelectedNodeId(firstCompletionId);
 457 | 
 458 |     setEdges((edges) => {
 459 |       let newEdges = [...edges];
 460 | 
 461 |       for (let i = 0; i < responses; i++) {
 462 |         // Update the links between
 463 |         // re-used nodes if necessary.
 464 |         if (overrideExistingIfPossible && i < currentNodeChildren.length) {
 465 |           const childId = currentNodeChildren[i].id;
 466 | 
 467 |           const idx = newEdges.findIndex(
 468 |             (edge) => edge.source === parentNodeId && edge.target === childId
 469 |           );
 470 | 
 471 |           newEdges[idx] = {
 472 |             ...newEdges[idx],
 473 |             animated: true,
 474 |           };
 475 |         } else {
 476 |           // The new nodes are added to the end of the array, so we need to
 477 |           // subtract responses from and add i to length of the array to access.
 478 |           const childId = newNodes[newNodes.length - responses + i].id;
 479 | 
 480 |           // Otherwise, add a new edge.
 481 |           newEdges.push(
 482 |             newFluxEdge({
 483 |               source: parentNodeId,
 484 |               target: childId,
 485 |               animated: true,
 486 |             })
 487 |           );
 488 |         }
 489 |       }
 490 | 
 491 |       return newEdges;
 492 |     });
 493 | 
 494 |     autoZoomIfNecessary();
 495 |   };
 496 | 
 497 |   const completeNextWords = () => {
 498 |     takeSnapshot();
 499 | 
 500 |     const temp = settings.temp;
 501 | 
 502 |     const parentNodeLineage = selectedNodeLineage;
 503 |     const parentNodeId = parentNodeLineage[0].id;
 504 | 
 505 |     (async () => {
 506 |       // TODO: Stop sequences for user/assistant/etc? min tokens?
 507 |       // Select between instruction and auto completer?
 508 |       const stream = await OpenAI(
 509 |         "completions",
 510 |         {
 511 |           model: "text-davinci-003", // TODO: Allow customizing.
 512 |           temperature: temp, // TODO: Allow customizing.
 513 |           prompt: promptFromLineage(parentNodeLineage, settings),
 514 |           max_tokens: 250, // Allow customizing.
 515 |           stop: ["\n\n", "assistant:", "user:"], // TODO: Allow customizing.
 516 |         },
 517 |         { apiKey: apiKey!, mode: "raw" }
 518 |       );
 519 | 
 520 |       const DECODER = new TextDecoder();
 521 | 
 522 |       for await (const chunk of yieldStream(stream)) {
 523 |         try {
 524 |           const decoded = JSON.parse(DECODER.decode(chunk));
 525 | 
 526 |           if (decoded.choices === undefined)
 527 |             throw new Error(
 528 |               "No choices in response. Decoded response: " + JSON.stringify(decoded)
 529 |             );
 530 | 
 531 |           const choice: CreateCompletionResponseChoicesInner = decoded.choices[0];
 532 | 
 533 |           setNodes((newNodes) =>
 534 |             appendTextToFluxNodeAsGPT(newNodes, {
 535 |               id: parentNodeId,
 536 |               text: choice.text ?? UNDEFINED_RESPONSE_STRING,
 537 |             })
 538 |           );
 539 |         } catch (err) {
 540 |           console.error(err);
 541 |         }
 542 |       }
 543 |     })().catch((err) => console.error(err));
 544 |   };
 545 | 
 546 |   /*//////////////////////////////////////////////////////////////
 547 |                           SELECTED NODE LOGIC
 548 |   //////////////////////////////////////////////////////////////*/
 549 | 
 550 |   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
 551 |   const [lastSelectedNodeId, setLastSelectedNodeId] = useState<string | null>(null);
 552 | 
 553 |   const selectedNodeLineage =
 554 |     selectedNodeId !== null ? getFluxNodeLineage(nodes, edges, selectedNodeId) : [];
 555 | 
 556 |   /*//////////////////////////////////////////////////////////////
 557 |                         NODE MUTATION CALLBACKS
 558 |   //////////////////////////////////////////////////////////////*/
 559 | 
 560 |   const newUserNodeLinkedToANewSystemNode = (
 561 |     text: string | null = "",
 562 |     forceAutoZoom: boolean = true
 563 |   ) => {
 564 |     takeSnapshot();
 565 | 
 566 |     const systemId = generateNodeId();
 567 |     const userId = generateNodeId();
 568 | 
 569 |     selectNode(userId, (nodes) =>
 570 |       addUserNodeLinkedToASystemNode(
 571 |         nodes,
 572 |         settings.defaultPreamble,
 573 |         text,
 574 |         systemId,
 575 |         userId
 576 |       )
 577 |     );
 578 | 
 579 |     setEdges((edges) =>
 580 |       addFluxEdge(edges, {
 581 |         source: systemId,
 582 |         target: userId,
 583 |         animated: false,
 584 |       })
 585 |     );
 586 | 
 587 |     if (forceAutoZoom) autoZoom();
 588 |   };
 589 | 
 590 |   const newConnectedToSelectedNode = (type: FluxNodeType) => {
 591 |     const selectedNode = getFluxNode(nodes, selectedNodeId!);
 592 | 
 593 |     if (selectedNode) {
 594 |       takeSnapshot();
 595 | 
 596 |       const selectedNodeChildren = getFluxNodeChildren(nodes, edges, selectedNodeId!);
 597 | 
 598 |       const id = generateNodeId();
 599 | 
 600 |       selectNode(id, (nodes) =>
 601 |         addFluxNode(nodes, {
 602 |           id,
 603 |           x:
 604 |             selectedNodeChildren.length > 0
 605 |               ? // If there are already children we want to put the
 606 |                 // next child to the right of the furthest right one.
 607 |                 selectedNodeChildren.reduce((prev, current) =>
 608 |                   prev.position.x > current.position.x ? prev : current
 609 |                 ).position.x + 180
 610 |               : selectedNode.position.x,
 611 |           // Add OVERLAP_RANDOMNESS_MAX of randomness to
 612 |           // the y position so that nodes don't overlap.
 613 |           y: selectedNode.position.y + 100 + Math.random() * OVERLAP_RANDOMNESS_MAX,
 614 |           fluxNodeType: type,
 615 |           text: "",
 616 |           generating: false,
 617 |         })
 618 |       );
 619 | 
 620 |       setEdges((edges) =>
 621 |         addFluxEdge(edges, {
 622 |           source: selectedNodeId!,
 623 |           target: id,
 624 |           animated: false,
 625 |         })
 626 |       );
 627 | 
 628 |       autoZoomIfNecessary();
 629 |     }
 630 |   };
 631 | 
 632 |   const deleteSelectedNodes = () => {
 633 |     takeSnapshot();
 634 | 
 635 |     const selectedNodes = nodes.filter((node) => node.selected);
 636 | 
 637 |     if (
 638 |       selectedNodeId && // There's a selected node under the hood.
 639 |       (selectedNodes.length === 0 || // There are no selected nodes.
 640 |         // There is only one selected node, and it's the selected node.
 641 |         (selectedNodes.length === 1 && selectedNodes[0].id === selectedNodeId))
 642 |     ) {
 643 |       // Try to move to sibling first.
 644 |       const hasSibling = moveToRightSibling();
 645 | 
 646 |       // If there's no sibling, move to parent.
 647 |       if (!hasSibling) moveToParent();
 648 | 
 649 |       setNodes((nodes) => deleteFluxNode(nodes, selectedNodeId));
 650 |     } else {
 651 |       setNodes(deleteSelectedFluxNodes);
 652 | 
 653 |       // If any of the selected nodes are the selected node, unselect it.
 654 |       if (selectedNodeId && selectedNodes.some((node) => node.id === selectedNodeId)) {
 655 |         setLastSelectedNodeId(null);
 656 |         setSelectedNodeId(null);
 657 |       }
 658 |     }
 659 | 
 660 |     autoZoomIfNecessary();
 661 |   };
 662 | 
 663 |   const onClear = () => {
 664 |     if (confirm("Are you sure you want to delete all nodes?")) {
 665 |       takeSnapshot();
 666 | 
 667 |       setNodes([]);
 668 |       setEdges([]);
 669 |       setViewport({ x: 0, y: 0, zoom: 1 });
 670 |     }
 671 |   };
 672 | 
 673 |   /*//////////////////////////////////////////////////////////////
 674 |                       NODE SELECTION CALLBACKS
 675 |   //////////////////////////////////////////////////////////////*/
 676 | 
 677 |   const selectNode = (
 678 |     id: string,
 679 |     computeNewNodes?: (currNodes: Node<FluxNodeData>[]) => Node<FluxNodeData>[]
 680 |   ) => {
 681 |     setLastSelectedNodeId(selectedNodeId);
 682 |     setSelectedNodeId(id);
 683 |     setNodes((currNodes) =>
 684 |       // If we were passed a computeNewNodes function, use it, otherwise just use the current nodes.
 685 |       markOnlyNodeAsSelected(computeNewNodes ? computeNewNodes(currNodes) : currNodes, id)
 686 |     );
 687 |   };
 688 | 
 689 |   const moveToChild = () => {
 690 |     const children = getFluxNodeChildren(nodes, edges, selectedNodeId!);
 691 | 
 692 |     if (children.length > 0) {
 693 |       selectNode(
 694 |         lastSelectedNodeId !== null &&
 695 |           children.some((node) => node.id == lastSelectedNodeId)
 696 |           ? lastSelectedNodeId
 697 |           : children[0].id
 698 |       );
 699 | 
 700 |       return true;
 701 |     } else {
 702 |       return false;
 703 |     }
 704 |   };
 705 | 
 706 |   const moveToParent = () => {
 707 |     const parent = getFluxNodeParent(nodes, edges, selectedNodeId!);
 708 | 
 709 |     if (parent) {
 710 |       selectNode(parent.id);
 711 | 
 712 |       return true;
 713 |     } else {
 714 |       return false;
 715 |     }
 716 |   };
 717 | 
 718 |   const moveToLeftSibling = () => {
 719 |     const siblings = getFluxNodeSiblings(nodes, edges, selectedNodeId!);
 720 | 
 721 |     if (siblings.length > 1) {
 722 |       const currentIndex = siblings.findIndex((node) => node.id == selectedNodeId!)!;
 723 | 
 724 |       selectNode(siblings[mod(currentIndex - 1, siblings.length)].id);
 725 | 
 726 |       return true;
 727 |     } else {
 728 |       return false;
 729 |     }
 730 |   };
 731 | 
 732 |   const moveToRightSibling = () => {
 733 |     const siblings = getFluxNodeSiblings(nodes, edges, selectedNodeId!);
 734 | 
 735 |     if (siblings.length > 1) {
 736 |       const currentIndex = siblings.findIndex((node) => node.id == selectedNodeId!)!;
 737 | 
 738 |       selectNode(siblings[mod(currentIndex + 1, siblings.length)].id);
 739 | 
 740 |       return true;
 741 |     } else {
 742 |       return false;
 743 |     }
 744 |   };
 745 | 
 746 |   /*//////////////////////////////////////////////////////////////
 747 |                          SETTINGS MODAL LOGIC
 748 |   //////////////////////////////////////////////////////////////*/
 749 | 
 750 |   const {
 751 |     isOpen: isSettingsModalOpen,
 752 |     onOpen: onOpenSettingsModal,
 753 |     onClose: onCloseSettingsModal,
 754 |     onToggle: onToggleSettingsModal,
 755 |   } = useDisclosure();
 756 | 
 757 |   const [settings, setSettings] = useState<Settings>(() => {
 758 |     const rawSettings = localStorage.getItem(MODEL_SETTINGS_LOCAL_STORAGE_KEY);
 759 | 
 760 |     if (rawSettings !== null) {
 761 |       console.log("Restoring settings from local storage.");
 762 | 
 763 |       return JSON.parse(rawSettings) as Settings;
 764 |     } else {
 765 |       return DEFAULT_SETTINGS;
 766 |     }
 767 |   });
 768 | 
 769 |   const isGPT4 = settings.model.includes("gpt-4");
 770 | 
 771 |   // Auto save.
 772 |   const isSavingSettings = useDebouncedEffect(
 773 |     () => {
 774 |       console.log("Saved settings!");
 775 | 
 776 |       localStorage.setItem(MODEL_SETTINGS_LOCAL_STORAGE_KEY, JSON.stringify(settings));
 777 |     },
 778 |     1000, // 1 second.
 779 |     [settings]
 780 |   );
 781 | 
 782 |   /*//////////////////////////////////////////////////////////////
 783 |                             API KEY LOGIC
 784 |   //////////////////////////////////////////////////////////////*/
 785 | 
 786 |   const [apiKey, setApiKey] = useLocalStorage<string>(API_KEY_LOCAL_STORAGE_KEY);
 787 | 
 788 |   const isAnythingLoading = isSavingReactFlow || isSavingSettings;
 789 | 
 790 |   useBeforeunload((event: BeforeUnloadEvent) => {
 791 |     // Prevent leaving the page before saving.
 792 |     if (isAnythingLoading) event.preventDefault();
 793 |   });
 794 | 
 795 |   /*//////////////////////////////////////////////////////////////
 796 |                         COPY MESSAGES LOGIC
 797 |   //////////////////////////////////////////////////////////////*/
 798 | 
 799 |   const copyMessagesToClipboard = async () => {
 800 |     const messages = promptFromLineage(selectedNodeLineage, settings);
 801 | 
 802 |     if (await copySnippetToClipboard(messages)) {
 803 |       toast({
 804 |         title: "Copied messages to clipboard!",
 805 |         status: "success",
 806 |         ...TOAST_CONFIG,
 807 |       });
 808 |     } else {
 809 |       toast({
 810 |         title: "Failed to copy messages to clipboard!",
 811 |         status: "error",
 812 |         ...TOAST_CONFIG,
 813 |       });
 814 |     }
 815 |   };
 816 | 
 817 |   /*//////////////////////////////////////////////////////////////
 818 |                          RENAME NODE LOGIC
 819 |   //////////////////////////////////////////////////////////////*/
 820 | 
 821 |   const showRenameInput = () => {
 822 |     takeSnapshot();
 823 | 
 824 |     const selectedNode = nodes.find((node) => node.selected);
 825 |     const nodeId = selectedNode?.id ?? selectedNodeId;
 826 | 
 827 |     if (nodeId) {
 828 |       setNodes((nodes) =>
 829 |         modifyReactFlowNodeProperties(nodes, {
 830 |           id: nodeId,
 831 |           type: ReactFlowNodeTypes.LabelUpdater,
 832 |           draggable: false,
 833 |         })
 834 |       );
 835 |     }
 836 |   };
 837 | 
 838 |   /*//////////////////////////////////////////////////////////////
 839 |                         WINDOW RESIZE LOGIC
 840 |   //////////////////////////////////////////////////////////////*/
 841 | 
 842 |   useDebouncedWindowResize(autoZoomIfNecessary, 100);
 843 | 
 844 |   /*//////////////////////////////////////////////////////////////
 845 |                           HOTKEYS LOGIC
 846 |   //////////////////////////////////////////////////////////////*/
 847 | 
 848 |   useHotkeys("meta+s", save, HOTKEY_CONFIG);
 849 | 
 850 |   useHotkeys(
 851 |     "meta+p",
 852 |     () => newConnectedToSelectedNode(FluxNodeType.User),
 853 |     HOTKEY_CONFIG
 854 |   );
 855 |   useHotkeys(
 856 |     "meta+u",
 857 |     () => newConnectedToSelectedNode(FluxNodeType.System),
 858 |     HOTKEY_CONFIG
 859 |   );
 860 | 
 861 |   useHotkeys("meta+shift+p", () => newUserNodeLinkedToANewSystemNode(), HOTKEY_CONFIG);
 862 | 
 863 |   useHotkeys("meta+.", () => fitView(FIT_VIEW_SETTINGS), HOTKEY_CONFIG);
 864 |   useHotkeys("meta+/", onToggleSettingsModal, HOTKEY_CONFIG);
 865 |   useHotkeys("meta+shift+backspace", onClear, HOTKEY_CONFIG);
 866 | 
 867 |   useHotkeys("meta+z", undo, HOTKEY_CONFIG);
 868 |   useHotkeys("meta+shift+z", redo, HOTKEY_CONFIG);
 869 | 
 870 |   useHotkeys("meta+e", showRenameInput, HOTKEY_CONFIG);
 871 | 
 872 |   useHotkeys("meta+up", moveToParent, HOTKEY_CONFIG);
 873 |   useHotkeys("meta+down", moveToChild, HOTKEY_CONFIG);
 874 |   useHotkeys("meta+left", moveToLeftSibling, HOTKEY_CONFIG);
 875 |   useHotkeys("meta+right", moveToRightSibling, HOTKEY_CONFIG);
 876 |   useHotkeys("meta+return", () => submitPrompt(false), HOTKEY_CONFIG);
 877 |   useHotkeys("meta+shift+return", () => submitPrompt(true), HOTKEY_CONFIG);
 878 |   useHotkeys("meta+k", completeNextWords, HOTKEY_CONFIG);
 879 |   useHotkeys("meta+backspace", deleteSelectedNodes, HOTKEY_CONFIG);
 880 |   useHotkeys("ctrl+c", copyMessagesToClipboard, HOTKEY_CONFIG);
 881 | 
 882 |   /*//////////////////////////////////////////////////////////////
 883 |                               APP
 884 |   //////////////////////////////////////////////////////////////*/
 885 | 
 886 |   return (
 887 |     <>
 888 |       {!isValidAPIKey(apiKey) && <APIKeyModal apiKey={apiKey} setApiKey={setApiKey} />}
 889 | 
 890 |       <SettingsModal
 891 |         settings={settings}
 892 |         setSettings={setSettings}
 893 |         isOpen={isSettingsModalOpen}
 894 |         onClose={onCloseSettingsModal}
 895 |         apiKey={apiKey}
 896 |         setApiKey={setApiKey}
 897 |       />
 898 |       <Column
 899 |         mainAxisAlignment="center"
 900 |         crossAxisAlignment="center"
 901 |         height="100vh"
 902 |         width="100%"
 903 |       >
 904 |         <Row mainAxisAlignment="flex-start" crossAxisAlignment="stretch" expand>
 905 |           <Resizable
 906 |             maxWidth="75%"
 907 |             minWidth="15%"
 908 |             defaultSize={{
 909 |               width: "50%",
 910 |               height: "auto",
 911 |             }}
 912 |             enable={{
 913 |               top: false,
 914 |               right: true,
 915 |               bottom: false,
 916 |               left: false,
 917 |               topRight: false,
 918 |               bottomRight: false,
 919 |               bottomLeft: false,
 920 |               topLeft: false,
 921 |             }}
 922 |             onResizeStop={autoZoomIfNecessary}
 923 |           >
 924 |             <Column
 925 |               mainAxisAlignment="center"
 926 |               crossAxisAlignment="center"
 927 |               borderRightColor="#EEEEEE"
 928 |               borderRightWidth="1px"
 929 |               expand
 930 |             >
 931 |               <Row
 932 |                 mainAxisAlignment="space-between"
 933 |                 crossAxisAlignment="center"
 934 |                 width="100%"
 935 |                 height="50px"
 936 |                 px="20px"
 937 |                 borderBottomColor="#EEEEEE"
 938 |                 borderBottomWidth="1px"
 939 |               >
 940 |                 <NavigationBar
 941 |                   newUserNodeLinkedToANewSystemNode={() =>
 942 |                     newUserNodeLinkedToANewSystemNode()
 943 |                   }
 944 |                   newConnectedToSelectedNode={newConnectedToSelectedNode}
 945 |                   deleteSelectedNodes={deleteSelectedNodes}
 946 |                   submitPrompt={() => submitPrompt(false)}
 947 |                   regenerate={() => submitPrompt(true)}
 948 |                   completeNextWords={completeNextWords}
 949 |                   undo={undo}
 950 |                   redo={redo}
 951 |                   onClear={onClear}
 952 |                   copyMessagesToClipboard={copyMessagesToClipboard}
 953 |                   showRenameInput={showRenameInput}
 954 |                   moveToParent={moveToParent}
 955 |                   moveToChild={moveToChild}
 956 |                   moveToLeftSibling={moveToLeftSibling}
 957 |                   moveToRightSibling={moveToRightSibling}
 958 |                   autoZoom={autoZoom}
 959 |                   onOpenSettingsModal={() => {
 960 |                     if (MIXPANEL_TOKEN) mixpanel.track("Opened Settings Modal");
 961 |                     onOpenSettingsModal();
 962 |                   }}
 963 |                 />
 964 | 
 965 |                 <Box ml="20px">
 966 |                   {isAnythingLoading ? (
 967 |                     <Spinner size="sm" mt="6px" color={"#404040"} />
 968 |                   ) : (
 969 |                     <CheckCircleIcon color={"#404040"} />
 970 |                   )}
 971 |                 </Box>
 972 |               </Row>
 973 | 
 974 |               <ReactFlow
 975 |                 proOptions={{ hideAttribution: true }}
 976 |                 nodes={nodes}
 977 |                 maxZoom={1.5}
 978 |                 minZoom={0}
 979 |                 edges={edges}
 980 |                 onInit={setReactFlow}
 981 |                 onNodesChange={onNodesChange}
 982 |                 onEdgesChange={onEdgesChange}
 983 |                 onEdgesDelete={takeSnapshot}
 984 |                 onNodesDelete={takeSnapshot}
 985 |                 onEdgeUpdateStart={onEdgeUpdateStart}
 986 |                 onEdgeUpdate={onEdgeUpdate}
 987 |                 onEdgeUpdateEnd={onEdgeUpdateEnd}
 988 |                 onConnect={onConnect}
 989 |                 nodeTypes={REACT_FLOW_NODE_TYPES}
 990 |                 // Causes clicks to also trigger auto zoom.
 991 |                 // onNodeDragStop={autoZoomIfNecessary}
 992 |                 onSelectionDragStop={autoZoomIfNecessary}
 993 |                 selectionKeyCode={null}
 994 |                 multiSelectionKeyCode="Shift"
 995 |                 panActivationKeyCode={null}
 996 |                 deleteKeyCode={null}
 997 |                 panOnDrag={false}
 998 |                 selectionOnDrag={true}
 999 |                 zoomOnScroll={false}
1000 |                 zoomActivationKeyCode={null}
1001 |                 panOnScroll={true}
1002 |                 selectionMode={SelectionMode.Partial}
1003 |                 onNodeClick={(_, node) => {
1004 |                   setLastSelectedNodeId(selectedNodeId);
1005 |                   setSelectedNodeId(node.id);
1006 |                 }}
1007 |               >
1008 |                 <Background />
1009 |               </ReactFlow>
1010 |             </Column>
1011 |           </Resizable>
1012 | 
1013 |           <Box height="100%" width="100%" overflowY="scroll" p={4}>
1014 |             {selectedNodeLineage.length >= 1 ? (
1015 |               <Prompt
1016 |                 settings={settings}
1017 |                 setSettings={setSettings}
1018 |                 isGPT4={isGPT4}
1019 |                 selectNode={selectNode}
1020 |                 newConnectedToSelectedNode={newConnectedToSelectedNode}
1021 |                 lineage={selectedNodeLineage}
1022 |                 onType={(text: string) => {
1023 |                   takeSnapshot();
1024 |                   setNodes((nodes) =>
1025 |                     modifyFluxNodeText(nodes, {
1026 |                       asHuman: true,
1027 |                       id: selectedNodeId!,
1028 |                       text,
1029 |                     })
1030 |                   );
1031 |                 }}
1032 |                 submitPrompt={() => submitPrompt(false)}
1033 |               />
1034 |             ) : (
1035 |               <Column
1036 |                 expand
1037 |                 textAlign="center"
1038 |                 mainAxisAlignment={"center"}
1039 |                 crossAxisAlignment={"center"}
1040 |               >
1041 |                 <BigButton
1042 |                   tooltip="⇧⌘P"
1043 |                   width="400px"
1044 |                   height="100px"
1045 |                   fontSize="xl"
1046 |                   onClick={() => newUserNodeLinkedToANewSystemNode()}
1047 |                   color={getFluxNodeTypeDarkColor(FluxNodeType.GPT)}
1048 |                 >
1049 |                   Create a new conversation tree
1050 |                 </BigButton>
1051 |               </Column>
1052 |             )}
1053 |           </Box>
1054 |         </Row>
1055 |       </Column>
1056 |     </>
1057 |   );
1058 | }
1059 | 
1060 | export default App;
1061 | 


--------------------------------------------------------------------------------