@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/AGUI/components/chat/Suggestions.tsx

@@ -0,0 +1,20 @@
+import { Suggestion } from "./Suggestion";
+import React from "react";
+import { RenderSuggestionsListProps } from "./props";
+
+export function Suggestions({ suggestions, onSuggestionClick }: RenderSuggestionsListProps) {
+  return (
+    <div className="suggestions">
+      {suggestions.map((suggestion, index) => (
+        <Suggestion
+          key={index}
+          title={suggestion.title}
+          message={suggestion.message}
+          partial={suggestion.partial}
+          className={suggestion.className}
+          onClick={() => onSuggestionClick(suggestion.message)}
+        />
+      ))}
+    </div>
+  );
+}

package/components/AGUI/components/chat/Textarea.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+
+interface AutoResizingTextareaProps {
+  maxRows?: number;
+  placeholder?: string;
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  autoFocus?: boolean;
+}
+
+const AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextareaProps>(
+  ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {
+    const internalTextareaRef = useRef<HTMLTextAreaElement>(null);
+    const [maxHeight, setMaxHeight] = useState<number>(0);
+
+    useImperativeHandle(ref, () => internalTextareaRef.current as HTMLTextAreaElement);
+
+    useEffect(() => {
+      const calculateMaxHeight = () => {
+        const textarea = internalTextareaRef.current;
+        if (textarea) {
+          textarea.style.height = "auto";
+          const singleRowHeight = textarea.scrollHeight;
+          setMaxHeight(singleRowHeight * maxRows);
+          if (autoFocus) {
+            textarea.focus();
+          }
+        }
+      };
+
+      calculateMaxHeight();
+    }, [maxRows]);
+
+    useEffect(() => {
+      const textarea = internalTextareaRef.current;
+      if (textarea) {
+        textarea.style.height = "auto";
+        textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
+      }
+    }, [value, maxHeight]);
+
+    return (
+      <textarea
+        ref={internalTextareaRef}
+        value={value}
+        onChange={onChange}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        style={{
+          overflow: "auto",
+          resize: "none",
+          maxHeight: `${maxHeight}px`,
+        }}
+        rows={1}
+      />
+    );
+  },
+);
+
+export default AutoResizingTextarea;

package/components/AGUI/components/chat/Window.tsx

@@ -0,0 +1,152 @@
+import React, { useCallback, useEffect } from "react";
+import { WindowProps } from "./props";
+import { useChatContext } from "./ChatContext";
+import { useCopilotContext } from "@copilotkit/react-core";
+import { isMacOS } from "@copilotkit/shared";
+
+export const Window = ({
+  children,
+  clickOutsideToClose,
+  shortcut,
+  hitEscapeToClose,
+}: WindowProps) => {
+  const windowRef = React.useRef<HTMLDivElement>(null);
+  const context = useCopilotContext();
+
+  const { open, setOpen } = useChatContext();
+
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (!clickOutsideToClose) {
+        return;
+      }
+
+      const parentElement = windowRef.current?.parentElement;
+
+      let className = "";
+      if (event.target instanceof HTMLElement) {
+        className = event.target.className;
+      }
+
+      if (
+        open &&
+        parentElement &&
+        !parentElement.contains(event.target as any) &&
+        // prevent closing the window when clicking on the debug menu
+        !className.includes("copilotKitDebugMenu")
+      ) {
+        setOpen(false);
+      }
+    },
+    [clickOutsideToClose, open, setOpen],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement;
+      const isInput =
+        target.tagName === "INPUT" ||
+        target.tagName === "SELECT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable;
+
+      const isDescendantOfWrapper = windowRef.current?.contains(target);
+
+      if (
+        open &&
+        event.key === "Escape" &&
+        (!isInput || isDescendantOfWrapper) &&
+        hitEscapeToClose
+      ) {
+        setOpen(false);
+      } else if (
+        event.key === shortcut &&
+        ((isMacOS() && event.metaKey) || (!isMacOS() && event.ctrlKey)) &&
+        (!isInput || isDescendantOfWrapper)
+      ) {
+        setOpen(!open);
+      }
+    },
+    [hitEscapeToClose, shortcut, open, setOpen],
+  );
+
+  const adjustForMobile = useCallback(() => {
+    const copilotKitWindow = windowRef.current;
+    const vv = window.visualViewport;
+    if (!copilotKitWindow || !vv) {
+      return;
+    }
+
+    if (window.innerWidth < 640 && open) {
+      copilotKitWindow.style.height = `${vv.height}px`;
+      copilotKitWindow.style.left = `${vv.offsetLeft}px`;
+      copilotKitWindow.style.top = `${vv.offsetTop}px`;
+
+      document.body.style.position = "fixed";
+      document.body.style.width = "100%";
+      document.body.style.height = `${window.innerHeight}px`;
+      document.body.style.overflow = "hidden";
+      document.body.style.touchAction = "none";
+
+      // Prevent scrolling on iOS
+      document.body.addEventListener("touchmove", preventScroll, {
+        passive: false,
+      });
+    } else {
+      copilotKitWindow.style.height = "";
+      copilotKitWindow.style.left = "";
+      copilotKitWindow.style.top = "";
+      document.body.style.position = "";
+      document.body.style.height = "";
+      document.body.style.width = "";
+      document.body.style.overflow = "";
+      document.body.style.top = "";
+      document.body.style.touchAction = "";
+
+      document.body.removeEventListener("touchmove", preventScroll);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", adjustForMobile);
+      adjustForMobile();
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", adjustForMobile);
+      }
+    };
+  }, [adjustForMobile, handleClickOutside, handleKeyDown]);
+
+  return (
+    <div className={`copilotKitWindow ${open ? " open" : ""}`} ref={windowRef}>
+      {children}
+    </div>
+  );
+};
+
+const preventScroll = (event: TouchEvent): void => {
+  let targetElement = event.target as Element;
+
+  // Function to check if the target has the parent with a given class
+  const hasParentWithClass = (element: Element, className: string): boolean => {
+    while (element && element !== document.body) {
+      if (element.classList.contains(className)) {
+        return true;
+      }
+      element = element.parentElement!;
+    }
+    return false;
+  };
+
+  // Check if the target of the touch event is inside an element with the 'copilotKitMessages' class
+  if (!hasParentWithClass(targetElement, "copilotKitMessages")) {
+    event.preventDefault();
+  }
+};

package/components/AGUI/components/chat/index.tsx

@@ -0,0 +1,11 @@
+export * from "./props";
+export { CopilotPopup } from "./Popup";
+export { CopilotSidebar } from "./Sidebar";
+export { CopilotChat } from "./Chat";
+export { Markdown } from "./Markdown";
+export { AssistantMessage } from "./messages/AssistantMessage";
+export { UserMessage } from "./messages/UserMessage";
+export { useChatContext } from "./ChatContext";
+export { RenderImageMessage } from "./messages/RenderImageMessage";
+export { Suggestions as RenderSuggestionsList } from "./Suggestions";
+export { Suggestion as RenderSuggestion } from "./Suggestion";

package/components/AGUI/components/chat/messages/AssistantMessage.tsx

@@ -0,0 +1,69 @@
+import { AssistantMessageProps } from "../props";
+import { Bubble } from "@agentscope-ai/chat";
+import compact from 'lodash/compact'
+
+export const AssistantMessage = (props: AssistantMessageProps) => {
+  if (props.subComponent) return props.subComponent;
+
+  const hasThink = props.rawData.content?.includes('<think>');
+  const msgStatus = props.isCurrentMessage && props.isGenerating ? "generating" : void 0;
+
+  if (!hasThink) return <Bubble
+    role="assistant"
+    content={props.rawData.content}
+    id={props.rawData.id}
+    msgStatus={msgStatus}
+  ></Bubble>;
+
+  const hasThinkEnd = props.rawData.content.includes('</think>');
+
+  const { content, think } = parseThinkContentIf(props.rawData.content);
+
+  return <Bubble
+    role="assistant"
+    cards={compact([
+      hasThink && {
+        code: 'DeepThink',
+        data: {
+          title: 'AI思考',
+          loading: !hasThinkEnd,
+          content: think,
+        },
+      },
+      {
+        code: 'Text',
+        data: {
+          content: content,
+          msgStatus: msgStatus
+        },
+      }
+    ])}
+    id={props.rawData.id}
+    msgStatus={msgStatus}
+  ></Bubble>;
+};
+
+function parseThinkContentIf(content) {
+  const reg0 = /<think>([\s\S]*?)<\/think>/g;
+  const reg1 = /<think>([\s\S]*)/g;
+
+
+
+  const reg0Result = content.match(reg0);
+  if (reg0Result) return {
+    think: reg0Result[0].replace(/<think>/, '').replace(/<\/think>/g, ''),
+    content: content.replace(reg0Result[0], '')
+  }
+
+  const reg1Result = content.match(reg1);
+
+  if (reg1Result) return {
+    think: reg1Result[0].replace(/<think>/, ''),
+    content: content.replace(reg1Result[0], '')
+  }
+
+  return {
+    think: '',
+    content
+  }
+}

package/components/AGUI/components/chat/messages/RenderActionExecutionMessage.tsx

@@ -0,0 +1,129 @@
+import { MessageStatusCode } from "@copilotkit/runtime-client-gql";
+import { RenderMessageProps } from "../props";
+import { RenderFunctionStatus, useCopilotContext } from "@copilotkit/react-core";
+import { AssistantMessage as DefaultAssistantMessage } from "./AssistantMessage";
+
+export function RenderActionExecutionMessage({
+  AssistantMessage = DefaultAssistantMessage,
+  ...props
+}: RenderMessageProps) {
+  const { chatComponentsCache } = useCopilotContext();
+  const { message, inProgress, index, isCurrentMessage, actionResult } = props;
+
+  if (message.isActionExecutionMessage()) {
+    if (
+      chatComponentsCache.current !== null &&
+      (chatComponentsCache.current.actions[message.name] ||
+        chatComponentsCache.current.actions["*"])
+    ) {
+      const render =
+        chatComponentsCache.current.actions[message.name] ||
+        chatComponentsCache.current.actions["*"];
+      // render a static string
+      if (typeof render === "string") {
+
+        // when render is static, we show it only when in progress
+        if (isCurrentMessage && inProgress) {
+          return (
+            <AssistantMessage
+              rawData={message}
+              key={index}
+              data-message-role="assistant"
+              isLoading={false}
+              isGenerating={true}
+              message={render}
+            />
+          );
+        }
+        // Done - silent by default to avoid a series of "done" messages
+        else {
+          return null;
+        }
+      }
+      // render is a function
+      else {
+        const args = message.arguments;
+
+        let status: RenderFunctionStatus = "inProgress";
+
+        if (actionResult !== undefined) {
+          status = "complete";
+        } else if (message.status.code !== MessageStatusCode.Pending) {
+          status = "executing";
+        }
+
+        try {
+          const toRender = render({
+            status: status as any, // Cast to any as RenderFunctionStatus is a union that can be complex to narrow here
+            args,
+            result: actionResult,
+            name: message.name,
+            messageId: message.id, // Pass messageId for HITL action correlation
+          } as any);
+
+          // No result and complete: stay silent
+          if (!toRender && status === "complete") {
+            return null;
+          }
+          if (typeof toRender === "string") {
+            return (
+              <AssistantMessage
+                rawData={message}
+                data-message-role="assistant"
+                key={index}
+                isLoading={false}
+                isGenerating={false}
+                message={toRender}
+              />
+            );
+          } else {
+            return (
+              <AssistantMessage
+                rawData={message}
+                data-message-role="action-render"
+                key={index}
+                isLoading={false}
+                isGenerating={false}
+                subComponent={toRender}
+              />
+            );
+          }
+        } catch (e) {
+          // It's useful to log this error for developers to debug their custom render functions
+          console.error(`Error executing render function for action ${message.name}: ${e}`);
+          return (
+            <AssistantMessage
+              rawData={message}
+              data-message-role="assistant"
+              key={index}
+              isLoading={false}
+              isGenerating={false}
+              subComponent={
+                <div className="copilotKitMessage copilotKitAssistantMessage">
+                  <b>❌ Error executing render function for action {message.name}:</b>
+                  <pre>{e instanceof Error ? e.message : String(e)}</pre>
+                </div>
+              }
+            />
+          );
+        }
+      }
+    }
+    // No render function found- show the default message
+    else if (!inProgress || !isCurrentMessage) {
+      // Done - silent by default to avoid a series of "done" messages
+      return null;
+    } else {
+      // In progress
+      return (
+        <AssistantMessage
+          rawData={message}
+          key={index}
+          data-message-role="assistant"
+          isLoading={true}
+          isGenerating={true}
+        />
+      );
+    }
+  }
+}

package/components/AGUI/components/chat/messages/RenderAgentStateMessage.tsx

@@ -0,0 +1,116 @@
+import { RenderMessageProps } from "../props";
+import { CoagentInChatRenderFunction, useCopilotContext } from "@copilotkit/react-core";
+import { AssistantMessage as DefaultAssistantMessage } from "./AssistantMessage";
+
+export function RenderAgentStateMessage({
+  AssistantMessage = DefaultAssistantMessage,
+  ...props
+}: RenderMessageProps) {
+  const { chatComponentsCache } = useCopilotContext();
+  const { message, inProgress, index, isCurrentMessage } = props;
+
+  if (message.isAgentStateMessage()) {
+    let render: string | CoagentInChatRenderFunction | undefined;
+
+    if (chatComponentsCache.current !== null) {
+      render =
+        chatComponentsCache.current.coAgentStateRenders[
+          `${message.agentName}-${message.nodeName}`
+        ] || chatComponentsCache.current.coAgentStateRenders[`${message.agentName}-global`];
+    }
+
+    if (render) {
+      // render a static string
+      if (typeof render === "string") {
+        // when render is static, we show it only when in progress
+        if (isCurrentMessage && inProgress) {
+          return (
+            <AssistantMessage
+              rawData={message}
+              message={render}
+              data-message-role="assistant"
+              key={index}
+              isLoading={true}
+              isGenerating={true}
+            />
+          );
+        }
+        // Done - silent by default to avoid a series of "done" messages
+        else {
+          return null;
+        }
+      }
+      // render is a function
+      else {
+        const state = message.state;
+
+        let status = message.active ? "inProgress" : "complete";
+
+        const toRender = render({
+          status: status as any,
+          state,
+          nodeName: message.nodeName,
+        });
+
+        // No result and complete: stay silent
+        if (!toRender && status === "complete") {
+          return null;
+        }
+
+        if (!toRender && isCurrentMessage && inProgress) {
+          return (
+            <AssistantMessage
+              data-message-role="assistant"
+              key={index}
+              rawData={message}
+              isLoading={true}
+              isGenerating={true}
+            />
+          );
+        } else if (!toRender) {
+          return null;
+        }
+
+        if (typeof toRender === "string") {
+          return (
+            <AssistantMessage
+              rawData={message}
+              message={toRender}
+              isLoading={true}
+              isGenerating={true}
+              data-message-role="assistant"
+              key={index}
+            />
+          );
+        } else {
+          return (
+            <AssistantMessage
+              rawData={message}
+              data-message-role="agent-state-render"
+              key={index}
+              isLoading={false}
+              isGenerating={false}
+              subComponent={toRender}
+            />
+          );
+        }
+      }
+    }
+    // No render function found- show the default message
+    else if (!inProgress || !isCurrentMessage) {
+      // Done - silent by default to avoid a series of "done" messages
+      return null;
+    } else {
+      // In progress
+      return (
+        <AssistantMessage
+          rawData={message}
+          isLoading={true}
+          isGenerating={true}
+          data-message-role="assistant"
+          key={index}
+        />
+      );
+    }
+  }
+}

package/components/AGUI/components/chat/messages/RenderImageMessage.tsx

@@ -0,0 +1,64 @@
+import { RenderMessageProps } from "../props";
+import { UserMessage as DefaultUserMessage } from "./UserMessage";
+import { AssistantMessage as DefaultAssistantMessage } from "./AssistantMessage";
+
+export function RenderImageMessage({
+  UserMessage = DefaultUserMessage,
+  AssistantMessage = DefaultAssistantMessage,
+  ...props
+}: RenderMessageProps) {
+  const {
+    message,
+    inProgress,
+    index,
+    isCurrentMessage,
+    onRegenerate,
+    onCopy,
+    onThumbsUp,
+    onThumbsDown,
+  } = props;
+
+  if (message.isImageMessage()) {
+    const imageData = `data:${message.format};base64,${message.bytes}`;
+    const imageComponent = (
+      <div className="copilotKitImage">
+        <img
+          src={imageData}
+          alt="User uploaded image"
+          style={{ maxWidth: "100%", maxHeight: "300px", borderRadius: "8px" }}
+        />
+      </div>
+    );
+
+    if (message.role === "user") {
+      return (
+        <UserMessage
+          key={index}
+          data-message-role="user"
+          message=""
+          rawData={message}
+          subComponent={imageComponent}
+        />
+      );
+    } else if (message.role === "assistant") {
+      return (
+        <AssistantMessage
+          key={index}
+          data-message-role="assistant"
+          message=""
+          rawData={message}
+          subComponent={imageComponent}
+          isLoading={inProgress && isCurrentMessage && !message.bytes}
+          isGenerating={inProgress && isCurrentMessage && !!message.bytes}
+          isCurrentMessage={isCurrentMessage}
+          onRegenerate={() => onRegenerate?.(message.id)}
+          onCopy={onCopy}
+          onThumbsUp={onThumbsUp}
+          onThumbsDown={onThumbsDown}
+        />
+      );
+    }
+  }
+
+  return null;
+}

package/components/AGUI/components/chat/messages/RenderResultMessage.tsx

@@ -0,0 +1,26 @@
+import { RenderMessageProps } from "../props";
+import { AssistantMessage as DefaultAssistantMessage } from "./AssistantMessage";
+
+export function RenderResultMessage({
+  AssistantMessage = DefaultAssistantMessage,
+  ...props
+}: RenderMessageProps) {
+  const { message, inProgress, index, isCurrentMessage } = props;
+
+  if (message.isResultMessage() && inProgress && isCurrentMessage) {
+    return (
+      <AssistantMessage
+        key={index}
+        data-message-role="assistant"
+        rawData={message}
+        isLoading={true}
+        isGenerating={true}
+      />
+    );
+  }
+
+  // Avoid 'Nothing was returned from render' React error
+  else {
+    return null;
+  }
+}