Fix prompt fiddle and playground styles, add more logging, and add st…

…op-reason to playground (#858)

- Fix styles in promptfiddle (make errors more prominent)
- Fix selected file logic in prompfiddle to not choose clients.baml if
possible
- Add some more debug logs on requests
- Add log when there's more than 1 retry
- Add stop-reason to the playground

engine/baml-runtime/src/internal/llm_client/mod.rs

@@ -1,5 +1,6 @@
 use std::collections::HashMap;
 
+use base64::write;
 use colored::*;
 pub mod llm_provider;
 pub mod orchestrator;
@@ -162,10 +163,11 @@ impl std::fmt::Display for LLMCompleteResponse {
             f,
             "{}",
             format!(
-                "Client: {} ({}) - {}ms",
+                "Client: {} ({}) - {}ms. StopReason: {}",
                 self.client,
                 self.model,
-                self.latency.as_millis()
+                self.latency.as_millis(),
+                self.metadata.finish_reason.as_deref().unwrap_or("unknown")
             )
             .yellow()
         )?;

engine/baml-runtime/src/internal/llm_client/primitive/openai/openai_client.rs

@@ -369,7 +369,15 @@ impl SseResponseTrait for OpenAIClient {
                                     inner.metadata.finish_reason =
                                         Some(FinishReason::Stop.to_string());
                                 }
-                                _ => (),
+                                finish_reason => {
+                                    log::info!(
+                                        "Received a non-stop finish reason: {:?}",
+                                        finish_reason
+                                    );
+                                    inner.metadata.baml_is_complete = false;
+                                    inner.metadata.finish_reason =
+                                        finish_reason.as_ref().map(|r| r.to_string());
+                                }
                             }
                         }
                         inner.latency = instant_start.elapsed();
@@ -529,6 +537,7 @@ fn convert_message_parts_to_content(parts: &Vec<ChatMessagePart>) -> serde_json:
                     })})
                 }
                 BamlMedia::Base64(BamlMediaType::Image, image) => {
+                    // TODO: validate the media_type is present!
                     json!({"type": "image_url", "image_url": json!({
                        "url" : format!("data:{};base64,{}", image.media_type, image.base64)
                     })})

engine/baml-runtime/src/internal/llm_client/primitive/request.rs

@@ -74,7 +74,7 @@ pub async fn make_request(
         }
     };
 
-    log::debug!("built request: {:?}", req);
+    log::debug!("LLM request: {:?} body: {:?}", req, req.body());
 
     let response = match client.http_client().execute(req).await {
         Ok(response) => response,

engine/baml-runtime/src/types/response.rs

@@ -16,6 +16,14 @@ pub struct FunctionResult {
 
 impl std::fmt::Display for FunctionResult {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        // print out the number of previous tries only if there was more than 1
+        if self.event_chain.len() > 1 {
+            writeln!(
+                f,
+                "{}",
+                format!("({} other previous tries)", self.event_chain.len() - 1).yellow()
+            )?;
+        }
         writeln!(f, "{}", self.llm_response())?;
         match &self.parsed() {
             Some(Ok(val)) => {

engine/baml-schema-wasm/src/runtime_wasm/mod.rs

@@ -385,6 +385,7 @@ pub struct WasmLLMResponse {
     pub input_tokens: Option<u64>,
     pub output_tokens: Option<u64>,
     pub total_tokens: Option<u64>,
+    pub stop_reason: Option<String>,
 }
 
 #[wasm_bindgen(getter_with_clone, inspectable)]
@@ -604,6 +605,7 @@ impl IntoWasm
                 input_tokens: s.metadata.prompt_tokens,
                 output_tokens: s.metadata.output_tokens,
                 total_tokens: s.metadata.total_tokens,
+                stop_reason: s.metadata.finish_reason.clone(),
             }),
             _ => None,
         }

typescript/fiddle-frontend/app/[project_id]/_atoms/atoms.ts

@@ -25,14 +25,22 @@ const activeFileNameAtomRaw = atomWithStorage<string | null>('active_file', null
 export const activeFileNameAtom = atom(
   (get) => {
     const files = get(currentEditorFilesAtom)
-    // hack to get default file selection for now..
-    const activeFileName = get(activeFileNameAtomRaw) ?? 'baml_src/01-extract-receipt.baml'
-    const selectedFile = files.find((f) => f.path === activeFileName) ?? files[0]
+    let activeFileName = get(activeFileNameAtomRaw)
+    // Validate the current active file or determine a new one
+    if (!activeFileName || !files.some((f) => f.path === activeFileName)) {
+      const defaultFile = 'baml_src/01-extract-receipt.baml'
+      const excludeFile = 'baml_src/clients.baml'
+      const alternativeFiles = files.filter((f) => f.path !== excludeFile).sort((a, b) => a.path.localeCompare(b.path))
 
-    if (selectedFile) {
-      return selectedFile.path
+      // 1. Default file if available
+      // 2. First non-excluded file, sorted alphabetically
+      // 3. First file in the list as a last resort
+      activeFileName = files.find((f) => f.path === defaultFile)?.path || alternativeFiles[0]?.path || files[0]?.path
     }
-    return null
+
+    // Find and return the selected file path or null if none are valid
+    const selectedFile = files.find((f) => f.path === activeFileName)
+    return selectedFile ? selectedFile.path : null
   },
   (get, set, path: string) => {
     const files = get(currentEditorFilesAtom)

typescript/fiddle-frontend/app/[project_id]/_components/CodeMirrorEditor.tsx

@@ -121,6 +121,7 @@ function makeLinter() {
               message: err.message,
               severity: err.type === 'warning' ? 'warning' : 'error',
               source: 'baml',
+              markClass: err.type === 'error' ? 'decoration-wavy decoration-red-500 text-red-450 stroke-blue-500' : '',
             }
           }) ?? []
       )
@@ -235,9 +236,9 @@ export const CodeMirrorEditor = ({ project }: { project: BAMLProject }) => {
             setUnsavedChanges(true)
           }}
         />
-        <div className='absolute bottom-4 right-2 h-[20px] p-2'>
+        <div className='absolute bottom-3 pl-8  inset-x-0 right-[10px] h-[20px] p-2'>
           {numErrors.errors > 0 && (
-            <div className='p-1 text-xs text-white bg-red-500 rounded-md'>
+            <div className='w-full p-1 px-5 text-xs text-white bg-red-500 rounded-md'>
               {numErrors.errors} {numErrors.errors === 1 ? 'error' : 'errors'}
             </div>
           )}

typescript/fiddle-frontend/app/globals.css

@@ -84,7 +84,7 @@
 
 /* controls dropdown styling on rsjf */
 .form-control {
-@apply bg-vscode-input-background text-vscode-input-foreground rounded-sm;
+  @apply bg-vscode-input-background text-vscode-input-foreground rounded-sm;
 }
 
 .array-item {
@@ -279,3 +279,28 @@
   background-color: var(--vscode-terminal-ansiWhite);
   opacity: 0.3;
 }
+
+#cw-widget-holder {
+  @apply left-0 ml-2;
+}
+
+button.woot-widget-bubble:nth-child(1) {
+  @apply scale-50 origin-bottom-right left-0;
+}
+
+button.woot-elements--right:nth-child(2) {
+  @apply scale-50 origin-bottom-right left-0;
+}
+
+.cm-lintRange-error {
+  @apply decoration-wavy stroke-blue-500 !important;
+}
+
+[class*='cm-lintRange-error'] {
+  background-image: none !important;
+  @apply underline underline-offset-2 decoration-wavy  stroke-2 decoration-red-500 decoration-[1.2px] !important;
+}
+
+.tok-typeName {
+  /* @apply decoration-green-400 bg-purple-500; */
+}

typescript/fiddle-frontend/public/_examples/all-projects/baml_src/01-extract-receipt.baml

@@ -1,7 +1,7 @@
 // This is a BAML file, which extends the Jinja2 templating language to write LLM functions.
 // Run a test to see how it works!
 
-// How to call BAML functions from other languages: https://docs.boundaryml.com
+// https://docs.boundaryml.com
 
 // We want the LLM to extract this info from an image receipt
 class Receipt {

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

@@ -122,6 +122,7 @@ const LLMTestResult: React.FC<{ test: WasmTestResponse; doneStatus: DoneTestStat
     latency_ms: llm_response?.latency_ms,
     output_tokens: llm_response?.output_tokens,
     model: llm_response?.model,
+    stop_reason: llm_response?.stop_reason,
   })
 
   const details = [
@@ -134,7 +135,8 @@ const LLMTestResult: React.FC<{ test: WasmTestResponse; doneStatus: DoneTestStat
     .filter((x) => x[0] !== undefined)
     .map((x) => x[1])
 
-  const detailsText = details.length > 0 ? ` (${details.join(', ')})` : ''
+  const stopReasonText = llm_response?.stop_reason ? ` |  StopReason: ${llm_response?.stop_reason} | ` : ''
+  const detailsText = details.length > 0 ? `${stopReasonText}  (${details.join(', ')})` : ''
 
   return (
     <div className='flex flex-col w-full gap-1'>
@@ -374,6 +376,12 @@ const TestStatusBanner: React.FC = () => {
     })
   }
 
+  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'>
       <FilterIcon size={16} />

typescript/playground-common/src/lib/feedback_widget.ts

@@ -74,6 +74,7 @@ const loadChatwoot = () => {
       ;(window as any).chatwootSDK.run({
         websiteToken: 'M4EXKvdb9NGgxqZzkTZfeFV7',
         baseUrl: BASE_URL,
+        position: 'left',
       })
     }
   })(document, 'script')

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

@@ -21,8 +21,8 @@ const CurlSnippet: React.FC = () => {
 
   return (
     <div>
-      <div className='flex justify-end items-center space-x-2 p-2  rounded-md shadow-sm'>
-        <label className='flex items-center space-x-1 mr-2'>
+      <div className='flex items-center justify-end 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'
             checked={useAtomValue(streamCurl)}
@@ -32,7 +32,7 @@ const CurlSnippet: React.FC = () => {
         </label>
         <Button
           onClick={handleCopy(rawCurl)}
-          className='py-1 px-3 text-xs text-white bg-vscode-button-background hover:bg-vscode-button-hoverBackground'
+          className='px-3 py-1 text-xs text-white bg-vscode-button-background hover:bg-vscode-button-hoverBackground'
         >
           <Copy size={16} />
         </Button>
@@ -185,7 +185,7 @@ enum Topic {
         <ResizablePanelGroup direction='vertical' className='h-full'>
           <ResizablePanel id='top-panel' className='flex w-full px-1' defaultSize={50}>
             <div className='w-full'>
-              <ResizablePanelGroup direction='horizontal' className='h-full'>
+              <ResizablePanelGroup direction='horizontal' className='h-full pb-4'>
                 <div className='w-full h-full'>
                   <CheckboxHeader />
                   <div className='relative w-full overflow-y-auto' style={{ height: 'calc(100% - 32px)' }}>
@@ -202,7 +202,7 @@ enum Topic {
               <ResizableHandle withHandle={false} className='bg-vscode-panel-border' />
               <ResizablePanel
                 minSize={10}
-                className='flex h-full px-0 py-2 mb-2 border-t border-vscode-textSeparator-foreground'
+                className='flex h-full px-0 py-2 pb-3 border-t border-vscode-textSeparator-foreground'
               >
                 <TestResults />
               </ResizablePanel>

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

@@ -32,6 +32,16 @@ export const Snippets = () => {
           of the language.
         </DialogDescription>
       </DialogHeader>
+      <div className='flex justify-center'>
+        <a href='https://docs.boundaryml.com' target='_blank' rel='noopener noreferrer'>
+          <Button
+            variant={'ghost'}
+            className='flex flex-row items-center px-2 py-1 mt-3 mr-2 text-base whitespace-pre-wrap bg-indigo-600 hover:bg-indigo-500 h-fit gap-x-2 text-vscode-button-foreground'
+          >
+            <span className='whitespace-nowrap'>View our full docs!</span>
+          </Button>
+        </a>
+      </div>
 
       {/* Use flex-row to layout the FileViewer alongside the snippet carousels */}
       <div className='flex flex-row items-start w-full h-full'>
@@ -50,16 +60,6 @@ export const Snippets = () => {
           </div>
         </div>
       </div>
-      <div className='flex justify-center'>
-        <a href='https://docs.boundaryml.com' target='_blank' rel='noopener noreferrer'>
-          <Button
-            variant={'ghost'}
-            className='flex flex-row items-center px-2 py-1 mt-3 mr-2 text-base whitespace-pre-wrap bg-indigo-600 hover:bg-indigo-500 h-fit gap-x-2 text-vscode-button-foreground'
-          >
-            <span className='whitespace-nowrap'>View our full docs!</span>
-          </Button>
-        </a>
-      </div>
     </div>
   )
 }

typescript/vscode-ext/packages/web-panel/src/App.css

@@ -290,7 +290,6 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis; /* Ensures text is truncated with ellipsis if it overflows */
-
 }
 
 /* TextComponent.css */
@@ -308,9 +307,9 @@
   border-radius: 8px;
 }
 
-
 /* Ensure arrows and icons have appropriate spacing */
-.tree-container .arrow, .tree-container .icon {
+.tree-container .arrow,
+.tree-container .icon {
   margin-right: 8px;
 }
 
@@ -336,7 +335,17 @@
   margin-right: 8px;
 }
 
+#cw-widget-holder {
+  @apply left-0 ml-0;
+}
 
+button.woot-widget-bubble:nth-child(1) {
+  @apply scale-50 origin-bottom-left left-1 bottom-1;
+}
+
+button.woot-elements--right:nth-child(2) {
+  @apply scale-50 origin-bottom-left left-1 bottom-1;
+}
 
 /* .json-view {
   color: var(--vscode-terminal-background);

typescript/vscode-ext/packages/web-panel/src/App.tsx

@@ -24,7 +24,7 @@ function App() {
       <Suspense fallback={<div>Loading...</div>}>
         <EventListener>
           <AppStateProvider>
-            <div className='flex flex-col w-full gap-2 px-2 pb-4'>
+            <div className='flex flex-col w-full gap-2 px-2 pb-1 h-[100vh] overflow-y-clip'>
               <div className='flex flex-row items-center justify-start gap-1'>
                 <ViewSelector />
               </div>