@next-bricks/ai-portal 0.1.0

package/dist-types/bootstrap.d.ts

@@ -0,0 +1,2 @@
+import "./cruise-canvas/index.js";
+import "./chat-box/index.js";

package/dist-types/chat-box/i18n.d.ts

@@ -0,0 +1,15 @@
+export declare enum K {
+    HOW_CAN_I_HELP = "HOW_CAN_I_HELP"
+}
+export declare const NS = "bricks/ai-portal/chat-box";
+export declare const locales: {
+    en: Locale;
+    zh: Locale;
+};
+export declare const t: any;
+type Locale = {
+    [k in K]: string;
+} & {
+    [k in K as `${k}_plural`]?: string;
+};
+export {};

package/dist-types/chat-box/index.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { ReactNextElement } from "@next-core/react-element";
+import "@next-core/theme";
+export interface ChatBoxProps {
+    disabled?: boolean;
+}
+/**
+ * 构件 `ai-portal.chat-box`
+ */
+export declare class ChatBox extends ReactNextElement implements ChatBoxProps {
+    #private;
+    accessor disabled: boolean | undefined;
+    render(): React.JSX.Element;
+}
+export interface ChatBoxComponentProps extends ChatBoxProps {
+    onSubmit?: (value: string) => void;
+}
+export declare function ChatBoxComponent({ disabled, onSubmit, }: ChatBoxComponentProps): React.JSX.Element;

package/dist-types/chat-box/index.spec.d.ts

@@ -0,0 +1 @@
+import "./";

package/dist-types/cruise-canvas/NodeEnd/NodeEnd.d.ts

@@ -0,0 +1,4 @@
+export interface NodeEndProps {
+    onShare?: () => void;
+}
+export declare function NodeEnd({ onShare }: NodeEndProps): JSX.Element;

package/dist-types/cruise-canvas/NodeInstruction/NodeInstruction.d.ts

@@ -0,0 +1,5 @@
+export interface NodeInstructionProps {
+    content?: string;
+    loading?: boolean;
+}
+export declare function NodeInstruction({ content, loading, }: NodeInstructionProps): JSX.Element;

package/dist-types/cruise-canvas/NodeJob/NodeJob.d.ts

@@ -0,0 +1,7 @@
+import type { Job } from "../interfaces";
+export interface NodeJobProps {
+    job: Job;
+    state?: string;
+    humanInput?: (jobId: string, input: string) => void;
+}
+export declare function NodeJob({ job, state, humanInput }: NodeJobProps): JSX.Element;

package/dist-types/cruise-canvas/NodeRequirement/NodeRequirement.d.ts

@@ -0,0 +1,6 @@
+export interface NodeRequirementProps {
+    content?: string;
+    startTime?: number;
+    loading?: boolean;
+}
+export declare function NodeRequirement({ content, startTime, loading, }: NodeRequirementProps): JSX.Element;

package/dist-types/cruise-canvas/NodeStart/NodeStart.d.ts

@@ -0,0 +1 @@
+export declare function NodeStart(): JSX.Element;

package/dist-types/cruise-canvas/PlanProgress/PlanProgress.d.ts

@@ -0,0 +1,5 @@
+import type { StepWithState } from "../interfaces";
+export interface PlanProgressProps {
+    plan?: StepWithState[];
+}
+export declare function PlanProgress({ plan }: PlanProgressProps): JSX.Element | null;

package/dist-types/cruise-canvas/ZoomBar/ZoomBar.d.ts

@@ -0,0 +1,6 @@
+export interface ZoomBarProps {
+    scale: number;
+    onScaleChange?: (scale: number) => void;
+    onReCenter?: () => void;
+}
+export declare function ZoomBar({ scale, onScaleChange, onReCenter, }: ZoomBarProps): JSX.Element;

package/dist-types/cruise-canvas/bricks.d.ts

@@ -0,0 +1,4 @@
+import type { GeneralIcon, GeneralIconProps } from "@next-bricks/icons/general-icon";
+import type { Button, ButtonProps } from "@next-bricks/basic/button";
+export declare const WrappedIcon: import("@next-core/react-element").WrappedBrick<GeneralIcon, GeneralIconProps>;
+export declare const WrappedButton: import("@next-core/react-element").WrappedBrick<Button, ButtonProps>;

package/dist-types/cruise-canvas/cmdb.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface CMDBSelectProps {
+    objectId?: string | null;
+    fieldId?: string | null;
+    objectList?: any[] | null;
+}
+interface CMDBSelectEvents {
+    "cmdb.instance.form.change.v2": CustomEvent<any[]>;
+}
+interface CMDBSelectEvensMapping {
+    onChangeV2: "cmdb.instance.form.change.v2";
+}
+export declare const AsyncWrappedCMDB: React.LazyExoticComponent<import("@next-core/react-element").WrappedBrickWithEventsMap<HTMLElement, CMDBSelectProps, CMDBSelectEvents, CMDBSelectEvensMapping>>;
+export {};

package/dist-types/cruise-canvas/constants.d.ts

@@ -0,0 +1,7 @@
+import { JobState } from "./interfaces.js";
+export declare const DEFAULT_SCALE_RANGE_MIN = 0.5;
+export declare const DEFAULT_SCALE_RANGE_MAX = 2;
+export declare const START_NODE_ID = "<START>";
+export declare const END_NODE_ID = "<END>";
+export declare const CANVAS_PADDING_BOTTOM = 96;
+export declare const DONE_STATES: JobState[];

package/dist-types/cruise-canvas/i18n.d.ts

@@ -0,0 +1,19 @@
+export declare enum K {
+    YES = "YES",
+    NO = "NO",
+    PLAN_COMPLETED = "PLAN_COMPLETED",
+    TASK_COMPLETED = "TASK_COMPLETED",
+    SHARE = "SHARE"
+}
+export declare const NS = "bricks/ai-portal/cruise-canvas";
+export declare const locales: {
+    en: Locale;
+    zh: Locale;
+};
+export declare const t: any;
+type Locale = {
+    [k in K]: string;
+} & {
+    [k in K as `${k}_plural`]?: string;
+};
+export {};

package/dist-types/cruise-canvas/index.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { ReactNextElement } from "@next-core/react-element";
+import "@next-core/theme";
+import type { Job, TaskBaseDetail } from "./interfaces.js";
+export interface CruiseCanvasProps {
+    taskId: string | undefined;
+    task: TaskBaseDetail | undefined;
+    jobs: Job[] | undefined;
+}
+/**
+ * 构件 `ai-portal.cruise-canvas`
+ */
+export declare class CruiseCanvas extends ReactNextElement implements CruiseCanvasProps {
+    #private;
+    accessor taskId: string | undefined;
+    accessor task: TaskBaseDetail | undefined;
+    accessor jobs: Job[] | undefined;
+    render(): React.JSX.Element;
+}
+export interface CruiseCanvasComponentProps extends CruiseCanvasProps {
+    onShare?: () => void;
+}
+export declare function CruiseCanvasComponent({ taskId, task: propTask, jobs: propJobs, onShare, }: CruiseCanvasComponentProps): React.JSX.Element;

package/dist-types/cruise-canvas/interfaces.d.ts

@@ -0,0 +1,114 @@
+export type RangeTuple = [min: number, max: number];
+export type SizeTuple = [width: number, height: number];
+export interface NodePosition {
+    x: number;
+    y: number;
+}
+export interface TransformLiteral {
+    k: number;
+    x: number;
+    y: number;
+}
+export type GraphNode = RequirementGraphNode | InstructionGraphNode | JobGraphNode | StartGraphNode | EndGraphNode;
+export interface RequirementGraphNode extends BaseGraphNode {
+    type: "requirement";
+    content: string;
+}
+export interface InstructionGraphNode extends BaseGraphNode {
+    type: "instruction";
+    job: Job;
+}
+export interface JobGraphNode extends BaseGraphNode {
+    type: "job";
+    job: Job;
+}
+export interface StartGraphNode extends BaseGraphNode {
+    type: "start";
+}
+export interface EndGraphNode extends BaseGraphNode {
+    type: "end";
+}
+export interface BaseGraphNode {
+    id: string;
+    type: string;
+    state?: string;
+    view?: NodeView;
+}
+export interface GraphEdge {
+    source: string;
+    target: string;
+}
+export interface NodeView extends NodePosition {
+    width: number;
+    height: number;
+}
+export interface Edge {
+    points: NodePosition[];
+}
+export type TaskBaseDetail = Omit<Task, "jobs">;
+export interface Task {
+    id: string;
+    title: string;
+    requirement: string;
+    state: TaskState;
+    plan: Step[];
+    jobs: Job[];
+    startTime: number;
+    endTime?: number;
+}
+export interface Step {
+    id: string;
+    instruction: string;
+}
+export interface StepWithState extends Step {
+    state?: JobState;
+}
+export interface Job {
+    id: string;
+    upstream?: string[];
+    parent?: string;
+    instruction?: string;
+    state: JobState;
+    toolCall?: ToolCall;
+    messages?: Message[];
+    isError?: boolean;
+    startTime: number;
+    endTime?: number;
+}
+export interface TaskPatch extends Omit<Partial<Task>, "jobs"> {
+    jobs?: JobPatch[];
+    error?: string;
+}
+export interface JobPatch extends Partial<Job> {
+    id: string;
+}
+export type TaskState = "submitted" | "working" | "input-required" | "completed" | "canceled" | "failed" | "unknown";
+export type JobState = TaskState;
+export interface Message {
+    role: string;
+    parts: Part[];
+}
+export type Part = TextPart | FilePart | DataPart;
+export interface TextPart {
+    type: "text";
+    text: string;
+}
+export interface FilePart {
+    type: "file";
+    file: {
+        name?: string;
+        mimeType?: string;
+        bytes?: string;
+        uri?: string;
+    };
+}
+export interface DataPart {
+    type: "data";
+    data: Record<string, unknown>;
+}
+export interface ToolCall {
+    name: string;
+    arguments?: Record<string, unknown>;
+    argumentsParseFailed?: boolean;
+    argumentsParseError?: unknown;
+}

package/dist-types/cruise-canvas/reducers/error.d.ts

@@ -0,0 +1,3 @@
+import type { Reducer } from "react";
+import type { CruiseCanvasAction } from "./interfaces";
+export declare const error: Reducer<string | null, CruiseCanvasAction>;

package/dist-types/cruise-canvas/reducers/error.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-types/cruise-canvas/reducers/index.d.ts

@@ -0,0 +1,3 @@
+import { Reducer } from "react";
+import type { CruiseCanvasAction, CruiseCanvasState } from "./interfaces";
+export declare const rootReducer: Reducer<CruiseCanvasState, CruiseCanvasAction>;

package/dist-types/cruise-canvas/reducers/interfaces.d.ts

@@ -0,0 +1,15 @@
+import type { Job, TaskBaseDetail, TaskPatch } from "../interfaces";
+export interface CruiseCanvasState {
+    task: TaskBaseDetail | null;
+    jobs: Job[];
+    error: string | null;
+}
+export type CruiseCanvasAction = TaskSSEAction | TaskResetAction;
+export interface TaskSSEAction {
+    type: "sse";
+    payload: TaskPatch;
+    isInitial?: boolean;
+}
+export interface TaskResetAction {
+    type: "reset";
+}

package/dist-types/cruise-canvas/reducers/jobs.d.ts

@@ -0,0 +1,4 @@
+import type { Reducer } from "react";
+import type { Job } from "../interfaces";
+import type { CruiseCanvasAction } from "./interfaces";
+export declare const jobs: Reducer<Job[], CruiseCanvasAction>;

package/dist-types/cruise-canvas/reducers/jobs.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-types/cruise-canvas/reducers/task.d.ts

@@ -0,0 +1,4 @@
+import type { Reducer } from "react";
+import type { TaskBaseDetail } from "../interfaces";
+import type { CruiseCanvasAction } from "./interfaces";
+export declare const task: Reducer<TaskBaseDetail | null, CruiseCanvasAction>;

package/dist-types/cruise-canvas/reducers/task.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-types/cruise-canvas/useAutoCenter.d.ts

@@ -0,0 +1,14 @@
+import { type RefObject } from "react";
+import { type ZoomBehavior } from "d3-zoom";
+import type { GraphNode } from "./interfaces";
+export interface UseAutoCenterOptions {
+    nodes: GraphNode[];
+    sizeReady: boolean;
+    zoomer: ZoomBehavior<HTMLDivElement, unknown>;
+    rootRef: RefObject<HTMLDivElement>;
+}
+export declare function useAutoCenter({ nodes, sizeReady, zoomer, rootRef, }: UseAutoCenterOptions): {
+    centered: boolean;
+    setCentered: React.Dispatch<React.SetStateAction<boolean>>;
+    reCenterRef: React.MutableRefObject<boolean>;
+};

package/dist-types/cruise-canvas/useAutoCenter.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-types/cruise-canvas/useLayout.d.ts

@@ -0,0 +1,16 @@
+import type { NodePosition, GraphEdge, GraphNode, SizeTuple, TaskState } from "./interfaces";
+export interface UseLayoutOptions {
+    rawNodes: GraphNode[] | undefined;
+    rawEdges: GraphEdge[] | undefined;
+    sizeMap: Map<string, SizeTuple> | null;
+    state?: TaskState;
+}
+export declare function useLayout({ rawNodes: _rawNodes, rawEdges: _rawEdges, sizeMap, state, }: UseLayoutOptions): {
+    sizeReady: boolean;
+    nodes: GraphNode[];
+    edges: {
+        points: NodePosition[];
+        source: string;
+        target: string;
+    }[];
+};

package/dist-types/cruise-canvas/useLayout.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-types/cruise-canvas/useTaskDetail.d.ts

@@ -0,0 +1,8 @@
+import type { Job, StepWithState } from "./interfaces";
+export declare function useTaskDetail(taskId: string | undefined): {
+    task: import("./interfaces").TaskBaseDetail | null;
+    jobs: Job[];
+    plan: StepWithState[];
+    error: string | null;
+    humanInputRef: React.MutableRefObject<((jobId: string, input: string) => void) | undefined>;
+};

package/dist-types/cruise-canvas/useTaskGraph.d.ts

@@ -0,0 +1,5 @@
+import type { Job, GraphEdge, GraphNode, TaskBaseDetail } from "./interfaces";
+export declare function useTaskGraph(task: TaskBaseDetail | null | undefined, jobs: Job[]): {
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+} | null;

package/dist-types/cruise-canvas/useZoom.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { type ZoomBehavior } from "d3-zoom";
+import type { RangeTuple, TransformLiteral } from "./interfaces";
+export interface UseZoomOptions {
+    rootRef: React.RefObject<HTMLDivElement>;
+    zoomable?: boolean;
+    scrollable?: boolean;
+    pannable?: boolean;
+    pannableWithCtrl?: boolean;
+    scaleRange?: RangeTuple;
+    onSwitchActiveTarget?(target: unknown | null): void;
+}
+export interface UseZoomResult {
+    grabbing: boolean;
+    transform: TransformLiteral;
+    transformRef: React.MutableRefObject<TransformLiteral>;
+    scaleRange: RangeTuple;
+    zoomer: ZoomBehavior<HTMLDivElement, unknown>;
+}
+export declare function useZoom({ rootRef, zoomable, scrollable, pannable, pannableWithCtrl, scaleRange: _scaleRange, onSwitchActiveTarget, }: UseZoomOptions): UseZoomResult;

package/docs/chat-box.md

@@ -0,0 +1,67 @@
+构件 `ai-portal.chat-box`
+
+## Examples
+
+### Basic
+
+```yaml preview
+brick: ai-portal.chat-box
+properties:
+  textContent: Hello world
+```
+
+### With cruise canvas
+
+```yaml preview minHeight="600px"
+brick: div
+properties:
+  style:
+    width: 100vw
+    height: 100vh
+    position: fixed
+    top: 0
+    left: 0
+context:
+  - name: task
+children:
+  - brick: ai-portal.chat-box
+    if: <%= !CTX.task %>
+    properties:
+      style:
+        position: absolute
+        width: 500px
+        maxWidth: 90vw
+        maxHeight: 90vh
+        top: 50%
+        left: 50%
+        transform: translate(-50%, -50%)
+    events:
+      message.submit:
+        useProvider: basic.http-request
+        args:
+          - "<% `${BASE_URL}/api/gateway/logic.llm.aiops_service/api/v1/llm/agent/flow/create` %>"
+          # - /api/mocks/task/send
+          # - "http://localhost:8888/.netlify/functions/task-send"
+          # - "https://serverless-mocks.netlify.app/.netlify/functions/task-send"
+          - method: POST
+            body: |
+              <%
+                JSON.stringify({
+                  input: EVENT.detail
+                })
+              %>
+            headers:
+              Content-Type: application/json
+        callback:
+          error:
+            action: handleHttpError
+          success:
+            action: context.replace
+            args:
+              - task
+              - <% EVENT.detail %>
+  - brick: ai-portal.cruise-canvas
+    if: <%= !!CTX.task %>
+    properties:
+      taskId: <% CTX.task.id %>
+```

package/docs/cruise-canvas.md

@@ -0,0 +1,165 @@
+构件 `ai-portal.cruise-canvas`
+
+## Examples
+
+### Basic
+
+```yaml preview minHeight="600px"
+brick: div
+properties:
+  style:
+    width: 100vw
+    height: 100vh
+    position: fixed
+    top: 0
+    left: 0
+children:
+  - brick: ai-portal.cruise-canvas
+    properties:
+      task:
+        state: completed
+        requirement: |-
+          帮我在CMDB中完成手机银行系统的资源纳管
+        plan:
+          - id: "2"
+            state: completed
+            instruction: |-
+              深度搜素内部知识库，确认手机银行系统包含的逻辑组件和部署要求
+          - id: "8"
+            state: completed
+            instruction: |-
+              深度搜素CMDB给出资源的纳管现状
+          - id: "10"
+            state: completed
+            instruction: |-
+              利用深度思考能力，给出手机银行系统的资源纳管优化方案，该方案用户可以微调或确认
+          - id: "12"
+            state: completed
+            instruction: |-
+              在CMDB中完成手机银行系统的资源纳管
+          - id: "14"
+            state: completed
+            instruction: |-
+              生成纳管后手机银行系统的逻辑架构和部署架构图
+      jobs:
+        - id: "2"
+          state: completed
+          instruction: |-
+            深度搜素内部知识库，确认手机银行系统包含的逻辑组件和部署要求
+        - id: "4"
+          upstream: ["2"]
+          toolCall:
+            name: online_search
+          state: completed
+          messages:
+            - role: assistant
+              parts:
+                - type: text
+                  text: |-
+                    《手机银行系统》
+
+                    依据内部知识库，手机银行系统的逻辑组件包含用户认证，交易接入和理财中心三个模块组成。
+        - id: "5"
+          upstream: ["2"]
+          state: completed
+          toolCall:
+            name: online_search
+          messages:
+            - role: assistant
+              parts:
+                - type: text
+                  text: |-
+                    《XX公司运维管理文件》
+
+                    依据《XX公司运维管理文件》该系统的重要等级为一级，可用性要求99.999%，MTTR为小于3分钟，该系统部署需要实现异地容灾，建议采用双中心部署，且单中心内核心模块无单点。
+        - id: "7"
+          upstream: ["4", "5"]
+          state: completed
+          messages:
+            - role: assistant
+              parts:
+                - type: text
+                  text: |-
+                    依据内部知识库，手机银行系统的逻辑组件包含用户认证，交易接入和理财中心三个模块组成。依据《XX公司运维管理文件》该系统的重要等级为一级，可用性要求99.999%，MTTR为小于3分钟，该系统部署需要实现异地容灾，建议采用双中心部署，且单中心内核心模块无单点。
+        - id: "8"
+          upstream: ["7"]
+          instruction: |-
+            深度搜素CMDB给出资源的纳管现状
+          state: completed
+          messages:
+            - role: assistant
+              parts:
+                - type: text
+                  text: |-
+                    基于CMDB查询手机银行的资源纳管情况，纳管现状总结如下：
+
+                    实例数据的完整性
+                    1. 系统录入（已完成）
+                    2. 模块录入（部分完成），交易接入模块未录入
+                    3. 环境录入（已完成）
+                    4. 主机录入（部分完成），交易接入模块主机未录入
+                    5. 部署实例录入（部分完成），交易接入模块的部署实例未录入
+
+                    关系数据的完整性
+                    1. 系统和模块（部分完成），系统和交易接入模块的关系未建立
+                    2. 系统和环境（√）
+                    3. 模块和主机（部分完成）
+                    4. ...
+        - id: "10"
+          upstream: ["8"]
+          toolCall:
+            name: ask_human
+            arguments:
+              command: ask_user_more
+              question: |-
+                - 交易接入模块的录入；
+                - 系统和交易接入模块的关系创建 ；
+                - 部署实例自动采集特征录入。
+          instruction: |-
+            利用深度思考能力，给出手机银行系统的资源纳管优化方案，该方案用户可以微调或确认
+          state: completed
+          messages:
+            - role: user
+              parts:
+                - type: text
+                  text: |-
+                    我补充下...
+        - id: "12"
+          upstream: ["10"]
+          instruction: |-
+            在CMDB中完成手机银行系统的资源纳管
+          toolCall:
+            name: ask_human
+            arguments:
+              command: ask_user_confirm
+              question: |-
+                方案执行的过程信息
+          state: completed
+          messages:
+            - role: tool
+              parts:
+                - type: text
+                  text: |-
+                    确认
+        - id: "14"
+          upstream: ["12"]
+          instruction: |-
+            生成纳管后手机银行系统的逻辑架构和部署架构图
+          tag: topology
+          state: completed
+          messages:
+            - role: assistant
+              parts:
+                - type: text
+                  text: |-
+                    https://example.com/topology
+        - id: "16"
+          upstream: ["14"]
+          state: completed
+          messages:
+            - role: assistant
+              parts:
+                - type: text
+                  text: |-
+                    该手机银行系统的资源纳管已经完成，本次纳管新增了交易接入模块和该模块相关的主机，以及部署实例信息，模块的纳管建议和架构管理平台打通，部署实例的纳管建议和自动发布平台打通，以便自动完成数据变更，确保数据的准确性，降低架构维护成本。
+```