feat(pipeline-builder): implement the new array data type label design (

#957)

Because

- We have new label design for array type. To better visualize the
different array and non-array type

This commit

-  implement the new array data type label design

packages/toolkit/src/components/ReferenceHintDataTypeTag.tsx

@@ -3,14 +3,32 @@ import cn from "clsx";
 export const ReferenceHintDataTypeTag = ({
   className,
   label,
+  isArray,
 }: {
   className?: string;
   label: string;
+  isArray?: boolean;
 }) => {
-  return (
+  return isArray ? (
     <div
       className={cn(
-        "flex h-5 flex-row items-center gap-x-1 rounded bg-semantic-success-bg px-2 py-1",
+        "flex flex-row gap-x-[3px] rounded bg-[#D1FAED] px-[6px] py-[1.5px]",
+        className
+      )}
+    >
+      <p className="my-auto align-middle font-sans text-[11px] font-medium text-semantic-success-default	">
+        Array
+      </p>
+      <div className="flex flex-row items-center rounded bg-semantic-success-bg	px-[6px] py-[1.5px]">
+        <p className="my-auto align-middle font-sans text-[9px] font-medium text-semantic-success-default">
+          {label}
+        </p>
+      </div>
+    </div>
+  ) : (
+    <div
+      className={cn(
+        "flex h-5 flex-row items-center rounded bg-semantic-success-bg px-2 py-1",
         className
       )}
     >

packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/GroupByFormatField.tsx

@@ -16,7 +16,10 @@ export const GroupByFormatField = ({
   return (
     <div className="flex w-full flex-col gap-y-2">
       <div className="flex">
-        <ReferenceHintDataTypeTag label={instillFormat} />
+        <ReferenceHintDataTypeTag
+          isArray={instillFormat.includes("array:")}
+          label={instillFormat.replace("array:", "")}
+        />
       </div>
       <div className="flex w-full flex-row flex-wrap gap-2">
         {hints.map((hint) => (

packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/FieldHead.tsx

@@ -198,7 +198,10 @@ export const FieldHead = ({
                     className="!max-w-[160px] text-semantic-accent-default"
                   />
                 </ReferenceHintTag.Root>
-                <ReferenceHintDataTypeTag label={instillFormat} />
+                <ReferenceHintDataTypeTag
+                  isArray={instillFormat.includes("array:")}
+                  label={instillFormat.replace("array:", "")}
+                />
               </div>
             </div>
           </div>