@cmnd-ai/chatbot-react 1.9.0 → 1.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Readme.md +11 -8
- package/dist/ChatProvider/index.js +1 -1
- package/dist/CmndChatBot/index.d.ts +2 -1
- package/dist/CmndChatBot/index.js +2 -2
- package/dist/components/Chatbubble.d.ts +2 -1
- package/dist/components/Chatbubble.js +4 -2
- package/dist/components/Conversation.d.ts +2 -1
- package/dist/components/Conversation.js +2 -2
- package/dist/components/ConversationsPanel/index.d.ts +1 -0
- package/dist/components/ConversationsPanel/index.js +4 -3
- package/dist/utils/saveConversationIdToLocalStorage/index.d.ts +2 -1
- package/dist/utils/saveConversationIdToLocalStorage/index.js +2 -2
- package/package.json +1 -1
package/Readme.md
CHANGED
|
@@ -36,6 +36,7 @@ const App = () => {
|
|
|
36
36
|
<CmndChatBot
|
|
37
37
|
chatbotId={123}
|
|
38
38
|
organizationId={456}
|
|
39
|
+
chatHistoryStorageKey="your-unique-storage-key"
|
|
39
40
|
apiKey="your-api-key"
|
|
40
41
|
baseUrl="https://api.example.com"
|
|
41
42
|
/>
|
|
@@ -56,6 +57,7 @@ const App = () => {
|
|
|
56
57
|
<CmndChatBot
|
|
57
58
|
chatbotId={123}
|
|
58
59
|
organizationId={456}
|
|
60
|
+
chatHistoryStorageKey="your-unique-storage-key"
|
|
59
61
|
apiKey="your-api-key"
|
|
60
62
|
baseUrl="https://api.example.com"
|
|
61
63
|
theme="dark"
|
|
@@ -128,14 +130,15 @@ const App = () => {
|
|
|
128
130
|
|
|
129
131
|
### Optional Props
|
|
130
132
|
|
|
131
|
-
| Prop
|
|
132
|
-
|
|
|
133
|
-
| `theme`
|
|
134
|
-
| `UITools`
|
|
135
|
-
| `enabledTools`
|
|
136
|
-
| `initialMemory`
|
|
137
|
-
| `customStyles`
|
|
138
|
-
| `Components`
|
|
133
|
+
| Prop | Type | Default | Description |
|
|
134
|
+
| ----------------------- | --------------------- | ----------- | ----------------------------------------------------- |
|
|
135
|
+
| `theme` | `"light" \| "dark"` | `"light"` | Theme for the chatbot |
|
|
136
|
+
| `UITools` | `CMNDChatbotUITool[]` | `[]` | Array of UI tools |
|
|
137
|
+
| `enabledTools` | `any[]` | `[]` | Array of enabled tools |
|
|
138
|
+
| `initialMemory` | `CMNDChatMemory` | `undefined` | Initial conversation memory |
|
|
139
|
+
| `customStyles` | `CustomStyles` | `undefined` | Custom CSS styles |
|
|
140
|
+
| `Components` | `Components` | `undefined` | Custom component overrides |
|
|
141
|
+
| `chatHistoryStorageKey` | `string` | `undefined` | The chat history key defined by the client |
|
|
139
142
|
|
|
140
143
|
## Custom Components
|
|
141
144
|
|
|
@@ -171,7 +171,7 @@ function ChatProvider(props) {
|
|
|
171
171
|
closeSidePanel,
|
|
172
172
|
setMessageText,
|
|
173
173
|
sendMessage,
|
|
174
|
-
}, children: error ? (_jsx("div", { children: "An error occured" })) : (_jsxs(_Fragment, { children: [props.children, _jsx(ConversationsPanel, { ref: conversationsPanelRef, organizationId: organizationId, chatbotId: chatbotId, baseUrl: baseUrl, theme: props.theme, enabledTools: getTools({
|
|
174
|
+
}, children: error ? (_jsx("div", { children: "An error occured" })) : (_jsxs(_Fragment, { children: [props.children, _jsx(ConversationsPanel, { ref: conversationsPanelRef, organizationId: organizationId, chatbotId: chatbotId, baseUrl: baseUrl, chatHistoryStorageKey: props.chatHistoryStorageKey, theme: props.theme, enabledTools: getTools({
|
|
175
175
|
apiTools: enabledTools,
|
|
176
176
|
uiTools: parseUITools(UITools),
|
|
177
177
|
}), postSessionMessage: postSessionMessage, setChatbotConversationId: setChatbotConversationId, chatbotConversationId: chatbotConversationId, Components: Components, UITools: parseUITools(UITools), customStyles: props.customStyles, isSidebarCollapsed: isSidebarCollapsed, setIsSidebarCollapsed: setIsSidebarCollapsed, selectedConversation: selectedConversation, setSelectedConversation: setSelectedConversation, messages: messages, setMessages: setMessages, input: input, setInput: setInput, inputRef: inputRef })] })) }));
|
|
@@ -3,6 +3,7 @@ import { CMNDChatbotUITool, CMNDChatMemory, CustomStyles, InputFieldProps, SendB
|
|
|
3
3
|
export interface CmndChatBotProps {
|
|
4
4
|
chatbotId: number;
|
|
5
5
|
organizationId: number;
|
|
6
|
+
chatHistoryStorageKey?: string;
|
|
6
7
|
apiKey?: string;
|
|
7
8
|
baseUrl: string;
|
|
8
9
|
theme?: "light" | "dark";
|
|
@@ -20,5 +21,5 @@ export interface CmndChatBotProps {
|
|
|
20
21
|
error?: any;
|
|
21
22
|
};
|
|
22
23
|
}
|
|
23
|
-
declare function CmndChatBot({ chatbotId, organizationId, apiKey, baseUrl, theme, UITools, customStyles, enabledTools, Components, initialMemory, }: CmndChatBotProps): JSX.Element;
|
|
24
|
+
declare function CmndChatBot({ chatbotId, organizationId, apiKey, baseUrl, theme, UITools, customStyles, chatHistoryStorageKey, enabledTools, Components, initialMemory, }: CmndChatBotProps): JSX.Element;
|
|
24
25
|
export default CmndChatBot;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import ChatProvider from "../ChatProvider/index.js";
|
|
3
|
-
function CmndChatBot({ chatbotId, organizationId, apiKey, baseUrl, theme, UITools, customStyles, enabledTools = [], Components, initialMemory, }) {
|
|
4
|
-
return (_jsx(ChatProvider, { chatbotId: chatbotId, organizationId: organizationId, apiKey: apiKey, baseUrl: baseUrl, theme: theme, UITools: UITools, customStyles: customStyles, enabledTools: enabledTools, Components: Components, initialMemory: initialMemory }));
|
|
3
|
+
function CmndChatBot({ chatbotId, organizationId, apiKey, baseUrl, theme, UITools, customStyles, chatHistoryStorageKey, enabledTools = [], Components, initialMemory, }) {
|
|
4
|
+
return (_jsx(ChatProvider, { chatbotId: chatbotId, organizationId: organizationId, chatHistoryStorageKey: chatHistoryStorageKey, apiKey: apiKey, baseUrl: baseUrl, theme: theme, UITools: UITools, customStyles: customStyles, enabledTools: enabledTools, Components: Components, initialMemory: initialMemory }));
|
|
5
5
|
}
|
|
6
6
|
export default CmndChatBot;
|
|
@@ -18,6 +18,7 @@ interface ChatBubbleProps {
|
|
|
18
18
|
customStyles?: CustomStyles;
|
|
19
19
|
chatbotId: number;
|
|
20
20
|
organizationId: number;
|
|
21
|
+
chatHistoryStorageKey?: string;
|
|
21
22
|
theme?: "light" | "dark";
|
|
22
23
|
Components?: {
|
|
23
24
|
InputField?: (params: InputFieldProps) => JSX.Element;
|
|
@@ -28,5 +29,5 @@ interface ChatBubbleProps {
|
|
|
28
29
|
error?: any;
|
|
29
30
|
};
|
|
30
31
|
}
|
|
31
|
-
declare const Chatbubble: ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, theme, Components, }: ChatBubbleProps) => JSX.Element | null;
|
|
32
|
+
declare const Chatbubble: ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, theme, Components, }: ChatBubbleProps) => JSX.Element | null;
|
|
32
33
|
export default Chatbubble;
|
|
@@ -27,7 +27,7 @@ const patchLastMessageToolInfo = (messages, toolInfo) => {
|
|
|
27
27
|
const newMessages = [...shallowCopyOfMessagesWithoutLast, copyOfLastMessage];
|
|
28
28
|
return newMessages;
|
|
29
29
|
};
|
|
30
|
-
const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIsChatLoading, setCanSendMessage, setChatbotConversationId, chatbotId, organizationId, }) => {
|
|
30
|
+
const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIsChatLoading, setCanSendMessage, setChatbotConversationId, chatbotId, organizationId, chatHistoryStorageKey }) => {
|
|
31
31
|
const newMessages = patchLastMessageToolInfo(messages, {
|
|
32
32
|
confirmed: true,
|
|
33
33
|
});
|
|
@@ -45,6 +45,7 @@ const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIs
|
|
|
45
45
|
chatbotConversationId,
|
|
46
46
|
chatbotId,
|
|
47
47
|
organizationId,
|
|
48
|
+
chatHistoryStorageKey
|
|
48
49
|
});
|
|
49
50
|
}
|
|
50
51
|
messages && setMessages(messages);
|
|
@@ -75,7 +76,7 @@ const getChatAvatar = (role, theme = "light", Components) => {
|
|
|
75
76
|
return _jsx(BsRobot, { color: iconColor });
|
|
76
77
|
}
|
|
77
78
|
};
|
|
78
|
-
const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, theme, Components, }) => {
|
|
79
|
+
const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationId, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, theme, Components, }) => {
|
|
79
80
|
const toolData = tools?.find((t) => t.name === toolCallDetails?.name);
|
|
80
81
|
const hasConfirmedToolRun = useRef(false);
|
|
81
82
|
const isPostingMessage = useRef(false);
|
|
@@ -95,6 +96,7 @@ const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage,
|
|
|
95
96
|
setChatbotConversationId,
|
|
96
97
|
chatbotId,
|
|
97
98
|
organizationId,
|
|
99
|
+
chatHistoryStorageKey,
|
|
98
100
|
});
|
|
99
101
|
}
|
|
100
102
|
}, []);
|
|
@@ -27,9 +27,10 @@ export interface ConversationProps {
|
|
|
27
27
|
setCurrentConversationMemory: (memory: CMNDChatMemory) => Promise<any>;
|
|
28
28
|
chatbotId: number;
|
|
29
29
|
organizationId: number;
|
|
30
|
+
chatHistoryStorageKey?: string;
|
|
30
31
|
isMessagesScrolledToBottom?: boolean;
|
|
31
32
|
resetMessagesScroll?: () => void;
|
|
32
33
|
inputRef?: React.RefObject<HTMLInputElement>;
|
|
33
34
|
}
|
|
34
|
-
declare const Conversation: ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, isMessagesScrolledToBottom, resetMessagesScroll, inputRef, }: ConversationProps) => JSX.Element;
|
|
35
|
+
declare const Conversation: ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, isMessagesScrolledToBottom, resetMessagesScroll, inputRef, }: ConversationProps) => JSX.Element;
|
|
35
36
|
export default Conversation;
|
|
@@ -3,8 +3,8 @@ import Chatbubble from "./Chatbubble.js";
|
|
|
3
3
|
import LoadingBubble from "./LoadingBubble.js";
|
|
4
4
|
import ScrollToBottomButton from "./ScrollToBottomButton.js";
|
|
5
5
|
import ChatInputBox from "./ChatInputBox.js";
|
|
6
|
-
const Conversation = ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, isMessagesScrolledToBottom = true, resetMessagesScroll, inputRef, }) => {
|
|
7
|
-
return (_jsxs("div", { className: "cmnd-conversations", children: [_jsxs("div", { ref: messagesRef, id: "messages", className: "cmnd-conversations-messages", children: [error, messages.map((m, i) => (_jsx(Chatbubble, { chatbotId: chatbotId, organizationId: organizationId, customStyles: customStyles, hide: m.hiddenFromUser, message: m.message, role: m.role, toolCallDetails: m.tool, tools: enabledTools, postSessionMessage: postSessionMessage, messages: messages, setMessages: setMessages, id: m.id, setChatbotConversationId: setChatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, UITools: UITools, theme: theme, Components: Components }, i))), isChatLoading ? (_jsx(LoadingBubble, { customStyles: customStyles, chatbotId: chatbotId, organizationId: organizationId, theme: theme, Components: Components })) : null] }), _jsx(ScrollToBottomButton, { onClick: resetMessagesScroll || (() => { }), isVisible: !isMessagesScrolledToBottom && messages.length > 0, theme: theme, customStyles: customStyles }), _jsxs("div", { id: "cmnd-input-div", className: "cmnd-input-div", children: [Components?.InputField ? (_jsx(Components.InputField, { ...{ input, setInput, canSendMessage, handleSendClick, inputRef } })) : (_jsx(ChatInputBox, { input: input, setInput: setInput, handleSendClick: handleSendClick, inputRef: inputRef })), Components?.SendButton ? (_jsx(Components.SendButton, { ...{
|
|
6
|
+
const Conversation = ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationId, setIsChatLoading, setCanSendMessage, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, isMessagesScrolledToBottom = true, resetMessagesScroll, inputRef, }) => {
|
|
7
|
+
return (_jsxs("div", { className: "cmnd-conversations", children: [_jsxs("div", { ref: messagesRef, id: "messages", className: "cmnd-conversations-messages", children: [error, messages.map((m, i) => (_jsx(Chatbubble, { chatbotId: chatbotId, organizationId: organizationId, chatHistoryStorageKey: chatHistoryStorageKey, customStyles: customStyles, hide: m.hiddenFromUser, message: m.message, role: m.role, toolCallDetails: m.tool, tools: enabledTools, postSessionMessage: postSessionMessage, messages: messages, setMessages: setMessages, id: m.id, setChatbotConversationId: setChatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, UITools: UITools, theme: theme, Components: Components }, i))), isChatLoading ? (_jsx(LoadingBubble, { customStyles: customStyles, chatbotId: chatbotId, organizationId: organizationId, theme: theme, Components: Components })) : null] }), _jsx(ScrollToBottomButton, { onClick: resetMessagesScroll || (() => { }), isVisible: !isMessagesScrolledToBottom && messages.length > 0, theme: theme, customStyles: customStyles }), _jsxs("div", { id: "cmnd-input-div", className: "cmnd-input-div", children: [Components?.InputField ? (_jsx(Components.InputField, { ...{ input, setInput, canSendMessage, handleSendClick, inputRef } })) : (_jsx(ChatInputBox, { input: input, setInput: setInput, handleSendClick: handleSendClick, inputRef: inputRef })), Components?.SendButton ? (_jsx(Components.SendButton, { ...{
|
|
8
8
|
canSendMessage,
|
|
9
9
|
handleSendClick,
|
|
10
10
|
} })) : (_jsx("button", { className: "cmnd-send-button", onClick: handleSendClick, children: "Send" }))] })] }));
|
|
@@ -10,7 +10,7 @@ import getConversationLocalStorageKey from "../../utils/getConversationLocalStor
|
|
|
10
10
|
import saveConversationIdToLocalStorage from "../../utils/saveConversationIdToLocalStorage/index.js";
|
|
11
11
|
import getUTCDateTime from "../../utils/getUTCDateTime/index.js";
|
|
12
12
|
import useMessagesScroll from "../../hooks/use-messages-scroll.js";
|
|
13
|
-
export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseUrl, theme = "light", enabledTools = [], setChatbotConversationId, chatbotConversationId, postSessionMessage, Components, UITools, customStyles, isSidebarCollapsed, setIsSidebarCollapsed, selectedConversation, setSelectedConversation, messages, setMessages, input, setInput, inputRef, }, ref) => {
|
|
13
|
+
export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseUrl, chatHistoryStorageKey, theme = "light", enabledTools = [], setChatbotConversationId, chatbotConversationId, postSessionMessage, Components, UITools, customStyles, isSidebarCollapsed, setIsSidebarCollapsed, selectedConversation, setSelectedConversation, messages, setMessages, input, setInput, inputRef, }, ref) => {
|
|
14
14
|
const [isChatLoading, setIsChatLoading] = useState(false);
|
|
15
15
|
const [canSendMessage, setCanSendMessage] = useState(true);
|
|
16
16
|
const [conversationIds, setConversationIds] = useState([]);
|
|
@@ -51,7 +51,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
51
51
|
},
|
|
52
52
|
};
|
|
53
53
|
const colors = themeColors[theme];
|
|
54
|
-
const localStorageKey = getConversationLocalStorageKey({
|
|
54
|
+
const localStorageKey = chatHistoryStorageKey || getConversationLocalStorageKey({
|
|
55
55
|
organizationId,
|
|
56
56
|
chatbotId,
|
|
57
57
|
});
|
|
@@ -123,6 +123,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
123
123
|
chatbotConversationId: newConversationId,
|
|
124
124
|
chatbotId,
|
|
125
125
|
organizationId,
|
|
126
|
+
chatHistoryStorageKey,
|
|
126
127
|
});
|
|
127
128
|
refetchConversationIds();
|
|
128
129
|
if (selectedConversation &&
|
|
@@ -351,5 +352,5 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
351
352
|
fontSize: "16px",
|
|
352
353
|
textAlign: "center",
|
|
353
354
|
padding: "20px",
|
|
354
|
-
}, children: _jsx("div", { children: _jsx("div", { children: "Select a conversation or start a new one" }) }) })) : (_jsx(Conversation, { messages: messages, setMessages: setMessages, handleSendClick: handleSendClick, input: input, setInput: setInput, isChatLoading: isChatLoading, error: error ? "Error loading conversations" : null, messagesRef: messagesRef, setChatbotConversationId: setChatbotConversationId, chatbotConversationId: chatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, canSendMessage: canSendMessage, enabledTools: enabledTools, postSessionMessage: postSessionMessage, theme: theme, Components: Components, UITools: UITools, customStyles: customStyles, setCurrentConversationMemory: setCurrentConversationMemory, chatbotId: chatbotId, organizationId: organizationId, isMessagesScrolledToBottom: isMessagesScrolledToBottom, resetMessagesScroll: resetMessagesScroll, inputRef: inputRef })) })] }));
|
|
355
|
+
}, children: _jsx("div", { children: _jsx("div", { children: "Select a conversation or start a new one" }) }) })) : (_jsx(Conversation, { messages: messages, setMessages: setMessages, handleSendClick: handleSendClick, input: input, setInput: setInput, isChatLoading: isChatLoading, error: error ? "Error loading conversations" : null, messagesRef: messagesRef, setChatbotConversationId: setChatbotConversationId, chatbotConversationId: chatbotConversationId, setIsChatLoading: setIsChatLoading, setCanSendMessage: setCanSendMessage, canSendMessage: canSendMessage, enabledTools: enabledTools, postSessionMessage: postSessionMessage, theme: theme, Components: Components, UITools: UITools, customStyles: customStyles, setCurrentConversationMemory: setCurrentConversationMemory, chatbotId: chatbotId, organizationId: organizationId, chatHistoryStorageKey: chatHistoryStorageKey, isMessagesScrolledToBottom: isMessagesScrolledToBottom, resetMessagesScroll: resetMessagesScroll, inputRef: inputRef })) })] }));
|
|
355
356
|
});
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
declare const saveConversationIdToLocalStorage: ({ chatbotConversationId, chatbotId, organizationId, }: {
|
|
1
|
+
declare const saveConversationIdToLocalStorage: ({ chatbotConversationId, chatbotId, organizationId, chatHistoryStorageKey }: {
|
|
2
2
|
chatbotConversationId: number;
|
|
3
3
|
chatbotId: number;
|
|
4
4
|
organizationId: number;
|
|
5
|
+
chatHistoryStorageKey?: string | undefined;
|
|
5
6
|
}) => Promise<void>;
|
|
6
7
|
export default saveConversationIdToLocalStorage;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import getConversationLocalStorageKey from "../getConversationLocalStorageKey/index.js";
|
|
2
|
-
const saveConversationIdToLocalStorage = async ({ chatbotConversationId, chatbotId, organizationId, }) => {
|
|
2
|
+
const saveConversationIdToLocalStorage = async ({ chatbotConversationId, chatbotId, organizationId, chatHistoryStorageKey }) => {
|
|
3
3
|
try {
|
|
4
|
-
const key = getConversationLocalStorageKey({
|
|
4
|
+
const key = chatHistoryStorageKey || getConversationLocalStorageKey({
|
|
5
5
|
organizationId,
|
|
6
6
|
chatbotId: Number(chatbotId),
|
|
7
7
|
});
|