Addiotional features not working on embeded versions of apps.

Open AndyMik90 opened this issue 1 year ago • 1 comments

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.9

Cloud or Self Hosted

Cloud, Self Hosted (Docker), Self Hosted (Source)

Steps to reproduce

When enabling extra features CleanShot 2024-05-30 at 12 17 26 Preview chat: CleanShot 2024-05-30 at 12 18 13 Embedded version CleanShot 2024-05-30 at 12 19 00

✔️ Expected Behavior

All features to work also for embedded versions of the apps, not only the preview.

❌ Actual Behavior

Only parts of the conversation openener works.
Citations and sttributions dosn't show up.

May 30 '24 10:05 AndyMik90

The additional features such as "Image Upload," "Conversation Opener," "Follow-up," and "Speech to Text" are not working correctly in the embedded versions of your apps because the embedded code does not include the necessary configurations or scripts to support these features. The provided code for embedding the app only includes basic configurations for an iframe, scripts, and a Chrome plugin, but it does not mention or configure the additional features.

Here is the relevant part of the code that shows the embedding options:

const OPTION_MAP = {
  iframe: {
    getContent: (url: string, token: string) =>
      `<iframe
 src="${url}/chatbot/${token}"
 style="width: 100%; height: 100%; min-height: 700px"
 frameborder="0"
 allow="microphone">
</iframe>`,
  },
  scripts: {
    getContent: (url: string, token: string, isTestEnv?: boolean) =>
      `<script>
 window.difyChatbotConfig = {
  token: '${token}'${isTestEnv
  ? `,
  isDev: true`
  : ''}${IS_CE_EDITION
  ? `,
  baseUrl: '${url}'`
  : ''}
 }
</script>
<script
 src="${url}/embed.min.js"
 id="${token}"
 defer>
</script>`,
  },
  chromePlugin: {
    getContent: (url: string, token: string) => `ChatBot URL: ${url}/chatbot/${token}`,
  },
}

To resolve this issue, you need to ensure that the embedded code includes the necessary configurations and scripts to support the additional features. This might involve updating the getContent methods to include additional parameters or scripts that enable these features.

Additionally, ensure that the difyChatbotConfig is properly defined in the HTML file before the script is included, as shown in the web/public/embed.js file:

/** this file is used to embed the chatbot in a website
 * the difyChatbotConfig should be defined in the html file before this script is included
 * the difyChatbotConfig should contain the token of the chatbot
 * the token can be found in the chatbot settings page
 */

// attention: This JavaScript script must be placed after the <body> element. Otherwise, the script will not work.

document.body.onload = embedChatbot;
async function embedChatbot () {
  const difyChatbotConfig = window.difyChatbotConfig;
  if (!difyChatbotConfig || !difyChatbotConfig.token) {
    console.error('difyChatbotConfig is empty or token is not provided')
    return;
  }
  const isDev = !!difyChatbotConfig.isDev
  const baseUrl = difyChatbotConfig.baseUrl || `https://${isDev ? 'dev.' : ''}udify.app`
  // Additional configurations and features should be added here
}

Ensure that the script is placed after the <body> element and that all necessary configurations for the additional features are included.

According to the Dify documentation, the following capabilities need to be confirmed as enabled when the application is programmed:

Variables to fill in before the dialog.
Conversation remarks.
Follow-up.
Speech to text.
Citations and Attributions.

For example, if the "Speech to Text" function is enabled during application programming, you will see the voice input icon in the input box on the web application side. Click the icon to convert the voice input into text. Ensure that the device environment is authorized to use the microphone.

Make sure these features are enabled and properly configured in your application settings to ensure they work correctly in the embedded versions. The index.tsx file in the Dify configuration component shows how these features are set up:

const [suggestedQuestionsAfterAnswerConfig, setSuggestedQuestionsAfterAnswerConfig] = useState<SuggestedQuestionsAfterAnswerConfig | null>(null)
const [speechToTextConfig, setSpeechToTextConfig] = useState<SpeechToTextConfig | null>(null)
const [textToSpeechConfig, setTextToSpeechConfig] = useState<TextToSpeechConfig | null>(null)
const [citationConfig, setCitationConfig] = useState<CitationConfig | null>(null)

if (modelConfig.suggested_questions_after_answer)
  setSuggestedQuestionsAfterAnswerConfig(modelConfig.suggested_questions_after_answer)

if (modelConfig.speech_to_text)
  setSpeechToTextConfig(modelConfig.speech_to_text)

if (modelConfig.text_to_speech)
  setTextToSpeechConfig(modelConfig.text_to_speech)

if (modelConfig.retriever_resource)
  setCitationConfig(modelConfig.retriever_resource)

Ensure that these configurations are included in your embedded code to enable the additional features ^[1]^[2]^[3]^[4].

To continue talking to Dosu, mention @dosu.

May 30 '24 10:05 dosubot[bot]