@epam/ai-dial-ui-kit 0.15.0-dev.39 → 0.15.0-dev.41

package/dist/src/components/New/EntityIdentity/EntityIdentity.d.ts

@@ -0,0 +1,85 @@
+import { FC, ReactNode } from 'react';
+import { EntityType } from '../../../types/entity-type';
+/** Identity fields of the entity rendered by `EntityIdentity`. */
+export interface EntityIdentityItem {
+    /** Entity category; picks the colour of the type label and the featured chip. */
+    type: EntityType;
+    /** Display name. */
+    name: string;
+    /** Version shown next to the name. */
+    version?: string;
+    /** Icon URL. The initials of `name` show while it is missing or fails to load. */
+    iconUrl?: string;
+    /** Whether the entity is marked as featured. */
+    isFeatured?: boolean;
+}
+/** User-visible strings of `EntityIdentity`. */
+export interface EntityIdentityLabels {
+    /** Type label text, rendered uppercase. Defaults to the English name of `item.type`. */
+    type?: string;
+    /** Featured chip text. Defaults to `'Featured'`. */
+    featured?: string;
+}
+/** Props for `EntityIdentity`. */
+export interface EntityIdentityProps {
+    /** The entity to display. */
+    item: EntityIdentityItem;
+    /** User-visible strings; pass translated ones in a localised app. */
+    labels?: EntityIdentityLabels;
+    /** Whether to show `item.version` next to the name. */
+    showVersion?: boolean;
+    /** Whether to show the featured chip when `item.isFeatured` is true. */
+    hasFeaturedTag?: boolean;
+    /** Width and height of the icon in px. */
+    iconSize?: number;
+    /** Heading level of the name, 1–6. */
+    headingLevel?: number;
+    /** Search query; the matching part of the name is highlighted. */
+    query?: string;
+    /** Content pinned to the bottom of the text column, aligned with the bottom of the icon. */
+    footer?: ReactNode;
+    /** Badge rendered before the featured chip, in the top-end corner. */
+    statusBadge?: ReactNode;
+    /** Additional CSS classes for the root. */
+    className?: string;
+    /** Type-scale class for the name. Defaults to `'dial-h3-text'`. */
+    nameClassName?: string;
+    /** Type-scale class for the type label. Defaults to `'dial-caption-lead-semi-text'`. */
+    typeClassName?: string;
+    /** Type-scale class for the version. Defaults to `'dial-tiny-text'`. */
+    versionClassName?: string;
+    /** Additional CSS classes for the icon, e.g. to change its corner radius. */
+    iconClassName?: string;
+    /** Additional CSS classes for the featured chip. */
+    featuredChipClassName?: string;
+}
+/**
+ * The identity block of a DIAL entity: its icon, a coloured type label, the
+ * name and the version, with an optional featured chip.
+ * aliases: EntityHeader|ModelHeader|AppIdentity
+ * Design system 2.0
+ *
+ * The type label is plain uppercase text coloured by `item.type`. The icon is
+ * a square `Avatar`, so a missing or broken image falls back to the initials of
+ * the name. The icon is decorative: the name next to it already names the
+ * entity.
+ *
+ * @example
+ * ```tsx
+ * <EntityIdentity
+ *   item={{ type: EntityType.Model, name: 'GPT-4o', version: '2024-11-20' }}
+ *   labels={{ type: t('Model') }}
+ * />
+ * ```
+ *
+ * @param item - The entity to display
+ * @param [labels] - User-visible strings
+ * @param [showVersion=true] - Whether to show the version
+ * @param [hasFeaturedTag=true] - Whether to show the featured chip for a featured entity
+ * @param [iconSize=48] - Icon size in px
+ * @param [headingLevel=3] - Heading level of the name
+ * @param [query] - Search query highlighted in the name
+ * @param [footer] - Content pinned to the bottom of the text column
+ * @param [statusBadge] - Badge in the top-end corner
+ */
+export declare const EntityIdentity: FC<EntityIdentityProps>;

package/dist/src/constants/public-class-names.d.ts

@@ -129,6 +129,8 @@ export declare const DIAL_KIT_CLASS: {
     readonly badge: "dial-kit-badge";
     /** The root of an `Avatar`: the image, or the initials box that replaces it. */
     readonly avatar: "dial-kit-avatar";
+    /** The root row of an `EntityIdentity`: its icon, type label, name and version. */
+    readonly entityIdentity: "dial-kit-entity-identity";
     /** The row of a `Switch`: the control and its label. */
     readonly switch: "dial-kit-switch";
     /** The row of a `Checkbox`: the box and its label. */

package/dist/src/index.d.ts

@@ -249,6 +249,9 @@ export { Avatar } from './components/New/Avatar/Avatar';
 export type { AvatarProps } from './components/New/Avatar/Avatar';
 export { AvatarShape } from './types/avatar';
 export { extractInitials } from './utils/avatar';
+export { EntityIdentity } from './components/New/EntityIdentity/EntityIdentity';
+export type { EntityIdentityProps, EntityIdentityItem, EntityIdentityLabels, } from './components/New/EntityIdentity/EntityIdentity';
+export { EntityType } from './types/entity-type';
 export { SideDrawer } from './components/New/SideDrawer/SideDrawer';
 export type { SideDrawerProps } from './components/New/SideDrawer/SideDrawer';
 export { Tag } from './components/New/Tag/Tag';

package/dist/src/types/entity-type.d.ts

@@ -0,0 +1,9 @@
+/** The category of a DIAL catalog entity. It picks the colour of the type label and the featured chip. */
+export declare enum EntityType {
+    Model = "model",
+    Agent = "agent",
+    Toolset = "toolset",
+    Skill = "skill",
+    /** Reusable text prompt. Carries a body instead of a runtime. */
+    Prompt = "prompt"
+}

package/dist/types/entity-type.js

@@ -0,0 +1,4 @@
+var l = /* @__PURE__ */ ((o) => (o.Model = "model", o.Agent = "agent", o.Toolset = "toolset", o.Skill = "skill", o.Prompt = "prompt", o))(l || {});
+export {
+  l as EntityType
+};