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

@@ -22,11 +22,18 @@ export const useSendButtonDisabled = (value: string) => {
 
 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,
@@ -34,7 +41,11 @@ export const useGetSharedChatSearchParams = () => {
 };
 
 export const useSendSharedMessage = () => {
-  const { from, sharedId: conversationId } = useGetSharedChatSearchParams();
+  const {
+    from,
+    sharedId: conversationId,
+    data: data,
+  } = useGetSharedChatSearchParams();
   const { createSharedConversation: setConversation } =
     useCreateNextSharedConversation();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
@@ -84,7 +95,8 @@ export const useSendSharedMessage = () => {
   );
 
   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);