Skip to content

Commit

Permalink
Bot playground form UI updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@n4ze3m
n4ze3m committed Nov 18, 2023
1 parent 3d6d504 commit 53c3919
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 46 deletions.
1 change: 1 addition & 0 deletions app/ui/src/Layout/BotPlaygroundLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@ export default function BotPlaygroundLayout({
</div>
</div>
{children}

</div>
</div>
</>
Expand Down
79 changes: 35 additions & 44 deletions app/ui/src/components/Bot/Playground/Form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,8 @@ export const PlaygroundgForm = () => {

const textareaRef = React.useRef<HTMLTextAreaElement>(null);
React.useEffect(() => {
const textarea = textareaRef.current;
if (textarea) {
const increaseHeight = () => {
textarea.style.height = "auto";
textarea.style.height = `${Math.min(textarea.scrollHeight, 300)}px`;
};
increaseHeight();
textarea.addEventListener("input", increaseHeight);
return () => textarea.removeEventListener("input", increaseHeight);
if (textareaRef.current) {
textareaRef.current.focus();
}
}, []);

Expand All @@ -106,8 +99,8 @@ export const PlaygroundgForm = () => {
};

return (
<div className="p-3 ">
<div className="flex-grow space-y-6">
<div className="p-3 md:p-6 md:bg-white md:border md:rounded-t-xl">
<div className="flex-grow space-y-6 ">
<div className="flex">
<form
onSubmit={form.onSubmit(async (value) => {
Expand All @@ -117,34 +110,34 @@ export const PlaygroundgForm = () => {
})}
className="shrink-0 flex-grow flex items-center "
>
<div className="flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-gray-700 rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]">
<div className="relative flex max-h-40 w-full grow flex-col overflow-hidden bg-background px-8 rounded-md border sm:px-12 items-center">
<textarea
// style={{ height: "48px !important" }}
disabled={isSending}
// disabled={isSendinhg}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
if (e.key === "Enter" && !e.shiftKey && !isSending) {
e.preventDefault();
form.onSubmit(async (value) => {
form.reset();
resetHeight();
await sendMessage(value.message);
// reset the height of the textarea
})();
}
}}
ref={textareaRef}
rows={1}
className={`m-0 w-full resize-none border-0 bg-transparent p-0 pr-7 focus:ring-0 focus-visible:ring-0 dark:bg-transparent pl-2 md:pl-0 ${
className={`min-h-[40px] w-full resize-none border-0 bg-transparent py-[1rem] m-0 focus:ring-0 focus-visible:ring-0 dark:bg-transparent pr-2 md:pr-0 ${
listening && "placeholder:italic"
}`}
// className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm focus:ring-0 focus-visible:ring-0 dark:bg-transparent "
required
rows={1}
tabIndex={0}
placeholder={
!listening ? "Type your message…" : "Listening......"
}
{...form.getInputProps("message")}
/>
{!hideListening && (
<div className="absolute flex items-center bottom-0.5 right-0.5">
<div className="absolute right-0 top-4 sm:right-4">
<button
disabled={isSending}
onClick={() => {
Expand All @@ -157,47 +150,45 @@ export const PlaygroundgForm = () => {
}
}}
type="button"
className={`absolute p-1 rounded-md bottom-1.5 md:bottom-2 bg-transparent disabled:bg-gray-500 right-1 md:right-2 disabled:opacity-40 ${
// add mic animation with rings when listening
className={`p-0 mr-2 text-gray-500 ${
listening &&
"animate-pulse ring-2 ring-blue-500 rounded-full ring-opacity-50"
}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-6 w-6 m-1 md:m-0"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="h-6 w-6"
viewBox="0 0 24 24"
>
<path d="M12 2a3 3 0 00-3 3v7a3 3 0 006 0V5a3 3 0 00-3-3z"></path>
<path d="M19 10v2a7 7 0 01-14 0v-2"></path>
<path d="M12 19L12 22"></path>
</svg>
</button>
</div>
)}
</div>
<button
disabled={isSending}
className="p-1 ml-3 rounded-md bg-transparent disabled:bg-gray-500 disabled:opacity-40"
className="ml-6 rounded-md bg-black p-3 text-white disabled:opacity-40"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-6 w-6 m-1 md:m-0"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="h-4 w-4"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
/>
<path d="M9 10L4 15 9 20"></path>
<path d="M20 4v7a4 4 0 01-4 4H4"></path>
</svg>
</button>
</form>
Expand Down
4 changes: 2 additions & 2 deletions app/ui/src/components/Bot/Playground/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ export const PlaygroundBody = () => {
<PlaygroundChat />
</div>
<div className="md:ml-[100px]">
<div className=" bottom-0 w-full fixed border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-gray-800 md:!bg-transparent dark:md:bg-vert-dark-gradient pt-2">
<div className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
<div className="bottom-0 w-full md:!bg-transparent md:!border-0 fixed border-t bg-white pt-2">
<div className="stretch mx-2 flex flex-row gap-3 md:mx-4 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
<div className="relative flex flex-col h-full flex-1 items-stretch md:flex-col">
<PlaygroundgForm />
</div>
Expand Down

0 comments on commit 53c3919

Please sign in to comment.