)}
diff --git a/app/w/components/console/components/json-view/json-view.tsx b/app/w/components/console/components/json-view/json-view.tsx
index b9fcfae22d..42874d9233 100644
--- a/app/w/components/console/components/json-view/json-view.tsx
+++ b/app/w/components/console/components/json-view/json-view.tsx
@@ -1,22 +1,65 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+import { ChevronRight, ChevronDown } from 'lucide-react'
+import { Button } from '@/components/ui/button'
interface JSONViewProps {
data: any
level?: number
+ initiallyExpanded?: boolean
}
-export const JSONView = ({ data, level = 0 }: JSONViewProps) => {
- const [isCollapsed, setIsCollapsed] = useState(true)
+const MAX_STRING_LENGTH = 150
+
+const TruncatedValue = ({ value }: { value: string }) => {
+ const [isExpanded, setIsExpanded] = useState(false)
+
+ if (value.length <= MAX_STRING_LENGTH) {
+ return
{value}
+ }
+
+ return (
+
+ {isExpanded ? value : `${value.slice(0, MAX_STRING_LENGTH)}...`}
+
+
+ )
+}
+
+export const JSONView = ({
+ data,
+ level = 0,
+ initiallyExpanded = false,
+}: JSONViewProps) => {
+ const [isCollapsed, setIsCollapsed] = useState(!initiallyExpanded)
+
+ useEffect(() => {
+ setIsCollapsed(!initiallyExpanded)
+ }, [initiallyExpanded])
if (data === null) return
null
if (typeof data !== 'object') {
+ const stringValue = JSON.stringify(data)
return (
- {JSON.stringify(data)}
+ {typeof data === 'string' ? (
+
+ ) : (
+ stringValue
+ )}
)
}
@@ -26,19 +69,24 @@ export const JSONView = ({ data, level = 0 }: JSONViewProps) => {
const isEmpty = items.length === 0
if (isEmpty) {
- return
{isArray ? '[]' : '{}'}
+ return (
+
{isArray ? '[]' : '{}'}
+ )
}
return (
{
e.stopPropagation()
setIsCollapsed(!isCollapsed)
}}
>
- {isCollapsed ? '▶' : '▼'} {isArray ? '[' : '{'}
+
+ {isCollapsed ? '▶' : '▼'}
+
+ {isArray ? '[' : '{'}
{isCollapsed ? '...' : ''}
{!isCollapsed && (
@@ -59,7 +107,7 @@ export const JSONView = ({ data, level = 0 }: JSONViewProps) => {
))}
)}
-
{isArray ? ']' : '}'}
+
{isArray ? ']' : '}'}