8/n Read-only mode: Input rendering (#962)

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
lastmile-ai · Jan 19, 2024 · 2dbcf0a · 2dbcf0a
2 parents 60fdf29 + f3c043c
commit 2dbcf0a
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 26 deletions.
diff --git 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
@@ -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/...c/aiconfig/editor/client/src/components/prompt/prompt_input/PromptInputConfigRenderer.tsx b/...c/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/...nfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentContainer.tsx b/...nfig/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/...onfig/editor/client/src/components/prompt/prompt_input/attachments/AttachmentUploader.tsx b/...onfig/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/...c/components/prompt/prompt_input/schema_renderer/PromptInputAttachmentsSchemaRenderer.tsx b/...c/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/...ient/src/components/prompt/prompt_input/schema_renderer/PromptInputDataSchemaRenderer.tsx b/...ient/src/components/prompt/prompt_input/schema_renderer/PromptInputDataSchemaRenderer.tsx
@@ -1,28 +1,37 @@
 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;
  data?: JSONValue;
  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/...r/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx b/...r/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"