From 40c7168920e6663ed2e0b12d9bbbad58918ed5cd Mon Sep 17 00:00:00 2001 From: Dragos Campean Date: Sat, 30 Dec 2023 17:17:24 +0200 Subject: [PATCH 1/2] [AutoGen Studio] Allow multiline strings in chat input --- .../components/views/playground/chatbox.tsx | 106 ++++++++++-------- 1 file changed, 58 insertions(+), 48 deletions(-) diff --git a/samples/apps/autogen-studio/frontend/src/components/views/playground/chatbox.tsx b/samples/apps/autogen-studio/frontend/src/components/views/playground/chatbox.tsx index 06d30a7b950a..82fd6aba35e6 100644 --- a/samples/apps/autogen-studio/frontend/src/components/views/playground/chatbox.tsx +++ b/samples/apps/autogen-studio/frontend/src/components/views/playground/chatbox.tsx @@ -29,7 +29,7 @@ const ChatBox = ({ editable?: boolean; }) => { const session: IChatSession | null = useConfigStore((state) => state.session); - const queryInputRef = React.useRef(null); + const textAreaInputRef = React.useRef(null); const messageBoxInputRef = React.useRef(null); const { user } = React.useContext(appContext); @@ -37,6 +37,7 @@ const ChatBox = ({ const deleteMsgUrl = `${serverUrl}/messages/delete`; const [loading, setLoading] = React.useState(false); + const [text, setText] = React.useState(''); const [error, setError] = React.useState({ status: true, message: "All good", @@ -51,7 +52,7 @@ const ChatBox = ({ let pageHeight, chatMaxHeight; if (typeof window !== "undefined") { pageHeight = window.innerHeight; - chatMaxHeight = pageHeight - 300 + "px"; + chatMaxHeight = pageHeight - 350 + "px"; } const parseMessages = (messages: any) => { @@ -265,28 +266,26 @@ const ChatBox = ({ }, 200); }, [messages]); + const textAreaDefaultHeight = '50px' // clear text box if loading has just changed to false and there is no error React.useEffect(() => { - if (loading === false && queryInputRef.current) { - if (queryInputRef.current) { - // console.log("loading changed", loading, error); + if (loading === false && textAreaInputRef.current) { + if (textAreaInputRef.current) { if (error === null || (error && error.status === false)) { - queryInputRef.current.value = ""; + textAreaInputRef.current.value = ""; + textAreaInputRef.current.style.height = textAreaDefaultHeight; } } } }, [loading]); - // scroll to queryInputRef on load React.useEffect(() => { - // console.log("scrolling to query input"); - // if (queryInputRef.current) { - // queryInputRef.current.scrollIntoView({ - // behavior: "smooth", - // block: "center", - // }); - // } - }, []); + if (textAreaInputRef.current) { + textAreaInputRef.current.style.height = textAreaDefaultHeight; // Reset height to shrink if text is deleted + const scrollHeight = textAreaInputRef.current.scrollHeight; + textAreaInputRef.current.style.height = `${scrollHeight}px`; + } + }, [text]); const chatHistory = (messages: IChatMessage[] | null) => { let history = ""; @@ -378,6 +377,19 @@ const ChatBox = ({ }); }; + const handleTextChange = (event: React.ChangeEvent): void => { + setText(event.target.value); + }; + + const handleKeyDown = (event: React.KeyboardEvent): void => { + if (event.key === "Enter" && !event.shiftKey) { + if (textAreaInputRef.current && !loading) { + event.preventDefault(); + getCompletion(textAreaInputRef.current.value); + } + } + }; + return (
{/* */}
{ e.preventDefault(); - // if (queryInputRef.current && !loading) { - // getCompletion(queryInputRef.current?.value); - // } }} > - { - if (e.key === "Enter" && queryInputRef.current && !loading) { - getCompletion(queryInputRef.current?.value); + onKeyDown={handleKeyDown} + onChange={handleTextChange} + placeholder="Write message here..." + ref={textAreaInputRef} + className="flex items-center w-full resize-none text-gray-600 bg-white p-2 ring-2 rounded-sm pl-5 pr-16" + style={{ maxHeight: '120px', overflowY: 'auto' }} + /> +
{ + if (textAreaInputRef.current && !loading) { + getCompletion(textAreaInputRef.current.value) } }} - ref={queryInputRef} - className="w-full text-gray-600 bg-white p-2 ring-2 rounded-sm" - /> + className="absolute right-3 bottom-2 bg-accent hover:brightness-75 transition duration-300 rounded cursor-pointer flex justify-center items-center" + > + {" "} + {!loading && ( +
+ {" "} +
+ )} + {loading && ( +
+ +
+ )} +
-
{ - if (queryInputRef.current && !loading) { - getCompletion(queryInputRef.current?.value); - } - }} - className="bg-accent hover:brightness-75 transition duration-300 rounded pt-2 px-5 " - > - {" "} - {!loading && ( -
- {" "} -
- )} - {loading && ( -
- -
- )} -
{" "}
From f2d622d5f69db6d2cf0cf013fc202b7327525455 Mon Sep 17 00:00:00 2001 From: Victor Dibia Date: Mon, 1 Jan 2024 09:50:13 -0800 Subject: [PATCH 2/2] make cogicon spin/animate during loading. minor fix to header issue. --- .../frontend/src/components/header.tsx | 2 +- .../components/views/playground/chatbox.tsx | 24 +++++++++++-------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/samples/apps/autogen-studio/frontend/src/components/header.tsx b/samples/apps/autogen-studio/frontend/src/components/header.tsx index 9503f8d13014..dc9ae916fbc6 100644 --- a/samples/apps/autogen-studio/frontend/src/components/header.tsx +++ b/samples/apps/autogen-studio/frontend/src/components/header.tsx @@ -95,7 +95,7 @@ const Header = ({ meta, link }: any) => { return (
({ status: true, message: "All good", @@ -266,7 +266,7 @@ const ChatBox = ({ }, 200); }, [messages]); - const textAreaDefaultHeight = '50px' + const textAreaDefaultHeight = "50px"; // clear text box if loading has just changed to false and there is no error React.useEffect(() => { if (loading === false && textAreaInputRef.current) { @@ -377,11 +377,15 @@ const ChatBox = ({ }); }; - const handleTextChange = (event: React.ChangeEvent): void => { + const handleTextChange = ( + event: React.ChangeEvent + ): void => { setText(event.target.value); }; - const handleKeyDown = (event: React.KeyboardEvent): void => { + const handleKeyDown = ( + event: React.KeyboardEvent + ): void => { if (event.key === "Enter" && !event.shiftKey) { if (textAreaInputRef.current && !loading) { event.preventDefault(); @@ -447,28 +451,28 @@ const ChatBox = ({ placeholder="Write message here..." ref={textAreaInputRef} className="flex items-center w-full resize-none text-gray-600 bg-white p-2 ring-2 rounded-sm pl-5 pr-16" - style={{ maxHeight: '120px', overflowY: 'auto' }} + style={{ maxHeight: "120px", overflowY: "auto" }} />
{ if (textAreaInputRef.current && !loading) { - getCompletion(textAreaInputRef.current.value) + getCompletion(textAreaInputRef.current.value); } }} className="absolute right-3 bottom-2 bg-accent hover:brightness-75 transition duration-300 rounded cursor-pointer flex justify-center items-center" > {" "} {!loading && ( -
- {" "} +
+ {" "}
)} {loading && (
- +
)}