@agentscope-ai/chat 1.1.20 → 1.1.22

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

@@ -0,0 +1,51 @@
+import { RenderMessageProps } from "../props";
+import { UserMessage as DefaultUserMessage } from "./UserMessage";
+import { AssistantMessage as DefaultAssistantMessage } from "./AssistantMessage";
+
+export function RenderTextMessage({
+  UserMessage = DefaultUserMessage,
+  AssistantMessage = DefaultAssistantMessage,
+  ...props
+}: RenderMessageProps) {
+  const {
+    message,
+    inProgress,
+    index,
+    isCurrentMessage,
+    onRegenerate,
+    onCopy,
+    onThumbsUp,
+    onThumbsDown,
+    markdownTagRenderers,
+  } = props;
+
+  if (message.isTextMessage()) {
+    if (message.role === "user") {
+      return (
+        <UserMessage
+          key={index}
+          data-message-role="user"
+          message={message.content}
+          rawData={message}
+        />
+      );
+    } else if (message.role == "assistant") {
+      return (
+        <AssistantMessage
+          key={index}
+          data-message-role="assistant"
+          message={message.content}
+          rawData={message}
+          isLoading={inProgress && isCurrentMessage && !message.content}
+          isGenerating={inProgress && isCurrentMessage && !!message.content}
+          isCurrentMessage={isCurrentMessage}
+          onRegenerate={() => onRegenerate?.(message.id)}
+          onCopy={onCopy}
+          onThumbsUp={onThumbsUp}
+          onThumbsDown={onThumbsDown}
+          markdownTagRenderers={markdownTagRenderers}
+        />
+      );
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+import { UserMessageProps } from "../props";
+import { Bubble } from "@agentscope-ai/chat";
+
+export const UserMessage = (props: UserMessageProps) => {
+  return <Bubble
+    role="user"
+    content={props.rawData.content}
+    id={props.rawData.id}
+  ></Bubble>
+};

package/components/AGUI/components/chat/props.ts

@@ -0,0 +1,186 @@
+import { Message, TextMessage } from "@copilotkit/runtime-client-gql";
+import { CopilotChatSuggestion } from "../../types/suggestions";
+import { ReactNode } from "react";
+
+export interface ButtonProps {}
+
+export interface WindowProps {
+  clickOutsideToClose: boolean;
+  hitEscapeToClose: boolean;
+  shortcut: string;
+  children?: React.ReactNode;
+}
+
+export interface HeaderProps {}
+
+export interface SuggestionsProps {
+  title: string;
+  message: string;
+  partial?: boolean;
+  className?: string;
+  onClick: (message: string) => void;
+}
+
+export type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {
+  [K in keyof T]: React.FC<{ children?: ReactNode } & T[K]>;
+};
+
+export interface MessagesProps {
+  messages: Message[];
+  inProgress: boolean;
+  children?: React.ReactNode;
+  AssistantMessage: React.ComponentType<AssistantMessageProps>;
+  UserMessage: React.ComponentType<UserMessageProps>;
+  RenderTextMessage: React.ComponentType<RenderMessageProps>;
+  RenderActionExecutionMessage: React.ComponentType<RenderMessageProps>;
+  RenderAgentStateMessage: React.ComponentType<RenderMessageProps>;
+  RenderResultMessage: React.ComponentType<RenderMessageProps>;
+  RenderImageMessage: React.ComponentType<RenderMessageProps>;
+
+  /**
+   * Callback function to regenerate the assistant's response
+   */
+  onRegenerate?: (messageId: string) => void;
+
+  /**
+   * Callback function when the message is copied
+   */
+  onCopy?: (message: string) => void;
+
+  /**
+   * Callback function for thumbs up feedback
+   */
+  onThumbsUp?: (message: TextMessage) => void;
+
+  /**
+   * Callback function for thumbs down feedback
+   */
+  onThumbsDown?: (message: TextMessage) => void;
+
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
+}
+
+export interface Renderer {
+  content: string;
+}
+
+export interface UserMessageProps {
+  message?: string;
+  rawData: any;
+  subComponent?: React.JSX.Element;
+}
+
+export interface AssistantMessageProps {
+  /**
+   * The message content from the assistant
+   */
+
+  message?: string;
+
+  /**
+   * Indicates if this is the last message
+   */
+  isCurrentMessage?: boolean;
+
+  /**
+   * The raw data from the assistant's response
+   */
+  rawData: any;
+
+  /**
+   * A component that was decided to render by the LLM.
+   * When working with useCopilotActions and useCoAgentStateRender, this will be
+   * the render component that was specified.
+   */
+  subComponent?: React.JSX.Element;
+
+  /**
+   * Whether a response is loading, this is when the LLM is thinking of a response but hasn't finished yet.
+   */
+  isLoading: boolean;
+
+  /**
+   * Whether a response is generating, this is when the LLM is actively generating and streaming content.
+   */
+  isGenerating: boolean;
+
+  /**
+   * Callback function to regenerate the assistant's response
+   */
+  onRegenerate?: () => void;
+
+  /**
+   * Callback function when the message is copied
+   */
+  onCopy?: (message: string) => void;
+
+  /**
+   * Callback function for thumbs up feedback
+   */
+  onThumbsUp?: (message: TextMessage) => void;
+
+  /**
+   * Callback function for thumbs down feedback
+   */
+  onThumbsDown?: (message: TextMessage) => void;
+
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
+}
+
+export interface RenderMessageProps {
+  message: Message;
+  inProgress: boolean;
+  index: number;
+  isCurrentMessage: boolean;
+  actionResult?: string;
+  AssistantMessage?: React.ComponentType<AssistantMessageProps>;
+  UserMessage?: React.ComponentType<UserMessageProps>;
+
+  /**
+   * Callback function to regenerate the assistant's response
+   */
+  onRegenerate?: (messageId: string) => void;
+
+  /**
+   * Callback function when the message is copied
+   */
+  onCopy?: (message: string) => void;
+
+  /**
+   * Callback function for thumbs up feedback
+   */
+  onThumbsUp?: (message: TextMessage) => void;
+
+  /**
+   * Callback function for thumbs down feedback
+   */
+  onThumbsDown?: (message: TextMessage) => void;
+
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
+}
+
+export interface InputProps {
+  inProgress: boolean;
+  onSend: (text: string) => Promise<Message>;
+  isVisible?: boolean;
+  onStop?: () => void;
+  onUpload?: () => void;
+  hideStopButton?: boolean;
+}
+
+export interface RenderSuggestionsListProps {
+  suggestions: CopilotChatSuggestion[];
+  onSuggestionClick: (message: string) => void;
+}

package/components/AGUI/components/index.ts

@@ -0,0 +1 @@
+export * from "./chat";

package/components/AGUI/context/index.ts

@@ -0,0 +1 @@
+export {};

package/components/AGUI/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./use-copilot-chat-suggestions";

package/components/AGUI/hooks/use-copilot-chat-suggestions.tsx

@@ -0,0 +1,122 @@
+/**
+ * <Callout type="warning">
+ *   useCopilotChatSuggestions is experimental. The interface is not final and
+ *   can change without notice.
+ * </Callout>
+ *
+ * `useCopilotReadable` is a React hook that provides app-state and other information
+ * to the Copilot. Optionally, the hook can also handle hierarchical state within your
+ * application, passing these parent-child relationships to the Copilot.
+ *
+ * <br/>
+ * <img src="/images/use-copilot-chat-suggestions/use-copilot-chat-suggestions.gif" width="500" />
+ *
+ * ## Usage
+ *
+ * ### 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
+ * ```
+ *
+ * ### Simple Usage
+ *
+ * ```tsx
+ * import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
+ *
+ * export function MyComponent() {
+ *   const [employees, setEmployees] = useState([]);
+ *
+ *   useCopilotChatSuggestions({
+ *     instructions: `The following employees are on duty: ${JSON.stringify(employees)}`,
+ *   });
+ * }
+ * ```
+ *
+ * ### Dependency Management
+ *
+ * ```tsx
+ * import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
+ *
+ * export function MyComponent() {
+ *   useCopilotChatSuggestions(
+ *     {
+ *       instructions: "Suggest the most relevant next actions.",
+ *     },
+ *     [appState],
+ *   );
+ * }
+ * ```
+ *
+ * In the example above, the suggestions are generated based on the given instructions.
+ * The hook monitors `appState`, and updates suggestions accordingly whenever it changes.
+ *
+ * ### Behavior and Lifecycle
+ *
+ * The hook registers the configuration with the chat context upon component mount and
+ * removes it on unmount, ensuring a clean and efficient lifecycle management.
+ */
+
+import { useEffect } from "react";
+import { useCopilotContext } from "@copilotkit/react-core";
+import { randomId } from "@copilotkit/shared";
+
+interface UseCopilotChatSuggestionsConfiguration {
+  /**
+   * A prompt or instructions for the GPT to generate suggestions.
+   */
+  instructions: string;
+  /**
+   * The minimum number of suggestions to generate. Defaults to `1`.
+   * @default 1
+   */
+  minSuggestions?: number;
+  /**
+   * The maximum number of suggestions to generate. Defaults to `3`.
+   * @default 1
+   */
+  maxSuggestions?: number;
+
+  /**
+   * Whether the suggestions are available. Defaults to `enabled`.
+   * @default enabled
+   */
+  available?: "enabled" | "disabled";
+
+  /**
+   * An optional class name to apply to the suggestions.
+   */
+  className?: string;
+}
+
+export function useCopilotChatSuggestions(
+  {
+    available = "enabled",
+    instructions,
+    className,
+    minSuggestions = 1,
+    maxSuggestions = 3,
+  }: UseCopilotChatSuggestionsConfiguration,
+  dependencies: any[] = [],
+) {
+  const context = useCopilotContext();
+
+  useEffect(() => {
+    if (available === "disabled") return;
+
+    const id = randomId();
+
+    context.addChatSuggestionConfiguration(id, {
+      instructions,
+      minSuggestions,
+      maxSuggestions,
+      className,
+    });
+
+    return () => {
+      context.removeChatSuggestionConfiguration(id);
+    };
+  }, [...dependencies, instructions, minSuggestions, maxSuggestions, className, available]);
+}

package/components/AGUI/hooks/use-copy-to-clipboard.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+export interface useCopyToClipboardProps {
+  timeout?: number;
+}
+
+export function useCopyToClipboard({ timeout = 2000 }: useCopyToClipboardProps) {
+  const [isCopied, setIsCopied] = React.useState<Boolean>(false);
+
+  const copyToClipboard = (value: string) => {
+    if (typeof window === "undefined" || !navigator.clipboard?.writeText) {
+      return;
+    }
+
+    if (!value) {
+      return;
+    }
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+
+      setTimeout(() => {
+        setIsCopied(false);
+      }, timeout);
+    });
+  };
+
+  return { isCopied, copyToClipboard };
+}

package/components/AGUI/hooks/use-dark-mode.ts

@@ -0,0 +1,10 @@
+export const useDarkMode = () => {
+  if (typeof window === "undefined") return false;
+  return (
+    document.documentElement.classList.contains("dark") ||
+    document.body.classList.contains("dark") ||
+    document.documentElement.getAttribute("data-theme") === "dark" ||
+    document.body.getAttribute("data-theme") === "dark" ||
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  );
+};

package/components/AGUI/hooks/use-push-to-talk.tsx

@@ -0,0 +1,166 @@
+import { useCopilotContext, useCopilotMessagesContext } from "@copilotkit/react-core";
+import { Message, TextMessage } from "@copilotkit/runtime-client-gql";
+import { MutableRefObject, useEffect, useRef, useState } from "react";
+
+export const checkMicrophonePermission = async () => {
+  try {
+    const permissionStatus = await navigator.permissions.query({
+      name: "microphone" as PermissionName,
+    });
+    if (permissionStatus.state === "granted") {
+      return true;
+    } else {
+      return false;
+    }
+  } catch (err) {
+    console.error("Error checking microphone permission", err);
+  }
+};
+
+export const requestMicAndPlaybackPermission = async () => {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    const audioContext = new window.AudioContext();
+    await audioContext.resume();
+    return { stream, audioContext };
+  } catch (err) {
+    console.error("Error requesting microphone and playback permissions", err);
+    return null;
+  }
+};
+
+const startRecording = async (
+  mediaStreamRef: MutableRefObject<MediaStream | null>,
+  mediaRecorderRef: MutableRefObject<MediaRecorder | null>,
+  audioContextRef: MutableRefObject<AudioContext | null>,
+  recordedChunks: Blob[],
+  onStop: () => void,
+) => {
+  if (!mediaStreamRef.current || !audioContextRef.current) {
+    mediaStreamRef.current = await navigator.mediaDevices.getUserMedia({ audio: true });
+    audioContextRef.current = new window.AudioContext();
+    await audioContextRef.current.resume();
+  }
+
+  mediaRecorderRef.current = new MediaRecorder(mediaStreamRef.current!);
+  mediaRecorderRef.current.start(1000);
+  mediaRecorderRef.current.ondataavailable = (event) => {
+    recordedChunks.push(event.data);
+  };
+  mediaRecorderRef.current.onstop = onStop;
+};
+
+const stopRecording = (mediaRecorderRef: MutableRefObject<MediaRecorder | null>) => {
+  if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+    mediaRecorderRef.current.stop();
+  }
+};
+
+const transcribeAudio = async (recordedChunks: Blob[], transcribeAudioUrl: string) => {
+  const completeBlob = new Blob(recordedChunks, { type: "audio/mp4" });
+  const formData = new FormData();
+  formData.append("file", completeBlob, "recording.mp4");
+
+  const response = await fetch(transcribeAudioUrl, {
+    method: "POST",
+    body: formData,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Error: ${response.statusText}`);
+  }
+
+  const transcription = await response.json();
+  return transcription.text;
+};
+
+const playAudioResponse = (text: string, textToSpeechUrl: string, audioContext: AudioContext) => {
+  const encodedText = encodeURIComponent(text);
+  const url = `${textToSpeechUrl}?text=${encodedText}`;
+
+  fetch(url)
+    .then((response) => response.arrayBuffer())
+    .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))
+    .then((audioBuffer) => {
+      const source = audioContext.createBufferSource();
+      source.buffer = audioBuffer;
+      source.connect(audioContext.destination);
+      source.start(0);
+    })
+    .catch((error) => {
+      console.error("Error with decoding audio data", error);
+    });
+};
+
+export type PushToTalkState = "idle" | "recording" | "transcribing";
+
+export type SendFunction = (text: string) => Promise<Message>;
+
+export const usePushToTalk = ({
+  sendFunction,
+  inProgress,
+}: {
+  sendFunction: SendFunction;
+  inProgress: boolean;
+}) => {
+  const [pushToTalkState, setPushToTalkState] = useState<PushToTalkState>("idle");
+  const mediaStreamRef = useRef<MediaStream | null>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const recordedChunks = useRef<Blob[]>([]);
+  const generalContext = useCopilotContext();
+  const messagesContext = useCopilotMessagesContext();
+  const context = { ...generalContext, ...messagesContext };
+  const [startReadingFromMessageId, setStartReadingFromMessageId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (pushToTalkState === "recording") {
+      startRecording(
+        mediaStreamRef,
+        mediaRecorderRef,
+        audioContextRef,
+        recordedChunks.current,
+        () => {
+          setPushToTalkState("transcribing");
+        },
+      );
+    } else {
+      stopRecording(mediaRecorderRef);
+      if (pushToTalkState === "transcribing") {
+        transcribeAudio(recordedChunks.current, context.copilotApiConfig.transcribeAudioUrl!).then(
+          async (transcription) => {
+            recordedChunks.current = [];
+            setPushToTalkState("idle");
+            const message = await sendFunction(transcription);
+            setStartReadingFromMessageId(message.id);
+          },
+        );
+      }
+    }
+
+    return () => {
+      stopRecording(mediaRecorderRef);
+    };
+  }, [pushToTalkState]);
+
+  useEffect(() => {
+    if (inProgress === false && startReadingFromMessageId) {
+      const lastMessageIndex = context.messages.findIndex(
+        (message) => message.id === startReadingFromMessageId,
+      );
+
+      const messagesAfterLast = context.messages
+        .slice(lastMessageIndex + 1)
+        .filter(
+          (message) => message.isTextMessage() && message.role === "assistant",
+        ) as TextMessage[];
+
+      const text = messagesAfterLast.map((message) => message.content).join("\n");
+      playAudioResponse(text, context.copilotApiConfig.textToSpeechUrl!, audioContextRef.current!);
+
+      setStartReadingFromMessageId(null);
+    }
+  }, [startReadingFromMessageId, inProgress]);
+
+  return { pushToTalkState, setPushToTalkState };
+};

package/components/AGUI/index.tsx

@@ -0,0 +1,4 @@
+export * from "./components";
+export * from "./context";
+export * from "./hooks";
+export * from "./types";

package/components/AGUI/lib/utils.test.ts

@@ -0,0 +1,7 @@
+import * as utils from "./utils";
+
+describe("emptyTest", () => {
+  it("should be truthy", () => {
+    expect(true).toBeTruthy();
+  });
+});

package/components/AGUI/lib/utils.ts

@@ -0,0 +1,27 @@
+export async function fetcher<JSON = any>(input: RequestInfo, init?: RequestInit): Promise<JSON> {
+  const res = await fetch(input, init);
+
+  if (!res.ok) {
+    const json = await res.json();
+    if (json.error) {
+      const error = new Error(json.error) as Error & {
+        status: number;
+      };
+      error.status = res.status;
+      throw error;
+    } else {
+      throw new Error("An unexpected error occurred");
+    }
+  }
+
+  return res.json();
+}
+
+export function formatDate(input: string | number | Date): string {
+  const date = new Date(input);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}

package/components/AGUI/types/index.ts

@@ -0,0 +1 @@
+export type { CopilotChatSuggestion } from "./suggestions";

package/components/AGUI/types/suggestions.ts

@@ -0,0 +1,6 @@
+export interface CopilotChatSuggestion {
+  title: string;
+  message: string;
+  partial?: boolean;
+  className?: string;
+}