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>
This commit is contained in:
gstrat88
2025-02-20 05:52:44 +02:00
committed by GitHub
parent a4f9aa2172
commit 0c6d787f92
3 changed files with 23 additions and 10 deletions

View File

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

View File

@ -16,18 +16,19 @@ export const useGetBeginNodeDataQuery = () => {
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