Add documentation

Author: mme

CopilotKit/packages/react-ui/src/components/chat/Chat.tsx

@@ -10,20 +10,91 @@ import { Input as DefaultInput } from "./Input";
 import { nanoid } from "nanoid";
 import { ResponseButton } from "./Response";
 
+/**
+ * Props for CopilotKitChat component.
+ */
 export interface CopilotKitChatProps {
+  /**
+   * Custom instructions to be added to the system message. Use this property to
+   * provide additional context or guidance to the language model, influencing
+   * its responses. These instructions can include specific directions,
+   * preferences, or criteria that the model should consider when generating
+   * its output, thereby tailoring the conversation more precisely to the
+   * user's needs or the application's requirements.
+   */
   instructions?: string;
+
+  /**
+   * Whether the chat window should be open by default.
+   * @default false
+   */
   defaultOpen?: boolean;
+
+  /**
+   * If the chat window should close when the user clicks outside of it.
+   * @default true
+   */
   clickOutsideToClose?: boolean;
+
+  /**
+   * If the chat window should close when the user hits the Escape key.
+   * @default true
+   */
   hitEscapeToClose?: boolean;
+
+  /**
+   * The hotkey to open the chat window.
+   * Uses Command-<hotkey> on a Mac and Ctrl-<hotkey> on Windows.
+   * @default "e"
+   */
   hotkey?: string;
+
+  /**
+   * Icons can be used to set custom icons for the chat window.
+   */
   icons?: CopilotKitChatIcons;
+
+  /**
+   * Labels can be used to set custom labels for the chat window.
+   */
   labels?: CopilotKitChatLabels;
+
+  /**
+   * A function that takes in context string and instructions and returns
+   * the system message to include in the chat request.
+   * Use this to completely override the system message, when providing
+   * instructions is not enough.
+   */
   makeSystemMessage?: SystemMessageFunction;
+
+  /**
+   * A custom Window component to use instead of the default.
+   */
   Window?: React.ComponentType<WindowProps>;
+
+  /**
+   * A custom Button component to use instead of the default.
+   */
   Button?: React.ComponentType<ButtonProps>;
+
+  /**
+   * A custom Header component to use instead of the default.
+   */
   Header?: React.ComponentType<HeaderProps>;
+
+  /**
+   * A custom Messages component to use instead of the default.
+   */
   Messages?: React.ComponentType<MessagesProps>;
+
+  /**
+   * A custom Input component to use instead of the default.
+   */
   Input?: React.ComponentType<InputProps>;
+
+  /**
+   * A class name to apply to the root element.
+   */
   className?: string;
 }
 

CopilotKit/packages/react-ui/src/components/chat/ChatContext.tsx

@@ -1,25 +1,108 @@
 import React, { useMemo } from "react";
 import * as DefaultIcons from "./Icons";
 
+/**
+ * Icons for CopilotKitChat component.
+ */
 export interface CopilotKitChatIcons {
+  /**
+   * The icon to use for the open chat button.
+   * @default <OpenIcon />
+   */
   openIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the close chat button.
+   * @default <CloseIcon />
+   */
   closeIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the close chat button in the header.
+   * @default <HeaderCloseIcon />
+   */
   headerCloseIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the send button.
+   * @default <SendIcon />
+   */
   sendIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the activity indicator.
+   * @default <ActivityIcon />
+   */
   activityIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the spinner.
+   * @default <SpinnerIcon />
+   */
   spinnerIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the stop button.
+   * @default <StopIcon />
+   */
   stopIcon?: React.ReactNode;
+
+  /**
+   * The icon to use for the regenerate button.
+   * @default <RegenerateIcon />
+   */
   regenerateIcon?: React.ReactNode;
 }
 
+/**
+ * Labels for CopilotKitChat component.
+ */
 export interface CopilotKitChatLabels {
+  /**
+   * The initial message(s) to display in the chat window.
+   */
   initial?: string | string[];
+
+  /**
+   * The title to display in the header.
+   * @default "CopilotKit"
+   */
   title?: string;
+
+  /**
+   * The placeholder to display in the input.
+   * @default "Type a message..."
+   */
   placeholder?: string;
+
+  /**
+   * The message to display while the chat is thinking.
+   * @default "Thinking..."
+   */
   thinking?: string;
+
+  /**
+   * The message to display when the chat is done thinking.
+   * @default "✅ Done"
+   */
   done?: string;
+
+  /**
+   * The message to display when an error occurs.
+   * @default "❌ An error occurred. Please try again."
+   */
   error?: string;
+
+  /**
+   * The message to display when the user clicks the stop button.
+   * @default "Stop generating"
+   */
   stopGenerating?: string;
+
+  /**
+   * The message to display when the user clicks the regenerate button.
+   * @default "Regenerate response"
+   */
   regenerateResponse?: string;
 }
 
@@ -62,7 +145,7 @@ export const ChatContextProvider: React.FC<ChatContextProps> = ({
       labels: {
         ...{
           initial: "",
-          title: "Assistant",
+          title: "CopilotKit",
           placeholder: "Type a message...",
           thinking: "Thinking...",
           done: "✅ Done",

docs/TODO-POPUP.md

@@ -1,21 +1,43 @@
 # What needs to be documented:
 
-## CopilotKitPopupProps
+## CopilotKitChatProps
 
 - instructions?: string; Custom instructions to add to the system message
-- headers?: Record<string, string> | Headers; Headers to add to the request
-- body?: object; Body to add to the request. Can override model etc.
+  - [x] in code
+  - [ ] in mintlify
 - defaultOpen?: boolean; Whether the popup should be open by default
+  - [x] in code
+  - [ ] in mintlify
 - clickOutsideToClose?: boolean; Whether the popup should close when clicking outside of it
+  - [x] in code
+  - [ ] in mintlify
 - hitEscapeToClose?: boolean; Whether the popup should close when hitting the escape key
+  - [x] in code
+  - [ ] in mintlify
 - hotkey?: string; The hotkey to open the popup
+  - [x] in code
+  - [ ] in mintlify
 - icons?: CopilotKitChatIcons; Users can override icons
+  - [x] in code
+  - [ ] in mintlify
 - labels?: CopilotKitChatLabels; Users can override labels
+  - [x] in code
+  - [ ] in mintlify
 - Window?: React.ComponentType<WindowProps>; Users can override the Window component
+  - [x] in code
+  - [ ] in mintlify
 - Button?: React.ComponentType<ButtonProps>; Users can override the Button component
+  - [x] in code
+  - [ ] in mintlify
 - Header?: React.ComponentType<HeaderProps>; Users can override the Header component
+  - [x] in code
+  - [ ] in mintlify
 - Messages?: React.ComponentType<MessagesProps>; Users can override the Messages component
+  - [x] in code
+  - [ ] in mintlify
 - Input?: React.ComponentType<InputProps>; Users can override the Input component
+  - [x] in code
+  - [ ] in mintlify
 
 ## Mobile/Responsive Support