render errors better (#1317)

<!-- ELLIPSIS_HIDDEN -->


> [!IMPORTANT]
> Improve error message rendering by using `<pre>` tags in
`ResponseRenderer.tsx` and `TabularView.tsx`, and add
`WasmFunctionResponse` import in `TabularView.tsx`.
> 
>   - **Error Rendering**:
> - Change error message rendering from `<div>` to `<pre>` in
`ResponseRenderer.tsx` and `TabularView.tsx` for better formatting.
>   - **Imports**:
> - Add `WasmFunctionResponse` import in `TabularView.tsx` to handle
additional response types.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=BoundaryML%2Fbaml&utm_source=github&utm_medium=referral)<sup>
for b92edf5. It will automatically
update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/ResponseRenderer.tsx

@@ -96,7 +96,7 @@ export const ResponseRenderer: React.FC<ResponseRendererProps> = ({ response, st
       </div>
 
       {/* Error Messages */}
-      {failureMessage && <div className='text-xs text-red-500'>Error: {failureMessage}</div>}
+      {failureMessage && <pre className='text-xs text-red-500 text-balance'>Error: {failureMessage}</pre>}
     </div>
   )
 }

typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/test-panel/components/TabularView.tsx

@@ -6,7 +6,7 @@ import { Check, Copy, Play } from 'lucide-react'
 import * as React from 'react'
 
 import { cn } from '@/lib/utils'
-import { WasmTestResponse } from '@gloo-ai/baml-schema-wasm-web'
+import { WasmFunctionResponse, WasmTestResponse } from '@gloo-ai/baml-schema-wasm-web'
 import { ErrorBoundary } from 'react-error-boundary'
 import { Button } from '~/components/ui/button'
 import { selectedItemAtom, TestState } from '../../../atoms'
@@ -68,9 +68,20 @@ const CopyButton = ({
   )
 }
 
-const ResponseContent = ({ state, responseViewType }: { state: TestState; responseViewType: ResponseViewType }) => {
+const ResponseContent = ({
+  response,
+  state,
+  responseViewType,
+}: {
+  response: WasmTestResponse | WasmFunctionResponse | undefined
+  state: TestState
+  responseViewType: ResponseViewType
+}) => {
+  const failureMessage = response && 'failure_message' in response ? response.failure_message() : undefined
+
   return (
     <div className=''>
+      {failureMessage && <pre className='pb-2 text-xs text-red-500 text-balance'>Error: {failureMessage}</pre>}
       {responseViewType === 'parsed' && (
         <>
           <ParsedResponseRenderer response={getTestStateResponse(state)} />
@@ -254,7 +265,11 @@ export const TabularView: React.FC<TabularViewProps> = ({ currentRun }) => {
                     className="relative max-h-[500px] flex-1"
                     type="always"
                   > */}
-                  <ResponseContent state={test.response} responseViewType={config.responseViewType} />
+                  <ResponseContent
+                    response={getTestStateResponse(test.response)}
+                    state={test.response}
+                    responseViewType={config.responseViewType}
+                  />
                   {/* </ScrollArea> */}
                 </TableCell>
                 <TableCell className='px-1 py-1'>