awslabs / amazon-quicksight-embedding-sdk

A SDK to help users embed QuickSight dashboards on other pages.
Apache License 2.0
171 stars 40 forks source link

Invalid generative-qna experience URL #223

Open wakeupmh opened 2 months ago

wakeupmh commented 2 months ago

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?

huaraymo commented 2 months ago

Hey, how are you generating your embedUrl? For generativeQnA, you would have to pass in a different experience configuration.

Here's some documentation around the parameters for our GenerateEmbedUrlForRegisteredUser api: https://docs.aws.amazon.com/quicksight/latest/APIReference/API_GenerateEmbedUrlForRegisteredUser.html

The ExperienceConfiguration section could be helpful.