@copilotkit/react-ui 0.0.0-test-custom-tag-prerelease-1-20250108200215

package/src/css/messages.css

@@ -0,0 +1,73 @@
+.copilotKitMessages {
+  overflow-y: scroll;
+  flex: 1;
+  padding: 1rem 2rem;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--copilot-kit-background-color);
+}
+
+.copilotKitMessages::-webkit-scrollbar {
+  width: 9px;
+}
+
+.copilotKitMessages::-webkit-scrollbar-thumb {
+  background-color: var(--copilot-kit-scrollbar-color);
+  border-radius: 10rem;
+  border: 2px solid var(--copilot-kit-background-color);
+}
+
+.copilotKitMessages::-webkit-scrollbar-track-piece:start {
+  background: transparent;
+}
+
+.copilotKitMessages::-webkit-scrollbar-track-piece:end {
+  background: transparent;
+}
+
+.copilotKitMessage {
+  border-radius: 0.5rem;
+  padding: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  overflow-wrap: break-word;
+  max-width: 80%;
+  margin-bottom: 0.5rem;
+}
+
+.copilotKitMessage.copilotKitUserMessage {
+  background: var(--copilot-kit-primary-color);
+  color: var(--copilot-kit-contrast-color);
+  margin-left: auto;
+  white-space: pre-wrap;
+}
+
+.copilotKitMessage.copilotKitAssistantMessage {
+  background: var(--copilot-kit-secondary-color);
+  color: var(--copilot-kit-secondary-contrast-color);
+  margin-right: auto;
+}
+
+.copilotKitMessage.copilotKitUserMessage + .copilotKitMessage.copilotKitAssistantMessage {
+  margin-top: 1.5rem;
+}
+
+.copilotKitMessage.copilotKitAssistantMessage + .copilotKitMessage.copilotKitUserMessage {
+  margin-top: 1.5rem;
+}
+
+.copilotKitCustomAssistantMessage {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.copilotKitMessage .inProgressLabel {
+  margin-left: 10px;
+}
+
+.copilotKitMessages footer {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}

package/src/css/panel.css

@@ -0,0 +1,38 @@
+.copilotKitChat {
+  z-index: 30;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  touch-action: manipulation;
+  display: flex;
+  flex-direction: column;
+  /* height: 100%; */
+}
+
+.copilotKitChat svg {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.copilotKitChat .copilotKitMessages {
+  flex-grow: 1;
+}

package/src/css/popup.css

@@ -0,0 +1,22 @@
+.copilotKitPopup {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 30;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  touch-action: manipulation;
+}
+
+.copilotKitPopup svg {
+  display: inline-block;
+  vertical-align: middle;
+}

package/src/css/response.css

@@ -0,0 +1,26 @@
+.copilotKitResponseButton {
+  background-color: var(--copilot-kit-response-button-background-color);
+  border: 1px solid var(--copilot-kit-separator-color);
+  border-radius: 4px;
+  color: var(--copilot-kit-response-button-color);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  height: 32px;
+  line-height: 30px;
+  margin: 0;
+  padding: 0 16px;
+  text-align: center;
+  text-decoration: none;
+  text-transform: none;
+  white-space: nowrap;
+  margin-top: 15px;
+}
+
+.copilotKitResponseButton:hover {
+  filter: brightness(95%);
+}
+
+.copilotKitResponseButton > span {
+  margin-right: 0.5rem;
+}

package/src/css/sidebar.css

@@ -0,0 +1,34 @@
+.copilotKitSidebar {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 30;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  touch-action: manipulation;
+}
+
+.copilotKitSidebar svg {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.copilotKitSidebarContentWrapper {
+  overflow: visible;
+  margin-right: 0px;
+  transition: margin-right 0.3s ease;
+}
+
+@media (min-width: 640px) {
+  .copilotKitSidebarContentWrapper.sidebarExpanded {
+    margin-right: 28rem;
+  }
+}

package/src/css/suggestions.css

@@ -0,0 +1,35 @@
+.copilotKitMessages footer .suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.copilotKitMessages footer h6 {
+  font-weight: 500;
+  font-size: 0.7rem;
+  margin-bottom: 8px;
+}
+
+.copilotKitMessages footer .suggestions .suggestion {
+  padding: 8px 12px;
+  font-size: 0.7rem;
+  border-radius: 0.5rem;
+  background: var(--copilot-kit-primary-color);
+  color: var(--copilot-kit-contrast-color);
+}
+
+.copilotKitMessages footer .suggestions button {
+  transition: transform 0.3s ease;
+}
+
+.copilotKitMessages footer .suggestions button:not(:disabled):hover {
+  transform: scale(1.05);
+}
+
+.copilotKitMessages footer .suggestions button:disabled {
+  cursor: wait;
+}
+
+.copilotKitMessages footer .suggestions button svg {
+  margin-right: 6px;
+}

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: rgb(255 255 255);
+  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,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;
+}