Requests Drawer Refresh (#3491)

Author: tinomarques

web/components/layout/SidebarHelpDropdown.tsx

@@ -38,7 +38,7 @@ const SidebarHelpDropdown = ({
 
   const [chatOpen, setChatOpen] = useState(false);
   return (
-    <div className="flex flex-col items-start w-full gap-1.5">
+    <div className="w-full flex flex-col items-center gap-2">
       <DropdownMenu
         modal={false}
         onOpenChange={
@@ -49,11 +49,11 @@ const SidebarHelpDropdown = ({
       >
         <DropdownMenuTrigger asChild>
           <Button
-            variant="ghost"
-            size="sm"
+            variant="outline"
+            size="none"
             className={clsx(
-              "flex items-center text-xs text-muted-foreground hover:text-foreground w-full h-7",
-              isCollapsed ? "justify-center px-0" : "justify-start px-2 gap-1.5"
+              "h-9  flex items-center text-xs text-muted-foreground hover:text-foreground",
+              isCollapsed ? "w-9" : "w-full gap-1"
             )}
           >
             <div className="relative flex items-center">
@@ -145,8 +145,8 @@ const SidebarHelpDropdown = ({
       </DropdownMenu>
 
       <Button
-        variant="ghost"
-        size="sm"
+        variant="outline"
+        size="none"
         onClick={() => {
           if (window.Pylon) {
             if (chatOpen) {
@@ -158,21 +158,19 @@ const SidebarHelpDropdown = ({
           }
         }}
         className={clsx(
-          "flex items-center text-xs text-muted-foreground hover:text-foreground w-full h-7",
-          isCollapsed ? "justify-center px-0" : "justify-start px-2 gap-1.5",
+          "flex items-center text-xs text-muted-foreground hover:text-foreground",
+          isCollapsed ? "h-9 w-9" : "h-7 w-full gap-1",
           chatOpen && "text-primary"
         )}
       >
-        <div className="relative flex items-center">
-          <MessageCircleMore
-            size={12}
-            className={clsx(
-              chatOpen
-                ? "text-primary"
-                : "text-muted-foreground hover:text-primary"
-            )}
-          />
-        </div>
+        <MessageCircleMore
+          size={12}
+          className={clsx(
+            chatOpen
+              ? "text-primary"
+              : "text-muted-foreground hover:text-primary"
+          )}
+        />
         {!isCollapsed && <span>Message us</span>}
       </Button>
     </div>

web/components/layout/orgDropdown.tsx

@@ -10,11 +10,11 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Switch } from "@/components/ui/switch";
-import { cn } from "@/lib/utils";
 import { Database } from "@/db/database.types";
-import { Cog6ToothIcon } from "@heroicons/react/24/outline";
+import { cn } from "@/lib/utils";
 import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
-import { LogOutIcon } from "lucide-react";
+
+import { getTierDisplayInfo } from "@/utils/pricingConfigs";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -29,7 +29,8 @@ import {
 import { UpgradeProDialog } from "../templates/organization/plan/upgradeProDialog";
 import { useOrg } from "./org/organizationContext";
 import OrgMoreDropdown from "./orgMoreDropdown";
-import { getTierDisplayInfo } from "@/utils/pricingConfigs";
+import { Cog6ToothIcon } from "@heroicons/react/24/outline";
+import { LogOutIcon } from "lucide-react";
 
 interface OrgDropdownProps {}
 

web/components/shared/Header.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { P } from "../ui/typography";
+
+interface HeaderProps {
+  title: string;
+  leftActions?: ReactNode;
+  rightActions?: ReactNode;
+}
+export default function Header(props: HeaderProps) {
+  const { title, leftActions, rightActions } = props;
+  return (
+    <header className="h-16 shrink-0 bg-slate-100 dark:bg-slate-900 flex flex-row justify-between items-center w-full border-b border-border px-4">
+      <div className="h-full flex flex-row items-center gap-2">
+        <P className="text-muted-foreground font-semibold">{title}</P>
+        {leftActions}
+      </div>
+
+      <div className="h-full flex flex-row items-center gap-2">
+        {rightActions}
+      </div>
+    </header>
+  );
+}

web/components/shared/LivePill.tsx

@@ -0,0 +1,50 @@
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
+import { Button } from "../ui/button";
+
+interface LivePillProps {
+  isLive: boolean;
+  setIsLive: (isLive: boolean) => void;
+  isDataLoading: boolean;
+  isRefetching: boolean;
+  refetch: () => void;
+}
+export default function LivePill(props: LivePillProps) {
+  const { isLive, setIsLive, isDataLoading, isRefetching, refetch } = props;
+  return (
+    <div className="h-8 w-full flex flex-row items-center justify-between bg-slate-50 dark:bg-slate-950 rounded-lg border border-border divide-x divide-border">
+      <Button
+        variant="none"
+        size="none"
+        className="h-full px-2.5 flex flex-row gap-2 items-center rounded-l-lg rounded-r-none hover:bg-slate-100 dark:hover:bg-slate-900 active:bg-slate-200 active:dark:bg-slate-800"
+        onClick={() => setIsLive(!isLive)}
+      >
+        <div
+          className={clsx(
+            isLive ? "bg-green-500 animate-pulse" : "bg-slate-500",
+            "h-2 w-2 rounded-full"
+          )}
+        />
+        <span className="text-xs whitespace-nowrap">
+          {isLive ? "Live" : "Start Live"}
+        </span>
+      </Button>
+
+      <Button
+        variant="none"
+        size="none"
+        className="h-full px-2.5 flex flex-row gap-1 items-center rounded-l-none rounded-r-lg hover:bg-slate-100 dark:hover:bg-slate-900 active:bg-slate-200 active:dark:bg-slate-800"
+        onClick={() => {
+          refetch();
+        }}
+      >
+        <ArrowPathIcon
+          className={clsx(
+            isDataLoading || isRefetching ? "animate-spin" : "",
+            "h-4 w-4 inline duration-500 ease-in-out"
+          )}
+        />
+      </Button>
+    </div>
+  );
+}

web/components/shared/prompts/ParametersPanel.tsx

@@ -358,7 +358,7 @@ export default function ParametersPanel({
           </ParameterLabel>
           <div className="flex gap-2">
             <Select value={selectedCreator} onValueChange={handleCreatorChange}>
-              <SelectTrigger className="w-28 h-8">
+              <SelectTrigger variant="helicone" className="w-28 h-8">
                 <SelectValue placeholder="Creator" />
               </SelectTrigger>
               <SelectContent>
@@ -373,7 +373,7 @@ export default function ParametersPanel({
               value={currentModelName || ""}
               onValueChange={handleModelChange}
             >
-              <SelectTrigger className="w-44 h-8">
+              <SelectTrigger variant="helicone" className="w-36 h-8">
                 <SelectValue placeholder="Model" />
               </SelectTrigger>
               <SelectContent>
@@ -388,7 +388,7 @@ export default function ParametersPanel({
               value={parameters.provider as string}
               onValueChange={handleProviderChange}
             >
-              <SelectTrigger className="w-32 h-8">
+              <SelectTrigger variant="helicone" className="w-28 h-8">
                 <SelectValue placeholder="Provider" />
               </SelectTrigger>
               <SelectContent>
@@ -463,7 +463,7 @@ export default function ParametersPanel({
                   })
                 }
               >
-                <SelectTrigger className="w-28 h-8">
+                <SelectTrigger variant="helicone" className="w-28 h-8">
                   <SelectValue placeholder="Effort" />
                 </SelectTrigger>
                 <SelectContent>

web/components/shared/prompts/ResponsePanel.tsx

@@ -124,7 +124,7 @@ export default function ResponsePanel({
 }
 
 // Define custom components for ReactMarkdown
-const markdownComponents: Components = {
+export const markdownComponents: Components = {
   code({ className, children, ...props }) {
     // Check if this is an inline code block by examining the parent node
     const isInline = !className?.includes("language-");
@@ -165,29 +165,29 @@ const markdownComponents: Components = {
   },
   // Add styling for other markdown elements
   p({ children }) {
-    return <p className="mb-4 leading-6">{children}</p>;
+    return <p className="leading-6">{children}</p>;
   },
   ul({ children }) {
-    return <ul className="mb-4 ml-6 list-disc">{children}</ul>;
+    return <ul className="ml-6 list-disc">{children}</ul>;
   },
   ol({ children }) {
-    return <ol className="mb-4 ml-6 list-decimal">{children}</ol>;
+    return <ol className="ml-6 list-decimal">{children}</ol>;
   },
   li({ children }) {
-    return <li className="mb-2">{children}</li>;
+    return <li className="">{children}</li>;
   },
   h1({ children }) {
-    return <h1 className="mb-4 text-2xl font-semibold">{children}</h1>;
+    return <h1 className="text-2xl font-semibold">{children}</h1>;
   },
   h2({ children }) {
-    return <h2 className="mb-3 text-xl font-semibold">{children}</h2>;
+    return <h2 className="text-xl font-semibold">{children}</h2>;
   },
   h3({ children }) {
-    return <h3 className="mb-3 text-lg font-semibold">{children}</h3>;
+    return <h3 className="text-lg font-semibold">{children}</h3>;
   },
   blockquote({ children }) {
     return (
-      <blockquote className="mb-4 border-l-4 border-muted-foreground/30 pl-4 italic text-muted-foreground">
+      <blockquote className="border-l-4 border-muted-foreground/30 pl-4 italic text-muted-foreground">
         {children}
       </blockquote>
     );

web/components/shared/themed/table/exportButton.tsx

@@ -1,10 +1,3 @@
-import { ArrowDownTrayIcon, ArrowPathIcon } from "@heroicons/react/24/outline";
-import Link from "next/link";
-import Papa from "papaparse";
-import { useState } from "react";
-import { clsx } from "../../clsx";
-import useNotification from "../../notification/useNotification";
-import ThemedModal from "../themedModal";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -19,6 +12,14 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import Papa from "papaparse";
+import { useState } from "react";
+import { LuDownload } from "react-icons/lu";
+import { clsx } from "../../clsx";
+import useNotification from "../../notification/useNotification";
+import ThemedModal from "../themedModal";
 
 interface ExportButtonProps<T> {
   rows: T[];
@@ -89,15 +90,12 @@ export default function ExportButton<T>(props: ExportButtonProps<T>) {
       <Tooltip>
         <TooltipTrigger asChild>
           <Button
-            variant="ghost"
+            variant="none"
+            size="none"
+            className="h-9 w-9 shrink-0 flex items-center justify-center text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-800"
             onClick={() => setOpen(true)}
-            className={clsx(
-              "flex items-center gap-2 text-slate-700 dark:text-slate-400",
-              className
-            )}
-            size="xs"
           >
-            <ArrowDownTrayIcon className="h-4 w-4" />
+            <LuDownload className="h-4 w-4" />
           </Button>
         </TooltipTrigger>
         <TooltipContent>Export data</TooltipContent>

web/components/shared/themed/table/requestRowView.tsx

@@ -34,7 +34,7 @@ const RequestRowView = (props: RequestRowViewProps) => {
       </ul>
       {selectedRow ? (
         <div className="flex flex-col space-y-2 w-full h-full overflow-auto">
-          <RenderMappedRequest mapperContent={selectedRow} />
+          <RenderMappedRequest mappedRequest={selectedRow} />
         </div>
       ) : (
         <div className="flex flex-col space-y-4 justify-center items-center w-full h-screen bg-white border border-gray-300 dark:bg-black dark:border-gray-700 rounded-lg">