From 67432f9853d3c528aa9cb262d4118bf6cb11ad57 Mon Sep 17 00:00:00 2001 From: Ian Arawjo Date: Fri, 22 Mar 2024 21:21:46 -0400 Subject: [PATCH] wip --- chainforge/react-server/src/AiPopover.tsx | 6 +++--- chainforge/react-server/src/CodeEvaluatorNode.tsx | 15 +++------------ chainforge/react-server/src/CommentNode.tsx | 12 ++++++++++-- .../react-server/src/LLMResponseInspector.js | 7 +------ .../react-server/src/ModelSettingsModal.tsx | 14 ++++++++------ .../react-server/src/NodeLabelComponent.tsx | 1 - chainforge/react-server/src/SplitNode.tsx | 8 +------- chainforge/react-server/src/store.tsx | 1 + 8 files changed, 27 insertions(+), 37 deletions(-) diff --git a/chainforge/react-server/src/AiPopover.tsx b/chainforge/react-server/src/AiPopover.tsx index 688935c..25b7911 100644 --- a/chainforge/react-server/src/AiPopover.tsx +++ b/chainforge/react-server/src/AiPopover.tsx @@ -30,7 +30,7 @@ import { queryLLM } from "./backend/backend"; import { splitText } from "./SplitNode"; import { escapeBraces } from "./backend/template"; import { cleanMetavarsFilterFunc } from "./backend/utils"; -import { VarsContext } from "./backend/typing"; +import { Dict, VarsContext } from "./backend/typing"; const zeroGap = { gap: "0rem" }; const popoverShadow = "rgb(38, 57, 77) 0px 10px 30px -14px"; @@ -227,8 +227,8 @@ export function AIPopover({ } export interface AIGenReplaceItemsPopoverProps { - // A list of strings for the Extend feature to use as a basis. - values: string[]; + // Strings for the Extend feature to use as a basis. + values: Dict | string[]; // A function that takes a list of strings that the popover will call to add new values onAddValues: (newVals: string[]) => void; // A function that takes a list of strings that the popover will call to replace the existing values diff --git a/chainforge/react-server/src/CodeEvaluatorNode.tsx b/chainforge/react-server/src/CodeEvaluatorNode.tsx index 4a67858..c19f0e0 100644 --- a/chainforge/react-server/src/CodeEvaluatorNode.tsx +++ b/chainforge/react-server/src/CodeEvaluatorNode.tsx @@ -9,15 +9,7 @@ import React, { useContext, } from "react"; import { Handle, Position } from "reactflow"; -import { - Code, - Modal, - Tooltip, - Box, - Text, - Skeleton, - Switch, -} from "@mantine/core"; +import { Code, Modal, Tooltip, Box, Text, Skeleton } from "@mantine/core"; import { Prism } from "@mantine/prism"; import { useDisclosure } from "@mantine/hooks"; import useStore from "./store"; @@ -523,9 +515,8 @@ The Python interpeter in the browser is Pyodide. You may not be able to run some setLastContext(getVarsAndMetavars(json.responses)); setLastRunSuccess(true); - if (status !== "ready" && !showDrawer) setUninspectedResponses(true); - - setStatus("ready"); + if (status !== Status.READY && !showDrawer) + setUninspectedResponses(true); setDataPropsForNode(id, { fields: json.responses diff --git a/chainforge/react-server/src/CommentNode.tsx b/chainforge/react-server/src/CommentNode.tsx index 13923ee..53b90ec 100644 --- a/chainforge/react-server/src/CommentNode.tsx +++ b/chainforge/react-server/src/CommentNode.tsx @@ -4,15 +4,23 @@ import NodeLabel from "./NodeLabelComponent"; import BaseNode from "./BaseNode"; import { Textarea } from "@mantine/core"; +export interface CommentNodeProps { + data: { + text: string; + title: string; + }; + id: string; +} + /** * A node without any inputs or outputs that * lets users write comment about their flow. */ -const CommentNode = ({ data, id }) => { +const CommentNode: React.FC = ({ data, id }) => { const [value, setValue] = useState(data.text || ""); const setDataPropsForNode = useStore((state) => state.setDataPropsForNode); - const handleChangeComment = (evt) => { + const handleChangeComment = (evt: React.ChangeEvent) => { const txt = evt.currentTarget.value; setValue(txt); setDataPropsForNode(id, { text: txt }); diff --git a/chainforge/react-server/src/LLMResponseInspector.js b/chainforge/react-server/src/LLMResponseInspector.js index 41acbc0..3304d0d 100644 --- a/chainforge/react-server/src/LLMResponseInspector.js +++ b/chainforge/react-server/src/LLMResponseInspector.js @@ -4,12 +4,7 @@ * Separated from ReactFlow node UI so that it can * be deployed in multiple locations. */ -import React, { - useState, - useEffect, - useRef, - useMemo, -} from "react"; +import React, { useState, useEffect, useRef, useMemo } from "react"; import { MultiSelect, Table, diff --git a/chainforge/react-server/src/ModelSettingsModal.tsx b/chainforge/react-server/src/ModelSettingsModal.tsx index 4cc9ad1..235d6f8 100644 --- a/chainforge/react-server/src/ModelSettingsModal.tsx +++ b/chainforge/react-server/src/ModelSettingsModal.tsx @@ -150,15 +150,17 @@ const ModelSettingsModal = forwardRef< // In this case, we auto-change the shortname, to save user's time and nickname models appropriately. const modelname = state.formData.model as string | undefined; const shortname = state.formData.shortname as string | undefined; - if ( - shortname === initShortname && - modelname !== initModelName - ) { + if (shortname === initShortname && modelname !== initModelName) { // Only change the shortname if there is a distinct model name. // If not, let the shortname remain the same for this time, and just remember the model name. if (initModelName !== undefined) { - const shortname_map = schema.properties?.model?.shortname_map as Dict; - if (shortname_map && modelname !== undefined && modelname in shortname_map) + const shortname_map = schema.properties?.model + ?.shortname_map as Dict; + if ( + shortname_map && + modelname !== undefined && + modelname in shortname_map + ) state.formData.shortname = shortname_map[modelname]; else state.formData.shortname = modelname; setInitShortname(shortname); diff --git a/chainforge/react-server/src/NodeLabelComponent.tsx b/chainforge/react-server/src/NodeLabelComponent.tsx index c699a49..04a4cd7 100644 --- a/chainforge/react-server/src/NodeLabelComponent.tsx +++ b/chainforge/react-server/src/NodeLabelComponent.tsx @@ -4,7 +4,6 @@ import React, { useState, useEffect, useCallback, - useContext, } from "react"; import { Tooltip } from "@mantine/core"; import { EditText, onSaveProps } from "react-edit-text"; diff --git a/chainforge/react-server/src/SplitNode.tsx b/chainforge/react-server/src/SplitNode.tsx index f264dd1..227cda0 100644 --- a/chainforge/react-server/src/SplitNode.tsx +++ b/chainforge/react-server/src/SplitNode.tsx @@ -4,7 +4,6 @@ import { v4 as uuid } from "uuid"; import useStore from "./store"; import BaseNode from "./BaseNode"; import NodeLabel from "./NodeLabelComponent"; -import fetch_from_backend from "./fetch_from_backend"; import { IconArrowsSplit, IconList } from "@tabler/icons-react"; import { NativeSelect, @@ -32,12 +31,7 @@ import { fromMarkdown } from "mdast-util-from-markdown"; import StorageCache from "./backend/cache"; import { ResponseBox } from "./ResponseBoxes"; import { Root, RootContent } from "mdast"; -import { - Dict, - LLMResponse, - LLMResponsesByVarDict, - TemplateVarInfo, -} from "./backend/typing"; +import { Dict, TemplateVarInfo } from "./backend/typing"; import { generatePrompts } from "./backend/backend"; const formattingOptions = [ diff --git a/chainforge/react-server/src/store.tsx b/chainforge/react-server/src/store.tsx index f49567f..90c3638 100644 --- a/chainforge/react-server/src/store.tsx +++ b/chainforge/react-server/src/store.tsx @@ -271,6 +271,7 @@ export interface StoreHandles { // Global state state: Dict; setState: (key: string, val: any) => void; + importState: (state: Dict) => void; // The color to represent a specific LLM, to be globally consistent llmColors: Dict;