Fix crash in promptfiddle (#877)

typescript/playground-common/src/baml_wasm_web/EventListener.tsx

@@ -181,7 +181,7 @@ const updateCursorAtom = atom(
 
       cursorIdx += cursor.column
 
-      var selectedFunc = runtime.get_function_at_position(fileName, get(selectedFunctionAtom)?.name ?? '', cursorIdx)
+      const selectedFunc = runtime.get_function_at_position(fileName, get(selectedFunctionAtom)?.name ?? '', cursorIdx)
 
       if (selectedFunc) {
         set(selectedFunctionAtom, selectedFunc.name)
@@ -779,7 +779,7 @@ function buildUnitNodesAndGroups(nodes: ClientNode[]): {
 
   return { unitNodes, groups }
 }
-var counter = 0
+let counter = 0
 function uuid() {
   return String(counter++)
 }
@@ -837,20 +837,20 @@ const ErrorCount: React.FC = () => {
   const { errors, warnings } = useAtomValue(numErrorsAtom)
   if (errors === 0 && warnings === 0) {
     return (
-      <div className='flex flex-row items-center gap-1 text-green-600'>
+      <div className='flex flex-row gap-1 items-center text-green-600'>
         <CheckCircle size={12} />
       </div>
     )
   }
   if (errors === 0) {
     return (
-      <div className='flex flex-row items-center gap-1 text-yellow-600'>
+      <div className='flex flex-row gap-1 items-center text-yellow-600'>
         {warnings} <AlertTriangle size={12} />
       </div>
     )
   }
   return (
-    <div className='flex flex-row items-center gap-1 text-red-600'>
+    <div className='flex flex-row gap-1 items-center text-red-600'>
       {errors} <XCircle size={12} /> {warnings} <AlertTriangle size={12} />{' '}
     </div>
   )
@@ -1068,7 +1068,7 @@ export const EventListener: React.FC<{ children: React.ReactNode }> = ({ childre
 
   return (
     <>
-      <div className='absolute z-50 flex flex-row gap-2 text-xs bg-transparent right-2 bottom-2'>
+      <div className='flex absolute right-2 bottom-2 z-50 flex-row gap-2 text-xs bg-transparent'>
         <div className='pr-4 whitespace-nowrap'>{bamlCliVersion && 'baml-cli ' + bamlCliVersion}</div>
         <ErrorCount /> <span>VSCode Runtime Version: {version}</span>
       </div>

typescript/playground-common/src/baml_wasm_web/test_uis/test_result.tsx

@@ -41,6 +41,7 @@ import {
   Connection,
 } from '@xyflow/react'
 import { Sparkles } from 'lucide-react'
+import { ErrorBoundary } from 'react-error-boundary'
 
 const TestStatusMessage: React.FC<{ testStatus: DoneTestStatusType }> = ({ testStatus }) => {
   switch (testStatus) {
@@ -67,13 +68,13 @@ const TestStatusIcon: React.FC<{
           queued: 'Queued',
           running: <VSCodeProgressRing className='h-4' />,
           done: (
-            <div className='flex flex-row items-center gap-1'>
+            <div className='flex flex-row gap-1 items-center'>
               {testStatus && <TestStatusMessage testStatus={testStatus} />}
               {traceUrl && <Link2Icon className='inline w-3 h-3 text-center hover:underline icon-link' />}
             </div>
           ),
           error: (
-            <div className='flex flex-row items-center gap-1'>
+            <div className='flex flex-row gap-1 items-center'>
               <div className='text-vscode-testing-iconFailed'>Unable to run</div>
             </div>
           ),
@@ -152,10 +153,10 @@ const LLMTestResult: React.FC<{ test: WasmTestResponse; doneStatus: DoneTestStat
   const detailsText = details.length > 0 ? `${stopReasonText}  (${details.join(', ')})` : ''
 
   return (
-    <div className='flex flex-col w-full gap-1'>
+    <div className='flex flex-col gap-1 w-full'>
       {failure !== undefined &&
         !(doneStatus === 'parse_failed' || (doneStatus === 'llm_failed' && (llm_response || llm_failure))) && (
-          <div className='text-xs text-vscode-errorForeground whitespace-pre-wrap'>
+          <div className='text-xs whitespace-pre-wrap text-vscode-errorForeground'>
             {failure || '<no failure message>'}
           </div>
         )}
@@ -175,7 +176,7 @@ const LLMTestResult: React.FC<{ test: WasmTestResponse; doneStatus: DoneTestStat
                 {llm_response && (
                   <pre className='px-1 py-2 whitespace-pre-wrap rounded-sm bg-vscode-input-background max-h-[300px] overflow-y-auto relative pr-2'>
                     {llm_response.content}
-                    <div className='absolute flex items-center top-1 right-1'>
+                    <div className='flex absolute top-1 right-1 items-center'>
                       <button
                         className='text-vscode-foreground hover:text-vscode-button-foreground'
                         onClick={() => copyToClipboard(llm_response.content, setCopiedRaw)}
@@ -208,7 +209,7 @@ const LLMTestResult: React.FC<{ test: WasmTestResponse; doneStatus: DoneTestStat
               </div>
             </div>
             {(doneStatus === 'parse_failed' || parsed !== undefined) && (
-              <div className='relative flex flex-col'>
+              <div className='flex relative flex-col'>
                 Parsed LLM Response:
                 <div className='relative px-1 py-2'>
                   {failure && <pre className='text-xs whitespace-pre-wrap text-vscode-errorForeground'>{failure}</pre>}
@@ -222,7 +223,7 @@ const LLMTestResult: React.FC<{ test: WasmTestResponse; doneStatus: DoneTestStat
                         matchesURL
                         src={sorted_parsed}
                       />
-                      <div className='absolute flex items-center top-3 right-2'>
+                      <div className='flex absolute right-2 top-3 items-center'>
                         <button
                           className='text-vscode-descriptionForeground hover:text-vscode-foreground'
                           onClick={() => copyToClipboard(JSON.stringify(sorted_parsed, null, 2), setCopiedParsed)}
@@ -254,7 +255,7 @@ const LLMFunctionResult: React.FC<{ test: WasmFunctionResponse }> = ({ test }) =
   const model = llm_response?.model ?? llm_failure?.model
 
   return (
-    <div className='flex flex-col w-full gap-1'>
+    <div className='flex flex-col gap-1 w-full'>
       {(llm_response || llm_failure) && (
         <div className='w-full text-xs text-vscode-descriptionForeground'>
           <div>
@@ -325,10 +326,10 @@ const TestRow: React.FC<{ name: string }> = ({ name }) => {
   }
 
   return (
-    <div className='flex flex-row items-start gap-2 group'>
+    <div className='flex flex-row gap-2 items-start group'>
       <TestCaseActions testName={name} />
       <div className='flex flex-col'>
-        <div className='flex flex-row items-center gap-2 text-xs'>
+        <div className='flex flex-row gap-2 items-center text-xs'>
           <b>{name}</b>
           <TestStatusIcon
             testRunStatus={test.status}
@@ -391,14 +392,14 @@ const TestStatusBanner: React.FC = () => {
     })
   }
 
-  const isNextJS = (window as any).next?.version!!
+  const isNextJS = (window as any).next?.version!
   if (isNextJS) {
     // simplify UI in promptfiddle
     return null
   }
 
   return (
-    <div className='flex flex-row flex-wrap items-center gap-2'>
+    <div className='flex flex-row flex-wrap gap-2 items-center'>
       <FilterIcon size={16} />
       <FilterButton
         selected={filter.has('queued')}
@@ -546,29 +547,16 @@ const TestResults: React.FC = () => {
   const selectedFunction = useAtomValue(selectedFunctionAtom)
   const [showTests, setShowTests] = useAtom(showTestsAtom)
   const [showClientGraph, setClientGraph] = useAtom(showClientGraphAtom)
-  const currentClients = useAtomValue(currentClientsAtom)
 
   // reset the tab when switching funcs
   useEffect(() => {
     setShowTests(false)
   }, [selectedFunction?.name])
+  const isNextJs = (window as any).next?.version
 
   return (
-    <div className='flex flex-col w-full gap-2 px-1'>
-      <div className='flex flex-row items-center gap-2'>
-        <Badge
-          className={clsx(
-            'cursor-pointer hover:bg-vscode-tab-activeBackground',
-            showClientGraph
-              ? 'bg-vscode-tab-activeBackground text-vscode-tab-activeForeground underline'
-              : 'bg-transparent text-vscode-foreground',
-          )}
-          onClick={() => {
-            setClientGraph(true)
-          }}
-        >
-          Client Graph ✨
-        </Badge>
+    <div className='flex flex-col gap-2 px-1 w-full'>
+      <div className='flex flex-row gap-2 items-center'>
         <Badge
           className={clsx(
             'cursor-pointer hover:bg-vscode-tab-activeBackground',
@@ -597,9 +585,26 @@ const TestResults: React.FC = () => {
         >
           Test Results
         </Badge>
+        {!isNextJs && (
+          <Badge
+            className={clsx(
+              'cursor-pointer hover:bg-vscode-tab-activeBackground',
+              showClientGraph
+                ? 'underline bg-vscode-tab-activeBackground text-vscode-tab-activeForeground'
+                : 'bg-transparent text-vscode-foreground',
+            )}
+            onClick={() => {
+              setClientGraph(true)
+            }}
+          >
+            Client Graph ✨
+          </Badge>
+        )}
       </div>
 
-      {showClientGraph ? <ClientGraph /> : showTests ? <TestResultContent /> : <TestCaseList />}
+      <ErrorBoundary fallback={<div>Failed to render</div>}>
+        {showClientGraph ? <ClientGraph /> : showTests ? <TestResultContent /> : <TestCaseList />}
+      </ErrorBoundary>
     </div>
   )
 }
@@ -683,10 +688,10 @@ const TestCaseList: React.FC = () => {
   const { isRunning, run } = useRunHooks()
 
   return (
-    <div className='flex flex-col w-full h-full gap-2 px-2'>
-      <div className='flex flex-wrap items-start items-center gap-2 h-fit'>
+    <div className='flex flex-col gap-2 px-2 w-full h-full'>
+      <div className='flex flex-wrap gap-2 items-start items-center h-fit'>
         <div className='flex flex-col'>
-          <div className='flex flex-wrap items-center gap-2'>
+          <div className='flex flex-wrap gap-2 items-center'>
             <FilterIcon size={16} />
             <VSCodeTextField
               placeholder='Filter test cases'
@@ -709,13 +714,13 @@ const TestCaseList: React.FC = () => {
         ) : (
           <>
             <Button
-              className='px-1 py-1 text-xs bg-red-500 rounded-sm h-fit whitespace-nowrap bg-vscode-button-background text-vscode-button-foreground hover:bg-vscode-button-hoverBackground'
+              className='px-1 py-1 text-xs whitespace-nowrap bg-red-500 rounded-sm h-fit bg-vscode-button-background text-vscode-button-foreground hover:bg-vscode-button-hoverBackground'
               disabled={testCases.length === 0}
               onClick={() => {
                 run(testCases.map((t) => t.name))
               }}
             >
-              <div className='flex flex-row items-center gap-1'>
+              <div className='flex flex-row gap-1 items-center'>
                 <PlayIcon size={10} />
                 Run {filter ? testCases.length : 'all'} tests
               </div>
@@ -725,9 +730,9 @@ const TestCaseList: React.FC = () => {
         <NewTestCaseDialog />
       </div>
       <hr className='w-full border-muted-foreground' />
-      <div className='flex flex-col h-full gap-1 overflow-y-auto'>
+      <div className='flex overflow-y-auto flex-col gap-1 h-full'>
         {testCases.map((test) => (
-          <div key={test.name} className='flex flex-row items-start gap-2 group'>
+          <div key={test.name} className='flex flex-row gap-2 items-start group'>
             <TestCaseActions testName={test.name} />
             <Tooltip>
               <TooltipTrigger asChild>
@@ -761,8 +766,8 @@ const TestCaseList: React.FC = () => {
 
 const TestCaseCard: React.FC<{ test_case: WasmTestCase }> = ({ test_case }) => {
   return (
-    <div className='flex flex-col max-w-full gap-2 text-xs text-left truncate text-vscode-descriptionForeground '>
-      <div className='break-all whitespace-pre-wrap'>
+    <div className='flex flex-col gap-2 max-w-full text-xs text-left truncate text-vscode-descriptionForeground'>
+      <div className='whitespace-pre-wrap break-all'>
         <div className='flex flex-col'>
           {test_case.inputs.map((input) => (
             <div key={input.name}>
@@ -794,10 +799,10 @@ const TestCaseCard: React.FC<{ test_case: WasmTestCase }> = ({ test_case }) => {
 const TestResultContent: React.FC = () => {
   const testsRunning = useAtomValue(runningTestsAtom)
   return (
-    <div className='flex flex-col w-full h-full gap-2 px-2'>
+    <div className='flex flex-col gap-2 px-2 w-full h-full'>
       <TestStatusBanner />
-      <hr className=' border-muted-foreground' />
-      <div className='flex flex-col w-full h-full gap-1 overflow-y-auto'>
+      <hr className='border-muted-foreground' />
+      <div className='flex overflow-y-auto flex-col gap-1 w-full h-full'>
         {testsRunning.map((testName) => (
           <TestRow key={testName} name={testName} />
         ))}

typescript/playground-common/src/shared/FunctionPanel.tsx

@@ -27,6 +27,7 @@ import { CheckboxHeader } from './CheckboxHeader'
 import { Switch } from '../components/ui/switch'
 import { vscode } from '../utils/vscode'
 import clsx from 'clsx'
+import { ErrorBoundary } from 'react-error-boundary'
 
 const handleCopy = (text: string) => () => {
   navigator.clipboard.writeText(text)
@@ -62,7 +63,7 @@ const CurlSnippet: React.FC = () => {
 
   return (
     <div>
-      <div className='flex items-center justify-end p-2 space-x-2 rounded-md shadow-sm'>
+      <div className='flex justify-end items-center p-2 space-x-2 rounded-md shadow-sm'>
         <label className='flex items-center mr-2 space-x-1'>
           <Switch
             className='data-[state=checked]:bg-vscode-button-background data-[state=unchecked]:bg-vscode-input-background'
@@ -154,7 +155,7 @@ const WebviewMedia: React.FC<{ bamlMediaType: 'image' | 'audio'; media: WasmChat
   if (pathAsUri.error) {
     const error = typeof pathAsUri.error.message == 'string' ? pathAsUri.error.message : JSON.stringify(pathAsUri.error)
     return (
-      <div className='bg-vscode-inputValidation-errorBackground rounded-lg px-2 py-1'>
+      <div className='px-2 py-1 rounded-lg bg-vscode-inputValidation-errorBackground'>
         <div>
           Error loading {bamlMediaType}: {error}
         </div>
@@ -198,7 +199,7 @@ const PromptPreview: React.FC = () => {
 
   if (!promptPreview) {
     return (
-      <div className='flex flex-col items-center justify-center w-full h-full gap-2'>
+      <div className='flex flex-col gap-2 justify-center items-center w-full h-full'>
         <span className='text-center'>No prompt preview available! Add a test to see it!</span>
         <FunctionTestSnippet />
       </div>
@@ -229,7 +230,7 @@ const PromptPreview: React.FC = () => {
   }
 
   return (
-    <div className='flex flex-col w-full h-full gap-4 px-2'>
+    <div className='flex flex-col gap-4 px-2 w-full h-full'>
       {promptPreview.as_chat()?.map((chat, idx) => (
         <div key={idx} className='flex flex-col'>
           <div className='flex flex-row'>{chat.role}</div>
@@ -299,7 +300,7 @@ enum Topic {
 }
   `.trim()
     return (
-      <div className='flex flex-col items-center justify-center w-full h-full gap-2'>
+      <div className='flex flex-col gap-2 justify-center items-center w-full h-full'>
         No functions found! You can create a new function like:
         <pre className='p-2 text-xs rounded-sm bg-vscode-input-background'>{bamlFunctionSnippet}</pre>
       </div>
@@ -308,19 +309,19 @@ enum Topic {
 
   return (
     <div
-      className='flex flex-col w-full overflow-auto'
+      className='flex overflow-auto flex-col w-full'
       style={{
         height: 'calc(100vh - 80px)',
       }}
     >
       <TooltipProvider>
         <ResizablePanelGroup direction='vertical' className='h-full'>
-          <ResizablePanel id='top-panel' className='flex w-full px-1' defaultSize={50}>
+          <ResizablePanel id='top-panel' className='flex px-1 w-full' defaultSize={50}>
             <div className='w-full'>
-              <ResizablePanelGroup direction='horizontal' className='h-full pb-4'>
+              <ResizablePanelGroup direction='horizontal' className='pb-4 h-full'>
                 <div className='w-full h-full'>
                   <CheckboxHeader />
-                  <div className='relative w-full overflow-y-auto' style={{ height: 'calc(100% - 32px)' }}>
+                  <div className='overflow-y-auto relative w-full' style={{ height: 'calc(100% - 32px)' }}>
                     <PromptPreview />
                   </div>
                 </div>
@@ -334,9 +335,11 @@ enum Topic {
               <ResizableHandle withHandle={false} className='bg-vscode-panel-border' />
               <ResizablePanel
                 minSize={10}
-                className='flex h-full px-0 py-2 pb-3 border-t border-vscode-textSeparator-foreground'
+                className='flex px-0 py-2 pb-3 h-full border-t border-vscode-textSeparator-foreground'
               >
-                <TestResults />
+                <ErrorBoundary fallback={<div>Error loading test results</div>}>
+                  <TestResults />
+                </ErrorBoundary>
               </ResizablePanel>
             </>
           )}