fix(FN-2646): restore quick chat render toggle visibility
- Remove generic btn btn-icon classes from quick chat render toggles so component-specific visibility styles apply - Increase toggle icon size and adjust default muted color for clearer eye/eye-off affordance in assistant messages - Add explicit focus-visible ring styling for keyboard accessibility on the render toggle control - Extend QuickChatFAB regression coverage to assert class usage, SVG icon presence, and plain/rendered toggle state transitions
This commit is contained in:
@@ -293,11 +293,12 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--transition-fast);
|
transition: opacity var(--transition-fast);
|
||||||
color: var(--text-tertiary);
|
color: var(--text-muted);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.quick-chat-panel-message--received:hover .quick-chat-message-render-toggle,
|
.quick-chat-panel-message--received:hover .quick-chat-message-render-toggle,
|
||||||
@@ -315,6 +316,11 @@
|
|||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.quick-chat-message-render-toggle:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: var(--focus-ring-strong);
|
||||||
|
}
|
||||||
|
|
||||||
.quick-chat-panel-input {
|
.quick-chat-panel-input {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -1349,12 +1349,12 @@ export function QuickChatFAB({
|
|||||||
{renderAssistantMessageContent(message.content, forcePlain)}
|
{renderAssistantMessageContent(message.content, forcePlain)}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`btn btn-icon quick-chat-message-render-toggle${forcePlain ? " quick-chat-message-render-toggle--plain" : ""}`}
|
className={`quick-chat-message-render-toggle${forcePlain ? " quick-chat-message-render-toggle--plain" : ""}`}
|
||||||
data-testid="quick-chat-message-render-toggle"
|
data-testid="quick-chat-message-render-toggle"
|
||||||
aria-label={forcePlain ? "Show rendered markdown" : "Show plain text"}
|
aria-label={forcePlain ? "Show rendered markdown" : "Show plain text"}
|
||||||
onClick={() => toggleMessageRenderMode(message.id)}
|
onClick={() => toggleMessageRenderMode(message.id)}
|
||||||
>
|
>
|
||||||
{forcePlain ? <EyeOff size={12} /> : <Eye size={12} />}
|
{forcePlain ? <EyeOff size={14} /> : <Eye size={14} />}
|
||||||
</button>
|
</button>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
@@ -1375,12 +1375,12 @@ export function QuickChatFAB({
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`btn btn-icon quick-chat-message-render-toggle${plainTextMessageIds.has("__streaming__") ? " quick-chat-message-render-toggle--plain" : ""}`}
|
className={`quick-chat-message-render-toggle${plainTextMessageIds.has("__streaming__") ? " quick-chat-message-render-toggle--plain" : ""}`}
|
||||||
data-testid="quick-chat-message-render-toggle"
|
data-testid="quick-chat-message-render-toggle"
|
||||||
aria-label={plainTextMessageIds.has("__streaming__") ? "Show rendered markdown" : "Show plain text"}
|
aria-label={plainTextMessageIds.has("__streaming__") ? "Show rendered markdown" : "Show plain text"}
|
||||||
onClick={() => toggleMessageRenderMode("__streaming__")}
|
onClick={() => toggleMessageRenderMode("__streaming__")}
|
||||||
>
|
>
|
||||||
{plainTextMessageIds.has("__streaming__") ? <EyeOff size={12} /> : <Eye size={12} />}
|
{plainTextMessageIds.has("__streaming__") ? <EyeOff size={14} /> : <Eye size={14} />}
|
||||||
</button>
|
</button>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -248,16 +248,21 @@ describe("QuickChatFAB", () => {
|
|||||||
|
|
||||||
const toggles = screen.getAllByTestId("quick-chat-message-render-toggle");
|
const toggles = screen.getAllByTestId("quick-chat-message-render-toggle");
|
||||||
expect(toggles).toHaveLength(2);
|
expect(toggles).toHaveLength(2);
|
||||||
|
expect(toggles[0]).not.toHaveClass("btn");
|
||||||
|
expect(toggles[0]).not.toHaveClass("btn-icon");
|
||||||
|
expect(toggles[0].querySelector("svg")).toBeInTheDocument();
|
||||||
expect(within(firstAssistantBubble).getByText("Bold", { selector: "strong" })).toBeInTheDocument();
|
expect(within(firstAssistantBubble).getByText("Bold", { selector: "strong" })).toBeInTheDocument();
|
||||||
expect(within(secondAssistantBubble).getByText("Bold", { selector: "strong" })).toBeInTheDocument();
|
expect(within(secondAssistantBubble).getByText("Bold", { selector: "strong" })).toBeInTheDocument();
|
||||||
|
|
||||||
fireEvent.click(toggles[0]);
|
fireEvent.click(toggles[0]);
|
||||||
|
|
||||||
|
expect(toggles[0]).toHaveClass("quick-chat-message-render-toggle--plain");
|
||||||
expect(within(firstAssistantBubble).getByText(/\*\*Bold\*\* one/)).toBeInTheDocument();
|
expect(within(firstAssistantBubble).getByText(/\*\*Bold\*\* one/)).toBeInTheDocument();
|
||||||
expect(within(firstAssistantBubble).queryByText("Bold", { selector: "strong" })).toBeNull();
|
expect(within(firstAssistantBubble).queryByText("Bold", { selector: "strong" })).toBeNull();
|
||||||
expect(within(secondAssistantBubble).getByText("Bold", { selector: "strong" })).toBeInTheDocument();
|
expect(within(secondAssistantBubble).getByText("Bold", { selector: "strong" })).toBeInTheDocument();
|
||||||
|
|
||||||
fireEvent.click(toggles[0]);
|
fireEvent.click(toggles[0]);
|
||||||
|
expect(toggles[0]).not.toHaveClass("quick-chat-message-render-toggle--plain");
|
||||||
expect(within(firstAssistantBubble).getByText("Bold", { selector: "strong" })).toBeInTheDocument();
|
expect(within(firstAssistantBubble).getByText("Bold", { selector: "strong" })).toBeInTheDocument();
|
||||||
expect(within(userBubble).getByText(/\*\*User\*\* plain/)).toBeInTheDocument();
|
expect(within(userBubble).getByText(/\*\*User\*\* plain/)).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user