plain-design 1.0.0-beta.160 → 1.0.0-beta.161

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.160",
+  "version": "1.0.0-beta.161",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/$ai/index.tsx

@@ -136,7 +136,11 @@ export const $ai = (() => {
       done = readerDone;
       if (done) {
         console.log('Chat stream done...');
-        onFinish?.(fullText);
+        let message = fullText;
+        if (message.slice(0, 7) === '```json' && message.slice(-3) === '```') {
+          message = message.slice(7, -3).trim();
+        }
+        onFinish?.(message);
       }
       if (!value?.length) {
         continue;

package/src/packages/components/AiChatBox/index.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, PropType, reactive, useClasses, useRefs} from "@peryl/react-compose";
+import {designComponent, getComponentCls, iKeyboardEvent, PropType, reactive, useClasses, useRefs} from "@peryl/react-compose";
 import Input from "../Input";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, useStyle} from "../../uses/useStyle";
@@ -27,7 +27,7 @@ export const AiChatBox = designComponent({
     /*系统提示词*/
     systemContent: { type: String },
     /*手动处理大模型返回的message*/
-    handleMessage: { type: Function as PropType<(param: { message: string, userContent: string, chatData?: iAiChatResponse, addHistory: (history: iChatBoxHistory) => void }) => void | iChatBoxHistory | iChatBoxHistory[] | Promise<void | iChatBoxHistory | iChatBoxHistory[]>> },
+    handleMessage: { type: Function as PropType<iChatBoxHandleMessage> },
     handleReceive: { type: Function as PropType<(data: { fullText?: string, chunkText?: string }) => void> },
     beforeSendUserContent: { type: Function as PropType<(data: { userContent: string, messages: iAiHistory[] }) => Promise<void>> },
     handleChatStream: { type: Function as PropType<(parameter: iAiChatStreamParameter & { userContent: string }) => Promise<any>> },
@@ -67,7 +67,9 @@ export const AiChatBox = designComponent({
       },
       addHistory: async (...history: iChatBoxHistory[]) => {
         state.histories.push(...history);
+        history = state.histories.slice(history.length * -1);
         await methods.scrollEnd();
+        return history;
       },
       send: async (userContent: string) => {
         await delay(23);
@@ -79,7 +81,7 @@ export const AiChatBox = designComponent({
         await props.beforeSendUserContent?.({ userContent, messages });
         if (!!props.systemContent?.trim().length) {messages.unshift({ role: 'system', content: props.systemContent });}
         let chatBoxHistory: iChatBoxHistory | undefined = undefined;
-        let message: string | undefined = undefined;
+        let message = '';
 
         const aiChatStreamParameter: iAiChatStreamParameter & { userContent: string } = {
           aiConfig,
@@ -107,7 +109,7 @@ export const AiChatBox = designComponent({
           await $ai.chatStream(aiChatStreamParameter);
         }
 
-        if (!message) {
+        if (!message.length) {
           throw new Error('message is empty!');
         }
 
@@ -116,7 +118,9 @@ export const AiChatBox = designComponent({
           message,
           userContent,
           // chatData,
-          addHistory: methods.addHistory
+          addHistory: methods.addHistory,
+          histories: state.histories,
+          scrollEnd: methods.scrollEnd,
         });
 
         if (newHistory != null) {
@@ -141,6 +145,10 @@ export const AiChatBox = designComponent({
           state.loading = false;
         }
       },
+      onEnterTextarea: (e: KeyboardEvent) => {
+        if (e.shiftKey) {return;}
+        handler.onClickSend();
+      },
     };
 
     return {
@@ -183,7 +191,7 @@ export const AiChatBox = designComponent({
               placeholder={props.placeholder || i18n.$it('ai.placeholder').d('请输入要发送给ai的内容如：你是谁')}
               minHeight={props.inputMinHeight}
               maxHeight={props.inputMaxHeight}
-              onEnter={handler.onClickSend}
+              onEnter={handler.onEnterTextarea}
             />
             <Button shape="round" mode="fill" icon="pi-send" className="ai-chat-box-send-button" onClick={handler.onClickSend} loading={state.loading}/>
           </div>
@@ -199,3 +207,14 @@ export interface iChatBoxHistory extends iAiHistory {
 }
 
 export default AiChatBox;
+
+export interface iChatBoxHandleMessage {
+  (param: {
+    message: string,
+    userContent: string,
+    chatData?: iAiChatResponse,
+    addHistory: (...history: iChatBoxHistory[]) => void,
+    histories: iChatBoxHistory[],
+    scrollEnd: () => Promise<void>,
+  }): void | iChatBoxHistory | iChatBoxHistory[] | Promise<void | iChatBoxHistory | iChatBoxHistory[]>;
+}

package/src/packages/components/AutoTable/use/useTableOption.ai.tsx

@@ -5,7 +5,7 @@ import Button from "../../Button";
 import {iAutoTableAiConfig, iTableAiOperate, iTableAiOperateConfig, iTableAiOperatePlcMeta, iTableAiOperateSearch, iTableAiOperateSort} from "../utils/AutoTable.utils";
 import $configuration from "../../$configuration";
 import $dialog from "../../$dialog";
-import AiChatBox, {iChatBoxHistory} from "../../AiChatBox";
+import AiChatBox, {iChatBoxHandleMessage, iChatBoxHistory} from "../../AiChatBox";
 import {createSimpleDate} from "../../createSimpleDate";
 import {iTableOptionSeniorFilterMeta} from "../setting/useTableOption.setting.senior.filter";
 import {iFilterFormSingleData} from "../../FilterFormSingle";
@@ -20,6 +20,7 @@ import {uuid} from "@peryl/utils/uuid";
 import {eAddressTypeEnum} from "../../$address/address.utils";
 import Alert from "../../Alert";
 import {$ai, iAiConfiguration} from "../../$ai";
+import {lastItem} from "@peryl/utils/lastItem";
 
 declare module '../utils/TableOption.space' {
   namespace TableOptionSpace {
@@ -77,71 +78,14 @@ export const useTableOptionAi = AutoModule.createRegistration((option) => {
       const availableFields = await methods.getAvailableFields();
       console.log({ availableFields });
 
-      /**
-       * 对话提示词
-       * @author  韦胜健
-       * @date    2025/4/6 23:31
-       */
       const systemContent = `
-
-        当前时间是：${createSimpleDate()["YYYY-MM-DD HH:mm:ss"]}
-        你是一名专业的自然语言分析师，你需要将用户对一个表格的需求描述转化为结构化的json数据；
-
-        这个json数据的结构如下 {type:"",data:""}，type表示用户对表格的操作类型，data为分析出来的数据，type有四种类型：
-        第1个是"search"，表明用户需求是搜索，也就是对数据进行筛选；
-        第2个是"sort"，表明用户需求是排序；
-        第3个是"config"，表明用户需求是配置表格；
-        第4个是"error"，表明用户的需求不支持，此时data属性值为不支持的原因；
-
-        你只能返回给我这个json数据，用户只能对表格进行搜索，排序，配置表格，其他的需求一律拒绝；也就是返回 {type:"error",data:""}，记住data要给出拒绝的原因；
-        如果用户同时存在两种及以上需求，比如同时要搜索以及排序，那么你返回的json数据应该是一个数组，比如 [{type:"search",data:""},{type:"sort",data:""}]；
-
-        我会以JSON数组的方式给你表格中支持操作的字段，这个数组中每一个元素的结构为字段类型结构，结构如下所示：{title, field, filterType, width, order, fixed, hide, align}，以下为结构中的每个属性说明：
-        title：字段的标题；
-        field：字段的唯一标识；
-        filterType：字段的筛选类型；
-        width：字段的宽度；
-        order：字段的顺序；
-        fixed：字段的冻结方式，如果是左冻结/左固定，那么值为left；如果是右冻结/右固定，那么值为right；
-        hide：字段是否隐藏，为布尔值；
-        align：字段的对齐方式，左对齐的话是left，居中对齐的话是center，右对齐的话是right；
-
-        表格中目前支持的字段：${JSON.stringify(availableFields)}
-
-        如果用户要配置的字段不存在，则拒绝并且给出拒绝原因；
-
-        如果用户操作为搜索或者说筛选，那么返回的结构数据中的data应该是一个对象，结构为{filters:[],filterExpression:""}，
-        结构中的filters为数组，数组中的每个元素结构如下所示：{id,field,filterHandler,value}，以下对元素结构中每个属性做解释：
-        id: 唯一标识，需要你生成，按照 FF_1, FF_2, FF_3 的递增规则生成；
-        field: 要搜索的字段的唯一标识；
-        filterHandler: 搜索方式；
-          如果用户要求字段等于某个值，此时filterHandler为"eq"；
-          如果用户要求字段约等于某个值，此时filterHandler为"like"；
-          如果用户要求字段匹配多个值，当字段的filterType既不是text也不是number，那么返回的filterHandler为"in"；否则filterHandler为"in_like"；
-          如果用户要求字段不包含或者排除某些值，那么此时如果字段的filterType为(text或者number)的话filterHandler为"not_in_like"，否则filterHandler为"not_in"；；
-          如果用户要求字段值为空，则filterHandler为"is_null"；
-          如果用户要求字段值不为空，则filterHandler为"is_not_null"；
-          如果用户要求字段处于某个范围，比如大于或者小于某个日期，比如大于或者小于某个数字，那么此时filterHandler为"range"；
-        value: 搜索的值；
-          如果用户对这个字段的搜索只有一个值，那么value应该是一个字符串；
-          如果用户对这个字段的搜索包含多个值或者用了包含，不包含，排除之类的字眼，此时value应该是json数组；
-          如果用户对这个字段的要求是一个范围，比如大于某个值小于某个值等等，那么value应该是一个对象{start,end}，start为开始时间或者最小值，end为结束时间或者最大值；
-          当字段要求是一个范围时，
-            如果这个字段的filterType为date，那么value为日期字符串，格式为YYYY-MM-DD；
-            如果这个字段的filterType为datetime，那么value为日期时间字符串，格式为YYYY-MM-DD HH:mm:ss；如果用户仅给出了日期没有给出时间，那么给一个默认的时间；如果是开始日期时间，这个时间的默认值为00:00:00；如果是结束日期时间，这个时间的默认值为23:59:59
-
-        data数据中的filterExpression为表达式，如果用户的搜索条件都是"并且"关系，那么filterHandler为空字符串；如果用户的搜索条件存在"或"关系，那么需要生成这个表达式字符串，表达式中用筛选条件的id来代替表达式；
-        比如用户要求搜索性别为男并且状态为在职的员工，你会给我返回两条数据[{id:'FF_1',field:'gender',filterHandler:'=',value:'男'},{id:'FF_2',field:'status',filterHandler:'=',value:'在职'}]，此时filterExpression为空字符串；
-        如果用户要求是搜索性别为男或者状态在职的员工，你除了要给我返回这两条数据之外，返回的filterExpression应该为"FF_1 or FF_2"；filterExpression表达式中的筛选条件如果是并且关系用and代替，如果是或者关系用or代替，如果用户需求带有小括号，那么需要保留小括号；
-
-        如果用户操作为排序，那么返回的结构数据中的data应该是一个数组，数组中每个元素结果如下所示：{field,desc,title}，以下对元素结构中每个属性做解释：
-        field：要搜索的字段的唯一标识；
-        desc：如果降序或者从大到小，那么值为true；如果升序或者从小到大模大，那么值为false；
-        title: 字段的标题；
-
-        如果用户操作为配置列表字段，那么返回数据的data为数组，每一个元素为字段类型结构；比如有一个字段，其标题为"商品名称"，其字段标识为"prodName"，如果用户要隐藏这个字段，那么返回的字段类型结构为 {field:"prodName", hide:true}
-
-      `;
+      你是一名专业的自然语言分析师，需要你分析用户的内容返回结构化的数据返回给我；
+      你返回的数据结构是这样的：{"search":"","sort":"","config":""}
+      用户的内容中涉及到数据筛选查询相关的语句，你需要将这段语句放在结果的search属性中；
+      用户的内容中涉及到排序相关的语句，你需要将这段语句放在结果的sort属性中；
+      用户的内容中涉及到字段配置相关（比如字段排序、设置宽度、隐藏、字段固定冻结等等）的语句，你需要将这段语句放在结果的config属性中；
+      如果用户的内容不涉及到查询/筛选、排序以及字段配置，你需要返回 {"error":""}，将错误信息放在这个error属性中；
+      `.trim();
 
       // console.log(systemContent);
       $dialog({
@@ -171,9 +115,80 @@ export const useTableOptionAi = AutoModule.createRegistration((option) => {
         )
       });
 
-      const handleMessage = async ({ message }: { message: string }): Promise<iChatBoxHistory | iChatBoxHistory[] | void> => {
+      // ✓ （计数大于500或者数字小于10）并且选项值为会员折扣
+      // ✓ 查询省份为上海市，按照创建时间降序，然后将更新时间左固定放在文本前面
+      // ✓ 查询选项值包含秒杀折扣以及会员折扣的数据
+      // ✓ 查询选项值包含秒杀折扣的数据
+      // ✓ 查询文本为yeezy或者hello的数据
+      const handleMessage: iChatBoxHandleMessage = async ({ message, histories, scrollEnd }) => {
         try {
-          const operateItems: iTableAiOperate[] = toArray(JSON.parse(message));
+
+          const messageData: any = Object.entries(JSON.parse(message));
+          if (!!messageData.error) {return [{ id: uuid(), role: 'assistant', content: messageData.error }];}
+
+          const operateItems: iTableAiOperate[] = [];
+
+          await Promise.all(Object.entries(JSON.parse(message)).map(async ([key, val]: [string, any]) => {
+            if (!val?.trim().length) {
+              return;
+            }
+            if (key === 'search') {
+              histories.push({ id: uuid(), role: 'assistant', content: '' });
+              const history = lastItem(histories)!;
+              await $ai.chatStream({
+                messages: [
+                  { role: 'system', content: getSearchPrompt(availableFields) },
+                  { role: 'user', content: val }
+                ],
+                onReceiving: async ({ fullText }) => {
+                  history.content = fullText;
+                  await scrollEnd();
+                },
+                onFinish: (fullText) => {
+                  history.content = fullText;
+                  console.log('search', history.content);
+                  operateItems.push({ type: "search", data: JSON.parse(fullText) });
+                },
+              });
+            } else if (key === 'sort') {
+              histories.push({ id: uuid(), role: 'assistant', content: '' });
+              const history = lastItem(histories)!;
+              await $ai.chatStream({
+                messages: [
+                  { role: 'system', content: getSortPrompt(availableFields) },
+                  { role: 'user', content: val }
+                ],
+                onReceiving: async ({ fullText }) => {
+                  history.content = fullText;
+                  await scrollEnd();
+                },
+                onFinish: (fullText) => {
+                  history.content = fullText;
+                  console.log('sort', history.content);
+                  operateItems.push({ type: "sort", data: JSON.parse(fullText) });
+                },
+              });
+            } else if (key === 'config') {
+              histories.push({ id: uuid(), role: 'assistant', content: '' });
+              const history = lastItem(histories)!;
+              await $ai.chatStream({
+                messages: [
+                  { role: 'system', content: getConfigPrompt(availableFields) },
+                  { role: 'user', content: val }
+                ],
+                onReceiving: async ({ fullText }) => {
+                  history.content = fullText;
+                  await scrollEnd();
+                },
+                onFinish: (fullText) => {
+                  history.content = fullText;
+                  console.log('config', history.content);
+                  operateItems.push({ type: "config", data: JSON.parse(fullText) });
+                },
+              });
+            }
+          }));
+
           if (operateItems.length == 1 && operateItems[0].type === 'error') {
             return;
           }
@@ -242,6 +257,13 @@ export const useTableOptionAi = AutoModule.createRegistration((option) => {
 
           usingFilterOption = { ...usingFilterOption };
           usingFilterOption.filterHandler = f.filterHandler;
+          if (usingFilterOption.filterType === 'select') {
+            if (usingFilterOption.filterHandler === 'in_like') {
+              usingFilterOption.filterHandler = 'in';
+            } else if (usingFilterOption.filterHandler === 'not_in_like') {
+              usingFilterOption.filterHandler = 'not_in';
+            }
+          }
 
           /**
            * 由于大模型返回对字段的筛选值都是显示值，某些情况下需要对这个显示值转化为实际值，才能用来进行搜索，以下做列举
@@ -305,6 +327,8 @@ export const useTableOptionAi = AutoModule.createRegistration((option) => {
             filterQueryParam,
           };
 
+          console.log({ id: f.id, fsd, usingFilterOption });
+
           return {
             id: f.id,
             data: fsd,
@@ -483,3 +507,137 @@ export const useTableOptionAi = AutoModule.createRegistration((option) => {
 
   return ret;
 });
+
+/**
+ * 字段描述提示词
+ * @author  韦胜健
+ * @date    2025/5/30 23:05
+ */
+const getFieldsPrompt = (availableFields: iTableAiOperatePlcMeta[]) => `
+
+当前时间是：${createSimpleDate()["YYYY-MM-DD HH:mm:ss"]}
+我会以JSON数组的方式给你表格中支持操作的字段，这个数组中每一个元素的结构为字段类型结构，结构如下所示：{title, field, filterType, width, order, fixed, hide, align}，以下为结构中的每个属性说明：
+
+- title：字段的标题；
+- field：字段的唯一标识；
+- filterType：字段的筛选类型；
+- width：字段的宽度；
+- order：字段的顺序；
+- fixed：字段的冻结方式，如果是左冻结/左固定，那么值为left；如果是右冻结/右固定，那么值为right，如果是不固定/不冻结则值为center
+- hide：字段是否隐藏，为布尔值；
+- align：字段的对齐方式，左对齐的话是left，居中对齐的话是center，右对齐的话是right；
+
+# 表格字段数据
+
+${JSON.stringify(availableFields)}
+`.trim();
+
+/**
+ * 搜索提示词
+ * @author  韦胜健
+ * @date    2025/5/30 23:05
+ */
+const getSearchPrompt = (availableFields: iTableAiOperatePlcMeta[]) => `
+# 角色
+
+你是一名专业自然语言分析专家，需要你将用户的内容转化为结构化的数据筛选参数
+
+${getFieldsPrompt(availableFields)}
+
+# 返回的数据类型
+
+- 你要返回的数据结构类型为：{"filters":[],"filterExpression":""}，
+- 返回数据中的filters为数组，数组中的每个元素结构如下所示：{id,field,filterHandler,value}，以下对元素结构中每个属性做解释：
+  - id: 唯一标识，需要你生成，按照 FF_1, FF_2, FF_3 的递增规则生成；
+  - field: 要搜索的字段的唯一标识；
+  - filterHandler: 搜索方式；
+      - 如果用户要求字段等于某个值，此时filterHandler为"eq"；
+      - 如果用户要求字段约等于某个值，此时filterHandler为"like"；
+      - 如果用户要求字段匹配多个值，当字段的filterType既不是text也不是number，那么返回的filterHandler为"in"；否则filterHandler为"in_like"；
+      - 如果用户要求字段不包含或者排除某些值，那么此时如果字段的filterType为(text或者number)的话filterHandler为"not_in_like"，否则filterHandler为"not_in"；；
+      - 如果用户要求字段值为空，则filterHandler为"is_null"；
+      - 如果用户要求字段值不为空，则filterHandler为"is_not_null"；
+      - 如果用户要求字段处于某个范围，比如大于或者小于某个日期，比如大于或者小于某个数字，那么此时filterHandler为"range"；
+  - value: 搜索的值；
+    - 如果用户对这个字段的搜索只有一个值，那么value应该是一个字符串；
+    - 如果用户对这个字段的搜索包含多个值或者用了包含，不包含，排除之类的字眼，此时value应该是json数组；
+    - 如果用户对这个字段的要求是一个范围，比如大于某个值小于某个值等等，那么value应该是一个对象{start,end}，start为开始时间或者最小值，end为结束时间或者最大值；
+    - 当字段要求是一个范围时，
+      - 如果这个字段的filterType为date，那么value为日期字符串，格式为YYYY-MM-DD；
+      - 如果这个字段的filterType为datetime，那么value为日期时间字符串，格式为YYYY-MM-DD HH:mm:ss；如果用户仅给出了日期没有给出时间，那么给一个默认的时间；如果是开始日期时间，这个时间的默认值为00:00:00；如果是结束日期时间，这个时间的默认值为23:59:59
+- 返回数据中的data数据中的filterExpression为表达式，如果用户的搜索条件都是"并且"关系，那么filterHandler为空字符串；如果用户的搜索条件存在"或"关系，那么需要生成这个表达式字符串，表达式中用筛选条件的id来代替表达式；
+
+# 样例说明
+
+## 样例一
+
+比如用户的描述为“查询（创建时间大于2025-05-30或者更新时间小于2025-05-31）并且订单状态为待支付”，那么你分析得到的结构化查询参数为：
+
+{
+  "filterExpression":"(FF_1 or FF_2) and FF_3",
+  "filters":[
+    {"id":"FF_1","field":"createdAt","filterHandler":"range",value:{start:"2025-05-30", end:""}},
+    {"id":"FF_2","field":"updatedAt","filterHandler":"range",value:{start:"", end:"2025-05-31"}},
+    {"id":"FF_1","field":"orderStatus","filterHandler":"eq",value:"unpaid"},
+  ]
+}
+
+## 样例二
+
+比如用户的描述为“查询用户名为zhangsan或者lisi”，由于用户名字段的filterType为text，此时复合text字段匹配多个值的情况，那么分析得到的结构化查询参数为：
+
+{
+  "filters":[
+    {"id":"FF_1","field":"username","filterHandler":"in_like","value":["zhangsan","lisi"]},
+  ]
+}
+
+# 注意事项
+
+- 你一定检查用户要求中的小括号，并且在在filterExpression中保留这个小括号，如果用户提供的是中文小括号，请转化为英文小括号
+- 出现错误的情况下，请返回数据 {error:""}，将错误信息放在error属性中；
+- 如果用户要配置的字段不存在，则拒绝并且给出拒绝原因放在错误信息中；
+
+`;
+
+/**
+ * 排序提示词
+ * @author  韦胜健
+ * @date    2025/5/30 23:05
+ */
+const getSortPrompt = (availableFields: iTableAiOperatePlcMeta[]) => `
+# 角色
+
+你是一名专业自然语言分析专家，需要你将用户的内容转化为结构化的数据排序参数
+
+${getFieldsPrompt(availableFields)}
+
+# 返回的数据类型
+
+你返回的数据data应该是一个数组，数组中每个元素结果如下所示：{field,desc,title}，以下对元素结构中每个属性做解释：
+
+- field：要搜索的字段的唯一标识；
+- desc：如果降序或者从大到小，那么值为true；如果升序或者从小到大模大，那么值为false；
+- title: 字段的标题；
+
+# 样例
+
+比如用户要求先按照创建时间降序，再按照更新时间升序，你需要返回的数据为[{"field":"createdAt","desc":true,"title":"创建时间"},{"field":"updatedAt","desc":false,"title":"更新时间"}]
+`.trim();
+
+/**
+ * 字段配置提示词
+ * @author  韦胜健
+ * @date    2025/5/30 23:05
+ */
+const getConfigPrompt = (availableFields: iTableAiOperatePlcMeta[]) => `
+# 角色
+
+你是一名专业自然语言分析专家，需要你将用户的内容转化为结构化的字段配置参数
+
+${getFieldsPrompt(availableFields)}
+
+# 返回的数据类型
+
+你返回的数据data为数组，每一个元素为字段类型结构；比如有一个字段，其标题为"商品名称"，其字段标识为"prodName"，如果用户要隐藏这个字段，那么返回的字段类型结构为 {field:"prodName", hide:true}
+`.trim();

package/src/packages/entry.tsx

@@ -136,7 +136,7 @@ export {Corner} from './components/Corner';
 export {useContextmenuOptions} from './components/useContextmenuOptions';
 export type {iContextmenuOption} from './components/useContextmenuOptions';
 export {AiChatBox} from './components/AiChatBox';
-export type {iChatBoxHistory} from './components/AiChatBox';
+export type {iChatBoxHandleMessage, iChatBoxHistory} from './components/AiChatBox';
 export {$ai} from './components/$ai';
 export type {iAiChoice, iAiChatResponse, iAiConfiguration, iAiHistory} from './components/$ai';
 export {IconPicker} from './components/IconPicker';