Skip to content

Commit 1719332

Browse files
author
Eunsoo Lee
committed
PlanChat.tsx updates
1 parent 4d4f874 commit 1719332

File tree

9 files changed

+2016
-2034
lines changed

9 files changed

+2016
-2034
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 & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +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-
loading,
18-
OnChatSubmit
23+
planData,
24+
OnChatSubmit
1925
}) => {
20-
// const [messages, setMessages] = useState<{ role: string; content: string }[]>([]);
21-
const [input, setInput] = useState("");
22-
const [isTyping, setIsTyping] = useState(false);
23-
const [showScrollButton, setShowScrollButton] = useState(false);
24-
const [inputHeight, setInputHeight] = useState(0);
25-
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 () => {};
2637

27-
const messagesContainerRef = useRef<HTMLDivElement>(null);
28-
const inputContainerRef = useRef<HTMLDivElement>(null);
29-
const messages = planData?.messages || [];
30-
const scrollToBottom = () => {
31-
};
32-
const clearChat = async () => {
33-
setInput("");
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={input}
90-
onChange={setInput}
91-
onEnter={() => OnChatSubmit(input)}
92-
disabledChat={!planData.hasHumanClarificationRequest}
93-
>
94-
<Button
95-
appearance="transparent"
96-
onClick={() => OnChatSubmit(input)}
97-
icon={<Send />}
98-
disabled={!planData?.hasHumanClarificationRequest && (!input.trim())}
99-
/>
58+
<Body1>
59+
<div className="plan-chat-message-content">
60+
<ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypePrism]}>
61+
{msg.content || ""}
62+
</ReactMarkdown>
10063

101-
</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>
10275
</div>
76+
</div>
77+
)}
78+
</div>
79+
</Body1>
80+
</div>
81+
);
82+
})}
83+
</div>
10384

104-
</div>
105-
</>)}
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>
106117
</div>
107-
);
118+
</div>
119+
</div>
120+
);
108121
};
109122

110123
export default PlanChat;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ 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";
2525
import PanelFooter from "@/coral/components/Panels/PanelFooter";
2626
import PanelUserCard from "../../coral/components/Panels/UserCard";
@@ -100,7 +100,7 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({ onNewTaskButton }) => {
100100
return (
101101
<div style={{ flexShrink: 0, display: "flex", overflow: "hidden" }}>
102102
<PanelLeft panelWidth={280} panelResize={true}>
103-
<PanelLeftToolbar panelTitle="Contoso" panelIcon={<ContosoLogo />}>
103+
<PanelLeftToolbar panelTitle="Contoso" panelIcon={<ContosoLogo style={{ width: 20, height: 20 }} />}>
104104
<Tooltip content="New task" relationship={"label"} />
105105
</PanelLeftToolbar>
106106

‎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";

‎src/frontend_react/src/coral/imports/ContosoLogo.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
3+
const ContosoLogo: React.FC = () => {
4+
return (
5+
<svg
6+
width="33"
7+
height="32"
8+
viewBox="0 0 33 32"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
>
12+
<path
13+
d="M8.23352 15.9738C5.76515 13.5949 5.99534 10.2657 7.78417 8.22591C9.4775 6.29505 13.0907 5.33023 16.0316 8.2051C17.2805 6.94275 18.7767 6.27791 20.5851 6.41871C21.9932 6.52891 23.1649 7.12641 24.1347 8.13408C26.2088 10.2915 26.0912 13.1492 23.8163 15.9971C26.139 18.976 26.1904 21.8864 23.9669 24.0426C22.0434 25.9073 18.5772 26.3971 16.0157 23.7781C13.2915 26.4901 9.8791 25.8094 8.05965 24.0475C6.2745 22.3186 5.41375 18.8463 8.23474 15.9738H8.23352ZM12.7099 11.7436C12.4173 12.0313 12.1026 12.2186 11.9777 12.4917C11.7842 12.9141 12.0193 13.2496 12.3866 13.5275C14.2991 14.9723 14.2991 17.0146 12.3879 18.4569C12.045 18.7165 11.7928 19.0336 11.9618 19.434C12.072 19.6935 12.3879 20.0266 12.6217 20.0351C12.9229 20.0462 13.3331 19.8417 13.5241 19.5956C14.9774 17.7357 17.0161 17.7161 18.4584 19.5491C18.6629 19.8099 19.084 20.0388 19.3963 20.0302C19.6326 20.0229 20.0366 19.6164 20.0427 19.3801C20.0501 19.0666 19.8126 18.6663 19.5567 18.4447C18.9714 17.9378 18.4523 17.4088 18.2857 16.6301C17.9931 15.2588 18.5918 14.2817 19.6583 13.4773C19.8909 13.3022 20.088 12.8921 20.0599 12.6153C20.0354 12.3705 19.6926 12.0019 19.4563 11.9738C19.1587 11.9383 18.6861 12.1023 18.5318 12.3386C17.3258 14.1887 14.8415 14.3601 13.4947 12.3386C13.3441 12.1121 13.0405 11.9872 12.7087 11.7436H12.7099Z"
14+
fill="var(--colorBrandForeground1)"
15+
fillRule="evenodd"
16+
clipRule="evenodd"
17+
/>
18+
</svg>
19+
);
20+
};
21+
22+
export default ContosoLogo;

0 commit comments

Comments
 (0)