From 26176a30a78dec1881e0c99cfbbceafcc56e7523 Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <ryan@acorn.io>
Date: Mon, 16 Dec 2024 13:31:42 -0600
Subject: [PATCH] feat: update chat bar to encapsulate thread actions and
 submit button

---
 ui/admin/app/components/chat/Chat.tsx        |  7 +-
 ui/admin/app/components/chat/ChatHelpers.tsx |  8 +-
 ui/admin/app/components/chat/Chatbar.tsx     | 32 ++++---
 ui/admin/app/components/ui/button.tsx        |  4 +-
 ui/admin/app/components/ui/textarea.tsx      | 92 ++++++++++++++++++--
 5 files changed, 112 insertions(+), 31 deletions(-)

diff --git a/ui/admin/app/components/chat/Chat.tsx b/ui/admin/app/components/chat/Chat.tsx
index 27a2810e6..8968f0963 100644
--- a/ui/admin/app/components/chat/Chat.tsx
+++ b/ui/admin/app/components/chat/Chat.tsx
@@ -3,7 +3,6 @@ import { useState } from "react";
 import { cn } from "~/lib/utils";
 
 import { useChat } from "~/components/chat/ChatContext";
-import { ChatHelpers } from "~/components/chat/ChatHelpers";
 import { Chatbar } from "~/components/chat/Chatbar";
 import { MessagePane } from "~/components/chat/MessagePane";
 import { RunWorkflow } from "~/components/chat/RunWorkflow";
@@ -56,9 +55,7 @@ export function Chat({ className }: ChatProps) {
                             setRunTriggered(true);
                             invoke(params && JSON.stringify(params));
                         }}
-                        className={cn({
-                            "w-full": threadId,
-                        })}
+                        className={cn({ "w-full": threadId })}
                         popoverContentProps={{
                             className: cn({ "translate-y-[-50%]": !threadId }),
                         }}
@@ -69,8 +66,6 @@ export function Chat({ className }: ChatProps) {
                     </RunWorkflow>
                 </div>
             )}
-
-            <ChatHelpers />
         </div>
     );
 }
diff --git a/ui/admin/app/components/chat/ChatHelpers.tsx b/ui/admin/app/components/chat/ChatHelpers.tsx
index 1c596f44c..1465c4272 100644
--- a/ui/admin/app/components/chat/ChatHelpers.tsx
+++ b/ui/admin/app/components/chat/ChatHelpers.tsx
@@ -19,7 +19,7 @@ import {
 } from "~/components/ui/popover";
 import { Switch } from "~/components/ui/switch";
 
-export function ChatHelpers() {
+export function ChatHelpers({ className }: { className?: string }) {
     const { threadId } = useChat();
 
     const { data: thread } = useSWR(
@@ -42,7 +42,7 @@ export function ChatHelpers() {
     console.log(knowledge);
 
     return (
-        <div className="w-full flex items-center px-20 py-2">
+        <div className={cn("w-full flex items-center", className)}>
             <div className="flex items-center gap-2">
                 <ToolsInfo
                     tools={tools ?? []}
@@ -100,7 +100,7 @@ function ToolsInfo({
             <PopoverTrigger asChild>
                 <Button
                     size="sm"
-                    variant="secondary"
+                    variant="outline"
                     className={cn("gap-2", className)}
                     startContent={<WrenchIcon />}
                     disabled={disabled}
@@ -161,7 +161,7 @@ function KnowledgeInfo({
             <PopoverTrigger asChild>
                 <Button
                     size="sm"
-                    variant="secondary"
+                    variant="outline"
                     className={cn("gap-2", className)}
                     startContent={<LibraryIcon />}
                     disabled={disabled}
diff --git a/ui/admin/app/components/chat/Chatbar.tsx b/ui/admin/app/components/chat/Chatbar.tsx
index 38eb61e5b..3c353b276 100644
--- a/ui/admin/app/components/chat/Chatbar.tsx
+++ b/ui/admin/app/components/chat/Chatbar.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { cn } from "~/lib/utils";
 
 import { useChat } from "~/components/chat/ChatContext";
+import { ChatHelpers } from "~/components/chat/ChatHelpers";
 import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
 import { Button } from "~/components/ui/button";
 import { AutosizeTextarea } from "~/components/ui/textarea";
@@ -34,7 +35,8 @@ export function Chatbar({ className }: ChatbarProps) {
         >
             <div className="relative flex-grow">
                 <AutosizeTextarea
-                    className="rounded-xl bg-background"
+                    className="rounded-xl"
+                    variant="flat"
                     value={input}
                     onKeyDown={(e) => {
                         if (e.key === "Enter" && !e.shiftKey) {
@@ -46,17 +48,27 @@ export function Chatbar({ className }: ChatbarProps) {
                     minHeight={0}
                     onChange={(e) => setInput(e.target.value)}
                     placeholder="Type your message..."
+                    bottomContent={
+                        <div className="flex flex-row-reverse items-center justify-between">
+                            <Button
+                                size="icon"
+                                className="m-2"
+                                color="primary"
+                                type="submit"
+                                disabled={!input || isRunning || isInvoking}
+                            >
+                                {isInvoking ? (
+                                    <LoadingSpinner />
+                                ) : (
+                                    <ArrowUpIcon />
+                                )}
+                            </Button>
+
+                            <ChatHelpers className="p-2" />
+                        </div>
+                    }
                 />
             </div>
-
-            <Button
-                size="icon"
-                className="rounded-full"
-                type="submit"
-                disabled={!input || isRunning || isInvoking}
-            >
-                {isInvoking ? <LoadingSpinner /> : <ArrowUpIcon />}
-            </Button>
         </form>
     );
 }
diff --git a/ui/admin/app/components/ui/button.tsx b/ui/admin/app/components/ui/button.tsx
index 5d8b1354d..6082330dc 100644
--- a/ui/admin/app/components/ui/button.tsx
+++ b/ui/admin/app/components/ui/button.tsx
@@ -11,11 +11,11 @@ const buttonVariants = cva(
         variants: {
             variant: {
                 default:
-                    "bg-primary text-primary-foreground shadow hover:bg-primary/80",
+                    "bg-primary text-primary-foreground shadow hover:bg-primary/80 focus-visible:ring-foreground",
                 destructive:
                     "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
                 outline:
-                    "border border-input bg-background shadow-sm hover:bg-muted/80",
+                    "border border-input bg-transparent shadow-sm hover:bg-muted/80",
                 secondary:
                     "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
                 ghost: "hover:bg-secondary hover:text-secondary-foreground",
diff --git a/ui/admin/app/components/ui/textarea.tsx b/ui/admin/app/components/ui/textarea.tsx
index e6f7eb488..6b35c544a 100644
--- a/ui/admin/app/components/ui/textarea.tsx
+++ b/ui/admin/app/components/ui/textarea.tsx
@@ -1,16 +1,49 @@
+import { VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
-import { useImperativeHandle } from "react";
+import { forwardRef, useImperativeHandle } from "react";
 
 import { cn } from "~/lib/utils";
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+const textareaVariants = cva(
+    "flex w-full rounded-md bg-transparent text-sm placeholder:text-muted-foreground has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-ring group group-disabled:cursor-not-allowed group-disabled:bg-opacity-50",
+    {
+        variants: {
+            variant: {
+                outlined: "border border-input shadow-sm",
+                flat: "border-none shadow-none bg-muted",
+            },
+        },
+        defaultVariants: {
+            variant: "outlined",
+        },
+    }
+);
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-    ({ className, ...props }, ref) => {
+type TextAreaWrapperProps = React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof textareaVariants>;
+const TextAreaWrapper = forwardRef<HTMLDivElement, TextAreaWrapperProps>(
+    ({ className, variant, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={cn(textareaVariants({ variant, className }))}
+                {...props}
+            />
+        );
+    }
+);
+TextAreaWrapper.displayName = "TextAreaWrapper";
+
+type TextAreaBaseProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
+    VariantProps<typeof textareaVariants>;
+
+const TextAreaBase = forwardRef<HTMLTextAreaElement, TextAreaBaseProps>(
+    ({ className, variant, ...props }, ref) => {
         return (
             <textarea
                 className={cn(
-                    "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                    "w-full px-3 py-2 bg-transparent border-none focus-visible:border-none focus-visible:outline-none disabled:group group-disabled:cursor-not-allowed",
+                    variant === "flat" && "placeholder:text-muted-foreground",
                     className
                 )}
                 ref={ref}
@@ -19,6 +52,49 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         );
     }
 );
+TextAreaBase.displayName = "TextAreaBase";
+
+export type TextareaProps = TextAreaBaseProps &
+    VariantProps<typeof textareaVariants> & {
+        resizeable?: boolean;
+        endContent?: React.ReactNode;
+        bottomContent?: React.ReactNode;
+    };
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    (
+        {
+            className,
+            resizeable = false,
+            variant,
+            endContent,
+            bottomContent,
+            ...props
+        },
+        ref
+    ) => {
+        return (
+            <TextAreaWrapper
+                variant={variant}
+                className={cn("flex flex-col", className)}
+            >
+                <div className="w-full flex">
+                    <TextAreaBase
+                        className={cn(
+                            "w-full px-3 py-2 bg-transparent border-none focus-visible:border-none focus-visible:outline-none",
+                            !resizeable && "resize-none"
+                        )}
+                        variant={variant}
+                        ref={ref}
+                        {...props}
+                    />
+                    {endContent}
+                </div>
+                {bottomContent}
+            </TextAreaWrapper>
+        );
+    }
+);
 Textarea.displayName = "Textarea";
 
 // note(ryanhopperlowe): AutosizeTextarea taken from (https://shadcnui-expansions.typeart.cc/docs/autosize-textarea)
@@ -90,10 +166,10 @@ export type AutosizeTextAreaRef = {
     minHeight: number;
 };
 
-export type AutosizeTextAreaProps = {
+export type AutosizeTextAreaProps = TextareaProps & {
     maxHeight?: number;
     minHeight?: number;
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+};
 
 const AutosizeTextarea = React.forwardRef<
     AutosizeTextAreaRef,
@@ -105,7 +181,6 @@ const AutosizeTextarea = React.forwardRef<
             minHeight = 52,
             className,
             onChange,
-            value,
             ...props
         }: AutosizeTextAreaProps,
         ref: React.Ref<AutosizeTextAreaRef>
@@ -139,7 +214,6 @@ const AutosizeTextarea = React.forwardRef<
         return (
             <Textarea
                 {...props}
-                value={value}
                 ref={initRef}
                 className={cn("resize-none", className)}
                 onChange={onChange}