@mybricks/plugin-ai 0.0.1 → 0.0.3

package/src/components/messages/index.tsx

@@ -1,236 +0,0 @@
-import React, { useRef, useState, useEffect, useLayoutEffect } from "react"
-import classNames from "classnames"
-import { Rxai } from "@mybricks/rxai"
-import { marked } from "marked";
-import { Loading, Success, Close } from "../icons";
-import css from "./index.less"
-
-const renderer = new marked.Renderer();
-renderer.paragraph = (paragraph) => {
-  return `<p>${paragraph.text}</p>`;
-};
-marked.use({ renderer });
-
-interface User {
-  /** 名称 */
-  name: string;
-  /** 头像地址 */
-  avatar: string;
-}
-
-interface MessagesParams {
-  /** 用户信息 */
-  user: User;
-  /** ai助手信息 */
-  copilot: User;
-
-  rxai: Rxai;
-}
-
-type Plans = Rxai['cacheMessages'];
-
-const Messages = (params: MessagesParams) => {
-  const { user, rxai, copilot } = params;
-
-  const destroysRef = useRef<(() => void)[]>([]);
-  const [plans, setPlans] = useState<Plans>([]);
-
-  useLayoutEffect(() => {
-    destroysRef.current.push(rxai.events.on('plan', (plans) => {
-      setPlans([...plans])
-    }, true))
-  }, [])
-
-  useEffect(() => {
-    return () => {
-      for (const destroy of destroysRef.current) {
-        destroy()
-      }
-    }
-  }, [])
-
-  return (
-    <main className={css['ai-chat-messages']}>
-      {plans.map((plan, index) => {
-        return <Bubble key={index} user={user} plan={plan} copilot={copilot} />
-      })}
-      <div className={css['anchor']} />
-    </main>
-  )
-}
-
-type Plan = Rxai['cacheMessages'][number];
-
-type UserFriendlyMessages = Plan['userFriendlyMessages'];
-
-interface BubbleParams {
-  user: User;
-  copilot: User;
-  plan: Plan;
-}
-const Bubble = (params: BubbleParams) => {
-  const { user, plan, copilot } = params;
-
-  const [messages, setMessages] = useState<UserFriendlyMessages>([])
-  const [message, setMessage] = useState("")
-  const [loading, setLoading] = useState(true)
-
-  const destroysRef = useRef<(() => void)[]>([]);
-
-  useLayoutEffect(() => {
-    destroysRef.current.push(
-      plan.events.on('loading', (loading: boolean) => {
-        setLoading(loading);
-      }, true),
-      plan.events.on('messageStream', (messageStream: string) => {
-        setMessage((pre) => {
-          return pre + messageStream;
-        })
-      }, true),
-      plan.events.on('userFriendlyMessages', (messages: UserFriendlyMessages) => {
-        setMessages([...messages])
-        setMessage("")
-      }, true),
-    )
-  }, [])
-
-  useEffect(() => {
-    return () => {
-      for (const destroy of destroysRef.current) {
-        destroy()
-      }
-    }
-  }, [])
-
-  return (
-    <>
-      {messages[0] && <BubbleUser user={user} message={messages[0]} />}
-      {messages[0] && <BubbleCopilot messages={messages.slice(1)} copilot={copilot} message={message} loading={loading} />}
-    </>
-  )
-}
-
-interface BubbleMessageParams {
-  message: string;
-}
-const BubbleMessage = (params: BubbleMessageParams) => {
-  const { message } = params;
-  const messageRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    messageRef.current!.innerHTML = marked.parse(message) as string;
-  }, [message])
-
-  return <span ref={messageRef} />
-}
-
-interface BubbleUserParams {
-  user: User;
-  message: UserFriendlyMessages[number]
-}
-
-const BubbleUser = (params: BubbleUserParams) => {
-  const { user, message } = params;
-
-  return (
-    <article className={css['chat-bubble']}>
-      <header className={css['chat-bubble-header']}>
-        <span className={css['chat-bubble-header-avatar']}>
-          <img className={css['user-avatar']} src={user.avatar} />
-        </span>
-        <span className={css['chat-bubble-header-name']}>{user.name}</span>
-      </header>
-      <section className={classNames(css['chat-message-container'], css['user-message'])}>
-        <div className={css['ai-chat-markdown']}>
-          <span>{typeof message.content === "string" ? message.content : message.content.find((content: any) => {
-            if (content.type === "text") {
-              return content
-            }
-          }).text}</span>
-        </div>
-      </section>
-    </article>
-  )
-}
-
-interface BubbleCopilotParams {
-  copilot: User;
-  messages: UserFriendlyMessages;
-  message: string;
-  loading: boolean;
-}
-const BubbleCopilot = (params: BubbleCopilotParams) => {
-  const { messages, copilot, message, loading } = params;
-
-  return (
-    <article className={css['chat-bubble']}>
-      <header className={css['chat-bubble-header']}>
-        <span className={css['chat-bubble-header-avatar']}>
-          <img className={css['copilot-avatar']} src={copilot.avatar} />
-        </span>
-        <span className={css['chat-bubble-header-name']}>{copilot.name}</span>
-      </header>
-      <section className={classNames(css['chat-message-container'], css['ai-message'])}>
-        <div className={css['ai-chat-markdown']}>
-          {messages.map((message, index) => {
-            if (message.role === "tool") {
-              return <BubbleCopilotTool key={index + message.status} message={message} />
-            }
-            return <BubbleMessage message={message.content} />
-          })}
-          {message && <BubbleMessage message={message} />}
-          {!message && loading && (
-            <div className={css['think']}>
-              <span>正在思考</span>
-              <Loading />
-            </div>
-          )}
-        </div>
-      </section>
-    </article>
-  )
-}
-
-interface BubbleCopilotToolParams {
-  message: {
-    type: "tool";
-    status: "pending" | "success" | "error" | "aborted";
-    content: {
-      name: string;
-      displayName: string;
-    }
-  }
-}
-const BubbleCopilotTool = (params: BubbleCopilotToolParams) => {
-  const { message } = params;
-
-  return (
-    <div className={classNames(css['ai-chat-collapsible-code-block'], css['collapsed'])}>
-      <span className={classNames(css['code-header'], css['collapsed'])}>
-        <span className={classNames(css['code-title'], css['collapsed'])}>{message.content.displayName || message.content.name}</span>
-        {message.status === "pending" && (
-          <span className={classNames(css['code-title-status'], css['collapsed'], css['pending'])}>
-            <Loading />
-          </span>
-        )}
-        {message.status === "success" && (
-          <span className={classNames(css['code-title-status'], css['collapsed'], css['success'])}>
-            <Success />
-          </span>
-        )}
-        {message.status === "error" && (
-          <span className={classNames(css['code-title-status'], css['collapsed'], css['error'])}>
-            <Close />
-          </span>
-        )}
-        {message.status === "aborted" && (
-          <span className={classNames(css['code-title-status'], css['collapsed'], css['aborted'])}>
-            取消
-          </span>
-        )}
-      </span>
-    </div>
-  )
-}
-
-export { Messages }

package/src/context/index.ts

@@ -1,21 +0,0 @@
-import { Rxai } from "@mybricks/rxai"
-
-class Context {
-  rxai!: Rxai
-  currentFocus?: AiServiceFocusParams;
-  api!: AiServiceAPI;
-
-  /** 应用传入的系统提示词 */
-  prompts?: any;
-
-  createRxai(options: ConstructorParameters<typeof Rxai>[0]) {
-    if (!this.rxai) {
-      this.rxai = new Rxai(options)
-    }
-  }
-}
-
-const context = new Context();
-
-export { context };
-

package/src/data.ts

@@ -1,5 +0,0 @@
-const data = {
-
-}
-
-export default data

package/src/index.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import { Rxai } from "@mybricks/rxai";
-import data from './data';
-
-import pkg from '../package.json';
-
-console.log(`%c ${pkg.name} %c@${pkg.version}`, `color:#FFF;background:#fa6400`, ``, ``);
-
-import { Agents } from './agents'
-import { View } from "./view";
-import { context } from './context';
-import { StartView } from "./startView";
-
-export { fileFormat } from '@mybricks/rxai'
-
-export default function pluginAI({
-  user = {
-    name: "user",
-    avatar: "/default_avatar.png"
-  },
-  requestAsStream,
-  prompts
-}: any): any {
-
-  const copilot = {
-    name: "MyBricks.ai",
-    avatar: "https://my.mybricks.world/image/icon.png"
-  }
-
-  context.prompts = prompts
-
-  // window.requestGenerateCanvasAgent = requestGenerateCanvasAgent
-
-  return {
-    name: '@mybricks/plugins/ai',
-    title: 'MyBricksAI助手',
-    author: 'MyBricks',
-    ['author.zh']: 'MyBricks',
-    version: '1.0.0',
-    description: 'ai for MyBricks',
-    data,
-    contributes: {
-      aiService: {
-        init(api: AiServiceAPI) {
-          context.api = api;
-          context.createRxai({
-            request: {
-              requestAsStream
-            }
-          })
-
-          console.log("[init - API]", api)
-
-          return {
-            focus(params: AiServiceFocusParams) {
-              if (!params) {
-                context.currentFocus = undefined;
-                return;
-              }
-              context.currentFocus = params;
-            },
-            request(params: AiServiceRequestParams) {
-              if (params.attachments?.length) {
-                params.message = "参考附件图片完成页面搭建\n" + params.message
-              }
-
-              Agents.requestCommonAgent(params)
-            }
-          }
-        }
-      },
-      aiView: {
-        render() {
-          return <View user={user} copilot={copilot}/>
-        }
-      },
-      aiStartView: {
-        render() {
-          return <StartView user={user} copilot={copilot}/>
-        }
-      }
-    }
-  }
-}