Skip to content

Commit 80595af

Browse files
Fr4nc3Fr4nc3
committed
homeinput clean up
1 parent d5daff5 commit 80595af

File tree

2 files changed

+127
-126
lines changed

2 files changed

+127
-126
lines changed

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

Lines changed: 116 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {
2-
Body1,
3-
Body1Strong,
4-
Button,
5-
Caption1,
6-
Card,
7-
Title2,
2+
Body1,
3+
Body1Strong,
4+
Button,
5+
Caption1,
6+
Card,
7+
Title2,
88
} from "@fluentui/react-components";
99
import { FoodToast20Regular, Send20Regular } from "@fluentui/react-icons";
1010
import React, { useRef, useEffect, useState } from "react";
@@ -19,143 +19,133 @@ import ChatInput from "@/coral/modules/ChatInput";
1919
import InlineToaster, { useInlineToaster } from "../toast/InlineToaster";
2020

2121
const HomeInput: React.FC<HomeInputProps> = ({
22-
onInputSubmit,
23-
onQuickTaskSelect,
22+
onInputSubmit,
23+
onQuickTaskSelect,
2424
}) => {
25-
const [input, setInput] = useState("");
26-
const textareaRef = useRef<HTMLTextAreaElement>(null);
27-
const navigate = useNavigate();
28-
const { showToast } = useInlineToaster();
29-
30-
const resetTextarea = () => {
31-
setInput("");
32-
if (textareaRef.current) {
33-
textareaRef.current.style.height = "auto";
34-
textareaRef.current.focus();
35-
}
36-
};
37-
38-
useEffect(() => {
39-
const cleanup = NewTaskService.addResetListener(resetTextarea);
40-
return cleanup;
41-
}, []);
42-
43-
const handleSubmit = async () => {
44-
if (input.trim()) {
45-
try {
46-
const response = await TaskService.submitInputTask(input.trim());
25+
const [input, setInput] = useState("");
26+
const textareaRef = useRef<HTMLTextAreaElement>(null);
27+
const navigate = useNavigate();
28+
const { showToast } = useInlineToaster();
4729

30+
const resetTextarea = () => {
4831
setInput("");
4932
if (textareaRef.current) {
50-
textareaRef.current.style.height = "auto";
33+
textareaRef.current.style.height = "auto";
34+
textareaRef.current.focus();
5135
}
36+
};
5237

53-
showToast("Task created!", "success");
54-
navigate(`/plan/${response.plan_id}`);
55-
} catch (error) {
56-
console.error("Failed to create task:", error);
57-
showToast("Something went wrong", "error");
58-
}
59-
}
60-
};
38+
useEffect(() => {
39+
const cleanup = NewTaskService.addResetListener(resetTextarea);
40+
return cleanup;
41+
}, []);
6142

62-
const handleQuickTaskClick = (task: QuickTask) => {
63-
setInput(task.description);
64-
if (textareaRef.current) {
65-
textareaRef.current.focus();
66-
}
67-
onQuickTaskSelect(task.description);
68-
};
43+
const handleSubmit = async () => {
44+
if (input.trim()) {
45+
try {
46+
const response = await TaskService.submitInputTask(input.trim());
6947

70-
useEffect(() => {
71-
if (textareaRef.current) {
72-
textareaRef.current.style.height = "auto";
73-
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
74-
}
75-
}, [input]);
48+
setInput("");
49+
if (textareaRef.current) {
50+
textareaRef.current.style.height = "auto";
51+
}
7652

77-
const handleClick = () => {
78-
showToast("Creating a task plan...", "error", { dismissible: true });
79-
};
53+
showToast("Task created!", "success");
54+
navigate(`/plan/${response.plan_id}`);
55+
} catch (error) {
56+
console.error("Failed to create task:", error);
57+
showToast("Something went wrong", "error");
58+
}
59+
}
60+
};
8061

81-
return (
82-
<div className="home-input-container">
83-
<div className="home-input-content">
84-
<div className="home-input-center-content">
85-
<div className="home-input-title-wrapper">
86-
<Title2>How can I help?</Title2>
87-
</div>
62+
const handleQuickTaskClick = (task: QuickTask) => {
63+
setInput(task.description);
64+
if (textareaRef.current) {
65+
textareaRef.current.focus();
66+
}
67+
onQuickTaskSelect(task.description);
68+
};
8869

89-
<ChatInput
90-
value={input}
91-
placeholder="Describe what you'd like to do or use / to reference files, people, and more"
92-
onChange={setInput}
93-
>
94-
<Button
95-
appearance="subtle"
96-
className="home-input-send-button"
97-
onClick={handleSubmit}
98-
disabled={!input.trim()}
99-
icon={<Send20Regular />}
100-
/>
101-
<Button
102-
appearance="subtle"
103-
icon={<FoodToast20Regular />}
104-
onClick={handleClick}
105-
></Button>
106-
</ChatInput>
70+
useEffect(() => {
71+
if (textareaRef.current) {
72+
textareaRef.current.style.height = "auto";
73+
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
74+
}
75+
}, [input]);
10776

108-
{/* Inline Toaster lives right under chat input */}
109-
<InlineToaster />
77+
const handleClick = () => {
78+
showToast("Creating a task plan...", "error", { dismissible: true });
79+
};
11080

111-
<div className="home-input-quick-tasks-section">
112-
<div className="home-input-quick-tasks-header">
113-
<Body1Strong>Quick tasks</Body1Strong>
114-
</div>
115-
<div className="home-input-quick-tasks">
116-
{quickTasks.map((task) => (
117-
<Card
118-
key={task.id}
119-
style={{
120-
flex: "1 ",
121-
display: "flex",
122-
flexDirection: "column",
123-
padding: "16px",
124-
backgroundColor: "var(--colorNeutralBackground3)",
125-
border: "1px solid var(--colorNeutralStroke2)",
126-
borderRadius: "8px",
127-
cursor: "pointer",
128-
boxShadow: "none",
129-
}}
130-
onMouseOver={(e) =>
131-
(e.currentTarget.style.backgroundColor =
132-
"var(--colorNeutralBackground4Hover)")
133-
}
134-
onMouseOut={(e) =>
135-
(e.currentTarget.style.backgroundColor =
136-
"var(--colorNeutralBackground3)")
137-
}
138-
onClick={() => handleQuickTaskClick(task)}
139-
>
140-
<div className="home-input-quick-task-content">
141-
<div className="home-input-quick-task-icon">
142-
{task.icon}
81+
return (
82+
<div className="home-input-container">
83+
<div className="home-input-content">
84+
<div className="home-input-center-content">
85+
<div className="home-input-title-wrapper">
86+
<Title2>How can I help?</Title2>
14387
</div>
144-
<div className="home-input-quick-task-text-content">
145-
<Body1Strong>{task.title}</Body1Strong>
146-
<Body1 className="home-input-quick-task-description">
147-
{task.description}
148-
</Body1>
88+
89+
<ChatInput
90+
value={input}
91+
placeholder="Describe what you'd like to do or use / to reference files, people, and more"
92+
onChange={setInput}
93+
>
94+
<Button
95+
appearance="subtle"
96+
className="home-input-send-button"
97+
onClick={handleSubmit}
98+
disabled={!input.trim()}
99+
icon={<Send20Regular />}
100+
/>
101+
<Button
102+
appearance="subtle"
103+
icon={<FoodToast20Regular />}
104+
onClick={handleClick}
105+
></Button>
106+
</ChatInput>
107+
108+
{/* Inline Toaster lives right under chat input */}
109+
<InlineToaster />
110+
111+
<div className="home-input-quick-tasks-section">
112+
<div className="home-input-quick-tasks-header">
113+
<Body1Strong>Quick tasks</Body1Strong>
114+
</div>
115+
<div className="home-input-quick-tasks">
116+
{quickTasks.map((task) => (
117+
<Card
118+
key={task.id}
119+
className="home-input-quick-task-card"
120+
onMouseOver={(e) =>
121+
(e.currentTarget.style.backgroundColor =
122+
"var(--colorNeutralBackground4Hover)")
123+
}
124+
onMouseOut={(e) =>
125+
(e.currentTarget.style.backgroundColor =
126+
"var(--colorNeutralBackground3)")
127+
}
128+
onClick={() => handleQuickTaskClick(task)}
129+
>
130+
<div className="home-input-quick-task-content">
131+
<div className="home-input-quick-task-icon">
132+
{task.icon}
133+
</div>
134+
<div className="home-input-quick-task-text-content">
135+
<Body1Strong>{task.title}</Body1Strong>
136+
<Body1 className="home-input-quick-task-description">
137+
{task.description}
138+
</Body1>
139+
</div>
140+
</div>
141+
</Card>
142+
))}
143+
</div>
149144
</div>
150-
</div>
151-
</Card>
152-
))}
145+
</div>
153146
</div>
154-
</div>
155147
</div>
156-
</div>
157-
</div>
158-
);
148+
);
159149
};
160150

161151
export default HomeInput;

‎src/frontend_react/src/styles/HomeInput.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,3 +138,14 @@
138138
border: none;
139139
padding: 0;
140140
}
141+
.home-input-quick-task-card{
142+
flex: 1;
143+
display: flex;
144+
flex-direction: column;
145+
padding: 16px;
146+
background-color: var(--colorNeutralBackground3);
147+
border: 1px solid var(--colorNeutralStroke2);
148+
border-radius: 8px;
149+
cursor: pointer;
150+
box-shadow: none;
151+
}

0 commit comments

Comments
 (0)