fix: fix reference data type tags are not human readable issue (#960)

Because


![IMG_5147](https://github.com/instill-ai/console/assets/57251712/746ff882-1cd5-4f22-bee2-7ae131e4f537)

Something like `video/*` is not readable. We need to change it to
`video`

This commit

- fix reference data type tags are not human readable issue

packages/toolkit/src/components/ReferenceHintDataTypeTag.tsx

@@ -16,7 +16,7 @@ export const ReferenceHintDataTypeTag = ({
         className
       )}
     >
-      <p className="my-auto align-middle font-sans text-[11px] font-medium text-semantic-success-default	">
+      <p className="my-auto align-middle font-sans text-[9px] 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]">

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

@@ -1,8 +1,10 @@
+import * as React from "react";
 import {
   ReferenceHintDataTypeTag,
   ReferenceHintTag,
 } from "../../../../components";
 import { ComponentOutoutReferenceHint } from "../../types";
+import { transformInstillFormatToHumanReadableFormat } from "../../transform";
 
 export const GroupByFormatField = ({
   hints,
@@ -13,12 +15,16 @@ export const GroupByFormatField = ({
   instillFormat: string;
   componentID?: string;
 }) => {
+  const humanReadableInstillFormat = React.useMemo(() => {
+    return transformInstillFormatToHumanReadableFormat(instillFormat);
+  }, [instillFormat]);
+
   return (
     <div className="flex w-full flex-col gap-y-2">
       <div className="flex">
         <ReferenceHintDataTypeTag
-          isArray={instillFormat.includes("array:")}
-          label={instillFormat.replace("array:", "")}
+          isArray={humanReadableInstillFormat.isArray}
+          label={humanReadableInstillFormat.format}
         />
       </div>
       <div className="flex w-full flex-row flex-wrap gap-2">

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

@@ -1,10 +1,12 @@
+import * as React from "react";
 import { useShallow } from "zustand/react/shallow";
 import { FieldMode, InstillStore, Nullable, useInstillStore } from "../../..";
 import { Icons, Tag, Tooltip } from "@instill-ai/design-system";
 import {
   ReferenceHintDataTypeTag,
   ReferenceHintTag,
 } from "../../../../components";
+import { transformInstillFormatToHumanReadableFormat } from "../../transform";
 
 const selector = (store: InstillStore) => ({
   isOwner: store.isOwner,
@@ -31,6 +33,11 @@ export const FieldHead = ({
   disabledReferenceHint?: boolean;
 }) => {
   const { isOwner, currentVersion } = useInstillStore(useShallow(selector));
+
+  const humanReadableInstillFormat = React.useMemo(() => {
+    return transformInstillFormatToHumanReadableFormat(instillFormat);
+  }, [instillFormat]);
+
   return (
     <div className="flex">
       {mode === "build" ? (
@@ -199,8 +206,8 @@ export const FieldHead = ({
                   />
                 </ReferenceHintTag.Root>
                 <ReferenceHintDataTypeTag
-                  isArray={instillFormat.includes("array:")}
-                  label={instillFormat.replace("array:", "")}
+                  isArray={humanReadableInstillFormat.isArray}
+                  label={humanReadableInstillFormat.format}
                 />
               </div>
             </div>