2/n: Read-only mode: Connect context to Run Prompt button (#916)

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

---
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with
[ReviewStack](https://reviewstack.dev/lastmile-ai/aiconfig/pull/916).
* __->__ #916
* #913

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;

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;

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,17 +16,21 @@ 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();
     } else {
       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;
 });

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;