@mybricks/plugin-ai 0.0.1 → 0.0.3

package/src/view/components/messages/messages.less

@@ -1,228 +0,0 @@
-.messages {
-  width: 100%;
-  flex: 1;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  overflow-anchor: auto;
-  /* 允许锚点定位，浏览器默认行为 */
-  scroll-snap-type: y proximity;
-  gap: 16px;
-  padding-bottom: 30px;
-
-  .message {
-    width: 100%;
-
-    .bubble {
-      max-width: calc(100% - 30px);
-      width: fit-content;
-      background-color: rgba(0, 0, 0, 0.06);
-      padding: 6px;
-      border-radius: 8px;
-      word-break: break-all;
-
-      p:last-child {
-        margin-bottom: 0;
-      }
-
-      code {
-        text-wrap: auto;
-      }
-
-      .spinIcon {
-        vertical-align: -0.5px;
-        margin-left: 3px;
-        font-size: 10px;
-        animation: spin 1.2s linear infinite;
-      }
-
-      @keyframes spin {
-        from {
-          transform: rotate(0deg);
-        }
-
-        to {
-          transform: rotate(360deg);
-        }
-      }
-    }
-
-    .plan {
-      width: 100%;
-
-      div {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
-  .messgaeEnd {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .anchor {
-    /* 放在列表最后的空节点 */
-    height: 1px;
-    /* 越小越好，仅作锚点 */
-    scroll-snap-align: end;
-    /* 关键：永远吸底 */
-  }
-}
-
-.plan {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #f3f3f3;
-  border-radius: 4px;
-}
-
-.bubbleContainer {
-  display: flex;
-  flex-direction: column;
-  color: #333;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 16px 16px 0;
-
-  .bubbleHeader {
-    display: flex;
-    align-items: center;
-    justify-content: start;
-    gap: 8px;
-    padding-bottom: 8px;
-
-    &:has(.userAvatar) {
-      justify-content: end;
-      flex-direction: row-reverse;
-    }
-
-    .bubbleHeaderAvatar {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      width: 20px;
-      height: 20px;
-      box-sizing: content-box;
-      border: 2px solid #ffffff;
-
-      .userAvatar {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-      }
-
-      .aiAvatar {
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-      }
-    }
-
-    .bubbleHeaderName {
-      font-size: 12px;
-      color: #999;
-    }
-  }
-}
-
-.messageContainer {
-  user-select: text;
-  width: 100%;
-  // font-size: 14px;
-  font-size: 12px;
-  border-radius: 12px;
-  padding: 0;
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.userMessage {
-  width: fit-content;
-  max-width: calc(100% - 16px);
-  align-self: flex-end;
-  align-items: end;
-  background: #ecf4ff;
-  border-radius: 4px;
-  padding: 8px;
-  border-color: transparent;
-}
-
-.markDown {
-  color: #333;
-  line-height: calc(1em + 8px);
-  word-break: break-word;
-
-  code {
-    text-wrap: auto;
-  }
-
-  .spinIcon {
-    vertical-align: -0.5px;
-    margin-left: 3px;
-    font-size: 10px;
-    animation: spin 1.2s linear infinite;
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.collapsibleCodeBlock {
-  background-color: #f3f3f3;
-  border-radius: 4px;
-  margin: 10px 0;
-  margin-top: 2px;
-  padding: 6px;
-  transition: all .4s cubic-bezier(.25, .8, .25, 1);
-  will-change: padding, height, transform;
-  transform-origin: top;
-  padding: 4px 8px;
-  transform: translateY(-1px);
-
-  .codeHeader {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    user-select: none;
-    border-radius: 4px;
-    min-height: 22px;
-    padding-bottom: 8px;
-    box-sizing: content-box;
-    transition: padding .4s cubic-bezier(.25, .8, .25, 1);
-    padding-bottom: 0;
-
-    .codeTitle {
-      margin: 0;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      color: currentColor;
-      font-weight: 400;
-    }
-
-    .codeTitleStatus {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-    }
-  }
-}

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 }

package/src/view/index.less

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

package/src/view/index.tsx

@@ -1,18 +0,0 @@
-import React from "react"
-import classNames from "classnames";
-import { Header, Sender } from "./components";
-import { Messages } from "../components/messages";
-import { context } from "../context";
-import css from "./index.less";
-
-const View = ({ user, copilot }: any) => {
-  return (
-    <div className={classNames(css.view)}>
-      <Header />
-      <Messages user={user} copilot={copilot} rxai={context.rxai}/>
-      <Sender />
-    </div>
-  )
-}
-
-export { View }