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

package/dist/components/chat/Chat.d.ts

@@ -1,8 +1,55 @@
-import React from 'react';
 import { CopilotChatIcons, CopilotChatLabels } from './ChatContext.js';
+import React__default from 'react';
 import { SystemMessageFunction } from '@copilotkit/react-core';
-import { WindowProps, ButtonProps, HeaderProps, MessagesProps, InputProps, ResponseButtonProps } from './props.js';
-import '@copilotkit/shared';
+import { CopilotChatSuggestion } from '../../types/suggestions.js';
+import { Message } from '@copilotkit/shared';
+import { MessagesProps, InputProps, ResponseButtonProps } from './props.js';
+
+/**
+ * An embeddable chat panel for CopilotKit.
+ *
+ * <img src="/images/CopilotChat/CopilotChat.gif" width="500" />
+ *
+ * A chatbot panel component for the CopilotKit framework. The component allows for a high degree
+ * of customization through various props and custom CSS.
+ *
+ * <RequestExample>
+ *   ```jsx CopilotChat Example
+ *   import { CopilotChat } from "@copilotkit/react-ui";
+ *
+ *   <CopilotChat
+ *     labels={{
+ *       title: "Your Assistant",
+ *       initial: "Hi! 👋 How can I assist you today?",
+ *     }}
+ *   />
+ *   ```
+ * </RequestExample>
+ *
+ * ## Custom CSS
+ *
+ * You can customize the colors of the panel 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 panel, 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;
+ * }
+ * ```
+ */
 
 /**
  * Props for CopilotChat component.
@@ -17,25 +64,6 @@ interface CopilotChatProps {
      * 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;
-    /**
-     * A callback that gets called when the chat window opens or closes.
-     */
-    onSetOpen?: (open: boolean) => void;
     /**
      * A callback that gets called when the in progress state changes.
      */
@@ -44,12 +72,6 @@ interface CopilotChatProps {
      * A callback that gets called when a new message it submitted.
      */
     onSubmitMessage?: (message: string) => void;
-    /**
-     * The shortcut key to open the chat window.
-     * Uses Command-<shortcut> on a Mac and Ctrl-<shortcut> on Windows.
-     * @default "e"
-     */
-    shortcut?: string;
     /**
      * Icons can be used to set custom icons for the chat window.
      */
@@ -70,30 +92,18 @@ interface CopilotChatProps {
      * @default true
      */
     showResponseButton?: boolean;
-    /**
-     * 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>;
+    Messages?: React__default.ComponentType<MessagesProps>;
     /**
      * A custom Input component to use instead of the default.
      */
-    Input?: React.ComponentType<InputProps>;
+    Input?: React__default.ComponentType<InputProps>;
     /**
      * A custom ResponseButton component to use instead of the default.
      */
-    ResponseButton?: React.ComponentType<ResponseButtonProps>;
+    ResponseButton?: React__default.ComponentType<ResponseButtonProps>;
     /**
      * A class name to apply to the root element.
      */
@@ -101,8 +111,18 @@ interface CopilotChatProps {
     /**
      * Children to render.
      */
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 }
-declare const CopilotChat: ({ instructions, defaultOpen, clickOutsideToClose, hitEscapeToClose, onSetOpen, onSubmitMessage, shortcut, icons, labels, makeSystemMessage, showResponseButton, onInProgress, Window, Button, Header, Messages, Input, ResponseButton, className, children, }: CopilotChatProps) => JSX.Element;
+declare function CopilotChat({ instructions, onSubmitMessage, icons, labels, makeSystemMessage, showResponseButton, onInProgress, Messages, Input, ResponseButton, className, }: CopilotChatProps): JSX.Element;
+declare const useCopilotChatLogic: (instructions?: string, makeSystemMessage?: SystemMessageFunction, onInProgress?: ((isLoading: boolean) => void) | undefined, onSubmitMessage?: ((messageContent: string) => void) | undefined) => {
+    visibleMessages: Message[];
+    isLoading: boolean;
+    currentSuggestions: CopilotChatSuggestion[];
+    sendMessage: (messageContent: string) => Promise<Message>;
+    stop: () => void;
+    reload: () => Promise<void>;
+    input: string;
+    setInput: React__default.Dispatch<React__default.SetStateAction<string>>;
+};
 
-export { CopilotChat, CopilotChatProps };
+export { CopilotChat, CopilotChatProps, useCopilotChatLogic };