Merge pull request #99 from lmnr-ai/dev

Improve visuals on code editor, better handling for span path

app-server/src/traces/spans.rs

@@ -181,15 +181,18 @@ impl SpanAttributes {
     /// This is a hack which helps not to change traceloop auto-instrumentation code. It will
     /// modify autoinstrumented LLM spans to have correct exact span path.
     ///
-    /// NOTE: It may not work very precisely for Langchain auto-instrumentation, since it contains
-    /// nested spans within autoinstrumentation. Also, it may not work for autoinstrumented vector DB calls.
+    /// NOTE: Nested spans generated by Langchain auto-instrumentation may have the same path
+    /// because we don't have a way to set the span name/path in the auto-instrumentation code.
     pub fn extend_span_path(&mut self, span_name: &str) {
-        if self.attributes.contains_key(GEN_AI_SYSTEM) {
-            if let Some(serde_json::Value::String(path)) = self.attributes.get(SPAN_PATH) {
+        if let Some(serde_json::Value::String(path)) = self.attributes.get(SPAN_PATH) {
+            if !(path.ends_with(&format!(".{span_name}")) || path == span_name) {
                 let span_path = format!("{}.{}", path, span_name);
                 self.attributes
                     .insert(SPAN_PATH.to_string(), Value::String(span_path));
             }
+        } else {
+            self.attributes
+                .insert(SPAN_PATH.to_string(), Value::String(span_name.to_string()));
         }
     }
 }

frontend/app/globals.css

@@ -41,13 +41,13 @@
     --card: 240 8% 10%;
     --card-foreground: 240 8% 80%;
 
-    --popover: 240 8% 8%;
+    --popover: 240 0% 6%;
     --popover-foreground: 240 8% 80%;
 
     --primary: 16 83% 59%;
     --primary-foreground: 16 0% 91%;
 
-    --secondary: 232 9% 17%;
+    --secondary: 240 4% 11%;
     --secondary-foreground: 240 8% 70%;
 
     --muted: 240 6% 16%;

frontend/components/pipeline/nodes/components/model-select.tsx

@@ -49,7 +49,8 @@ export default function LanguageModelSelect({
     setModel(LANGUAGE_MODELS.find((model) => model.id === modelId));
   }, [modelId]);
 
-  const isProviderKeySet = (provider: string) => providerApiKeys?.some(key => key.name.toLowerCase().includes(provider.toLowerCase()));
+  const isProviderKeySet = (provider: string) => providerApiKeys
+    ?.some(key => key.name.toLowerCase().includes(provider.toLowerCase()));
 
   return (
     <>

frontend/components/sign-in/email-signin.tsx

@@ -13,6 +13,8 @@ interface EmailSignInProps {
   className?: string;
 }
 
+const validateEmailAddress = (email: string): boolean => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
 export function EmailSignInButton({
   text = 'Sign in',
   callbackUrl,
@@ -33,8 +35,11 @@ export function EmailSignInButton({
         value={email}
         onChange={(e) => setEmail(e.target.value)}
       />
+      {!validateEmailAddress(email) && email
+        && <Label className="text-sm text-white"> Please enter a valid email address </Label>
+      }
       <Button
-        disabled={!email}
+        disabled={!email || !validateEmailAddress(email)}
         className="p-4"
         variant={'light'}
         onClick={() => {

frontend/components/traces/chat-message-list-tab.tsx

@@ -10,6 +10,7 @@ function ContentPartText({ text }: ContentPartTextProps) {
   return (
     <div className="w-full h-full">
       <Formatter
+        collapsible
         value={text}
         className="rounded-none max-h-[50vh] border-none"
       />

frontend/components/traces/span-card.tsx

@@ -46,7 +46,7 @@ export function SpanCard({
   return (
     <div className="text-md flex w-full flex-col" ref={ref}>
       <div
-        className="border-l-2 border-b-2 border-l-secondary border-b-secondary rounded-bl-lg absolute left-0"
+        className="border-l-2 border-b-2 rounded-bl-lg absolute left-0"
         style={{
           height:
             segmentHeight -
@@ -90,7 +90,7 @@ export function SpanCard({
           />
           {isSelected && (
             <div
-              className="absolute top-0 w-full bg-primary/15 border-l-2 border-l-primary"
+              className="absolute top-0 w-full bg-primary/20 border-l-2 border-l-primary"
               style={{
                 width: containerWidth,
                 height: ROW_HEIGHT,

frontend/components/traces/span-view-span.tsx

@@ -23,6 +23,7 @@ export function SpanViewSpan({ span }: SpanViewSpanProps) {
               ) : (
                 <Formatter
                   className="max-h-1/3"
+                  collapsible
                   value={JSON.stringify(span.input)}
                 />
               )}
@@ -36,6 +37,7 @@ export function SpanViewSpan({ span }: SpanViewSpanProps) {
                     ? span.output
                     : JSON.stringify(span.output)
                 }
+                collapsible
               />
             </div>
           </div>

frontend/components/ui/code-editor.tsx

@@ -1,15 +1,6 @@
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from './select';
-import { useState } from 'react';
-import YAML from 'yaml';
 import CodeMirror from '@uiw/react-codemirror';
 import { createTheme } from '@uiw/codemirror-themes';
-import { githubDarkStyle, githubDark } from '@uiw/codemirror-theme-github';
+import { githubDarkStyle } from '@uiw/codemirror-theme-github';
 import { json } from '@codemirror/lang-json';
 import { yaml } from '@codemirror/lang-yaml';
 import { python } from '@codemirror/lang-python';
@@ -33,7 +24,10 @@ const myTheme = createTheme({
     lineHighlight: 'transparent',
     gutterBackground: 'transparent',
     gutterBorder: 'transparent',
-    gutterForeground: 'gray !important'
+    gutterForeground: 'gray !important',
+    selection: '#193860',
+    selectionMatch: 'transparent',
+    caret: '2px solid hsl(var(--primary) / 0.1)',
   },
   styles: githubDarkStyle,
 });
@@ -67,10 +61,10 @@ export default function CodeEditor({
   }
 
   return (
-    <div className={cn('w-full h-full flex flex-col p-2', className)}>
+    <div className={cn('w-full h-full flex flex-col p-2 bg-secondary text-foreground', className)}>
       <CodeMirror
         placeholder={placeholder}
-        className="border-none"
+        className="border-none bg-secondary"
         theme={myTheme}
         extensions={extensions}
         editable={editable}

frontend/components/ui/formatter.tsx

@@ -11,7 +11,7 @@ import { cn } from '@/lib/utils';
 import CodeEditor from './code-editor';
 import { Sheet, SheetClose, SheetContent, SheetTrigger } from './sheet';
 import { Button } from './button';
-import { Expand, Maximize, Minimize, X } from 'lucide-react';
+import { Expand, Maximize, Minimize, X, ChevronDown, ChevronUp } from 'lucide-react';
 import { ScrollArea } from './scroll-area';
 import { DialogTitle } from './dialog';
 
@@ -21,17 +21,20 @@ interface OutputFormatterProps {
   defaultMode?: string;
   editable?: boolean;
   onChange?: (value: string) => void;
+  collapsible?: boolean;
 }
 
 export default function Formatter({
   value,
   defaultMode = 'text',
   editable = false,
   onChange,
-  className
+  className,
+  collapsible = false
 }: OutputFormatterProps) {
   const [mode, setMode] = useState(defaultMode);
   const [expandedValue, setExpandedValue] = useState(value);
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
   const renderText = (value: string) => {
     // if mode is YAML try to parse it as YAML
@@ -62,14 +65,14 @@ export default function Formatter({
     <div
       className={cn('w-full h-full flex flex-col border rounded', className)}
     >
-      <div className="flex w-full flex-none">
-        <div className="flex justify-between items-center p-2 w-full border-b">
-          <div>
+      <div className="flex w-full flex-none p-0">
+        <div className={cn("flex justify-between items-center pl-2 pr-1 w-full border-b", isCollapsed ? 'border-b-0' : '')}>
+          <div className="flex items-center gap-2">
             <Select
               value={mode}
               onValueChange={(value) => setMode(value)}
             >
-              <SelectTrigger className="font-medium text-secondary-foreground bg-secondary text-xs border-gray-600 h-6">
+              <SelectTrigger className="font-medium text-secondary-foreground bg-secondary text-xs border-gray-600 h-5">
                 <SelectValue placeholder="Select tag type" />
               </SelectTrigger>
               <SelectContent>
@@ -84,16 +87,35 @@ export default function Formatter({
                 </SelectItem>
               </SelectContent>
             </Select>
+            {collapsible && (
+              <Button
+                variant="ghost"
+                className="flex items-center gap-1 text-secondary-foreground"
+                onClick={() => setIsCollapsed(!isCollapsed)}
+              >
+                {isCollapsed ? (
+                  <>
+                    show
+                    <ChevronDown size={16} />
+                  </>
+                ) : (
+                  <>
+                    hide
+                    <ChevronUp size={16} />
+                  </>
+                )}
+              </Button>
+            )}
           </div>
           <Sheet>
             <SheetTrigger asChild>
               <Button variant="ghost" size="icon">
-                <Maximize className="h-4 w-4" />
+                <Maximize className="h-3.5 w-3.5" />
               </Button>
             </SheetTrigger>
             <SheetContent side="right" className="flex flex-col gap-0 min-w-[50vw]">
               <DialogTitle className='hidden'></DialogTitle>
-              <div className="flex-none border-b h-12 items-center flex p-4 justify-between">
+              <div className="flex-none border-b items-center flex px-4 justify-between">
                 <div className="flex justify-start">
                   <Select
                     value={mode}
@@ -147,26 +169,28 @@ export default function Formatter({
           </Sheet>
         </div>
       </div>
-      <div className="overflow-auto flex-grow">
-        <CodeEditor
-          value={renderText(value)}
-          editable={editable}
-          language={mode}
-          onChange={(v) => {
-            setExpandedValue(v);
-            if (mode === 'yaml') {
-              try {
-                const parsedYaml = YAML.parse(v);
-                onChange?.(JSON.stringify(parsedYaml, null, 2));
-              } catch (e) {
+      {(!collapsible || !isCollapsed) && (
+        <div className="overflow-auto flex-grow">
+          <CodeEditor
+            value={renderText(value)}
+            editable={editable}
+            language={mode}
+            onChange={(v) => {
+              setExpandedValue(v);
+              if (mode === 'yaml') {
+                try {
+                  const parsedYaml = YAML.parse(v);
+                  onChange?.(JSON.stringify(parsedYaml, null, 2));
+                } catch (e) {
+                  onChange?.(v);
+                }
+              } else {
                 onChange?.(v);
               }
-            } else {
-              onChange?.(v);
-            }
-          }}
-        />
-      </div>
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 }