@copilotkit/react-ui 1.59.5 → 1.60.1
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.umd.js
CHANGED
|
@@ -2213,69 +2213,6 @@ rehype_raw = __toESM(rehype_raw);
|
|
|
2213
2213
|
|
|
2214
2214
|
//#endregion
|
|
2215
2215
|
//#region src/components/chat/Chat.tsx
|
|
2216
|
-
/**
|
|
2217
|
-
* <br/>
|
|
2218
|
-
* <img src="https://cdn.copilotkit.ai/docs/copilotkit/images/CopilotChat.gif" width="500" />
|
|
2219
|
-
*
|
|
2220
|
-
* A chatbot panel component for the CopilotKit framework. The component allows for a high degree
|
|
2221
|
-
* of customization through various props and custom CSS.
|
|
2222
|
-
*
|
|
2223
|
-
* ## Install Dependencies
|
|
2224
|
-
*
|
|
2225
|
-
* This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
|
|
2226
|
-
*
|
|
2227
|
-
* ```shell npm2yarn \"@copilotkit/react-ui"\
|
|
2228
|
-
* npm install @copilotkit/react-core @copilotkit/react-ui
|
|
2229
|
-
* ```
|
|
2230
|
-
*
|
|
2231
|
-
* ## Usage
|
|
2232
|
-
*
|
|
2233
|
-
* ```tsx
|
|
2234
|
-
* import { CopilotChat } from "@copilotkit/react-ui";
|
|
2235
|
-
* import "@copilotkit/react-ui/styles.css";
|
|
2236
|
-
*
|
|
2237
|
-
* <CopilotChat
|
|
2238
|
-
* labels={{
|
|
2239
|
-
* title: "Your Assistant",
|
|
2240
|
-
* initial: "Hi! 👋 How can I assist you today?",
|
|
2241
|
-
* }}
|
|
2242
|
-
* />
|
|
2243
|
-
* ```
|
|
2244
|
-
*
|
|
2245
|
-
* ### With Observability Hooks
|
|
2246
|
-
*
|
|
2247
|
-
* To monitor user interactions, provide the `observabilityHooks` prop.
|
|
2248
|
-
* **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
|
|
2249
|
-
*
|
|
2250
|
-
* ```tsx
|
|
2251
|
-
* <CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
|
|
2252
|
-
* <CopilotChat
|
|
2253
|
-
* observabilityHooks={{
|
|
2254
|
-
* onMessageSent: (message) => {
|
|
2255
|
-
* console.log("Message sent:", message);
|
|
2256
|
-
* },
|
|
2257
|
-
* }}
|
|
2258
|
-
* />
|
|
2259
|
-
* </CopilotKit>
|
|
2260
|
-
* ```
|
|
2261
|
-
*
|
|
2262
|
-
* ### Look & Feel
|
|
2263
|
-
*
|
|
2264
|
-
* By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
|
|
2265
|
-
* ```tsx title="YourRootComponent.tsx"
|
|
2266
|
-
* ...
|
|
2267
|
-
* import "@copilotkit/react-ui/styles.css"; // [!code highlight]
|
|
2268
|
-
*
|
|
2269
|
-
* export function YourRootComponent() {
|
|
2270
|
-
* return (
|
|
2271
|
-
* <CopilotKit>
|
|
2272
|
-
* ...
|
|
2273
|
-
* </CopilotKit>
|
|
2274
|
-
* );
|
|
2275
|
-
* }
|
|
2276
|
-
* ```
|
|
2277
|
-
* 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.
|
|
2278
|
-
*/
|
|
2279
2216
|
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 }) {
|
|
2280
2217
|
var _resolvedAttachments$, _resolvedAttachments$2, _resolvedAttachments$3;
|
|
2281
2218
|
const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError, setInternalErrorHandler, removeInternalErrorHandler } = (0, _copilotkit_react_core.useCopilotContext)();
|
|
@@ -2769,73 +2706,6 @@ rehype_raw = __toESM(rehype_raw);
|
|
|
2769
2706
|
|
|
2770
2707
|
//#endregion
|
|
2771
2708
|
//#region src/components/chat/Popup.tsx
|
|
2772
|
-
/**
|
|
2773
|
-
* <br/>
|
|
2774
|
-
* <img src="https://cdn.copilotkit.ai/docs/copilotkit/images/CopilotPopup.gif" width="500" />
|
|
2775
|
-
*
|
|
2776
|
-
* A chatbot popup component for the CopilotKit framework. The component allows for a high degree
|
|
2777
|
-
* of customization through various props and custom CSS.
|
|
2778
|
-
*
|
|
2779
|
-
* See [CopilotSidebar](/reference/v1/components/chat/CopilotSidebar) for a sidebar version of this component.
|
|
2780
|
-
*
|
|
2781
|
-
* ## Install Dependencies
|
|
2782
|
-
*
|
|
2783
|
-
* This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
|
|
2784
|
-
*
|
|
2785
|
-
* ```shell npm2yarn \"@copilotkit/react-ui"\
|
|
2786
|
-
* npm install @copilotkit/react-core @copilotkit/react-ui
|
|
2787
|
-
* ```
|
|
2788
|
-
* ## Usage
|
|
2789
|
-
*
|
|
2790
|
-
* ```tsx
|
|
2791
|
-
* import { CopilotPopup } from "@copilotkit/react-ui";
|
|
2792
|
-
* import "@copilotkit/react-ui/styles.css";
|
|
2793
|
-
*
|
|
2794
|
-
* <CopilotPopup
|
|
2795
|
-
* labels={{
|
|
2796
|
-
* title: "Your Assistant",
|
|
2797
|
-
* initial: "Hi! 👋 How can I assist you today?",
|
|
2798
|
-
* }}
|
|
2799
|
-
* />
|
|
2800
|
-
* ```
|
|
2801
|
-
*
|
|
2802
|
-
* ### With Observability Hooks
|
|
2803
|
-
*
|
|
2804
|
-
* To monitor user interactions, provide the `observabilityHooks` prop.
|
|
2805
|
-
* **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
|
|
2806
|
-
*
|
|
2807
|
-
* ```tsx
|
|
2808
|
-
* <CopilotKit publicApiKey="YOUR_PUBLIC_API_KEY">
|
|
2809
|
-
* <CopilotPopup
|
|
2810
|
-
* observabilityHooks={{
|
|
2811
|
-
* onChatExpanded: () => {
|
|
2812
|
-
* console.log("Popup opened");
|
|
2813
|
-
* },
|
|
2814
|
-
* onChatMinimized: () => {
|
|
2815
|
-
* console.log("Popup closed");
|
|
2816
|
-
* },
|
|
2817
|
-
* }}
|
|
2818
|
-
* />
|
|
2819
|
-
* </CopilotKit>
|
|
2820
|
-
* ```
|
|
2821
|
-
*
|
|
2822
|
-
* ### Look & Feel
|
|
2823
|
-
*
|
|
2824
|
-
* By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
|
|
2825
|
-
* ```tsx title="YourRootComponent.tsx"
|
|
2826
|
-
* ...
|
|
2827
|
-
* import "@copilotkit/react-ui/styles.css"; // [!code highlight]
|
|
2828
|
-
*
|
|
2829
|
-
* export function YourRootComponent() {
|
|
2830
|
-
* return (
|
|
2831
|
-
* <CopilotKit>
|
|
2832
|
-
* ...
|
|
2833
|
-
* </CopilotKit>
|
|
2834
|
-
* );
|
|
2835
|
-
* }
|
|
2836
|
-
* ```
|
|
2837
|
-
* 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.
|
|
2838
|
-
*/
|
|
2839
2709
|
function CopilotPopup(props) {
|
|
2840
2710
|
props = {
|
|
2841
2711
|
...props,
|
|
@@ -2884,10 +2754,9 @@ rehype_raw = __toESM(rehype_raw);
|
|
|
2884
2754
|
* ### With Observability Hooks
|
|
2885
2755
|
*
|
|
2886
2756
|
* To monitor user interactions, provide the `observabilityHooks` prop.
|
|
2887
|
-
* **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.
|
|
2888
2757
|
*
|
|
2889
2758
|
* ```tsx
|
|
2890
|
-
* <CopilotKit
|
|
2759
|
+
* <CopilotKit>
|
|
2891
2760
|
* <CopilotSidebar
|
|
2892
2761
|
* observabilityHooks={{
|
|
2893
2762
|
* onChatExpanded: () => {
|