@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/AGUI/components/chat/Messages.tsx

@@ -0,0 +1,259 @@
+import { useEffect, useMemo, useRef } from "react";
+import { MessagesProps } from "./props";
+import { useChatContext } from "./ChatContext";
+import { Message, ResultMessage, TextMessage, Role } from "@copilotkit/runtime-client-gql";
+import { useLangGraphInterruptRender } from "@copilotkit/react-core";
+import { Bubble } from "@agentscope-ai/chat";
+
+export const Messages = ({
+  messages,
+  inProgress,
+  children,
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+  RenderImageMessage,
+  AssistantMessage,
+  UserMessage,
+  onRegenerate,
+  onCopy,
+  onThumbsUp,
+  onThumbsDown,
+  markdownTagRenderers,
+}: MessagesProps) => {
+  const actionResults: Record<string, string> = {};
+
+  for (let i = 0; i < messages.length; i++) {
+    if (messages[i].isActionExecutionMessage()) {
+      const id = messages[i].id;
+      const resultMessage: ResultMessage | undefined = messages.find(
+        (message) => message.isResultMessage() && message.actionExecutionId === id,
+      ) as ResultMessage | undefined;
+
+      if (resultMessage) {
+        actionResults[id] = ResultMessage.decodeResult(resultMessage.result || "");
+      }
+    }
+  }
+
+
+  return <Bubble.List
+    style={{ height: 0, flex: 1, }}
+  >
+
+    {
+      messages.map((message, index) => {
+        const isCurrentMessage = index === messages.length - 1;
+
+        if (message.isTextMessage()) {
+          return (
+            <RenderTextMessage
+              key={message.id}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+              AssistantMessage={AssistantMessage}
+              UserMessage={UserMessage}
+              onRegenerate={onRegenerate}
+              onCopy={onCopy}
+              onThumbsUp={onThumbsUp}
+              onThumbsDown={onThumbsDown}
+              markdownTagRenderers={markdownTagRenderers}
+            />
+          );
+        } else if (message.isActionExecutionMessage()) {
+          return (
+            <RenderActionExecutionMessage
+              key={index}
+              message={message}
+              inProgress={inProgress}
+              index={index}
+              isCurrentMessage={isCurrentMessage}
+              actionResult={actionResults[message.id]}
+              AssistantMessage={AssistantMessage}
+              UserMessage={UserMessage}
+            />
+          );
+        }
+
+
+
+        return null;
+
+      })
+    }
+  </Bubble.List>
+
+  // return (
+  //   <div className="copilotKitMessages" ref={messagesContainerRef}>
+  //     <div className="copilotKitMessagesContainer">
+  //       {messages.map((message, index) => {
+  //         const isCurrentMessage = index === messages.length - 1;
+
+  //         if (message.isTextMessage()) {
+  //           return (
+  //             <RenderTextMessage
+  //               key={index}
+  //               message={message}
+  //               inProgress={inProgress}
+  //               index={index}
+  //               isCurrentMessage={isCurrentMessage}
+  //               AssistantMessage={AssistantMessage}
+  //               UserMessage={UserMessage}
+  //               onRegenerate={onRegenerate}
+  //               onCopy={onCopy}
+  //               onThumbsUp={onThumbsUp}
+  //               onThumbsDown={onThumbsDown}
+  //               markdownTagRenderers={markdownTagRenderers}
+  //             />
+  //           );
+  //         } else if (message.isActionExecutionMessage()) {
+  //           return (
+  //             <RenderActionExecutionMessage
+  //               key={index}
+  //               message={message}
+  //               inProgress={inProgress}
+  //               index={index}
+  //               isCurrentMessage={isCurrentMessage}
+  //               actionResult={actionResults[message.id]}
+  //               AssistantMessage={AssistantMessage}
+  //               UserMessage={UserMessage}
+  //             />
+  //           );
+  //         } else if (message.isAgentStateMessage()) {
+  //           return (
+  //             <RenderAgentStateMessage
+  //               key={index}
+  //               message={message}
+  //               inProgress={inProgress}
+  //               index={index}
+  //               isCurrentMessage={isCurrentMessage}
+  //               AssistantMessage={AssistantMessage}
+  //               UserMessage={UserMessage}
+  //             />
+  //           );
+  //         } else if (message.isResultMessage()) {
+  //           return (
+  //             <RenderResultMessage
+  //               key={index}
+  //               message={message}
+  //               inProgress={inProgress}
+  //               index={index}
+  //               isCurrentMessage={isCurrentMessage}
+  //               AssistantMessage={AssistantMessage}
+  //               UserMessage={UserMessage}
+  //             />
+  //           );
+  //         } else if (message.isImageMessage && message.isImageMessage()) {
+  //           return (
+  //             <RenderImageMessage
+  //               key={index}
+  //               message={message}
+  //               inProgress={inProgress}
+  //               index={index}
+  //               isCurrentMessage={isCurrentMessage}
+  //               AssistantMessage={AssistantMessage}
+  //               UserMessage={UserMessage}
+  //               onRegenerate={onRegenerate}
+  //               onCopy={onCopy}
+  //               onThumbsUp={onThumbsUp}
+  //               onThumbsDown={onThumbsDown}
+  //             />
+  //           );
+  //         }
+  //       })}
+  //       {interrupt}
+  //     </div>
+
+  //   </div>
+  // );
+};
+
+function makeInitialMessages(initial?: string | string[]): Message[] {
+  let initialArray: string[] = [];
+  if (initial) {
+    if (Array.isArray(initial)) {
+      initialArray.push(...initial);
+    } else {
+      initialArray.push(initial);
+    }
+  }
+
+  return initialArray.map(
+    (message) =>
+      new TextMessage({
+        role: Role.Assistant,
+        content: message,
+      }),
+  );
+}
+
+export function useScrollToBottom(messages: any[]) {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement | null>(null);
+  const isProgrammaticScrollRef = useRef(false);
+  const isUserScrollUpRef = useRef(false);
+
+  const scrollToBottom = () => {
+    if (messagesContainerRef.current && messagesEndRef.current) {
+      isProgrammaticScrollRef.current = true;
+      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+    }
+  };
+
+  const handleScroll = () => {
+    if (isProgrammaticScrollRef.current) {
+      isProgrammaticScrollRef.current = false;
+      return;
+    }
+
+    if (messagesContainerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
+      isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;
+    }
+  };
+
+  useEffect(() => {
+    const container = messagesContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", handleScroll);
+    }
+    return () => {
+      if (container) {
+        container.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const container = messagesContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const mutationObserver = new MutationObserver(() => {
+      if (!isUserScrollUpRef.current) {
+        scrollToBottom();
+      }
+    });
+
+    mutationObserver.observe(container, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    isUserScrollUpRef.current = false;
+    scrollToBottom();
+  }, [messages.filter((m) => m.isTextMessage() && m.role === Role.User).length]);
+
+  return { messagesEndRef, messagesContainerRef };
+}

package/components/AGUI/components/chat/Modal.tsx

@@ -0,0 +1,133 @@
+import React, { useMemo } from "react";
+import { ChatContextProvider } from "./ChatContext";
+import { ButtonProps, HeaderProps, WindowProps } from "./props";
+import { Window as DefaultWindow } from "./Window";
+import { Button as DefaultButton } from "./Button";
+import { Header as DefaultHeader } from "./Header";
+import { Messages as DefaultMessages } from "./Messages";
+import { Input as DefaultInput } from "./Input";
+import { CopilotChat, CopilotChatProps } from "./Chat";
+import { AssistantMessage as DefaultAssistantMessage } from "./messages/AssistantMessage";
+import { UserMessage as DefaultUserMessage } from "./messages/UserMessage";
+
+export interface CopilotModalProps extends CopilotChatProps {
+  /**
+   * Whether the chat window should be open by default.
+   * @default false
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * If the chat window should close when the user clicks outside of it.
+   * @default true
+   */
+  clickOutsideToClose?: boolean;
+
+  /**
+   * If the chat window should close when the user hits the Escape key.
+   * @default true
+   */
+  hitEscapeToClose?: boolean;
+
+  /**
+   * The shortcut key to open the chat window.
+   * Uses Command-[shortcut] on a Mac and Ctrl-[shortcut] on Windows.
+   * @default '/'
+   */
+  shortcut?: string;
+
+  /**
+   * A callback that gets called when the chat window opens or closes.
+   */
+  onSetOpen?: (open: boolean) => void;
+
+  /**
+   * A custom Window component to use instead of the default.
+   */
+  Window?: React.ComponentType<WindowProps>;
+
+  /**
+   * A custom Button component to use instead of the default.
+   */
+  Button?: React.ComponentType<ButtonProps>;
+
+  /**
+   * A custom Header component to use instead of the default.
+   */
+  Header?: React.ComponentType<HeaderProps>;
+}
+
+export const CopilotModal = ({
+  instructions,
+  defaultOpen = false,
+  clickOutsideToClose = true,
+  hitEscapeToClose = true,
+  onSetOpen,
+  onSubmitMessage,
+  onStopGeneration,
+  onReloadMessages,
+  shortcut = "/",
+  icons,
+  labels,
+  makeSystemMessage,
+  onInProgress,
+  Window = DefaultWindow,
+  Button = DefaultButton,
+  Header = DefaultHeader,
+  Messages = DefaultMessages,
+  Input = DefaultInput,
+  AssistantMessage = DefaultAssistantMessage,
+  UserMessage = DefaultUserMessage,
+  onThumbsUp,
+  onThumbsDown,
+  onCopy,
+  onRegenerate,
+  markdownTagRenderers,
+  className,
+  children,
+  ...props
+}: CopilotModalProps) => {
+  const [openState, setOpenState] = React.useState(defaultOpen);
+
+  const setOpen = (open: boolean) => {
+    onSetOpen?.(open);
+    setOpenState(open);
+  };
+
+  const memoizedHeader = useMemo(() => <Header />, [Header]);
+  const memoizedChildren = useMemo(() => children, [children]);
+
+  return (
+    <ChatContextProvider icons={icons} labels={labels} open={openState} setOpen={setOpen}>
+      {memoizedChildren}
+      <div className={className}>
+        <Button></Button>
+        <Window
+          clickOutsideToClose={clickOutsideToClose}
+          shortcut={shortcut}
+          hitEscapeToClose={hitEscapeToClose}
+        >
+          {memoizedHeader}
+          <CopilotChat
+            {...props}
+            instructions={instructions}
+            onSubmitMessage={onSubmitMessage}
+            onStopGeneration={onStopGeneration}
+            onReloadMessages={onReloadMessages}
+            makeSystemMessage={makeSystemMessage}
+            onInProgress={onInProgress}
+            Messages={Messages}
+            Input={Input}
+            AssistantMessage={AssistantMessage}
+            UserMessage={UserMessage}
+            onThumbsUp={onThumbsUp}
+            onThumbsDown={onThumbsDown}
+            onCopy={onCopy}
+            onRegenerate={onRegenerate}
+            markdownTagRenderers={markdownTagRenderers}
+          />
+        </Window>
+      </div>
+    </ChatContextProvider>
+  );
+};

package/components/AGUI/components/chat/Popup.tsx

@@ -0,0 +1,57 @@
+/**
+ * <br/>
+ * <img src="/images/CopilotPopup.gif" width="500" />
+ *
+ * A chatbot popup component for the CopilotKit framework. The component allows for a high degree
+ * of customization through various props and custom CSS.
+ *
+ * See [CopilotSidebar](/reference/components/chat/CopilotSidebar) for a sidebar version of this component.
+ *
+ * ## Install Dependencies
+ *
+ * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
+ *
+ * ```shell npm2yarn \"@copilotkit/react-ui"\
+ * npm install @copilotkit/react-core @copilotkit/react-ui
+ * ```
+ * ## Usage
+ *
+ * ```tsx
+ * import { CopilotPopup } from "@copilotkit/react-ui";
+ * import "@copilotkit/react-ui/styles.css";
+ *
+ * <CopilotPopup
+ *   labels={{
+ *     title: "Your Assistant",
+ *     initial: "Hi! 👋 How can I assist you today?",
+ *   }}
+ * />
+ * ```
+ *
+ * ### Look & Feel
+ *
+ * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
+ * ```tsx title="YourRootComponent.tsx"
+ * ...
+ * import "@copilotkit/react-ui/styles.css"; // [!code highlight]
+ *
+ * export function YourRootComponent() {
+ *   return (
+ *     <CopilotKit>
+ *       ...
+ *     </CopilotKit>
+ *   );
+ * }
+ * ```
+ * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.
+ */
+
+import { CopilotModal, CopilotModalProps } from "./Modal";
+
+export function CopilotPopup(props: CopilotModalProps) {
+  props = {
+    ...props,
+    className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup",
+  };
+  return <CopilotModal {...props}>{props.children}</CopilotModal>;
+}

package/components/AGUI/components/chat/PoweredByTag.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useDarkMode } from "../../hooks/use-dark-mode";
+
+export function PoweredByTag({ showPoweredBy = true }: { showPoweredBy?: boolean }) {
+  const isDark = useDarkMode();
+
+  if (!showPoweredBy) {
+    return null;
+  }
+
+  const poweredByStyle = {
+    visibility: "visible",
+    display: "block",
+    position: "static",
+    textAlign: "center",
+    fontSize: "12px",
+    padding: "3px 0",
+    color: isDark ? "rgb(69, 69, 69)" : "rgb(214, 214, 214)",
+  };
+
+  return (
+    <div>
+      {/*@ts-expect-error -- expecting position not to be a string, but it can be.*/}
+      <p className="poweredBy" style={poweredByStyle}>
+        Powered by CopilotKit
+      </p>
+    </div>
+  );
+}

package/components/AGUI/components/chat/Sidebar.tsx

@@ -0,0 +1,74 @@
+/**
+ * <br/>
+ * <img src="/images/CopilotSidebar.gif" width="500" />
+ *
+ * A chatbot sidebar component for the CopilotKit framework. Highly customizable through various props and custom CSS.
+ *
+ * See [CopilotPopup](/reference/components/chat/CopilotPopup) for a popup version of this component.
+ *
+ * ## Install Dependencies
+ *
+ * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
+ *
+ * ```shell npm2yarn \"@copilotkit/react-ui"\
+ * npm install @copilotkit/react-core @copilotkit/react-ui
+ * ```
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { CopilotSidebar } from "@copilotkit/react-ui";
+ * import "@copilotkit/react-ui/styles.css";
+ *
+ * <CopilotSidebar
+ *   labels={{
+ *     title: "Your Assistant",
+ *     initial: "Hi! 👋 How can I assist you today?",
+ *   }}
+ * >
+ *   <YourApp/>
+ * </CopilotSidebar>
+ * ```
+ *
+ * ### Look & Feel
+ *
+ * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
+ * ```tsx title="YourRootComponent.tsx"
+ * ...
+ * import "@copilotkit/react-ui/styles.css"; // [!code highlight]
+ *
+ * export function YourRootComponent() {
+ *   return (
+ *     <CopilotKit>
+ *       ...
+ *     </CopilotKit>
+ *   );
+ * }
+ * ```
+ * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.
+ */
+import React, { useState } from "react";
+import { CopilotModal, CopilotModalProps } from "./Modal";
+
+export function CopilotSidebar(props: CopilotModalProps) {
+  props = {
+    ...props,
+    className: props.className ? props.className + " copilotKitSidebar" : "copilotKitSidebar",
+  };
+  const [expandedClassName, setExpandedClassName] = useState(
+    props.defaultOpen ? "sidebarExpanded" : "",
+  );
+
+  const onSetOpen = (open: boolean) => {
+    props.onSetOpen?.(open);
+    setExpandedClassName(open ? "sidebarExpanded" : "");
+  };
+
+  return (
+    <div className={`copilotKitSidebarContentWrapper ${expandedClassName}`}>
+      <CopilotModal {...props} {...{ onSetOpen }}>
+        {props.children}
+      </CopilotModal>
+    </div>
+  );
+}

package/components/AGUI/components/chat/Suggestion.tsx

@@ -0,0 +1,132 @@
+import {
+  CopilotContextParams,
+  extract,
+  CopilotChatSuggestionConfiguration,
+  CopilotMessagesContextParams,
+} from "@copilotkit/react-core";
+import { SmallSpinnerIcon } from "./Icons";
+import { CopilotChatSuggestion } from "../../types/suggestions";
+import { actionParametersToJsonSchema } from "@copilotkit/shared";
+import { CopilotRequestType } from "@copilotkit/runtime-client-gql";
+
+interface SuggestionsProps {
+  title: string;
+  message: string;
+  partial?: boolean;
+  className?: string;
+  onClick: () => void;
+}
+
+export function Suggestion({ title, onClick, partial, className }: SuggestionsProps) {
+  return (
+    <button
+      disabled={partial}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick();
+      }}
+      className={className || (partial ? "suggestion loading" : "suggestion")}
+      data-test-id="suggestion"
+    >
+      {partial ? SmallSpinnerIcon : <span>{title}</span>}
+    </button>
+  );
+}
+
+export const reloadSuggestions = async (
+  context: CopilotContextParams & CopilotMessagesContextParams,
+  chatSuggestionConfiguration: { [key: string]: CopilotChatSuggestionConfiguration },
+  setCurrentSuggestions: (suggestions: { title: string; message: string }[]) => void,
+  abortControllerRef: React.MutableRefObject<AbortController | null>,
+) => {
+  const abortController = abortControllerRef.current;
+
+  const tools = JSON.stringify(
+    Object.values(context.actions).map((action) => ({
+      name: action.name,
+      description: action.description,
+      jsonSchema: JSON.stringify(actionParametersToJsonSchema(action.parameters)),
+    })),
+  );
+
+  const allSuggestions: CopilotChatSuggestion[] = [];
+
+  for (const config of Object.values(chatSuggestionConfiguration)) {
+    try {
+      const numOfSuggestionsInstructions =
+        config.minSuggestions === 0
+          ? `Produce up to ${config.maxSuggestions} suggestions. ` +
+            `If there are no highly relevant suggestions you can think of, provide an empty array.`
+          : `Produce between ${config.minSuggestions} and ${config.maxSuggestions} suggestions.`;
+
+      const result = await extract({
+        context,
+        instructions:
+          "Suggest what the user could say next. Provide clear, highly relevant suggestions. Do not literally suggest function calls. ",
+        data:
+          config.instructions +
+          "\n\n" +
+          numOfSuggestionsInstructions +
+          "\n\n" +
+          "Available tools: " +
+          tools +
+          "\n\n",
+        requestType: CopilotRequestType.Task,
+        parameters: [
+          {
+            name: "suggestions",
+            type: "object[]",
+            attributes: [
+              {
+                name: "title",
+                description:
+                  "The title of the suggestion. This is shown as a button and should be short.",
+                type: "string",
+              },
+              {
+                name: "message",
+                description:
+                  "The message to send when the suggestion is clicked. This should be a clear, complete sentence and will be sent as an instruction to the AI.",
+                type: "string",
+              },
+            ],
+          },
+        ],
+        include: {
+          messages: true,
+          readable: true,
+        },
+        abortSignal: abortController?.signal,
+        stream: ({ status, args }) => {
+          const suggestions = args.suggestions || [];
+          const newSuggestions: CopilotChatSuggestion[] = [];
+          for (let i = 0; i < suggestions.length; i++) {
+            // if GPT provides too many suggestions, limit the number of suggestions
+            if (config.maxSuggestions !== undefined && i >= config.maxSuggestions) {
+              break;
+            }
+            const { title, message } = suggestions[i];
+
+            // If this is the last suggestion and the status is not complete, mark it as partial
+            const partial = i == suggestions.length - 1 && status !== "complete";
+
+            newSuggestions.push({
+              title,
+              message,
+              partial,
+              className: config.className,
+            });
+          }
+          setCurrentSuggestions([...allSuggestions, ...newSuggestions]);
+        },
+      });
+      allSuggestions.push(...result.suggestions);
+    } catch (error) {
+      console.error("Error loading suggestions", error);
+    }
+  }
+
+  if (abortControllerRef.current === abortController) {
+    abortControllerRef.current = null;
+  }
+};