@agentscope-ai/chat 1.1.39 → 1.1.41-beta.1764749089549

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

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

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

@@ -1,57 +0,0 @@
-/**
- * <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

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

@@ -1,74 +0,0 @@
-/**
- * <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

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