40 | {!isEmpty ? (
41 |
42 | {messageListFromChatContext.map((message, index, messageList) =>
43 | message.isAnswer ? (
44 |
55 | ) : (
56 |
61 | )
62 | )}
63 |
64 | ) : (
65 | // Empty div needed for proper animation when transitioning to non-empty state
66 |
67 | )}
68 |
69 |
74 |
75 |
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/src/frontend/src/components/agents/AssistantMessage.module.css:
--------------------------------------------------------------------------------
1 | .assistantMessageContainer {
2 | display: flex;
3 | flex-direction: column;
4 | padding: 16px;
5 | margin-bottom: 16px;
6 | background-color: var(--colorNeutralBackground1);
7 | border-radius: 8px;
8 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
9 | }
10 |
11 | .messageHeader {
12 | display: flex;
13 | justify-content: space-between;
14 | align-items: center;
15 | margin-bottom: 12px;
16 | }
17 |
18 | .avatarAndName {
19 | display: flex;
20 | align-items: center;
21 | }
22 |
23 | .avatar {
24 | width: 32px;
25 | height: 32px;
26 | margin-right: 8px;
27 | border-radius: 50%;
28 | overflow: hidden;
29 | background-color: var(--colorNeutralBackground3);
30 | display: flex;
31 | align-items: center;
32 | justify-content: center;
33 | }
34 |
35 | .avatarImage {
36 | max-width: 100%;
37 | max-height: 100%;
38 | }
39 |
40 | .botName {
41 | font-weight: 600;
42 | color: var(--colorNeutralForeground1);
43 | }
44 |
45 | .actions {
46 | display: flex;
47 | }
48 |
49 | .messageContent {
50 | margin-bottom: 12px;
51 | }
52 |
53 | .messageFootnote {
54 | margin-top: 12px;
55 | padding-top: 12px;
56 | border-top: 1px solid var(--colorNeutralStroke2);
57 | font-size: 12px;
58 | }
59 |
60 | .references {
61 | margin-bottom: 8px;
62 | }
63 |
64 | .referenceList {
65 | display: flex;
66 | flex-wrap: wrap;
67 | gap: 8px;
68 | }
69 |
70 | .reference {
71 | background-color: var(--colorNeutralBackground3);
72 | padding: 4px 8px;
73 | border-radius: 4px;
74 | font-size: 12px;
75 | cursor: pointer;
76 | }
77 |
78 | .reference:hover {
79 | background-color: var(--colorNeutralBackground4);
80 | }
81 |
82 | .disclaimer {
83 | font-size: 12px;
84 | color: var(--colorNeutralForeground3);
85 | margin-top: 12px;
86 | font-style: italic;
87 | }
--------------------------------------------------------------------------------
/src/frontend/src/components/agents/AssistantMessage.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Spinner } from "@fluentui/react-components";
2 | import { bundleIcon, DeleteFilled, DeleteRegular } from "@fluentui/react-icons";
3 | import { CopilotMessageV2 as CopilotMessage } from "@fluentui-copilot/react-copilot-chat";
4 | import {
5 | ReferenceListV2 as ReferenceList,
6 | ReferenceOverflowButton,
7 | } from "@fluentui-copilot/react-reference";
8 | import { Suspense } from "react";
9 |
10 | import { Markdown } from "../core/Markdown";
11 | import { UsageInfo } from "./UsageInfo";
12 | import { IAssistantMessageProps } from "./chatbot/types";
13 |
14 | import styles from "./AgentPreviewChatBot.module.css";
15 | import { AgentIcon } from "./AgentIcon";
16 |
17 | const DeleteIcon = bundleIcon(DeleteFilled, DeleteRegular);
18 |
19 | export function AssistantMessage({
20 | message,
21 | agentLogo,
22 | loadingState,
23 | agentName,
24 | showUsageInfo,
25 | onDelete,
26 | }: IAssistantMessageProps): React.JSX.Element {
27 | const hasAnnotations = message.annotations && message.annotations.length > 0;
28 | const references = hasAnnotations
29 | ? message.annotations?.map((annotation, index) => (
30 |