From 0111ceb6456905ddc706765909ec6b8b9dd7cd5c Mon Sep 17 00:00:00 2001
From: Nick Mitchell <nickm@us.ibm.com>
Date: Sat, 18 Jan 2025 17:03:05 -0500
Subject: [PATCH] fix: pdl-live-react improve ui of top-level q&a

Signed-off-by: Nick Mitchell <nickm@us.ibm.com>
---
 .../src/view/transcript/PrettyKind.tsx        | 30 +++++++++++++++----
 pdl-live-react/src/view/transcript/QAV.css    |  2 +-
 pdl-live-react/src/view/transcript/QAV.tsx    | 30 +++++++++++++++----
 3 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/pdl-live-react/src/view/transcript/PrettyKind.tsx b/pdl-live-react/src/view/transcript/PrettyKind.tsx
index c4b1b3c8..22efc977 100644
--- a/pdl-live-react/src/view/transcript/PrettyKind.tsx
+++ b/pdl-live-react/src/view/transcript/PrettyKind.tsx
@@ -25,10 +25,16 @@ export default function PrettyKind({
             typeof block.input === "string" &&
             block.input.length > 0 && (
               <>
-                <QAV q="Q">{block.input}</QAV>
+                <QAV q="Q" kind="dialog">
+                  {block.input}
+                </QAV>
               </>
             )}
-          {hasScalarResult(block) && <QAV q="A">{block.result}</QAV>}
+          {hasScalarResult(block) && (
+            <QAV q="A" kind="dialog">
+              {block.result}
+            </QAV>
+          )}
         </>
       )
     case "function":
@@ -76,12 +82,26 @@ export default function PrettyKind({
     case "error":
       return `${firstLineOf(block.msg)}`
     case "code":
-      return <>{hasScalarResult(block) && <QAV q="A">{block.result}</QAV>}</>
+      return (
+        <>
+          {hasScalarResult(block) && (
+            <QAV q="A" kind="code">
+              {block.result}
+            </QAV>
+          )}
+        </>
+      )
     case "read":
       return (
         <>
-          <QAV q="Q">{block.message ?? "Prompt user for input"}</QAV>
-          {hasScalarResult(block) && <QAV q="A">{block.result}</QAV>}
+          <QAV q="Q" kind="dialog">
+            {block.message ?? "Prompt user for input"}
+          </QAV>
+          {hasScalarResult(block) && (
+            <QAV q="A" kind="dialog">
+              {block.result}
+            </QAV>
+          )}
         </>
       )
     case "if":
diff --git a/pdl-live-react/src/view/transcript/QAV.css b/pdl-live-react/src/view/transcript/QAV.css
index 34f6b8df..99e6c2ea 100644
--- a/pdl-live-react/src/view/transcript/QAV.css
+++ b/pdl-live-react/src/view/transcript/QAV.css
@@ -6,5 +6,5 @@
 .pdl-qav-label {
   font-weight: bold;
   font-size: 0.75em;
-  padding-right: 0.5em;
+  padding-right: 0.375em;
 }
diff --git a/pdl-live-react/src/view/transcript/QAV.tsx b/pdl-live-react/src/view/transcript/QAV.tsx
index e44aab2c..6297e639 100644
--- a/pdl-live-react/src/view/transcript/QAV.tsx
+++ b/pdl-live-react/src/view/transcript/QAV.tsx
@@ -3,31 +3,51 @@ import { Tooltip, Truncate } from "@patternfly/react-core"
 
 import { firstLineOf } from "../../helpers"
 
+import ChevronLeftIcon from "@patternfly/react-icons/dist/esm/icons/chevron-left-icon"
+import ChevronRightIcon from "@patternfly/react-icons/dist/esm/icons/chevron-right-icon"
+
 import "./QAV.css"
 
 type Props = {
+  kind?: "code" | "dialog"
   q: "Q" | "A" | "V"
   children: import("react").ReactNode
 }
 
 /** Render the Q: A: V: UI */
-export default function QAV({ q, children }: Props) {
+export default function QAV({ q, kind, children }: Props) {
   const tip =
     q === "Q"
-      ? "Question posed"
+      ? kind === "dialog"
+        ? "Question posed"
+        : "Code executed"
       : q === "A"
-        ? "The result"
+        ? kind === "dialog"
+          ? "The answer"
+          : "The execution result"
         : "Result is assigned to this variable"
 
+  const content = <Truncate content={firstLineOf(String(children))} />
+
   return (
     <div className="pdl-qav">
       <Tooltip content={tip}>
-        <span className="pdl-qav-label">{q}</span>
+        <span className="pdl-qav-label">
+          {q === "Q" ? (
+            <ChevronRightIcon />
+          ) : q === "A" ? (
+            <ChevronLeftIcon />
+          ) : (
+            <></>
+          )}
+        </span>
       </Tooltip>{" "}
       {isValidElement(children) ? (
         children
+      ) : kind === "dialog" ? (
+        <i>{content}</i>
       ) : (
-        <Truncate content={firstLineOf(String(children))} />
+        <code>{content}</code>
       )}
     </div>
   )