@copilotkit/react-ui 0.22.0 → 0.36.0-mme-pre.1

package/src/components/chat/Popup.tsx

@@ -1,13 +1,59 @@
-import { CopilotChat, CopilotChatProps } from "./Chat";
+/**
+ * A chatbot popup component for CopilotKit.
+ *
+ * <img src="/images/CopilotPopup/CopilotPopup.gif" width="500" />
+ *
+ * <img referrerPolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=a9b290bb-38f9-4518-ac3b-8f54fdbf43be" />
+ *
+ * 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](./CopilotSidebar) for a sidebar version of this component.
+ *
+ * <RequestExample>
+ *   ```jsx CopilotPopup Example
+ *   import { CopilotPopup } from "@copilotkit/react-ui";
+ *
+ *   <CopilotPopup
+ *     labels={{
+ *       title: "Your Assistant",
+ *       initial: "Hi! 👋 How can I assist you today?",
+ *     }}
+ *   />
+ *   ```
+ * </RequestExample>
+ *
+ * ## Custom CSS
+ *
+ * You can customize the colors of the chat window by overriding the CSS variables
+ * defined in the [default styles](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/colors.css).
+ *
+ * For example, to set the primary color to purple:
+ *
+ * ```jsx
+ * <div style={{ "--copilot-kit-primary-color": "#7D5BA6" }}>
+ *   <CopilotPopup />
+ * </div>
+ * ```
+ *
+ * To further customize the chat window, you can override the CSS classes defined
+ * [here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/).
+ *
+ * For example:
+ *
+ * ```css
+ * .copilotKitButton {
+ *   border-radius: 0;
+ * }
+ * ```
+ */
 
-interface CopilotPopupProps extends CopilotChatProps {
-  children?: React.ReactNode;
-}
+import { CopilotModal, CopilotModalProps } from "./Modal";
 
-export const CopilotPopup = (props: CopilotChatProps) => {
+export function CopilotPopup(props: CopilotModalProps) {
   props = {
     ...props,
     className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup",
   };
-  return <CopilotChat {...props}>{props.children}</CopilotChat>;
-};
+  return <CopilotModal {...props}>{props.children}</CopilotModal>;
+}

package/src/components/chat/Sidebar.tsx

@@ -1,11 +1,64 @@
+/**
+ * A chatbot sidebar component for CopilotKit.
+ *
+ * <img src="/images/CopilotSidebar/CopilotSidebar.gif" width="500" />
+ *
+ * <img referrerPolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=a9b290bb-38f9-4518-ac3b-8f54fdbf43be" />
+ *
+ * A chatbot sidebar component for the CopilotKit framework. Highly customizable through various props and custom CSS.
+ *
+ * <RequestExample>
+ *   ```jsx CopilotSidebar Example
+ *   import { CopilotSidebar } from "@copilotkit/react-ui";
+ *
+ *   <CopilotSidebar
+ *     labels={{
+ *       title: "Your Assistant",
+ *       initial: "Hi! 👋 How can I assist you today?",
+ *     }}
+ *   >
+ *     <YourApp/>
+ *   </CopilotSidebar>
+ *   ```
+ * </RequestExample>
+ *
+ *
+ * See [CopilotPopup](./CopilotPopup) for a popup version of this component.
+ *
+ * <Note>
+ *   To make the sidebar push your content to the side, wrap your content in the
+ *   sidebar component. If you want the sidebar to overlay your content, place the
+ *   sidebar component outside of your content.
+ * </Note>
+ *
+ * ## Custom CSS
+ *
+ * You can customize the colors of the chat window by overriding the CSS variables
+ * defined in the [default styles](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/colors.css).
+ *
+ * For example, to set the primary color to purple:
+ *
+ * ```jsx
+ * <div style={{ "--copilot-kit-primary-color": "#7D5BA6" }}>
+ *   <CopilotSidebar />
+ * </div>
+ * ```
+ *
+ * To further customize the chat window, you can override the CSS classes defined
+ * [here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/).
+ *
+ * For example:
+ *
+ * ```css
+ * .copilotKitButton {
+ *   border-radius: 0;
+ * }
+ * ```
+ */
 import React, { useState } from "react";
-import { CopilotChat, CopilotChatProps } from "./Chat";
+import { CopilotModal, CopilotModalProps } from "./Modal";
 
-interface CopilotSidebarProps extends CopilotChatProps {
-  children?: React.ReactNode;
-}
-
-export const CopilotSidebar = (props: CopilotSidebarProps) => {
+export function CopilotSidebar(props: CopilotModalProps) {
   props = {
     ...props,
     className: props.className ? props.className + " copilotKitSidebar" : "copilotKitSidebar",
@@ -21,9 +74,9 @@ export const CopilotSidebar = (props: CopilotSidebarProps) => {
 
   return (
     <div className={`copilotKitSidebarContentWrapper ${expandedClassName}`}>
-      <CopilotChat {...props} {...{ onSetOpen }}>
+      <CopilotModal {...props} {...{ onSetOpen }}>
         {props.children}
-      </CopilotChat>
+      </CopilotModal>
     </div>
   );
-};
+}

package/src/components/chat/Suggestion.tsx

@@ -0,0 +1,109 @@
+import {
+  CopilotContextParams,
+  extract,
+  CopilotChatSuggestionConfiguration,
+} from "@copilotkit/react-core";
+import { SuggestionsProps } from "./props";
+import { SmallSpinnerIcon } from "./Icons";
+import { CopilotChatSuggestion } from "../../types/suggestions";
+
+export function Suggestion({ title, message, onClick, partial, className }: SuggestionsProps) {
+  return (
+    <button
+      disabled={partial}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick(message);
+      }}
+      className={className || "suggestion"}
+    >
+      {partial && SmallSpinnerIcon}
+      <span>{title}</span>
+    </button>
+  );
+}
+
+export const reloadSuggestions = async (
+  context: CopilotContextParams,
+  chatSuggestionConfiguration: { [key: string]: CopilotChatSuggestionConfiguration },
+  setCurrentSuggestions: (suggestions: { title: string; message: string }[]) => void,
+  abortControllerRef: React.MutableRefObject<AbortController | null>,
+) => {
+  const abortController = abortControllerRef.current;
+  const tools = JSON.stringify(context.getChatCompletionFunctionDescriptions(context.entryPoints));
+
+  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. " +
+          config.instructions +
+          "\n\n" +
+          numOfSuggestionsInstructions,
+        data: "Available tools: " + tools + "\n\n",
+        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;
+  }
+};

package/src/components/chat/Textarea.tsx

@@ -48,7 +48,7 @@ const AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextare
         onKeyDown={onKeyDown}
         placeholder={placeholder}
         style={{
-          overflow: "hidden",
+          overflow: "auto",
           resize: "none",
           maxHeight: `${maxHeight}px`,
         }}

package/src/components/chat/index.tsx

@@ -1,4 +1,5 @@
 export * from "./props";
 export { CopilotPopup } from "./Popup";
 export { CopilotSidebar } from "./Sidebar";
+export { CopilotChat } from "./Chat";
 export { useChatContext } from "./ChatContext";

package/src/components/chat/props.ts

@@ -19,15 +19,23 @@ export interface HeaderProps {
   setOpen: (open: boolean) => void;
 }
 
+export interface SuggestionsProps {
+  title: string;
+  message: string;
+  partial?: boolean;
+  className?: string;
+  onClick: (message: string) => void;
+}
+
 export interface MessagesProps {
   messages: Message[];
   inProgress: boolean;
+  children?: React.ReactNode;
 }
 
 export interface InputProps {
   inProgress: boolean;
-  onSend: (text: string) => void;
-  children?: React.ReactNode;
+  onSend: (text: string) => Promise<Message>;
   isVisible?: boolean;
 }
 

package/src/css/input.css

@@ -1,7 +1,7 @@
 .copilotKitInput {
   border-top: 1px solid var(--copilot-kit-input-separator-color);
   padding-left: 2rem;
-  padding-right: 2.5rem;
+  padding-right: 1rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
   display: flex;
@@ -13,9 +13,7 @@
   background-color: var(--copilot-kit-input-background-color);
 }
 
-.copilotKitInput > button {
-  position: absolute;
-  right: 0.5rem;
+.copilotKitInput > .copilotKitInputControls > button {
   padding: 0.25rem;
   cursor: pointer;
   transition-property: transform;
@@ -38,22 +36,27 @@
   text-shadow: none;
   display: inline-block;
   text-align: center;
+  margin-left: 0.5rem; /* Add margin to separate button from textarea */
 }
 
-.copilotKitInput > button:not([disabled]) {
+.copilotKitInput > .copilotKitInputControls > button:not([disabled]) {
   color: var(--copilot-kit-input-send-button-color);
 }
 
-.copilotKitInput > button:not([disabled]):hover {
+.copilotKitInput > .copilotKitInputControls > button:not([disabled]):hover {
   transform: scale(1.1);
 }
 
-.copilotKitInput > button[disabled] {
+.copilotKitInput > .copilotKitInputControls > button[disabled] {
   color: var(--copilot-kit-input-send-button-disabled-color);
 }
 
+.copilotKitInputControls {
+  display: flex;
+}
+
 .copilotKitInput > textarea {
-  width: 100%;
+  flex: 1; /* Allow textarea to take up remaining space */
   outline: 2px solid transparent;
   outline-offset: 2px;
   resize: none;
@@ -77,3 +80,10 @@
   color: var(--copilot-kit-input-placeholder-color);
   opacity: 1;
 }
+
+.copilotKitInput > .copilotKitInputControls > button.copilotKitPushToTalkRecording {
+  background-color: red;
+  color: white;
+  border-radius: 50%;
+  animation: copilotKitPulseAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}

package/src/css/messages.css

@@ -2,7 +2,6 @@
   overflow-y: scroll;
   flex: 1;
   padding: 1rem 2rem;
-  padding-bottom: 3rem;
   display: flex;
   flex-direction: column;
   background-color: var(--copilot-kit-messages-background-color);
@@ -65,3 +64,10 @@
 .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 @@
+.copilotKitPanel {
+  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%;
+}
+
+.copilotKitPanel svg {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.copilotKitPanel .copilotKitMessages {
+  flex-grow: 1;
+}

package/src/css/response.css

@@ -14,10 +14,7 @@
   text-decoration: none;
   text-transform: none;
   white-space: nowrap;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: -44px;
+  margin-top: 15px;
 }
 
 .copilotKitResponseButton:hover {

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-message-user-background-color);
+  color: var(--copilot-kit-message-user-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

@@ -7,7 +7,9 @@
   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;
+  transition:
+    opacity 100ms ease-out,
+    transform 200ms ease-out;
   opacity: 0;
   transform: scale(0.95) translateY(20px);
   display: flex;

package/src/hooks/index.ts

@@ -1 +1 @@
-export {};
+export * from "./use-copilot-chat-suggestions";

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

@@ -0,0 +1,117 @@
+/**
+ * A hook for providing suggestions to the user in the Copilot chat.
+ *
+ * <Warning>
+ *   useCopilotChatSuggestions is experimental. The interface is not final and
+ *   can change without further notice.
+ * </Warning>
+ *
+ * <img src="/images/useCopilotChatSuggestions/use-copilot-chat-suggestions.gif" width="500" />
+ *
+ * <img referrerPolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=a9b290bb-38f9-4518-ac3b-8f54fdbf43be" />
+ *
+ * `useCopilotChatSuggestions` integrates auto-generated chat suggestions into your application in the context of your
+ * app's state. It dynamically manages suggestions based on provided configurations and
+ * dependencies.
+ *
+ * <RequestExample>
+ *   ```jsx useCopilotChatSuggestions Example
+ *   import { useCopilotChatSuggestions }
+ *     from "@copilotkit/react-ui";
+ *
+ *   useCopilotChatSuggestions({
+ *     instructions: "Your instructions for suggestions.",
+ *   })
+ *   ```
+ * </RequestExample>
+ *
+ * ## Basic Setup
+ *
+ * To incorporate this hook into your React components, start by importing it:
+ *
+ * ```tsx
+ * import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
+ * ```
+ *
+ * Then, use it in your component to initiate suggestion functionality:
+ *
+ * ```tsx
+ * useCopilotChatSuggestions({
+ *   instructions: "Your instructions for suggestions.",
+ * });
+ * ```
+ *
+ * ## Dependency Management
+ *
+ * ```tsx
+ * import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
+ *
+ * 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 { useChatContext } from "../components";
+import { nanoid } from "nanoid";
+import { CopilotChatSuggestionConfiguration, useCopilotContext } from "@copilotkit/react-core";
+
+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 = nanoid();
+
+    context.addChatSuggestionConfiguration(id, {
+      instructions,
+      minSuggestions,
+      maxSuggestions,
+      className,
+    });
+
+    return () => {
+      context.removeChatSuggestionConfiguration(id);
+    };
+  }, dependencies);
+}