Skip to content

Merge from upstream: collapsible references #4

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

Merged
merged 6 commits into from
May 12, 2025
Merged

Merge from upstream: collapsible references #4

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b000a71
Additional extensions for Dev Container (Rainbow CSV, AI Foundry, AI …
pamelafox May 9, 2025
5a3deac
Port from pydantic-ai to openai-agents SDK (#211)
pamelafox May 11, 2025
2735ce2
Bump @babel/runtime from 7.22.15 to 7.27.1 in /src/frontend (#205)
dependabot[bot] May 11, 2025
425fb2a
Update h11 and trans deps (#212)
pamelafox May 11, 2025
ac4b0a6
Collapse references by default (#213)
pamelafox May 12, 2025
acac218
Merge remote-tracking branch 'upstream/main' into mergemain3
pamelafox May 12, 2025
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
43 changes: 27 additions & 16 deletions src/frontend/src/components/Answer/Answer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useMemo } from "react";
import { useMemo, useState } from "react";
import { Stack, IconButton } from "@fluentui/react";
import DOMPurify from "dompurify";

Expand Down Expand Up @@ -29,6 +29,7 @@ export const Answer = ({
onFollowupQuestionClicked,
showFollowupQuestions
}: Props) => {
const [isReferencesCollapsed, setIsReferencesCollapsed] = useState(true);
const followupQuestions = answer.context.followup_questions;
const messageContent = answer.message.content;
const parsedAnswer = useMemo(() => parseAnswerToHtml(messageContent, isStreaming, onCitationClicked), [answer]);
Expand Down Expand Up @@ -60,23 +61,33 @@ export const Answer = ({
{!!parsedAnswer.citations.length && (
<Stack.Item>
<Stack horizontal wrap tokens={{ childrenGap: 5 }}>
<span className={styles.citationLearnMore}>References:</span>
<Stack horizontal verticalAlign="center" tokens={{ childrenGap: 5 }}>
<IconButton
iconProps={{ iconName: isReferencesCollapsed ? "ChevronDown" : "ChevronUp" }}
title={isReferencesCollapsed ? "Expand references" : "Collapse references"}
ariaLabel={isReferencesCollapsed ? "Expand references" : "Collapse references"}
onClick={() => setIsReferencesCollapsed(!isReferencesCollapsed)}
/>
<span className={styles.citationLearnMore}>References:</span>
</Stack>
</Stack>
{!isReferencesCollapsed && (
<ol>
{parsedAnswer.citations.map((rowId, ind) => {
const citation = answer.context.data_points[rowId];
if (!citation) return null;
return (
<li key={rowId}>
<h4>{citation.name}</h4>
<p className={styles.referenceMetadata}>Location: {citation.location}</p>
<p className={styles.referenceMetadata}>Price level: {citation.price_level}</p>
<p className={styles.referenceMetadata}>Rating: {citation.rating}</p>
<p>{citation.description}</p>
</li>
);
})}
{parsedAnswer.citations.map((rowId, ind) => {
const citation = answer.context.data_points[rowId];
if (!citation) return null;
return (
<li key={rowId}>
<h4>{citation.name}</h4>
<p className={styles.referenceMetadata}>Location: {citation.location}</p>
<p className={styles.referenceMetadata}>Price level: {citation.price_level}</p>
<p className={styles.referenceMetadata}>Rating: {citation.rating}</p>
<p>{citation.description}</p>
</li>
);
})}
</ol>
</Stack>
)}
</Stack.Item>
)}

Expand Down
Loading