[editor] Support Toggling Raw JSON for Output (#656)

# [editor] Support Toggling Raw JSON for Output

Adding a button to toggle to the output to show/hide the raw JSON output
(for outputs that are not already JSON output):


https://github.com/lastmile-ai/aiconfig/assets/5060851/d0ba07a6-167f-481f-9161-8b94ebf57076



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

python/src/aiconfig/editor/client/src/components/prompt/model_settings/ModelSettingsRenderer.tsx

@@ -13,7 +13,8 @@ type Props = {
 
 const useStyles = createStyles(() => ({
   settingsContainer: {
-    maxHeight: "400px",
+    // TODO: Fix max height to be full height if input/output is larger than settings
+    // otherwise bound to some reasonable height
     overflow: "auto",
     paddingTop: "0.5em",
     width: "100%",

python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/JSONOutput.tsx

@@ -0,0 +1,11 @@
+import { Prism } from "@mantine/prism";
+import { JSONValue } from "aiconfig";
+import { memo } from "react";
+
+export default memo(function JSONOutput({ content }: { content: JSONValue }) {
+  return (
+    <Prism language="json" styles={{ code: { textWrap: "pretty" } }}>
+      {JSON.stringify(content, null, 2)}
+    </Prism>
+  );
+});

python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputWrapper.tsx

@@ -0,0 +1,59 @@
+import { ActionIcon, CopyButton, Flex, Tooltip } from "@mantine/core";
+import {
+  IconBraces,
+  IconBracesOff,
+  IconCheck,
+  IconCopy,
+} from "@tabler/icons-react";
+import { Output } from "aiconfig";
+import { memo, useState } from "react";
+import JSONOutput from "./JSONOutput";
+
+type Props = {
+  children: React.ReactNode;
+  copyContent?: string;
+  output: Output;
+  withRawJSONToggle?: boolean;
+};
+
+export default memo(function PromptOutputWrapper({
+  children,
+  copyContent,
+  output,
+  withRawJSONToggle = false,
+}: Props) {
+  const [isRawJSON, setIsRawJSON] = useState(false);
+  return (
+    <>
+      <Flex justify="flex-end">
+        {copyContent && (
+          <CopyButton value={copyContent} timeout={2000}>
+            {({ copied, copy }) => (
+              <Tooltip label={copied ? "Copied" : "Copy"} withArrow>
+                <ActionIcon color={copied ? "teal" : "gray"} onClick={copy}>
+                  {copied ? (
+                    <IconCheck size="1rem" />
+                  ) : (
+                    <IconCopy size="1rem" />
+                  )}
+                </ActionIcon>
+              </Tooltip>
+            )}
+          </CopyButton>
+        )}
+        {withRawJSONToggle && (
+          <Tooltip label="Toggle raw JSON" withArrow>
+            <ActionIcon onClick={() => setIsRawJSON((curr) => !curr)}>
+              {isRawJSON ? (
+                <IconBracesOff size="1rem" />
+              ) : (
+                <IconBraces size="1rem" />
+              )}
+            </ActionIcon>
+          </Tooltip>
+        )}
+      </Flex>
+      {isRawJSON ? <JSONOutput content={output} /> : <>{children}</>}
+    </>
+  );
+});

python/src/aiconfig/editor/client/src/components/prompt/prompt_outputs/PromptOutputsRenderer.tsx

@@ -1,28 +1,63 @@
-import { Error, ExecuteResult, Output } from "aiconfig";
+import {
+  Error,
+  ExecuteResult,
+  Output,
+  OutputDataWithToolCallsValue,
+  OutputDataWithValue,
+} from "aiconfig";
 import { memo } from "react";
+import { TextRenderer } from "../TextRenderer";
+import JSONOutput from "./JSONOutput";
+import PromptOutputWrapper from "./PromptOutputWrapper";
 
 type Props = {
   outputs: Output[];
 };
 
-const ErrorOutput = memo(function ErrorOutput({ output }: { output: Error }) {
+function ErrorOutput({ output }: { output: Error }) {
   return <div>{output.evalue}</div>;
-});
+}
 
 const ExecuteResultOutput = memo(function ExecuteResultOutput({
   output,
 }: {
   output: ExecuteResult;
 }) {
-  return null;
-  // switch (output.renderData.type) {
-  //   case "text":
-  //     return <TextRenderer content={output.renderData.text} />;
-  //   // TODO: Handle other types of outputs
-  // }
+  if (output.data == null) {
+    return <JSONOutput content={output} />;
+  }
+
+  if (typeof output.data === "string") {
+    return (
+      <PromptOutputWrapper
+        copyContent={output.data}
+        output={output}
+        withRawJSONToggle
+      >
+        <TextRenderer content={output.data} />
+      </PromptOutputWrapper>
+    );
+  } else if (
+    typeof output.data === "object" &&
+    output.data.hasOwnProperty("kind")
+  ) {
+    switch ((output.data as OutputDataWithValue).kind) {
+      case "tool_calls":
+      // TODO: Tool calls rendering
+      default:
+        return (
+          <JSONOutput
+            content={(output.data as OutputDataWithToolCallsValue).value}
+          />
+        );
+    }
+  }
+
+  return <JSONOutput content={output.data} />;
 });
 
 const OutputRenderer = memo(function Output({ output }: { output: Output }) {
+  // TODO: Add toggle for raw JSON renderer
   switch (output.output_type) {
     case "execute_result":
       return <ExecuteResultOutput output={output} />;

python/src/aiconfig/editor/travel.aiconfig.json

@@ -26,12 +26,13 @@
         {
           "output_type": "execute_result",
           "execution_count": 0,
-          "data": {
-            "content": "1. Visit Central Park: Exploring this iconic park offers activities like picnicking, boating, visiting the zoo, or simply enjoying the beautiful scenery.\n2. Take a stroll on the High Line: This elevated park built on a historic freight rail line provides stunning views of the city and features art installations and gardens.\n3. Explore Times Square: Known as \"The Crossroads of the World,\" Times Square is a bustling hub with vibrant billboards, shops, restaurants, and street performers.\n4. Take a boat tour to the Statue of Liberty: Enjoy a ferry ride to Liberty Island and have an up-close view of the iconic national monument.\n5. Visit the Museum of Modern Art (MoMA): Discover a vast collection of modern and contemporary art, including works by Picasso, Warhol, Van Gogh, and more.\n6. Explore the Metropolitan Museum of Art (The Met): One of the world's largest art museums, The Met showcases over 5,000 years of art from around the globe.\n7. Watch a Broadway show: New York City's theater district is famous for its world-class Broadway productions, offering a range of musicals, plays, and performances.\n8. Walk across the Brooklyn Bridge: Enjoy panoramic views of the city skyline as you stroll across this iconic bridge, connecting Manhattan and Brooklyn.\n9. Experience the 9/11 Memorial & Museum: Pay tribute to the victims of the September 11 attacks at the memorial pools and explore the museum's exhibitions.\n10. Enjoy the vibrant food scene: Indulge in diverse cuisines at food markets like Chelsea Market or Smorgasburg, or try iconic New York dishes like pizza, bagels, or hot dogs from local shops and delis.",
-            "role": "assistant"
-          },
+          "data": "1. Visit Central Park: Exploring this iconic park offers activities like picnicking, boating, visiting the zoo, or simply enjoying the beautiful scenery.\n2. Take a stroll on the High Line: This elevated park built on a historic freight rail line provides stunning views of the city and features art installations and gardens.\n3. Explore Times Square: Known as \"The Crossroads of the World,\" Times Square is a bustling hub with vibrant billboards, shops, restaurants, and street performers.\n4. Take a boat tour to the Statue of Liberty: Enjoy a ferry ride to Liberty Island and have an up-close view of the iconic national monument.\n5. Visit the Museum of Modern Art (MoMA): Discover a vast collection of modern and contemporary art, including works by Picasso, Warhol, Van Gogh, and more.\n6. Explore the Metropolitan Museum of Art (The Met): One of the world's largest art museums, The Met showcases over 5,000 years of art from around the globe.\n7. Watch a Broadway show: New York City's theater district is famous for its world-class Broadway productions, offering a range of musicals, plays, and performances.\n8. Walk across the Brooklyn Bridge: Enjoy panoramic views of the city skyline as you stroll across this iconic bridge, connecting Manhattan and Brooklyn.\n9. Experience the 9/11 Memorial & Museum: Pay tribute to the victims of the September 11 attacks at the memorial pools and explore the museum's exhibitions.\n10. Enjoy the vibrant food scene: Indulge in diverse cuisines at food markets like Chelsea Market or Smorgasburg, or try iconic New York dishes like pizza, bagels, or hot dogs from local shops and delis.",
           "metadata": {
-            "finish_reason": "stop"
+            "finish_reason": "stop",
+            "rawResponse": {
+              "content": "1. Visit Central Park: Exploring this iconic park offers activities like picnicking, boating, visiting the zoo, or simply enjoying the beautiful scenery.\n2. Take a stroll on the High Line: This elevated park built on a historic freight rail line provides stunning views of the city and features art installations and gardens.\n3. Explore Times Square: Known as \"The Crossroads of the World,\" Times Square is a bustling hub with vibrant billboards, shops, restaurants, and street performers.\n4. Take a boat tour to the Statue of Liberty: Enjoy a ferry ride to Liberty Island and have an up-close view of the iconic national monument.\n5. Visit the Museum of Modern Art (MoMA): Discover a vast collection of modern and contemporary art, including works by Picasso, Warhol, Van Gogh, and more.\n6. Explore the Metropolitan Museum of Art (The Met): One of the world's largest art museums, The Met showcases over 5,000 years of art from around the globe.\n7. Watch a Broadway show: New York City's theater district is famous for its world-class Broadway productions, offering a range of musicals, plays, and performances.\n8. Walk across the Brooklyn Bridge: Enjoy panoramic views of the city skyline as you stroll across this iconic bridge, connecting Manhattan and Brooklyn.\n9. Experience the 9/11 Memorial & Museum: Pay tribute to the victims of the September 11 attacks at the memorial pools and explore the museum's exhibitions.\n10. Enjoy the vibrant food scene: Indulge in diverse cuisines at food markets like Chelsea Market or Smorgasburg, or try iconic New York dishes like pizza, bagels, or hot dogs from local shops and delis.",
+              "role": "assistant"
+            }
           }
         }
       ]