feat: add sparkle to nodes with ai_chat

Author: doc-han

assets/js/workflow-diagram/nodes/Node.tsx

@@ -4,6 +4,7 @@ import { Handle, type NodeProps } from 'reactflow';
 import Shape from '../components/Shape';
 import ErrorMessage from '../components/ErrorMessage';
 import { nodeIconStyles, nodeLabelStyles } from '../styles';
+import { SparklesIcon } from '@heroicons/react/24/outline';
 
 type NodeData = any;
 
@@ -23,6 +24,7 @@ type ErrorObject = {
 
 type LabelProps = React.PropsWithChildren<{
   hasErrors?: boolean;
+  hasAi?: boolean;
 }>;
 
 function errorsMessage(errors: ErrorObject): string {
@@ -39,16 +41,19 @@ const hasErrors = (errors: ErrorObject | null | undefined): boolean => {
   return Object.values(errors).some(errorArray => errorArray.length > 0);
 };
 
-const Label: React.FC<LabelProps> = ({ children, hasErrors = false }) => {
+const Label: React.FC<LabelProps> = ({ children, hasErrors = false, hasAi = false }) => {
   const textColorClass = hasErrors ? 'text-red-500' : '';
 
   if (children && (children as any).length) {
     return (
-      <p
-        className={`line-clamp-2 align-left text-m max-w-[275px] text-ellipsis overflow-hidden ${textColorClass}`}
-      >
-        {children}
-      </p>
+      <div className='inline-flex'>
+        <p
+          className={`flex line-clamp-2 align-left text-m max-w-[275px] text-ellipsis overflow-hidden ${textColorClass}`}
+        >
+          {children}
+        </p>
+        {hasAi ? <SparklesIcon title='AI chat was used in this job' className='w-5 h-5 ml-1' color="#FF5722" /> : null}
+      </div>
     );
   }
   return null;
@@ -225,7 +230,7 @@ const Node = ({
           />
         )}
         <div className="flex flex-col flex-1 ml-2 mt-8">
-          <Label hasErrors={hasErrors(errors)}>{label}</Label>
+          <Label hasErrors={hasErrors(errors)} hasAi={!!data.has_ai_chat}>{label} </Label>
           <SubLabel>{sublabel}</SubLabel>
           {data.isActiveDropTarget &&
             typeof data.dropTargetError === 'string' && (
@@ -245,10 +250,9 @@ const Node = ({
             justifyContent: 'center',
           }}
           className={`flex flex-row items-center
-                    opacity-0  ${
-                      (!data.isActiveDropTarget && 'group-hover:opacity-100') ??
-                      ''
-                    }
+                    opacity-0  ${(!data.isActiveDropTarget && 'group-hover:opacity-100') ??
+            ''
+            }
                     transition duration-150 ease-in-out`}
         >
           {toolbar()}