Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[AutoGen Studio] Allow multiline strings in chat input #1105

Merged
merged 4 commits into from
Jan 3, 2024
Merged

[AutoGen Studio] Allow multiline strings in chat input #1105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
40c7168
[AutoGen Studio] Allow multiline strings in chat input
dragosMC91 Dec 30, 2023
f2d622d
make cogicon spin/animate during loading. minor fix to header issue.
victordibia Jan 1, 2024
e871545
Merge remote-tracking branch 'origin' into studio-accept-multiline-st…
victordibia Jan 1, 2024
43aaca9
Merge branch 'main' into studio-accept-multiline-string-in-input
dragosMC91 Jan 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion samples/apps/autogen-studio/frontend/src/components/header.tsx
View file
Open in desktop
victordibia marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const Header = ({ meta, link }: any) => {
return (
<div
key={index + "linkrow"}
className={`text-primary items-center hover:text-accent hover:bg-secondary px-1 pt-1 block text-sm font-medium `}
className={`text-primary items-center hover:text-accent px-1 pt-1 block text-sm font-medium `}
>
<Link
className="hover:text-accent h-full flex flex-col"
Expand Down
110 changes: 62 additions & 48 deletions samples/apps/autogen-studio/frontend/src/components/views/playground/chatbox.tsx
View file
Open in desktop
victordibia marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,15 @@ const ChatBox = ({
editable?: boolean;
}) => {
const session: IChatSession | null = useConfigStore((state) => state.session);
const queryInputRef = React.useRef<HTMLInputElement>(null);
const textAreaInputRef = React.useRef<HTMLTextAreaElement>(null);
const messageBoxInputRef = React.useRef<HTMLDivElement>(null);
const { user } = React.useContext(appContext);

const serverUrl = getServerUrl();
const deleteMsgUrl = `${serverUrl}/messages/delete`;

const [loading, setLoading] = React.useState(false);
const [text, setText] = React.useState("");
const [error, setError] = React.useState<IStatus | null>({
status: true,
message: "All good",
Expand All @@ -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) => {
Expand Down Expand Up @@ -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 = "";
Expand Down Expand Up @@ -378,6 +377,23 @@ const ChatBox = ({
});
};

const handleTextChange = (
event: React.ChangeEvent<HTMLTextAreaElement>
): void => {
setText(event.target.value);
};

const handleKeyDown = (
event: React.KeyboardEvent<HTMLTextAreaElement>
): void => {
if (event.key === "Enter" && !event.shiftKey) {
if (textAreaInputRef.current && !loading) {
event.preventDefault();
getCompletion(textAreaInputRef.current.value);
}
}
};

return (
<div className="text-primary relative h-full rounded ">
<div
Expand Down Expand Up @@ -414,55 +430,53 @@ const ChatBox = ({
{editable && (
<div className="mt-2 p-2 absolute bg-primary bottom-0 w-full">
<div
className={`mt-2 rounded p-2 shadow-lg flex mb-1 gap-2 ${
className={`rounded p-2 shadow-lg flex mb-1 gap-2 ${
loading ? " opacity-50 pointer-events-none" : ""
}`}
>
{/* <input className="flex-1 p-2 ring-2" /> */}
<form
autoComplete="on"
className="flex-1 "
className="flex-1 relative"
onSubmit={(e) => {
e.preventDefault();
// if (queryInputRef.current && !loading) {
// getCompletion(queryInputRef.current?.value);
// }
}}
>
<input
<textarea
id="queryInput"
name="queryInput"
autoComplete="on"
onKeyDown={(e) => {
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" }}
/>
<div
role={"button"}
style={{ width: "45px", height: "35px" }}
title="Send message"
onClick={() => {
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 && (
<div className="inline-block ">
<PaperAirplaneIcon className="h-6 w-6 text-white " />{" "}
</div>
)}
{loading && (
<div className="inline-block ">
<Cog6ToothIcon className="text-white animate-spin rounded-full h-6 w-6" />
</div>
)}
</div>
</form>
<div
role={"button"}
onClick={() => {
if (queryInputRef.current && !loading) {
getCompletion(queryInputRef.current?.value);
}
}}
className="bg-accent hover:brightness-75 transition duration-300 rounded pt-2 px-5 "
>
{" "}
{!loading && (
<div className="inline-block ">
<PaperAirplaneIcon className="h-6 text-white inline-block" />{" "}
</div>
)}
{loading && (
<div className="inline-block ">
<Cog6ToothIcon className="relative -pb-2 text-white animate-spin inline-flex rounded-full h-6 w-6" />
</div>
)}
</div>
</div>{" "}
<div>
<div className="mt-2 text-xs text-secondary">
Expand Down
Loading