I’ve used the amazon-quicksight-embedding-sdk to embed my dashboard. However, this error occurs only when I am trying to use embedGenerativeQnA
, when I try to use the simple embedDashboard
it works fine within the same URL, does anyone have an idea how to handle it?
full example using the embedGenerativeQnA
:
import { Button, InputField } from '@/web-design-system';
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';
import React, { useRef, useState } from 'react';
import { Container, Header } from './AIEmbbed.styles';
export const AIEmbbed = () => {
const [isLoading, setLoading] = useState(false);
const [inputValue, setInputValue] = useState('');
const containerRef = useRef(null);
const fetchAWS = async () => {
try {
setLoading(true);
const embeddingContext = await createEmbeddingContext();
const frameOptions: any = {
url: inputValue,
container: containerRef.current,
height: '1000px',
width: '100%',
};
const contentOptions: any = {
panelOptions: {
panelType: 'FULL',
title: 'Custom Title',
showQIcon: false,
},
showTopicName: false,
showPinboard: false,
allowTopicSelection: false,
allowFullscreen: false,
searchPlaceholderText: 'Custom Search Placeholder',
};
await embeddingContext.embedGenerativeQnA(frameOptions, contentOptions);
} catch (error) {
console.log(error);
} finally {
setLoading(false);
}
};
return (
<Container>
<Header>
<InputField
width="600px"
value={inputValue}
onChange={(value) => setInputValue(value)}
disabled={isLoading}
/>
<Button onClick={() => fetchAWS()} width="150px" loading={isLoading}>
Enviar
</Button>
</Header>
<div className="embbed-container" ref={containerRef} />
</Container>
);
};
Do I need to create a Q topic before?