feat(web): add tooltip for workflow variables

web/src/components/CodeBlock.tsx

@@ -1,10 +1,14 @@
 import { CopyButton } from "@/components/CopyButton";
-import { getHighlighter, StringLiteralUnion  } from 'shikiji'
+import type { StringLiteralUnion } from "shikiji";
+import { getHighlighter } from "shikiji";
 
-export async function CodeBlock(props: { code: string; lang: StringLiteralUnion<string> }) {
+export async function CodeBlock(props: {
+  code: string;
+  lang: StringLiteralUnion<string>;
+}) {
   const highlighter = await getHighlighter({
     themes: ["one-dark-pro"],
-    langs: [props.lang]
+    langs: [props.lang],
   });
 
   return (

web/src/components/VersionSelect.tsx

@@ -19,6 +19,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { createRun } from "@/server/createRun";
 import { createDeployments } from "@/server/curdDeploments";
 import type { getMachines } from "@/server/curdMachine";
@@ -75,11 +80,11 @@ export function MachineSelect({
       }}
     >
       <SelectTrigger className="w-[180px]">
-        <SelectValue placeholder="Select a version" />
+        <SelectValue placeholder="Select a machine" />
       </SelectTrigger>
       <SelectContent>
         <SelectGroup>
-          <SelectLabel>Versions</SelectLabel>
+          <SelectLabel>Machines</SelectLabel>
           {machines?.map((x) => (
             <SelectItem key={x.id} value={x.id ?? ""}>
               {x.name}
@@ -203,7 +208,7 @@ export function CreateDeploymentButton({
 
 const customInputNodes: Record<string, string> = {
   ComfyUIDeployExternalText: "string",
-  ComfyUIDeployExternalImage: "string - image url",
+  ComfyUIDeployExternalImage: "string - (public image url)",
 };
 
 export function VersionDetails({
@@ -223,7 +228,7 @@ export function VersionDetails({
       Workflow Details
       <div className="border rounded-lg p-2">
         {workflow_version?.workflow_api && (
-          <div>
+          <div className="flex flex-col gap-2">
             {Object.entries(workflow_version.workflow_api).map(
               ([key, value]) => {
                 if (!value.class_type) return <> </>;
@@ -232,10 +237,24 @@ export function VersionDetails({
                   const input_id = value.inputs.input_id;
                   const defaultValue = value.inputs.default_value;
                   return (
-                    <>
-                      <Badge variant="secondary">{input_id}</Badge> {nodeType}{" "}
-                      {defaultValue}
-                    </>
+                    <div key={input_id}>
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <Badge variant="secondary">
+                            <div>
+                              {input_id}
+                              {" : "}
+                              {nodeType}
+                            </div>
+                          </Badge>
+                          {/* {nodeType}{" "} */}
+                          {/* <Button variant="outline">Hover</Button> */}
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          Default Value: {defaultValue}
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
                   );
                 }
                 return <></>;

web/src/components/ui/tooltip.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };