@algolia/satellite 2.3.0-rc.6 → 2.3.0-rc.9

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.
Files changed (122) hide show
  1. package/dist/cjs/Chat/ChatContextAccordion/ChatContextAccordion.d.ts +23 -0
  2. package/dist/cjs/{Layout/Chat → Chat}/ChatContextAccordion/ChatContextAccordion.js +9 -2
  3. package/dist/cjs/{Layout/Chat → Chat}/ChatContextAccordion/ChatContextAccordion.styles.d.ts +23 -4
  4. package/dist/cjs/{Layout/Chat → Chat}/ChatContextAccordion/ChatContextAccordion.styles.js +3 -3
  5. package/dist/cjs/{Layout/Chat → Chat}/ChatMessage/ChatMessage.d.ts +80 -3
  6. package/dist/cjs/{Layout/Chat → Chat}/ChatMessage/ChatMessage.js +14 -5
  7. package/dist/{esm/Layout/Chat/ChatMessageError/ChatMessageError.styles.d.ts → cjs/Chat/ChatMessage/ChatMessage.styles.d.ts} +34 -40
  8. package/dist/cjs/{Layout/Chat → Chat}/ChatMessage/ChatMessage.styles.js +12 -12
  9. package/dist/{esm/Layout → cjs}/Chat/ChatMessageError/ChatMessageError.d.ts +7 -2
  10. package/dist/cjs/{Layout/Chat → Chat}/ChatMessageError/ChatMessageError.js +8 -3
  11. package/dist/cjs/Chat/ChatMessageError/ChatMessageError.styles.d.ts +253 -0
  12. package/dist/cjs/{Layout/Chat → Chat}/ChatMessageError/ChatMessageError.styles.js +2 -2
  13. package/dist/cjs/{Layout/Chat → Chat}/ChatMessageLoader/ChatMessageLoader.d.ts +6 -3
  14. package/dist/cjs/{Layout/Chat → Chat}/ChatMessageLoader/ChatMessageLoader.js +9 -4
  15. package/dist/{esm/Layout → cjs}/Chat/ChatMessageLoader/ChatMessageLoader.styles.d.ts +89 -9
  16. package/dist/cjs/{Layout/Chat → Chat}/ChatMessageLoader/ChatMessageLoader.styles.js +2 -2
  17. package/dist/cjs/Chat/ChatMessages/ChatMessages.d.ts +141 -0
  18. package/dist/cjs/{Layout/Chat → Chat}/ChatMessages/ChatMessages.js +20 -7
  19. package/dist/cjs/{Layout/Chat → Chat}/ChatMessages/ChatMessages.styles.d.ts +27 -1
  20. package/dist/cjs/{Layout/Chat → Chat}/ChatMessages/ChatMessages.styles.js +2 -2
  21. package/dist/cjs/{Layout/Chat → Chat}/ChatMessages/useLastMessageHeight.d.ts +7 -1
  22. package/dist/cjs/{Layout/Chat → Chat}/ChatMessages/useLastMessageHeight.js +6 -0
  23. package/dist/cjs/{Layout/Chat → Chat}/ChatPrompt/ChatPrompt.d.ts +16 -2
  24. package/dist/cjs/{Layout/Chat → Chat}/ChatPrompt/ChatPrompt.js +32 -20
  25. package/dist/cjs/Chat/ChatPrompt/ChatPrompt.styles.d.ts +63 -0
  26. package/dist/cjs/{Layout/Chat → Chat}/ChatPrompt/ChatPrompt.styles.js +10 -3
  27. package/dist/cjs/Chat/ChatPrompt/useFocusTyping.d.ts +30 -0
  28. package/dist/cjs/{Layout/Chat → Chat}/ChatPrompt/useFocusTyping.js +19 -14
  29. package/dist/cjs/{Layout/Chat → Chat}/ChatPrompt/useTypewriter.d.ts +9 -0
  30. package/dist/cjs/{Layout/Chat → Chat}/ChatPrompt/useTypewriter.js +9 -0
  31. package/dist/cjs/Fields/TextAreaAutoSize/TextAreaAutoSize.d.ts +12 -4
  32. package/dist/cjs/Fields/TextAreaAutoSize/TextAreaAutoSize.styles.d.ts +13 -1
  33. package/dist/cjs/Layout/index.d.ts +0 -1
  34. package/dist/cjs/Layout/index.js +0 -11
  35. package/dist/cjs/Satellite/locale.d.ts +3 -3
  36. package/dist/cjs/index.d.ts +1 -0
  37. package/dist/cjs/index.js +12 -0
  38. package/dist/cjs/styles/helpers/tv.d.ts +5 -1
  39. package/dist/cjs/utils/isCssPropertySupported.d.ts +1 -1
  40. package/dist/esm/Chat/ChatContextAccordion/ChatContextAccordion.d.ts +23 -0
  41. package/dist/esm/{Layout/Chat → Chat}/ChatContextAccordion/ChatContextAccordion.js +9 -2
  42. package/dist/esm/{Layout/Chat → Chat}/ChatContextAccordion/ChatContextAccordion.styles.d.ts +23 -4
  43. package/dist/esm/{Layout/Chat → Chat}/ChatContextAccordion/ChatContextAccordion.styles.js +3 -3
  44. package/dist/esm/{Layout/Chat → Chat}/ChatMessage/ChatMessage.d.ts +80 -3
  45. package/dist/esm/{Layout/Chat → Chat}/ChatMessage/ChatMessage.js +14 -5
  46. package/dist/{cjs/Layout/Chat/ChatMessageError/ChatMessageError.styles.d.ts → esm/Chat/ChatMessage/ChatMessage.styles.d.ts} +34 -40
  47. package/dist/esm/{Layout/Chat → Chat}/ChatMessage/ChatMessage.styles.js +12 -12
  48. package/dist/{cjs/Layout → esm}/Chat/ChatMessageError/ChatMessageError.d.ts +7 -2
  49. package/dist/esm/{Layout/Chat → Chat}/ChatMessageError/ChatMessageError.js +8 -3
  50. package/dist/esm/Chat/ChatMessageError/ChatMessageError.styles.d.ts +253 -0
  51. package/dist/esm/{Layout/Chat → Chat}/ChatMessageError/ChatMessageError.styles.js +2 -2
  52. package/dist/esm/{Layout/Chat → Chat}/ChatMessageLoader/ChatMessageLoader.d.ts +6 -3
  53. package/dist/esm/{Layout/Chat → Chat}/ChatMessageLoader/ChatMessageLoader.js +9 -4
  54. package/dist/{cjs/Layout → esm}/Chat/ChatMessageLoader/ChatMessageLoader.styles.d.ts +89 -9
  55. package/dist/esm/{Layout/Chat → Chat}/ChatMessageLoader/ChatMessageLoader.styles.js +2 -2
  56. package/dist/esm/Chat/ChatMessages/ChatMessages.d.ts +141 -0
  57. package/dist/esm/{Layout/Chat → Chat}/ChatMessages/ChatMessages.js +20 -7
  58. package/dist/esm/{Layout/Chat → Chat}/ChatMessages/ChatMessages.styles.d.ts +27 -1
  59. package/dist/esm/{Layout/Chat → Chat}/ChatMessages/ChatMessages.styles.js +2 -2
  60. package/dist/esm/{Layout/Chat → Chat}/ChatMessages/useLastMessageHeight.d.ts +7 -1
  61. package/dist/esm/{Layout/Chat → Chat}/ChatMessages/useLastMessageHeight.js +6 -0
  62. package/dist/esm/{Layout/Chat → Chat}/ChatPrompt/ChatPrompt.d.ts +16 -2
  63. package/dist/esm/{Layout/Chat → Chat}/ChatPrompt/ChatPrompt.js +33 -20
  64. package/dist/esm/Chat/ChatPrompt/ChatPrompt.styles.d.ts +63 -0
  65. package/dist/esm/{Layout/Chat → Chat}/ChatPrompt/ChatPrompt.styles.js +10 -3
  66. package/dist/esm/Chat/ChatPrompt/useFocusTyping.d.ts +30 -0
  67. package/dist/esm/{Layout/Chat → Chat}/ChatPrompt/useFocusTyping.js +19 -14
  68. package/dist/esm/{Layout/Chat → Chat}/ChatPrompt/useTypewriter.d.ts +9 -0
  69. package/dist/esm/{Layout/Chat → Chat}/ChatPrompt/useTypewriter.js +9 -0
  70. package/dist/esm/Fields/TextAreaAutoSize/TextAreaAutoSize.d.ts +12 -4
  71. package/dist/esm/Fields/TextAreaAutoSize/TextAreaAutoSize.styles.d.ts +13 -1
  72. package/dist/esm/Layout/index.d.ts +0 -1
  73. package/dist/esm/Layout/index.js +0 -1
  74. package/dist/esm/Satellite/locale.d.ts +3 -3
  75. package/dist/esm/index.d.ts +1 -0
  76. package/dist/esm/index.js +1 -0
  77. package/dist/esm/styles/helpers/tv.d.ts +5 -1
  78. package/dist/esm/utils/isCssPropertySupported.d.ts +1 -1
  79. package/dist/satellite.min.css +1 -1
  80. package/package.json +2 -2
  81. package/dist/cjs/Layout/Chat/ChatContextAccordion/ChatContextAccordion.d.ts +0 -8
  82. package/dist/cjs/Layout/Chat/ChatMessage/ChatMessage.styles.d.ts +0 -100
  83. package/dist/cjs/Layout/Chat/ChatMessages/ChatMessages.d.ts +0 -44
  84. package/dist/cjs/Layout/Chat/ChatPrompt/ChatPrompt.styles.d.ts +0 -61
  85. package/dist/cjs/Layout/Chat/ChatPrompt/useFocusTyping.d.ts +0 -12
  86. package/dist/esm/Layout/Chat/ChatContextAccordion/ChatContextAccordion.d.ts +0 -8
  87. package/dist/esm/Layout/Chat/ChatMessage/ChatMessage.styles.d.ts +0 -100
  88. package/dist/esm/Layout/Chat/ChatMessages/ChatMessages.d.ts +0 -44
  89. package/dist/esm/Layout/Chat/ChatPrompt/ChatPrompt.styles.d.ts +0 -61
  90. package/dist/esm/Layout/Chat/ChatPrompt/useFocusTyping.d.ts +0 -12
  91. /package/dist/cjs/{Layout/Chat → Chat}/ChatContextAccordion/index.d.ts +0 -0
  92. /package/dist/cjs/{Layout/Chat → Chat}/ChatContextAccordion/index.js +0 -0
  93. /package/dist/cjs/{Layout/Chat → Chat}/ChatMessage/index.d.ts +0 -0
  94. /package/dist/cjs/{Layout/Chat → Chat}/ChatMessage/index.js +0 -0
  95. /package/dist/cjs/{Layout/Chat → Chat}/ChatMessageError/index.d.ts +0 -0
  96. /package/dist/cjs/{Layout/Chat → Chat}/ChatMessageError/index.js +0 -0
  97. /package/dist/cjs/{Layout/Chat → Chat}/ChatMessageLoader/index.d.ts +0 -0
  98. /package/dist/cjs/{Layout/Chat → Chat}/ChatMessageLoader/index.js +0 -0
  99. /package/dist/cjs/{Layout/Chat → Chat}/ChatMessages/index.d.ts +0 -0
  100. /package/dist/cjs/{Layout/Chat → Chat}/ChatMessages/index.js +0 -0
  101. /package/dist/cjs/{Layout/Chat → Chat}/ChatPrompt/index.d.ts +0 -0
  102. /package/dist/cjs/{Layout/Chat → Chat}/ChatPrompt/index.js +0 -0
  103. /package/dist/cjs/{Layout/Chat → Chat}/index.d.ts +0 -0
  104. /package/dist/cjs/{Layout/Chat → Chat}/index.js +0 -0
  105. /package/dist/cjs/{Layout/Chat → Chat}/types.d.ts +0 -0
  106. /package/dist/cjs/{Layout/Chat → Chat}/types.js +0 -0
  107. /package/dist/esm/{Layout/Chat → Chat}/ChatContextAccordion/index.d.ts +0 -0
  108. /package/dist/esm/{Layout/Chat → Chat}/ChatContextAccordion/index.js +0 -0
  109. /package/dist/esm/{Layout/Chat → Chat}/ChatMessage/index.d.ts +0 -0
  110. /package/dist/esm/{Layout/Chat → Chat}/ChatMessage/index.js +0 -0
  111. /package/dist/esm/{Layout/Chat → Chat}/ChatMessageError/index.d.ts +0 -0
  112. /package/dist/esm/{Layout/Chat → Chat}/ChatMessageError/index.js +0 -0
  113. /package/dist/esm/{Layout/Chat → Chat}/ChatMessageLoader/index.d.ts +0 -0
  114. /package/dist/esm/{Layout/Chat → Chat}/ChatMessageLoader/index.js +0 -0
  115. /package/dist/esm/{Layout/Chat → Chat}/ChatMessages/index.d.ts +0 -0
  116. /package/dist/esm/{Layout/Chat → Chat}/ChatMessages/index.js +0 -0
  117. /package/dist/esm/{Layout/Chat → Chat}/ChatPrompt/index.d.ts +0 -0
  118. /package/dist/esm/{Layout/Chat → Chat}/ChatPrompt/index.js +0 -0
  119. /package/dist/esm/{Layout/Chat → Chat}/index.d.ts +0 -0
  120. /package/dist/esm/{Layout/Chat → Chat}/index.js +0 -0
  121. /package/dist/esm/{Layout/Chat → Chat}/types.d.ts +0 -0
  122. /package/dist/esm/{Layout/Chat → Chat}/types.js +0 -0
@@ -2,19 +2,19 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _excluded = ["messages", "userMessageProps", "assistantMessageProps", "loaderProps", "errorProps", "renderMessage", "renderLoader", "renderError", "status", "onReload", "hideScrollToBottom", "className", "scrollClassName", "contentClassName", "locale"];
5
+ var _excluded = ["messages", "userMessageProps", "assistantMessageProps", "loaderProps", "errorProps", "renderMessage", "renderLoader", "renderError", "status", "onReload", "hideScrollToBottom", "className", "scrollClassName", "contentClassName", "locale", "rtl"];
6
6
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
7
7
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
8
8
  import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
9
9
  import { useStickToBottom } from "use-stick-to-bottom";
10
10
  import { chatMessagesStyles } from "./ChatMessages.styles";
11
11
  import { useLastMessageHeight } from "./useLastMessageHeight";
12
- import { IconButton } from "./../../../Actions";
13
- import { ChevronDownIcon } from "./../../../Icons";
12
+ import { IconButton } from "./../../Actions";
14
13
  import { ChatMessage } from "./../ChatMessage";
15
14
  import { ChatMessageError } from "./../ChatMessageError";
16
15
  import { ChatMessageLoader } from "./../ChatMessageLoader";
17
- import { useLocale } from "./../../../Satellite";
16
+ import { ChevronDownIcon } from "./../../Icons";
17
+ import { useLocale } from "./../../Satellite";
18
18
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
19
19
  var DEFAULT_CHAT_MESSAGE_LOCALE = {
20
20
  scrollToBottomText: "Scroll to bottom"
@@ -42,6 +42,8 @@ var ChatMessagesBase = function ChatMessagesBase(_ref, forwardedRef) {
42
42
  scrollClassName = _ref.scrollClassName,
43
43
  contentClassName = _ref.contentClassName,
44
44
  propsLocale = _ref.locale,
45
+ _ref$rtl = _ref.rtl,
46
+ rtl = _ref$rtl === void 0 ? false : _ref$rtl,
45
47
  props = _objectWithoutProperties(_ref, _excluded);
46
48
  var contextLocale = useLocale("chatMessage");
47
49
  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_CHAT_MESSAGE_LOCALE), contextLocale), propsLocale);
@@ -74,7 +76,7 @@ var ChatMessagesBase = function ChatMessagesBase(_ref, forwardedRef) {
74
76
  propsResult = resolveProps(assistantMessageProps, message);
75
77
 
76
78
  // If the last assistant message is streaming, we don't want to render actions or footer
77
- if (status === "streaming" && lastMessageId === message.id) {
79
+ if ((status === "streaming" || message.content.length === 0) && lastMessageId === message.id) {
78
80
  propsResult = _objectSpread(_objectSpread({}, propsResult), {}, {
79
81
  renderFooter: undefined,
80
82
  renderActions: undefined,
@@ -89,7 +91,9 @@ var ChatMessagesBase = function ChatMessagesBase(_ref, forwardedRef) {
89
91
  useEffect(function () {
90
92
  if (status === "submitted" && lastUserMessage) {
91
93
  setLastMessageSubmitted(true);
94
+ void scrollToBottom();
92
95
  }
96
+ // eslint-disable-next-line react-hooks/exhaustive-deps
93
97
  }, [status, lastUserMessage]);
94
98
  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
95
99
  ref: forwardedRef,
@@ -114,9 +118,11 @@ var ChatMessagesBase = function ChatMessagesBase(_ref, forwardedRef) {
114
118
  children: [messages.map(function (message) {
115
119
  var isAssistant = message.role === "assistant";
116
120
  var isLastUserMessage = (lastUserMessage === null || lastUserMessage === void 0 ? void 0 : lastUserMessage.id) === message.id;
121
+ var side = isAssistant ? "left" : "right";
117
122
  return /*#__PURE__*/_jsx(ChatMessage, _objectSpread(_objectSpread({
123
+ rtl: rtl,
118
124
  ref: isLastUserMessage ? lastUserMessageRef : undefined,
119
- side: isAssistant ? "left" : "right",
125
+ side: side,
120
126
  variant: isAssistant ? "subtle" : "neutral"
121
127
  }, getMessageProps(message)), {}, {
122
128
  content: renderMessage ? renderMessage(message) : message.content,
@@ -138,8 +144,15 @@ var ChatMessagesBase = function ChatMessagesBase(_ref, forwardedRef) {
138
144
  className: styles.scrollToBottom({
139
145
  isAtBottom: isAtBottom
140
146
  }),
141
- tooltipHideDelay: 0
147
+ tooltipHideDelay: 0,
148
+ tabIndex: isAtBottom ? -1 : 0
142
149
  })]
143
150
  }));
144
151
  };
152
+
153
+ /**
154
+ * The `ChatMessages` component provides a list of messages to display in the chat.
155
+ *
156
+ * See the [ChatMessages documentation page](https://satellite.algolia.com/8261d6576/p/06f740-chat-messages) for more information.
157
+ */
145
158
  export var ChatMessages = /*#__PURE__*/forwardRef(ChatMessagesBase);
@@ -13,6 +13,14 @@ export declare const chatMessagesStyles: import("tailwind-variants").TVReturnTyp
13
13
  content: string;
14
14
  scrollToBottom: string;
15
15
  }, undefined, {
16
+ responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
17
+ isAtBottom?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
18
+ } | undefined;
19
+ } & import("tailwind-variants/dist/config").TWMConfig & {
20
+ twMergeConfig: {
21
+ prefix: string;
22
+ };
23
+ }, {
16
24
  isAtBottom: {
17
25
  true: {
18
26
  scrollToBottom: string;
@@ -40,4 +48,22 @@ export declare const chatMessagesStyles: import("tailwind-variants").TVReturnTyp
40
48
  scroll: string;
41
49
  content: string;
42
50
  scrollToBottom: string;
43
- }, undefined, unknown, unknown, undefined>>;
51
+ }, undefined, import("tailwind-variants/dist/config").TVConfig<{
52
+ isAtBottom: {
53
+ true: {
54
+ scrollToBottom: string;
55
+ };
56
+ false: {
57
+ scrollToBottom: string;
58
+ };
59
+ };
60
+ }, {
61
+ isAtBottom: {
62
+ true: {
63
+ scrollToBottom: string;
64
+ };
65
+ false: {
66
+ scrollToBottom: string;
67
+ };
68
+ };
69
+ }>, unknown, unknown, undefined>>;
@@ -1,7 +1,7 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
2
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
3
- import stl from "./../../../styles/helpers/satellitePrefixer";
4
- import { tv } from "./../../../styles/helpers/tv";
3
+ import stl from "./../../styles/helpers/satellitePrefixer";
4
+ import { tv } from "./../../styles/helpers/tv";
5
5
  export var chatMessagesStyles = tv({
6
6
  slots: {
7
7
  base: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["relative flex flex-col overflow-hidden h-full"]))),
@@ -1,8 +1,14 @@
1
1
  import type { RefObject } from "react";
2
- import type { ChatMessageBase } from "../../../Layout/Chat/types";
2
+ import type { ChatMessageBase } from "../../Chat/types";
3
3
  /**
4
4
  * React hook to compute the “fill” height below the last user message,
5
5
  * based on the scroll container’s height, the last user‐message element’s height,
6
6
  * and any CSS gap/padding offsets.
7
+ *
8
+ * @param scrollRef - The ref to the scroll container.
9
+ * @param lastUserMessageRef - The ref to the last user message.
10
+ * @param messages - The messages to display in the chat.
11
+ * @param lastMessageSubmitted - Whether the last message has been submitted.
12
+ * @param spacingOffset - The spacing offset.
7
13
  */
8
14
  export declare function useLastMessageHeight(scrollRef: RefObject<HTMLElement>, lastUserMessageRef: RefObject<HTMLDivElement | null>, messages: ChatMessageBase[], lastMessageSubmitted: boolean, spacingOffset?: number): number;
@@ -5,6 +5,12 @@ import { useLayoutEffect, useState } from "react";
5
5
  * React hook to compute the “fill” height below the last user message,
6
6
  * based on the scroll container’s height, the last user‐message element’s height,
7
7
  * and any CSS gap/padding offsets.
8
+ *
9
+ * @param scrollRef - The ref to the scroll container.
10
+ * @param lastUserMessageRef - The ref to the last user message.
11
+ * @param messages - The messages to display in the chat.
12
+ * @param lastMessageSubmitted - Whether the last message has been submitted.
13
+ * @param spacingOffset - The spacing offset.
8
14
  */
9
15
  export function useLastMessageHeight(scrollRef, lastUserMessageRef, messages, lastMessageSubmitted) {
10
16
  var spacingOffset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
@@ -1,11 +1,12 @@
1
1
  import type { FormEvent, KeyboardEvent, ReactNode } from "react";
2
- import type { TextAreaAutoSizeProps } from "../../../Fields/TextAreaAutoSize/TextAreaAutoSize";
3
- import type { ChatStatus } from "../../../Layout/Chat/types";
2
+ import type { ChatStatus } from "../../Chat/types";
3
+ import type { TextAreaAutoSizeProps } from "../../Fields/TextAreaAutoSize/TextAreaAutoSize";
4
4
  export declare type ChatPromptLocale = {
5
5
  textareaLabel?: string;
6
6
  emptyMessageTooltip?: string;
7
7
  stopResponseTooltip?: string;
8
8
  sendMessageTooltip?: string;
9
+ disabledTooltip?: string;
9
10
  };
10
11
  export declare type ChatPromptProps = Omit<TextAreaAutoSizeProps, "onSubmit"> & {
11
12
  /**
@@ -34,6 +35,10 @@ export declare type ChatPromptProps = Omit<TextAreaAutoSizeProps, "onSubmit"> &
34
35
  * Whether to automatically focus the textarea when the user starts typing.
35
36
  */
36
37
  autoFocusOnTyping?: boolean;
38
+ /**
39
+ * Whether to enable right-to-left (RTL) layout support.
40
+ */
41
+ rtl?: boolean;
37
42
  /**
38
43
  * Optional locale.
39
44
  */
@@ -48,6 +53,11 @@ export declare type ChatPromptProps = Omit<TextAreaAutoSizeProps, "onSubmit"> &
48
53
  */
49
54
  onStop?: () => void;
50
55
  };
56
+ /**
57
+ * The `ChatPrompt` component provides a textarea for users to type messages and a button to submit them.
58
+ *
59
+ * See the [ChatPrompt documentation page](https://satellite.algolia.com/8261d6576/p/06f740-chat-prompt) for more information.
60
+ */
51
61
  export declare const ChatPrompt: import("react").ForwardRefExoticComponent<Omit<TextAreaAutoSizeProps, "onSubmit"> & {
52
62
  /**
53
63
  * Content to render above the textarea (e.g., a title or instructions).
@@ -75,6 +85,10 @@ export declare const ChatPrompt: import("react").ForwardRefExoticComponent<Omit<
75
85
  * Whether to automatically focus the textarea when the user starts typing.
76
86
  */
77
87
  autoFocusOnTyping?: boolean | undefined;
88
+ /**
89
+ * Whether to enable right-to-left (RTL) layout support.
90
+ */
91
+ rtl?: boolean | undefined;
78
92
  /**
79
93
  * Optional locale.
80
94
  */
@@ -1,28 +1,35 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["className", "renderHeader", "children", "renderFooter", "onSubmit", "onStop", "placeholder", "placeholders", "status", "autoFocusOnTyping", "defaultValue", "value", "locale", "id"];
4
+ var _excluded = ["className", "renderHeader", "children", "renderFooter", "onSubmit", "onStop", "placeholder", "placeholders", "status", "autoFocusOnTyping", "rtl", "defaultValue", "value", "locale", "id"];
5
5
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
6
6
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
7
+ import { useMemo } from "react";
7
8
  import { useState } from "react";
8
9
  import { useRef } from "react";
9
10
  import { forwardRef } from "react";
10
11
  import { chatPromptStyles } from "./ChatPrompt.styles";
11
12
  import { useFocusOnTyping } from "./useFocusTyping";
12
13
  import { useTypewriter } from "./useTypewriter";
13
- import { IconButton } from "./../../../Actions";
14
- import { TextAreaAutoSize } from "./../../../Fields/TextAreaAutoSize/TextAreaAutoSize";
15
- import { ArrowUpIcon, StopCircleIcon } from "./../../../Icons";
16
- import { useLocale } from "./../../../Satellite";
17
- import { uniqueId } from "./../../../utils";
18
- import { mergeRefs } from "./../../../utils/mergeRefs";
14
+ import { IconButton } from "./../../Actions";
15
+ import { TextAreaAutoSize } from "./../../Fields/TextAreaAutoSize/TextAreaAutoSize";
16
+ import { ArrowUpIcon, StopCircleIcon } from "./../../Icons";
17
+ import { useLocale } from "./../../Satellite";
18
+ import { uniqueId } from "./../../utils";
19
+ import { mergeRefs } from "./../../utils/mergeRefs";
19
20
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
20
21
  var DEFAULT_CHAT_PROMPT_LOCALE = {
21
22
  textareaLabel: "Type your message...",
22
23
  emptyMessageTooltip: "Message is empty",
23
24
  stopResponseTooltip: "Stop response",
24
- sendMessageTooltip: "Send message"
25
+ sendMessageTooltip: "Send message",
26
+ disabledTooltip: "Chat prompt is disabled"
25
27
  };
28
+ /**
29
+ * The `ChatPrompt` component provides a textarea for users to type messages and a button to submit them.
30
+ *
31
+ * See the [ChatPrompt documentation page](https://satellite.algolia.com/8261d6576/p/06f740-chat-prompt) for more information.
32
+ */
26
33
  export var ChatPrompt = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
27
34
  var _ref2;
28
35
  var className = _ref.className,
@@ -38,6 +45,8 @@ export var ChatPrompt = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
38
45
  status = _ref$status === void 0 ? "ready" : _ref$status,
39
46
  _ref$autoFocusOnTypin = _ref.autoFocusOnTyping,
40
47
  autoFocusOnTyping = _ref$autoFocusOnTypin === void 0 ? false : _ref$autoFocusOnTypin,
48
+ _ref$rtl = _ref.rtl,
49
+ rtl = _ref$rtl === void 0 ? false : _ref$rtl,
41
50
  defaultValue = _ref.defaultValue,
42
51
  valueProp = _ref.value,
43
52
  propsLocale = _ref.locale,
@@ -47,10 +56,14 @@ export var ChatPrompt = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
47
56
  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_CHAT_PROMPT_LOCALE), contextLocale), propsLocale);
48
57
 
49
58
  // eslint-disable-next-line @algolia/stl/prefer-stl-helper
50
- var generatedId = uniqueId("stl-chat-prompt-");
59
+ var generatedId = useMemo(function () {
60
+ return uniqueId("stl-chat-prompt-");
61
+ }, []);
51
62
  var textareaId = propId !== null && propId !== void 0 ? propId : generatedId;
52
63
  var internalRef = useRef(null);
53
- var styles = chatPromptStyles();
64
+ var styles = chatPromptStyles({
65
+ disabled: props.disabled
66
+ });
54
67
  var _useState = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""),
55
68
  _useState2 = _slicedToArray(_useState, 2),
56
69
  internalValue = _useState2[0],
@@ -68,7 +81,11 @@ export var ChatPrompt = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
68
81
  });
69
82
  var submit = function submit(e) {
70
83
  e.preventDefault();
71
- if (!hasValue || canStop) {
84
+ if (canStop) {
85
+ onStop === null || onStop === void 0 || onStop();
86
+ return;
87
+ }
88
+ if (!hasValue) {
72
89
  return;
73
90
  }
74
91
  onSubmit === null || onSubmit === void 0 || onSubmit(e);
@@ -76,6 +93,7 @@ export var ChatPrompt = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
76
93
  return /*#__PURE__*/_jsxs("form", {
77
94
  className: styles.base(),
78
95
  onSubmit: submit,
96
+ dir: rtl ? "rtl" : "ltr",
79
97
  children: [!!renderHeader && /*#__PURE__*/_jsx("div", {
80
98
  className: styles.header(),
81
99
  children: renderHeader
@@ -120,20 +138,15 @@ export var ChatPrompt = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
120
138
  children: /*#__PURE__*/_jsx("div", {
121
139
  className: styles.actions(),
122
140
  children: /*#__PURE__*/_jsx(IconButton, {
123
- type: status === "ready" ? "submit" : undefined,
124
- onClick: function onClick(e) {
125
- if (canStop) {
126
- e.preventDefault();
127
- onStop === null || onStop === void 0 || onStop();
128
- }
129
- },
141
+ type: "submit",
130
142
  icon: canStop ? StopCircleIcon : ArrowUpIcon,
131
143
  variant: canStop ? "neutral" : "primary",
132
144
  size: "small",
133
- title: buttonDisabled ? locale.emptyMessageTooltip : canStop ? locale.stopResponseTooltip : locale.sendMessageTooltip,
145
+ title: props.disabled ? locale.disabledTooltip : buttonDisabled ? locale.emptyMessageTooltip : canStop ? locale.stopResponseTooltip : locale.sendMessageTooltip,
134
146
  tooltipSide: "top",
135
147
  disabled: buttonDisabled,
136
- className: styles.submit()
148
+ className: styles.submit(),
149
+ "data-status": status
137
150
  })
138
151
  })
139
152
  }))
@@ -0,0 +1,63 @@
1
+ export declare const chatPromptStyles: import("tailwind-variants").TVReturnType<{
2
+ disabled: {
3
+ true: {
4
+ actions: string;
5
+ };
6
+ };
7
+ }, {
8
+ base: string;
9
+ header: string;
10
+ body: string;
11
+ textarea: string;
12
+ actions: string;
13
+ submit: string;
14
+ footer: string;
15
+ }, undefined, {
16
+ responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {
17
+ disabled?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | undefined;
18
+ } | undefined;
19
+ } & import("tailwind-variants/dist/config").TWMConfig & {
20
+ twMergeConfig: {
21
+ prefix: string;
22
+ };
23
+ }, {
24
+ disabled: {
25
+ true: {
26
+ actions: string;
27
+ };
28
+ };
29
+ }, {
30
+ base: string;
31
+ header: string;
32
+ body: string;
33
+ textarea: string;
34
+ actions: string;
35
+ submit: string;
36
+ footer: string;
37
+ }, import("tailwind-variants").TVReturnType<{
38
+ disabled: {
39
+ true: {
40
+ actions: string;
41
+ };
42
+ };
43
+ }, {
44
+ base: string;
45
+ header: string;
46
+ body: string;
47
+ textarea: string;
48
+ actions: string;
49
+ submit: string;
50
+ footer: string;
51
+ }, undefined, import("tailwind-variants/dist/config").TVConfig<{
52
+ disabled: {
53
+ true: {
54
+ actions: string;
55
+ };
56
+ };
57
+ }, {
58
+ disabled: {
59
+ true: {
60
+ actions: string;
61
+ };
62
+ };
63
+ }>, unknown, unknown, undefined>>;
@@ -1,7 +1,7 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
3
- import stl from "./../../../styles/helpers/satellitePrefixer";
4
- import { tv } from "./../../../styles/helpers/tv";
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
3
+ import stl from "./../../styles/helpers/satellitePrefixer";
4
+ import { tv } from "./../../styles/helpers/tv";
5
5
  export var chatPromptStyles = tv({
6
6
  slots: {
7
7
  base: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["relative flex flex-col items-stretch gap-2 w-full"]))),
@@ -11,5 +11,12 @@ export var chatPromptStyles = tv({
11
11
  actions: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex flex-row p-3 pt-2 justify-end cursor-text"]))),
12
12
  submit: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""]))),
13
13
  footer: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex items-center justify-between gap-1.5"])))
14
+ },
15
+ variants: {
16
+ disabled: {
17
+ "true": {
18
+ actions: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-grey-100 cursor-not-allowed"])))
19
+ }
20
+ }
14
21
  }
15
22
  });
@@ -0,0 +1,30 @@
1
+ /// <reference types="react" />
2
+ /**
3
+ * Check if the element is a textual element.
4
+ * @param el - The element to check.
5
+ * @returns True if the element is a textual element, false otherwise.
6
+ */
7
+ export declare const isTextualElement: (el: HTMLElement) => boolean;
8
+ declare type Editable = HTMLTextAreaElement | HTMLInputElement | HTMLElement;
9
+ export interface UseFocusOnTypingOptions {
10
+ /**
11
+ * Whether the hook is enabled.
12
+ * @default true
13
+ */
14
+ enabled?: boolean;
15
+ /**
16
+ * Whether to allow punctuation, diacritics, etc.
17
+ * @default false
18
+ */
19
+ strictChars?: boolean;
20
+ }
21
+ /**
22
+ * Focus `editableRef` the moment the user types anywhere on the page,
23
+ * *unless* their cursor is already inside an editable control.
24
+ * @param editableRef - The ref to the editable element.
25
+ * @param options - The options for the hook.
26
+ * @param options.enabled - Whether the hook is enabled.
27
+ * @param options.strictChars - Whether to allow punctuation, diacritics, etc.
28
+ */
29
+ export declare function useFocusOnTyping<E extends Editable = Editable>(editableRef: React.RefObject<E>, options?: UseFocusOnTypingOptions): void;
30
+ export {};
@@ -1,33 +1,37 @@
1
1
  import { useCallback, useEffect } from "react";
2
- var isTextualElement = function isTextualElement(el) {
2
+
3
+ /**
4
+ * Check if the element is a textual element.
5
+ * @param el - The element to check.
6
+ * @returns True if the element is a textual element, false otherwise.
7
+ */
8
+ export var isTextualElement = function isTextualElement(el) {
3
9
  if (el.isContentEditable) return true;
4
10
  var tag = el.tagName.toUpperCase();
5
11
  if (tag === "TEXTAREA") return true;
6
12
  if (tag === "INPUT") {
7
- // Empty `type` defaults to "text"
8
- var t = (el.type || "text").toLowerCase();
13
+ var t = el.type.toLowerCase();
9
14
  return ["text", "search", "url", "email", "tel", "password", "number", "date", "datetime-local", "month", "week", "time"].includes(t);
10
15
  }
11
16
  return false;
12
17
  };
13
- var shouldFocusEditable = function shouldFocusEditable(target) {
14
- var el = target;
15
- if (!el) return true;
16
- return !isTextualElement(el);
17
- };
18
18
 
19
19
  // e.g. <div contentEditable>
20
20
 
21
21
  /**
22
22
  * Focus `editableRef` the moment the user types anywhere on the page,
23
23
  * *unless* their cursor is already inside an editable control.
24
+ * @param editableRef - The ref to the editable element.
25
+ * @param options - The options for the hook.
26
+ * @param options.enabled - Whether the hook is enabled.
27
+ * @param options.strictChars - Whether to allow punctuation, diacritics, etc.
24
28
  */
25
29
  export function useFocusOnTyping(editableRef) {
26
- var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
27
- _ref$enabled = _ref.enabled,
28
- enabled = _ref$enabled === void 0 ? true : _ref$enabled,
29
- _ref$strictChars = _ref.strictChars,
30
- strictChars = _ref$strictChars === void 0 ? false : _ref$strictChars;
30
+ var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
31
+ var _options$enabled = options.enabled,
32
+ enabled = _options$enabled === void 0 ? true : _options$enabled,
33
+ _options$strictChars = options.strictChars,
34
+ strictChars = _options$strictChars === void 0 ? false : _options$strictChars;
31
35
  var handleKeyDown = useCallback(function (e) {
32
36
  if (!enabled || e.ctrlKey || e.altKey || e.metaKey || e.isComposing || e.repeat || (
33
37
  // Printable-character test
@@ -37,7 +41,8 @@ export function useFocusOnTyping(editableRef) {
37
41
  var node = editableRef.current;
38
42
  if (!node) return;
39
43
  if (node.contains(document.activeElement)) return;
40
- if (shouldFocusEditable(e.target)) {
44
+ var el = e.target;
45
+ if (!el || !isTextualElement(el)) {
41
46
  node.focus();
42
47
  }
43
48
  }, [enabled, strictChars, editableRef]);
@@ -15,4 +15,13 @@ export interface UseTypewriterOptions {
15
15
  */
16
16
  pauseDuration?: number;
17
17
  }
18
+ /**
19
+ * A hook that types out a list of texts character by character.
20
+ * @param texts - The list of texts to type out.
21
+ * @param enabled - Whether the hook is enabled.
22
+ * @param options - The options for the hook.
23
+ * @param options.typingSpeed - The speed at which to type out the text.
24
+ * @param options.deletingSpeed - The speed at which to delete the text.
25
+ * @param options.pauseDuration - The duration to pause after typing a full word before deleting.
26
+ */
18
27
  export declare function useTypewriter(texts: string[], enabled?: boolean, options?: UseTypewriterOptions): string;
@@ -1,5 +1,14 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import { useEffect, useState } from "react";
3
+ /**
4
+ * A hook that types out a list of texts character by character.
5
+ * @param texts - The list of texts to type out.
6
+ * @param enabled - Whether the hook is enabled.
7
+ * @param options - The options for the hook.
8
+ * @param options.typingSpeed - The speed at which to type out the text.
9
+ * @param options.deletingSpeed - The speed at which to delete the text.
10
+ * @param options.pauseDuration - The duration to pause after typing a full word before deleting.
11
+ */
3
12
  export function useTypewriter(texts) {
4
13
  var enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
5
14
  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -2,17 +2,25 @@
2
2
  import type { TextAreaProps } from "../../Fields/TextArea";
3
3
  export declare type TextAreaAutoSizeProps = TextAreaProps & {
4
4
  /**
5
- * The maximum number of rows the `TextArea` can expand to when `autoResize` is enabled.
6
- * If set to 0, the `TextArea` will expand indefinitely.
5
+ * The maximum number of rows the `TextAreaAutoSize` can expand to when `autoResize` is enabled.
6
+ * If set to 0, the `TextAreaAutoSize` will expand indefinitely.
7
7
  * @default 0
8
8
  */
9
9
  maxRows?: number;
10
+ /**
11
+ * The number of rows the `TextAreaAutoSize` should start with.
12
+ */
13
+ rows?: number;
10
14
  };
11
15
  export declare const TextAreaAutoSize: import("react").ForwardRefExoticComponent<TextAreaProps & {
12
16
  /**
13
- * The maximum number of rows the `TextArea` can expand to when `autoResize` is enabled.
14
- * If set to 0, the `TextArea` will expand indefinitely.
17
+ * The maximum number of rows the `TextAreaAutoSize` can expand to when `autoResize` is enabled.
18
+ * If set to 0, the `TextAreaAutoSize` will expand indefinitely.
15
19
  * @default 0
16
20
  */
17
21
  maxRows?: number | undefined;
22
+ /**
23
+ * The number of rows the `TextAreaAutoSize` should start with.
24
+ */
25
+ rows?: number | undefined;
18
26
  } & import("react").RefAttributes<HTMLTextAreaElement>>;
@@ -13,6 +13,12 @@ export declare const textAreaAutoSizeStyles: import("tailwind-variants").TVRetur
13
13
  } | {}, {
14
14
  base: string;
15
15
  }, undefined, {
16
+ responsiveVariants?: boolean | ("sm" | "md" | "lg" | "xl" | "2xl")[] | {} | undefined;
17
+ } & import("tailwind-variants/dist/config").TWMConfig & {
18
+ twMergeConfig: {
19
+ prefix: string;
20
+ };
21
+ }, {
16
22
  [key: string]: {
17
23
  [key: string]: import("tailwind-merge").ClassNameValue | {
18
24
  base?: import("tailwind-merge").ClassNameValue;
@@ -22,4 +28,10 @@ export declare const textAreaAutoSizeStyles: import("tailwind-variants").TVRetur
22
28
  base: string;
23
29
  }, import("tailwind-variants").TVReturnType<unknown, {
24
30
  base: string;
25
- }, undefined, unknown, unknown, undefined>>;
31
+ }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
32
+ [key: string]: {
33
+ [key: string]: import("tailwind-merge").ClassNameValue | {
34
+ base?: import("tailwind-merge").ClassNameValue;
35
+ };
36
+ };
37
+ } | {}>, unknown, unknown, undefined>>;
@@ -1,5 +1,4 @@
1
1
  export * from "./Card";
2
- export * from "./Chat";
3
2
  export * from "./CollapsibleCard";
4
3
  export * from "./FlexGrid";
5
4
  export * from "./Insert";
@@ -1,5 +1,4 @@
1
1
  export * from "./Card";
2
- export * from "./Chat";
3
2
  export * from "./CollapsibleCard";
4
3
  export * from "./FlexGrid";
5
4
  export * from "./Insert";
@@ -1,11 +1,11 @@
1
1
  import type { IconButtonWithFeedbackLocale } from "../Actions";
2
+ import type { ChatMessageErrorLocale } from "../Chat/ChatMessageError";
3
+ import type { ChatMessageLocale } from "../Chat/ChatMessages";
4
+ import type { ChatPromptLocale } from "../Chat/ChatPrompt";
2
5
  import type { AutoCompleteLocale, DateInputLocale, DatePickerLocale, DropzoneLocale, ExperimentalDateRangeInputLocale, ExperimentalFormLocale, FilePickerLocale, InputPropsLocale } from "../Fields";
3
6
  import type { AnnouncementBadgeLocale, TagLocale, ToastLocale, ToastsLocale } from "../Indicators";
4
7
  import type { UserAvatarLocale } from "../Indicators/Avatars";
5
8
  import type { DataTableLocale, SidebarLocale } from "../Layout";
6
- import type { ChatMessageErrorLocale } from "../Layout/Chat/ChatMessageError";
7
- import type { ChatMessageLocale } from "../Layout/Chat/ChatMessages";
8
- import type { ChatPromptLocale } from "../Layout/Chat/ChatPrompt";
9
9
  import type { CompactPaginationLocale, DotPaginationLocale, PaginationLocale, StepperLocale } from "../Navigation";
10
10
  import type { ModalLocale, PopoverLocale } from "../Overlay";
11
11
  export declare type ComponentsLocales = {
@@ -7,6 +7,7 @@ export * from "./utils/NumberUnion";
7
7
  export * from "./utils/parseUrl";
8
8
  export * from "./utils/useLinkProps";
9
9
  export * from "./Actions";
10
+ export * from "./Chat";
10
11
  export * from "./Fields";
11
12
  export * from "./Helpers";
12
13
  export * from "./Icons";
package/dist/esm/index.js CHANGED
@@ -7,6 +7,7 @@ export * from "./utils/NumberUnion";
7
7
  export * from "./utils/parseUrl";
8
8
  export * from "./utils/useLinkProps";
9
9
  export * from "./Actions";
10
+ export * from "./Chat";
10
11
  export * from "./Fields";
11
12
  export * from "./Helpers";
12
13
  export * from "./Icons";