feat: passing the inputs values using `difyChatbotConfig` (#6376)

web/app/components/base/chat/embedded-chatbot/hooks.tsx

@@ -31,6 +31,7 @@ import type {
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 import { useToastContext } from '@/app/components/base/toast'
 import { changeLanguage } from '@/i18n/i18next-config'
+import { getProcessedInputsFromUrlParams } from '@/app/components/base/chat/utils'
 
 export const useEmbeddedChatbot = () => {
   const isInstalledApp = false
@@ -109,6 +110,7 @@ export const useEmbeddedChatbot = () => {
   const { t } = useTranslation()
   const newConversationInputsRef = useRef<Record<string, any>>({})
   const [newConversationInputs, setNewConversationInputs] = useState<Record<string, any>>({})
+  const [initInputs, setInitInputs] = useState<Record<string, any>>({})
   const handleNewConversationInputsChange = useCallback((newInputs: Record<string, any>) => {
     newConversationInputsRef.current = newInputs
     setNewConversationInputs(newInputs)
@@ -116,30 +118,49 @@ export const useEmbeddedChatbot = () => {
   const inputsForms = useMemo(() => {
     return (appParams?.user_input_form || []).filter((item: any) => item.paragraph || item.select || item['text-input'] || item.number).map((item: any) => {
       if (item.paragraph) {
+        let value = initInputs[item.paragraph.variable]
+        if (value && item.paragraph.max_length && value.length > item.paragraph.max_length)
+          value = value.slice(0, item.paragraph.max_length)
+
         return {
           ...item.paragraph,
+          default: value || item.default,
           type: 'paragraph',
         }
       }
       if (item.number) {
+        const convertedNumber = Number(initInputs[item.number.variable]) ?? undefined
         return {
           ...item.number,
+          default: convertedNumber || item.default,
           type: 'number',
         }
       }
       if (item.select) {
+        const isInputInOptions = item.select.options.includes(initInputs[item.select.variable])
         return {
           ...item.select,
+          default: (isInputInOptions ? initInputs[item.select.variable] : undefined) || item.default,
           type: 'select',
         }
       }
 
+      let value = initInputs[item['text-input'].variable]
+      if (value && item['text-input'].max_length && value.length > item['text-input'].max_length)
+        value = value.slice(0, item['text-input'].max_length)
+
       return {
         ...item['text-input'],
+        default: value || item.default,
         type: 'text-input',
       }
     })
   }, [appParams])
+
+  useEffect(() => {
+    // init inputs from url params
+    setInitInputs(getProcessedInputsFromUrlParams())
+  }, [])
   useEffect(() => {
     const conversationInputs: Record<string, any> = {}
 

web/app/components/base/chat/utils.ts

@@ -0,0 +1,20 @@
+async function decodeBase64AndDecompress(base64String: string) {
+  const binaryString = atob(base64String)
+  const compressedUint8Array = Uint8Array.from(binaryString, char => char.charCodeAt(0))
+  const decompressedStream = new Response(compressedUint8Array).body.pipeThrough(new DecompressionStream('gzip'))
+  const decompressedArrayBuffer = await new Response(decompressedStream).arrayBuffer()
+  return new TextDecoder().decode(decompressedArrayBuffer)
+}
+
+function getProcessedInputsFromUrlParams(): Record<string, any> {
+  const urlParams = new URLSearchParams(window.location.search)
+  const inputs: Record<string, any> = {}
+  urlParams.forEach(async (value, key) => {
+    inputs[key] = await decodeBase64AndDecompress(decodeURIComponent(value))
+  })
+  return inputs
+}
+
+export {
+  getProcessedInputsFromUrlParams,
+}

web/public/embed.js

@@ -24,22 +24,50 @@
   };
 
   // Main function to embed the chatbot
-  function embedChatbot() {
+  async function embedChatbot() {
     if (!config || !config.token) {
       console.error(`${configKey} is empty or token is not provided`);
       return;
     }
 
+    async function compressAndEncodeBase64(input) {
+      const uint8Array = new TextEncoder().encode(input);
+      const compressedStream = new Response(
+          new Blob([uint8Array]).stream().pipeThrough(new CompressionStream('gzip'))
+      ).arrayBuffer();
+      const compressedUint8Array = new Uint8Array(await compressedStream);
+      return btoa(String.fromCharCode(...compressedUint8Array));
+    }
+
+    async function getCompressedInputsFromConfig() {
+      const inputs = config?.inputs || {};
+      const compressedInputs = {};
+      await Promise.all(
+        Object.entries(inputs).map(async ([key, value]) => {
+          compressedInputs[key] = await compressAndEncodeBase64(value);
+        })
+      );
+      return compressedInputs;
+    }
+
+    const params = new URLSearchParams(await getCompressedInputsFromConfig());
+
     const baseUrl =
       config.baseUrl || `https://${config.isDev ? "dev." : ""}udify.app`;
 
+    // pre-check the length of the URL
+    const iframeUrl = `${baseUrl}/chatbot/${config.token}?${params}`;
+    if(iframeUrl.length > 2048) {
+      console.error("The URL is too long, please reduce the number of inputs to prevent the bot from failing to load");
+    }
+
     // Function to create the iframe for the chatbot
     function createIframe() {
       const iframe = document.createElement("iframe");
       iframe.allow = "fullscreen;microphone";
       iframe.title = "dify chatbot bubble window";
       iframe.id = iframeId;
-      iframe.src = `${baseUrl}/chatbot/${config.token}`;
+      iframe.src = iframeUrl;
       iframe.style.cssText = `
         border: none; position: fixed; flex-direction: column; justify-content: space-between;
         box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px;
@@ -155,6 +183,7 @@
           document.addEventListener('keydown', handleEscKey);
         }
 
+
         resetIframePosition();
       });