@copilotkit/react-ui 0.0.0-feat-dynamic-copilotcloud-qa-20250117190454

package/src/hooks/use-copilot-chat-suggestions.tsx

@@ -0,0 +1,112 @@
+/**
+ * <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;
+  /**
+   * An optional class name to apply to the suggestions.
+   */
+  className?: string;
+}
+
+export function useCopilotChatSuggestions(
+  {
+    instructions,
+    className,
+    minSuggestions = 1,
+    maxSuggestions = 3,
+  }: UseCopilotChatSuggestionsConfiguration,
+  dependencies: any[] = [],
+) {
+  const context = useCopilotContext();
+
+  useEffect(() => {
+    const id = randomId();
+
+    context.addChatSuggestionConfiguration(id, {
+      instructions,
+      minSuggestions,
+      maxSuggestions,
+      className,
+    });
+
+    return () => {
+      context.removeChatSuggestionConfiguration(id);
+    };
+  }, [...dependencies, instructions, minSuggestions, maxSuggestions, className]);
+}

package/src/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/src/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/src/index.tsx

@@ -0,0 +1,7 @@
+"use client";
+import "./styles.css";
+
+export * from "./components";
+export * from "./context";
+export * from "./hooks";
+export * from "./types";

package/src/lib/utils.test.ts

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

package/src/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/src/styles.css

@@ -0,0 +1,14 @@
+@import "./css/colors.css";
+@import "./css/popup.css";
+@import "./css/sidebar.css";
+@import "./css/button.css";
+@import "./css/header.css";
+@import "./css/input.css";
+@import "./css/messages.css";
+@import "./css/window.css";
+@import "./css/animations.css";
+@import "./css/response.css";
+@import "./css/markdown.css";
+@import "./css/suggestions.css";
+@import "./css/panel.css";
+@import "./css/console.css";

package/src/types/css.ts

@@ -0,0 +1,15 @@
+// autogenerated (see postcss.config.js) - do not edit
+import { CSSProperties } from "react";
+
+export interface CopilotKitCSSProperties extends CSSProperties {
+  "--copilot-kit-primary-color"?: string;
+  "--copilot-kit-contrast-color"?: string;
+  "--copilot-kit-secondary-color"?: string;
+  "--copilot-kit-secondary-contrast-color"?: string;
+  "--copilot-kit-background-color"?: string;
+  "--copilot-kit-muted-color"?: string;
+  "--copilot-kit-separator-color"?: string;
+  "--copilot-kit-scrollbar-color"?: string;
+  "--copilot-kit-response-button-color"?: string;
+  "--copilot-kit-response-button-background-color"?: string;
+}

package/src/types/index.ts

@@ -0,0 +1 @@
+export type { CopilotKitCSSProperties } from "./css";

package/src/types/suggestions.ts

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

package/tailwind.config.js

@@ -0,0 +1,7 @@
+const sharedConfig = require("tailwind-config/tailwind.config.js");
+
+module.exports = {
+  // prefix ui lib classes to avoid conflicting with the app
+  // prefix: "ui-",
+  presets: [sharedConfig],
+};

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../utilities/tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": [
+    "dist",
+    "build",
+    "node_modules",
+    "**/*.test.ts",  // Exclude TypeScript test files
+    "**/*.test.tsx", // Exclude TypeScript React test files
+    "**/__tests__/*" // Exclude any files inside a __tests__ directory
+  ]
+}

package/tsup.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  entry: ["src/**/*.{ts,tsx}"],
+  format: ["esm", "cjs"],
+  dts: true,
+  minify: false,
+  external: ["react"],
+  sourcemap: true,
+  exclude: [
+    "**/*.test.ts", // Exclude TypeScript test files
+    "**/*.test.tsx", // Exclude TypeScript React test files
+    "**/__tests__/*", // Exclude any files inside a __tests__ directory
+  ],
+  ...options,
+}));

package/typedoc.json

@@ -0,0 +1,4 @@
+{
+  "extends": ["../../typedoc.base.json"],
+  "entryPoints": ["src/index.tsx"]
+}