@cmnd-ai/chatbot-react 1.9.1 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ChatProvider/index.js +15 -15
- package/dist/ChatProvider/processStream/index.js +2 -3
- package/dist/components/Chatbubble.d.ts +2 -2
- package/dist/components/Chatbubble.js +11 -11
- package/dist/components/Conversation.d.ts +3 -3
- package/dist/components/Conversation.js +2 -2
- package/dist/components/ConversationCard.js +1 -1
- package/dist/components/ConversationsPanel/index.d.ts +2 -2
- package/dist/components/ConversationsPanel/index.js +25 -23
- package/dist/components/LoadingBubble.js +1 -1
- package/dist/constants/endpoints.d.ts +3 -3
- package/dist/constants/endpoints.js +2 -2
- package/dist/services/deleteChatbotConversationMemory/index.d.ts +2 -2
- package/dist/services/deleteChatbotConversationMemory/index.js +2 -2
- package/dist/services/getChatBotConversationsList/index.d.ts +1 -1
- package/dist/services/getEmbedChatBotById.d.ts +2 -0
- package/dist/services/getEmbedChatBotById.js +6 -0
- package/dist/services/patchChatbotConversationMemory/index.d.ts +2 -2
- package/dist/services/patchChatbotConversationMemory/index.js +2 -2
- package/dist/type.d.ts +2 -3
- package/dist/utils/saveConversationIdToLocalStorage/index.d.ts +2 -2
- package/dist/utils/saveConversationIdToLocalStorage/index.js +8 -7
- package/package.json +3 -2
- package/dist/services/getchatBotById.d.ts +0 -2
- package/dist/services/getchatBotById.js +0 -6
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React, { useEffect, useRef, useState } from "react";
|
|
3
3
|
import postUserConversation from "../services/postUserConversation.js";
|
|
4
|
-
import
|
|
4
|
+
import getEmbedChatBotById from "../services/getEmbedChatBotById.js";
|
|
5
5
|
import patchChatbotConversationMemory from "../services/patchChatbotConversationMemory/index.js";
|
|
6
6
|
import deleteChatbotConversationMemory from "../services/deleteChatbotConversationMemory/index.js";
|
|
7
7
|
import parseUITools from "../utils/parseUITools.js";
|
|
8
8
|
import getTools from "../utils/getTools/index.js";
|
|
9
9
|
import { ConversationsPanel, } from "../components/ConversationsPanel/index.js";
|
|
10
|
-
let
|
|
10
|
+
let globalChatbotConversationRef;
|
|
11
11
|
let globalChatbotProps;
|
|
12
12
|
export const ChatProviderContext = React.createContext(undefined);
|
|
13
13
|
export const setCurrentConversationMemory = async (memory) => {
|
|
14
14
|
try {
|
|
15
|
-
if (!
|
|
15
|
+
if (!globalChatbotConversationRef || !globalChatbotProps) {
|
|
16
16
|
return Promise.reject("setCurrentConversationMemory method is only available when user is interacting with an active chat thread.");
|
|
17
17
|
}
|
|
18
18
|
return await patchChatbotConversationMemory({
|
|
19
|
-
|
|
19
|
+
chatbotConversationRef: globalChatbotConversationRef,
|
|
20
20
|
memory,
|
|
21
21
|
baseUrl: globalChatbotProps.baseUrl,
|
|
22
22
|
chatbotId: globalChatbotProps.chatbotId,
|
|
@@ -29,11 +29,11 @@ export const setCurrentConversationMemory = async (memory) => {
|
|
|
29
29
|
};
|
|
30
30
|
export const deleteCurrentConversationMemory = async (memoryKeyToDelete) => {
|
|
31
31
|
try {
|
|
32
|
-
if (!
|
|
32
|
+
if (!globalChatbotConversationRef || !globalChatbotProps) {
|
|
33
33
|
return Promise.reject("deleteCurrentConversationMemory method is only available when user is interacting with an active chat thread.");
|
|
34
34
|
}
|
|
35
35
|
return await deleteChatbotConversationMemory({
|
|
36
|
-
|
|
36
|
+
chatbotConversationRef: globalChatbotConversationRef,
|
|
37
37
|
memoryKeyToDelete,
|
|
38
38
|
baseUrl: globalChatbotProps.baseUrl,
|
|
39
39
|
chatbotId: globalChatbotProps.chatbotId,
|
|
@@ -54,7 +54,7 @@ function ChatProvider(props) {
|
|
|
54
54
|
const [canContinue] = useState(false);
|
|
55
55
|
const [isChatLoading, setIsChatLoading] = useState(false);
|
|
56
56
|
const [canSendMessage, setCanSendMessage] = useState(true);
|
|
57
|
-
const [
|
|
57
|
+
const [chatbotConversationRef, setChatbotConversationRef] = useState(undefined);
|
|
58
58
|
const [enabledTools, setEnabledTools] = useState([]);
|
|
59
59
|
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
|
60
60
|
const [selectedConversation, setSelectedConversation] = useState(null);
|
|
@@ -63,11 +63,11 @@ function ChatProvider(props) {
|
|
|
63
63
|
const [pendingSendText, setPendingSendText] = useState(null);
|
|
64
64
|
const conversationsPanelRef = useRef(null);
|
|
65
65
|
useEffect(() => {
|
|
66
|
-
|
|
67
|
-
}, [
|
|
66
|
+
globalChatbotConversationRef = chatbotConversationRef;
|
|
67
|
+
}, [chatbotConversationRef]);
|
|
68
68
|
useEffect(() => {
|
|
69
69
|
setLoading(true);
|
|
70
|
-
|
|
70
|
+
getEmbedChatBotById(baseUrl, organizationId, chatbotId)
|
|
71
71
|
.then((response) => {
|
|
72
72
|
const { chatbot } = response.data;
|
|
73
73
|
setEnabledTools(chatbot.enabledTools);
|
|
@@ -86,8 +86,8 @@ function ChatProvider(props) {
|
|
|
86
86
|
messages: newMessages,
|
|
87
87
|
uiTools: parseUITools(UITools),
|
|
88
88
|
};
|
|
89
|
-
if (
|
|
90
|
-
payload["
|
|
89
|
+
if (chatbotConversationRef) {
|
|
90
|
+
payload["chatbotConversationRef"] = chatbotConversationRef;
|
|
91
91
|
}
|
|
92
92
|
else {
|
|
93
93
|
payload["initialMemory"] = initialMemory;
|
|
@@ -155,14 +155,14 @@ function ChatProvider(props) {
|
|
|
155
155
|
canSendMessage,
|
|
156
156
|
isChatLoading,
|
|
157
157
|
postSessionMessage,
|
|
158
|
-
|
|
158
|
+
setChatbotConversationRef,
|
|
159
159
|
setIsChatLoading,
|
|
160
160
|
setCanSendMessage,
|
|
161
161
|
enabledTools: getTools({
|
|
162
162
|
apiTools: enabledTools,
|
|
163
163
|
uiTools: parseUITools(UITools),
|
|
164
164
|
}),
|
|
165
|
-
|
|
165
|
+
chatbotConversationRef,
|
|
166
166
|
UITools: parseUITools(UITools),
|
|
167
167
|
},
|
|
168
168
|
createNewConversation,
|
|
@@ -174,6 +174,6 @@ function ChatProvider(props) {
|
|
|
174
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
|
-
}), postSessionMessage: postSessionMessage,
|
|
177
|
+
}), postSessionMessage: postSessionMessage, setChatbotConversationRef: setChatbotConversationRef, chatbotConversationRef: chatbotConversationRef, 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 })] })) }));
|
|
178
178
|
}
|
|
179
179
|
export default ChatProvider;
|
|
@@ -50,13 +50,12 @@ const processStream = async (reader, onData) => {
|
|
|
50
50
|
//at this point, the dataObject does not have a content propery
|
|
51
51
|
//and it is completed
|
|
52
52
|
//get the last message from the dataObject to check if it is a function call
|
|
53
|
-
const { messages, completionFinished, finalResponseWithUsageData,
|
|
53
|
+
const { messages, completionFinished, finalResponseWithUsageData, chatbotConversationRef, totalTokens, totalCost, } = dataObject;
|
|
54
54
|
onData({
|
|
55
55
|
messages,
|
|
56
56
|
completionFinished,
|
|
57
57
|
finalResponseWithUsageData,
|
|
58
|
-
|
|
59
|
-
chatbotConversationId,
|
|
58
|
+
chatbotConversationRef,
|
|
60
59
|
totalTokens,
|
|
61
60
|
totalCost,
|
|
62
61
|
});
|
|
@@ -11,7 +11,7 @@ interface ChatBubbleProps {
|
|
|
11
11
|
hide?: boolean;
|
|
12
12
|
id: string;
|
|
13
13
|
isLoadingBubble?: boolean;
|
|
14
|
-
|
|
14
|
+
setChatbotConversationRef: Dispatch<SetStateAction<string | undefined>>;
|
|
15
15
|
setCanSendMessage: Dispatch<SetStateAction<boolean>>;
|
|
16
16
|
setIsChatLoading: Dispatch<SetStateAction<boolean>>;
|
|
17
17
|
UITools?: CMNDChatbotUITool[];
|
|
@@ -29,5 +29,5 @@ interface ChatBubbleProps {
|
|
|
29
29
|
error?: any;
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
declare const Chatbubble: ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide,
|
|
32
|
+
declare const Chatbubble: ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationRef, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, theme, Components, }: ChatBubbleProps) => JSX.Element | null;
|
|
33
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,
|
|
30
|
+
const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIsChatLoading, setCanSendMessage, setChatbotConversationRef, chatbotId, organizationId, chatHistoryStorageKey, }) => {
|
|
31
31
|
const newMessages = patchLastMessageToolInfo(messages, {
|
|
32
32
|
confirmed: true,
|
|
33
33
|
});
|
|
@@ -38,14 +38,14 @@ const confirmToolRun = async ({ messages, setMessages, postSessionMessage, setIs
|
|
|
38
38
|
if (data.finalResponseWithUsageData) {
|
|
39
39
|
setCanSendMessage(true);
|
|
40
40
|
setIsChatLoading(false);
|
|
41
|
-
const { messages,
|
|
42
|
-
if (
|
|
43
|
-
|
|
41
|
+
const { messages, chatbotConversationRef } = data;
|
|
42
|
+
if (chatbotConversationRef) {
|
|
43
|
+
setChatbotConversationRef(chatbotConversationRef);
|
|
44
44
|
await saveConversationIdToLocalStorage({
|
|
45
|
-
|
|
45
|
+
chatbotConversationRef,
|
|
46
46
|
chatbotId,
|
|
47
47
|
organizationId,
|
|
48
|
-
chatHistoryStorageKey
|
|
48
|
+
chatHistoryStorageKey,
|
|
49
49
|
});
|
|
50
50
|
}
|
|
51
51
|
messages && setMessages(messages);
|
|
@@ -76,7 +76,7 @@ const getChatAvatar = (role, theme = "light", Components) => {
|
|
|
76
76
|
return _jsx(BsRobot, { color: iconColor });
|
|
77
77
|
}
|
|
78
78
|
};
|
|
79
|
-
const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide,
|
|
79
|
+
const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage, setMessages, messages, hide, setChatbotConversationRef, setCanSendMessage, setIsChatLoading, isLoadingBubble, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, theme, Components, }) => {
|
|
80
80
|
const toolData = tools?.find((t) => t.name === toolCallDetails?.name);
|
|
81
81
|
const hasConfirmedToolRun = useRef(false);
|
|
82
82
|
const isPostingMessage = useRef(false);
|
|
@@ -93,7 +93,7 @@ const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage,
|
|
|
93
93
|
postSessionMessage,
|
|
94
94
|
setIsChatLoading,
|
|
95
95
|
setCanSendMessage,
|
|
96
|
-
|
|
96
|
+
setChatbotConversationRef,
|
|
97
97
|
chatbotId,
|
|
98
98
|
organizationId,
|
|
99
99
|
chatHistoryStorageKey,
|
|
@@ -154,9 +154,9 @@ const Chatbubble = ({ message, role, toolCallDetails, tools, postSessionMessage,
|
|
|
154
154
|
if (data.finalResponseWithUsageData) {
|
|
155
155
|
setIsChatLoading(false);
|
|
156
156
|
setCanSendMessage(true);
|
|
157
|
-
const {
|
|
158
|
-
if (
|
|
159
|
-
|
|
157
|
+
const { chatbotConversationRef, messages } = data;
|
|
158
|
+
if (chatbotConversationRef) {
|
|
159
|
+
setChatbotConversationRef(chatbotConversationRef);
|
|
160
160
|
}
|
|
161
161
|
messages && setMessages(messages);
|
|
162
162
|
}
|
|
@@ -9,8 +9,8 @@ export interface ConversationProps {
|
|
|
9
9
|
isChatLoading: boolean;
|
|
10
10
|
error: string | null;
|
|
11
11
|
messagesRef: React.RefObject<HTMLDivElement>;
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
setChatbotConversationRef: Dispatch<SetStateAction<string | undefined>>;
|
|
13
|
+
chatbotConversationRef: string | undefined;
|
|
14
14
|
setIsChatLoading: Dispatch<SetStateAction<boolean>>;
|
|
15
15
|
setCanSendMessage: Dispatch<SetStateAction<boolean>>;
|
|
16
16
|
canSendMessage: boolean;
|
|
@@ -32,5 +32,5 @@ export interface ConversationProps {
|
|
|
32
32
|
resetMessagesScroll?: () => void;
|
|
33
33
|
inputRef?: React.RefObject<HTMLInputElement>;
|
|
34
34
|
}
|
|
35
|
-
declare const Conversation: ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages,
|
|
35
|
+
declare const Conversation: ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationRef, setIsChatLoading, setCanSendMessage, canSendMessage, setInput, input, theme, Components, UITools, customStyles, chatbotId, organizationId, chatHistoryStorageKey, isMessagesScrolledToBottom, resetMessagesScroll, inputRef, }: ConversationProps) => JSX.Element;
|
|
36
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,
|
|
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,
|
|
6
|
+
const Conversation = ({ messages, handleSendClick, isChatLoading, error, messagesRef, enabledTools, postSessionMessage, setMessages, setChatbotConversationRef, 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, setChatbotConversationRef: setChatbotConversationRef, 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" }))] })] }));
|
|
@@ -59,7 +59,7 @@ const ConversationCard = ({ conversation, isActive, onClick, onDelete, theme = "
|
|
|
59
59
|
fontSize: "12px",
|
|
60
60
|
color: colors.secondaryText,
|
|
61
61
|
...customStyles?.dateStyle,
|
|
62
|
-
}, children: formatDate(conversation.updatedAt) })] }), onDelete && (_jsx("button", { className: "cmnd-conversation-delete", onClick: (e) => {
|
|
62
|
+
}, children: formatDate(conversation.updatedAt ?? conversation.createdAt) })] }), onDelete && (_jsx("button", { className: "cmnd-conversation-delete", onClick: (e) => {
|
|
63
63
|
e.stopPropagation();
|
|
64
64
|
onDelete();
|
|
65
65
|
}, style: {
|
|
@@ -7,8 +7,8 @@ interface ConversationsPanelProps {
|
|
|
7
7
|
chatHistoryStorageKey?: string;
|
|
8
8
|
theme?: "light" | "dark";
|
|
9
9
|
enabledTools?: any[];
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
setChatbotConversationRef: Dispatch<SetStateAction<string | undefined>>;
|
|
11
|
+
chatbotConversationRef: string | undefined;
|
|
12
12
|
postSessionMessage: (newMessages: any, onData: any) => Promise<any>;
|
|
13
13
|
Components?: {
|
|
14
14
|
InputField?: (params: InputFieldProps) => JSX.Element;
|
|
@@ -10,11 +10,11 @@ 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
|
-
|
|
13
|
+
import { v4 as uuidv4 } from "uuid";
|
|
14
|
+
export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseUrl, chatHistoryStorageKey, theme = "light", enabledTools = [], setChatbotConversationRef, chatbotConversationRef, postSessionMessage, Components, UITools, customStyles, isSidebarCollapsed, setIsSidebarCollapsed, selectedConversation, setSelectedConversation, messages, setMessages, input, setInput, inputRef, }, ref) => {
|
|
14
15
|
const [isChatLoading, setIsChatLoading] = useState(false);
|
|
15
16
|
const [canSendMessage, setCanSendMessage] = useState(true);
|
|
16
17
|
const [conversationIds, setConversationIds] = useState([]);
|
|
17
|
-
const isSidebarCollapsedProp = typeof isSidebarCollapsed === "boolean" ? isSidebarCollapsed : false;
|
|
18
18
|
const setIsSidebarCollapsedProp = setIsSidebarCollapsed;
|
|
19
19
|
const [internalSidebarCollapsed, setInternalSidebarCollapsed] = useState(false);
|
|
20
20
|
const isSidebarCollapsedFinal = typeof isSidebarCollapsed === "boolean"
|
|
@@ -51,10 +51,11 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
51
51
|
},
|
|
52
52
|
};
|
|
53
53
|
const colors = themeColors[theme];
|
|
54
|
-
const localStorageKey = chatHistoryStorageKey ||
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
54
|
+
const localStorageKey = chatHistoryStorageKey ||
|
|
55
|
+
getConversationLocalStorageKey({
|
|
56
|
+
organizationId,
|
|
57
|
+
chatbotId,
|
|
58
|
+
});
|
|
58
59
|
useEffect(() => {
|
|
59
60
|
try {
|
|
60
61
|
const conversationsFromLocalStorage = JSON.parse(localStorage.getItem(localStorageKey) || "[]") ?? [];
|
|
@@ -75,7 +76,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
75
76
|
setConversationIds([]);
|
|
76
77
|
}
|
|
77
78
|
};
|
|
78
|
-
const { data, loading, error
|
|
79
|
+
const { data, loading, error } = useFetchData(async () => {
|
|
79
80
|
// Only fetch if we have conversation IDs
|
|
80
81
|
if (conversationIds.length === 0) {
|
|
81
82
|
return { chatbotConversations: [] };
|
|
@@ -116,11 +117,11 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
116
117
|
if (data.finalResponseWithUsageData) {
|
|
117
118
|
setIsChatLoading(false);
|
|
118
119
|
setCanSendMessage(true);
|
|
119
|
-
const {
|
|
120
|
+
const { chatbotConversationRef: newConversationId, messages: updatedMessages, } = data;
|
|
120
121
|
if (newConversationId) {
|
|
121
|
-
|
|
122
|
+
setChatbotConversationRef(newConversationId);
|
|
122
123
|
await saveConversationIdToLocalStorage({
|
|
123
|
-
|
|
124
|
+
chatbotConversationRef: newConversationId,
|
|
124
125
|
chatbotId,
|
|
125
126
|
organizationId,
|
|
126
127
|
chatHistoryStorageKey,
|
|
@@ -131,7 +132,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
131
132
|
"New Conversation") {
|
|
132
133
|
setSelectedConversation({
|
|
133
134
|
...selectedConversation,
|
|
134
|
-
|
|
135
|
+
chatbotConversationRef: newConversationId,
|
|
135
136
|
chatbotConversationTitle: input.substring(0, 50) + (input.length > 50 ? "..." : ""),
|
|
136
137
|
messages: updatedMessages || newMessages,
|
|
137
138
|
});
|
|
@@ -162,7 +163,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
162
163
|
};
|
|
163
164
|
const handleConversationSelect = (conversation) => {
|
|
164
165
|
setSelectedConversation(conversation);
|
|
165
|
-
|
|
166
|
+
setChatbotConversationRef(conversation.chatbotConversationRef);
|
|
166
167
|
const formattedMessages = conversation.messages.map((msg) => ({
|
|
167
168
|
...msg,
|
|
168
169
|
id: msg.id || Date.now().toString(),
|
|
@@ -171,12 +172,12 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
171
172
|
};
|
|
172
173
|
const handleNewChat = () => {
|
|
173
174
|
setSelectedConversation(null);
|
|
174
|
-
|
|
175
|
+
setChatbotConversationRef(undefined);
|
|
175
176
|
setMessages([]);
|
|
176
177
|
setInput("");
|
|
177
178
|
const dateString = getUTCDateTime();
|
|
178
179
|
const newConversation = {
|
|
179
|
-
|
|
180
|
+
chatbotConversationRef: uuidv4(),
|
|
180
181
|
messages: [],
|
|
181
182
|
chatbotId: chatbotId,
|
|
182
183
|
chatbotConversationTitle: "New Conversation",
|
|
@@ -192,10 +193,10 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
192
193
|
const currentConversations = JSON.parse(localStorage.getItem(localStorageKey) || "[]") ?? [];
|
|
193
194
|
const updatedConversations = currentConversations.filter((id) => id !== conversationId);
|
|
194
195
|
localStorage.setItem(localStorageKey, JSON.stringify(updatedConversations));
|
|
195
|
-
if (selectedConversation?.
|
|
196
|
+
if (selectedConversation?.chatbotConversationRef === conversationId) {
|
|
196
197
|
setSelectedConversation(null);
|
|
197
198
|
setMessages([]);
|
|
198
|
-
|
|
199
|
+
setChatbotConversationRef(undefined);
|
|
199
200
|
}
|
|
200
201
|
refetchConversationIds();
|
|
201
202
|
}
|
|
@@ -207,6 +208,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
207
208
|
console.log("Set conversation memory:", memory);
|
|
208
209
|
};
|
|
209
210
|
const allConversations = React.useMemo(() => {
|
|
211
|
+
console.log("data", data?.chatbotConversations);
|
|
210
212
|
const existingConversations = data?.chatbotConversations || [];
|
|
211
213
|
const newConversation = selectedConversation &&
|
|
212
214
|
selectedConversation.chatbotConversationTitle === "New Conversation"
|
|
@@ -217,8 +219,8 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
217
219
|
conversations.push(newConversation);
|
|
218
220
|
}
|
|
219
221
|
return conversations.sort((a, b) => {
|
|
220
|
-
const dateA = new Date(a.updatedAt);
|
|
221
|
-
const dateB = new Date(b.updatedAt);
|
|
222
|
+
const dateA = new Date(a.updatedAt ?? a.createdAt);
|
|
223
|
+
const dateB = new Date(b.updatedAt ?? b.createdAt);
|
|
222
224
|
return dateB.getTime() - dateA.getTime();
|
|
223
225
|
});
|
|
224
226
|
}, [data?.chatbotConversations, selectedConversation]);
|
|
@@ -316,8 +318,8 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
316
318
|
textAlign: "center",
|
|
317
319
|
padding: "20px",
|
|
318
320
|
color: colors.secondaryText,
|
|
319
|
-
}, children: "No conversations yet" })) : (allConversations.map((conversation) => (_jsx(ConversationCard, { conversation: conversation, isActive: selectedConversation?.
|
|
320
|
-
conversation.
|
|
321
|
+
}, children: "No conversations yet" })) : (allConversations.map((conversation) => (_jsx(ConversationCard, { conversation: conversation, isActive: selectedConversation?.chatbotConversationRef ===
|
|
322
|
+
conversation.chatbotConversationRef, onClick: () => {
|
|
321
323
|
if (conversation.chatbotConversationTitle ===
|
|
322
324
|
"New Conversation") {
|
|
323
325
|
}
|
|
@@ -331,7 +333,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
331
333
|
setMessages([]);
|
|
332
334
|
}
|
|
333
335
|
else {
|
|
334
|
-
handleDeleteConversation(conversation.
|
|
336
|
+
handleDeleteConversation(conversation.chatbotConversationRef);
|
|
335
337
|
}
|
|
336
338
|
}, theme: theme, customStyles: {
|
|
337
339
|
conversationCardStyle: customStyles?.conversationCardStyle,
|
|
@@ -339,7 +341,7 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
339
341
|
titleStyle: customStyles?.titleStyle,
|
|
340
342
|
dateStyle: customStyles?.dateStyle,
|
|
341
343
|
deleteButtonStyle: customStyles?.deleteButtonStyle,
|
|
342
|
-
} }, conversation.
|
|
344
|
+
} }, conversation.chatbotConversationRef)))) })] }), _jsx("div", { className: "cmnd-chat-area", style: {
|
|
343
345
|
flex: 1,
|
|
344
346
|
display: "flex",
|
|
345
347
|
flexDirection: "column",
|
|
@@ -352,5 +354,5 @@ export const ConversationsPanel = forwardRef(({ organizationId, chatbotId, baseU
|
|
|
352
354
|
fontSize: "16px",
|
|
353
355
|
textAlign: "center",
|
|
354
356
|
padding: "20px",
|
|
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,
|
|
357
|
+
}, 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, setChatbotConversationRef: setChatbotConversationRef, chatbotConversationRef: chatbotConversationRef, 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 })) })] }));
|
|
356
358
|
});
|
|
@@ -8,6 +8,6 @@ const LoadingBubble = ({ customStyles, chatbotId, organizationId, theme, Compone
|
|
|
8
8
|
display: "block",
|
|
9
9
|
shapeRendering: "auto",
|
|
10
10
|
}, width: "60px", height: "30px", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", children: [_jsxs("circle", { cx: "84", cy: "50", r: "10", fill: "#000", children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "0.25s", calcMode: "spline", keyTimes: "0;1", values: "10;0", keySplines: "0 0.5 0.5 1", begin: "0s" }), _jsx("animate", { attributeName: "fill", repeatCount: "indefinite", dur: "1s", calcMode: "discrete", keyTimes: "0;0.25;0.5;0.75;1", values: color, begin: "0s" })] }), _jsxs("circle", { cx: "16", cy: "50", r: "10", fill: color, children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "0;0;10;10;10", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "0s" }), _jsx("animate", { attributeName: "cx", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "16;16;16;50;84", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "0s" })] }), _jsxs("circle", { cx: "50", cy: "50", r: "10", fill: color, children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "0;0;10;10;10", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.25s" }), _jsx("animate", { attributeName: "cx", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "16;16;16;50;84", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.25s" })] }), _jsxs("circle", { cx: "84", cy: "50", r: "10", fill: color, children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "0;0;10;10;10", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.5s" }), _jsx("animate", { attributeName: "cx", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "16;16;16;50;84", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.5s" })] }), _jsxs("circle", { cx: "16", cy: "50", r: "10", fill: color, children: [_jsx("animate", { attributeName: "r", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "0;0;10;10;10", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.75s" }), _jsx("animate", { attributeName: "cx", repeatCount: "indefinite", dur: "1s", calcMode: "spline", keyTimes: "0;0.25;0.5;0.75;1", values: "16;16;16;50;84", keySplines: "0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1", begin: "-0.75s" })] })] }) }));
|
|
11
|
-
return (_jsx(Chatbubble, { chatbotId: chatbotId, organizationId: organizationId, isLoadingBubble: true, customStyles: customStyles, theme: theme, Components: Components, message: Components?.LoadingIndicator ? (_jsx(Components.LoadingIndicator, {})) : (defaultLoadingIndicator), role: MessageRole.ASSISTANT, messages: [], postSessionMessage: () => { }, id: "__loading__", setMessages: () => { },
|
|
11
|
+
return (_jsx(Chatbubble, { chatbotId: chatbotId, organizationId: organizationId, isLoadingBubble: true, customStyles: customStyles, theme: theme, Components: Components, message: Components?.LoadingIndicator ? (_jsx(Components.LoadingIndicator, {})) : (defaultLoadingIndicator), role: MessageRole.ASSISTANT, messages: [], postSessionMessage: () => { }, id: "__loading__", setMessages: () => { }, setChatbotConversationRef: () => { }, setCanSendMessage: () => { }, setIsChatLoading: () => { } }));
|
|
12
12
|
};
|
|
13
13
|
export default LoadingBubble;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
declare const chatbot: {
|
|
2
|
-
patchChatbotConversationMemory: (organizationId: number, chatbotId: number,
|
|
3
|
-
deleteChatbotConversationMemory: (organizationId: number, chatbotId: number,
|
|
2
|
+
patchChatbotConversationMemory: (organizationId: number, chatbotId: number, chatbotConversationRef: string) => string;
|
|
3
|
+
deleteChatbotConversationMemory: (organizationId: number, chatbotId: number, chatbotConversationRef: string, memoryKeyToDelete: string) => string;
|
|
4
4
|
getChatBotConversationsList: ({ organizationId, chatbotId, conversationIds, }: {
|
|
5
5
|
organizationId: number;
|
|
6
6
|
chatbotId: number;
|
|
7
|
-
conversationIds:
|
|
7
|
+
conversationIds: string[];
|
|
8
8
|
}) => string;
|
|
9
9
|
};
|
|
10
10
|
export { chatbot };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const chatbot = {
|
|
2
|
-
patchChatbotConversationMemory: (organizationId, chatbotId,
|
|
3
|
-
deleteChatbotConversationMemory: (organizationId, chatbotId,
|
|
2
|
+
patchChatbotConversationMemory: (organizationId, chatbotId, chatbotConversationRef) => `/organizations/${organizationId}/chatbots/${chatbotId}/conversations/${chatbotConversationRef}/memory`,
|
|
3
|
+
deleteChatbotConversationMemory: (organizationId, chatbotId, chatbotConversationRef, memoryKeyToDelete) => `/organizations/${organizationId}/chatbots/${chatbotId}/conversations/${chatbotConversationRef}/memory/${memoryKeyToDelete}`,
|
|
4
4
|
getChatBotConversationsList: ({ organizationId, chatbotId, conversationIds, }) => {
|
|
5
5
|
const ids = Array.isArray(conversationIds)
|
|
6
6
|
? conversationIds.join(",")
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
interface IDeleteChatbotConversationMemory {
|
|
2
2
|
organizationId: number;
|
|
3
3
|
chatbotId: number;
|
|
4
|
-
|
|
4
|
+
chatbotConversationRef: string;
|
|
5
5
|
memoryKeyToDelete: string;
|
|
6
6
|
baseUrl: string;
|
|
7
7
|
}
|
|
8
|
-
declare const deleteChatbotConversationMemory: ({ organizationId, chatbotId,
|
|
8
|
+
declare const deleteChatbotConversationMemory: ({ organizationId, chatbotId, chatbotConversationRef, memoryKeyToDelete, baseUrl, }: IDeleteChatbotConversationMemory) => Promise<import("axios").AxiosResponse<any, any>>;
|
|
9
9
|
export default deleteChatbotConversationMemory;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { chatbot } from "../../constants/endpoints.js";
|
|
2
2
|
import axios from "axios";
|
|
3
|
-
const deleteChatbotConversationMemory = ({ organizationId, chatbotId,
|
|
4
|
-
const endpoint = chatbot.deleteChatbotConversationMemory(organizationId, chatbotId,
|
|
3
|
+
const deleteChatbotConversationMemory = ({ organizationId, chatbotId, chatbotConversationRef, memoryKeyToDelete, baseUrl, }) => {
|
|
4
|
+
const endpoint = chatbot.deleteChatbotConversationMemory(organizationId, chatbotId, chatbotConversationRef, memoryKeyToDelete);
|
|
5
5
|
return axios.delete(`${baseUrl}${endpoint}`);
|
|
6
6
|
};
|
|
7
7
|
export default deleteChatbotConversationMemory;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
declare const getChatBotConversationsList: ({ organizationId, chatbotId, conversationIds, baseUrl, }: {
|
|
2
2
|
organizationId: number;
|
|
3
3
|
chatbotId: number;
|
|
4
|
-
conversationIds:
|
|
4
|
+
conversationIds: string[];
|
|
5
5
|
baseUrl: string;
|
|
6
6
|
}) => Promise<any>;
|
|
7
7
|
export default getChatBotConversationsList;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
interface IPatchChatbotConversationMemory {
|
|
2
2
|
organizationId: number;
|
|
3
3
|
chatbotId: number;
|
|
4
|
-
|
|
4
|
+
chatbotConversationRef: string;
|
|
5
5
|
memory: {
|
|
6
6
|
[key: string]: any;
|
|
7
7
|
};
|
|
8
8
|
baseUrl: string;
|
|
9
9
|
}
|
|
10
|
-
declare const patchChatbotConversationMemory: ({ organizationId, chatbotId,
|
|
10
|
+
declare const patchChatbotConversationMemory: ({ organizationId, chatbotId, chatbotConversationRef, memory, baseUrl, }: IPatchChatbotConversationMemory) => Promise<import("axios").AxiosResponse<any, any>>;
|
|
11
11
|
export default patchChatbotConversationMemory;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import axios from "axios";
|
|
2
2
|
import { chatbot } from "../../constants/endpoints.js";
|
|
3
|
-
const patchChatbotConversationMemory = ({ organizationId, chatbotId,
|
|
4
|
-
const endpoint = chatbot.patchChatbotConversationMemory(organizationId, chatbotId,
|
|
3
|
+
const patchChatbotConversationMemory = ({ organizationId, chatbotId, chatbotConversationRef, memory, baseUrl, }) => {
|
|
4
|
+
const endpoint = chatbot.patchChatbotConversationMemory(organizationId, chatbotId, chatbotConversationRef);
|
|
5
5
|
return axios.patch(`${baseUrl}${endpoint}`, {
|
|
6
6
|
memory,
|
|
7
7
|
});
|
package/dist/type.d.ts
CHANGED
|
@@ -59,8 +59,7 @@ export interface ConversationDataObject {
|
|
|
59
59
|
completionFinished: boolean;
|
|
60
60
|
finalResponseWithUsageData: boolean;
|
|
61
61
|
message?: string;
|
|
62
|
-
|
|
63
|
-
chatbotConversationId?: number;
|
|
62
|
+
chatbotConversationRef?: string;
|
|
64
63
|
totalTokens?: number;
|
|
65
64
|
totalCost?: number;
|
|
66
65
|
messages?: Message[];
|
|
@@ -175,7 +174,7 @@ export interface ChatbotConversationMessage {
|
|
|
175
174
|
hiddenFromUser: boolean;
|
|
176
175
|
}
|
|
177
176
|
export interface ChatbotConversation {
|
|
178
|
-
|
|
177
|
+
chatbotConversationRef: string;
|
|
179
178
|
messages: ChatbotConversationMessage[];
|
|
180
179
|
chatbotId: number;
|
|
181
180
|
chatbotConversationTitle: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
declare const saveConversationIdToLocalStorage: ({
|
|
2
|
-
|
|
1
|
+
declare const saveConversationIdToLocalStorage: ({ chatbotConversationRef, chatbotId, organizationId, chatHistoryStorageKey, }: {
|
|
2
|
+
chatbotConversationRef: string;
|
|
3
3
|
chatbotId: number;
|
|
4
4
|
organizationId: number;
|
|
5
5
|
chatHistoryStorageKey?: string | undefined;
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import getConversationLocalStorageKey from "../getConversationLocalStorageKey/index.js";
|
|
2
|
-
const saveConversationIdToLocalStorage = async ({
|
|
2
|
+
const saveConversationIdToLocalStorage = async ({ chatbotConversationRef, chatbotId, organizationId, chatHistoryStorageKey, }) => {
|
|
3
3
|
try {
|
|
4
|
-
const key = chatHistoryStorageKey ||
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
const key = chatHistoryStorageKey ||
|
|
5
|
+
getConversationLocalStorageKey({
|
|
6
|
+
organizationId,
|
|
7
|
+
chatbotId: Number(chatbotId),
|
|
8
|
+
});
|
|
8
9
|
//get the conversation ids from local storage
|
|
9
10
|
const conversations = JSON.parse(localStorage.getItem(key) || "[]") ?? [];
|
|
10
|
-
if (!conversations.includes(
|
|
11
|
-
conversations.push(
|
|
11
|
+
if (!conversations.includes(chatbotConversationRef)) {
|
|
12
|
+
conversations.push(chatbotConversationRef);
|
|
12
13
|
localStorage.setItem(key, JSON.stringify(conversations));
|
|
13
14
|
}
|
|
14
15
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cmnd-ai/chatbot-react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"description": "",
|
|
6
6
|
"type": "module",
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
"react-icons": "^5.3.0",
|
|
37
37
|
"react-markdown": "^8.0.6",
|
|
38
38
|
"react-syntax-highlighter": "^15.5.0",
|
|
39
|
-
"remark-gfm": "^3.0.1"
|
|
39
|
+
"remark-gfm": "^3.0.1",
|
|
40
|
+
"uuid": "^13.0.0"
|
|
40
41
|
}
|
|
41
42
|
}
|