Embedded chat - onGetConvesationMessages error

Self Checks

[X] This is only for bug report, if you would like to ask a question, please head to Discussions.
[X] I have searched for existing issues search for existing issues, including closed ones.
[X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
[X] Please do not modify this template :) and fill in all the required fields.

Dify version

0.6.10

Cloud or Self Hosted

Self Hosted (Source)

Steps to reproduce

Embedding the iframe and starting a conversations.

TypeError: Cannot destructure property 'onGetConvesationMessages' of '(intermediate value)(intermediate value)(intermediate value)' as it is undefined.

✔️ Expected Behavior

Working embeddeded chat

❌ Actual Behavior

Error in app/components/base/chat/chat/hooks.ts (200:7) @ onGetConvesationMessages

The error you're encountering suggests that the onGetConvesationMessages property is not being passed correctly to the handleSend function in the useChat hook. To resolve this issue, ensure that the onGetConvesationMessages function is defined and passed correctly when calling the handleSend function.

Here is a snippet of the relevant part of the handleSend function:

const handleSend = useCallback(async (
  url: string,
  data: any,
  {
    onGetConvesationMessages,
    onGetSuggestedQuestions,
    onConversationComplete,
    isPublicAPI,
  }: SendCallback,
) => {
  // ... rest of the code

Make sure that when you call handleSend, you provide an object that includes the onGetConvesationMessages function. For example:

handleSend(url, data, {
  onGetConvesationMessages: yourOnGetConvesationMessagesFunction,
  onGetSuggestedQuestions: yourOnGetSuggestedQuestionsFunction,
  onConversationComplete: yourOnConversationCompleteFunction,
  isPublicAPI: true, // or false, depending on your use case
});

If onGetConvesationMessages is not defined or is optional, you should provide a default implementation or handle the case where it is undefined within the handleSend function. Here is an example of how you can provide a default implementation:

const handleSend = useCallback(async (
  url: string,
  data: any,
  {
    onGetConvesationMessages = async () => {}, // Default implementation
    onGetSuggestedQuestions,
    onConversationComplete,
    isPublicAPI,
  }: SendCallback,
) => {
  // ... rest of the code

Additionally, ensure that the context and hooks used in the EmbeddedChatbot component are correctly set up. The useEmbeddedChatbotContext and useEmbeddedChatbot hooks should provide all necessary properties, including onGetConvesationMessages ^[1]^[2]^[3]^[4].

To continue talking to Dosu, mention @dosu.

langgenius / dify