fix: fix program output text formatting

Author: x1unix

web/src/components/features/inspector/FallbackOutput/FallbackOutput.tsx

@@ -2,7 +2,8 @@ import React from 'react'
 
 import { mergeStyleSets, useTheme } from '@fluentui/react'
 import type { StatusState } from '~/store'
-import { OutputLine } from './OutputLine'
+import { EvalEventKind } from '~/services/api'
+import { splitImageAndText } from './utils'
 
 interface Props {
   status?: StatusState
@@ -16,11 +17,27 @@ interface Props {
 export const FallbackOutput: React.FC<Props> = ({ fontFamily, fontSize, status }) => {
   const theme = useTheme()
   const styles = mergeStyleSets({
-    container: {
+    root: {
       flex: '1 1 auto',
       boxSizing: 'border-box',
       padding: '0, 15px',
     },
+    content: {
+      whiteSpace: 'pre-wrap',
+      display: 'table',
+      width: '100%',
+
+      font: 'inherit',
+      border: 'none',
+      margin: 0,
+      float: 'left',
+    },
+    stderr: {
+      color: theme.palette.red,
+    },
+    image: {
+      display: 'block',
+    },
     programExitMsg: {
       marginTop: '1rem',
       display: 'inline-block',
@@ -29,8 +46,29 @@ export const FallbackOutput: React.FC<Props> = ({ fontFamily, fontSize, status }
   })
 
   return (
-    <div className={styles.container} style={{ fontFamily, fontSize: `${fontSize}px` }}>
-      {status?.events?.map((event, i) => <OutputLine key={i} event={event} />)}
+    <div className={styles.root} style={{ fontFamily, fontSize: `${fontSize}px` }}>
+      <div className={styles.content}>
+        {status?.events?.map(({ Kind: kind, Message: msg }, i) => {
+          if (kind === EvalEventKind.Stderr) {
+            return (
+              <span key={i} className={styles.stderr}>
+                {msg}
+              </span>
+            )
+          }
+
+          // Image content and text can come mixed due to output buffering
+          return splitImageAndText(msg).map(({ isImage, data }, j) => (
+            <React.Fragment key={`${i}.${j}`}>
+              {isImage ? (
+                <img className={styles.image} key={i} src={`data:image;base64,${data}`} alt="Image output" />
+              ) : (
+                data
+              )}
+            </React.Fragment>
+          ))
+        })}
+      </div>
       {!status?.running && <span className={styles.programExitMsg}>Program exited.</span>}
     </div>
   )

web/src/components/features/inspector/FallbackOutput/OutputLine.tsx

@@ -0,0 +1,28 @@
+const imageSectionPrefix = 'IMAGE:'
+const base64RegEx = /[A-Za-z0-9+/]+={0,2}$/
+const imageRegEx = /(IMAGE:[A-Za-z0-9+/]+={0,2})/
+
+export const isImageLine = (message: string): [boolean, string] => {
+  if (!message.startsWith(imageSectionPrefix)) {
+    return [false, message]
+  }
+
+  const payload = message.substring(imageSectionPrefix.length).trim()
+  return [base64RegEx.test(payload), payload]
+}
+
+interface TextChunk {
+  isImage?: boolean
+  data: string
+}
+
+/**
+ * Finds all embedded base64 image segments and tokenizes content.
+ *
+ * Used to support embedded images in Go program stdout like go.dev/play does.
+ */
+export const splitImageAndText = (data: string): TextChunk[] =>
+  data.split(imageRegEx).map((str) => {
+    const [isImage, data] = isImageLine(str)
+    return { isImage, data }
+  })