Auto input as message (#3055)

* fixed and some UX stuff * more stuff
Helicone · Dec 13, 2024 · 1403003 · 1403003
1 parent ff2b25c
commit 1403003
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 33 deletions.
diff --git a/web/components/shared/markdownEditor.tsx b/web/components/shared/markdownEditor.tsx
@@ -1,3 +1,11 @@
+import { highlight, languages } from "prismjs";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-markdown";
+import "prismjs/components/prism-markup-templating";
+import "prismjs/themes/prism.css";
+import Editor from "react-simple-code-editor";
 import { Editor as MonacoEditor } from "@monaco-editor/react";
 import { editor } from "monaco-editor";
 import { useTheme } from "next-themes";
@@ -13,7 +21,7 @@ interface MarkdownEditorProps {
 }
 
 const MAX_EDITOR_HEIGHT = 500;
-const MarkdownEditor = (props: MarkdownEditorProps) => {
+const MonacoMarkdownEditor = (props: MarkdownEditorProps) => {
   const {
     text,
     setText,
@@ -35,27 +43,94 @@ const MarkdownEditor = (props: MarkdownEditorProps) => {
     );
 
   return (
-    <MonacoEditor
+    <div>
+      <MonacoEditor
+        value={text}
+        onChange={(value) => setText(value || "")}
+        language={language}
+        theme={currentTheme === "dark" ? "vs-dark" : "vs-light"}
+        onMount={(editor) =>
+          editor.onDidContentSizeChange(() => updateHeight(editor))
+        }
+        options={{
+          minimap: { enabled: false },
+          fontSize: 12,
+          fontFamily: '"Fira Code", "Fira Mono", monospace',
+          readOnly: disabled,
+          wordWrap: "on",
+          lineNumbers: "off",
+          language: "markdown",
+          scrollBeyondLastLine: false, // Prevents extra space at bottom
+          automaticLayout: true, // Enables auto-resizing
+        }}
+        className={className}
+        height={height}
+      />
+      <i className="text-xs text-gray-500">
+        Helicone: Large text detected, falling back to large text editor
+      </i>
+    </div>
+  );
+};
+
+interface MarkdownEditorProps {
+  text: string;
+  setText: (text: string) => void;
+  language: "json" | "markdown";
+  disabled?: boolean;
+  className?: string;
+  textareaClassName?: string;
+}
+
+const LARGE_TEXT_THRESHOLD = 50;
+
+const MarkdownEditor = (props: MarkdownEditorProps) => {
+  const {
+    text,
+    setText,
+    language,
+    disabled = false,
+    className,
+    textareaClassName,
+  } = props;
+
+  const languageMap = {
+    json: {
+      lang: languages.json,
+      ref: "json",
+    },
+    markdown: {
+      lang: languages.markdown,
+      ref: "markdown",
+    },
+  };
+
+  const { lang, ref } = languageMap[language];
+  if (text.split("\n").length > LARGE_TEXT_THRESHOLD) {
+    return <MonacoMarkdownEditor {...props} />;
+  }
+
+  return (
+    <Editor
       value={text}
-      onChange={(value) => setText(value || "")}
-      language={language}
-      theme={currentTheme === "dark" ? "vs-dark" : "vs-light"}
-      onMount={(editor) =>
-        editor.onDidContentSizeChange(() => updateHeight(editor))
+      onValueChange={setText}
+      highlight={(code) => {
+        if (!code) return "";
+        if (typeof code !== "string") return "";
+        return highlight(code, lang, ref);
+      }}
+      padding={16}
+      className={
+        className ??
+        `text-sm text-black dark:text-white border border-gray-300 dark:border-gray-700 rounded-lg whitespace-pre-wrap `
       }
-      options={{
-        minimap: { enabled: false },
-        fontSize: 12,
+      textareaClassName={textareaClassName ?? ""}
+      // mono font
+      style={{
         fontFamily: '"Fira Code", "Fira Mono", monospace',
-        readOnly: disabled,
-        wordWrap: "on",
-        lineNumbers: "off",
-        language: "markdown",
-        scrollBeyondLastLine: false, // Prevents extra space at bottom
-        automaticLayout: true, // Enables auto-resizing
+        fontSize: 12,
       }}
-      className={className}
-      height={height}
+      disabled={disabled}
     />
   );
 };

diff --git a/web/components/templates/prompts/experiments/table/AddColumnDialog.tsx b/web/components/templates/prompts/experiments/table/AddColumnDialog.tsx
@@ -106,7 +106,7 @@ const AddColumnDialog = ({
           : onOpenChange
       }
     >
-      <DialogContent className="w-[95vw] max-w-2xl gap-0 max-h-[90vh] overflow-y-auto">
+      <DialogContent className="w-[95vw] max-w-5xl gap-0 max-h-[90vh] overflow-y-auto">
         <div className="flex justify-between items-center mb-8">
           <div className="flex items-center">
             <FlaskConicalIcon className="w-5 h-5 mr-2.5 text-slate-500" />

diff --git a/web/components/templates/prompts/experiments/table/components/tableElementsRenderer.tsx b/web/components/templates/prompts/experiments/table/components/tableElementsRenderer.tsx
@@ -245,7 +245,7 @@ const ExperimentTableHeader = (props: ExperimentHeaderProps) => {
           />
         </div>
       </DialogTrigger>
-      <DialogContent className="w-[95vw] max-w-2xl gap-0 overflow-y-auto">
+      <DialogContent className="w-[95vw] max-w-5xl gap-0 overflow-y-auto">
         <div className="flex justify-between items-center mb-8">
           <div className="flex items-center">
             <FlaskConicalIcon className="w-5 h-5 mr-2.5 text-slate-500" />
@@ -265,14 +265,14 @@ const ExperimentTableHeader = (props: ExperimentHeaderProps) => {
             </div>
           </div>
         </div>
-        <Tabs defaultValue="preview">
+        <Tabs defaultValue="preview" className="h-full">
           {!isOriginal && (
             <TabsList>
               <TabsTrigger value="preview">Preview</TabsTrigger>
               <TabsTrigger value="diff">Diff</TabsTrigger>
             </TabsList>
           )}
-          <TabsContent value="preview">
+          <TabsContent value="preview" className="max-h-[80vh] overflow-y-auto">
             <PromptPlayground
               prompt={promptTemplate?.helicone_template ?? ""}
               selectedInput={undefined}
@@ -288,7 +288,7 @@ const ExperimentTableHeader = (props: ExperimentHeaderProps) => {
               className="border rounded-md border-slate-200 dark:border-slate-700"
             />
           </TabsContent>
-          <TabsContent value="diff">
+          <TabsContent value="diff" className="max-h-[80vh] overflow-y-auto">
             <ArrayDiffViewer
               origin={originalPromptTemplate?.helicone_template?.messages ?? []}
               target={
@@ -442,7 +442,7 @@ const InputCell = ({
               key={index}
               className="text-slate-700 dark:text-slate-300 leading-[130%] text-[13px] max-w-full overflow-hidden whitespace-nowrap truncate"
             >
-              <span className="font-medium">Auto input {index}</span>:{" "}
+              <span className="font-medium">Message {index}</span>:{" "}
               {JSON.stringify(input)}
             </li>
           ))}

diff --git a/web/components/templates/prompts/id/MessageRendererComponent.tsx b/web/components/templates/prompts/id/MessageRendererComponent.tsx
@@ -29,6 +29,16 @@ interface MessageRendererComponentProps {
   requestMessages: any;
   responseMessage: any;
 }
+//<helicone-auto-prompt-input idx=0 />
+function getAutoPromptIndex(api: string) {
+  const autoPromptIndex = api.match(
+    /<helicone-auto-prompt-input idx=["']?(\d+)["']?\s*\/?>/
+  );
+  if (autoPromptIndex) {
+    return parseInt(autoPromptIndex[1]);
+  }
+  return -1;
+}
 
 const MessageRendererComponent: React.FC<MessageRendererComponentProps> = ({
   messages,
@@ -56,7 +66,11 @@ const MessageRendererComponent: React.FC<MessageRendererComponentProps> = ({
           {messages.map((message, index) =>
             typeof message === "string" ? (
               message.startsWith("<helicone-auto-prompt") ? (
-                <Badge variant="secondary">Auto Prompt Input</Badge>
+                <div className="flex items-center p-2">
+                  <Badge variant="secondary" className="py-2 px-4">
+                    Message {getAutoPromptIndex(message)}
+                  </Badge>
+                </div>
               ) : (
                 "bye"
               )

diff --git a/web/components/templates/prompts/id/promptPlayground.tsx b/web/components/templates/prompts/id/promptPlayground.tsx
@@ -106,13 +106,6 @@ const PromptPlayground: React.FC<PromptPlaygroundProps> = ({
     );
   };
 
-  // Helper function to check if a message is a Helicone auto-prompt input
-  const isHeliconeAutoPromptInput = (msg: any): boolean => {
-    return (
-      typeof msg === "string" && msg.startsWith("<helicone-auto-prompt-input")
-    );
-  };
-
   const [mode, setMode] = useState<(typeof PROMPT_MODES)[number]>("Pretty");
   const [isEditMode, setIsEditMode] = useState(defaultEditMode);
   const [currentChat, setCurrentChat] = useState<PromptMessage[]>(() =>
@@ -270,7 +263,7 @@ const PromptPlayground: React.FC<PromptPlaygroundProps> = ({
           isEditMode={isEditMode}
           setIsEditMode={setIsEditMode}
         />
-        <div className="flex-grow overflow-auto rounded-b-md">
+        <div className="flex-grow overflow-auto rounded-b-md ">
           <MessageRendererComponent
             messages={messages}
             mode={mode}