bi-sdk-react 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bi-sdk-react",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "private": false,
   "type": "module",
   "main": "dist/umd/js/bi-sdk.umd.min.js",
@@ -15,7 +15,8 @@
     "build:lib": "npm run build:lib:umd && npm run build:lib:es",
     "build:lib:umd": "cross-env NODE_ENV=production BUILD_TARGET=lib rsbuild build --config rsbuild.lib.config.ts",
     "build:lib:es": "cross-env NODE_ENV=production BUILD_TARGET=lib rsbuild build --config rsbuild.es.config.ts",
-    "preview": "rsbuild preview"
+    "preview": "rsbuild preview",
+    "publish": "npm run build:types && npm run build:lib && npm publish --access public"
   },
   "dependencies": {
     "@ant-design/icons": "^6.1.0",

package/src/components/PageDesigner.tsx

@@ -646,7 +646,7 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                 }}
               >
                 {rightActiveKey === "ai" && fetch?.ai && (
-                  <AiPanel agentList={agentList} />
+                  <AiPanel agentList={agentList} onEffect={handleAiEffect} />
                 )}
                 {rightActiveKey === "props" && (
                   <PropertiesPanel datasourceEnable={datasourceEnable} />
@@ -701,6 +701,7 @@ export const PageDesigner = React.forwardRef<any, PageDesignerProps>(
                     <AiPanel
                       agentList={agentList}
                       style={{ width: 400, height: "85vh" }}
+                      onEffect={handleAiEffect}
                     />
                   }
                   trigger="click"

package/src/components/panel/AiPanel.tsx

@@ -27,7 +27,12 @@ import React, {
 import styled from "styled-components";
 import { DesignerContext } from "../context/DesignerContext";
 import { IconFont } from "../icon/IconFont";
-import { ChatConversationType, ChatMessageType, ChatResponseAnswerEffectType, ChatResponseAnswerType } from "../typing";
+import {
+  ChatConversationType,
+  ChatMessageType,
+  ChatResponseAnswerEffectType,
+  ChatResponseAnswerType,
+} from "../typing";
 import { formatTime, uuid } from "../utils";
 import { ChatInput } from "./ChatInput";
 import { PaneHeader } from "./PaneHeader";
@@ -145,7 +150,6 @@ export const AiPanel: React.FC<AiPanelProps> = ({
   }) => {
     const questionMessage = {
       id: uuid(),
-      conversationId: conversationId || "",
       question: data.message,
       createdAt: new Date().toISOString(),
       files: data.files || [],
@@ -318,7 +322,7 @@ export const AiPanel: React.FC<AiPanelProps> = ({
             <EmptyMessage />
           )}
         </div>
-        {messageList.length === 0 && (
+        {messageList.length === 0 && conversationList.length > 0 && (
           <Card
             title="历史记录"
             size="small"
@@ -559,20 +563,46 @@ const MessageRoot = styled.div`
     flex-direction: column;
     gap: 6px;
   }
-  .extra-list {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-  .extra-item {
-    // display: flex;
-    // align-items: center;
-    // gap: 6px;
-    font-size: 12px;
-    color: var(--ant-color-text-secondary);
+  .msg-ai-meta {
+    &-title {
+      padding: 8px 4px;
+      font-size: 12px;
+      color: var(--ant-color-text-tertiary);
+    }
+    &-list {
+      max-height: 200px;
+      overflow: auto;
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      gap: 4px;
+
+      .ant-tag {
+        max-width: 155px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
 
-    .ant-tag {
-      margin-right: 6px;
+      &.vertical {
+        flex-direction: column;
+      }
+
+      &-item {
+        font-size: 12px;
+        color: var(--ant-color-text-label);
+        margin-bottom: 4px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .ant-tag {
+          display: inline;
+          max-width: unset;
+          margin-right: 6px;
+        }
+      }
     }
   }
 `;
@@ -659,17 +689,34 @@ const MessageList = forwardRef<
               ) : (
                 <>
                   <div className="msg-content">{msg.answer?.answer || ""}</div>
+                  {!!msg.answer?.plans?.length && (
+                    <details className="msg-ai-meta" open>
+                      <summary className="msg-ai-meta-title">
+                        PLANS：
+                      </summary>
+                      <div className="msg-ai-meta-list">
+                        {msg.answer.plans.map((e, index) => (
+                          <Tooltip title={e.description} key={index}>
+                            <Tag color="blue">{e.name}</Tag>
+                          </Tooltip>
+                        ))}
+                      </div>
+                    </details>
+                  )}
                   {!!msg.answer?.extra?.length && (
-                    <div className="extra-list">
-                      {msg.answer.extra.map((e: any, idx: number) => (
-                        <div className="extra-item" key={idx}>
-                          <Tag color="gold">{e.element}</Tag>
-                          <span>{e.action}</span>
-                          {/* <span>·</span>
-                        <span>{e.area}</span> */}
-                        </div>
-                      ))}
-                    </div>
+                    <details className="msg-ai-meta" open>
+                      <summary className="msg-ai-meta-title">
+                        ACTIONS：
+                      </summary>
+                      <div className="msg-ai-meta-list vertical">
+                        {msg.answer.extra.map((e: any, idx: number) => (
+                          <div className="msg-ai-meta-list-item" key={idx}>
+                            <Tag color="gold">{e.element}</Tag>
+                            <span>{e.action}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </details>
                   )}
                 </>
               )}

package/src/components/typing.ts

@@ -14,8 +14,14 @@ export type ChatResponseAnswerEffectType = {
   pageItems?: SchemaItemType[] | null;
 };
 
+export type ChatResponseAnswerPlanType = {
+  name: string;
+  description: string;
+};
+
 export type ChatResponseAnswerType = {
   answer: string;
+  plans?: ChatResponseAnswerPlanType[] | null;
   effect?: ChatResponseAnswerEffectType | null;
   extra?:
     | { id: string; element: string; action: string; area: string }[]

package/src/example.tsx

@@ -300,6 +300,10 @@ const example = {
       answer: {
         answer:
           "已生成草稿：包含学期与年级筛选、科目均分柱状、分数段分布、班级TOP5榜单及优秀率折线，主色清爽，关键数字加粗。",
+        plans: [
+          { name: "计划1", description: "计划1描述" },
+          { name: "计划2", description: "计划2描述" },
+        ],
         extra: [
           { id: "e1", element: "科目均分", action: "新增", area: "左侧" },
           { id: "e2", element: "分数段分布", action: "新增", area: "左侧" },
@@ -325,6 +329,20 @@ const example = {
       answer: {
         answer:
           "已更新草稿：加入人数与及格率标签，底部提醒区高亮近一周波动，便于快速关注。",
+        plans: [
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+        ],
         extra: [
           { id: "e5", element: "学生总人数标签", action: "新增", area: "顶部" },
           { id: "e6", element: "及格率标签", action: "新增", area: "顶部" },
@@ -349,6 +367,9 @@ const example = {
       answer: {
         answer:
           "已生成草稿：曲线展示出勤率，环形占比呈现迟到与请假，卡片列出异常班级与提醒事项。",
+        plans: [
+          { name: "计划4", description: "计划4描述" },
+        ],
         extra: [
           { id: "e8", element: "出勤率走势", action: "新增", area: "中间左侧" },
           {
@@ -378,6 +399,9 @@ const example = {
       answer: {
         answer:
           "已生成草稿：评分分布清晰，热门意见词语聚合展示，建议清单分组呈现，便于教学改进。",
+        plans: [
+          { name: "计划5", description: "计划5描述" },
+        ],
         extra: [
           { id: "e11", element: "评分分布", action: "新增", area: "中间" },
           { id: "e12", element: "意见词语聚合", action: "新增", area: "中间" },
@@ -402,6 +426,9 @@ const example = {
       answer: {
         answer:
           "已生成草稿：时长条形展示、覆盖范围统计、及时率仪表与反馈质量等级卡片，顶部总览卡片汇总核心信息。",
+        plans: [
+          { name: "计划6", description: "计划6描述" },
+        ],
         extra: [
           { id: "e14", element: "授课时长", action: "新增", area: "左侧" },
           { id: "e15", element: "班级覆盖", action: "新增", area: "左侧" },
@@ -426,6 +453,9 @@ const example = {
     answer: {
       answer:
         "已更新草稿：加入人数与及格率标签，底部提醒区高亮近一周波动，便于快速关注。",
+      plans: [
+        { name: "计划3", description: "计划3描述" },
+      ],
       extra: [
         { id: "e1", element: "学生总人数标签", action: "新增", area: "顶部" },
         { id: "e2", element: "及格率标签", action: "新增", area: "顶部" },