@copilotkit/react-ui 1.59.5 → 1.60.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -132
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +0 -2
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +0 -2
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +1 -132
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +1 -132
- package/dist/index.umd.js.map +1 -1
- package/package.json +4 -4
- package/src/components/chat/Chat.tsx +16 -18
- package/src/components/chat/Popup.tsx +3 -3
- package/src/components/chat/Sidebar.tsx +3 -3
- package/src/components/chat/props.ts +4 -5
package/dist/index.cjs
CHANGED
|
@@ -2201,69 +2201,6 @@ function Suggestions({ suggestions, onSuggestionClick, isLoading }) {
|
|
|
2201
2201
|
|
|
2202
2202
|
//#endregion
|
|
2203
2203
|
//#region src/components/chat/Chat.tsx
|
|
2204
|
-
/**
|
|
2205
|
-
* <br/>
|
|
2206
|
-
* <img src="https://cdn.copilotkit.ai/docs/copilotkit/images/CopilotChat.gif" width="500" />
|
|
2207
|
-
*
|
|
2208
|
-
* A chatbot panel component for the CopilotKit framework. The component allows for a high degree
|
|
2209
|
-
* of customization through various props and custom CSS.
|
|
2210
|
-
*
|
|
2211
|
-
* ## Install Dependencies
|
|
2212
|
-
*
|
|
2213
|
-
* This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
|
|
2214
|
-
*
|
|
2215
|
-
* ```shell npm2yarn \"@copilotkit/react-ui"\
|
|
2216
|
-
* npm install @copilotkit/react-core @copilotkit/react-ui
|
|
2217
|
-
* ```
|
|
2218
|
-
*
|
|
2219
|
-
* ## Usage
|
|
2220
|
-
*
|
|
2221
|
-
* ```tsx
|
|
2222
|
-
* import { CopilotChat } from "@copilotkit/react-ui";
|
|
2223
|
-
* import "@copilotkit/react-ui/styles.css";
|
|
2224
|
-
*
|
|
2225
|
-
* <CopilotChat
|
|
2226
|
-
* labels={{
|
|
2227
|
-
* title: "Your Assistant",
|
|
2228
|
-
* initial: "Hi! 👋 How can I assist you today?",
|
|
2229
|
-
* }}
|
|
2230
|
-
* />
|
|
2231
|
-
* ```
|
|
2232
|
-
*
|
|
2233
|
-
* ### With Observability Hooks
|
|
2234
|
-
*
|
|
2235
|
-
* To monitor user interactions, provide the `observabilityHooks` prop.
|
|
2236
|
-
* **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
|
|
2237
|
-
*
|
|
2238
|
-
* ```tsx
|
|
2239
|
-
* <CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
|
|
2240
|
-
* <CopilotChat
|
|
2241
|
-
* observabilityHooks={{
|
|
2242
|
-
* onMessageSent: (message) => {
|
|
2243
|
-
* console.log("Message sent:", message);
|
|
2244
|
-
* },
|
|
2245
|
-
* }}
|
|
2246
|
-
* />
|
|
2247
|
-
* </CopilotKit>
|
|
2248
|
-
* ```
|
|
2249
|
-
*
|
|
2250
|
-
* ### Look & Feel
|
|
2251
|
-
*
|
|
2252
|
-
* By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
|
|
2253
|
-
* ```tsx title="YourRootComponent.tsx"
|
|
2254
|
-
* ...
|
|
2255
|
-
* import "@copilotkit/react-ui/styles.css"; // [!code highlight]
|
|
2256
|
-
*
|
|
2257
|
-
* export function YourRootComponent() {
|
|
2258
|
-
* return (
|
|
2259
|
-
* <CopilotKit>
|
|
2260
|
-
* ...
|
|
2261
|
-
* </CopilotKit>
|
|
2262
|
-
* );
|
|
2263
|
-
* }
|
|
2264
|
-
* ```
|
|
2265
|
-
* For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.
|
|
2266
|
-
*/
|
|
2267
2204
|
function CopilotChat({ instructions, suggestions = "auto", onSubmitMessage, makeSystemMessage, disableSystemMessage, onInProgress, onStopGeneration, onReloadMessages, onRegenerate, onCopy, onThumbsUp, onThumbsDown, markdownTagRenderers, Messages: Messages$2 = Messages, RenderMessage: RenderMessage$1 = RenderMessage, RenderSuggestionsList = Suggestions, Input: Input$2 = Input, className, icons, labels, AssistantMessage: AssistantMessage$2 = AssistantMessage, UserMessage: UserMessage$2 = UserMessage, ImageRenderer: ImageRenderer$1 = ImageRenderer, ErrorMessage, imageUploadsEnabled, inputFileAccept = "image/*", attachments, hideStopButton, observabilityHooks, renderError, onError, RenderTextMessage, RenderActionExecutionMessage, RenderAgentStateMessage, RenderResultMessage, RenderImageMessage }) {
|
|
2268
2205
|
const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError, setInternalErrorHandler, removeInternalErrorHandler } = (0, _copilotkit_react_core.useCopilotContext)();
|
|
2269
2206
|
const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
|
|
@@ -2749,73 +2686,6 @@ const CopilotModal = ({ instructions, defaultOpen = false, clickOutsideToClose =
|
|
|
2749
2686
|
|
|
2750
2687
|
//#endregion
|
|
2751
2688
|
//#region src/components/chat/Popup.tsx
|
|
2752
|
-
/**
|
|
2753
|
-
* <br/>
|
|
2754
|
-
* <img src="https://cdn.copilotkit.ai/docs/copilotkit/images/CopilotPopup.gif" width="500" />
|
|
2755
|
-
*
|
|
2756
|
-
* A chatbot popup component for the CopilotKit framework. The component allows for a high degree
|
|
2757
|
-
* of customization through various props and custom CSS.
|
|
2758
|
-
*
|
|
2759
|
-
* See [CopilotSidebar](/reference/v1/components/chat/CopilotSidebar) for a sidebar version of this component.
|
|
2760
|
-
*
|
|
2761
|
-
* ## Install Dependencies
|
|
2762
|
-
*
|
|
2763
|
-
* This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
|
|
2764
|
-
*
|
|
2765
|
-
* ```shell npm2yarn \"@copilotkit/react-ui"\
|
|
2766
|
-
* npm install @copilotkit/react-core @copilotkit/react-ui
|
|
2767
|
-
* ```
|
|
2768
|
-
* ## Usage
|
|
2769
|
-
*
|
|
2770
|
-
* ```tsx
|
|
2771
|
-
* import { CopilotPopup } from "@copilotkit/react-ui";
|
|
2772
|
-
* import "@copilotkit/react-ui/styles.css";
|
|
2773
|
-
*
|
|
2774
|
-
* <CopilotPopup
|
|
2775
|
-
* labels={{
|
|
2776
|
-
* title: "Your Assistant",
|
|
2777
|
-
* initial: "Hi! 👋 How can I assist you today?",
|
|
2778
|
-
* }}
|
|
2779
|
-
* />
|
|
2780
|
-
* ```
|
|
2781
|
-
*
|
|
2782
|
-
* ### With Observability Hooks
|
|
2783
|
-
*
|
|
2784
|
-
* To monitor user interactions, provide the `observabilityHooks` prop.
|
|
2785
|
-
* **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
|
|
2786
|
-
*
|
|
2787
|
-
* ```tsx
|
|
2788
|
-
* <CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
|
|
2789
|
-
* <CopilotPopup
|
|
2790
|
-
* observabilityHooks={{
|
|
2791
|
-
* onChatExpanded: () => {
|
|
2792
|
-
* console.log("Popup opened");
|
|
2793
|
-
* },
|
|
2794
|
-
* onChatMinimized: () => {
|
|
2795
|
-
* console.log("Popup closed");
|
|
2796
|
-
* },
|
|
2797
|
-
* }}
|
|
2798
|
-
* />
|
|
2799
|
-
* </CopilotKit>
|
|
2800
|
-
* ```
|
|
2801
|
-
*
|
|
2802
|
-
* ### Look & Feel
|
|
2803
|
-
*
|
|
2804
|
-
* By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
|
|
2805
|
-
* ```tsx title="YourRootComponent.tsx"
|
|
2806
|
-
* ...
|
|
2807
|
-
* import "@copilotkit/react-ui/styles.css"; // [!code highlight]
|
|
2808
|
-
*
|
|
2809
|
-
* export function YourRootComponent() {
|
|
2810
|
-
* return (
|
|
2811
|
-
* <CopilotKit>
|
|
2812
|
-
* ...
|
|
2813
|
-
* </CopilotKit>
|
|
2814
|
-
* );
|
|
2815
|
-
* }
|
|
2816
|
-
* ```
|
|
2817
|
-
* For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.
|
|
2818
|
-
*/
|
|
2819
2689
|
function CopilotPopup(props) {
|
|
2820
2690
|
props = {
|
|
2821
2691
|
...props,
|
|
@@ -2864,10 +2734,9 @@ function CopilotPopup(props) {
|
|
|
2864
2734
|
* ### With Observability Hooks
|
|
2865
2735
|
*
|
|
2866
2736
|
* To monitor user interactions, provide the `observabilityHooks` prop.
|
|
2867
|
-
* **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
|
|
2868
2737
|
*
|
|
2869
2738
|
* ```tsx
|
|
2870
|
-
* <CopilotKit
|
|
2739
|
+
* <CopilotKit>
|
|
2871
2740
|
* <CopilotSidebar
|
|
2872
2741
|
* observabilityHooks={{
|
|
2873
2742
|
* onChatExpanded: () => {
|