-
- {hasValidImage && outputValue.length > 100 ? (
-
- ) : (
- '""'
- )}
-
{/* Show image preview within nested image field */}
{key}:{' '}
{isImageField ? (
-
-
-
+
) : (
{
+ try {
+ // First check if the content looks like JSON (starts with { or [)
+ const trimmed = content.trim()
+ if (!(trimmed.startsWith('{') || trimmed.startsWith('[')) ||
+ !(trimmed.endsWith('}') || trimmed.endsWith(']'))) {
+ return { isJson: false, formatted: content }
+ }
+
+ // Try to parse the JSON
+ const parsed = JSON.parse(trimmed)
+ const prettified = JSON.stringify(parsed, null, 2)
+ return { isJson: true, formatted: prettified }
+ } catch (e) {
+ // If parsing fails, it's not valid JSON
+ return { isJson: false, formatted: content }
+ }
+}
+
/**
* Formats JSON content for display, handling multiple JSON objects separated by '--'
*/
@@ -33,14 +55,15 @@ const formatJsonContent = (content: string): React.ReactNode => {
if (match) {
const systemComment = match[1]
const actualContent = content.substring(match[0].length).trim()
+ const { formatted } = tryPrettifyJson(actualContent)
return (
{systemComment}
-
+
- {actualContent}
+ {formatted}
@@ -48,11 +71,13 @@ const formatJsonContent = (content: string): React.ReactNode => {
}
// If no system comment pattern found, show the whole content
+ const { formatted } = tryPrettifyJson(content)
+
return (
-
+
- {content}
+ {formatted}