@mybricks/plugin-ai 0.0.1 → 0.0.2

package/src/types/index.ts

@@ -0,0 +1,4 @@
+export enum DeviceType {
+  Desktop = 'desktop',
+  Mobile = 'mobile'
+}

package/src/view/components/header/header.less

@@ -1,11 +1,14 @@
 .header {
   width: 100%;
   height: 40px;
+  min-height: 40px;
   display: flex;
   align-items: center;
-  padding: 0 40px 0 8px;
-  justify-content: space-between;
+  padding: 0 60px 0 13px;
+  // justify-content: space-between;
   border-bottom: 1px solid #f3f3f3;
+  background: rgba(255, 255, 255, .8);
+  gap: 6px;
 
   .title {
     font-weight: 700;
@@ -14,4 +17,35 @@
     line-height: 18px;
     cursor: default;
   }
+
+  .actions {
+    display: flex;
+    align-items: center;
+
+    .action {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      color: #AAA;
+      width: 20px;
+      height: 20px;
+      justify-content: center;
+
+      &:hover {
+        color: var(--mybricks-color-primary, #FA6400);
+      }
+
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+
+      &.export {
+        svg {
+          width: 14px;
+          height: 14px;
+        }
+      }
+    }
+  }
 }

package/src/view/components/header/header.tsx

@@ -1,15 +1,60 @@
 import React from "react"
 import classNames from "classnames"
+import { Rxai } from "@mybricks/rxai";
+import { Delete, Export } from "../../../components/icons"
+import { context } from "../../../context";
 import css from "./header.less"
 
-const Header = () => {
+interface HeaderParams {
+  rxai: Rxai;
+}
+
+const Header = (params: HeaderParams) => {
+  const clear = () => {
+    params.rxai.clear();
+  }
+
+  const exportRxai = async () => {
+    try {
+      const content = await params.rxai.export();
+      downloadToFile({
+        content: content,
+        name: `rxai-${new Date().getTime()}.json`
+      })
+    } catch (e) {
+      console.error("[@mybricks/plugin-ai - exportRxai - error]", e);
+    }
+  }
+
   return (
     <div className={classNames(css.header)}>
       <span className={classNames(css.title)}>
-        MyBricks.ai
+        {/* MyBricks.ai */}
+        智能助手
       </span>
+      <div className={css['actions']}>
+        <div className={css['action']} data-mybricks-tip={"清空对话记录"} onClick={clear}>
+          <Delete />
+        </div>
+        <div className={classNames(css['action'], css['export'])} data-mybricks-tip={"导出对话记录"} onClick={exportRxai}>
+          <Export />
+        </div>
+      </div>
     </div>
   )
 }
 
 export { Header }
+
+function downloadToFile ({ content, name }: { content: any, name: string }) {
+  const eleLink = document.createElement('a')
+  eleLink.download = name
+  eleLink.style.display = 'none'
+
+  const blob = new Blob([JSON.stringify(content)])
+
+  eleLink.href = URL.createObjectURL(blob)
+  document.body.appendChild(eleLink)
+  eleLink.click()
+  document.body.removeChild(eleLink)
+}

package/src/view/components/index.ts

@@ -1,3 +1 @@
 export * from "./header/header";
-export * from "./messages/messages";
-export * from "./sender/sender";

package/src/view/index.tsx

@@ -1,18 +1,168 @@
-import React from "react"
+import React, { useEffect, useRef, useState } from "react"
 import classNames from "classnames";
-import { Header, Sender } from "./components";
+import { Header } from "./components";
 import { Messages } from "../components/messages";
+import { Sender, SenderRef, SenderProps } from "../components/sender";
 import { context } from "../context";
+import { Agents } from '../agents'
+import { AbstractAgent } from "../agents/utils/config";
 import css from "./index.less";
 
-const View = ({ user, copilot }: any) => {
+interface ViewProps {
+  api: AiViewApi;
+  user: any;
+  copilot: any;
+}
+
+const View = ({ user, copilot, api }: ViewProps) => {
+  const senderRef = useRef<SenderRef>(null);
+  const [rxai, setRxai] = useState(context.rxai);
+  const [vibeCoding, setVibeCoding] = useState(false);
+
+  const PLACEHOLDER_MAP = {
+    normal: `您好，我是${context.name}，请详细描述您的需求`,
+    disabled: `您好，我是${context.name}，请先从画布中选择场景或组件，再开始对话`,
+    loading: "处理中，请稍后..."
+  }
+
+  const [senderStateProps, setSenderStateProps] = useState(() => {
+    return {
+      loading: false,
+      disabled: true,
+      placeholder: PLACEHOLDER_MAP["disabled"]
+    }
+  })
+  const focusID = useRef<string>(null);
+
+  useEffect(() => {
+    const statusChange = (state: "loading" | "normal" | "disabled") => {
+      if (state === "disabled") {
+        setSenderStateProps({
+          disabled: true,
+          loading: false,
+          placeholder: PLACEHOLDER_MAP["disabled"]
+        })
+      } else {
+        const bool = state === "loading";
+        setSenderStateProps({
+          disabled: bool,
+          loading: bool,
+          placeholder: PLACEHOLDER_MAP[state]
+        })
+      }
+    }
+
+    const disconnectAiViewDisplay = context.events.on("aiViewDisplay", () => {
+      setTimeout(() => {
+        senderRef.current!.focus();
+      })
+    }, true)
+    const disconnectFocus = context.events.on("focus", (focus) => {
+      if (!focus) {
+        senderRef.current!.setMentions([]);
+        focusID.current = null;
+        statusChange("disabled");
+        setRxai(context.rxai);
+      } else {
+        const type = focus.type;
+        const id = ["page", "section"].includes(type) ? focus.pageId : focus.comId;
+        const { onProgress, ...other } = focus;
+        senderRef.current!.setMentions([other] as any);
+        setVibeCoding(other.vibeCoding || false);
+        focusID.current = id;
+        const status = context.requestStatusTracker.getStatus(id);
+        statusChange(status.state === "pending" ? "loading" : "normal");
+        // setTimeout(() => {
+        //   senderRef.current!.focus();
+        // })
+        if (focus.vibeCoding) {
+          setTimeout(() => {
+            // TODO: ai组件库里注册agents的时机不对
+            const agent = context.agents!.find((agent) => {
+              return agent instanceof AbstractAgent && agent.type === "vibeCoding"
+            });
+            if (agent) {
+              const rxai = (agent as AbstractAgent).getRxai({
+                key: `${context.pluginParams.key}_${focus.pageId}_${focus.comId}`,
+              })
+              setRxai(rxai);
+            } else {
+              setRxai(context.rxai);
+            }
+          })
+        } else {
+          setRxai(context.rxai);
+        }
+      }
+    }, true)
+    const disconnectPromiseStatusTracker = context.requestStatusTracker.events.on("promise", (promise) => {
+      if (promise.id === focusID.current) {
+        statusChange(promise.status.state === "pending" ? "loading" : "normal");
+      }
+    })
+    return () => {
+      disconnectAiViewDisplay()
+      disconnectFocus()
+      disconnectPromiseStatusTracker()
+    }
+  }, [])
+
+  const onSend = (sendMessage: Parameters<SenderProps["onSend"]>[0]) => {
+    const { message, attachments, ...extension } = sendMessage;
+
+    if (!focusID.current) {
+      return;
+    }
+
+    context.requestStatusTracker.track(focusID.current, Agents.requestAgent({
+      message,
+      attachments,
+      extension,
+      onProgress: context.currentFocus?.onProgress
+    }));
+  }
+
+  const onMentionClick: NonNullable<SenderProps["onMentionClick"]> = (mention) => {
+    const { id, type, comId, pageId } = mention;
+    api[type === "page" ? "focusPage" : "focusCom"]((type === "page" ? pageId : comId) || id as string);
+  }
+
+  const onMessagesSend = (sendMessage: Parameters<SenderProps["onSend"]>[0]) => {
+    const { message, attachments, insertAfter,  ...extension } = sendMessage;
+    const { mentions } = extension
+    const mention = sendMessage.mentions[0];
+    context.requestStatusTracker.track(mention.type === "page" ? mention.pageId : mention.comId, Agents.requestAgent({
+      message,
+      attachments,
+      insertAfter,
+      extension,
+      focus: mentions[0],
+      onProgress: context.currentFocus?.onProgress
+    }));
+  }
+
   return (
-    <div className={classNames(css.view)}>
-      <Header />
-      <Messages user={user} copilot={copilot} rxai={context.rxai}/>
-      <Sender />
+    <div className={classNames(css.view)} style={vibeCoding ? ({ '--mybricks-color-primary': '#16A157' } as React.CSSProperties) : undefined}>
+      <Header rxai={rxai}/>
+      <Messages
+        key={rxai.key}
+        user={user}
+        copilot={copilot}
+        rxai={rxai}
+        onSend={onMessagesSend}
+        onMentionClick={onMentionClick}
+      />
+      <Sender
+        ref={senderRef}
+        loading={senderStateProps.loading}
+        placeholder={senderStateProps.placeholder}
+        disabled={senderStateProps.disabled}
+        mode="mention"
+        onSend={onSend}
+        onMentionClick={onMentionClick}
+      />
     </div>
   )
 }
 
-export { View }
+export { View }

package/src/tools/answer-user.ts

@@ -1,35 +0,0 @@
-import { fileFormat } from '@mybricks/rxai'
-
-interface AnswerUserParams {
-  // 暂无配置参数，未来可扩展语气风格、知识库范围等
-}
-
-export default function answerUser(config: AnswerUserParams): any {
-  return {
-    name: 'answer-user',
-    displayName: "专家思考中",
-    description: `回答用户在页面搭建过程中/对话中的问题。
-参数：用户提出的问题（文本），前面工具仅获取一些小白难以理解的内容；
-作用：理解用户意图，针对搭建专用术语和前面工具的复杂返回，为用户提供清晰、准确、与 MyBricks 平台相关的解答或引导；
-返回值：一段自然语言回答；
-
-建议使用场景：
-1. 前置只有一个获取DSL工具，返回的是MyBricksDsl
-2. 前置只有一个获取组件配置文档，返回的是专业的组件知识
-`,
-    getPrompts: () => {
-      return `<工具总览>
-你是一个 MyBricks 低代码平台的智能问答助手，专注于解答用户在页面/组件搭建过程中提出的各类问题。
-你需要根据历史对话记录，为用户解答疑难问题。
-</工具总览>
-
-<人设>
-你是一个能将复杂问题通俗易懂进行解释的MyBricks 平台专家，擅长用简单易懂的语言帮助用户理解问题。
-</人设>
-`;
-    },
-    execute({ content }) {
-      return content;
-    }
-  };
-}

package/src/tools/focus-element.ts

@@ -1,47 +0,0 @@
-import { fileFormat } from '@mybricks/rxai'
-
-interface FocusElementToolParams {
- 
-}
-
-export default function focusElement(config: FocusElementToolParams, ): Tool {
-  return {
-    name: 'focus-element',
-    description: `通过id聚焦到任何可聚焦的页面 / 组件。
-参数：页面ID或者组件ID；
-作用：聚焦到某个可搭建的元素上，获取元素元信息，用于后续搭建；
-返回值：聚焦元素的元信息，格式是包含id、type（component / page）、namespace（可能存在）字段的对象；
-`,
-    getPrompts: () => {
-        return `<工具总览>
-你是一个可以聚焦页面/组件的工具，你作为MyBricks低代码平台（以下简称MyBricks平台或MyBricks）的资深页面搭建助手，可以根据需求聚焦元素用于下一步的搭建。
-</工具总览>
- 
-<任务流程>
-  按照以下格式返回所要聚焦的元素：
-    ${fileFormat({ content: '{ "id": "u_1sd23" }', fileName: '聚焦元素ID.json' })}
-    - 注意：文件要严格按照JSON格式返回，注意不要出现语法错误；
-</任务流程>`
-      },
-    execute({ files, content }) {
-      let selectFile: File | undefined = undefined;
-      Object.keys(files).forEach((fileKey) => {
-        const file: File = files[fileKey] as File;
-        if (file.extension === 'json') {
-          selectFile = file
-        }
-
-      })
-
-      let selectFileId = {};
-      try {
-        selectFileId = JSON.parse(selectFile?.content);
-      } catch (error) {}
-
-      return `<当前选中元素情况>
-ID: ${selectFileId.id}
-类型：页面
-</当前选中元素情况>`
-    },
-  }
-}