feat(ui): handling for internal nodes

Author: psychedelicious

invokeai/frontend/web/public/locales/en.json

@@ -939,6 +939,7 @@
         "zoomOutNodes": "Zoom Out",
         "betaDesc": "This invocation is in beta. Until it is stable, it may have breaking changes during app updates. We plan to support this invocation long-term.",
         "prototypeDesc": "This invocation is a prototype. It may have breaking changes during app updates and may be removed at any time.",
+        "internalDesc": "This invocation is used internally by Invoke. It may have breaking changes during app updates and may be removed at any time.",
         "imageAccessError": "Unable to find image {{image_name}}, resetting to default",
         "boardAccessError": "Unable to find board {{board_id}}, resetting to default",
         "modelAccessError": "Unable to find model {{key}}, resetting to default",

invokeai/frontend/web/src/features/nodes/components/flow/AddNodeCmdk/AddNodeCmdk.tsx

@@ -40,7 +40,7 @@ import { computed } from 'nanostores';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiFlaskBold, PiHammerBold } from 'react-icons/pi';
+import { PiCircuitryBold, PiFlaskBold, PiHammerBold } from 'react-icons/pi';
 import type { EdgeChange, NodeChange } from 'reactflow';
 import type { S } from 'services/api/types';
 
@@ -413,6 +413,7 @@ const NodeCommandList = memo(({ searchTerm, onSelect }: { searchTerm: string; on
             <Flex alignItems="center" gap={2}>
               {item.classification === 'beta' && <Icon boxSize={4} color="invokeYellow.300" as={PiHammerBold} />}
               {item.classification === 'prototype' && <Icon boxSize={4} color="invokeRed.300" as={PiFlaskBold} />}
+              {item.classification === 'internal' && <Icon boxSize={4} color="invokePurple.300" as={PiCircuitryBold} />}
               <Text fontWeight="semibold">{item.label}</Text>
               <Spacer />
               <Text variant="subtext" fontWeight="semibold">

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx

@@ -3,7 +3,7 @@ import { useNodeClassification } from 'features/nodes/hooks/useNodeClassificatio
 import type { Classification } from 'features/nodes/types/common';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiFlaskBold, PiHammerBold } from 'react-icons/pi';
+import { PiCircuitryBold, PiFlaskBold, PiHammerBold } from 'react-icons/pi';
 
 interface Props {
   nodeId: string;
@@ -22,7 +22,7 @@ const InvocationNodeClassificationIcon = ({ nodeId }: Props) => {
       placement="top"
       shouldWrapChildren
     >
-      <Icon as={getIcon(classification)} display="block" boxSize={4} color="base.400" />
+      <ClassificationIcon classification={classification} />
     </Tooltip>
   );
 };
@@ -40,19 +40,27 @@ const ClassificationTooltipContent = memo(({ classification }: { classification:
     return t('nodes.prototypeDesc');
   }
 
+  if (classification === 'internal') {
+    return t('nodes.prototypeDesc');
+  }
+
   return null;
 });
 
 ClassificationTooltipContent.displayName = 'ClassificationTooltipContent';
 
-const getIcon = (classification: Classification) => {
+const ClassificationIcon = ({ classification }: { classification: Classification }) => {
   if (classification === 'beta') {
-    return PiHammerBold;
+    return <Icon as={PiHammerBold} display="block" boxSize={4} color="invokeYellow.300" />;
   }
 
   if (classification === 'prototype') {
-    return PiFlaskBold;
+    return <Icon as={PiFlaskBold} display="block" boxSize={4} color="invokeRed.300" />;
   }
 
-  return undefined;
+  if (classification === 'internal') {
+    return <Icon as={PiCircuitryBold} display="block" boxSize={4} color="invokePurple.300" />;
+  }
+
+  return null;
 };

invokeai/frontend/web/src/features/nodes/types/common.ts

@@ -22,7 +22,7 @@ export const zColorField = z.object({
 });
 export type ColorField = z.infer<typeof zColorField>;
 
-export const zClassification = z.enum(['stable', 'beta', 'prototype', 'deprecated']);
+export const zClassification = z.enum(['stable', 'beta', 'prototype', 'deprecated', 'internal']);
 export type Classification = z.infer<typeof zClassification>;
 
 export const zSchedulerField = z.enum([