@mybricks/plugin-ai 0.0.2 → 0.0.3

package/src/types/index.ts

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

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

@@ -1,51 +0,0 @@
-.header {
-  width: 100%;
-  height: 40px;
-  min-height: 40px;
-  display: flex;
-  align-items: center;
-  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;
-    font-size: 12px;
-    color: rgb(25, 25, 25);
-    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,60 +0,0 @@
-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"
-
-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 */}
-        智能助手
-      </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 +0,0 @@
-export * from "./header/header";

package/src/view/index.less

@@ -1,5 +0,0 @@
-.view {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}

package/src/view/index.tsx

@@ -1,168 +0,0 @@
-import React, { useEffect, useRef, useState } from "react"
-import classNames from "classnames";
-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";
-
-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)} 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 }