@bikdotai/bik-component-library 0.0.821-beta.9 → 0.0.821

package/dist/esm/components/agent-builder/AgentBuilder.model.d.ts

@@ -0,0 +1,107 @@
+import { AgentConfig, AgentHandoverConfig, AgentToolDoc, IntentOption, ModelOption, StepKey, StepValidation, SubAgentRef, Trigger } from '@bikdotai/bik-models/ai-agents';
+import { ApplicationType } from '@bikdotai/bik-models/growth';
+/**
+ * Agent DATA models live in `@bikdotai/bik-models/ai-agents`. The library uses a
+ * few friendlier aliases for its UI:
+ *  - `AgentValue` — the builder's working copy: an `AgentConfig` with `trigger`
+ *    and `handover` always present.
+ *  - `AgentTool` — `AgentToolDoc` (the picker reads its fields).
+ *  - `AgentTriggerValue` — `Trigger`.
+ */
+export type AgentValue = AgentConfig & {
+    trigger: Trigger;
+    handover: AgentHandoverConfig;
+};
+export type AgentTool = AgentToolDoc;
+export type AgentTriggerValue = Trigger;
+/**
+ * The data captured by the "Create sub-agent" drawer. The consumer persists it
+ * (as an `is_entry: false` agent) and returns the created {@link SubAgentRef}.
+ */
+export interface SubAgentDraft {
+    name: string;
+    instructions: string;
+    guardrail: string;
+    /** Tool ids the sub-agent can use. */
+    tools: string[];
+}
+export type { AgentConfig, AgentToolDoc, AgentStatus, StepKey, StepValidation, TriggerMode, Trigger, HandoverMethod, AgentHandoverConfig, SubAgentRef, IntentOption, ModelOption, } from '@bikdotai/bik-models/ai-agents';
+/**
+ * All non-function (data / reference / flag) props, grouped into one object.
+ * Callbacks stay OUT of here and are passed as flat props so the consumer can
+ * keep stable function references without rebuilding this object.
+ */
+export interface AgentBuilderConfig {
+    /** Controlled agent value (single source of truth lives in the consumer). */
+    value: AgentValue;
+    /** Controlled active step. Omit to let the builder manage it internally. */
+    activeStep?: StepKey;
+    availableTools: AgentTool[];
+    availableSubAgents: SubAgentRef[];
+    availableIntents?: IntentOption[];
+    availableModels?: ModelOption[];
+    /** Host application context the merchant runs in (e.g. ApplicationType.MANIFEST). */
+    applicationType?: ApplicationType;
+    /** Optional consumer-supplied validity; merged over the builder's derived validity. */
+    validation?: Partial<StepValidation>;
+    isSaving?: boolean;
+    isPublishing?: boolean;
+    /** Whole-builder loading (e.g. edit-mode initial fetch). */
+    isLoading?: boolean;
+    /** Footer hint override. */
+    footerHint?: string;
+    /**
+     * Controls step-rail click navigation. The rail is read-only by **default**
+     * (the user moves with Back / Next). Set `false` to allow jumping steps by
+     * clicking the rail.
+     */
+    disableStepNavigation?: boolean;
+    /**
+     * When true, every action handler logs `[AgentBuilder] <handler>` (plus its
+     * args) to the console as it fires. Off by default — nothing is logged.
+     */
+    debugLog?: boolean;
+}
+export interface AgentBuilderProps {
+    /** Grouped data / reference / flags. */
+    config: AgentBuilderConfig;
+    /** Called with a partial patch on every field change. */
+    onChange: (patch: Partial<AgentValue>) => void;
+    onStepChange?: (step: StepKey) => void;
+    onDiscard: () => void;
+    onSaveDraft: () => void | Promise<void>;
+    /**
+     * Called when the user confirms go-live. If it returns a promise, the
+     * confirm button shows a loader and the success modal appears only on resolve.
+     */
+    onPublish: () => void | Promise<void>;
+    /** Back arrow in the top bar (e.g. return to listing). */
+    onBack?: () => void;
+    onTestAgent?: () => void;
+    /** After a successful go-live, navigate to the dashboard. Drives the success modal CTA. */
+    onGoToDashboard?: () => void;
+    /**
+     * Create a sub-agent inline (the Step-3 "Create sub-agent" drawer). The
+     * consumer persists the draft and resolves with the created agent's
+     * `{ id, name }`; the builder then references it in `subagents`. Omit to hide
+     * the create flow (sub-agents fall back to selecting existing ones).
+     */
+    onCreateSubAgent?: (draft: SubAgentDraft) => Promise<SubAgentRef>;
+    /**
+     * Fetch an existing sub-agent's editable data when the user clicks
+     * "Configure" on a sub-agent row. The builder opens the drawer in edit mode
+     * prefilled with the result. Omit to hide the Configure action.
+     */
+    onFetchSubAgent?: (id: string) => Promise<SubAgentDraft>;
+    /**
+     * Persist edits to an existing sub-agent (drawer submit in edit mode).
+     * Resolves with the updated `{ id, name }`.
+     */
+    onUpdateSubAgent?: (id: string, draft: SubAgentDraft) => Promise<SubAgentRef>;
+    /**
+     * Optional "Improve with AI" for the sub-agent drawer's instructions /
+     * guardrails. Resolves with the rewritten text. Omit to hide the buttons.
+     */
+    onImproveSubAgent?: (kind: 'instructions' | 'guardrail', text: string) => Promise<string>;
+    'data-test'?: string;
+}

package/dist/esm/components/agent-builder/AgentBuilder.styled.d.ts

@@ -0,0 +1,161 @@
+export declare const BuilderRoot: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-builder-root";
+}, "className">;
+export declare const TopBar: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-top-bar";
+}, "className">;
+export declare const TopBarSide: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-top-bar-side";
+}, "className">;
+export declare const BackButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-back-button";
+}, "className">;
+export declare const Main: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-main";
+}, "className">;
+export declare const Rail: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-rail";
+}, "className">;
+export declare const Content: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-content";
+}, "className">;
+export declare const ContentCard: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-content-card";
+}, "className">;
+export declare const Footer: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-footer";
+}, "className">;
+export declare const FooterHint: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-footer-hint";
+}, "className">;
+export declare const FooterActions: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-footer-actions";
+}, "className">;
+export declare const RailList: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-rail-list";
+}, "className">;
+export declare const RailItem: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-rail-item";
+}, "className">;
+export declare const StepBadge: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-step-badge";
+} & {
+    state: 'active' | 'complete' | 'inactive';
+}, "className">;
+export declare const SectionHeaderWrap: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-section-header-wrap";
+}, "className">;
+export declare const FieldBlock: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-field-block";
+}, "className">;
+export declare const FieldLabelRow: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-field-label-row";
+}, "className">;
+export declare const AiTextAreaShell: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-ai-text-area-shell";
+} & {
+    focused?: boolean | undefined;
+    minHeight?: string | undefined;
+}, "className">;
+export declare const AiTextAreaInput: import('styled-components').StyledComponent<"textarea", any, {
+    className: "bik-ai-text-area-input";
+}, "className">;
+export declare const CardRow: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-card-row";
+}, "className">;
+export declare const RadioCard: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-radio-card";
+} & {
+    selected?: boolean | undefined;
+}, "className">;
+export declare const RadioCardText: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-radio-card-text";
+}, "className">;
+export declare const ChipWrap: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-chip-wrap";
+}, "className">;
+export declare const IntentChip: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-intent-chip";
+}, "className">;
+export declare const ChipCloseButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-chip-close-button";
+}, "className">;
+export declare const AddChipButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-add-chip-button";
+}, "className">;
+export declare const Step3Grid: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-step3-grid";
+}, "className">;
+export declare const Step3Main: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-step3-main";
+}, "className">;
+export declare const Step3Side: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-step3-side";
+}, "className">;
+export declare const SideSection: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-side-section";
+}, "className">;
+export declare const SideSectionHeader: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-side-section-header";
+}, "className">;
+export declare const AddIconButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-add-icon-button";
+}, "className">;
+export declare const SourceButtonRow: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-source-button-row";
+}, "className">;
+export declare const SourceButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-source-button";
+}, "className">;
+export declare const SelectableRow: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-selectable-row";
+}, "className">;
+export declare const RowText: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-row-text";
+}, "className">;
+export declare const RowRemoveButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-row-remove-button";
+}, "className">;
+export declare const RowActions: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-row-actions";
+}, "className">;
+export declare const RowActionDivider: import('styled-components').StyledComponent<"span", any, {
+    className: "bik-row-action-divider";
+}, "className">;
+export declare const RowMenuButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-row-menu-button";
+}, "className">;
+export declare const ModalBody: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-modal-body";
+}, "className">;
+export declare const ModalIcon: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-modal-icon";
+}, "className">;
+export declare const ModalActions: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-modal-actions";
+}, "className">;
+export declare const SubAgentScrim: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-subagent-scrim";
+}, "className">;
+export declare const SubAgentPanel: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-subagent-panel";
+}, "className">;
+export declare const SubAgentPanelHeader: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-subagent-panel-header";
+}, "className">;
+export declare const SubAgentPanelHeaderText: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-subagent-panel-header-text";
+}, "className">;
+export declare const SubAgentPanelBody: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-subagent-panel-body";
+}, "className">;
+export declare const SubAgentPanelFooter: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-subagent-panel-footer";
+}, "className">;
+export declare const SubAgentCloseButton: import('styled-components').StyledComponent<"button", any, {
+    className: "bik-subagent-close";
+}, "className">;
+/** Inline action row inside a rich field (e.g. "Improve with AI"). */
+export declare const FieldActionRow: import('styled-components').StyledComponent<"div", any, {
+    className: "bik-field-action-row";
+}, "className">;