Iframe should support input variables (#5156)

### What problem does this PR solve?

Right now we cannot embed a chat in website when it has variables in the
begin component.
This PR tries to read the variables values from the query string via a
data_ prefixed variable.

#5016 

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

---------

Co-authored-by: gstrat88 <gstrat@innews.gr>

web/src/pages/chat/shared-hooks.ts

 
 export const useGetSharedChatSearchParams = () => {
   const [searchParams] = useSearchParams();
-
+  const data_prefix = 'data_';
+  const data = Object.fromEntries(
+    searchParams
+      .entries()
+      .filter(([key, value]) => key.startsWith(data_prefix))
+      .map(([key, value]) => [key.replace(data_prefix, ''), value]),
+  );
   return {
     from: searchParams.get('from') as SharedFrom,
     sharedId: searchParams.get('shared_id'),
     locale: searchParams.get('locale'),
+    data: data,
     visibleAvatar: searchParams.get('visible_avatar')
       ? searchParams.get('visible_avatar') !== '1'
       : true,
 };
 
 export const useSendSharedMessage = () => {
-  const { from, sharedId: conversationId } = useGetSharedChatSearchParams();
+  const {
+    from,
+    sharedId: conversationId,
+    data: data,
+  } = useGetSharedChatSearchParams();
   const { createSharedConversation: setConversation } =
     useCreateNextSharedConversation();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
   );
 
   const fetchSessionId = useCallback(async () => {
-    const ret = await send({ question: '' });
+    const payload = { question: '' };
+    const ret = await send({ ...payload, ...data });
     if (isCompletionError(ret)) {
       message.error(ret?.data.message);
       setHasError(true);

web/src/pages/flow/header/index.tsx

 import { Link, useParams } from 'umi';
 import {
   useGetBeginNodeDataQuery,
-  useGetBeginNodeDataQueryIsEmpty,
+  useGetBeginNodeDataQueryIsSafe,
 } from '../hooks/use-get-begin-query';
 import {
   useSaveGraph,
   const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
   const { showEmbedModal, hideEmbedModal, embedVisible, beta } =
     useShowEmbedModal();
-  const isBeginNodeDataQueryEmpty = useGetBeginNodeDataQueryIsEmpty();
+  const isBeginNodeDataQuerySafe = useGetBeginNodeDataQueryIsSafe();
 
   const handleShowEmbedModal = useCallback(() => {
     showEmbedModal();
           <Button
             type="primary"
             onClick={handleShowEmbedModal}
-            disabled={!isBeginNodeDataQueryEmpty}
+            disabled={!isBeginNodeDataQuerySafe}
           >
             <b>{t('embedIntoSite', { keyPrefix: 'common' })}</b>
           </Button>

web/src/pages/flow/hooks/use-get-begin-query.tsx

   return getBeginNodeDataQuery;
 };
 
-export const useGetBeginNodeDataQueryIsEmpty = () => {
-  const [isBeginNodeDataQueryEmpty, setIsBeginNodeDataQueryEmpty] =
+export const useGetBeginNodeDataQueryIsSafe = () => {
+  const [isBeginNodeDataQuerySafe, setIsBeginNodeDataQuerySafe] =
     useState(false);
   const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
   const nodes = useGraphStore((state) => state.nodes);
 
   useEffect(() => {
     const query: BeginQuery[] = getBeginNodeDataQuery();
-    setIsBeginNodeDataQueryEmpty(query.length === 0);
+    const isSafe = !query.some((q) => !q.optional && q.type === 'file');
+    setIsBeginNodeDataQuerySafe(isSafe);
   }, [getBeginNodeDataQuery, nodes]);
 
-  return isBeginNodeDataQueryEmpty;
+  return isBeginNodeDataQuerySafe;
 };
 
 // exclude nodes with branches