Skip to content

fix(lightspeed): ux improvements and persist display mode preference #2180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
debsmita1 wants to merge 2 commits into
base: main
Choose a base branch
from
+1,021 −377
Open

fix(lightspeed): ux improvements and persist display mode preference #2180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93857b7
fix(lightspeed): ux improvements
debsmita1 Jan 27, 2026
b81a0ea
persist display mode in user settings
debsmita1 Jan 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions workspaces/lightspeed/.changeset/eleven-candles-unite.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
---

some ux improvements and persisting the display mode preference
3 changes: 0 additions & 3 deletions workspaces/lightspeed/packages/app/e2e-tests/pages/LightspeedPage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,9 +94,6 @@ export async function expectChatInputAreaVisible(
await expect(
page.getByRole('textbox', { name: t['chatbox.message.placeholder'] }),
).toBeVisible();
await expect(
page.getByRole('button', { name: t['footer.accuracy.label'] }),
).toBeVisible();
}

export async function expectEmptyChatHistory(
Expand Down
6 changes: 0 additions & 6 deletions workspaces/lightspeed/plugins/lightspeed/report-alpha.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,9 @@ readonly "conversation.delete.confirm.action": string;
readonly "conversation.rename.confirm.title": string;
readonly "conversation.rename.confirm.action": string;
readonly "conversation.rename.placeholder": string;
readonly "conversation.action.error": string;
readonly "permission.required.title": string;
readonly "permission.required.description": string;
readonly "footer.accuracy.label": string;
readonly "footer.accuracy.popover.title": string;
readonly "footer.accuracy.popover.description": string;
readonly "footer.accuracy.popover.image.alt": string;
readonly "footer.accuracy.popover.cta.label": string;
readonly "footer.accuracy.popover.link.label": string;
readonly "common.cancel": string;
readonly "common.close": string;
readonly "common.readMore": string;
Expand Down
32 changes: 26 additions & 6 deletions workspaces/lightspeed/plugins/lightspeed/src/api/LightspeedApiClient.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,9 +195,19 @@ export class LightspeedApiClient implements LightspeedAPI {
);

if (!response.ok) {
throw new Error(
`failed to delete conversation, status ${response.status}: ${response.statusText}`,
);
let errorMessage = `failed to delete conversation, status ${response.status}: ${response.statusText}`;

try {
const errorBody = await response.json();
if (errorBody?.error) {
errorMessage = errorBody.error;
}
} catch (e) {
// eslint-disable-next-line no-console
console.warn(e);
}

throw new Error(errorMessage);
}
return { success: true };
}
Expand All @@ -217,9 +227,19 @@ export class LightspeedApiClient implements LightspeedAPI {
);

if (!response.ok) {
throw new Error(
`failed to rename conversation, status ${response.status}: ${response.statusText}`,
);
let errorMessage = `failed to rename conversation, status ${response.status}: ${response.statusText}`;

try {
const errorBody = await response.json();
if (errorBody?.error) {
errorMessage = errorBody.error;
}
} catch (e) {
// eslint-disable-next-line no-console
console.warn(e);
}

throw new Error(errorMessage);
}
return { success: true };
}
Expand Down
32 changes: 31 additions & 1 deletion workspaces/lightspeed/plugins/lightspeed/src/api/__tests__/LightspeedApiClient.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,14 +214,44 @@ describe('LightspeedApiClient', () => {
ok: false,
status: 400,
statusText: 'Bad Request',
json: jest.fn().mockResolvedValue({
error:
'Error from lightspeed-core server: The conversation ID conversationId- has invalid format.',
}),
} as unknown as Response);

await expect(
client.renameConversation('conv-123', 'New Name'),
).rejects.toThrow(
'failed to rename conversation, status 400: Bad Request',
'Error from lightspeed-core server: The conversation ID conversationId- has invalid format.',
);
});

it('should throw error with statusText when JSON parsing fails', async () => {
mockFetchApi.fetch.mockResolvedValue({
ok: false,
status: 400,
statusText: 'Bad Request',
json: jest.fn().mockRejectedValue(new Error('Invalid JSON')),
} as unknown as Response);

await expect(
client.renameConversation('conv-123', 'New Name'),
).rejects.toThrow('Bad Request');
});

it('should throw error with statusText when JSON does not contain error field', async () => {
mockFetchApi.fetch.mockResolvedValue({
ok: false,
status: 400,
statusText: 'Bad Request',
json: jest.fn().mockResolvedValue({ message: 'Some other error' }),
} as unknown as Response);

await expect(
client.renameConversation('conv-123', 'New Name'),
).rejects.toThrow('Bad Request');
});
});

describe('getFeedbackStatus', () => {
Expand Down
8 changes: 2 additions & 6 deletions workspaces/lightspeed/plugins/lightspeed/src/components/DeleteModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,8 @@ export const DeleteModal = ({
{t('conversation.delete.confirm.message')}
</DialogContent>
{isError && (
<Box maxWidth="650px" marginLeft="20px">
<Alert severity="error">
{t('conversation.action.error' as any, {
error: String(error),
})}
</Alert>
<Box maxWidth="650px" marginLeft="20px" marginRight="20px">
<Alert severity="error">{String(error)}</Alert>
</Box>
)}
<DialogActions style={{ justifyContent: 'left', padding: '20px' }}>
Expand Down
9 changes: 1 addition & 8 deletions workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,11 +122,6 @@ const useStyles = makeStyles(theme => ({
maxWidth: 'unset !important',
},
},
footerPopover: {
'& img': {
maxWidth: '100%',
},
},
sortDropdown: {
padding: 0,
margin: 0,
Expand Down Expand Up @@ -849,9 +844,7 @@ export const LightspeedChat = ({
onAttachRejected={onAttachRejected}
placeholder={t('chatbox.message.placeholder')}
/>
<ChatbotFootnote
{...getFootnoteProps(classes.footerPopover, t)}
/>
<ChatbotFootnote {...getFootnoteProps(t)} />
</ChatbotFooter>
</FileDropZone>
}
Expand Down
82 changes: 58 additions & 24 deletions workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedChatBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,21 @@ const useStyles = makeStyles(theme => ({
},
},
},
deepThinking: {
animation: '$deepThinking 1.6s ease-in-out infinite',
},

'@keyframes deepThinking': {
'0%': {
opacity: 0.65,
},
'50%': {
opacity: 1,
},
'100%': {
opacity: 0.65,
},
},
}));

// Extended message type that includes tool calls
Expand Down Expand Up @@ -222,7 +237,7 @@ export const LightspeedChatBox = forwardRef(
// Map first tool call to PatternFly's toolCall prop
const firstToolCall = message.toolCalls?.[0];
const toolCallProp = firstToolCall
? mapToPatternFlyToolCall(firstToolCall, t)
? mapToPatternFlyToolCall(firstToolCall, t, message.role)
: undefined;

// Handle additional tool calls (if any) via extraContent
Expand All @@ -239,43 +254,63 @@ export const LightspeedChatBox = forwardRef(
parsedReasoning.isReasoningInProgress ||
parsedReasoning.hasReasoning
) {
const reasoningContent =
parsedReasoning.reasoning ||
(() => {
const reasoningMatch = messageContent.match(/<think>(.*?)$/s);
return reasoningMatch ? reasoningMatch[1].trim() : '';
})();
const reasoningContent = parsedReasoning.reasoning;

if (reasoningContent) {
deepThinking = {
cardBodyProps: {
id: `deep-thinking-${index}`,
style: { whiteSpace: 'pre-line' },
className: parsedReasoning.isReasoningInProgress
? classes.deepThinking
: undefined,
},
toggleContent: t('reasoning.thinking'),
body: reasoningContent,
expandableSectionProps: {},
isDefaultExpanded: false,
};
extraContentParts.beforeMainContent = (
<DeepThinking {...deepThinking} />
);
}
}

const allToolCalls: React.ReactNode[] = [];

// Add first tool call if it exists
if (toolCallProp && firstToolCall) {
allToolCalls.push(
<div
key={`tool-${firstToolCall.id}-${firstToolCall.toolName}`}
style={{ marginTop: '8px' }}
>
<PatternFlyToolCall {...toolCallProp} />
</div>,
);
}

// Add additional tool calls
if (additionalToolCalls && additionalToolCalls.length > 0) {
extraContentParts.afterMainContent = (
additionalToolCalls.forEach(tc => {
const tcProps = mapToPatternFlyToolCall(tc, t, message.role);
allToolCalls.push(
<div
key={`tool-${tc.id}-${tc.toolName}`}
style={{ marginTop: '8px' }}
>
<PatternFlyToolCall {...tcProps} />
</div>,
);
});
}

// Show Thinking first, then tool calls
if (deepThinking || allToolCalls.length > 0) {
extraContentParts.beforeMainContent = (
<>
{additionalToolCalls.map(tc => {
const tcProps = mapToPatternFlyToolCall(tc, t);
return (
<div
key={`tool-${tc.id}-${tc.toolName}`}
style={{ marginTop: '8px' }}
>
<PatternFlyToolCall {...tcProps} />
</div>
);
})}
{deepThinking && <DeepThinking {...deepThinking} />}
{allToolCalls.length > 0 && (
<div style={{ marginTop: deepThinking ? '8px' : '0' }}>
{allToolCalls}
</div>
)}
</>
);
}
Expand All @@ -295,7 +330,6 @@ export const LightspeedChatBox = forwardRef(
return (
<Message
key={`${message.role}-${index}`}
toolCall={toolCallProp}
extraContent={extraContent}
{...finalMessage}
/>
Expand Down
Loading