@mybricks/plugin-ai 0.0.1 → 0.0.2

package/src/components/messages/index.tsx

@@ -1,15 +1,17 @@
 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 markdownit from 'markdown-it'
+import { Extension } from "../types";
+import { Loading, Success, Chat } from "../icons";
+import { AttachmentsList } from "../attachments";
+import { MentionTag } from "../mention";
+import { Mention } from "../types";
+import { Sender, SenderRef, SenderProps } from "../sender";
+import { context } from "../../context";
 import css from "./index.less"
 
-const renderer = new marked.Renderer();
-renderer.paragraph = (paragraph) => {
-  return `<p>${paragraph.text}</p>`;
-};
-marked.use({ renderer });
+const md = markdownit()
 
 interface User {
   /** 名称 */
@@ -25,24 +27,65 @@ interface MessagesParams {
   copilot: User;
 
   rxai: Rxai;
+
+  onMentionClick?: (mention: Mention) => void;
+
+  onSend?: SenderProps['onSend'];
 }
 
 type Plans = Rxai['cacheMessages'];
 
 const Messages = (params: MessagesParams) => {
-  const { user, rxai, copilot } = params;
+  const { user, rxai, copilot, onSend, onMentionClick } = params;
 
+  const mainRef = useRef<HTMLElement>(null);
   const destroysRef = useRef<(() => void)[]>([]);
   const [plans, setPlans] = useState<Plans>([]);
 
+  const [styleTag] = useState(() => {
+    const styleTag = document.createElement('style')
+    document.head.appendChild(styleTag)
+    const prefix = `.${css['ai-chat-messages']} .${css['chat-bubble-container']}:nth-last-child(1)`;
+    return {
+      setStyle: (height: number) => {
+        styleTag.innerHTML = `${prefix} {
+          min-height: ${height - 1}px;
+        }`
+      },
+      remove: () => {
+        document.head.removeChild(styleTag);
+      }
+    };
+  })
+
   useLayoutEffect(() => {
     destroysRef.current.push(rxai.events.on('plan', (plans) => {
       setPlans([...plans])
     }, true))
+
+    styleTag.setStyle(mainRef.current!.clientHeight);
   }, [])
 
   useEffect(() => {
+    const autoScroller = new AutoScroller(mainRef.current!, {
+      resizeObserverCallback: () => {
+        const height = mainRef.current?.clientHeight;
+        if (height && height > 0) {
+          styleTag.setStyle(height)
+        }
+      },
+      mutationCallback: (mutations) => {
+        const mutationRecord = mutations[0];
+
+        if (mutationRecord.target === mainRef.current && mutationRecord.addedNodes.length) {
+          mainRef.current!.scrollTop = mainRef.current!.scrollHeight;
+        }
+      }
+    });
+  
     return () => {
+      autoScroller.destroy();
+
       for (const destroy of destroysRef.current) {
         destroy()
       }
@@ -50,46 +93,74 @@ const Messages = (params: MessagesParams) => {
   }, [])
 
   return (
-    <main className={css['ai-chat-messages']}>
+    <main ref={mainRef} className={css['ai-chat-messages']}>
       {plans.map((plan, index) => {
-        return <Bubble key={index} user={user} plan={plan} copilot={copilot} />
+        return (
+          <Bubble
+            key={plan.id}
+            user={user}
+            plan={plan}
+            copilot={copilot}
+            onSend={onSend}
+            onMentionClick={onMentionClick}
+          />
+        )
       })}
-      <div className={css['anchor']} />
     </main>
   )
 }
 
 type Plan = Rxai['cacheMessages'][number];
 
-type UserFriendlyMessages = Plan['userFriendlyMessages'];
-
 interface BubbleParams {
   user: User;
   copilot: User;
   plan: Plan;
+  onSend?: SenderProps['onSend'];
+  onMentionClick?: (mention: Mention) => void;
 }
 const Bubble = (params: BubbleParams) => {
-  const { user, plan, copilot } = params;
+  const { user, plan, copilot, onSend, onMentionClick } = params;
+  const [userMessage, setUserMessage] = useState<ReturnType<Plan['getUserMessage']>>();
+  const destroysRef = useRef<(() => void)[]>([]);
 
-  const [messages, setMessages] = useState<UserFriendlyMessages>([])
-  const [message, setMessage] = useState("")
-  const [loading, setLoading] = useState(true)
+  useLayoutEffect(() => {
+    destroysRef.current.push(
+      plan.events.on('userMessage', (userMessage) => {
+        setUserMessage(userMessage);
+      }),
+    )
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      for (const destroy of destroysRef.current) {
+        destroy()
+      }
+    }
+  }, [])
+
+  return userMessage && (
+    <div className={css['chat-bubble-container']}>
+      <BubbleUser user={user} message={userMessage} plan={plan} onMentionClick={onMentionClick}/>
+      <BubbleCopilot copilot={copilot} plan={plan}/>
+      <BubbleAction plan={plan} onSend={onSend}/>
+    </div>
+  )
+}
+
+const BubbleAction = (props: { plan: Plan, onSend?: SenderProps['onSend']; }) => {
+  const { plan, onSend } = props;
 
   const destroysRef = useRef<(() => void)[]>([]);
+  const [status, setStatus] = useState<Plan['status']>();
+  const [showRender, setShowRender] = useState(false);
+  const senderRef = useRef<SenderRef>(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: UserFriendlyMessages) => {
-        setMessages([...messages])
-        setMessage("")
+      plan.events.on('status', (status) => {
+        setStatus(status)
       }, true),
     )
   }, [])
@@ -102,10 +173,39 @@ const Bubble = (params: BubbleParams) => {
     }
   }, [])
 
+  useEffect(() => {
+    if (showRender) {
+      senderRef.current!.setMentions((plan.extension as any).mentions || []);
+      senderRef.current!.focus();
+    }
+  }, [showRender])
+
   return (
     <>
-      {messages[0] && <BubbleUser user={user} message={messages[0]} />}
-      {messages[0] && <BubbleCopilot messages={messages.slice(1)} copilot={copilot} message={message} loading={loading} />}
+      <div className={css['chat-bubble-action']}>
+        {/* TODO 兼容处理，没有pageId，不允许追加 */}
+        {status !== "pending" && onSend && (plan.extension as any).mentions?.[0]?.pageId &&  <div
+          className={classNames(css['chat-bubble-action-chat'], {
+            [css['focus']]: showRender
+          })}
+          data-mybricks-tip={"基于本次回答继续对话"}
+          onClick={() => {
+            setShowRender(!showRender);
+          }}
+        >
+          <Chat />
+        </div>}
+      </div>
+      {showRender && (
+        <Sender
+          ref={senderRef}
+          placeholder={`您好，我是${context.name}，请详细描述您的需求`}
+          onSend={(params) => {
+            onSend!({...params, insertAfter: plan});
+            setShowRender(false);
+          }}
+        />
+      )}
     </>
   )
 }
@@ -118,7 +218,7 @@ const BubbleMessage = (params: BubbleMessageParams) => {
   const messageRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    messageRef.current!.innerHTML = marked.parse(message) as string;
+    messageRef.current!.innerHTML = md.render(message);
   }, [message])
 
   return <span ref={messageRef} />
@@ -126,11 +226,31 @@ const BubbleMessage = (params: BubbleMessageParams) => {
 
 interface BubbleUserParams {
   user: User;
-  message: UserFriendlyMessages[number]
+  message: ReturnType<Plan['getUserMessage']>
+  plan: Plan;
+  onMentionClick?: (mention: Mention) => void;
 }
 
 const BubbleUser = (params: BubbleUserParams) => {
-  const { user, message } = params;
+  const { user, message, plan, onMentionClick } = params;
+  const mentions = (plan.extension as Extension)?.mentions || [];
+  let content = "";
+  let attachments: Plan["options"]["attachments"] = [];
+
+  if (typeof message.content === "string") {
+    content = message.content
+  } else {
+    message.content.forEach((item: any) => {
+      if (item.type === "text") {
+        content = item.text
+      } else if (item.type === "image_url") {
+        attachments.push({
+          type: "image",
+          content: item.image_url.url
+        });
+      }
+    })
+  }
 
   return (
     <article className={css['chat-bubble']}>
@@ -140,14 +260,18 @@ const BubbleUser = (params: BubbleUserParams) => {
         </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 className={classNames(css['chat-message-container'], css['user-message'], {
+        [css['mention']]: mentions.length
+      })}>
+        {mentions.length ? (
+          <MentionTag mention={mentions[0]} focusarea={true} onClick={onMentionClick}/>
+        ) : null}
+        <span>
+          {content}
+        </span>
+        {attachments.length ? (
+          <AttachmentsList className={css['attachments-list']} attachments={attachments}/>
+        ) : null}
       </section>
     </article>
   )
@@ -155,36 +279,81 @@ const BubbleUser = (params: BubbleUserParams) => {
 
 interface BubbleCopilotParams {
   copilot: User;
-  messages: UserFriendlyMessages;
-  message: string;
-  loading: boolean;
+  plan: Plan;
 }
 const BubbleCopilot = (params: BubbleCopilotParams) => {
-  const { messages, copilot, message, loading } = params;
+  const { copilot, plan } = params;
+  const destroysRef = useRef<(() => void)[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [streamMessage, setStreamMessage] = useState("");
+  const [summary, setSummary] = useState("");
+  const [commands, setCommands] = useState<Plan['commands']>([]);
+  const [error, setError] = useState("");
+  const [planningMessage, setPlanningMessage] = useState("")
+
+  useLayoutEffect(() => {
+    destroysRef.current.push(
+      plan.events.on('loading', (loading) => {
+        setLoading(loading);
+      }),
+      plan.events.on('streamMessage', (chunk) => {
+        setStreamMessage((streamMessage) => {
+          return streamMessage + chunk
+        });
+      }),
+      plan.events.on('summary', (summary) => {
+        setSummary(summary);
+      }),
+      plan.events.on('commands', (commands) => {
+        setCommands([...commands]);
+        setStreamMessage("");
+      }),
+      plan.events.on('error', (error) => {
+        setError(error);
+      }),
+      plan.events.on('planningMessage', (planningMessage) => {
+        setPlanningMessage(planningMessage);
+      })
+    )
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      for (const destroy of destroysRef.current) {
+        destroy()
+      }
+    }
+  }, [])
 
   return (
     <article className={css['chat-bubble']}>
       <header className={css['chat-bubble-header']}>
-        <span className={css['chat-bubble-header-avatar']}>
+        {/* <span className={css['chat-bubble-header-avatar']}>
           <img className={css['copilot-avatar']} src={copilot.avatar} />
-        </span>
+        </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} />
+        <div className={css['markdown-body']}>
+          <div className={css['think']}>
+            {planningMessage ? <BubbleMessage message={`${planningMessage}${loading ? "..." : ""}`} /> : (loading ? <span>正在思考</span> : null)}
+            {loading && !planningMessage && <Loading />}
+          </div>
+          {commands.map((command, index) => {
+            if (!command.status || command.status === "error") {
+              return null;
             }
-            return <BubbleMessage message={message.content} />
+            return <BubbleCopilotTool key={index + command.status} command={command} last={index === commands.length - 1}/>
           })}
-          {message && <BubbleMessage message={message} />}
-          {!message && loading && (
+          {error && <BubbleError message={error} plan={plan}/>}
+          {summary && <BubbleMessage message={summary} />}
+          {/* {streamMessage && <BubbleMessage message={streamMessage} />} */}
+          {/* {!streamMessage && loading && (
             <div className={css['think']}>
               <span>正在思考</span>
               <Loading />
             </div>
-          )}
+          )} */}
         </div>
       </section>
     </article>
@@ -192,45 +361,159 @@ const BubbleCopilot = (params: BubbleCopilotParams) => {
 }
 
 interface BubbleCopilotToolParams {
-  message: {
-    type: "tool";
-    status: "pending" | "success" | "error" | "aborted";
-    content: {
-      name: string;
-      displayName: string;
-    }
-  }
+  command: Plan['commands'][number];
+  last: boolean;
 }
 const BubbleCopilotTool = (params: BubbleCopilotToolParams) => {
-  const { message } = params;
+  const { command, last } = params;
+  const [message, setMessage] = useState("");
+  const [expand, setExpand] = useState(false);
+
+  useEffect(() => {
+    if (command.status === "success") {
+      setMessage(command.content.display || command.content.llm)
+      if (last) {
+        setExpand(true)
+      }
+    }
+    const destory = command.events?.on("streamMessage", ({ message, status }) => {
+      setMessage(message)
+      if (status === "start") {
+        setExpand(true)
+      } else if (status === "complete") {
+        if (!last) {
+          setExpand(false)
+        }
+      }
+    })
+
+    return () => {
+      destory?.();
+    }
+  }, [])
+
+  const renderMessage = (shouldRender: boolean) =>
+    shouldRender && message ? (
+      <div
+        className={css['ai-chat-collapsible-response']}
+        style={{ display: expand ? "block" : "none" }}
+      >
+        <BubbleMessage message={message} />
+      </div>
+    ) : null;
 
   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>
+    <>
+      {renderMessage(command.status === "pending")}
+      <div
+        className={classNames(css['ai-chat-collapsible-code-block'], css['collapsed'])}
+        onClick={() => {
+          if (command.status !== "pending") {
+            setExpand((expand) => !expand);
+          }
+        }}
+      >
+        <span className={classNames(css['code-header'], css['collapsed'])}>
+          <span className={classNames(css['code-title'], css['collapsed'])}>{command.tool.displayName || command.tool.name}</span>
+          {command.status === "pending" && (
+            <span className={classNames(css['code-title-status'], css['collapsed'], css['pending'])}>
+              <Loading />
+            </span>
+          )}
+          {command.status === "success" && (
+            <span className={classNames(css['code-title-status'], css['collapsed'], css['success'])}>
+              <Success />
+            </span>
+          )}
+        </span>
+      </div>
+      {renderMessage(command.status === "success")}
+    </>
+  )
+}
+
+interface BubbleErrorParams {
+  message: string;
+  plan: Plan;
+}
+const BubbleError = (params: BubbleErrorParams) => {
+  const { message, plan } = params;
+
+  return (
+    <div className={css['ai-chat-error-code-block']}>
+      <div className={css['ai-chat-error-code-block-message']}>
+        <span>{message}</span>
+      </div>
+      {!plan.enableRetry ? null : (
+        <div
+          className={css['ai-chat-error-code-block-retry']}
+          onClick={() => plan.retry()}
+        >重试</div>
+      )}
     </div>
   )
 }
 
 export { Messages }
+
+class AutoScroller {
+  private isLockedToBottom: boolean = true;
+  private resizeObserver: ResizeObserver | null = null;
+  private mutationObserver: MutationObserver | null = null;
+  constructor(private container: HTMLElement, private options: { resizeObserverCallback: ResizeObserverCallback, mutationCallback: MutationCallback }) {
+    this.isLockedToBottom = true;
+    
+    this.init();
+  }
+  
+  init() {
+    // 监听滚动事件
+    this.container.addEventListener('scroll', this.handleScroll.bind(this));
+    
+    // 使用ResizeObserver监听内容大小变化
+    this.resizeObserver = new ResizeObserver((entries, observer) => {
+      if (this.isLockedToBottom) {
+        this.scrollToBottom();
+      }
+      this.options.resizeObserverCallback(entries, observer);
+    });
+    
+    // 监听容器内部元素大小变化
+    this.resizeObserver.observe(this.container);
+    
+    // 同时监听DOM变化
+    this.mutationObserver = new MutationObserver((mutations, observer) => {
+      if (this.isLockedToBottom) {
+        Promise.resolve().then(() => {
+          this.scrollToBottom();
+        });
+      }
+      this.options.mutationCallback(mutations, observer);
+    });
+    
+    this.mutationObserver.observe(this.container, {
+      childList: true,
+      subtree: true,
+    });
+  }
+  
+  handleScroll() {
+    const isAtBottom = this.isAtBottom();
+    this.isLockedToBottom = isAtBottom;
+  }
+  
+  isAtBottom(threshold = 5) {
+    const { scrollTop, scrollHeight, clientHeight } = this.container;
+    return Math.abs(scrollHeight - scrollTop - clientHeight) <= threshold;
+  }
+  
+  scrollToBottom() {
+    this.container.scrollTop = this.container.scrollHeight;
+  }
+  
+  destroy() {
+    if (this.mutationObserver) this.mutationObserver.disconnect();
+    if (this.resizeObserver) this.resizeObserver.disconnect();
+    this.container.removeEventListener('scroll', this.handleScroll);
+  }
+}