refactor: claude updated with main (#81)

* fix: typo * feat: IOS PWA * nit: reorder (trying to fix ci) * fix: apple-mobile-web-app-status-bar-style * fix: restore default status bar style * fix: theme color * nit: reorder * fix: fixes "[object Object]" copy code button output (#68) * fixes object copy code error * Update src/components/utils/Markdown.tsx --------- Co-authored-by: t11s <[email protected]> * feat: add gpt-4-32k support * fix: copy messages to clipboard keybind * fix: markdown styling improvements, list item newline fix (#62) Co-authored-by: t11s <[email protected]> * nit: hr tweaks * nit: tweak red highlight (#64) Co-authored-by: t11s <[email protected]> * nit: restore shadow * docs: update repo links * docs: update description * feat: whisper support (#76) Co-authored-by: t11s <[email protected]> * nit: whitespace * feat: track whisper usage in mixpanel * feat: whisper transcription keybind * get claude working * add readme for self * cleanup * make title and link optional --------- Co-authored-by: t11s <[email protected]> Co-authored-by: jaavin <[email protected]>
paradigmxyz · Jun 10, 2023 · 8e2e240 · 8e2e240
1 parent 6a3ffc7
commit 8e2e240
Show file tree

Hide file tree

Showing 13 changed files with 273 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,14 @@
 <div align="center">
   <h1 align="center">Flux</h1>
   <p align="center">
-    LLM power tool
+    Graph-based LLM power tool for exploring many completions in parallel.
     <br />
     <br />
     <a href="https://twitter.com/transmissions11/status/1640775967856803840">Announcement</a>
     ·
     <a href="http://flux.paradigm.xyz">Try Online</a>
     ·
-    <a href="https://github.com/transmissions11/flux/issues">Report a Bug</a>
+    <a href="https://github.com/paradigmxyz/flux/issues">Report a Bug</a>
   </p>
 </div>
 
@@ -37,7 +37,7 @@ Visit [flux.paradigm.xyz](https://flux.paradigm.xyz) to try Flux online or follo
 ## Running Locally
 
 ```sh
-git clone https://github.com/transmissions11/flux.git
+git clone https://github.com/paradigmxyz/flux.git
 npm install
 npm run dev
 ```
@@ -46,4 +46,4 @@ Note: To run the `claude` branch locally, you will also need to [utilize this CO
 
 ## Contributing
 
-See the [open issues](https://github.com/transmissions11/flux/issues) for a list of proposed features (and known issues).
+See the [open issues](https://github.com/paradigmxyz/flux/issues) for a list of proposed features (and known issues).
diff --git a/index.html b/index.html
@@ -19,6 +19,12 @@
     <meta name="twitter:title" content="Flux" />
     <meta name="twitter:description" content="LLM power tool." />
     <meta name="twitter:image" content="https://flux.paradigm.xyz/meta.jpg" />
+
+    <meta name="theme-color" content="#ffffff" />
+
+    <meta name="apple-mobile-web-app-title" content="Flux" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "react-beforeunload": "^2.5.3",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.3.7",
+    "react-icons": "^4.8.0",
     "react-markdown": "^8.0.6",
     "react-textarea-autosize": "^8.4.0",
     "reactflow": "^11.7.0",

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -6,6 +6,7 @@ import { getFluxNodeTypeColor, getFluxNodeTypeDarkColor } from "../utils/color";
 import { getPlatformModifierKey, getPlatformModifierKeyText } from "../utils/platform";
 import {
   API_KEY_LOCAL_STORAGE_KEY,
+  OPEN_AI_API_KEY_LOCAL_STORAGE_KEY,
   DEFAULT_SETTINGS,
   FIT_VIEW_SETTINGS,
   HOTKEY_CONFIG,
@@ -855,6 +856,9 @@ function App() {
   //////////////////////////////////////////////////////////////*/
 
   const [apiKey, setApiKey] = useLocalStorage<string>(API_KEY_LOCAL_STORAGE_KEY);
+  const [openApiKey, setOpenApiKey] = useLocalStorage<string>(
+    OPEN_AI_API_KEY_LOCAL_STORAGE_KEY
+  );
 
   const isAnythingLoading = isSavingReactFlow || isSavingSettings;
 
@@ -992,6 +996,8 @@ function App() {
         onClose={onCloseSettingsModal}
         apiKey={apiKey}
         setApiKey={setApiKey}
+        openApiKey={openApiKey}
+        setOpenApiKey={setOpenApiKey}
       />
       <Column
         mainAxisAlignment="center"
@@ -1134,6 +1140,7 @@ function App() {
                   );
                 }}
                 submitPrompt={() => submitPrompt(false)}
+                openApiKey={openApiKey}
               />
             ) : (
               <Column

diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
@@ -13,6 +13,7 @@ import { useState, useEffect, useRef } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { Node, useReactFlow } from "reactflow";
 import { getPlatformModifierKeyText } from "../utils/platform";
+import { Whisper } from "./utils/Whisper";
 
 export function Prompt({
   lineage,
@@ -22,6 +23,7 @@ export function Prompt({
   newConnectedToSelectedNode,
   settings,
   setSettings,
+  openApiKey,
 }: {
   lineage: Node<FluxNodeData>[];
   onType: (text: string) => void;
@@ -30,6 +32,7 @@ export function Prompt({
   newConnectedToSelectedNode: (type: FluxNodeType) => void;
   settings: Settings;
   setSettings: (settings: Settings) => void;
+  openApiKey: string | null;
 }) {
   const { setNodes } = useReactFlow();
 
@@ -177,8 +180,8 @@ export function Prompt({
                     zIndex={10}
                     variant="outline"
                     border="0px"
-                    _hover={{ background: "none" }}
                     p={1}
+                    _hover={{ background: "none" }}
                   >
                     {data.streamId ? (
                       <NotAllowedIcon boxSize={4} />
@@ -200,25 +203,41 @@ export function Prompt({
                     crossAxisAlignment="flex-start"
                     borderRadius="6px"
                     wordBreak="break-word"
+                    minHeight={
+                      data.fluxNodeType === FluxNodeType.User && isLast && isEditing
+                        ? "75px"
+                        : "0px"
+                    }
                   >
                     {isLast && isEditing ? (
-                      <TextareaAutosize
-                        id="promptBox"
-                        style={{
-                          width: "100%",
-                          backgroundColor: "transparent",
-                          outline: "none",
-                        }}
-                        value={data.text ?? ""}
-                        onChange={(e) => onType(e.target.value)}
-                        placeholder={
-                          data.fluxNodeType === FluxNodeType.User
-                            ? "Write a poem about..."
-                            : data.fluxNodeType === FluxNodeType.System
-                            ? "You are ChatGPT..."
-                            : undefined
-                        }
-                      />
+                      <>
+                        <TextareaAutosize
+                          id="promptBox"
+                          style={{
+                            width: "100%",
+                            backgroundColor: "transparent",
+                            outline: "none",
+                          }}
+                          minRows={data.fluxNodeType === FluxNodeType.User ? 3 : 1}
+                          value={data.text ?? ""}
+                          onChange={(e) => onType(e.target.value)}
+                          placeholder={
+                            data.fluxNodeType === FluxNodeType.User
+                              ? "Write a poem about..."
+                              : data.fluxNodeType === FluxNodeType.System
+                              ? "You are ChatGPT..."
+                              : undefined
+                          }
+                        />
+                        {data.fluxNodeType === FluxNodeType.User && (
+                          <Whisper
+                            onConvertedText={(text: string) =>
+                              onType(`${data.text}${data.text ? " " : ""}${text}`)
+                            }
+                            apiKey={openApiKey}
+                          />
+                        )}
+                      </>
                     ) : (
                       <Markdown text={data.text} />
                     )}

diff --git a/src/components/modals/SettingsModal.tsx b/src/components/modals/SettingsModal.tsx
@@ -26,13 +26,17 @@ export const SettingsModal = memo(function SettingsModal({
   setSettings,
   apiKey,
   setApiKey,
+  openApiKey,
+  setOpenApiKey,
 }: {
   isOpen: boolean;
   onClose: () => void;
   settings: Settings;
   setSettings: (settings: Settings) => void;
   apiKey: string | null;
   setApiKey: (apiKey: string) => void;
+  openApiKey: string | null;
+  setOpenApiKey: (openApiKey: string) => void;
 }) {
   const reset = () => {
     if (
@@ -88,6 +92,15 @@ export const SettingsModal = memo(function SettingsModal({
 
           <APIKeyInput mt={4} width="100%" apiKey={apiKey} setApiKey={setApiKey} />
 
+          <APIKeyInput
+            title="OpenAI API Key"
+            link="https://platform.openai.com/account/api-keys"
+            mt={4}
+            width="100%"
+            apiKey={openApiKey}
+            setApiKey={setOpenApiKey}
+          />
+
           <LabeledSlider
             mt={4}
             label="Temperature (randomness)"

diff --git a/src/components/utils/APIKeyInput.tsx b/src/components/utils/APIKeyInput.tsx
@@ -4,18 +4,22 @@ import { LabeledPasswordInputWithLink } from "./LabeledInputs";
 export function APIKeyInput({
   apiKey,
   setApiKey,
+  title,
+  link,
   ...others
 }: {
   apiKey: string | null;
   setApiKey: (apiKey: string) => void;
+  title?: string;
+  link?: string;
 } & BoxProps) {
   return (
     <LabeledPasswordInputWithLink
       width="80%"
-      label="Anthropic API Key"
+      label={title ? title : "Anthropic API Key"}
       linkLabel="Get a key"
       placeholder="sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
-      link="https://console.anthropic.com"
+      link={link ? link : "https://console.anthropic.com"}
       value={apiKey ?? ""}
       setValue={setApiKey}
       {...others}

diff --git a/src/components/utils/Markdown.tsx b/src/components/utils/Markdown.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, memo, ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
 import "highlight.js/styles/atom-one-light.css";
 import rehypeHighlight from "rehype-highlight";
-import { Button, Box, Code, Text, useTheme } from "@chakra-ui/react";
+import { Button, Box, Code, Text, useTheme, List, ListItem } from "@chakra-ui/react";
 import { CopyIcon } from "@chakra-ui/icons";
 import { Row, Column } from "../../utils/chakra";
 import { copySnippetToClipboard } from "../../utils/clipboard";
@@ -76,6 +76,40 @@ export const Markdown = memo(function Markdown({ text }: { text: string }) {
           [rehypeHighlight, { ignoreMissing: true, languages: { solidity, yul } }],
         ]}
         components={{
+          ul({ children }) {
+            return (
+              <List styleType="disc" h="fit-content">
+                {children}
+              </List>
+            );
+          },
+          ol({ children }) {
+            return (
+              <List styleType="decimal" h="fit-content">
+                {children}
+              </List>
+            );
+          },
+          li({ children }) {
+            return (
+              <ListItem as="li" mb="0px" ml="20px">
+                {children?.filter(
+                  (child: ReactNode) =>
+                    !(typeof child === "string" && child.trim() === "")
+                )}
+              </ListItem>
+            );
+          },
+          blockquote({ children }) {
+            return (
+              <Box borderLeft="2px solid currentcolor" pl="20px">
+                {children?.filter(
+                  (child: ReactNode) =>
+                    !(typeof child === "string" && child.trim() === "")
+                )}
+              </Box>
+            );
+          },
           code({ node, inline, className, children, style, ...props }) {
             const match = /language-(\w+)/.exec(className || "");
 
@@ -136,6 +170,11 @@ const stringifyChildren = (children: ReactNode[]): string => {
           );
         }
 
+        // Ignore non-text ReactNodes, fixing [object Object] error.
+        if (typeof currentNode === "object") {
+          return concatenatedText;
+        }
+
         return concatenatedText + String(currentNode || "");
       }, "")
       // react-markdown sometimes includes a newline at the end of the children array.

diff --git a/src/components/utils/NavigationBar.tsx b/src/components/utils/NavigationBar.tsx
@@ -211,7 +211,10 @@ export function NavigationBar({
             <MenuDivider />
 
             <MenuGroup title="Copy">
-              <MenuItem command={`${modifierKeyText}C`} onClick={copyMessagesToClipboard}>
+              <MenuItem
+                command={`⇧${modifierKeyText}C`}
+                onClick={copyMessagesToClipboard}
+              >
                 Copy messages to clipboard
               </MenuItem>
             </MenuGroup>
@@ -234,7 +237,7 @@ export function NavigationBar({
                 Up to parent node
               </MenuItem>
               <MenuItem command={`${modifierKeyText}↓`} onClick={moveToChild}>
-                Down child node
+                Down to child node
               </MenuItem>
             </MenuGroup>