From d1145957e381d81781bd79a55569b4461c0df42f Mon Sep 17 00:00:00 2001
From: Ryan Holinshead <>
Date: Tue, 2 Jan 2024 11:56:26 -0500
Subject: [PATCH] [editor] Config Name & Description UI

[editor] Config Name & Description UI

# [editor] Config Name & Description UI

Add the UI for changing config name / description, similar to workbook title UI:


https://github.com/lastmile-ai/aiconfig/assets/5060851/f0f49638-d0c5-4d88-8edd-c0bbb0294f7c



If config name is not set, keep the name / description in Edit state until the name is set
---
 .../src/aiconfig/editor/client/src/Editor.tsx |  16 ++
 .../src/components/ConfigNameDescription.tsx  | 137 ++++++++++++++++++
 .../client/src/components/EditorContainer.tsx |  70 +++++++--
 .../client/src/components/aiconfigReducer.ts  |  24 +++
 .../aiconfig/editor/client/src/utils/api.ts   |   2 +
 .../editor/client/src/utils/constants.ts      |   1 +
 6 files changed, 234 insertions(+), 16 deletions(-)
 create mode 100644 python/src/aiconfig/editor/client/src/components/ConfigNameDescription.tsx
 create mode 100644 python/src/aiconfig/editor/client/src/utils/constants.ts

diff --git a/python/src/aiconfig/editor/client/src/Editor.tsx b/python/src/aiconfig/editor/client/src/Editor.tsx
index ce9bd05ef..a87bb6099 100644
--- a/python/src/aiconfig/editor/client/src/Editor.tsx
+++ b/python/src/aiconfig/editor/client/src/Editor.tsx
@@ -82,6 +82,18 @@ export default function Editor() {
     []
   );
 
+  const setConfigName = useCallback(async (name: string) => {
+    return await ufetch.post(ROUTE_TABLE.SET_NAME, {
+      name,
+    });
+  }, []);
+
+  const setConfigDescription = useCallback(async (description: string) => {
+    return await ufetch.post(ROUTE_TABLE.SET_DESCRIPTION, {
+      description,
+    });
+  }, []);
+
   const callbacks: AIConfigCallbacks = useMemo(
     () => ({
       addPrompt,
@@ -89,6 +101,8 @@ export default function Editor() {
       getModels,
       runPrompt,
       save,
+      setConfigDescription,
+      setConfigName,
       updateModel,
       updatePrompt,
     }),
@@ -98,6 +112,8 @@ export default function Editor() {
       getModels,
       runPrompt,
       save,
+      setConfigDescription,
+      setConfigName,
       updateModel,
       updatePrompt,
     ]
diff --git a/python/src/aiconfig/editor/client/src/components/ConfigNameDescription.tsx b/python/src/aiconfig/editor/client/src/components/ConfigNameDescription.tsx
new file mode 100644
index 000000000..9da502cfd
--- /dev/null
+++ b/python/src/aiconfig/editor/client/src/components/ConfigNameDescription.tsx
@@ -0,0 +1,137 @@
+import {
+  createStyles,
+  Stack,
+  Text,
+  Textarea,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { useClickOutside } from "@mantine/hooks";
+import { memo, useCallback, useRef, useState } from "react";
+
+type Props = {
+  name?: string;
+  description?: string | null;
+  setDescription: (description: string) => void;
+  setName: (name: string) => void;
+};
+
+const useStyles = createStyles((theme) => ({
+  // Match name input style to corresponding Title element styles
+  // See https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Title/Title.styles.ts
+  nameInput: {
+    ...theme.fn.fontStyles(),
+    fontFamily: theme.headings.fontFamily,
+    fontWeight: theme.headings.fontWeight as number,
+    fontSize: theme.headings.sizes.h1.fontSize,
+    lineHeight: theme.headings.sizes.h1.lineHeight,
+    width: "-webkit-fill-available",
+    letterSpacing: "-1px",
+    height: "44px",
+  },
+  hoverContainer: {
+    "&:hover": {
+      backgroundColor:
+        theme.colorScheme === "dark"
+          ? "rgba(255, 255, 255, 0.1)"
+          : theme.colors.gray[1],
+    },
+    borderRadius: theme.radius.sm,
+    width: "-webkit-fill-available",
+  },
+}));
+
+export default memo(function ConfigNameDescription({
+  name,
+  description,
+  setDescription,
+  setName,
+}: Props) {
+  const { classes } = useStyles();
+
+  const [isEditing, setIsEditing] = useState(!name);
+  const [initialFocus, setInitialFocus] = useState<
+    "name" | "description" | null
+  >("name");
+
+  const nameDisplayRef = useRef<HTMLHeadingElement | null>(null);
+  const descriptionDisplayRef = useRef<HTMLDivElement | null>(null);
+
+  const inputSectionRef = useClickOutside(() => {
+    if (name) {
+      setIsEditing(false);
+    }
+  });
+
+  const onHandleEnter = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (event.key === "Enter") {
+        event.stopPropagation();
+        setIsEditing(false);
+      }
+    },
+    []
+  );
+
+  const onClickEdit = useCallback(
+    (event: React.MouseEvent<HTMLHeadingElement | HTMLDivElement>) => {
+      setIsEditing(true);
+      if (event.target === nameDisplayRef.current) {
+        setInitialFocus("name");
+      } else if (event.target === descriptionDisplayRef.current) {
+        setInitialFocus("description");
+      }
+    },
+    []
+  );
+
+  return (
+    <Stack
+      ref={isEditing ? inputSectionRef : undefined}
+      spacing="xs"
+      w="100%"
+      ml="1em"
+      mr="0.5em"
+    >
+      {isEditing ? (
+        <>
+          <TextInput
+            classNames={{ input: classes.nameInput }}
+            placeholder={"Config name"}
+            value={name}
+            onKeyDown={onHandleEnter}
+            autoFocus={initialFocus === "name"}
+            onChange={(e) => setName(e.currentTarget.value)}
+          />
+          <Textarea
+            placeholder="Config description"
+            value={description ?? undefined}
+            onKeyDown={onHandleEnter}
+            autoFocus={initialFocus === "description"}
+            onChange={(e) => setDescription(e.currentTarget.value)}
+            autosize
+            minRows={2}
+          />
+        </>
+      ) : (
+        <div>
+          <Title
+            ref={nameDisplayRef}
+            onClick={onClickEdit}
+            className={classes.hoverContainer}
+          >
+            {name}
+          </Title>
+          <Text
+            ref={descriptionDisplayRef}
+            onClick={onClickEdit}
+            style={{ whiteSpace: "pre-wrap" }}
+            className={classes.hoverContainer}
+          >
+            {description}
+          </Text>
+        </div>
+      )}
+    </Stack>
+  );
+});
diff --git a/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx b/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx
index fef15f58c..33b595f27 100644
--- a/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx
+++ b/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx
@@ -1,12 +1,5 @@
 import PromptContainer from "./prompt/PromptContainer";
-import {
-  Container,
-  Group,
-  Button,
-  createStyles,
-  Stack,
-  Flex,
-} from "@mantine/core";
+import { Container, Button, createStyles, Stack, Flex } from "@mantine/core";
 import { showNotification } from "@mantine/notifications";
 import {
   AIConfig,
@@ -32,6 +25,8 @@ import { debounce, uniqueId } from "lodash";
 import PromptMenuButton from "./prompt/PromptMenuButton";
 import GlobalParametersContainer from "./GlobalParametersContainer";
 import AIConfigContext from "./AIConfigContext";
+import ConfigNameDescription from "./ConfigNameDescription";
+import { DEBOUNCE_MS } from "../utils/constants";
 
 type Props = {
   aiconfig: AIConfig;
@@ -48,6 +43,8 @@ export type AIConfigCallbacks = {
   getModels: (search: string) => Promise<string[]>;
   runPrompt: (promptName: string) => Promise<{ aiconfig: AIConfig }>;
   save: (aiconfig: AIConfig) => Promise<void>;
+  setConfigDescription: (description: string) => Promise<void>;
+  setConfigName: (name: string) => Promise<void>;
   updateModel: (
     promptName?: string,
     modelData?: string | ModelMetadata
@@ -124,7 +121,7 @@ export default function EditorContainer({
       debounce(
         (promptName: string, newPrompt: Prompt) =>
           updatePromptCallback(promptName, newPrompt),
-        250
+        DEBOUNCE_MS
       ),
     [updatePromptCallback]
   );
@@ -189,7 +186,7 @@ export default function EditorContainer({
       debounce(
         (promptName?: string, modelMetadata?: string | ModelMetadata) =>
           updateModelCallback(promptName, modelMetadata),
-        250
+        DEBOUNCE_MS
       ),
     [updateModelCallback]
   );
@@ -379,6 +376,44 @@ export default function EditorContainer({
     [runPromptCallback]
   );
 
+  const setNameCallback = callbacks.setConfigName;
+  const debouncedSetName = useMemo(
+    () => debounce((name: string) => setNameCallback(name), DEBOUNCE_MS),
+    [setNameCallback]
+  );
+
+  const onSetName = useCallback(
+    async (name: string) => {
+      dispatch({
+        type: "SET_NAME",
+        name,
+      });
+      await debouncedSetName(name);
+    },
+    [debouncedSetName]
+  );
+
+  const setDescriptionCallback = callbacks.setConfigDescription;
+  const debouncedSetDescription = useMemo(
+    () =>
+      debounce(
+        (description: string) => setDescriptionCallback(description),
+        DEBOUNCE_MS
+      ),
+    [setDescriptionCallback]
+  );
+
+  const onSetDescription = useCallback(
+    async (description: string) => {
+      dispatch({
+        type: "SET_DESCRIPTION",
+        description,
+      });
+      await debouncedSetDescription(description);
+    },
+    [debouncedSetDescription]
+  );
+
   const { classes } = useStyles();
 
   const getState = useCallback(() => stateRef.current, []);
@@ -392,14 +427,17 @@ export default function EditorContainer({
   return (
     <AIConfigContext.Provider value={contextValue}>
       <Container maw="80rem">
-        <Group grow m="sm">
-          {/* <Text sx={{ textOverflow: "ellipsis", overflow: "hidden" }} size={14}>
-            {path || "No path specified"}
-          </Text> */}
-          <Button loading={isSaving} ml="lg" onClick={onSave}>
+        <Flex justify="flex-end" mt="md" mb="xs">
+          <Button loading={isSaving} onClick={onSave}>
             Save
           </Button>
-        </Group>
+        </Flex>
+        <ConfigNameDescription
+          name={aiconfigState.name}
+          description={aiconfigState.description}
+          setDescription={onSetDescription}
+          setName={onSetName}
+        />
       </Container>
       <GlobalParametersContainer
         initialValue={aiconfigState?.metadata?.parameters ?? {}}
diff --git a/python/src/aiconfig/editor/client/src/components/aiconfigReducer.ts b/python/src/aiconfig/editor/client/src/components/aiconfigReducer.ts
index ca312d16a..aef80a2b1 100644
--- a/python/src/aiconfig/editor/client/src/components/aiconfigReducer.ts
+++ b/python/src/aiconfig/editor/client/src/components/aiconfigReducer.ts
@@ -10,6 +10,8 @@ export type MutateAIConfigAction =
   | AddPromptAction
   | DeletePromptAction
   | RunPromptAction
+  | SetDescriptionAction
+  | SetNameAction
   | UpdatePromptInputAction
   | UpdatePromptNameAction
   | UpdatePromptModelAction
@@ -39,6 +41,16 @@ export type RunPromptAction = {
   id: string;
 };
 
+export type SetDescriptionAction = {
+  type: "SET_DESCRIPTION";
+  description: string;
+};
+
+export type SetNameAction = {
+  type: "SET_NAME";
+  name: string;
+};
+
 export type UpdatePromptInputAction = {
   type: "UPDATE_PROMPT_INPUT";
   id: string;
@@ -192,6 +204,18 @@ export default function aiconfigReducer(
         },
       }));
     }
+    case "SET_DESCRIPTION": {
+      return {
+        ...state,
+        description: action.description,
+      };
+    }
+    case "SET_NAME": {
+      return {
+        ...state,
+        name: action.name,
+      };
+    }
     case "UPDATE_PROMPT_INPUT": {
       return reduceReplaceInput(state, action.id, () => action.input);
     }
diff --git a/python/src/aiconfig/editor/client/src/utils/api.ts b/python/src/aiconfig/editor/client/src/utils/api.ts
index 44c7e49b1..fe9b48476 100644
--- a/python/src/aiconfig/editor/client/src/utils/api.ts
+++ b/python/src/aiconfig/editor/client/src/utils/api.ts
@@ -12,6 +12,8 @@ export const ROUTE_TABLE = {
   ADD_PROMPT: urlJoin(API_ENDPOINT, "/add_prompt"),
   DELETE_PROMPT: urlJoin(API_ENDPOINT, "/delete_prompt"),
   SAVE: urlJoin(API_ENDPOINT, "/save"),
+  SET_DESCRIPTION: urlJoin(API_ENDPOINT, "/set_description"),
+  SET_NAME: urlJoin(API_ENDPOINT, "/set_name"),
   LOAD: urlJoin(API_ENDPOINT, "/load"),
   LIST_MODELS: urlJoin(API_ENDPOINT, "/list_models"),
   RUN_PROMPT: urlJoin(API_ENDPOINT, "/run"),
diff --git a/python/src/aiconfig/editor/client/src/utils/constants.ts b/python/src/aiconfig/editor/client/src/utils/constants.ts
new file mode 100644
index 000000000..769abaeb6
--- /dev/null
+++ b/python/src/aiconfig/editor/client/src/utils/constants.ts
@@ -0,0 +1 @@
+export const DEBOUNCE_MS = 250;