@mybricks/plugin-ai 0.0.1 → 0.0.2

package/src/view/components/messages/messages.tsx

@@ -1,172 +0,0 @@
-import React, { useEffect, useLayoutEffect, useState, useRef } from "react"
-import classNames from "classnames"
-import { Loading3QuartersOutlined, CheckCircleOutlined, CloseCircleOutlined } from "@ant-design/icons"
-import { marked } from "marked";
-import { context } from "../../../context"
-import css from "./messages.less"
-
-const Messages = ({ user }: any) => {
-  const destroysRef = useRef<(() => void)[]>([]);
-  const [plans, setPlans] = useState<any>([]);
-
-  useLayoutEffect(() => {
-    // @ts-ignore TODO
-    destroysRef.current.push(context.rxai.events.on('plan', (plans: any) => {
-      setPlans([...plans])
-    }, true))
-  }, [])
-
-  useEffect(() => {
-    return () => {
-      for (const destroy of destroysRef.current) {
-        destroy()
-      }
-    }
-  }, [])
-
-  return (
-    <div className={classNames(css.messages)}>
-      {plans.map((plan: any, index: number) => {
-        return <Plan key={index} plan={plan} user={user} />
-      })}
-      <div className={classNames(css.anchor)} />
-    </div>
-  )
-}
-
-export { Messages }
-
-const Plan = ({ plan, user }: { plan: any, user: any }) => {
-  const [messages, setMessages] = useState<any[]>([])
-  const [message, setMessage] = useState("")
-  const [loading, setLoading] = useState(true)
-  const destroysRef = useRef<any[]>([]);
-  const messageRef = useRef<HTMLDivElement>(null)
-
-  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: any[]) => {
-        setMessages([...messages])
-        setMessage("")
-      }, true),
-    )
-  }, [])
-
-  useEffect(() => {
-    return () => {
-      for (const destroy of destroysRef.current) {
-        destroy()
-      }
-    }
-  }, [])
-
-  useEffect(() => {
-    if (message) {
-      messageRef.current!.innerHTML = marked.parse(message) as string;
-    }
-  }, [message])
-
-  return (
-    <>
-      {messages[0] && (
-        <div className={css.bubbleContainer}>
-          <div className={css.bubbleHeader}>
-            <span className={css.bubbleHeaderAvatar}>
-              <img className={css.userAvatar} src={user.avatar} />
-            </span>
-            <span className={css.bubbleHeaderName}>{user.name}</span>
-          </div>
-          <BubbleUser message={messages[0]} />
-        </div>
-      )}
-      {messages[0] && (
-        <div className={css.bubbleContainer}>
-          <div className={css.bubbleHeader}>
-            <span className={css.bubbleHeaderAvatar}>
-              <img className={css.aiAvatar} src={"https://my.mybricks.world/image/icon.png"} />
-            </span>
-            <span className={css.bubbleHeaderName}>MyBricks.ai</span>
-          </div>
-          <div className={classNames(css.messageContainer)}>
-            <div className={css.markDown}>
-              {messages.slice(1).map((message, index) => {
-                return message.role === "tool" ? <BubbleAITool key={index + message.status} message={message} /> : <BubbleAI key={index} message={message} />
-              })}
-              {message ? (
-                <div ref={messageRef}>
-                </div>
-              ) : null}
-              {!message && loading ? (
-                <>
-                  <span>正在思考</span>
-                  <Loading3QuartersOutlined className={css.spinIcon} />
-                </>
-              ) : null}
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  )
-}
-
-const BubbleAITool = ({ message }: any) => {
-  return (
-    <div className={css.collapsibleCodeBlock}>
-      <div className={css.codeHeader}>
-        <span className={css.codeTitle}>{message.content.displayName}</span>
-        <span className={css.codeTitleStatus}>
-          {message.status === "pending" && <Loading3QuartersOutlined className={css.spinIcon} />}
-          {message.status === "success" && <CheckCircleOutlined style={{ color: "green" }} />}
-          {message.status === "error" && <CloseCircleOutlined style={{ color: "red" }} />}
-        </span>
-      </div>
-    </div>
-  )
-}
-
-const BubbleAI = ({ message }: any) => {
-  const bubbleRef = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    const content = typeof message.content === "string" ?
-      message.content :
-      message.content.find((content: any) => {
-        if (content.type === "text") {
-          return content
-        }
-      })?.text
-    bubbleRef.current!.innerHTML = marked.parse(content) as string;
-  }, [])
-
-  return <span ref={bubbleRef}></span>
-}
-
-const BubbleUser = ({ message }: any) => {
-  const bubbleRef = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    const content = typeof message.content === "string" ?
-      message.content :
-      message.content.find((content: any) => {
-        if (content.type === "text") {
-          return content
-        }
-      })?.text
-    bubbleRef.current!.innerHTML = marked.parse(content) as string;
-  }, [])
-
-  return (
-    <div className={classNames(css.messageContainer, css.userMessage)}>
-      <div ref={bubbleRef} className={css.markDown}></div>
-    </div>
-  )
-}

package/src/view/components/sender/sender.less

@@ -1,44 +0,0 @@
-.sender {
-  width: 100%;
-  padding: 12px;
-
-  .content {
-    width: 100%;
-    height: 40px;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
-    border-radius: 12px;
-    border: 1px solid #d9d9d9;
-    display: flex;
-    align-items: center;
-    padding: 6px;
-
-    .textarea {
-      resize: none;
-      flex: 1;
-      font-size: 12px;
-      height: 22px;
-      line-height: 22px;
-    }
-
-    .button {
-      width: 28px;
-      height: 28px;
-      border-radius: 50%;
-      background-color: var(--mybricks-color-primary);
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      .icon {
-        font-size: 14px;
-        color: #ffffff;
-      }
-    }
-  }
-}

package/src/view/components/sender/sender.tsx

@@ -1,62 +0,0 @@
-import React, { useState } from "react"
-import classNames from "classnames"
-import { ArrowUpOutlined } from "@ant-design/icons"
-import { context } from "../../../context"
-import { Agents } from '../../../agents'
-import css from "./sender.less"
-
-const Sender = () => {
-  const [message, setMessage] = useState('');
-
-  const send = () => {
-    Agents.requestCommonAgent({
-      message
-    })
-
-    // context.rxai.requestAI({
-    //   message,
-    //   emits: {
-    //     write: () => { },
-    //     complete: () => { },
-    //     error: () => { },
-    //     cancel: () => { }
-    //   },
-    //   key: "",
-    //   tools: context.getTools(),
-    //   presetMessages: context.getPresetMessages()
-    // })
-    setMessage("");
-  }
-
-  return (
-    <div className={classNames(css.sender)}>
-      <div className={classNames(css.content)}>
-        <textarea
-          className={classNames(css.textarea)}
-          value={message}
-          onChange={(event) => {
-            setMessage(event.target.value);
-          }}
-          autoFocus
-          onKeyDown={(event) => {
-            if (event.key === 'Enter' && !event.shiftKey) {
-              event.preventDefault()
-              if (message) {
-                send()
-              }
-            }
-          }}
-        />
-        <button
-          className={classNames(css.button)}
-          disabled={!message}
-          onClick={send}
-        >
-          <ArrowUpOutlined className={classNames(css.icon)} />
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export { Sender }