11import ChatInput from "@/coral/modules/ChatInput" ;
22import { PlanChatProps } from "@/models" ;
3- import { Button } from "@fluentui/react-components" ;
4- import { SendRegular } from "@fluentui/react-icons " ;
3+ import { Button , Caption1 } from "@fluentui/react-components" ;
4+ import { Send } from "@/coral/imports/bundleicons " ;
55
66interface SimplifiedPlanChatProps extends PlanChatProps {
77 waitingForPlan : boolean ;
88}
9+
910const PlanChatBody : React . FC < SimplifiedPlanChatProps > = ( {
1011 planData,
1112 input,
@@ -15,38 +16,91 @@ const PlanChatBody: React.FC<SimplifiedPlanChatProps> = ({
1516 waitingForPlan
1617} ) => {
1718 return (
18-
1919 < div
2020 style = { {
21- padding : '20px 24px 32px' ,
22- borderTop : '1px solid var(--colorNeutralStroke2)' ,
2321 backgroundColor : 'var(--colorNeutralBackground1)' ,
24- maxWidth : '800px' ,
25- margin : '0 auto' ,
26- width : '98%'
22+ padding : '20px 0'
2723 } }
28-
2924 >
30- < ChatInput
31- value = { input }
32- onChange = { setInput }
33- onEnter = { ( ) => OnChatSubmit ( input ) }
34- disabledChat = { submittingChatDisableInput }
35- placeholder = {
36- waitingForPlan
37- ? "Creating plan..."
38- : "Add more info to this plan..."
39- }
25+ < div
26+ style = { {
27+ maxWidth : '800px' ,
28+ margin : '0 auto' ,
29+ padding : '0 24px'
30+ } }
31+ >
32+ { /* Chat Input Container */ }
33+ < div style = { {
34+ position : 'relative' ,
35+ width : '100%'
36+ } } >
37+ < ChatInput
38+ value = { input }
39+ onChange = { setInput }
40+ onEnter = { ( ) => OnChatSubmit ( input ) }
41+ disabledChat = { submittingChatDisableInput }
42+ placeholder = {
43+ waitingForPlan
44+ ? "Creating plan..."
45+ : "Tell us what needs planning, building, or connecting—we'll handle the rest."
46+ }
47+ style = { {
48+ minHeight : '56px' ,
49+ fontSize : '16px' ,
50+ borderRadius : '8px' ,
51+ border : '2px solid var(--colorNeutralStroke2)' ,
52+ backgroundColor : 'var(--colorNeutralBackground1)' ,
53+ padding : '16px 60px 16px 20px' ,
54+ width : '100%' ,
55+ boxSizing : 'border-box' ,
56+ alignItems : 'flex-start' ,
57+ textAlign : 'left' ,
58+ verticalAlign : 'top'
59+ } }
60+ >
61+ < Button
62+ appearance = "subtle"
63+ className = "home-input-send-button"
64+ onClick = { ( ) => OnChatSubmit ( input ) }
65+ disabled = { submittingChatDisableInput }
66+ icon = { < Send /> }
67+ style = { {
68+ position : 'absolute' ,
69+ right : '12px' ,
70+ top : '16px' ,
71+ height : '32px' ,
72+ width : '32px' ,
73+ borderRadius : '4px' ,
74+ backgroundColor : 'transparent' ,
75+ border : 'none' ,
76+ color : submittingChatDisableInput
77+ ? 'var(--colorNeutralForegroundDisabled)'
78+ : 'var(--colorBrandForeground1)'
79+ } }
80+ />
81+ </ ChatInput >
82+
83+ { /* AI disclaimer */ }
84+ < div style = { {
85+ color : 'var(--colorNeutralForeground3)' ,
86+ marginTop : '8px' ,
87+ paddingBottom : '8px' ,
88+ textAlign : 'center'
89+ } } >
90+ { /* <Caption1>AI-generated content may be incorrect</Caption1> */ }
91+ </ div >
92+ </ div >
93+ </ div >
94+ < div
95+ style = { {
96+ marginTop : '8px' ,
97+ paddingBottom : '8px' ,
98+ } }
4099 >
41- < Button
42- appearance = "transparent"
43- onClick = { ( ) => OnChatSubmit ( input ) }
44- icon = { < SendRegular /> }
45- disabled = { submittingChatDisableInput }
46- style = { { height : '40px' , width : '40px' } }
47- />
48- </ ChatInput >
49- </ div > ) ;
100+
101+ </ div >
102+ </ div >
103+ ) ;
50104}
51105
52106export default PlanChatBody ;
0 commit comments