No Button to Start a new chat in page of Html Embedded

DKAI99 commented 6 months ago

Self Checks

[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] Pleas do not modify this template :) and fill in all the required fields.

Dify version

03.21

Cloud or Self Hosted

Cloud

Steps to reproduce

I use below code to embed App to my webpage. But the sidebox is empty. It's expected to display 'NEW Chat' button. Now the user can not start a new chat, the conversation is endless. Screenshot Not-sidebox-toStartChat Link to reproduce bug https://www.dankung.com/blogs/dankung-angler-mate-ai_3690

✔️ Expected Behavior

Show 'Start new chat' at sidebox in Html Embedded page.

❌ Actual Behavior

Now the user can not start a new chat, the conversation is endless.

dosubot[bot] commented 6 months ago

Hey @DKAI99, good to see you back! Running into a bit of a chat snag, I see? Let's get that conversation flowing again.

Thank you for providing detailed information about the issue you're facing. Based on the information you've provided, it seems like the 'Start new chat' button is not appearing due to some issue with the integration of the Dify chat app on your webpage.

Firstly, I'd like to clarify that the latest version of Dify is v0.5.11-fix1. You mentioned that you're using Dify version 03.21, which might be causing some compatibility issues. I recommend updating to the latest version of Dify to ensure that all features work as expected.

Regarding the issue with the 'Start new chat' button, it's important to ensure that the embed.js script is placed correctly in your HTML file. The script should be placed after the <body> element, as it relies on the <body> element being fully loaded to correctly append the chat button to the document body. If the script is placed in the <head> section or before the <body> content, it will not work as expected because it attempts to access and modify the DOM before it is fully loaded.

Here is an example of how to correctly include the script in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your Website Title</title>
    <!-- other head elements -->
</head>
<body>
    <!-- your body content -->

    <!-- Dify chatbot configuration -->
    <script>
    window.difyChatbotConfig = {
        token: 'your_chatbot_token_here',
        // other configuration options
    };
    </script>
    <!-- Embed Dify chatbot script -->
    <script src="path/to/web/public/embed.js"></script>
</body>
</html>

By ensuring the script is placed correctly as per the instructions in the embed.js file, the 'Start new chat' button should appear as expected on your webpage.

The 'Start new chat' button is rendered by the following code in the Dify chat app:

export const ChatBtn: FC<{ onClick: () => void; className?: string }> = ({
  className,
  onClick,
}) => {
  const { t } = useTranslation()
  return (
    <Button
      type='primary'
      className={cn(className, `px-4 inline-flex items-center ${s.customBtn} gap-2`)}
      onClick={onClick}>
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fillRule="evenodd" clipRule="evenodd" d="M18 10.5C18 14.366 14.418 17.5 10 17.5C8.58005 17.506 7.17955 17.1698 5.917 16.52L2 17.5L3.338 14.377C2.493 13.267 2 11.934 2 10.5C2 6.634 5.582 3.5 10 3.5C14.418 3.5 18 6.634 18 10.5ZM7 9.5H5V11.5H7V9.5ZM15 9.5H13V11.5H15V9.5ZM9 9.5H11V11.5H9V9.5Z" fill="white" />
      </svg>
      {t('share.chat.startChat')}
    </Button>
  )
}

This code is responsible for rendering the 'Start new chat' button in the chat sidebar. If the button is not appearing as expected, there might be an issue with the onClick function or the t('share.chat.startChat') translation.

I hope this helps! If you have any further questions or if the issue persists, please provide more details so I can assist you better.

Sources

#### About Dosu

This response is meant to be useful and save you time. It is **not meant to be a precise solution**, but rather a starting point for your own research. Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. If you want to continue the conversation, start your reply with @dosu-bot.

DKAI99 commented 6 months ago

thank you, I now use your code. The DifyChat is at bottom right of my website, just a very small window. I want it embeded in center area of my web page. How to do it?

crazywoola commented 6 months ago

Those answer is answered by the bot. You need to write you own css to center the application.

langgenius / dify