Session page redesign (#2693)

Helicone · Sep 27, 2024 · 4d07154 · 4d07154
1 parent 9fafb63
commit 4d07154
Show file tree

Hide file tree

Showing 20 changed files with 930 additions and 326 deletions.
diff --git a/web/components/templates/requests/chatComponent/chat.tsx b/web/components/templates/requests/chatComponent/chat.tsx
@@ -13,11 +13,13 @@ import { ChatTopBar, PROMPT_MODES } from "./chatTopBar";
 import { JsonView } from "./jsonView";
 import { LlmSchema } from "../../../../lib/api/models/requestResponseModel";
 import { useLocalStorage } from "../../../../services/hooks/localStorage";
+import { HeliconeRequest } from "@/lib/api/request/request";
 
 interface ChatProps {
   llmSchema?: LlmSchema;
   requestBody: any;
   responseBody: any;
+  request: HeliconeRequest;
   requestId: string;
   status: number;
   model: string;
@@ -31,6 +33,7 @@ interface ChatProps {
 }
 
 export const Chat: React.FC<ChatProps> = ({
+  request,
   requestBody,
   responseBody,
   requestId,
@@ -42,7 +45,7 @@ export const Chat: React.FC<ChatProps> = ({
   autoInputs,
   hideTopBar,
   messageSlice,
-  className = "bg-gray-50",
+  className = "bg-slate-50",
   status,
 }) => {
   const [open, setOpen] = useState(false);
@@ -97,7 +100,7 @@ export const Chat: React.FC<ChatProps> = ({
           className
         )}
       >
-        <div className="w-full border border-gray-300 dark:border-gray-700 rounded-md divide-y divide-gray-300 dark:divide-gray-700 h-full">
+        <div className="w-full border border-slate-200 dark:border-gray-700 divide-y divide-gray-300 dark:divide-gray-700 h-full">
           {!hideTopBar && <ChatTopBar {...chatTopBarProps} />}
 
           {mode === "JSON" ? (
@@ -122,7 +125,7 @@ export const Chat: React.FC<ChatProps> = ({
         </div>
       </div>
       <ThemedModal open={open} setOpen={setOpen}>
-        <div className="w-[80vw] border border-gray-300 dark:border-gray-700 rounded-md divide-y divide-gray-300 dark:divide-gray-700 h-full">
+        <div className="w-[80vw] rounded-md divide-y divide-gray-300 dark:divide-gray-700 h-full">
           <ChatTopBar {...chatTopBarProps} isModal={true} />
           {mode === "JSON" ? (
             <JsonView requestBody={requestBody} responseBody={responseBody} />

diff --git a/web/components/templates/requests/chatComponent/chatTopBar.tsx b/web/components/templates/requests/chatComponent/chatTopBar.tsx
@@ -44,11 +44,11 @@ export const ChatTopBar: React.FC<ChatTopBarProps> = ({
   const router = useRouter();
 
   return (
-    <div className="h-10 px-2 rounded-md flex flex-row items-center justify-between w-full bg-gray-50 dark:bg-black text-gray-900 dark:text-gray-100">
+    <div className="h-10 px-2 rounded-md flex flex-row items-center justify-between w-full bg-slate-50 dark:bg-black text-slate-900 dark:text-slate-100">
       <div className="flex flex-row items-center space-x-2">
         <button
           onClick={toggleAllExpanded}
-          className="flex flex-row space-x-1 items-center hover:bg-gray-200 dark:hover:bg-gray-800 py-1 px-2 rounded-lg"
+          className="flex flex-row space-x-1 items-center hover:bg-slate-200 dark:hover:bg-slate-800 py-1 px-2 rounded-lg"
         >
           {allExpanded ? (
             <EyeSlashIcon className="h-4 w-4" />
@@ -70,7 +70,7 @@ export const ChatTopBar: React.FC<ChatTopBarProps> = ({
                 router.push("/playground?request=" + requestId);
               }
             }}
-            className="flex flex-row space-x-1 items-center hover:bg-gray-200 dark:hover:bg-gray-800 py-1 px-2 rounded-lg"
+            className="flex flex-row space-x-1 items-center hover:bg-slate-200 dark:hover:bg-slate-800 py-1 px-2 rounded-lg"
           >
             <BeakerIcon className="h-4 w-4" />
             <p className="text-xs font-semibold">Playground</p>
@@ -81,7 +81,7 @@ export const ChatTopBar: React.FC<ChatTopBarProps> = ({
         {!isModal && (
           <button
             onClick={() => setOpen(true)}
-            className="flex flex-row space-x-1 items-center hover:bg-gray-200 dark:hover:bg-gray-800 py-1 px-2 rounded-lg"
+            className="flex flex-row space-x-1 items-center hover:bg-slate-200 dark:hover:bg-slate-800 py-1 px-2 rounded-lg"
           >
             <ArrowsPointingOutIcon className="h-4 w-4" />
             <p className="text-xs font-semibold">Expand</p>
@@ -91,7 +91,7 @@ export const ChatTopBar: React.FC<ChatTopBarProps> = ({
           onClick={() => {
             setMode(cycleMode(mode));
           }}
-          className="flex flex-row space-x-1 items-center hover:bg-gray-200 dark:hover:bg-gray-800 py-1 px-2 rounded-lg"
+          className="flex flex-row space-x-1 items-center hover:bg-slate-200 dark:hover:bg-slate-800 py-1 px-2 rounded-lg"
         >
           <ChevronUpDownIcon className="h-4 w-4" />
           <p className="text-xs font-semibold">{mode}</p>

diff --git a/web/components/templates/requests/completion.tsx b/web/components/templates/requests/completion.tsx
@@ -34,12 +34,12 @@ export const Completion = (props: CompletionProps) => {
     const image_url = response?.image_url;
     if (image_url) {
       return (
-        <div className="flex flex-col space-y-4 divide-y divide-gray-100 dark:divide-gray-900">
+        <div className="flex flex-col space-y-4 divide-y divide-slate-100 dark:divide-slate-900">
           {/* eslint-disable-next-line @next/next/no-img-element */}
           {image_url ? (
             <img src={image_url} alt={""} width={200} height={200} />
           ) : (
-            <div className="h-[150px] w-[200px] bg-white dark:bg-black border border-gray-300 dark:border-gray-700 text-center items-center flex justify-center text-xs italic text-gray-500">
+            <div className="h-[150px] w-[200px] bg-white dark:bg-black border border-slate-300 dark:border-slate-700 text-center items-center flex justify-center text-xs italic text-slate-500">
               Unsupported Image Type
             </div>
           )}
@@ -52,13 +52,13 @@ export const Completion = (props: CompletionProps) => {
 
   return (
     <div className="w-full flex flex-col text-left space-y-2 text-sm">
-      <div className="w-full border border-gray-300 dark:border-gray-700 rounded-md divide-y divide-gray-300 dark:divide-gray-700 h-full">
-        <div className="h-10 px-2 rounded-md flex flex-row items-center justify-end w-full bg-gray-50 text-gray-900 dark:bg-black dark:text-gray-100">
+      <div className="w-full border border-slate-200 dark:border-slate-700 divide-y divide-slate-300 dark:divide-slate-700 h-full">
+        <div className="h-10 px-2 flex flex-row items-center justify-end w-full bg-slate-50 text-slate-900 dark:bg-black dark:text-slate-100">
           {defaultMode === "json" ? (
             <Tooltip title="Model is pending mapping">
-              <button className="hover:cursor-not-allowed flex flex-row space-x-1 items-center hover:bg-gray-200 dark:hover:bg-gray-800 py-1 px-2 rounded-lg">
+              <button className="hover:cursor-not-allowed flex flex-row space-x-1 items-center hover:bg-slate-200 dark:hover:bg-slate-800 py-1 px-2 rounded-lg">
                 <ChevronUpDownIcon className="h-4 w-4" />
-                <p className="text-xs font-semibold text-gray-900 dark:text-gray-100">
+                <p className="text-xs font-semibold text-slate-900 dark:text-slate-100">
                   {mode === "pretty" ? "JSON" : "Pretty"}
                 </p>
               </button>
@@ -68,50 +68,50 @@ export const Completion = (props: CompletionProps) => {
               onClick={() => {
                 setMode(mode === "pretty" ? "json" : "pretty");
               }}
-              className="flex flex-row space-x-1 items-center hover:bg-gray-200 dark:hover:bg-gray-800 py-1 px-2 rounded-lg"
+              className="flex flex-row space-x-1 items-center hover:bg-slate-200 dark:hover:bg-slate-800 py-1 px-2 rounded-lg"
             >
               <ChevronUpDownIcon className="h-4 w-4" />
-              <p className="text-xs font-semibold text-gray-900 dark:text-gray-100">
+              <p className="text-xs font-semibold text-slate-900 dark:text-slate-100">
                 {mode === "pretty" ? "JSON" : "Pretty"}
               </p>
             </button>
           )}
         </div>
 
         {mode === "json" ? (
-          <div className="flex flex-col space-y-4 bg-gray-100 dark:bg-black relative rounded-b-md">
+          <div className="flex flex-col space-y-4 bg-slate-100 dark:bg-black relative rounded-b-md">
             <div className="flex flex-col space-y-2 p-4">
-              <p className="font-semibold text-gray-900 dark:text-gray-100 text-sm">
+              <p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">
                 Request
               </p>
-              <pre className="text-gray-900 dark:text-gray-100 text-sm whitespace-pre-wrap rounded-lg overflow-auto p-4 border border-gray-300 dark:border-gray-700 bg-white dark:bg-[#17191d]">
+              <pre className="text-slate-900 dark:text-slate-100 text-sm whitespace-pre-wrap rounded-lg overflow-auto p-4 border border-slate-300 dark:border-slate-700 bg-white dark:bg-[#17191d]">
                 {JSON.stringify(rawRequest, null, 2)}
               </pre>
             </div>
             <div className="flex flex-col space-y-2 p-4">
-              <p className="font-semibold text-gray-900 dark:text-gray-100 text-sm">
+              <p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">
                 {response.title}
               </p>
-              <pre className="text-gray-900 dark:text-gray-100 text-sm whitespace-pre-wrap rounded-lg overflow-auto p-4 border border-gray-300 dark:border-gray-700 bg-white dark:bg-[#17191d]">
+              <pre className="text-slate-900 dark:text-slate-100 text-sm whitespace-pre-wrap rounded-lg overflow-auto p-4 border border-slate-300 dark:border-slate-700 bg-white dark:bg-[#17191d]">
                 {JSON.stringify(rawResponse, null, 2)}
               </pre>
             </div>
           </div>
         ) : (
-          <div className="flex flex-col space-y-4 bg-gray-100 dark:bg-black relative rounded-b-md">
+          <div className="flex flex-col space-y-4 bg-slate-100 dark:bg-black relative rounded-b-md">
             <div className="flex flex-col space-y-2 p-4">
-              <p className="font-semibold text-gray-900 dark:text-gray-100 text-sm">
+              <p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">
                 Request
               </p>
-              <p className="text-gray-900 dark:text-gray-100 text-sm whitespace-pre-wrap rounded-lg overflow-auto p-4 border border-gray-300 dark:border-gray-700 bg-white dark:bg-[#17191d]">
+              <p className="text-slate-900 dark:text-slate-100 text-sm whitespace-pre-wrap rounded-lg overflow-auto p-4 border border-slate-300 dark:border-slate-700 bg-white dark:bg-[#17191d]">
                 {removeLeadingWhitespace(request)}
               </p>
             </div>
             <div className="flex flex-col space-y-2 p-4">
-              <p className="font-semibold text-gray-900 dark:text-gray-100 text-sm">
+              <p className="font-semibold text-slate-900 dark:text-slate-100 text-sm">
                 {response.title}
               </p>
-              <p className="text-gray-900 dark:text-gray-100 text-sm whitespace-pre-wrap rounded-lg overflow-auto p-4 border border-gray-300 dark:border-gray-700 bg-white dark:bg-[#17191d]">
+              <p className="text-slate-900 dark:text-slate-100 text-sm whitespace-pre-wrap rounded-lg overflow-auto p-4 border border-slate-300 dark:border-slate-700 bg-white dark:bg-[#17191d]">
                 {response && removeLeadingWhitespace(response.text)}
                 {renderImageRow()}
               </p>

diff --git a/web/components/templates/requestsV2/builder/chatBuilder.tsx b/web/components/templates/requestsV2/builder/chatBuilder.tsx
@@ -76,6 +76,7 @@ class ChatBuilder extends AbstractRequestBuilder {
     const renderChat = () => {
       return (
         <Chat
+          request={this.response}
           llmSchema={this.response.llmSchema ?? undefined}
           requestBody={this.response.request_body}
           requestId={this.response.request_id}

diff --git a/web/components/templates/requestsV2/builder/chatGPTBuilder.tsx b/web/components/templates/requestsV2/builder/chatGPTBuilder.tsx
@@ -236,6 +236,7 @@ class ChatGPTBuilder extends AbstractRequestBuilder {
           <p>Pending...</p>
         ) : this.response.response_status === 200 ? (
           <Chat
+            request={this.response}
             requestBody={this.response.request_body}
             responseBody={this.response.response_body}
             status={this.response.response_status}
@@ -249,6 +250,7 @@ class ChatGPTBuilder extends AbstractRequestBuilder {
           <div className="w-full flex flex-col text-left space-y-8 text-sm">
             {this.response.request_body.messages && (
               <Chat
+                request={this.response}
                 requestBody={this.response.request_body}
                 responseBody={this.response.response_body}
                 status={this.response.response_status}

diff --git a/web/components/templates/requestsV2/statusBadge.tsx b/web/components/templates/requestsV2/statusBadge.tsx
@@ -1,6 +1,9 @@
+import { clsx } from "@/components/shared/clsx";
+
 interface StatusBadgeProps {
   statusType: string;
   errorCode?: number;
+  className?: string;
 }
 
 const StatusBadge = (props: StatusBadgeProps) => {
@@ -9,66 +12,116 @@ const StatusBadge = (props: StatusBadgeProps) => {
   switch (statusType) {
     case "cached":
       return (
-        <span className="inline-flex items-center rounded-md bg-orange-50 dark:bg-orange-900 px-2 py-1 -my-1 text-xs font-medium text-orange-700 dark:text-orange-300 ring-1 ring-inset ring-orange-600/20">
+        <span
+          className={clsx(
+            "inline-flex items-center rounded-md bg-orange-50 dark:bg-orange-900 px-2 py-1 -my-1 text-xs font-medium text-orange-700 dark:text-orange-300 ring-1 ring-inset ring-orange-600/20",
+            props.className
+          )}
+        >
           Cached
         </span>
       );
     case "success":
     case "COMPLETED":
       return (
-        <span className="inline-flex items-center rounded-md bg-green-50 dark:bg-green-900 px-2 py-1 -my-1 text-xs font-medium text-green-700 dark:text-green-300 ring-1 ring-inset ring-green-600/20">
+        <span
+          className={clsx(
+            "inline-flex items-center rounded-md bg-green-50 dark:bg-green-900 px-2 py-1 -my-1 text-xs font-medium text-green-700 dark:text-green-300 ring-1 ring-inset ring-green-600/20",
+            props.className
+          )}
+        >
           Success
         </span>
       );
     case "pending":
     case "PENDING":
       return (
-        <span className="inline-flex items-center rounded-md bg-gray-50 dark:bg-gray-900 px-2 py-1 -my-1 text-xs font-medium text-gray-700 dark:text-gray-300 ring-1 ring-inset ring-gray-600/20">
+        <span
+          className={clsx(
+            "inline-flex items-center rounded-md bg-gray-50 dark:bg-gray-900 px-2 py-1 -my-1 text-xs font-medium text-gray-700 dark:text-gray-300 ring-1 ring-inset ring-gray-600/20",
+            props.className
+          )}
+        >
           Pending
         </span>
       );
     case "RUNNING":
       return (
-        <span className="inline-flex items-center rounded-md bg-blue-200 dark:bg-gray-900 px-2 py-1 -my-1 text-xs font-medium text-gray-700 dark:text-gray-300 ring-1 ring-inset ring-gray-600/20">
+        <span
+          className={clsx(
+            "inline-flex items-center rounded-md bg-blue-200 dark:bg-gray-900 px-2 py-1 -my-1 text-xs font-medium text-gray-700 dark:text-gray-300 ring-1 ring-inset ring-gray-600/20",
+            props.className
+          )}
+        >
           Running
         </span>
       );
 
     case "error":
       if (errorCode === -2) {
         return (
-          <span className="inline-flex items-center rounded-md bg-gray-50 dark:bg-gray-900 px-2 py-1 -my-1 text-xs font-medium text-gray-700 dark:text-gray-300 ring-1 ring-inset ring-gray-600/20">
+          <span
+            className={clsx(
+              "inline-flex items-center rounded-md bg-gray-50 dark:bg-gray-900 px-2 py-1 -my-1 text-xs font-medium text-gray-700 dark:text-gray-300 ring-1 ring-inset ring-gray-600/20",
+              props.className
+            )}
+          >
             {`Pending`}
           </span>
         );
       } else if (errorCode === -3) {
         return (
-          <span className="inline-flex items-center rounded-md bg-orange-50 dark:bg-orange-900 px-2 py-1 -my-1 text-xs font-medium text-orange-700 dark:text-orange-300 ring-1 ring-inset ring-orange-600/20">
+          <span
+            className={clsx(
+              "inline-flex items-center rounded-md bg-orange-50 dark:bg-orange-900 px-2 py-1 -my-1 text-xs font-medium text-orange-700 dark:text-orange-300 ring-1 ring-inset ring-orange-600/20",
+              props.className
+            )}
+          >
             {`Cancelled`}
           </span>
         );
       } else if (errorCode === -1) {
         return (
-          <span className="inline-flex items-center rounded-md bg-red-50 dark:bg-red-900 px-2 py-1 -my-1 text-xs font-medium text-red-700 dark:text-red-300 ring-1 ring-inset ring-red-600/20">
+          <span
+            className={clsx(
+              "inline-flex items-center rounded-md bg-red-50 dark:bg-red-900 px-2 py-1 -my-1 text-xs font-medium text-red-700 dark:text-red-300 ring-1 ring-inset ring-red-600/20",
+              props.className
+            )}
+          >
             {`Timeout`}
           </span>
         );
       } else if (errorCode === -4) {
         return (
-          <span className="inline-flex items-center rounded-md bg-yellow-50 dark:bg-yellow-900 px-2 py-1 -my-1 text-xs font-medium text-yellow-700 dark:text-yellow-300 ring-1 ring-inset ring-red-600/20">
+          <span
+            className={clsx(
+              "inline-flex items-center rounded-md bg-yellow-50 dark:bg-yellow-900 px-2 py-1 -my-1 text-xs font-medium text-yellow-700 dark:text-yellow-300 ring-1 ring-inset ring-red-600/20",
+              props.className
+            )}
+          >
             {`Threat`}
           </span>
         );
       } else {
         return (
-          <span className="inline-flex items-center rounded-md bg-red-50 dark:bg-red-900 px-2 py-1 -my-1 text-xs font-medium text-red-700 dark:text-red-300 ring-1 ring-inset ring-red-600/20">
+          <span
+            className={clsx(
+              "inline-flex items-center rounded-md bg-red-50 dark:bg-red-900 px-2 py-1 -my-1 text-xs font-medium text-red-700 dark:text-red-300 ring-1 ring-inset ring-red-600/20",
+              props.className
+            )}
+          >
             {`${errorCode} Error`}
           </span>
         );
       }
     default:
       return (
-        <span className="inline-flex items-center rounded-md bg-gray-50 dark:bg-red-900 px-2 py-1 -my-1 text-xs font-medium text-gray-700 dark:text-gray-300 ring-1 ring-inset ring-gray-600/20">
+        <span
+          className={clsx(
+            "inline-flex items-center rounded-md bg-gray-50 dark:bg-gray-900 px-2 py-1 -my-1 text-xs font-medium text-gray-700 dark:text-gray-300 ring-1 ring-inset ring-gray-600/20",
+            props.className
+          )}
+        >
           Unknown
         </span>
       );

diff --git a/web/components/templates/sessions/sessionId/SessionContent.tsx b/web/components/templates/sessions/sessionId/SessionContent.tsx
@@ -134,6 +134,7 @@ const SessionContent: React.FC<SessionContentProps> = ({
           selectedRequestId={selectedRequestId}
           setSelectedRequestId={handleRequestIdChange}
           requests={requests}
+          showSpan={false}
         />
       )}