Dynamic Json component sizing (#312)

Author: platypii

src/components/Json/Json.stories.tsx

@@ -71,3 +71,67 @@ export const Objects: Story = {
   },
   render,
 }
+
+export const OpenAICompletions: Story = {
+  args: {
+    json: {
+      model: 'gpt-4',
+      messages: [
+        {
+          role: 'system',
+          content: 'You are a helpful assistant that explains complex concepts clearly.',
+        },
+        {
+          role: 'user',
+          content: 'Can you explain how machine learning works?',
+        },
+        {
+          role: 'assistant',
+          content: 'Machine learning is a method of data analysis that automates analytical model building. It uses algorithms that iteratively learn from data, allowing computers to find hidden insights without being explicitly programmed where to look.',
+        },
+        {
+          role: 'user',
+          content: 'What are the main types of machine learning?',
+        },
+      ],
+      temperature: 0.7,
+      max_tokens: 2048,
+      top_p: 1.0,
+      frequency_penalty: 0.0,
+      presence_penalty: 0.0,
+    },
+  },
+  render,
+}
+
+export const MessagesList: Story = {
+  args: {
+    json: [
+      {
+        role: 'user',
+        content: 'Hello, how are you today?',
+      },
+      {
+        role: 'assistant',
+        content: 'I\'m doing well, thank you for asking! How can I help you today?',
+      },
+      {
+        role: 'user',
+        content: 'I need help with debugging a JavaScript function that\'s not working correctly.',
+      },
+      {
+        role: 'assistant',
+        content: 'I\'d be happy to help you debug your JavaScript function. Could you please share the code that\'s causing issues?',
+      },
+      {
+        role: 'user',
+        content: 'Sure, here it is: function calculate(a, b) { return a + b * c; }',
+      },
+      {
+        role: 'assistant',
+        content: 'I can see the issue! The variable `c` is not defined in your function. You\'re using `c` but it\'s not a parameter or declared variable. You probably want either `function calculate(a, b, c)` or just `return a + b` depending on your intended calculation.',
+      },
+    ],
+  },
+  render,
+}

src/components/Json/Json.tsx

@@ -2,6 +2,7 @@ import { ReactNode, useState } from 'react'
 import styles from './Json.module.css'
 import { isPrimitive, shouldObjectCollapse } from './helpers.js'
 import { cn } from '../../lib'
+import { useWidth } from './useWidth.js'
 
 interface JsonProps {
   json: unknown
@@ -45,9 +46,8 @@ function JsonContent({ json, label }: JsonProps): ReactNode {
 }
 
 function CollapsedArray({ array }: {array: unknown[]}): ReactNode {
-  // the character count is approximate, but it should be enough
-  // to avoid showing too many entries
-  const maxCharacterCount = 40
+  const { elementRef, width } = useWidth<HTMLSpanElement>()
+  const maxCharacterCount = Math.max(20, Math.floor(width / 8))
   const separator = ', '
 
   const children: ReactNode[] = []
@@ -78,7 +78,7 @@ function CollapsedArray({ array }: {array: unknown[]}): ReactNode {
   return (
     <>
       <span className={styles.array}>{'['}</span>
-      <span className={styles.array}>{children}</span>
+      <span ref={elementRef} className={styles.array}>{children}</span>
       <span className={styles.array}>{']'}</span>
       {suffix && <span className={styles.comment}>{suffix}</span>}
     </>
@@ -109,9 +109,8 @@ function JsonArray({ array, label }: { array: unknown[], label?: string }): Reac
 }
 
 function CollapsedObject({ obj }: {obj: object}): ReactNode {
-  // the character count is approximate, but it should be enough
-  // to avoid showing too many entries
-  const maxCharacterCount = 40
+  const { elementRef, width } = useWidth<HTMLSpanElement>()
+  const maxCharacterCount = Math.max(20, Math.floor(width / 8))
   const separator = ', '
   const kvSeparator = ': '
 
@@ -144,7 +143,7 @@ function CollapsedObject({ obj }: {obj: object}): ReactNode {
   return (
     <>
       <span className={styles.object}>{'{'}</span>
-      <span className={styles.object}>{children}</span>
+      <span ref={elementRef} className={styles.object}>{children}</span>
       <span className={styles.object}>{'}'}</span>
       {suffix && <span className={styles.comment}>{suffix}</span>}
     </>

src/components/Json/useWidth.ts

@@ -0,0 +1,35 @@
+import { useLayoutEffect, useRef, useState } from 'react'
+
+const defaultWidth = 320
+
+export function useWidth<T extends HTMLElement = HTMLElement>() {
+  const [width, setWidth] = useState(defaultWidth)
+  const elementRef = useRef<T>(null)
+
+  useLayoutEffect(() => {
+    function updateWidth() {
+      if (elementRef.current) {
+        // Get the parent container width instead of the span itself
+        const container = elementRef.current.parentElement
+        const containerWidth = container ? container.clientWidth : elementRef.current.clientWidth
+        setWidth(containerWidth || defaultWidth)
+      }
+    }
+
+    updateWidth()
+
+    // Only use ResizeObserver if it's available
+    if (typeof ResizeObserver !== 'undefined') {
+      const resizeObserver = new ResizeObserver(updateWidth)
+      if (elementRef.current?.parentElement) {
+        resizeObserver.observe(elementRef.current.parentElement)
+      }
+
+      return () => {
+        resizeObserver.disconnect()
+      }
+    }
+  }, [])
+
+  return { elementRef, width }
+}