@copilotkit/react-ui 1.3.0 → 1.3.1

package/src/components/chat/Sidebar.tsx

@@ -18,6 +18,7 @@
  *
  * ```tsx
  * import { CopilotSidebar } from "@copilotkit/react-ui";
+ * import "@copilotkit/react-ui/styles.css";
  *
  * <CopilotSidebar
  *   labels={{
@@ -32,8 +33,9 @@
  * ### Look & Feel
  *
  * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
- * ```tsx fileName="YourRootComponent.tsx"
+ * ```tsx fileName="YourRootComponent.tsx" {2}
  * ...
+ * import "@copilotkit/react-ui/styles.css";
  *
  * export function YourRootComponent() {
  *   return (

package/tsup.config.ts

@@ -1,60 +1,16 @@
-import { defineConfig, Options } from "tsup-async-inject-style";
-import fs from "fs";
-import path from "path";
-import postcss from "postcss";
-import autoprefixer from "autoprefixer";
-import tailwindcss from "tailwindcss";
-import cssnano from "cssnano";
-import postcssImport from "postcss-import";
-import postcssNested from "postcss-nested";
+import { defineConfig, Options } from "tsup";
 
-export default defineConfig((options: Options) => {
-  return {
-    entry: ["src/**/*.ts", "src/**/*.tsx"],
-    format: ["esm", "cjs"],
-    dts: true,
-    minify: false,
-    external: ["react"],
-    splitting: false,
-    clean: true,
-    sourcemap: true,
-    exclude: [
-      "**/*.test.ts", // Exclude TypeScript test files
-      "**/*.test.tsx", // Exclude TypeScript React test files
-      "**/__tests__/*", // Exclude any files inside a __tests__ directory
-    ],
-    onSuccess: async () => {
-      // Create index.css file for backwards compatibility
-      fs.writeFileSync(
-        path.resolve(process.cwd(), "dist/index.css"),
-        `/* This is here for backwards compatibility */`,
-      );
-    },
-    injectStyle: async (_, filePath) => {
-      const cwd = process.cwd();
-      const outputPath = path.resolve(cwd, "dist/index.css");
-      const rawCSS = fs.readFileSync(filePath, "utf8");
-
-      const resultCSS = await postcss([
-        postcssImport(),
-        postcssNested(),
-        tailwindcss,
-        autoprefixer,
-        cssnano({ preset: "default" }),
-      ]).process(rawCSS, { from: filePath, to: outputPath });
-
-      if (resultCSS.css === undefined) {
-        throw new Error("No CSS output");
-      }
-
-      return `
-        if (globalThis.hasOwnProperty("document")) {
-          const style = document?.createElement("style");
-          style.innerHTML = '${resultCSS}';
-          document?.head.appendChild(style);
-        }
-      `;
-    },
-    ...options,
-  };
-});
+export default defineConfig((options: Options) => ({
+  entry: ["src/**/*.{ts,tsx}"],
+  format: ["esm", "cjs"],
+  dts: true,
+  minify: false,
+  external: ["react"],
+  sourcemap: true,
+  exclude: [
+    "**/*.test.ts", // Exclude TypeScript test files
+    "**/*.test.tsx", // Exclude TypeScript React test files
+    "**/__tests__/*", // Exclude any files inside a __tests__ directory
+  ],
+  ...options,
+}));

package/dist/components/chat/Button.d.mts

@@ -1,7 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps } from './props.mjs';
-import '@copilotkit/runtime-client-gql';
-
-declare const Button: ({}: ButtonProps) => react_jsx_runtime.JSX.Element;
-
-export { Button };

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

@@ -1,87 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CopilotChatIcons, CopilotChatLabels } from './ChatContext.mjs';
-import React__default from 'react';
-import { SystemMessageFunction } from '@copilotkit/react-core';
-import { CopilotChatSuggestion } from '../../types/suggestions.mjs';
-import { Message } from '@copilotkit/runtime-client-gql';
-import { MessagesProps, InputProps, ResponseButtonProps } from './props.mjs';
-
-/**
- * Props for CopilotChat component.
- */
-interface CopilotChatProps {
-    /**
-     * 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;
-    /**
-     * A callback that gets called when the in progress state changes.
-     */
-    onInProgress?: (inProgress: boolean) => void;
-    /**
-     * A callback that gets called when a new message it submitted.
-     */
-    onSubmitMessage?: (message: string) => void | Promise<void>;
-    /**
-     * Icons can be used to set custom icons for the chat window.
-     */
-    icons?: CopilotChatIcons;
-    /**
-     * Labels can be used to set custom labels for the chat window.
-     */
-    labels?: CopilotChatLabels;
-    /**
-     * 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;
-    /**
-     * Whether to show the response button.
-     * @default true
-     */
-    showResponseButton?: boolean;
-    /**
-     * A custom Messages component to use instead of the default.
-     */
-    Messages?: React__default.ComponentType<MessagesProps>;
-    /**
-     * A custom Input component to use instead of the default.
-     */
-    Input?: React__default.ComponentType<InputProps>;
-    /**
-     * A custom ResponseButton component to use instead of the default.
-     */
-    ResponseButton?: React__default.ComponentType<ResponseButtonProps>;
-    /**
-     * A class name to apply to the root element.
-     */
-    className?: string;
-    /**
-     * Children to render.
-     */
-    children?: React__default.ReactNode;
-}
-declare function CopilotChat({ instructions, onSubmitMessage, makeSystemMessage, showResponseButton, onInProgress, Messages, Input, ResponseButton, className, icons, labels, }: CopilotChatProps): react_jsx_runtime.JSX.Element;
-declare function WrappedCopilotChat({ children, icons, labels, className, }: {
-    children: React__default.ReactNode;
-    icons?: CopilotChatIcons;
-    labels?: CopilotChatLabels;
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
-declare const useCopilotChatLogic: (makeSystemMessage?: SystemMessageFunction, onInProgress?: (isLoading: boolean) => void, onSubmitMessage?: (messageContent: string) => Promise<void> | void) => {
-    visibleMessages: Message[];
-    isLoading: boolean;
-    currentSuggestions: CopilotChatSuggestion[];
-    sendMessage: (messageContent: string) => Promise<Message>;
-    stopGeneration: () => void;
-    reloadMessages: () => Promise<void>;
-};
-
-export { CopilotChat, type CopilotChatProps, WrappedCopilotChat, useCopilotChatLogic };

package/dist/components/chat/ChatContext.d.mts

@@ -1,105 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
-
-/**
- * Icons for CopilotChat component.
- */
-interface CopilotChatIcons {
-    /**
-     * The icon to use for the open chat button.
-     * @default <OpenIcon />
-     */
-    openIcon?: React__default.ReactNode;
-    /**
-     * The icon to use for the close chat button.
-     * @default <CloseIcon />
-     */
-    closeIcon?: React__default.ReactNode;
-    /**
-     * The icon to use for the close chat button in the header.
-     * @default <HeaderCloseIcon />
-     */
-    headerCloseIcon?: React__default.ReactNode;
-    /**
-     * The icon to use for the send button.
-     * @default <SendIcon />
-     */
-    sendIcon?: React__default.ReactNode;
-    /**
-     * The icon to use for the activity indicator.
-     * @default <ActivityIcon />
-     */
-    activityIcon?: React__default.ReactNode;
-    /**
-     * The icon to use for the spinner.
-     * @default <SpinnerIcon />
-     */
-    spinnerIcon?: React__default.ReactNode;
-    /**
-     * The icon to use for the stop button.
-     * @default <StopIcon />
-     */
-    stopIcon?: React__default.ReactNode;
-    /**
-     * The icon to use for the regenerate button.
-     * @default <RegenerateIcon />
-     */
-    regenerateIcon?: React__default.ReactNode;
-    /**
-     * The icons to use for push to talk.
-     * @default <PushToTalkIcon />
-     */
-    pushToTalkIcon?: React__default.ReactNode;
-}
-/**
- * Labels for CopilotChat component.
- */
-interface CopilotChatLabels {
-    /**
-     * 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 when an error occurs.
-     * @default "❌ An error occurred. Please try again."
-     */
-    error?: string;
-    /**
-     * The label to display on the stop button.
-     * @default "Stop generating"
-     */
-    stopGenerating?: string;
-    /**
-     * The label to display on the regenerate button.
-     * @default "Regenerate response"
-     */
-    regenerateResponse?: string;
-}
-interface ChatContext {
-    labels: Required<CopilotChatLabels>;
-    icons: Required<CopilotChatIcons>;
-    open: boolean;
-    setOpen: (open: boolean) => void;
-}
-declare const ChatContext: React__default.Context<ChatContext | undefined>;
-declare function useChatContext(): ChatContext;
-interface ChatContextProps {
-    labels?: CopilotChatLabels;
-    icons?: CopilotChatIcons;
-    children?: React__default.ReactNode;
-    open: boolean;
-    setOpen: (open: boolean) => void;
-}
-declare const ChatContextProvider: ({ labels, icons, children, open, setOpen, }: ChatContextProps) => react_jsx_runtime.JSX.Element;
-
-export { ChatContext, ChatContextProvider, type CopilotChatIcons, type CopilotChatLabels, useChatContext };

package/dist/components/chat/CodeBlock.d.mts

@@ -1,14 +0,0 @@
-import { FC } from 'react';
-
-interface Props {
-    language: string;
-    value: string;
-}
-interface languageMap {
-    [key: string]: string | undefined;
-}
-declare const programmingLanguages: languageMap;
-declare const generateRandomString: (length: number, lowercase?: boolean) => string;
-declare const CodeBlock: FC<Props>;
-
-export { CodeBlock, generateRandomString, programmingLanguages };

package/dist/components/chat/Header.d.mts

@@ -1,7 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { HeaderProps } from './props.mjs';
-import '@copilotkit/runtime-client-gql';
-
-declare const Header: ({}: HeaderProps) => react_jsx_runtime.JSX.Element;
-
-export { Header };

package/dist/components/chat/Icons.d.mts

@@ -1,18 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
-
-declare const OpenIcon: react_jsx_runtime.JSX.Element;
-declare const CloseIcon: react_jsx_runtime.JSX.Element;
-declare const HeaderCloseIcon: react_jsx_runtime.JSX.Element;
-declare const SendIcon: react_jsx_runtime.JSX.Element;
-declare const SpinnerIcon: react_jsx_runtime.JSX.Element;
-declare const SmallSpinnerIcon: react_jsx_runtime.JSX.Element;
-declare const ActivityIcon: react_jsx_runtime.JSX.Element;
-declare function CheckIcon({ className, ...props }: React__default.ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-declare function DownloadIcon({ className, ...props }: React__default.ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-declare function CopyIcon({ className, ...props }: React__default.ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
-declare const StopIcon: react_jsx_runtime.JSX.Element;
-declare const RegenerateIcon: react_jsx_runtime.JSX.Element;
-declare const PushToTalkIcon: react_jsx_runtime.JSX.Element;
-
-export { ActivityIcon, CheckIcon, CloseIcon, CopyIcon, DownloadIcon, HeaderCloseIcon, OpenIcon, PushToTalkIcon, RegenerateIcon, SendIcon, SmallSpinnerIcon, SpinnerIcon, StopIcon };

package/dist/components/chat/Input.d.mts

@@ -1,7 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { InputProps } from './props.mjs';
-import '@copilotkit/runtime-client-gql';
-
-declare const Input: ({ inProgress, onSend, isVisible }: InputProps) => react_jsx_runtime.JSX.Element;
-
-export { Input };

package/dist/components/chat/Markdown.d.mts

@@ -1,8 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-type MarkdownProps = {
-    content: string;
-};
-declare const Markdown: ({ content }: MarkdownProps) => react_jsx_runtime.JSX.Element;
-
-export { Markdown };

package/dist/components/chat/Messages.d.mts

@@ -1,7 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { MessagesProps } from './props.mjs';
-import '@copilotkit/runtime-client-gql';
-
-declare const Messages: ({ messages, inProgress, children }: MessagesProps) => react_jsx_runtime.JSX.Element;
-
-export { Messages };

package/dist/components/chat/Modal.d.mts

@@ -1,51 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
-import { WindowProps, ButtonProps, HeaderProps } from './props.mjs';
-import { CopilotChatProps } from './Chat.mjs';
-import '@copilotkit/runtime-client-gql';
-import './ChatContext.mjs';
-import '@copilotkit/react-core';
-import '../../types/suggestions.mjs';
-
-interface CopilotModalProps extends CopilotChatProps {
-    /**
-     * 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 shortcut key to open the chat window.
-     * Uses Command-[shortcut] on a Mac and Ctrl-[shortcut] on Windows.
-     * @default '/'
-     */
-    shortcut?: string;
-    /**
-     * A callback that gets called when the chat window opens or closes.
-     */
-    onSetOpen?: (open: boolean) => void;
-    /**
-     * A custom Window component to use instead of the default.
-     */
-    Window?: React__default.ComponentType<WindowProps>;
-    /**
-     * A custom Button component to use instead of the default.
-     */
-    Button?: React__default.ComponentType<ButtonProps>;
-    /**
-     * A custom Header component to use instead of the default.
-     */
-    Header?: React__default.ComponentType<HeaderProps>;
-}
-declare const CopilotModal: ({ instructions, defaultOpen, clickOutsideToClose, hitEscapeToClose, onSetOpen, onSubmitMessage, shortcut, icons, labels, makeSystemMessage, showResponseButton, onInProgress, Window, Button, Header, Messages, Input, ResponseButton, className, children, }: CopilotModalProps) => react_jsx_runtime.JSX.Element;
-
-export { CopilotModal, type CopilotModalProps };

package/dist/components/chat/Popup.d.mts

@@ -1,13 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CopilotModalProps } from './Modal.mjs';
-import 'react';
-import './props.mjs';
-import '@copilotkit/runtime-client-gql';
-import './Chat.mjs';
-import './ChatContext.mjs';
-import '@copilotkit/react-core';
-import '../../types/suggestions.mjs';
-
-declare function CopilotPopup(props: CopilotModalProps): react_jsx_runtime.JSX.Element;
-
-export { CopilotPopup };

package/dist/components/chat/Response.d.mts

@@ -1,7 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ResponseButtonProps } from './props.mjs';
-import '@copilotkit/runtime-client-gql';
-
-declare const ResponseButton: ({ onClick, inProgress }: ResponseButtonProps) => react_jsx_runtime.JSX.Element;
-
-export { ResponseButton };

package/dist/components/chat/Sidebar.d.mts

@@ -1,13 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CopilotModalProps } from './Modal.mjs';
-import 'react';
-import './props.mjs';
-import '@copilotkit/runtime-client-gql';
-import './Chat.mjs';
-import './ChatContext.mjs';
-import '@copilotkit/react-core';
-import '../../types/suggestions.mjs';
-
-declare function CopilotSidebar(props: CopilotModalProps): react_jsx_runtime.JSX.Element;
-
-export { CopilotSidebar };

package/dist/components/chat/Suggestion.d.mts

@@ -1,14 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CopilotContextParams, CopilotChatSuggestionConfiguration } from '@copilotkit/react-core';
-import { SuggestionsProps } from './props.mjs';
-import '@copilotkit/runtime-client-gql';
-
-declare function Suggestion({ title, message, onClick, partial, className }: SuggestionsProps): react_jsx_runtime.JSX.Element;
-declare const reloadSuggestions: (context: CopilotContextParams, chatSuggestionConfiguration: {
-    [key: string]: CopilotChatSuggestionConfiguration;
-}, setCurrentSuggestions: (suggestions: {
-    title: string;
-    message: string;
-}[]) => void, abortControllerRef: React.MutableRefObject<AbortController | null>) => Promise<void>;
-
-export { Suggestion, reloadSuggestions };

package/dist/components/chat/Textarea.d.mts

@@ -1,13 +0,0 @@
-import React__default from 'react';
-
-interface AutoResizingTextareaProps {
-    maxRows?: number;
-    placeholder?: string;
-    value: string;
-    onChange: (event: React__default.ChangeEvent<HTMLTextAreaElement>) => void;
-    onKeyDown?: (event: React__default.KeyboardEvent<HTMLTextAreaElement>) => void;
-    autoFocus?: boolean;
-}
-declare const AutoResizingTextarea: React__default.ForwardRefExoticComponent<AutoResizingTextareaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
-
-export { AutoResizingTextarea as default };

package/dist/components/chat/Window.d.mts

@@ -1,7 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { WindowProps } from './props.mjs';
-import '@copilotkit/runtime-client-gql';
-
-declare const Window: ({ children, clickOutsideToClose, shortcut, hitEscapeToClose, }: WindowProps) => react_jsx_runtime.JSX.Element;
-
-export { Window };

package/dist/components/chat/index.d.mts

@@ -1,11 +0,0 @@
-export { ButtonProps, HeaderProps, InputProps, MessagesProps, ResponseButtonProps, SuggestionsProps, WindowProps } from './props.mjs';
-export { CopilotPopup } from './Popup.mjs';
-export { CopilotSidebar } from './Sidebar.mjs';
-export { CopilotChat } from './Chat.mjs';
-export { useChatContext } from './ChatContext.mjs';
-import '@copilotkit/runtime-client-gql';
-import 'react/jsx-runtime';
-import './Modal.mjs';
-import 'react';
-import '@copilotkit/react-core';
-import '../../types/suggestions.mjs';

package/dist/components/chat/props.d.mts

@@ -1,35 +0,0 @@
-import { Message } from '@copilotkit/runtime-client-gql';
-
-interface ButtonProps {
-}
-interface WindowProps {
-    clickOutsideToClose: boolean;
-    hitEscapeToClose: boolean;
-    shortcut: string;
-    children?: React.ReactNode;
-}
-interface HeaderProps {
-}
-interface SuggestionsProps {
-    title: string;
-    message: string;
-    partial?: boolean;
-    className?: string;
-    onClick: (message: string) => void;
-}
-interface MessagesProps {
-    messages: Message[];
-    inProgress: boolean;
-    children?: React.ReactNode;
-}
-interface InputProps {
-    inProgress: boolean;
-    onSend: (text: string) => Promise<Message>;
-    isVisible?: boolean;
-}
-interface ResponseButtonProps {
-    onClick: () => void;
-    inProgress: boolean;
-}
-
-export type { ButtonProps, HeaderProps, InputProps, MessagesProps, ResponseButtonProps, SuggestionsProps, WindowProps };

package/dist/components/dev-console/console.d.mts

@@ -1,10 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare function CopilotDevConsole(): react_jsx_runtime.JSX.Element | null;
-declare function DebugMenuButton({ setShowDevConsole, checkForUpdates, mode, }: {
-    setShowDevConsole: (show: boolean) => void;
-    checkForUpdates: (force: boolean) => void;
-    mode: "full" | "compact";
-}): react_jsx_runtime.JSX.Element;
-
-export { CopilotDevConsole, DebugMenuButton as default };

package/dist/components/dev-console/icons.d.mts

@@ -1,9 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare const ExclamationMarkTriangleIcon: react_jsx_runtime.JSX.Element;
-declare const ExclamationMarkIcon: react_jsx_runtime.JSX.Element;
-declare const ChevronDownIcon: react_jsx_runtime.JSX.Element;
-declare const CheckIcon: react_jsx_runtime.JSX.Element;
-declare const CopilotKitIcon: react_jsx_runtime.JSX.Element;
-
-export { CheckIcon, ChevronDownIcon, CopilotKitIcon, ExclamationMarkIcon, ExclamationMarkTriangleIcon };

package/dist/components/dev-console/index.d.mts

@@ -1,5 +0,0 @@
-export { shouldShowDevConsole } from './utils.mjs';
-export { CopilotDevConsole } from './console.mjs';
-import '@copilotkit/react-core';
-import './types.mjs';
-import 'react/jsx-runtime';

package/dist/components/dev-console/types.d.mts

@@ -1,9 +0,0 @@
-interface CopilotKitVersion {
-    current: string;
-    latest: string;
-    severity: "low" | "medium" | "high";
-    advisory: string | null;
-    lastChecked: number;
-}
-
-export type { CopilotKitVersion };

package/dist/components/dev-console/utils.d.mts

@@ -1,10 +0,0 @@
-import { CopilotContextParams } from '@copilotkit/react-core';
-import { CopilotKitVersion } from './types.mjs';
-
-declare function shouldShowDevConsole(showDevConsole: boolean | "auto"): boolean;
-declare function getPublishedCopilotKitVersion(current: string, forceCheck?: boolean): Promise<CopilotKitVersion>;
-declare function logReadables(context: CopilotContextParams): void;
-declare function logActions(context: CopilotContextParams): void;
-declare function logMessages(context: CopilotContextParams): void;
-
-export { getPublishedCopilotKitVersion, logActions, logMessages, logReadables, shouldShowDevConsole };

package/dist/components/index.d.mts

@@ -1,11 +0,0 @@
-export { ButtonProps, HeaderProps, InputProps, MessagesProps, ResponseButtonProps, SuggestionsProps, WindowProps } from './chat/props.mjs';
-export { CopilotPopup } from './chat/Popup.mjs';
-export { CopilotSidebar } from './chat/Sidebar.mjs';
-export { CopilotChat } from './chat/Chat.mjs';
-export { useChatContext } from './chat/ChatContext.mjs';
-import '@copilotkit/runtime-client-gql';
-import 'react/jsx-runtime';
-import './chat/Modal.mjs';
-import 'react';
-import '@copilotkit/react-core';
-import '../types/suggestions.mjs';

package/dist/context/index.d.mts

@@ -1,2 +0,0 @@
-
-export {  }

package/dist/hooks/index.d.mts

@@ -1 +0,0 @@
-export { useCopilotChatSuggestions } from './use-copilot-chat-suggestions.mjs';