8/n Read-only mode: Input rendering

Attempted to add read-only functionality wherever applicable to input renderings.

## Testplan

| ![image1](https://github.com/lastmile-ai/aiconfig/assets/141073967/31405238-bbd1-42c0-a5fc-58102fe05021) | ![image2](https://github.com/lastmile-ai/aiconfig/assets/141073967/bb8d6543-25d0-4b61-826b-ded9ddab4295) |
| --- | --- |
| ![image1](https://github.com/lastmile-ai/aiconfig/assets/141073967/dcec6c8b-fbe8-4aea-b2f1-f55153866385) | ![image2](https://github.com/lastmile-ai/aiconfig/assets/141073967/8e90c287-3304-484e-8831-496b0f5cd2a8) |
| ![image1](https://github.com/lastmile-ai/aiconfig/assets/141073967/38e2fc27-bb39-4143-8dc1-67876110f1c6) | ![image2](https://github.com/lastmile-ai/aiconfig/assets/141073967/34d4db13-74b5-4617-bb5c-5c851e41afb8) |
| ![image1](https://github.com/lastmile-ai/aiconfig/assets/141073967/80953234-3a0c-4aa5-bfc5-7d7c9176be58) | ![image2](https://github.com/lastmile-ai/aiconfig/assets/141073967/4d66ec78-04f8-45ae-b396-a91e8f3355d3) |

## dependencies

built ontop of #961

python/src/aiconfig/editor/client/src/components/JSONEditorToggleButton.tsx

@@ -1,5 +1,7 @@
 import { ActionIcon, Tooltip } from "@mantine/core";
 import { IconBraces, IconBracesOff } from "@tabler/icons-react";
+import AIConfigContext from "../contexts/AIConfigContext";
+import { useContext } from "react";
 
 type Props = {
  isRawJSON: boolean;
@@ -10,8 +12,11 @@ export default function JSONEditorToggleButton({
  isRawJSON,
  setIsRawJSON,
 }: Props) {
+ const { readOnly } = useContext(AIConfigContext);
+
+ const toggleJSONButtonLabel = !readOnly ? "Toggle JSON editor" : "View JSON";
  return (
- <Tooltip label="Toggle JSON editor" withArrow>
+ <Tooltip label={toggleJSONButtonLabel} withArrow>
  <ActionIcon onClick={() => setIsRawJSON(!isRawJSON)}>
  {isRawJSON ? <IconBracesOff size="1rem" /> : <IconBraces size="1rem" />}
  </ActionIcon>

python/src/aiconfig/editor/client/src/components/JSONRenderer.tsx

@@ -1,7 +1,8 @@
 import { Prism } from "@mantine/prism";
 import { JSONObject, JSONValue } from "aiconfig";
-import { memo } from "react";
+import { memo, useContext } from "react";
 import JSONEditor from "./JSONEditor";
+import AIConfigContext from "../contexts/AIConfigContext";
 
 type Props = {
  content: JSONValue;
@@ -14,7 +15,9 @@ export default memo(function JSONRenderer({
  onChange,
  schema,
 }: Props) {
- return !onChange ? (
+ const { readOnly } = useContext(AIConfigContext);
+ // Prism is a read only renderer.
+ return !onChange || readOnly ? (
  <Prism language="json" styles={{ code: { textWrap: "pretty" } }}>
  {JSON.stringify(content, null, 2)}
  </Prism>

python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputConfigRenderer.tsx

@@ -1,6 +1,7 @@
 import { Textarea } from "@mantine/core";
 import { PromptInput } from "aiconfig";
-import { memo } from "react";
+import { memo, useContext } from "react";
+import AIConfigContext from "../../../contexts/AIConfigContext";
 
 type Props = {
  input: PromptInput;
@@ -11,10 +12,12 @@ export default memo(function PromptInputConfigRenderer({
  input,
  onChangeInput,
 }: Props) {
+ const {readOnly} = useContext(AIConfigContext);
  return (
  <Textarea
  value={input as string}
  onChange={(e) => onChangeInput(e.target.value)}
+ disabled={readOnly}
  />
  );
 });

python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentContainer.tsx

@@ -1,10 +1,11 @@
-import { memo } from "react";
+import { memo, useContext } from "react";
 import type { Attachment as InputAttachment, JSONObject, AttachmentDataWithStringValue } from "aiconfig";
 import { PromptInputObjectAttachmentsSchema } from "../../../../utils/promptUtils";
 import { ActionIcon, Container, Flex, Tooltip } from "@mantine/core";
 import { IconEdit, IconTrash } from "@tabler/icons-react";
 import AttachmentMetadata from "./AttachmentMetadata";
 import MimeTypeRenderer from "../../../MimeTypeRenderer";
+import AIConfigContext from "../../../../contexts/AIConfigContext";
 
 type Props = {
  schema: PromptInputObjectAttachmentsSchema;
@@ -21,17 +22,18 @@ export default memo(function AttachmentContainer({
  onRemoveAttachment,
  onEditAttachment,
 }: Props) {
+ const {readOnly} = useContext(AIConfigContext);
  return (
  <Container display="flex">
  <Flex direction="column">
- {onEditAttachment && (
+ {onEditAttachment && !readOnly && (
  <ActionIcon onClick={onEditAttachment}>
  <Tooltip label="Edit attachment">
  <IconEdit size={16} />
  </Tooltip>
  </ActionIcon>
  )}
- {onRemoveAttachment && (
+ {onRemoveAttachment && !readOnly && (
  <ActionIcon onClick={onRemoveAttachment}>
  <Tooltip label="Remove attachment">
  <IconTrash size={16} color="red" />

python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputAttachmentsSchemaRenderer.tsx

@@ -1,9 +1,10 @@
 import { PromptInputObjectAttachmentsSchema } from "../../../../utils/promptUtils";
 import type { Attachment as InputAttachment, JSONObject } from "aiconfig";
-import { memo, useState } from "react";
+import { memo, useContext, useState } from "react";
 import AttachmentContainer from "../attachments/AttachmentContainer";
 import AttachmentUploader from "../attachments/AttachmentUploader";
 import { Container } from "@mantine/core";
+import AIConfigContext from "../../../../contexts/AIConfigContext";
 
 type Props = {
  schema: PromptInputObjectAttachmentsSchema;
@@ -25,6 +26,7 @@ function EditableAttachmentRenderer({
  onRemoveAttachment?: () => void;
 }) {
  const [showUploader, setShowUploader] = useState(attachment?.data == null);
+ const {readOnly} = useContext(AIConfigContext);
 
  return (
  <Container m="xs">
@@ -38,7 +40,7 @@ function EditableAttachmentRenderer({
  onRemoveAttachment={onRemoveAttachment}
  onEditAttachment={() => setShowUploader(true)}
  />
- ) : (
+ ) : !readOnly && (
  <AttachmentUploader
  schema={schema}
  onUploadAttachments={(attachments: InputAttachment[]) => {

python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputDataSchemaRenderer.tsx

@@ -1,7 +1,8 @@
 import { PromptInputObjectDataSchema } from "../../../../utils/promptUtils";
 import { Textarea } from "@mantine/core";
 import { JSONValue } from "aiconfig";
-import { memo } from "react";
+import { memo, useContext } from "react";
+import AIConfigContext from "../../../../contexts/AIConfigContext";
 
 type Props = {
  schema: PromptInputObjectDataSchema;
@@ -14,12 +15,15 @@ export default memo(function PromptInputDataSchemaRenderer({
  data,
  onChangeData,
 }: Props) {
+ const {readOnly} = useContext(AIConfigContext);
+
  switch (schema.type) {
  case "string":
  return (
  <Textarea
  value={data ? (data as string) : ""}
  onChange={(e) => onChangeData(e.target.value)}
+ disabled={readOnly}
  placeholder="Type a prompt"
  />
  );

python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx

@@ -6,8 +6,9 @@ import DataRenderer from "./PromptInputDataSchemaRenderer";
 import AttachmentsRenderer from "./PromptInputAttachmentsSchemaRenderer";
 import { Flex, Text, Textarea } from "@mantine/core";
 import { Attachment, JSONValue, PromptInput } from "aiconfig";
-import { memo } from "react";
+import { memo, useContext } from "react";
 import JSONRenderer from "../../../JSONRenderer";
+import AIConfigContext from "../../../../contexts/AIConfigContext";
 
 type Props = {
  input: PromptInput;
@@ -62,6 +63,8 @@ function SchemaRenderer({ input, schema, onChangeInput }: SchemaRendererProps) {
 }
 
 export default memo(function PromptInputSchemaRenderer(props: Props) {
+ const {readOnly} = useContext(AIConfigContext);
+
  if (props.schema.type === "string") {
  if (props.input && typeof props.input !== "string") {
  return (
@@ -77,6 +80,7 @@ export default memo(function PromptInputSchemaRenderer(props: Props) {
  label="Prompt"
  onChange={(e) => props.onChangeInput(e.target.value)}
  placeholder="Type a prompt"
+ disabled = {readOnly}
  autosize
  />
  );