@yext/chat-ui-react 0.12.0 → 0.12.2
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/THIRD-PARTY-NOTICES +39 -10
- package/package.json +16 -5
- package/lib/bundle.css +0 -1
- package/lib/commonjs/package.json.js +0 -6
- package/lib/commonjs/package.json.js.map +0 -1
- package/lib/commonjs/src/components/ChatHeader.d.ts +0 -53
- package/lib/commonjs/src/components/ChatHeader.d.ts.map +0 -1
- package/lib/commonjs/src/components/ChatHeader.js +0 -52
- package/lib/commonjs/src/components/ChatHeader.js.map +0 -1
- package/lib/commonjs/src/components/ChatInput.d.ts +0 -60
- package/lib/commonjs/src/components/ChatInput.d.ts.map +0 -1
- package/lib/commonjs/src/components/ChatInput.js +0 -76
- package/lib/commonjs/src/components/ChatInput.js.map +0 -1
- package/lib/commonjs/src/components/ChatPanel.d.ts +0 -74
- package/lib/commonjs/src/components/ChatPanel.d.ts.map +0 -1
- package/lib/commonjs/src/components/ChatPanel.js +0 -178
- package/lib/commonjs/src/components/ChatPanel.js.map +0 -1
- package/lib/commonjs/src/components/ChatPopUp.d.ts +0 -76
- package/lib/commonjs/src/components/ChatPopUp.d.ts.map +0 -1
- package/lib/commonjs/src/components/ChatPopUp.js +0 -160
- package/lib/commonjs/src/components/ChatPopUp.js.map +0 -1
- package/lib/commonjs/src/components/FeedbackButtons.d.ts +0 -35
- package/lib/commonjs/src/components/FeedbackButtons.d.ts.map +0 -1
- package/lib/commonjs/src/components/FeedbackButtons.js +0 -59
- package/lib/commonjs/src/components/FeedbackButtons.js.map +0 -1
- package/lib/commonjs/src/components/InitialMessagePopUp.d.ts +0 -33
- package/lib/commonjs/src/components/InitialMessagePopUp.d.ts.map +0 -1
- package/lib/commonjs/src/components/InitialMessagePopUp.js +0 -44
- package/lib/commonjs/src/components/InitialMessagePopUp.js.map +0 -1
- package/lib/commonjs/src/components/LoadingDots.d.ts +0 -10
- package/lib/commonjs/src/components/LoadingDots.d.ts.map +0 -1
- package/lib/commonjs/src/components/LoadingDots.js +0 -23
- package/lib/commonjs/src/components/LoadingDots.js.map +0 -1
- package/lib/commonjs/src/components/Markdown.d.ts +0 -39
- package/lib/commonjs/src/components/Markdown.d.ts.map +0 -1
- package/lib/commonjs/src/components/Markdown.js +0 -72
- package/lib/commonjs/src/components/Markdown.js.map +0 -1
- package/lib/commonjs/src/components/MessageBubble.d.ts +0 -64
- package/lib/commonjs/src/components/MessageBubble.d.ts.map +0 -1
- package/lib/commonjs/src/components/MessageBubble.js +0 -77
- package/lib/commonjs/src/components/MessageBubble.js.map +0 -1
- package/lib/commonjs/src/components/MessageSuggestions.d.ts +0 -37
- package/lib/commonjs/src/components/MessageSuggestions.d.ts.map +0 -1
- package/lib/commonjs/src/components/MessageSuggestions.js +0 -55
- package/lib/commonjs/src/components/MessageSuggestions.js.map +0 -1
- package/lib/commonjs/src/components/index.d.ts +0 -14
- package/lib/commonjs/src/components/index.d.ts.map +0 -1
- package/lib/commonjs/src/hooks/index.d.ts +0 -3
- package/lib/commonjs/src/hooks/index.d.ts.map +0 -1
- package/lib/commonjs/src/hooks/useComposedCssClasses.d.ts +0 -30
- package/lib/commonjs/src/hooks/useComposedCssClasses.d.ts.map +0 -1
- package/lib/commonjs/src/hooks/useComposedCssClasses.js +0 -61
- package/lib/commonjs/src/hooks/useComposedCssClasses.js.map +0 -1
- package/lib/commonjs/src/hooks/useDefaultHandleApiError.d.ts +0 -8
- package/lib/commonjs/src/hooks/useDefaultHandleApiError.d.ts.map +0 -1
- package/lib/commonjs/src/hooks/useDefaultHandleApiError.js +0 -25
- package/lib/commonjs/src/hooks/useDefaultHandleApiError.js.map +0 -1
- package/lib/commonjs/src/hooks/useFetchInitialMessage.d.ts +0 -13
- package/lib/commonjs/src/hooks/useFetchInitialMessage.d.ts.map +0 -1
- package/lib/commonjs/src/hooks/useFetchInitialMessage.js +0 -41
- package/lib/commonjs/src/hooks/useFetchInitialMessage.js.map +0 -1
- package/lib/commonjs/src/hooks/useReportAnalyticsEvent.d.ts +0 -8
- package/lib/commonjs/src/hooks/useReportAnalyticsEvent.d.ts.map +0 -1
- package/lib/commonjs/src/hooks/useReportAnalyticsEvent.js +0 -21
- package/lib/commonjs/src/hooks/useReportAnalyticsEvent.js.map +0 -1
- package/lib/commonjs/src/hooks/useSendMessageWithRetries.d.ts +0 -17
- package/lib/commonjs/src/hooks/useSendMessageWithRetries.d.ts.map +0 -1
- package/lib/commonjs/src/hooks/useSendMessageWithRetries.js +0 -54
- package/lib/commonjs/src/hooks/useSendMessageWithRetries.js.map +0 -1
- package/lib/commonjs/src/icons/Arrow.d.ts +0 -3
- package/lib/commonjs/src/icons/Arrow.d.ts.map +0 -1
- package/lib/commonjs/src/icons/Arrow.js +0 -16
- package/lib/commonjs/src/icons/Arrow.js.map +0 -1
- package/lib/commonjs/src/icons/Chat.d.ts +0 -5
- package/lib/commonjs/src/icons/Chat.d.ts.map +0 -1
- package/lib/commonjs/src/icons/Chat.js +0 -20
- package/lib/commonjs/src/icons/Chat.js.map +0 -1
- package/lib/commonjs/src/icons/Cross.d.ts +0 -5
- package/lib/commonjs/src/icons/Cross.d.ts.map +0 -1
- package/lib/commonjs/src/icons/Cross.js +0 -16
- package/lib/commonjs/src/icons/Cross.js.map +0 -1
- package/lib/commonjs/src/icons/DualSync.d.ts +0 -5
- package/lib/commonjs/src/icons/DualSync.d.ts.map +0 -1
- package/lib/commonjs/src/icons/DualSync.js +0 -16
- package/lib/commonjs/src/icons/DualSync.js.map +0 -1
- package/lib/commonjs/src/icons/ThumbsDown.d.ts +0 -5
- package/lib/commonjs/src/icons/ThumbsDown.d.ts.map +0 -1
- package/lib/commonjs/src/icons/ThumbsDown.js +0 -15
- package/lib/commonjs/src/icons/ThumbsDown.js.map +0 -1
- package/lib/commonjs/src/icons/ThumbsDownFill.d.ts +0 -5
- package/lib/commonjs/src/icons/ThumbsDownFill.d.ts.map +0 -1
- package/lib/commonjs/src/icons/ThumbsDownFill.js +0 -15
- package/lib/commonjs/src/icons/ThumbsDownFill.js.map +0 -1
- package/lib/commonjs/src/icons/ThumbsUp.d.ts +0 -5
- package/lib/commonjs/src/icons/ThumbsUp.d.ts.map +0 -1
- package/lib/commonjs/src/icons/ThumbsUp.js +0 -15
- package/lib/commonjs/src/icons/ThumbsUp.js.map +0 -1
- package/lib/commonjs/src/icons/ThumbsUpFill.d.ts +0 -5
- package/lib/commonjs/src/icons/ThumbsUpFill.d.ts.map +0 -1
- package/lib/commonjs/src/icons/ThumbsUpFill.js +0 -15
- package/lib/commonjs/src/icons/ThumbsUpFill.js.map +0 -1
- package/lib/commonjs/src/index.d.ts +0 -3
- package/lib/commonjs/src/index.d.ts.map +0 -1
- package/lib/commonjs/src/index.js +0 -20
- package/lib/commonjs/src/index.js.map +0 -1
- package/lib/commonjs/src/tsdoc-metadata.json +0 -11
- package/lib/commonjs/src/utils/withStylelessCssClasses.d.ts +0 -17
- package/lib/commonjs/src/utils/withStylelessCssClasses.d.ts.map +0 -1
- package/lib/commonjs/src/utils/withStylelessCssClasses.js +0 -30
- package/lib/commonjs/src/utils/withStylelessCssClasses.js.map +0 -1
- package/lib/esm/index.d.ts +0 -411
- package/lib/esm/package.json.mjs +0 -4
- package/lib/esm/package.json.mjs.map +0 -1
- package/lib/esm/src/components/ChatHeader.d.ts +0 -53
- package/lib/esm/src/components/ChatHeader.d.ts.map +0 -1
- package/lib/esm/src/components/ChatHeader.mjs +0 -46
- package/lib/esm/src/components/ChatHeader.mjs.map +0 -1
- package/lib/esm/src/components/ChatInput.d.ts +0 -60
- package/lib/esm/src/components/ChatInput.d.ts.map +0 -1
- package/lib/esm/src/components/ChatInput.mjs +0 -69
- package/lib/esm/src/components/ChatInput.mjs.map +0 -1
- package/lib/esm/src/components/ChatPanel.d.ts +0 -74
- package/lib/esm/src/components/ChatPanel.d.ts.map +0 -1
- package/lib/esm/src/components/ChatPanel.mjs +0 -169
- package/lib/esm/src/components/ChatPanel.mjs.map +0 -1
- package/lib/esm/src/components/ChatPopUp.d.ts +0 -76
- package/lib/esm/src/components/ChatPopUp.d.ts.map +0 -1
- package/lib/esm/src/components/ChatPopUp.mjs +0 -154
- package/lib/esm/src/components/ChatPopUp.mjs.map +0 -1
- package/lib/esm/src/components/FeedbackButtons.d.ts +0 -35
- package/lib/esm/src/components/FeedbackButtons.d.ts.map +0 -1
- package/lib/esm/src/components/FeedbackButtons.mjs +0 -53
- package/lib/esm/src/components/FeedbackButtons.mjs.map +0 -1
- package/lib/esm/src/components/InitialMessagePopUp.d.ts +0 -33
- package/lib/esm/src/components/InitialMessagePopUp.d.ts.map +0 -1
- package/lib/esm/src/components/InitialMessagePopUp.mjs +0 -38
- package/lib/esm/src/components/InitialMessagePopUp.mjs.map +0 -1
- package/lib/esm/src/components/LoadingDots.d.ts +0 -10
- package/lib/esm/src/components/LoadingDots.d.ts.map +0 -1
- package/lib/esm/src/components/LoadingDots.mjs +0 -17
- package/lib/esm/src/components/LoadingDots.mjs.map +0 -1
- package/lib/esm/src/components/Markdown.d.ts +0 -39
- package/lib/esm/src/components/Markdown.d.ts.map +0 -1
- package/lib/esm/src/components/Markdown.mjs +0 -62
- package/lib/esm/src/components/Markdown.mjs.map +0 -1
- package/lib/esm/src/components/MessageBubble.d.ts +0 -64
- package/lib/esm/src/components/MessageBubble.d.ts.map +0 -1
- package/lib/esm/src/components/MessageBubble.mjs +0 -71
- package/lib/esm/src/components/MessageBubble.mjs.map +0 -1
- package/lib/esm/src/components/MessageSuggestions.d.ts +0 -37
- package/lib/esm/src/components/MessageSuggestions.d.ts.map +0 -1
- package/lib/esm/src/components/MessageSuggestions.mjs +0 -49
- package/lib/esm/src/components/MessageSuggestions.mjs.map +0 -1
- package/lib/esm/src/components/index.d.ts +0 -14
- package/lib/esm/src/components/index.d.ts.map +0 -1
- package/lib/esm/src/hooks/index.d.ts +0 -3
- package/lib/esm/src/hooks/index.d.ts.map +0 -1
- package/lib/esm/src/hooks/useComposedCssClasses.d.ts +0 -30
- package/lib/esm/src/hooks/useComposedCssClasses.d.ts.map +0 -1
- package/lib/esm/src/hooks/useComposedCssClasses.mjs +0 -59
- package/lib/esm/src/hooks/useComposedCssClasses.mjs.map +0 -1
- package/lib/esm/src/hooks/useDefaultHandleApiError.d.ts +0 -8
- package/lib/esm/src/hooks/useDefaultHandleApiError.d.ts.map +0 -1
- package/lib/esm/src/hooks/useDefaultHandleApiError.mjs +0 -23
- package/lib/esm/src/hooks/useDefaultHandleApiError.mjs.map +0 -1
- package/lib/esm/src/hooks/useFetchInitialMessage.d.ts +0 -13
- package/lib/esm/src/hooks/useFetchInitialMessage.d.ts.map +0 -1
- package/lib/esm/src/hooks/useFetchInitialMessage.mjs +0 -39
- package/lib/esm/src/hooks/useFetchInitialMessage.mjs.map +0 -1
- package/lib/esm/src/hooks/useReportAnalyticsEvent.d.ts +0 -8
- package/lib/esm/src/hooks/useReportAnalyticsEvent.d.ts.map +0 -1
- package/lib/esm/src/hooks/useReportAnalyticsEvent.mjs +0 -19
- package/lib/esm/src/hooks/useReportAnalyticsEvent.mjs.map +0 -1
- package/lib/esm/src/hooks/useSendMessageWithRetries.d.ts +0 -17
- package/lib/esm/src/hooks/useSendMessageWithRetries.d.ts.map +0 -1
- package/lib/esm/src/hooks/useSendMessageWithRetries.mjs +0 -52
- package/lib/esm/src/hooks/useSendMessageWithRetries.mjs.map +0 -1
- package/lib/esm/src/icons/Arrow.d.ts +0 -3
- package/lib/esm/src/icons/Arrow.d.ts.map +0 -1
- package/lib/esm/src/icons/Arrow.mjs +0 -10
- package/lib/esm/src/icons/Arrow.mjs.map +0 -1
- package/lib/esm/src/icons/Chat.d.ts +0 -5
- package/lib/esm/src/icons/Chat.d.ts.map +0 -1
- package/lib/esm/src/icons/Chat.mjs +0 -14
- package/lib/esm/src/icons/Chat.mjs.map +0 -1
- package/lib/esm/src/icons/Cross.d.ts +0 -5
- package/lib/esm/src/icons/Cross.d.ts.map +0 -1
- package/lib/esm/src/icons/Cross.mjs +0 -10
- package/lib/esm/src/icons/Cross.mjs.map +0 -1
- package/lib/esm/src/icons/DualSync.d.ts +0 -5
- package/lib/esm/src/icons/DualSync.d.ts.map +0 -1
- package/lib/esm/src/icons/DualSync.mjs +0 -10
- package/lib/esm/src/icons/DualSync.mjs.map +0 -1
- package/lib/esm/src/icons/ThumbsDown.d.ts +0 -5
- package/lib/esm/src/icons/ThumbsDown.d.ts.map +0 -1
- package/lib/esm/src/icons/ThumbsDown.mjs +0 -9
- package/lib/esm/src/icons/ThumbsDown.mjs.map +0 -1
- package/lib/esm/src/icons/ThumbsDownFill.d.ts +0 -5
- package/lib/esm/src/icons/ThumbsDownFill.d.ts.map +0 -1
- package/lib/esm/src/icons/ThumbsDownFill.mjs +0 -9
- package/lib/esm/src/icons/ThumbsDownFill.mjs.map +0 -1
- package/lib/esm/src/icons/ThumbsUp.d.ts +0 -5
- package/lib/esm/src/icons/ThumbsUp.d.ts.map +0 -1
- package/lib/esm/src/icons/ThumbsUp.mjs +0 -9
- package/lib/esm/src/icons/ThumbsUp.mjs.map +0 -1
- package/lib/esm/src/icons/ThumbsUpFill.d.ts +0 -5
- package/lib/esm/src/icons/ThumbsUpFill.d.ts.map +0 -1
- package/lib/esm/src/icons/ThumbsUpFill.mjs +0 -9
- package/lib/esm/src/icons/ThumbsUpFill.mjs.map +0 -1
- package/lib/esm/src/index.d.ts +0 -3
- package/lib/esm/src/index.d.ts.map +0 -1
- package/lib/esm/src/index.mjs +0 -8
- package/lib/esm/src/index.mjs.map +0 -1
- package/lib/esm/src/utils/withStylelessCssClasses.d.ts +0 -17
- package/lib/esm/src/utils/withStylelessCssClasses.d.ts.map +0 -1
- package/lib/esm/src/utils/withStylelessCssClasses.mjs +0 -28
- package/lib/esm/src/utils/withStylelessCssClasses.mjs.map +0 -1
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* The CSS class interface for the {@link ChatInput} component.
|
|
4
|
-
*
|
|
5
|
-
* @public
|
|
6
|
-
*/
|
|
7
|
-
export interface ChatInputCssClasses {
|
|
8
|
-
container?: string;
|
|
9
|
-
textArea?: string;
|
|
10
|
-
sendButton?: string;
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* The props for the {@link ChatInput} component.
|
|
14
|
-
*
|
|
15
|
-
* @public
|
|
16
|
-
*/
|
|
17
|
-
export interface ChatInputProps {
|
|
18
|
-
/**
|
|
19
|
-
* The input's placeholder text when no text has been entered by the user.
|
|
20
|
-
* Defaults to "Type a message...".
|
|
21
|
-
*/
|
|
22
|
-
placeholder?: string;
|
|
23
|
-
/**
|
|
24
|
-
* Enable streaming behavior by making a request to Chat Streaming API.
|
|
25
|
-
* This feature is experimental, and is subject to change.
|
|
26
|
-
* Defaults to false.
|
|
27
|
-
*/
|
|
28
|
-
stream?: boolean;
|
|
29
|
-
/** Enable auto focus for the input box. Defaults to false. */
|
|
30
|
-
inputAutoFocus?: boolean;
|
|
31
|
-
/**
|
|
32
|
-
* A function which is called when an error occurs from Chat API while processing the user's message.
|
|
33
|
-
* By default, the error is logged to the console and an error message is added to state.
|
|
34
|
-
*/
|
|
35
|
-
handleError?: (e: unknown) => void;
|
|
36
|
-
/** Custom icon for the send button. */
|
|
37
|
-
sendButtonIcon?: JSX.Element;
|
|
38
|
-
/** CSS classes for customizing the component styling. */
|
|
39
|
-
customCssClasses?: ChatInputCssClasses;
|
|
40
|
-
/** A callback which is called when user sends a message. */
|
|
41
|
-
onSend?: (message: string) => void;
|
|
42
|
-
/**
|
|
43
|
-
* A function which is called when a retryable error occurs from
|
|
44
|
-
* Chat API while processing the user's message.
|
|
45
|
-
*/
|
|
46
|
-
onRetry?: (e: unknown) => void;
|
|
47
|
-
}
|
|
48
|
-
/**
|
|
49
|
-
* A component that allows user to input message and send to Chat API.
|
|
50
|
-
*
|
|
51
|
-
* @remarks
|
|
52
|
-
* Pressing "Enter" key will send the current message.
|
|
53
|
-
* To add a newline, press "Shift" and "Enter".
|
|
54
|
-
*
|
|
55
|
-
* @public
|
|
56
|
-
*
|
|
57
|
-
* @param props - {@link ChatInputProps}
|
|
58
|
-
*/
|
|
59
|
-
export declare function ChatInput({ placeholder, stream, inputAutoFocus, handleError, sendButtonIcon, customCssClasses, onSend, onRetry, }: ChatInputProps): React.JSX.Element;
|
|
60
|
-
//# sourceMappingURL=ChatInput.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AASrD;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAaD;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAChC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAiC,EACjC,MAAc,EACd,cAAqB,EACrB,WAAW,EACX,cAA8B,EAC9B,gBAAgB,EAChB,MAAM,EACN,OAAO,GACR,EAAE,cAAc,qBAuEhB"}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import React, { useState, useCallback } from 'react';
|
|
2
|
-
import { useChatState } from '@yext/chat-headless-react';
|
|
3
|
-
import { ArrowIcon } from '../icons/Arrow.mjs';
|
|
4
|
-
import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
|
|
5
|
-
import TextareaAutosize from 'react-textarea-autosize';
|
|
6
|
-
import { useDefaultHandleApiError } from '../hooks/useDefaultHandleApiError.mjs';
|
|
7
|
-
import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
|
|
8
|
-
import { useSendMessageWithRetries } from '../hooks/useSendMessageWithRetries.mjs';
|
|
9
|
-
|
|
10
|
-
const builtInCssClasses = withStylelessCssClasses("Input", {
|
|
11
|
-
container: "w-full h-fit flex flex-row relative @container",
|
|
12
|
-
textArea: "w-full p-4 pr-12 border border-slate-300 rounded-3xl resize-none text-[13px] @[480px]:text-base placeholder:text-[13px] placeholder:@[480px]:text-base text-slate-900",
|
|
13
|
-
sendButton: "rounded-full p-1.5 w-8 h-8 stroke-2 text-white bg-blue-600 disabled:bg-slate-200 hover:bg-blue-800 active:scale-90 transition-all absolute right-4 bottom-2.5 @[480px]:bottom-3.5",
|
|
14
|
-
});
|
|
15
|
-
/**
|
|
16
|
-
* A component that allows user to input message and send to Chat API.
|
|
17
|
-
*
|
|
18
|
-
* @remarks
|
|
19
|
-
* Pressing "Enter" key will send the current message.
|
|
20
|
-
* To add a newline, press "Shift" and "Enter".
|
|
21
|
-
*
|
|
22
|
-
* @public
|
|
23
|
-
*
|
|
24
|
-
* @param props - {@link ChatInputProps}
|
|
25
|
-
*/
|
|
26
|
-
function ChatInput({ placeholder = "Type a message...", stream = false, inputAutoFocus = true, handleError, sendButtonIcon = React.createElement(ArrowIcon, null), customCssClasses, onSend, onRetry, }) {
|
|
27
|
-
const [input, setInput] = useState("");
|
|
28
|
-
const canSendMessage = useChatState((state) => state.conversation.canSendMessage);
|
|
29
|
-
const defaultHandleApiError = useDefaultHandleApiError();
|
|
30
|
-
const sendMessageWithRetries = useSendMessageWithRetries(stream, 1, onRetry);
|
|
31
|
-
const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
|
|
32
|
-
const sendMessage = useCallback(async () => {
|
|
33
|
-
setInput("");
|
|
34
|
-
sendMessageWithRetries(input)
|
|
35
|
-
.catch(handleError ?? defaultHandleApiError)
|
|
36
|
-
.finally(() => {
|
|
37
|
-
onSend?.(input);
|
|
38
|
-
});
|
|
39
|
-
}, [
|
|
40
|
-
sendMessageWithRetries,
|
|
41
|
-
input,
|
|
42
|
-
handleError,
|
|
43
|
-
defaultHandleApiError,
|
|
44
|
-
onSend,
|
|
45
|
-
]);
|
|
46
|
-
const handleKeyDown = useCallback((e) => {
|
|
47
|
-
if (!e.shiftKey &&
|
|
48
|
-
e.key === "Enter" &&
|
|
49
|
-
// The Japanese Keyboard uses "Enter" key to convert from Hiragana to Kanji.
|
|
50
|
-
// "isComposing" is a flag that indicates whether the event is part of an ongoing composition session.
|
|
51
|
-
// Safari does not support `isComposing` with the Japanese IME event,
|
|
52
|
-
// so we have to additionally check for the keyCode to handle that edge case.
|
|
53
|
-
!(e.nativeEvent.isComposing || e.keyCode === 229)) {
|
|
54
|
-
e.preventDefault();
|
|
55
|
-
if (canSendMessage && input.trim().length !== 0) {
|
|
56
|
-
sendMessage();
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}, [sendMessage, canSendMessage, input]);
|
|
60
|
-
const onInputChange = useCallback((e) => {
|
|
61
|
-
setInput(e.target.value);
|
|
62
|
-
}, []);
|
|
63
|
-
return (React.createElement("div", { className: cssClasses.container },
|
|
64
|
-
React.createElement(TextareaAutosize, { autoFocus: inputAutoFocus, onKeyDown: handleKeyDown, value: input, onChange: onInputChange, className: cssClasses.textArea, placeholder: placeholder }),
|
|
65
|
-
React.createElement("button", { "aria-label": "Send Message", disabled: !canSendMessage || input.trim().length === 0, onClick: sendMessage, className: cssClasses.sendButton }, sendButtonIcon)));
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
export { ChatInput };
|
|
69
|
-
//# sourceMappingURL=ChatInput.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ChatInput.mjs","sources":["../../../../src/components/ChatInput.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport { ArrowIcon } from \"../icons/Arrow\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport TextareaAutosize from \"react-textarea-autosize\";\nimport { useDefaultHandleApiError } from \"../hooks/useDefaultHandleApiError\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useSendMessageWithRetries } from \"../hooks/useSendMessageWithRetries\";\n\n/**\n * The CSS class interface for the {@link ChatInput} component.\n *\n * @public\n */\nexport interface ChatInputCssClasses {\n container?: string;\n textArea?: string;\n sendButton?: string;\n}\n\nconst builtInCssClasses: ChatInputCssClasses = withStylelessCssClasses(\n \"Input\",\n {\n container: \"w-full h-fit flex flex-row relative @container\",\n textArea:\n \"w-full p-4 pr-12 border border-slate-300 rounded-3xl resize-none text-[13px] @[480px]:text-base placeholder:text-[13px] placeholder:@[480px]:text-base text-slate-900\",\n sendButton:\n \"rounded-full p-1.5 w-8 h-8 stroke-2 text-white bg-blue-600 disabled:bg-slate-200 hover:bg-blue-800 active:scale-90 transition-all absolute right-4 bottom-2.5 @[480px]:bottom-3.5\",\n }\n);\n\n/**\n * The props for the {@link ChatInput} component.\n *\n * @public\n */\nexport interface ChatInputProps {\n /**\n * The input's placeholder text when no text has been entered by the user.\n * Defaults to \"Type a message...\".\n */\n placeholder?: string;\n /**\n * Enable streaming behavior by making a request to Chat Streaming API.\n * This feature is experimental, and is subject to change.\n * Defaults to false.\n */\n stream?: boolean;\n /** Enable auto focus for the input box. Defaults to false. */\n inputAutoFocus?: boolean;\n /**\n * A function which is called when an error occurs from Chat API while processing the user's message.\n * By default, the error is logged to the console and an error message is added to state.\n */\n handleError?: (e: unknown) => void;\n /** Custom icon for the send button. */\n sendButtonIcon?: JSX.Element;\n /** CSS classes for customizing the component styling. */\n customCssClasses?: ChatInputCssClasses;\n /** A callback which is called when user sends a message. */\n onSend?: (message: string) => void;\n /**\n * A function which is called when a retryable error occurs from\n * Chat API while processing the user's message.\n */\n onRetry?: (e: unknown) => void;\n}\n\n/**\n * A component that allows user to input message and send to Chat API.\n *\n * @remarks\n * Pressing \"Enter\" key will send the current message.\n * To add a newline, press \"Shift\" and \"Enter\".\n *\n * @public\n *\n * @param props - {@link ChatInputProps}\n */\nexport function ChatInput({\n placeholder = \"Type a message...\",\n stream = false,\n inputAutoFocus = true,\n handleError,\n sendButtonIcon = <ArrowIcon />,\n customCssClasses,\n onSend,\n onRetry,\n}: ChatInputProps) {\n const [input, setInput] = useState(\"\");\n const canSendMessage = useChatState(\n (state) => state.conversation.canSendMessage\n );\n const defaultHandleApiError = useDefaultHandleApiError();\n const sendMessageWithRetries = useSendMessageWithRetries(stream, 1, onRetry);\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n\n const sendMessage = useCallback(async () => {\n setInput(\"\");\n sendMessageWithRetries(input)\n .catch(handleError ?? defaultHandleApiError)\n .finally(() => {\n onSend?.(input);\n });\n }, [\n sendMessageWithRetries,\n input,\n handleError,\n defaultHandleApiError,\n onSend,\n ]);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (\n !e.shiftKey &&\n e.key === \"Enter\" &&\n // The Japanese Keyboard uses \"Enter\" key to convert from Hiragana to Kanji.\n // \"isComposing\" is a flag that indicates whether the event is part of an ongoing composition session.\n // Safari does not support `isComposing` with the Japanese IME event,\n // so we have to additionally check for the keyCode to handle that edge case.\n !(e.nativeEvent.isComposing || e.keyCode === 229)\n ) {\n e.preventDefault();\n if (canSendMessage && input.trim().length !== 0) {\n sendMessage();\n }\n }\n },\n [sendMessage, canSendMessage, input]\n );\n\n const onInputChange = useCallback(\n (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n setInput(e.target.value);\n },\n []\n );\n\n return (\n <div className={cssClasses.container}>\n <TextareaAutosize\n autoFocus={inputAutoFocus}\n onKeyDown={handleKeyDown}\n value={input}\n onChange={onInputChange}\n className={cssClasses.textArea}\n placeholder={placeholder}\n />\n <button\n aria-label=\"Send Message\"\n disabled={!canSendMessage || input.trim().length === 0}\n onClick={sendMessage}\n className={cssClasses.sendButton}\n >\n {sendButtonIcon}\n </button>\n </div>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode } from "react";
|
|
2
|
-
import { MessageBubbleCssClasses, MessageBubbleProps } from "./MessageBubble";
|
|
3
|
-
import { ChatInputCssClasses, ChatInputProps } from "./ChatInput";
|
|
4
|
-
import { MessageSuggestionCssClasses } from "./MessageSuggestions";
|
|
5
|
-
/**
|
|
6
|
-
* The CSS class interface for the {@link ChatPanel} component.
|
|
7
|
-
*
|
|
8
|
-
* @public
|
|
9
|
-
*/
|
|
10
|
-
export interface ChatPanelCssClasses {
|
|
11
|
-
container?: string;
|
|
12
|
-
messagesContainer?: string;
|
|
13
|
-
messagesScrollContainer?: string;
|
|
14
|
-
inputContainer?: string;
|
|
15
|
-
inputCssClasses?: ChatInputCssClasses;
|
|
16
|
-
messageBubbleCssClasses?: MessageBubbleCssClasses;
|
|
17
|
-
messageSuggestionClasses?: MessageSuggestionCssClasses;
|
|
18
|
-
footer?: string;
|
|
19
|
-
}
|
|
20
|
-
/**
|
|
21
|
-
* The props for the {@link ChatPanel} component.
|
|
22
|
-
*
|
|
23
|
-
* @public
|
|
24
|
-
*/
|
|
25
|
-
export interface ChatPanelProps extends Omit<MessageBubbleProps, "customCssClasses" | "message">, Omit<ChatInputProps, "customCssClasses"> {
|
|
26
|
-
/** A header to render at the top of the panel. */
|
|
27
|
-
header?: ReactNode;
|
|
28
|
-
/** A footer markdown string to render at the bottom of the panel. */
|
|
29
|
-
footer?: string;
|
|
30
|
-
/**
|
|
31
|
-
* CSS classes for customizing the component styling.
|
|
32
|
-
*/
|
|
33
|
-
customCssClasses?: ChatPanelCssClasses;
|
|
34
|
-
/**
|
|
35
|
-
* A set of pre-written initial messages that the user
|
|
36
|
-
* can click on instead of typing their own.
|
|
37
|
-
*/
|
|
38
|
-
messageSuggestions?: string[];
|
|
39
|
-
/** Link target open behavior on click.
|
|
40
|
-
* Defaults to "_blank".
|
|
41
|
-
*/
|
|
42
|
-
linkTarget?: string;
|
|
43
|
-
/** A callback which is called when user clicks a link. */
|
|
44
|
-
onLinkClick?: (href?: string) => void;
|
|
45
|
-
/**
|
|
46
|
-
* Text to display when retrying.
|
|
47
|
-
* Defaults to "Error occurred. Retrying".
|
|
48
|
-
*/
|
|
49
|
-
retryText?: string;
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* A component that renders a full panel for chat bot interactions. This includes
|
|
53
|
-
* the message bubbles for the conversation, input box with send button, and header
|
|
54
|
-
* (if provided).
|
|
55
|
-
*
|
|
56
|
-
* @public
|
|
57
|
-
*
|
|
58
|
-
* @param props - {@link ChatPanelProps}
|
|
59
|
-
*/
|
|
60
|
-
export declare function ChatPanel(props: ChatPanelProps): React.JSX.Element;
|
|
61
|
-
export declare function getStateLocalStorageKey(hostname: string, conversationId: string): string;
|
|
62
|
-
/**
|
|
63
|
-
* Maintains the panel state of the session.
|
|
64
|
-
*/
|
|
65
|
-
export interface PanelState {
|
|
66
|
-
/** The scroll position of the panel. */
|
|
67
|
-
scrollPosition?: number;
|
|
68
|
-
}
|
|
69
|
-
/**
|
|
70
|
-
* Loads the {@link PanelState} from local storage.
|
|
71
|
-
*/
|
|
72
|
-
export declare const loadSessionState: (conversationId: string) => PanelState;
|
|
73
|
-
export declare const saveSessionState: (conversationId: string, state: PanelState) => void;
|
|
74
|
-
//# sourceMappingURL=ChatPanel.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EAOV,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7E,OAAO,EACL,2BAA2B,EAE5B,MAAM,sBAAsB,CAAC;AAG9B;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;IAClD,wBAAwB,CAAC,EAAE,2BAA2B,CAAC;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiBD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAC,EAC9D,IAAI,CAAC,cAAc,EAAE,kBAAkB,CAAC;IAC1C,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBA6L9C;AAID,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,MAAM,GACrB,MAAM,CAER;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,wCAAwC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,mBAAoB,MAAM,KAAG,UAsBzD,CAAC;AAEF,eAAO,MAAM,gBAAgB,mBAAoB,MAAM,SAAS,UAAU,SASzE,CAAC"}
|
|
@@ -1,169 +0,0 @@
|
|
|
1
|
-
import React, { useState, useCallback, useEffect, useMemo, useRef, useLayoutEffect } from 'react';
|
|
2
|
-
import { useChatState } from '@yext/chat-headless-react';
|
|
3
|
-
import { MessageBubble } from './MessageBubble.mjs';
|
|
4
|
-
import { ChatInput } from './ChatInput.mjs';
|
|
5
|
-
import { LoadingDots } from './LoadingDots.mjs';
|
|
6
|
-
import { useComposedCssClasses } from '../hooks/useComposedCssClasses.mjs';
|
|
7
|
-
import { useReportAnalyticsEvent } from '../hooks/useReportAnalyticsEvent.mjs';
|
|
8
|
-
import { withStylelessCssClasses } from '../utils/withStylelessCssClasses.mjs';
|
|
9
|
-
import { useFetchInitialMessage } from '../hooks/useFetchInitialMessage.mjs';
|
|
10
|
-
import { MessageSuggestions } from './MessageSuggestions.mjs';
|
|
11
|
-
import { Markdown } from './Markdown.mjs';
|
|
12
|
-
|
|
13
|
-
const builtInCssClasses = withStylelessCssClasses("Panel", {
|
|
14
|
-
container: "h-full w-full flex flex-col relative shadow-2xl bg-white",
|
|
15
|
-
messagesScrollContainer: "flex flex-col mt-auto overflow-hidden",
|
|
16
|
-
messagesContainer: "flex flex-col gap-y-1 px-4 overflow-auto [&>*:first-child]:mt-3",
|
|
17
|
-
inputContainer: "w-full p-4",
|
|
18
|
-
messageBubbleCssClasses: {
|
|
19
|
-
topContainer: "mt-1",
|
|
20
|
-
},
|
|
21
|
-
footer: "text-center text-slate-400 rounded-b-3xl px-4 pb-4 text-[12px]",
|
|
22
|
-
});
|
|
23
|
-
/**
|
|
24
|
-
* A component that renders a full panel for chat bot interactions. This includes
|
|
25
|
-
* the message bubbles for the conversation, input box with send button, and header
|
|
26
|
-
* (if provided).
|
|
27
|
-
*
|
|
28
|
-
* @public
|
|
29
|
-
*
|
|
30
|
-
* @param props - {@link ChatPanelProps}
|
|
31
|
-
*/
|
|
32
|
-
function ChatPanel(props) {
|
|
33
|
-
const { header, footer, customCssClasses, stream, handleError, messageSuggestions, linkTarget = "_blank", onLinkClick, onSend: onSendProp, onRetry: onRetryProp, retryText = "Error occurred. Retrying", } = props;
|
|
34
|
-
const messages = useChatState((state) => state.conversation.messages);
|
|
35
|
-
const loading = useChatState((state) => state.conversation.isLoading);
|
|
36
|
-
const suggestedReplies = useChatState((state) => state.conversation.notes?.suggestedReplies);
|
|
37
|
-
const conversationId = useChatState((state) => state.conversation.conversationId);
|
|
38
|
-
const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
|
|
39
|
-
const reportAnalyticsEvent = useReportAnalyticsEvent();
|
|
40
|
-
useFetchInitialMessage(handleError, stream);
|
|
41
|
-
const [retry, setRetry] = useState(false);
|
|
42
|
-
const onSend = useCallback((message) => {
|
|
43
|
-
onSendProp?.(message);
|
|
44
|
-
setRetry(false);
|
|
45
|
-
}, [onSendProp]);
|
|
46
|
-
const onRetry = useCallback((e) => {
|
|
47
|
-
onRetryProp?.(e);
|
|
48
|
-
setRetry(true);
|
|
49
|
-
}, [onRetryProp]);
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
reportAnalyticsEvent({
|
|
52
|
-
action: "CHAT_IMPRESSION",
|
|
53
|
-
});
|
|
54
|
-
}, [reportAnalyticsEvent]);
|
|
55
|
-
const suggestions = useMemo(() => {
|
|
56
|
-
if (messages.length === 0 ||
|
|
57
|
-
(messages.length === 1 && messages[0].source === "BOT")) {
|
|
58
|
-
return messageSuggestions;
|
|
59
|
-
}
|
|
60
|
-
return suggestedReplies;
|
|
61
|
-
}, [messages, suggestedReplies, messageSuggestions]);
|
|
62
|
-
const messagesRef = useRef([]);
|
|
63
|
-
const messagesContainer = useRef(null);
|
|
64
|
-
// State to help detect initial messages rendering
|
|
65
|
-
const [initialMessagesLength] = useState(messages.length);
|
|
66
|
-
const savedPanelState = useMemo(() => {
|
|
67
|
-
if (!conversationId) {
|
|
68
|
-
return {};
|
|
69
|
-
}
|
|
70
|
-
return loadSessionState(conversationId);
|
|
71
|
-
}, [conversationId]);
|
|
72
|
-
// Handle scrolling when messages change
|
|
73
|
-
useEffect(() => {
|
|
74
|
-
const isInitialRender = messages.length === initialMessagesLength;
|
|
75
|
-
let scrollPos = 0;
|
|
76
|
-
if (isInitialRender && savedPanelState.scrollPosition !== undefined) {
|
|
77
|
-
// memorized position
|
|
78
|
-
scrollPos = savedPanelState?.scrollPosition;
|
|
79
|
-
}
|
|
80
|
-
else {
|
|
81
|
-
messagesRef.current = messagesRef.current.slice(0, messages.length);
|
|
82
|
-
// Sums up scroll heights of all messages except the last one
|
|
83
|
-
if (messagesRef?.current.length > 1) {
|
|
84
|
-
// position of the top of the last message
|
|
85
|
-
scrollPos = messagesRef.current
|
|
86
|
-
.slice(0, -1)
|
|
87
|
-
.map((elem, _) => elem?.scrollHeight ?? 0)
|
|
88
|
-
.reduce((total, height) => total + height);
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
messagesContainer.current?.scroll({
|
|
92
|
-
top: scrollPos,
|
|
93
|
-
behavior: "smooth",
|
|
94
|
-
});
|
|
95
|
-
}, [messages, initialMessagesLength, savedPanelState.scrollPosition]);
|
|
96
|
-
const setMessagesRef = useCallback((index) => {
|
|
97
|
-
if (!messagesRef?.current)
|
|
98
|
-
return null;
|
|
99
|
-
return (message) => (messagesRef.current[index] = message);
|
|
100
|
-
}, []);
|
|
101
|
-
const footerCssClasses = useMemo(() => ({
|
|
102
|
-
container: cssClasses.footer,
|
|
103
|
-
link: "cursor-pointer hover:underline text-blue-600",
|
|
104
|
-
}), [cssClasses]);
|
|
105
|
-
useLayoutEffect(() => {
|
|
106
|
-
const curr = messagesContainer.current;
|
|
107
|
-
const onScroll = () => {
|
|
108
|
-
if (!conversationId) {
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
saveSessionState(conversationId, {
|
|
112
|
-
scrollPosition: curr?.scrollTop,
|
|
113
|
-
});
|
|
114
|
-
};
|
|
115
|
-
curr?.addEventListener("scroll", onScroll);
|
|
116
|
-
return () => {
|
|
117
|
-
curr?.removeEventListener("scroll", onScroll);
|
|
118
|
-
};
|
|
119
|
-
}, [messagesContainer, conversationId]);
|
|
120
|
-
return (React.createElement("div", { className: "yext-chat w-full h-full" },
|
|
121
|
-
React.createElement("div", { className: cssClasses.container },
|
|
122
|
-
header,
|
|
123
|
-
React.createElement("div", { className: cssClasses.messagesScrollContainer },
|
|
124
|
-
React.createElement("div", { ref: messagesContainer, className: cssClasses.messagesContainer, "aria-label": "Chat Panel Messages Container" },
|
|
125
|
-
messages.map((message, index) => (React.createElement("div", { key: index, ref: setMessagesRef(index) },
|
|
126
|
-
React.createElement(MessageBubble, { ...props, customCssClasses: cssClasses.messageBubbleCssClasses, message: message, linkTarget: linkTarget, onLinkClick: onLinkClick })))),
|
|
127
|
-
loading && (React.createElement("div", { className: "flex" },
|
|
128
|
-
React.createElement(LoadingDots, null),
|
|
129
|
-
retry && (React.createElement("p", { className: "text-slate-500 text-[13px] font-bold" }, retryText)))))),
|
|
130
|
-
React.createElement("div", { className: cssClasses.inputContainer },
|
|
131
|
-
suggestions && (React.createElement(MessageSuggestions, { stream: stream, onSend: onSend, onRetry: onRetry, handleError: handleError, suggestions: suggestions, customCssClasses: cssClasses.messageSuggestionClasses })),
|
|
132
|
-
React.createElement(ChatInput, { ...props, onSend: onSend, onRetry: onRetry, customCssClasses: cssClasses.inputCssClasses })),
|
|
133
|
-
footer && (React.createElement(Markdown, { content: footer, linkClickEvent: "WEBSITE", linkTarget: linkTarget, onLinkClick: onLinkClick, customCssClasses: footerCssClasses })))));
|
|
134
|
-
}
|
|
135
|
-
const BASE_STATE_LOCAL_STORAGE_KEY = "yext_chat_panel_state";
|
|
136
|
-
function getStateLocalStorageKey(hostname, conversationId) {
|
|
137
|
-
return `${BASE_STATE_LOCAL_STORAGE_KEY}__${hostname}__${conversationId}`;
|
|
138
|
-
}
|
|
139
|
-
/**
|
|
140
|
-
* Loads the {@link PanelState} from local storage.
|
|
141
|
-
*/
|
|
142
|
-
const loadSessionState = (conversationId) => {
|
|
143
|
-
const hostname = window?.location?.hostname;
|
|
144
|
-
if (!localStorage || !hostname) {
|
|
145
|
-
return {};
|
|
146
|
-
}
|
|
147
|
-
const savedState = localStorage.getItem(getStateLocalStorageKey(hostname, conversationId));
|
|
148
|
-
if (savedState) {
|
|
149
|
-
try {
|
|
150
|
-
const parsedState = JSON.parse(savedState);
|
|
151
|
-
return parsedState;
|
|
152
|
-
}
|
|
153
|
-
catch (e) {
|
|
154
|
-
console.warn("Unabled to load saved panel state: error parsing state.");
|
|
155
|
-
localStorage.removeItem(getStateLocalStorageKey(hostname, conversationId));
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
return {};
|
|
159
|
-
};
|
|
160
|
-
const saveSessionState = (conversationId, state) => {
|
|
161
|
-
const hostname = window?.location?.hostname;
|
|
162
|
-
if (!localStorage || !hostname) {
|
|
163
|
-
return;
|
|
164
|
-
}
|
|
165
|
-
localStorage.setItem(getStateLocalStorageKey(hostname, conversationId), JSON.stringify(state));
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
export { ChatPanel, getStateLocalStorageKey, loadSessionState, saveSessionState };
|
|
169
|
-
//# sourceMappingURL=ChatPanel.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ChatPanel.mjs","sources":["../../../../src/components/ChatPanel.tsx"],"sourcesContent":["import React, {\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n useLayoutEffect,\n} from \"react\";\nimport { useChatState } from \"@yext/chat-headless-react\";\nimport {\n MessageBubble,\n MessageBubbleCssClasses,\n MessageBubbleProps,\n} from \"./MessageBubble\";\nimport { ChatInput, ChatInputCssClasses, ChatInputProps } from \"./ChatInput\";\nimport { LoadingDots } from \"./LoadingDots\";\nimport { useComposedCssClasses } from \"../hooks\";\nimport { withStylelessCssClasses } from \"../utils/withStylelessCssClasses\";\nimport { useReportAnalyticsEvent } from \"../hooks/useReportAnalyticsEvent\";\nimport { useFetchInitialMessage } from \"../hooks/useFetchInitialMessage\";\nimport {\n MessageSuggestionCssClasses,\n MessageSuggestions,\n} from \"./MessageSuggestions\";\nimport { Markdown, MarkdownCssClasses } from \"./Markdown\";\n\n/**\n * The CSS class interface for the {@link ChatPanel} component.\n *\n * @public\n */\nexport interface ChatPanelCssClasses {\n container?: string;\n messagesContainer?: string;\n messagesScrollContainer?: string;\n inputContainer?: string;\n inputCssClasses?: ChatInputCssClasses;\n messageBubbleCssClasses?: MessageBubbleCssClasses;\n messageSuggestionClasses?: MessageSuggestionCssClasses;\n footer?: string;\n}\n\nconst builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(\n \"Panel\",\n {\n container: \"h-full w-full flex flex-col relative shadow-2xl bg-white\",\n messagesScrollContainer: \"flex flex-col mt-auto overflow-hidden\",\n messagesContainer:\n \"flex flex-col gap-y-1 px-4 overflow-auto [&>*:first-child]:mt-3\",\n inputContainer: \"w-full p-4\",\n messageBubbleCssClasses: {\n topContainer: \"mt-1\",\n },\n footer: \"text-center text-slate-400 rounded-b-3xl px-4 pb-4 text-[12px]\",\n }\n);\n\n/**\n * The props for the {@link ChatPanel} component.\n *\n * @public\n */\nexport interface ChatPanelProps\n extends Omit<MessageBubbleProps, \"customCssClasses\" | \"message\">,\n Omit<ChatInputProps, \"customCssClasses\"> {\n /** A header to render at the top of the panel. */\n header?: ReactNode;\n /** A footer markdown string to render at the bottom of the panel. */\n footer?: string;\n /**\n * CSS classes for customizing the component styling.\n */\n customCssClasses?: ChatPanelCssClasses;\n /**\n * A set of pre-written initial messages that the user\n * can click on instead of typing their own.\n */\n messageSuggestions?: string[];\n /** Link target open behavior on click.\n * Defaults to \"_blank\".\n */\n linkTarget?: string;\n /** A callback which is called when user clicks a link. */\n onLinkClick?: (href?: string) => void;\n /**\n * Text to display when retrying.\n * Defaults to \"Error occurred. Retrying\".\n */\n retryText?: string;\n}\n\n/**\n * A component that renders a full panel for chat bot interactions. This includes\n * the message bubbles for the conversation, input box with send button, and header\n * (if provided).\n *\n * @public\n *\n * @param props - {@link ChatPanelProps}\n */\nexport function ChatPanel(props: ChatPanelProps) {\n const {\n header,\n footer,\n customCssClasses,\n stream,\n handleError,\n messageSuggestions,\n linkTarget = \"_blank\",\n onLinkClick,\n onSend: onSendProp,\n onRetry: onRetryProp,\n retryText = \"Error occurred. Retrying\",\n } = props;\n const messages = useChatState((state) => state.conversation.messages);\n const loading = useChatState((state) => state.conversation.isLoading);\n const suggestedReplies = useChatState(\n (state) => state.conversation.notes?.suggestedReplies\n );\n const conversationId = useChatState(\n (state) => state.conversation.conversationId\n );\n const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);\n const reportAnalyticsEvent = useReportAnalyticsEvent();\n useFetchInitialMessage(handleError, stream);\n\n const [retry, setRetry] = useState(false);\n const onSend = useCallback(\n (message: string) => {\n onSendProp?.(message);\n setRetry(false);\n },\n [onSendProp]\n );\n\n const onRetry = useCallback(\n (e: unknown) => {\n onRetryProp?.(e);\n setRetry(true);\n },\n [onRetryProp]\n );\n\n useEffect(() => {\n reportAnalyticsEvent({\n action: \"CHAT_IMPRESSION\",\n });\n }, [reportAnalyticsEvent]);\n\n const suggestions = useMemo(() => {\n if (\n messages.length === 0 ||\n (messages.length === 1 && messages[0].source === \"BOT\")\n ) {\n return messageSuggestions;\n }\n return suggestedReplies;\n }, [messages, suggestedReplies, messageSuggestions]);\n\n const messagesRef = useRef<Array<HTMLDivElement | null>>([]);\n const messagesContainer = useRef<HTMLDivElement>(null);\n\n // State to help detect initial messages rendering\n const [initialMessagesLength] = useState(messages.length);\n\n const savedPanelState = useMemo(() => {\n if (!conversationId) {\n return {};\n }\n return loadSessionState(conversationId);\n }, [conversationId]);\n\n // Handle scrolling when messages change\n useEffect(() => {\n const isInitialRender = messages.length === initialMessagesLength;\n let scrollPos = 0;\n if (isInitialRender && savedPanelState.scrollPosition !== undefined) {\n // memorized position\n scrollPos = savedPanelState?.scrollPosition;\n } else {\n messagesRef.current = messagesRef.current.slice(0, messages.length);\n // Sums up scroll heights of all messages except the last one\n if (messagesRef?.current.length > 1) {\n // position of the top of the last message\n scrollPos = messagesRef.current\n .slice(0, -1)\n .map((elem, _) => elem?.scrollHeight ?? 0)\n .reduce((total, height) => total + height);\n }\n }\n\n messagesContainer.current?.scroll({\n top: scrollPos,\n behavior: \"smooth\",\n });\n }, [messages, initialMessagesLength, savedPanelState.scrollPosition]);\n\n const setMessagesRef = useCallback((index) => {\n if (!messagesRef?.current) return null;\n return (message) => (messagesRef.current[index] = message);\n }, []);\n\n const footerCssClasses: MarkdownCssClasses = useMemo(\n () => ({\n container: cssClasses.footer,\n link: \"cursor-pointer hover:underline text-blue-600\",\n }),\n [cssClasses]\n );\n\n useLayoutEffect(() => {\n const curr = messagesContainer.current;\n const onScroll = () => {\n if (!conversationId) {\n return;\n }\n saveSessionState(conversationId, {\n scrollPosition: curr?.scrollTop,\n });\n };\n curr?.addEventListener(\"scroll\", onScroll);\n return () => {\n curr?.removeEventListener(\"scroll\", onScroll);\n };\n }, [messagesContainer, conversationId]);\n\n return (\n <div className=\"yext-chat w-full h-full\">\n <div className={cssClasses.container}>\n {header}\n <div className={cssClasses.messagesScrollContainer}>\n <div\n ref={messagesContainer}\n className={cssClasses.messagesContainer}\n aria-label=\"Chat Panel Messages Container\"\n >\n {messages.map((message, index) => (\n <div key={index} ref={setMessagesRef(index)}>\n <MessageBubble\n {...props}\n customCssClasses={cssClasses.messageBubbleCssClasses}\n message={message}\n linkTarget={linkTarget}\n onLinkClick={onLinkClick}\n />\n </div>\n ))}\n {loading && (\n <div className=\"flex\">\n <LoadingDots />\n {retry && (\n <p className=\"text-slate-500 text-[13px] font-bold\">\n {retryText}\n </p>\n )}\n </div>\n )}\n </div>\n </div>\n <div className={cssClasses.inputContainer}>\n {suggestions && (\n <MessageSuggestions\n stream={stream}\n onSend={onSend}\n onRetry={onRetry}\n handleError={handleError}\n suggestions={suggestions}\n customCssClasses={cssClasses.messageSuggestionClasses}\n />\n )}\n <ChatInput\n {...props}\n onSend={onSend}\n onRetry={onRetry}\n customCssClasses={cssClasses.inputCssClasses}\n />\n </div>\n {footer && (\n <Markdown\n content={footer}\n linkClickEvent=\"WEBSITE\"\n linkTarget={linkTarget}\n onLinkClick={onLinkClick}\n customCssClasses={footerCssClasses}\n />\n )}\n </div>\n </div>\n );\n}\n\nconst BASE_STATE_LOCAL_STORAGE_KEY = \"yext_chat_panel_state\";\n\nexport function getStateLocalStorageKey(\n hostname: string,\n conversationId: string\n): string {\n return `${BASE_STATE_LOCAL_STORAGE_KEY}__${hostname}__${conversationId}`;\n}\n\n/**\n * Maintains the panel state of the session.\n */\nexport interface PanelState {\n /** The scroll position of the panel. */\n scrollPosition?: number;\n}\n\n/**\n * Loads the {@link PanelState} from local storage.\n */\nexport const loadSessionState = (conversationId: string): PanelState => {\n const hostname = window?.location?.hostname;\n if (!localStorage || !hostname) {\n return {};\n }\n const savedState = localStorage.getItem(\n getStateLocalStorageKey(hostname, conversationId)\n );\n\n if (savedState) {\n try {\n const parsedState: PanelState = JSON.parse(savedState);\n return parsedState;\n } catch (e) {\n console.warn(\"Unabled to load saved panel state: error parsing state.\");\n localStorage.removeItem(\n getStateLocalStorageKey(hostname, conversationId)\n );\n }\n }\n\n return {};\n};\n\nexport const saveSessionState = (conversationId: string, state: PanelState) => {\n const hostname = window?.location?.hostname;\n if (!localStorage || !hostname) {\n return;\n }\n localStorage.setItem(\n getStateLocalStorageKey(hostname, conversationId),\n JSON.stringify(state)\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { ChatPanelCssClasses, ChatPanelProps } from "./ChatPanel";
|
|
3
|
-
import { ChatHeaderCssClasses, ChatHeaderProps } from "./ChatHeader";
|
|
4
|
-
import { InitialMessagePopUpCssClasses } from "./InitialMessagePopUp";
|
|
5
|
-
/**
|
|
6
|
-
* The CSS class interface for the {@link ChatPopUp} component.
|
|
7
|
-
*
|
|
8
|
-
* @public
|
|
9
|
-
*/
|
|
10
|
-
export interface ChatPopUpCssClasses {
|
|
11
|
-
container?: string;
|
|
12
|
-
panel?: string;
|
|
13
|
-
panel__display?: string;
|
|
14
|
-
panel__hidden?: string;
|
|
15
|
-
button?: string;
|
|
16
|
-
buttonIcon?: string;
|
|
17
|
-
ctaLabelContainer?: string;
|
|
18
|
-
ctaLabel?: string;
|
|
19
|
-
notification?: string;
|
|
20
|
-
closedPopupContainer?: string;
|
|
21
|
-
closedPopupContainer__display?: string;
|
|
22
|
-
closedPopupContainer__hidden?: string;
|
|
23
|
-
headerCssClasses?: ChatHeaderCssClasses;
|
|
24
|
-
panelCssClasses?: ChatPanelCssClasses;
|
|
25
|
-
initialMessagePopUpCssClasses?: InitialMessagePopUpCssClasses;
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* The props for the {@link ChatPopUp} component.
|
|
29
|
-
*
|
|
30
|
-
* @public
|
|
31
|
-
*/
|
|
32
|
-
export interface ChatPopUpProps extends Omit<ChatHeaderProps, "showCloseButton" | "customCssClasses">, Omit<ChatPanelProps, "header" | "customCssClasses"> {
|
|
33
|
-
/** Custom icon for the popup button to open the panel. */
|
|
34
|
-
openPanelButtonIcon?: JSX.Element;
|
|
35
|
-
/** CSS classes for customizing the component styling. */
|
|
36
|
-
customCssClasses?: ChatPopUpCssClasses;
|
|
37
|
-
/** Whether to show the panel on load. Defaults to false. */
|
|
38
|
-
openOnLoad?: boolean;
|
|
39
|
-
/**
|
|
40
|
-
* Whether to show the initial message popup when the panel is hidden on load.
|
|
41
|
-
* Defaults to false.
|
|
42
|
-
*/
|
|
43
|
-
showInitialMessagePopUp?: boolean;
|
|
44
|
-
/**
|
|
45
|
-
* Whether to show a heartbeat animation on the popup button when the panel is hidden.
|
|
46
|
-
* Defaults to false.
|
|
47
|
-
*/
|
|
48
|
-
showHeartBeatAnimation?: boolean;
|
|
49
|
-
/**
|
|
50
|
-
* Whether to show notification showing number of unread messages.
|
|
51
|
-
* Defaults to false.
|
|
52
|
-
*/
|
|
53
|
-
showUnreadNotification?: boolean;
|
|
54
|
-
/**
|
|
55
|
-
* The "Call to Action" label to be displayed next to the popup button.
|
|
56
|
-
* By default, the CTA is not shown.
|
|
57
|
-
* This prop will override the "showInitialMessagePopUp" prop, if specified.
|
|
58
|
-
*/
|
|
59
|
-
ctaLabel?: string;
|
|
60
|
-
/**
|
|
61
|
-
* A controlled prop to open or close the panel. If provided, the prop
|
|
62
|
-
* will override the openOnLoad prop and the panel will be controlled
|
|
63
|
-
* by the parent component.
|
|
64
|
-
*/
|
|
65
|
-
isOpen?: boolean;
|
|
66
|
-
}
|
|
67
|
-
/**
|
|
68
|
-
* A component that renders a popup button that displays and hides
|
|
69
|
-
* a panel for chat bot interactions.
|
|
70
|
-
*
|
|
71
|
-
* @public
|
|
72
|
-
*
|
|
73
|
-
* @param props - {@link ChatPanelProps}
|
|
74
|
-
*/
|
|
75
|
-
export declare function ChatPopUp(props: ChatPopUpProps): React.JSX.Element;
|
|
76
|
-
//# sourceMappingURL=ChatPopUp.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ChatPopUp.d.ts","sourceRoot":"","sources":["../../../../src/components/ChatPopUp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAa,mBAAmB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,EAEL,oBAAoB,EACpB,eAAe,EAChB,MAAM,cAAc,CAAC;AAKtB,OAAO,EAEL,6BAA6B,EAC9B,MAAM,uBAAuB,CAAC;AAI/B;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,6BAA6B,CAAC,EAAE,6BAA6B,CAAC;CAC/D;AAqCD;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,kBAAkB,CAAC,EACnE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,kBAAkB,CAAC;IACrD,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAClC,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAgK9C"}
|