@copilotkit/react-ui 1.0.8 → 1.0.9-mme-modify-append-message.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # ui
 
+## 1.0.9-mme-modify-append-message.0
+
+### Patch Changes
+
+- Modify appendMessage to replace current message when in progress
+- Updated dependencies
+  - @copilotkit/react-core@1.0.9-mme-modify-append-message.0
+  - @copilotkit/runtime-client-gql@1.0.9-mme-modify-append-message.0
+  - @copilotkit/shared@1.0.9-mme-modify-append-message.0
+
 ## 1.0.8
 
 ### Patch Changes

package/dist/{chunk-I3WXFPLM.mjs → chunk-6TWACO5V.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-UC3Y7MWX.mjs";
 import {
   CopilotChat
-} from "./chunk-MGUNADV2.mjs";
+} from "./chunk-VPUIM2ZY.mjs";
 import {
   Input
 } from "./chunk-U6J5DGOE.mjs";
@@ -90,4 +90,4 @@ var CopilotModal = ({
 export {
   CopilotModal
 };
-//# sourceMappingURL=chunk-I3WXFPLM.mjs.map
+//# sourceMappingURL=chunk-6TWACO5V.mjs.map

package/dist/{chunk-CTQJBYFS.mjs → chunk-IN42MBI2.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-I3WXFPLM.mjs";
+} from "./chunk-6TWACO5V.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -27,4 +27,4 @@ function CopilotSidebar(props) {
 export {
   CopilotSidebar
 };
-//# sourceMappingURL=chunk-CTQJBYFS.mjs.map
+//# sourceMappingURL=chunk-IN42MBI2.mjs.map

package/dist/{chunk-I2SHVGZG.mjs → chunk-NS5XXT5G.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-I3WXFPLM.mjs";
+} from "./chunk-6TWACO5V.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -18,4 +18,4 @@ function CopilotPopup(props) {
 export {
   CopilotPopup
 };
-//# sourceMappingURL=chunk-I2SHVGZG.mjs.map
+//# sourceMappingURL=chunk-NS5XXT5G.mjs.map

package/dist/{chunk-MGUNADV2.mjs → chunk-VPUIM2ZY.mjs}

@@ -135,7 +135,13 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage) =>
   const sendMessage = (messageContent) => __async(void 0, null, function* () {
     abortSuggestions();
     setCurrentSuggestions([]);
-    onSubmitMessage == null ? void 0 : onSubmitMessage(messageContent);
+    if (onSubmitMessage) {
+      try {
+        yield onSubmitMessage(messageContent);
+      } catch (error) {
+        console.error("Error in onSubmitMessage:", error);
+      }
+    }
     const message = new TextMessage({
       content: messageContent,
       role: Role.User
@@ -158,4 +164,4 @@ export {
   WrappedCopilotChat,
   useCopilotChatLogic
 };
-//# sourceMappingURL=chunk-MGUNADV2.mjs.map
+//# sourceMappingURL=chunk-VPUIM2ZY.mjs.map

package/dist/chunk-VPUIM2ZY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/Chat.tsx"],"sourcesContent":["/**\n * An embeddable chat panel for CopilotKit.\n *\n * <img src=\"/images/CopilotChat/CopilotChat.gif\" width=\"500\" />\n *\n * A chatbot panel component for the CopilotKit framework. The component allows for a high degree\n * of customization through various props and custom CSS.\n *\n * <RequestExample>\n *   ```jsx CopilotChat Example\n *   import { CopilotChat } from \"@copilotkit/react-ui\";\n *\n *   <CopilotChat\n *     labels={{\n *       title: \"Your Assistant\",\n *       initial: \"Hi! 👋 How can I assist you today?\",\n *     }}\n *   />\n *   ```\n * </RequestExample>\n *\n * ## Custom CSS\n *\n * You can customize the colors of the panel by overriding the CSS variables\n * defined in the [default styles](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/colors.css).\n *\n * For example, to set the primary color to purple:\n *\n * ```jsx\n * <div style={{ \"--copilot-kit-primary-color\": \"#7D5BA6\" }}>\n *   <CopilotPopup />\n * </div>\n * ```\n *\n * To further customize the panel, you can override the CSS classes defined\n * [here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/).\n *\n * For example:\n *\n * ```css\n * .copilotKitButton {\n *   border-radius: 0;\n * }\n * ```\n */\n\nimport {\n  ChatContext,\n  ChatContextProvider,\n  CopilotChatIcons,\n  CopilotChatLabels,\n} from \"./ChatContext\";\nimport { Messages as DefaultMessages } from \"./Messages\";\nimport { Input as DefaultInput } from \"./Input\";\nimport { ResponseButton as DefaultResponseButton } from \"./Response\";\nimport { Suggestion } from \"./Suggestion\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { SystemMessageFunction, useCopilotChat, useCopilotContext } from \"@copilotkit/react-core\";\nimport { reloadSuggestions } from \"./Suggestion\";\nimport { CopilotChatSuggestion } from \"../../types/suggestions\";\nimport { Message, Role, TextMessage } from \"@copilotkit/runtime-client-gql\";\nimport { InputProps, MessagesProps, ResponseButtonProps } from \"./props\";\nimport { randomId } from \"@copilotkit/shared\";\n\nimport { CopilotDevConsole } from \"../dev-console\";\n\n/**\n * Props for CopilotChat component.\n */\nexport interface CopilotChatProps {\n  /**\n   * Custom instructions to be added to the system message. Use this property to\n   * provide additional context or guidance to the language model, influencing\n   * its responses. These instructions can include specific directions,\n   * preferences, or criteria that the model should consider when generating\n   * its output, thereby tailoring the conversation more precisely to the\n   * user's needs or the application's requirements.\n   */\n  instructions?: string;\n\n  /**\n   * A callback that gets called when the in progress state changes.\n   */\n  onInProgress?: (inProgress: boolean) => void;\n\n  /**\n   * A callback that gets called when a new message it submitted.\n   */\n  onSubmitMessage?: (message: string) => void | Promise<void>;\n\n  /**\n   * Icons can be used to set custom icons for the chat window.\n   */\n  icons?: CopilotChatIcons;\n\n  /**\n   * Labels can be used to set custom labels for the chat window.\n   */\n  labels?: CopilotChatLabels;\n\n  /**\n   * A function that takes in context string and instructions and returns\n   * the system message to include in the chat request.\n   * Use this to completely override the system message, when providing\n   * instructions is not enough.\n   */\n  makeSystemMessage?: SystemMessageFunction;\n\n  /**\n   * Whether to show the response button.\n   * @default true\n   */\n  showResponseButton?: boolean;\n\n  /**\n   * A custom Messages component to use instead of the default.\n   */\n  Messages?: React.ComponentType<MessagesProps>;\n\n  /**\n   * A custom Input component to use instead of the default.\n   */\n  Input?: React.ComponentType<InputProps>;\n\n  /**\n   * A custom ResponseButton component to use instead of the default.\n   */\n  ResponseButton?: React.ComponentType<ResponseButtonProps>;\n\n  /**\n   * A class name to apply to the root element.\n   */\n  className?: string;\n\n  /**\n   * Children to render.\n   */\n  children?: React.ReactNode;\n}\n\nexport function CopilotChat({\n  instructions,\n  onSubmitMessage,\n  makeSystemMessage,\n  showResponseButton = true,\n  onInProgress,\n  Messages = DefaultMessages,\n  Input = DefaultInput,\n  ResponseButton = DefaultResponseButton,\n  className,\n  icons,\n  labels,\n}: CopilotChatProps) {\n  const context = useCopilotContext();\n\n  useEffect(() => {\n    context.setChatInstructions(instructions || \"\");\n  }, [instructions]);\n\n  const {\n    visibleMessages,\n    isLoading,\n    currentSuggestions,\n    sendMessage,\n    stopGeneration,\n    reloadMessages,\n  } = useCopilotChatLogic(makeSystemMessage, onInProgress, onSubmitMessage);\n\n  const chatContext = React.useContext(ChatContext);\n  const isVisible = chatContext ? chatContext.open : true;\n\n  return (\n    <WrappedCopilotChat icons={icons} labels={labels} className={className}>\n      <CopilotDevConsole />\n      <Messages messages={visibleMessages} inProgress={isLoading}>\n        {currentSuggestions.length > 0 && (\n          <div>\n            <h6>Suggested:</h6>\n            <div className=\"suggestions\">\n              {currentSuggestions.map((suggestion, index) => (\n                <Suggestion\n                  key={index}\n                  title={suggestion.title}\n                  message={suggestion.message}\n                  partial={suggestion.partial}\n                  className={suggestion.className}\n                  onClick={(message) => sendMessage(message)}\n                />\n              ))}\n            </div>\n          </div>\n        )}\n        {showResponseButton && visibleMessages.length > 0 && (\n          <ResponseButton\n            onClick={isLoading ? stopGeneration : reloadMessages}\n            inProgress={isLoading}\n          />\n        )}\n      </Messages>\n      <Input inProgress={isLoading} onSend={sendMessage} isVisible={isVisible} />\n    </WrappedCopilotChat>\n  );\n}\n\nexport function WrappedCopilotChat({\n  children,\n  icons,\n  labels,\n  className,\n}: {\n  children: React.ReactNode;\n  icons?: CopilotChatIcons;\n  labels?: CopilotChatLabels;\n  className?: string;\n}) {\n  const chatContext = React.useContext(ChatContext);\n  if (!chatContext) {\n    return (\n      <ChatContextProvider icons={icons} labels={labels} open={true} setOpen={() => {}}>\n        <div className={`copilotKitChat ${className}`}>{children}</div>\n      </ChatContextProvider>\n    );\n  }\n  return <>{children}</>;\n}\n\nconst SUGGESTIONS_DEBOUNCE_TIMEOUT = 1000;\n\nexport const useCopilotChatLogic = (\n  makeSystemMessage?: SystemMessageFunction,\n  onInProgress?: (isLoading: boolean) => void,\n  onSubmitMessage?: (messageContent: string) => void,\n) => {\n  const { visibleMessages, appendMessage, reloadMessages, stopGeneration, isLoading } =\n    useCopilotChat({\n      id: randomId(),\n      makeSystemMessage,\n    });\n\n  const [currentSuggestions, setCurrentSuggestions] = useState<CopilotChatSuggestion[]>([]);\n  const suggestionsAbortControllerRef = useRef<AbortController | null>(null);\n  const debounceTimerRef = useRef<any>();\n\n  const abortSuggestions = () => {\n    suggestionsAbortControllerRef.current?.abort();\n    suggestionsAbortControllerRef.current = null;\n  };\n\n  const context = useCopilotContext();\n\n  useEffect(() => {\n    onInProgress?.(isLoading);\n\n    abortSuggestions();\n\n    debounceTimerRef.current = setTimeout(\n      () => {\n        if (!isLoading && Object.keys(context.chatSuggestionConfiguration).length !== 0) {\n          suggestionsAbortControllerRef.current = new AbortController();\n          reloadSuggestions(\n            context,\n            context.chatSuggestionConfiguration,\n            setCurrentSuggestions,\n            suggestionsAbortControllerRef,\n          );\n        }\n      },\n      currentSuggestions.length == 0 ? 0 : SUGGESTIONS_DEBOUNCE_TIMEOUT,\n    );\n\n    return () => {\n      clearTimeout(debounceTimerRef.current);\n    };\n  }, [isLoading, context.chatSuggestionConfiguration]);\n\n  const sendMessage = async (messageContent: string) => {\n    abortSuggestions();\n    setCurrentSuggestions([]);\n    if (onSubmitMessage) {\n      try {\n        await onSubmitMessage(messageContent);\n      } catch (error) {\n        console.error(\"Error in onSubmitMessage:\", error);\n      }\n    }\n    const message: Message = new TextMessage({\n      content: messageContent,\n      role: Role.User,\n    });\n    appendMessage(message);\n    return message;\n  };\n\n  return {\n    visibleMessages,\n    isLoading,\n    currentSuggestions,\n    sendMessage,\n    stopGeneration,\n    reloadMessages,\n  };\n};\n"],"mappings":"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","names":["Messages","Input","ResponseButton"]}

package/dist/components/chat/Chat.d.ts

@@ -71,7 +71,7 @@ interface CopilotChatProps {
     /**
      * A callback that gets called when a new message it submitted.
      */
-    onSubmitMessage?: (message: string) => void;
+    onSubmitMessage?: (message: string) => void | Promise<void>;
     /**
      * Icons can be used to set custom icons for the chat window.
      */

package/dist/components/chat/Chat.js

@@ -1745,7 +1745,13 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage) =>
   const sendMessage = (messageContent) => __async(void 0, null, function* () {
     abortSuggestions();
     setCurrentSuggestions([]);
-    onSubmitMessage == null ? void 0 : onSubmitMessage(messageContent);
+    if (onSubmitMessage) {
+      try {
+        yield onSubmitMessage(messageContent);
+      } catch (error) {
+        console.error("Error in onSubmitMessage:", error);
+      }
+    }
     const message = new import_runtime_client_gql4.TextMessage({
       content: messageContent,
       role: import_runtime_client_gql4.Role.User