@mybricks/plugin-ai 0.0.1

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

@@ -0,0 +1,228 @@
+.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

@@ -0,0 +1,172 @@
+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

@@ -0,0 +1,44 @@
+.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

@@ -0,0 +1,62 @@
+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

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

package/src/view/index.tsx

@@ -0,0 +1,18 @@
+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 }