feat(lightspeed): add Sources chip + popover for notebook context

workspaces/lightspeed/.changeset/swift-pens-gleam.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': minor
+---
+
+Replace inline SourcesCard with a compact chip + popover for notebook sources display, using PatternFly's native Popover component with custom FileTypeIcon badges and i18n support for all languages.

workspaces/lightspeed/plugins/lightspeed/package.json

@@ -78,7 +78,7 @@
     "@mui/material": "^5.12.2",
     "@mui/styles": "5.18.0",
     "@patternfly/chatbot": "6.6.0",
-    "@patternfly/react-core": "6.5.1",
+    "@patternfly/react-core": "6.6.0",
     "@patternfly/react-icons": "^6.5.0",
     "@patternfly/react-table": "^6.4.1",
     "@red-hat-developer-hub/backstage-plugin-app-react": "^0.0.5",

workspaces/lightspeed/plugins/lightspeed/report-alpha.api.md

@@ -273,6 +273,11 @@ export const lightspeedTranslationRef: TranslationRef<
     readonly 'sort.oldest': string;
     readonly 'sort.alphabeticalAsc': string;
     readonly 'sort.alphabeticalDesc': string;
+    readonly 'sources.chip.label_one': string;
+    readonly 'sources.chip.label_other': string;
+    readonly 'sources.modal.title': string;
+    readonly 'sources.modal.description': string;
+    readonly 'sources.popover.closeAriaLabel': string;
     readonly 'reasoning.thinking': string;
   }
 >;

workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedChatBox.tsx

@@ -44,6 +44,7 @@ import { useTranslation } from '../hooks/useTranslation';
 import { ToolCall } from '../types';
 import { parseReasoning } from '../utils/reasoningParser';
 import { mapToPatternFlyToolCall } from '../utils/toolCallMapper';
+import { SourcesChipModal } from './SourcesChipModal';
 
 const useStyles = makeStyles(theme => ({
   prompt: {
@@ -114,6 +115,8 @@ type LightspeedChatBoxProps = {
   conversationId: string;
   isStreaming: boolean;
   displayMode?: ChatbotDisplayMode;
+  /** When true, sources are shown as a compact chip + popover instead of the inline SourcesCard. */
+  showSourcesChipPopover?: boolean;
 };
 
 export interface ScrollContainerHandle {
@@ -132,6 +135,7 @@ export const LightspeedChatBox = forwardRef(
       isStreaming,
       topicRestrictionEnabled,
       displayMode,
+      showSourcesChipPopover: showSourcesChipModal = false,
     }: LightspeedChatBoxProps,
     ref: ForwardedRef<ScrollContainerHandle | null>,
   ) => {
@@ -262,6 +266,7 @@ export const LightspeedChatBox = forwardRef(
           const extraContentParts: {
             beforeMainContent?: React.ReactNode;
             afterMainContent?: React.ReactNode;
+            endContent?: React.ReactNode;
           } = {};
 
           let deepThinking: DeepThinkingProps | undefined = undefined;
@@ -331,18 +336,34 @@ export const LightspeedChatBox = forwardRef(
             );
           }
 
-          const extraContent =
-            extraContentParts.beforeMainContent ||
-            extraContentParts.afterMainContent
-              ? extraContentParts
-              : undefined;
-
-          const finalMessage =
+          const messageToPrepare =
             parsedReasoning.hasReasoning ||
             parsedReasoning.isReasoningInProgress
               ? { ...message, content: parsedReasoning.mainContent }
               : message;
 
+          let finalMessage = messageToPrepare;
+
+          if (showSourcesChipModal) {
+            const { sources: messageSources, ...messageWithoutSources } =
+              messageToPrepare;
+
+            if (messageSources?.sources?.length) {
+              extraContentParts.endContent = (
+                <SourcesChipModal sources={messageSources} />
+              );
+            }
+
+            finalMessage = messageWithoutSources;
+          }
+
+          const extraContent =
+            extraContentParts.beforeMainContent ||
+            extraContentParts.afterMainContent ||
+            extraContentParts.endContent
+              ? extraContentParts
+              : undefined;
+
           return (
             <Message
               key={`${message.role}-${index}`}

workspaces/lightspeed/plugins/lightspeed/src/components/SourcesChipModal.tsx

@@ -0,0 +1,165 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { makeStyles } from '@material-ui/core';
+import { SourcesCardProps } from '@patternfly/chatbot';
+import {
+  Button,
+  HelperText,
+  HelperTextItem,
+  List,
+  ListItem,
+  Popover,
+  Tooltip,
+} from '@patternfly/react-core';
+import { InfoCircleIcon, LinkIcon } from '@patternfly/react-icons';
+
+import { useTranslation } from '../hooks/useTranslation';
+import { FileTypeIcon } from './notebooks/FileTypeIcon';
+
+const POPOVER_WIDTH = '400px';
+
+const useStyles = makeStyles(theme => ({
+  sourcesPopover: {
+    '& .pf-v6-c-popover__title': {
+      alignItems: 'flex-start',
+    },
+    '& .pf-v6-c-popover__title-text': {
+      margin: 0,
+    },
+    '& .pf-v6-c-popover__header': {
+      paddingBlockEnd: theme.spacing(2),
+    },
+    '& .pf-v6-c-popover__body': {
+      paddingBlockStart: 0,
+    },
+  },
+  chipButton: {
+    padding: '4px 12px',
+    fontSize: '0.8125rem',
+    fontWeight: 500,
+    borderRadius: 16,
+    backgroundColor: 'transparent',
+    color: 'var(--pf-t--global--text--color--regular, #1b1d21)',
+    '&:hover': {
+      backgroundColor:
+        'var(--pf-t--global--background--color--secondary--default, #e0e0e0)',
+    },
+    '& .pf-v6-c-button__icon': {
+      color: 'inherit',
+    },
+  },
+  helperText: {
+    marginBottom: theme.spacing(1.5),
+    color: 'var(--pf-t--global--text--color--subtle, #c7c7c7)',
+  },
+  sourcesList: {
+    maxHeight: 320,
+    overflowY: 'auto' as const,
+  },
+  sourceItem: {
+    alignItems: 'center',
+    '& .pf-v6-c-list__item-text': {
+      minWidth: 0,
+    },
+  },
+  sourceContent: {
+    flex: 1,
+    minWidth: 0,
+  },
+  sourceTitle: {
+    fontSize: '0.875rem',
+    fontWeight: 500,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  sourceBody: {
+    fontSize: '0.8125rem',
+    color: 'var(--pf-t--global--text--color--subtle, #c7c7c7)',
+    marginTop: 2,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+  },
+}));
+
+type SourcesChipModalProps = {
+  sources: SourcesCardProps;
+};
+
+export const SourcesChipModal = ({ sources }: SourcesChipModalProps) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  const count = sources.sources?.length ?? 0;
+  if (count === 0) return null;
+
+  return (
+    <Popover
+      className={classes.sourcesPopover}
+      position="top-start"
+      triggerAction="click"
+      aria-label={t('sources.modal.title')}
+      headerContent={t('sources.modal.title')}
+      headerIcon={<LinkIcon />}
+      closeBtnAriaLabel={t('sources.popover.closeAriaLabel')}
+      minWidth={POPOVER_WIDTH}
+      maxWidth={POPOVER_WIDTH}
+      appendTo={() => document.body}
+      bodyContent={
+        <>
+          <HelperText className={classes.helperText}>
+            <HelperTextItem variant="indeterminate" icon={<InfoCircleIcon />}>
+              {t('sources.modal.description')}
+            </HelperTextItem>
+          </HelperText>
+          <List
+            isPlain
+            className={classes.sourcesList}
+            aria-label={t('sources.modal.title')}
+          >
+            {sources.sources.map((source, index) => {
+              const title = source.title ?? `Source ${index + 1}`;
+              return (
+                <ListItem
+                  key={`${source.title}-${index}`}
+                  className={classes.sourceItem}
+                  icon={<FileTypeIcon fileName={title} />}
+                >
+                  <div className={classes.sourceContent}>
+                    <Tooltip content={title}>
+                      <div className={classes.sourceTitle}>{title}</div>
+                    </Tooltip>
+                    {source.body && (
+                      <div className={classes.sourceBody}>{source.body}</div>
+                    )}
+                  </div>
+                </ListItem>
+              );
+            })}
+          </List>
+        </>
+      }
+    >
+      <Button variant="link" icon={<LinkIcon />} className={classes.chipButton}>
+        {(t as Function)('sources.chip.label', { count })}
+      </Button>
+    </Popover>
+  );
+};

workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/LightspeedChatBox.test.tsx

@@ -45,6 +45,14 @@ jest.mock('../../hooks/useFeedbackActions', () => ({
   }),
 }));
 
+jest.mock('../SourcesChipModal', () => ({
+  SourcesChipModal: (props: any) => (
+    <div data-testid="sources-chip-modal">
+      {props.sources?.sources?.length ?? 0} sources
+    </div>
+  ),
+}));
+
 jest.mock('@patternfly/chatbot', () => {
   const actual = jest.requireActual('@patternfly/chatbot');
   return {
@@ -68,6 +76,7 @@ jest.mock('@patternfly/chatbot', () => {
         {props.extraContent?.beforeMainContent}
         {props.content}
         {props.extraContent?.afterMainContent}
+        {props.extraContent?.endContent}
       </div>
     ),
   };
@@ -183,4 +192,52 @@ describe('LightspeedChatBox', () => {
     expect(deepThinking.textContent).toContain('Line 2');
     expect(deepThinking.textContent).toContain('Line 3');
   });
+
+  it('should render SourcesChipModal as endContent when showSourcesChipPopover is true', () => {
+    const messagesWithSources = [
+      {
+        role: 'bot' as const,
+        content: 'Here is the answer.',
+        timestamp: '2024-01-01T00:00:00Z',
+        sources: {
+          sources: [
+            { title: 'doc.md', body: 'Some documentation', link: '' },
+            { title: 'config.yaml', body: 'Config file', link: '' },
+          ],
+        },
+      },
+    ];
+
+    render(
+      <LightspeedChatBox
+        {...defaultProps}
+        messages={messagesWithSources}
+        showSourcesChipPopover
+      />,
+    );
+
+    expect(screen.getByTestId('sources-chip-modal')).toBeInTheDocument();
+    expect(screen.getByTestId('sources-chip-modal')).toHaveTextContent(
+      '2 sources',
+    );
+  });
+
+  it('should not render SourcesChipModal when showSourcesChipPopover is false', () => {
+    const messagesWithSources = [
+      {
+        role: 'bot' as const,
+        content: 'Here is the answer.',
+        timestamp: '2024-01-01T00:00:00Z',
+        sources: {
+          sources: [{ title: 'doc.md', body: 'Some documentation', link: '' }],
+        },
+      },
+    ];
+
+    render(
+      <LightspeedChatBox {...defaultProps} messages={messagesWithSources} />,
+    );
+
+    expect(screen.queryByTestId('sources-chip-modal')).not.toBeInTheDocument();
+  });
 });