wip

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

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

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<CommentNodeProps> = ({ data, id }) => {
   const [value, setValue] = useState(data.text || "");
   const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
 
-  const handleChangeComment = (evt) => {
+  const handleChangeComment = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
     const txt = evt.currentTarget.value;
     setValue(txt);
     setDataPropsForNode(id, { text: txt });

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,

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<string>;
-          if (shortname_map && modelname !== undefined && modelname in shortname_map)
+          const shortname_map = schema.properties?.model
+            ?.shortname_map as Dict<string>;
+          if (
+            shortname_map &&
+            modelname !== undefined &&
+            modelname in shortname_map
+          )
             state.formData.shortname = shortname_map[modelname];
           else state.formData.shortname = modelname;
           setInitShortname(shortname);

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";

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 = [

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<string>;