From 097e7b5ee1663fbd91fe71bb58509c4fb11ebbe4 Mon Sep 17 00:00:00 2001 From: Yi Cai Date: Mon, 28 Sep 2026 00:43:52 -0400 Subject: [PATCH 1/7] fix(intelligent-assistant): align Chat/Notebooks shell with PatternFly defaults Fixes: https://redhat.atlassian.net/browse/RHDHBUGS-3733 Signed-off-by: Yi Cai Co-authored-by: Cursor --- .../.changeset/swift-panel-polish.md | 5 + .../dev/CustomDrawer.tsx | 4 +- .../src/components/CollapsedHistoryStrip.tsx | 130 +++--- .../src/components/FilePreview.tsx | 36 +- .../src/components/LightSpeedChat.tsx | 395 ++++++++---------- .../__tests__/LightspeedChat.test.tsx | 12 +- .../components/notebooks/DocumentSidebar.tsx | 16 +- .../notebooks/NotebookHeaderActions.tsx | 129 +++--- .../src/components/notebooks/NotebookView.tsx | 243 ++++++----- .../src/components/notebooks/NotebooksTab.tsx | 2 +- .../notebooks/SidebarCollapseIcon.tsx | 47 +-- .../intelligent-assistant/src/const.ts | 6 + .../src/hooks/useLightspeedProviderState.ts | 5 +- .../intelligent-assistant/src/index.tsx | 8 +- 14 files changed, 500 insertions(+), 538 deletions(-) create mode 100644 workspaces/intelligent-assistant/.changeset/swift-panel-polish.md diff --git a/workspaces/intelligent-assistant/.changeset/swift-panel-polish.md b/workspaces/intelligent-assistant/.changeset/swift-panel-polish.md new file mode 100644 index 00000000000..093d8d7fad6 --- /dev/null +++ b/workspaces/intelligent-assistant/.changeset/swift-panel-polish.md @@ -0,0 +1,5 @@ +--- +'@red-hat-developer-hub/backstage-plugin-intelligent-assistant': patch +--- + +Align Intelligent Assistant Chat/Notebooks shell with PatternFly defaults and fix sticky history close hover. diff --git a/workspaces/intelligent-assistant/plugins/intelligent-assistant/dev/CustomDrawer.tsx b/workspaces/intelligent-assistant/plugins/intelligent-assistant/dev/CustomDrawer.tsx index 5a209c13e5d..95c2d2ba474 100644 --- a/workspaces/intelligent-assistant/plugins/intelligent-assistant/dev/CustomDrawer.tsx +++ b/workspaces/intelligent-assistant/plugins/intelligent-assistant/dev/CustomDrawer.tsx @@ -39,9 +39,11 @@ export type CustomDrawerProps = { export const CustomDrawer = (props: CustomDrawerProps) => { const { children, + // Defaults align with PatternFly Chatbot (30rem ≈ 480px); callers usually + // pass drawerWidth from Lightspeed provider / AppDrawer defaultWidth. minWidth = 400, maxWidth = 800, - initialWidth = 400, + initialWidth = 480, isDrawerOpen, drawerWidth, onWidthChange, diff --git a/workspaces/intelligent-assistant/plugins/intelligent-assistant/src/components/CollapsedHistoryStrip.tsx b/workspaces/intelligent-assistant/plugins/intelligent-assistant/src/components/CollapsedHistoryStrip.tsx index feb8ae77a8d..0ef78f2a128 100644 --- a/workspaces/intelligent-assistant/plugins/intelligent-assistant/src/components/CollapsedHistoryStrip.tsx +++ b/workspaces/intelligent-assistant/plugins/intelligent-assistant/src/components/CollapsedHistoryStrip.tsx @@ -14,68 +14,22 @@ * limitations under the License. */ -import { styled } from '@mui/material/styles'; -import { Button, Tooltip } from '@patternfly/react-core'; +import { Button, Flex, FlexItem, Icon, Tooltip } from '@patternfly/react-core'; import { PenIcon } from '@patternfly/react-icons'; import { useTranslation } from '../hooks/useTranslation'; import { SidebarExpandIcon } from './notebooks/SidebarCollapseIcon'; -const Strip = styled('div')(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - paddingTop: theme.spacing(1.5), - gap: theme.spacing(1.5), - borderRight: '1px solid var(--pf-t--global--border--color--default)', - width: 48, - minWidth: 48, - flexShrink: 0, - backgroundColor: 'var(--pf-t--global--background--color--primary--default)', - height: '100%', -})); - -const IconButton = styled(Button)({ - padding: '8px !important', - minWidth: 0, - lineHeight: 1, - borderRadius: '8px !important', - border: '1px solid var(--pf-t--global--border--color--default) !important', - color: 'var(--pf-t--global--icon--color--regular)', - '& svg': { - width: 18, - height: 18, - }, - '&:hover': { - color: 'var(--pf-t--global--icon--color--hover) !important', - backgroundColor: - 'var(--pf-t--global--background--color--action--plain--hover) !important', - }, -}); - -const NewChatIconButton = styled(Button)({ - padding: '8px !important', - minWidth: 0, - lineHeight: 1, - borderRadius: '8px !important', - border: '1px solid var(--pf-t--global--border--color--default) !important', - color: 'var(--pf-t--global--color--brand--default) !important', - '&:hover': { - color: 'var(--pf-t--global--color--brand--hover) !important', - backgroundColor: - 'var(--pf-t--global--background--color--action--plain--hover) !important', - }, - '&:disabled': { - color: 'var(--pf-t--global--text--color--disabled) !important', - }, -}); - type CollapsedHistoryStripProps = { onExpand: () => void; onNewChat: () => void; newChatDisabled?: boolean; }; +/** + * Collapsed chat-history rail for fullscreen. Stock PF plain icon buttons + * (rounded-square hover) — no custom button chrome or vertical divider. + */ export const CollapsedHistoryStrip = ({ onExpand, onNewChat, @@ -84,26 +38,58 @@ export const CollapsedHistoryStrip = ({ const { t } = useTranslation(); return ( - - - - - - - - - - - - + + + + - - { - if (hasUploadsInProgress) - return t('notebook.view.documents.uploadsInProgress'); - if (isAddDisabled) - return t('notebook.view.documents.maxReached'); - return t('notebook.view.documents.add'); - })()} - position="right" - > - - + + + } + onClick={() => onSidebarCollapsedChange(false)} + aria-label={t('notebook.view.sidebar.expand')} + /> + + + + { + if (hasUploadsInProgress) + return t('notebook.view.documents.uploadsInProgress'); + if (isAddDisabled) + return t('notebook.view.documents.maxReached'); + return t('notebook.view.documents.add'); + })()} + position="right" + > +