fix(website): lazy load chat message sources

aws-samples · Oct 13, 2023 · 68ab2bf · 68ab2bf
1 parent 793ade2
commit 68ab2bf
Showing 1 changed file with 16 additions and 10 deletions.
diff --git a/demo/website/src/components/chat/Message.tsx b/demo/website/src/components/chat/Message.tsx
@@ -90,13 +90,15 @@ export function MessageSources({ chatId, messageId }: MessageSourcesProps) {
  <Spinner size="big" />
  ) : (
  sourcesRequest.data &&
- sourcesRequest.data.length > 0 && (
+ (sourcesRequest.data.length ? (
  <div style={{ marginTop: "8px" }}>
  {sourcesRequest.data.map((source) => (
  <SourceComponent source={source} key={source.sourceId} />
  ))}
  </div>
- )
+ ) : (
+ "No sources available"
+ ))
  )}
  </div>
  );
@@ -106,14 +108,18 @@ function SourcePopover(props: { chatId: string; messageId: string }) {
  const [visible, setVisible] = useState(false);
  return (
  <>
- <Modal
- onDismiss={() => setVisible(false)}
- visible={visible}
- size="large"
- header="Sources"
- >
- <MessageSources chatId={props.chatId} messageId={props.messageId} />
- </Modal>
+ {/* Lazy load sources */}
+ {visible && (
+ <Modal
+ onDismiss={() => setVisible(false)}
+ visible
+ size="large"
+ header="Sources"
+ >
+ <MessageSources chatId={props.chatId} messageId={props.messageId} />
+ </Modal>
+ )}
+
  <Button
  iconName="folder-open"
  variant="inline-icon"