@copilotkit/react-ui 0.0.0-0.0.0-max-changeset-10101010101010-20260109191632

package/src/css/window.css

@@ -0,0 +1,60 @@
+.copilotKitWindow {
+  position: fixed;
+  inset: 0px;
+  transform-origin: bottom;
+  border-color: rgb(229 231 235);
+  background-color: var(--copilot-kit-background-color);
+  border-radius: 0.75rem;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
+  flex-direction: column;
+  transition:
+    opacity 100ms ease-out,
+    transform 200ms ease-out;
+  opacity: 0;
+  transform: scale(0.95) translateY(20px);
+  display: flex;
+  pointer-events: none;
+}
+
+.copilotKitSidebar .copilotKitWindow {
+  border-radius: 0;
+  opacity: 1;
+  transform: translateX(100%);
+}
+
+.copilotKitWindow.open {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  pointer-events: auto;
+}
+
+.copilotKitSidebar .copilotKitWindow.open {
+  transform: translateX(0);
+}
+
+@media (min-width: 640px) {
+  .copilotKitWindow {
+    transform-origin: bottom right;
+    bottom: 5rem;
+    right: 1rem;
+    top: auto;
+    left: auto;
+    border-width: 0px;
+    margin-bottom: 1rem;
+    width: 24rem;
+    height: 600px;
+    min-height: 200px;
+    max-height: calc(100% - 6rem);
+  }
+
+  .copilotKitSidebar .copilotKitWindow {
+    bottom: 0;
+    right: 0;
+    top: auto;
+    left: auto;
+    width: 28rem;
+    min-height: 100%;
+    margin-bottom: 0;
+    max-height: none;
+  }
+}

package/src/hooks/index.ts

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

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

@@ -0,0 +1,71 @@
+/**
+ * <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="https://cdn.copilotkit.ai/docs/copilotkit/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 {
+  useCopilotChatSuggestions as useCoreCopilotChatSuggestions,
+  type UseCopilotChatSuggestionsConfiguration,
+} from "@copilotkit/react-core";
+
+export function useCopilotChatSuggestions(
+  config: UseCopilotChatSuggestionsConfiguration,
+  dependencies: any[] = [],
+) {
+  useCoreCopilotChatSuggestions(config, dependencies);
+}

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-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/src/hooks/use-push-to-talk.tsx

@@ -0,0 +1,167 @@
+import { useCopilotContext, useCopilotMessagesContext } from "@copilotkit/react-core";
+import { gqlToAGUI } from "@copilotkit/runtime-client-gql";
+import { Message } from "@copilotkit/shared";
+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 aguiMessages = gqlToAGUI(context.messages);
+
+      const messagesAfterLast = aguiMessages
+        .slice(lastMessageIndex + 1)
+        .filter((message) => message.role === "assistant");
+
+      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/markdown.css";
+@import "./css/suggestions.css";
+@import "./css/panel.css";
+@import "./css/console.css";
+@import "./css/crew.css";

package/src/types/css.ts

@@ -0,0 +1,21 @@
+// 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-background-color"?: string;
+  "--copilot-kit-input-background-color"?: string;
+  "--copilot-kit-secondary-color"?: string;
+  "--copilot-kit-secondary-contrast-color"?: string;
+  "--copilot-kit-separator-color"?: string;
+  "--copilot-kit-muted-color"?: string;
+  "--copilot-kit-error-background"?: string;
+  "--copilot-kit-error-border"?: string;
+  "--copilot-kit-error-text"?: string;
+  "--copilot-kit-shadow-sm"?: string;
+  "--copilot-kit-shadow-md"?: string;
+  "--copilot-kit-shadow-lg"?: string;
+  "--copilot-kit-dev-console-bg"?: string;
+  "--copilot-kit-dev-console-text"?: string;
+}

package/src/types/index.ts

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

package/src/types/suggestions.ts

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

package/src/v2/index.ts

@@ -0,0 +1 @@
+import "./styles.css";

package/src/v2/styles.css

@@ -0,0 +1 @@
+@import "@copilotkit/react-core/v2/styles.css";

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,11 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  entry: ["src/**/*.{ts,tsx}", "!src/**/*.test.{ts,tsx}", "!src/**/__tests__/**/*"],
+  format: ["esm", "cjs"],
+  dts: true,
+  minify: false,
+  external: ["react", "@copilotkitnext/core", "@copilotkitnext/react"],
+  sourcemap: true,
+  ...options,
+}));

package/typedoc.json

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