From f3c043cf06a63ff469ad57e04b4aa71f2e1c35a3 Mon Sep 17 00:00:00 2001
From: "Ankush Pala  ankush@lastmileai.dev" <>
Date: Thu, 18 Jan 2024 19:51:57 -0500
Subject: [PATCH] 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
---
 .../src/components/JSONEditorToggleButton.tsx |  7 ++++-
 .../client/src/components/JSONRenderer.tsx    |  7 +++--
 .../PromptInputConfigRenderer.tsx             | 22 +++++++++++--
 .../attachments/AttachmentContainer.tsx       |  8 +++--
 .../attachments/AttachmentUploader.tsx        |  5 ++-
 .../PromptInputAttachmentsSchemaRenderer.tsx  |  6 ++--
 .../PromptInputDataSchemaRenderer.tsx         | 31 ++++++++++++-------
 .../PromptInputSchemaRenderer.tsx             | 22 +++++++++++--
 8 files changed, 82 insertions(+), 26 deletions(-)

diff --git a/python/src/aiconfig/editor/client/src/components/JSONEditorToggleButton.tsx b/python/src/aiconfig/editor/client/src/components/JSONEditorToggleButton.tsx
index 4da61d451..1b3d41956 100644
--- a/python/src/aiconfig/editor/client/src/components/JSONEditorToggleButton.tsx
+++ b/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 ? "View JSON" : "Toggle JSON Editor";
   return (
-    <Tooltip label="Toggle JSON editor" withArrow>
+    <Tooltip label={toggleJSONButtonLabel} withArrow>
       <ActionIcon onClick={() => setIsRawJSON(!isRawJSON)}>
         {isRawJSON ? <IconBracesOff size="1rem" /> : <IconBraces size="1rem" />}
       </ActionIcon>
diff --git a/python/src/aiconfig/editor/client/src/components/JSONRenderer.tsx b/python/src/aiconfig/editor/client/src/components/JSONRenderer.tsx
index 37ba6fe5f..00dc723c8 100644
--- a/python/src/aiconfig/editor/client/src/components/JSONRenderer.tsx
+++ b/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>
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputConfigRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputConfigRenderer.tsx
index a37010a3d..d9e864e8e 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputConfigRenderer.tsx
+++ b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputConfigRenderer.tsx
@@ -1,6 +1,8 @@
-import { Textarea } from "@mantine/core";
+import { Spoiler, Textarea } from "@mantine/core";
 import { PromptInput } from "aiconfig";
-import { memo } from "react";
+import { memo, useContext } from "react";
+import AIConfigContext from "../../../contexts/AIConfigContext";
+import { TextRenderer } from "../TextRenderer";
 
 type Props = {
   input: PromptInput;
@@ -11,10 +13,24 @@ export default memo(function PromptInputConfigRenderer({
   input,
   onChangeInput,
 }: Props) {
-  return (
+  const {readOnly} = useContext(AIConfigContext);
+  return readOnly ? (
+    <div style={{ padding: "0.5em" }}>
+      <Spoiler
+        maxHeight={200}
+        showLabel="Show more"
+        hideLabel="Hide"
+        initialState={false}
+        transitionDuration={300}
+      >
+        <TextRenderer content={input as string} />
+      </Spoiler>
+    </div>
+  ): (
     <Textarea
       value={input as string}
       onChange={(e) => onChangeInput(e.target.value)}
+      disabled={readOnly}
     />
   );
 });
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentContainer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentContainer.tsx
index f8bd720f2..768d615a3 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentContainer.tsx
+++ b/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" />
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentUploader.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentUploader.tsx
index b9eb25724..6c9e0b4b8 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentUploader.tsx
+++ b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentUploader.tsx
@@ -1,4 +1,4 @@
-import { memo, useState } from "react";
+import { memo, useContext, useState } from "react";
 import type { Attachment, Attachment as InputAttachment } from "aiconfig";
 import { PromptInputObjectAttachmentsSchema } from "../../../../utils/promptUtils";
 import { Dropzone, FileRejection } from "@mantine/dropzone";
@@ -8,6 +8,7 @@ import {
 } from "../../../../utils/dropzoneHelpers";
 import { ActionIcon, Container, Text, Title, Tooltip } from "@mantine/core";
 import { IconX } from "@tabler/icons-react";
+import AIConfigContext from "../../../../contexts/AIConfigContext";
 
 type Props = {
   schema: PromptInputObjectAttachmentsSchema;
@@ -85,6 +86,7 @@ Props) {
   const [fileList, setFileList] = useState<File[]>([]);
   const [uploadState, setUploadState] = useState<UploadState>("idle");
   const [uploadError, setUploadError] = useState<string | null>(null);
+  const {readOnly} = useContext(AIConfigContext);
 
   const onDropzoneClick = async (files: File[]) => {
     if (uploadState === "dropzone_error") {
@@ -163,6 +165,7 @@ Props) {
           // TODO: Get these from schema,
           // maxSize={MAX_IMAGE_FILE_SIZE}
           accept={schema.items.mime_types}
+          disabled={readOnly}
         >
           {fileList.length > 0 ? (
             `${fileList.length} File(s) Uploading...`
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputAttachmentsSchemaRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputAttachmentsSchemaRenderer.tsx
index c31187b73..ada1e9e13 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputAttachmentsSchemaRenderer.tsx
+++ b/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)}
         />
-      ) : (
+      ) :  (
         <AttachmentUploader
           schema={schema}
           onUploadAttachments={(attachments: InputAttachment[]) => {
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputDataSchemaRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputDataSchemaRenderer.tsx
index 127ece74c..8bb18460c 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputDataSchemaRenderer.tsx
+++ b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputDataSchemaRenderer.tsx
@@ -1,7 +1,9 @@
 import { PromptInputObjectDataSchema } from "../../../../utils/promptUtils";
-import { Textarea } from "@mantine/core";
+import { Spoiler, Textarea } from "@mantine/core";
 import { JSONValue } from "aiconfig";
-import { memo } from "react";
+import { memo, useContext } from "react";
+import AIConfigContext from "../../../../contexts/AIConfigContext";
+import { TextRenderer } from "../../TextRenderer";
 
 type Props = {
   schema: PromptInputObjectDataSchema;
@@ -9,20 +11,27 @@ type Props = {
   onChangeData: (value: JSONValue) => void;
 };
 
-export default memo(function PromptInputDataSchemaRenderer({
-  schema,
-  data,
-  onChangeData,
-}: Props) {
+export default memo(function PromptInputDataSchemaRenderer({ schema, data, onChangeData }: Props) {
+  const { readOnly } = useContext(AIConfigContext);
+
   switch (schema.type) {
-    case "string":
-      return (
+    case "string": {
+      const valueData = data ? (data as string) : "";
+      return readOnly ? (
+        <div style={{ padding: "0.5em" }}>
+          <Spoiler maxHeight={200} showLabel="Show more" hideLabel="Hide" initialState={false} transitionDuration={300}>
+            <TextRenderer content={valueData} />
+          </Spoiler>
+        </div>
+      ) : (
         <Textarea
-          value={data ? (data as string) : ""}
+          value={valueData}
           onChange={(e) => onChangeData(e.target.value)}
-          placeholder="Type a prompt"
+          disabled={readOnly}
+          placeholder={readOnly ? "" : "Type a prompt"}
         />
       );
+    }
     default:
       return null; // TODO: Handle other input.data types
   }
diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx
index 86333e3e5..d98908ef5 100644
--- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx
+++ b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx
@@ -4,10 +4,12 @@ import {
 } from "../../../../utils/promptUtils";
 import DataRenderer from "./PromptInputDataSchemaRenderer";
 import AttachmentsRenderer from "./PromptInputAttachmentsSchemaRenderer";
-import { Flex, Text, Textarea } from "@mantine/core";
+import { Flex, Spoiler, 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";
+import { TextRenderer } from "../../TextRenderer";
 
 type Props = {
   input: PromptInput;
@@ -62,6 +64,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 (
@@ -71,7 +75,19 @@ export default memo(function PromptInputSchemaRenderer(props: Props) {
         </>
       );
     }
-    return (
+    return  readOnly ? (
+      <div style={{ padding: "0.5em" }}>
+        <Spoiler
+          maxHeight={200}
+          showLabel="Show more"
+          hideLabel="Hide"
+          initialState={false}
+          transitionDuration={300}
+        >
+          <TextRenderer content={(props.input as string)} />
+        </Spoiler>
+      </div> 
+      ): (
       <Textarea
         value={props.input}
         label="Prompt"