From b488584c1baf28600263b2d823fa66742ee474ae Mon Sep 17 00:00:00 2001
From: "Rossdan Craig rossdan@lastmileai.dev" <>
Date: Sun, 14 Jan 2024 19:43:14 -0500
Subject: [PATCH] 2/n: Read-only mode: Connect context to Run Prompt button

Created a new value that gets read from props in `AIConfigEditor` and passed into AIConfigContext to be read by downstream components. Going to do this diff stack each component 1 at a time for easier review +  unblocking

I decided not to use a tooltip for read-only mode. Instead planning to add a big text at top saying that you're in read-only mode, and you won't be able to make any changes

## Test Plan
Still works as before

Read-only shows no tooltip
<img width="1512" alt="Screenshot 2024-01-13 at 23 32 35" src="https://github.com/lastmile-ai/aiconfig/assets/151060367/c7893890-bee4-4c2e-9c9e-557eaec6c9a3">


Not in read-only and running a prompt shows a tooltip
<img width="1512" alt="Screenshot 2024-01-13 at 23 33 08" src="https://github.com/lastmile-ai/aiconfig/assets/151060367/3f41a82b-98fd-498b-8dee-676317d45533">
---
 .../aiconfig/editor/client/src/LocalEditor.tsx    | 14 ++++++++++----
 .../client/src/components/AIConfigEditor.tsx      |  5 ++++-
 .../src/components/prompt/RunPromptButton.tsx     | 15 +++++++++++----
 .../client/src/contexts/AIConfigContext.tsx       |  2 ++
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/python/src/aiconfig/editor/client/src/LocalEditor.tsx b/python/src/aiconfig/editor/client/src/LocalEditor.tsx
index 80fa8bc5f..69bcef269 100644
--- a/python/src/aiconfig/editor/client/src/LocalEditor.tsx
+++ b/python/src/aiconfig/editor/client/src/LocalEditor.tsx
@@ -5,7 +5,13 @@ import AIConfigEditor, {
   RunPromptStreamErrorEvent,
 } from "./components/AIConfigEditor";
 import { Flex, Loader, MantineProvider, Image } from "@mantine/core";
-import { AIConfig, InferenceSettings, JSONObject, Output, Prompt } from "aiconfig";
+import {
+  AIConfig,
+  InferenceSettings,
+  JSONObject,
+  Output,
+  Prompt,
+} from "aiconfig";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { ufetch } from "ufetch";
 import { ROUTE_TABLE } from "./utils/api";
@@ -27,12 +33,12 @@ export default function Editor() {
 
   const setupTelemetryIfAllowed = useCallback(async () => {
     const isDev = (process.env.NODE_ENV ?? "development") === "development";
-  
-    // Don't enable telemetry in dev mode because hot reload will spam the logs. 
+
+    // Don't enable telemetry in dev mode because hot reload will spam the logs.
     if (isDev) {
       return;
     }
-  
+
     const res = await ufetch.get(ROUTE_TABLE.GET_AICONFIGRC, {});
 
     const enableTelemetry = res.allow_usage_data_sharing;
diff --git a/python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx b/python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx
index 9d7280953..96bd36f53 100644
--- a/python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx
+++ b/python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx
@@ -63,6 +63,7 @@ import CopyButton from "./CopyButton";
 type Props = {
   aiconfig: AIConfig;
   callbacks: AIConfigCallbacks;
+  readOnly?: boolean;
 };
 
 export type RunPromptStreamEvent =
@@ -163,6 +164,7 @@ const useStyles = createStyles((theme) => ({
 export default function EditorContainer({
   aiconfig: initialAIConfig,
   callbacks,
+  readOnly = false,
 }: Props) {
   const [isSaving, setIsSaving] = useState(false);
   const [serverStatus, setServerStatus] = useState<"OK" | "ERROR">("OK");
@@ -785,8 +787,9 @@ export default function EditorContainer({
     () => ({
       getState,
       logEvent: logEventCallback,
+      readOnly,
     }),
-    [getState, logEventCallback]
+    [getState, logEventCallback, readOnly]
   );
 
   const isDirty = aiconfigState._ui.isDirty !== false;
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx b/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx
index 1e55e889f..efbe43f59 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx
+++ b/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx
@@ -1,6 +1,7 @@
 import { Button, Flex, Loader, Tooltip } from "@mantine/core";
 import { IconPlayerPlayFilled, IconPlayerStop } from "@tabler/icons-react";
-import { memo } from "react";
+import { memo, useContext } from "react";
+import AIConfigContext from "../../contexts/AIConfigContext";
 
 type Props = {
   cancel: () => Promise<void>;
@@ -15,6 +16,9 @@ export default memo(function RunPromptButton({
   isRunning = false,
   disabled = false,
 }: Props) {
+  const { readOnly } = useContext(AIConfigContext);
+  const disabledOrReadOnly = disabled || readOnly;
+
   const onClick = async () => {
     if (isRunning) {
       return await cancel();
@@ -22,10 +26,11 @@ export default memo(function RunPromptButton({
       return await runPrompt();
     }
   };
+
   const button = (
     <Button
       onClick={onClick}
-      disabled={disabled}
+      disabled={disabledOrReadOnly}
       p="xs"
       size="xs"
       className="runPromptButton"
@@ -43,11 +48,13 @@ export default memo(function RunPromptButton({
     </Button>
   );
 
-  return !disabled ? (
+  const disabledButton = readOnly ? (
     button
   ) : (
-    <Tooltip label="Can't run while another prompt is running" withArrow>
+    <Tooltip label={"Can't run while another prompt is running"} withArrow>
       <div>{button}</div>
     </Tooltip>
   );
+
+  return disabledOrReadOnly ? disabledButton : button;
 });
diff --git a/python/src/aiconfig/editor/client/src/contexts/AIConfigContext.tsx b/python/src/aiconfig/editor/client/src/contexts/AIConfigContext.tsx
index 1c182f087..0a5e2f3be 100644
--- a/python/src/aiconfig/editor/client/src/contexts/AIConfigContext.tsx
+++ b/python/src/aiconfig/editor/client/src/contexts/AIConfigContext.tsx
@@ -8,8 +8,10 @@ import { ClientAIConfig, LogEvent, LogEventData } from "../shared/types";
 const AIConfigContext = createContext<{
   getState: () => ClientAIConfig;
   logEvent?: (event: LogEvent, data?: LogEventData) => void;
+  readOnly?: boolean;
 }>({
   getState: () => ({ prompts: [], _ui: { isDirty: false } }),
+  readOnly: false,
 });
 
 export default AIConfigContext;