Skip to content

Commit 99ca672

Browse files
dennypradiptadennypradipta
authored
Feat: Add minimize button (#44)
1 parent 5abed5f commit 99ca672

File tree

1 file changed

+107
-94
lines changed

1 file changed

+107
-94
lines changed

‎app/components/ai-agent.tsx‎

Lines changed: 107 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useEffect, useRef, useState } from "react";
77

88
import "@n8n/chat/style.css";
99
import "../styles/ai-agent.css";
10-
import { LoaderCircle, SparklesIcon } from "lucide-react";
10+
import { LoaderCircle, MinusIcon, SparklesIcon } from "lucide-react";
1111
import Image from "next/image";
1212
import { cn } from "@/lib/utils";
1313
import useMedia from "@/hooks/use-media";
@@ -21,7 +21,7 @@ const DEFAULT_MESSAGES = [
2121
export default function AIAgent() {
2222
const isDesktop = useMedia("(min-width: 992px)");
2323
const [text, setText] = useState<string>("");
24-
const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
24+
const [isMinimized, setIsMinimized] = useState<boolean>(false);
2525
const [isChatOpen, setIsChatOpen] = useState<boolean>(true);
2626

2727
// Refs to store DOM elements
@@ -205,7 +205,7 @@ export default function AIAgent() {
205205
const handleSubmit = async (text: string) => {
206206
if (!text.length || !chatDivRef.current) return;
207207

208-
setIsSubmitted(true);
208+
setIsMinimized(true);
209209
const textarea = chatDivRef.current.querySelector("textarea");
210210
if (!textarea) return;
211211

@@ -229,7 +229,7 @@ export default function AIAgent() {
229229
triggerClick(chatFABRef.current);
230230
textarea.value = "";
231231
setText("");
232-
setIsSubmitted(true);
232+
setIsMinimized(true);
233233
setIsChatOpen(true);
234234
}
235235
}
@@ -238,102 +238,115 @@ export default function AIAgent() {
238238
setTimeout(() => clearInterval(waitForSendButton), 5000);
239239
};
240240

241-
return (
242-
<>
243-
<div
244-
className={cn(
245-
"animate-fade-in-up fixed bottom-0 z-50 mb-8 hidden w-full items-center px-4 transition-all",
246-
isSubmitted ? "hidden" : "lg:flex"
247-
)}>
248-
<div className="mx-auto flex w-full max-w-4xl flex-col gap-2 rounded-xl bg-[url('/images/ai-agent.png')] bg-contain bg-center p-4 shadow-xl">
249-
<div className="flex flex-row items-center gap-2">
250-
<div className="relative flex w-full items-center">
251-
<SparklesIcon
252-
strokeWidth={1.5}
253-
className="absolute left-0 z-10 ml-4 h-6 w-6 text-[#3276F5]"
254-
/>
255-
<input
256-
ref={inputRef}
257-
type="text"
258-
className="z-0 h-[52px] w-full max-w-7xl rounded-lg bg-white p-2 pr-12 pl-12 text-gray-800 placeholder:text-gray-400"
259-
value={text}
260-
onChange={({ target }) => setText(target.value)}
261-
onKeyDown={(e) => {
262-
if (e.key === "Enter" && !e.shiftKey) {
263-
e.preventDefault();
264-
handleSubmit(text);
265-
}
266-
}}
267-
aria-describedby="Ask me about services, success stories, or your challenges"
268-
placeholder="Ask me about services, success stories, or your challenges"
269-
/>
270-
<Button
271-
id="desktop-ai-submit"
272-
type="button"
273-
className="absolute right-0 z-10 mr-4 ml-4 h-7 w-7 rounded-full bg-[#3276F5] p-2 hover:cursor-pointer hover:bg-[#3276F5DD]"
274-
onClick={() => handleSubmit(text)}
275-
disabled={isSubmitted}>
276-
<div className="flex items-center justify-center">
277-
{isSubmitted ? (
278-
<LoaderCircle className="h-4 w-4 animate-spin" />
279-
) : (
280-
<Image
281-
alt="Send message to AI"
282-
src="/icons/ai-agent-button.svg"
283-
width={16}
284-
height={16}
285-
/>
286-
)}
241+
if (config.AI_AGENT_URL) {
242+
return (
243+
<>
244+
<div
245+
className={cn(
246+
"animate-fade-in-up fixed bottom-0 z-50 mb-8 hidden w-full items-center px-4 transition-all",
247+
isMinimized ? "hidden" : "lg:flex"
248+
)}>
249+
<div className="relative mx-auto flex w-full max-w-4xl flex-col gap-2">
250+
<Button
251+
className="z-10 h-8 w-8 self-end rounded-full bg-[#000000b3] p-0"
252+
onClick={() => {
253+
setIsChatOpen(false);
254+
setIsMinimized(true);
255+
}}>
256+
<MinusIcon />
257+
</Button>
258+
<div className="mx-auto flex w-full max-w-4xl flex-col gap-2 rounded-xl bg-[url('/images/ai-agent.png')] bg-contain bg-center p-4 shadow-xl">
259+
<div className="flex flex-row items-center gap-2">
260+
<div className="relative flex w-full items-center">
261+
<SparklesIcon
262+
strokeWidth={1.5}
263+
className="absolute left-0 z-10 ml-4 h-6 w-6 text-[#3276F5]"
264+
/>
265+
<input
266+
ref={inputRef}
267+
type="text"
268+
className="z-0 h-[52px] w-full max-w-7xl rounded-lg bg-white p-2 pr-12 pl-12 text-gray-800 placeholder:text-gray-400"
269+
value={text}
270+
onChange={({ target }) => setText(target.value)}
271+
onKeyDown={(e) => {
272+
if (e.key === "Enter" && !e.shiftKey) {
273+
e.preventDefault();
274+
handleSubmit(text);
275+
}
276+
}}
277+
aria-describedby="Ask me about services, success stories, or your challenges"
278+
placeholder="Ask me about services, success stories, or your challenges"
279+
/>
280+
<Button
281+
id="desktop-ai-submit"
282+
type="button"
283+
className="absolute right-0 z-10 mr-4 ml-4 h-7 w-7 rounded-full bg-[#3276F5] p-2 hover:cursor-pointer hover:bg-[#3276F5DD]"
284+
onClick={() => handleSubmit(text)}
285+
disabled={isMinimized}>
286+
<div className="flex items-center justify-center">
287+
{isMinimized ? (
288+
<LoaderCircle className="h-4 w-4 animate-spin" />
289+
) : (
290+
<Image
291+
alt="Send message to AI"
292+
src="/icons/ai-agent-button.svg"
293+
width={16}
294+
height={16}
295+
/>
296+
)}
297+
</div>
298+
</Button>
287299
</div>
288-
</Button>
300+
</div>
301+
<div className="flex shrink-0 flex-row gap-2 overflow-auto">
302+
{DEFAULT_MESSAGES.map(({ text, id }) => (
303+
<Button
304+
key={id}
305+
className="rounded-md border border-white bg-transparent hover:cursor-pointer"
306+
onClick={() => {
307+
setText(text);
308+
inputRef.current?.focus();
309+
}}>
310+
{text}
311+
</Button>
312+
))}
313+
</div>
289314
</div>
290315
</div>
291-
<div className="flex shrink-0 flex-row gap-2 overflow-auto">
292-
{DEFAULT_MESSAGES.map(({ text, id }) => (
293-
<Button
294-
key={id}
295-
className="rounded-md border border-white bg-transparent hover:cursor-pointer"
296-
onClick={() => {
297-
setText(text);
298-
inputRef.current?.focus();
299-
}}>
300-
{text}
301-
</Button>
302-
))}
303-
</div>
304316
</div>
305-
</div>
306-
<Button
307-
onClick={() => {
308-
const chatFAB = document.querySelector(
309-
"#n8n-chat .chat-window-toggle"
310-
);
311-
if (chatFAB) {
312-
const clickEvent = new MouseEvent("click", {
313-
bubbles: true,
314-
cancelable: true,
315-
view: window
316-
});
317-
chatFAB.dispatchEvent(clickEvent);
317+
<Button
318+
onClick={() => {
319+
const chatFAB = document.querySelector(
320+
"#n8n-chat .chat-window-toggle"
321+
);
322+
if (chatFAB) {
323+
const clickEvent = new MouseEvent("click", {
324+
bubbles: true,
325+
cancelable: true,
326+
view: window
327+
});
328+
chatFAB.dispatchEvent(clickEvent);
318329

319-
// Open the n8n chat window
320-
const chatDiv = document.querySelector("#n8n-chat");
321-
if (chatDiv) {
322-
const chatWindow = chatDiv.querySelector(".chat-window-wrapper");
323-
if (chatWindow) {
324-
chatWindow.classList.toggle("chat-window-minimized");
330+
// Open the n8n chat window
331+
if (chatWindowRef) {
332+
chatWindowRef.current?.classList.toggle(
333+
"chat-window-minimized"
334+
);
335+
chatWindowRef.current?.classList.add("chat-window-right");
325336
}
337+
338+
setIsChatOpen(true);
326339
}
340+
}}
341+
className={cn(
342+
isChatOpen ? "hidden" : "lg:flex",
343+
"fixed right-0 bottom-0 z-50 mr-8 mb-4 hidden rounded-full bg-[#3276F5] p-2 px-4 font-bold hover:cursor-pointer hover:bg-[#3276F5DD]"
344+
)}>
345+
<div className="flex items-center justify-center">Ask HyperBot</div>
346+
</Button>
347+
</>
348+
);
349+
}
327350

328-
setIsChatOpen(true);
329-
}
330-
}}
331-
className={cn(
332-
isChatOpen ? "hidden" : "lg:flex",
333-
"fixed right-0 bottom-0 z-50 mr-8 mb-4 hidden rounded-full bg-[#3276F5] p-2 px-4 font-bold hover:cursor-pointer hover:bg-[#3276F5DD]"
334-
)}>
335-
<div className="flex items-center justify-center">Ask HyperBot</div>
336-
</Button>
337-
</>
338-
);
351+
return <></>;
339352
}

0 commit comments

Comments
 (0)