Skip to content

Commit 4bf5888

Browse files
Fr4nc3Fr4nc3
committed
Merge branch 'ui-ux-refresh_eunsoo' into feature/ui-ux-refresh
2 parents a9a8178 + 1719332 commit 4bf5888

File tree

15 files changed

+2093
-2669
lines changed

15 files changed

+2093
-2669
lines changed

‎src/frontend_react/package-lock.json‎

Lines changed: 1452 additions & 1518 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/frontend_react/src/components/content/PlanChat.tsx‎

Lines changed: 103 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,123 @@
11
import HeaderTools from "@/coral/components/Header/HeaderTools";
2-
import { Send } from "@/coral/imports/bundleicons";
2+
import { Copy, Send } from "@/coral/imports/bundleicons";
33
import ChatInput from "@/coral/modules/ChatInput";
44
import remarkGfm from "remark-gfm";
55
import rehypePrism from "rehype-prism";
66
import { PlanChatProps } from "@/models";
7-
import { Body1, Button, Tag, ToolbarDivider } from "@fluentui/react-components";
8-
import { ChatDismiss20Regular, HeartRegular } from "@fluentui/react-icons";
7+
import {
8+
Body1,
9+
Button,
10+
Tag,
11+
ToolbarDivider
12+
} from "@fluentui/react-components";
13+
import {
14+
HeartRegular,
15+
} from "@fluentui/react-icons";
916
import { useRef, useState } from "react";
1017
import ReactMarkdown from "react-markdown";
11-
import "../../styles/PlanChat.css"; // Assuming you have a CSS file for additional styles
12-
import "../../styles/Chat.css"; // Assuming you have a CSS file for additional styles
13-
import "../../styles/prism-material-oceanic.css"
14-
import InlineToaster from "../toast/InlineToaster";
18+
import "../../styles/PlanChat.css";
19+
import "../../styles/Chat.css";
20+
import "../../styles/prism-material-oceanic.css";
21+
1522
const PlanChat: React.FC<PlanChatProps> = ({
16-
planData,
17-
input,
18-
loading,
19-
OnChatSubmit
23+
planData,
24+
OnChatSubmit
2025
}) => {
21-
// const [messages, setMessages] = useState<{ role: string; content: string }[]>([]);
22-
const [inputValue, setInput] = useState(input);
23-
const [isTyping, setIsTyping] = useState(false);
24-
const [showScrollButton, setShowScrollButton] = useState(false);
25-
const [inputHeight, setInputHeight] = useState(0);
26-
const [currentConversationId, setCurrentConversationId] = useState<string | undefined>(undefined);
26+
const messages = planData?.messages || [];
27+
const [input, setInput] = useState("");
28+
const [isTyping, setIsTyping] = useState(false);
29+
const [showScrollButton, setShowScrollButton] = useState(false);
30+
const [inputHeight, setInputHeight] = useState(0);
31+
const [currentConversationId, setCurrentConversationId] = useState<string | undefined>(undefined);
32+
33+
const messagesContainerRef = useRef<HTMLDivElement>(null);
34+
const inputContainerRef = useRef<HTMLDivElement>(null);
35+
36+
const sendMessage = async () => {};
2737

28-
const messagesContainerRef = useRef<HTMLDivElement>(null);
29-
const inputContainerRef = useRef<HTMLDivElement>(null);
30-
const messages = planData?.messages || [];
31-
const scrollToBottom = () => {
32-
};
33-
const clearChat = async () => {
34-
setCurrentConversationId(undefined);
35-
};
36-
return (
37-
<div className="chat-container">
38-
{planData && (
39-
<>
40-
<div className="messages" ref={messagesContainerRef}>
41-
<div className="message-wrapper">
38+
const scrollToBottom = () => {};
4239

43-
{messages.map((msg, index) => (<div key={index} className={`message ${msg.source !== "human" ? "assistant" : "user"}`}>
44-
<Body1>
45-
<div className="plan-chat-message-content">
46-
<ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypePrism]}>
47-
{msg.content}
48-
</ReactMarkdown>
49-
{/* {msg.role === "assistant" && (
50-
<div className="assistant-footer">
51-
<div className="assistant-actions">
52-
<Button
53-
onClick={() => handleCopy(msg.content)}
54-
title="Copy Response"
55-
appearance="subtle"
56-
style={{ height: 28, width: 28 }}
57-
icon={<Copy />}
58-
/>
59-
<Button
60-
onClick={() => console.log("Heart clicked for response:", msg.content)}
61-
title="Like"
62-
appearance="subtle"
63-
style={{ height: 28, width: 28 }}
64-
icon={<HeartRegular />}
65-
/>
66-
</div>
67-
</div>
68-
)} */}
69-
</div>
70-
</Body1>
71-
</div>
72-
))}</div>
40+
return (
41+
<div className="chat-container">
42+
<div className="messages" ref={messagesContainerRef}>
43+
<div className="message-wrapper">
44+
{messages.map((msg, index) => {
45+
const isHuman = msg.role === "user" || msg.role === "human";
46+
47+
return (
48+
<div key={index} className={`message ${msg.role}`}>
49+
{!isHuman && (
50+
<div className="plan-chat-header">
51+
<div className="plan-chat-speaker">
52+
<span className="speaker-name">HR Agent</span>
53+
<Tag size="extra-small" shape="rounded" appearance="filled" className="bot-tag">BOT</Tag>
7354
</div>
74-
{showScrollButton && (
75-
<Tag
76-
onClick={scrollToBottom}
77-
className="scroll-to-bottom plan-chat-scroll-button"
78-
shape="circular"
79-
style={{ bottom: inputHeight }}
80-
>
81-
Back to bottom
82-
</Tag>
83-
)}
55+
</div>
56+
)}
8457

85-
<InlineToaster />
86-
<div ref={inputContainerRef} className="plan-chat-input-container">
87-
<div className="plan-chat-input-wrapper">
88-
<ChatInput
89-
value={inputValue}
90-
onChange={setInput}
91-
onEnter={() => OnChatSubmit(inputValue)}
92-
disabledChat={!planData.enableChat}
93-
placeholder="Add more info to this task..."
94-
>
95-
<Button
96-
appearance="transparent"
97-
onClick={() => OnChatSubmit(inputValue)}
98-
icon={<Send />}
99-
disabled={!planData?.enableChat && (!input.trim())}
100-
/>
58+
<Body1>
59+
<div className="plan-chat-message-content">
60+
<ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypePrism]}>
61+
{msg.content || ""}
62+
</ReactMarkdown>
10163

102-
</ChatInput>
64+
{!isHuman && (
65+
<div className="assistant-footer">
66+
<div className="assistant-actions">
67+
<Button
68+
onClick={() => msg.content && navigator.clipboard.writeText(msg.content)}
69+
title="Copy Response"
70+
appearance="subtle"
71+
style={{ height: 28, width: 28 }}
72+
icon={<Copy />}
73+
/>
74+
<Tag size="extra-small">Sample data for demonstration purposes only.</Tag>
10375
</div>
76+
</div>
77+
)}
78+
</div>
79+
</Body1>
80+
</div>
81+
);
82+
})}
83+
</div>
10484

105-
</div>
106-
</>)}
85+
{isTyping && (
86+
<div className="typing-indicator">
87+
<span>Thinking...</span>
88+
</div>
89+
)}
90+
</div>
91+
92+
{showScrollButton && (
93+
<Tag
94+
onClick={scrollToBottom}
95+
className="scroll-to-bottom plan-chat-scroll-button"
96+
shape="circular"
97+
style={{ bottom: inputHeight }}
98+
>
99+
Back to bottom
100+
</Tag>
101+
)}
102+
103+
<div ref={inputContainerRef} className="plan-chat-input-container">
104+
<div className="plan-chat-input-wrapper">
105+
<ChatInput
106+
value={input}
107+
onChange={setInput}
108+
onEnter={sendMessage}
109+
>
110+
<Button
111+
appearance="transparent"
112+
onClick={sendMessage}
113+
icon={<Send />}
114+
disabled={!planData?.hasHumanClarificationRequest || isTyping || !input.trim()}
115+
/>
116+
</ChatInput>
107117
</div>
108-
);
118+
</div>
119+
</div>
120+
);
109121
};
110122

111123
export default PlanChat;

‎src/frontend_react/src/components/content/PlanPanelLeft.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,10 @@ import { PlanPanelLefProps, PlanWithSteps, Task } from "@/models";
2020
import { apiService } from "@/api";
2121
import { TaskService } from "@/services";
2222
import MsftColor from "@/coral/imports/MsftColor";
23-
import ContosoLogo from "./contoso";
23+
import ContosoLogo from "../../coral/imports/ContosoLogo";
2424
import "../../styles/PlanPanelLeft.css";
25+
import PanelFooter from "@/coral/components/Panels/PanelFooter";
26+
import PanelUserCard from "../../coral/components/Panels/UserCard";
2527

2628
const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({ onNewTaskButton }) => {
2729
const { dispatchToast } = useToastController("toast");
@@ -98,7 +100,7 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({ onNewTaskButton }) => {
98100
return (
99101
<div style={{ flexShrink: 0, display: "flex", overflow: "hidden" }}>
100102
<PanelLeft panelWidth={280} panelResize={true}>
101-
<PanelLeftToolbar panelTitle="Contoso" panelIcon={<ContosoLogo />}>
103+
<PanelLeftToolbar panelTitle="Contoso" panelIcon={<ContosoLogo style={{ width: 20, height: 20 }} />}>
102104
<Tooltip content="New task" relationship={"label"} />
103105
</PanelLeftToolbar>
104106

@@ -119,6 +121,18 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({ onNewTaskButton }) => {
119121
loading={plansLoading}
120122
selectedTaskId={selectedTaskId ?? undefined}
121123
/>
124+
125+
<PanelFooter>
126+
<PanelUserCard
127+
name="Pepper Hayuki"
128+
alias="[email protected]"
129+
// image={{ src: "https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/KatriAthokas.jpg" }}
130+
// shape="square"
131+
// badge={{ status: 'available' }}
132+
// color="colorful"
133+
size={32} // Default=32
134+
/>
135+
</PanelFooter>
122136
</PanelLeft>
123137
</div>
124138
);

‎src/frontend_react/src/components/content/TaskList.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
import {
2-
Accordion,
3-
AccordionHeader,
4-
AccordionItem,
5-
AccordionPanel,
62
Button,
73
Menu,
84
MenuTrigger,
95
Caption1,
10-
Body1,
116
Skeleton,
127
SkeletonItem,
138
} from "@fluentui/react-components";

0 commit comments

Comments
 (0)