advance

components/AssistantDrawer.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { FormEvent, useEffect, useMemo, useState } from "react";
+import { SubmitEvent, useEffect, useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter } from "@/components/ui/sheet";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 type AssistantMessage = {
   id: string;
@@ -25,6 +30,14 @@ export default function AssistantDrawer({ mode = "global" }: AssistantDrawerProp
   ]);
   const [input, setInput] = useState("");
 
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages]);
+
   useEffect(() => {
     if (mode === "page") {
       return;
@@ -35,17 +48,7 @@ export default function AssistantDrawer({ mode = "global" }: AssistantDrawerProp
     return () => window.removeEventListener(ASSISTANT_TOGGLE_EVENT, onToggle);
   }, [mode]);
 
-  const panelClasses = useMemo(() => {
-    if (mode === "page") {
-      return "mx-auto flex h-[70vh] max-w-3xl flex-col rounded-2xl border border-slate-300 bg-white shadow-xl";
-    }
-
-    return `fixed right-0 top-0 z-50 h-screen w-full max-w-md border-l border-slate-300 bg-white shadow-2xl transition-transform ${
-      isOpen ? "translate-x-0" : "translate-x-full"
-    }`;
-  }, [isOpen, mode]);
-
-  const send = (event: FormEvent) => {
+  const send = (event: SubmitEvent) => {
     event.preventDefault();
     const trimmed = input.trim();
     if (!trimmed) return;
@@ -59,57 +62,65 @@ export default function AssistantDrawer({ mode = "global" }: AssistantDrawerProp
     setInput("");
   };
 
-  if (mode === "global" && !isOpen) {
+  const ChatContent = (
+    <div className="flex h-full flex-col">
+      <ScrollArea className="flex-1 p-4">
+        <div className="space-y-4">
+          {messages.map((message) => (
+            <div
+              key={message.id}
+              className={`max-w-[90%] rounded-lg px-3 py-2 text-sm ${message.role === "user"
+                ? "ml-auto bg-primary text-primary-foreground"
+                : "mr-auto border border-border bg-muted text-foreground"
+                }`}
+            >
+              {message.content}
+            </div>
+          ))}
+          <div ref={scrollRef} />
+        </div>
+      </ScrollArea>
+
+      <SheetFooter className="mt-auto border-t bg-background p-4 sm:flex-col">
+        <form className="w-full" onSubmit={send}>
+          <div className="flex gap-2">
+            <Input
+              className="flex-1"
+              onChange={(event) => setInput(event.target.value)}
+              placeholder="Type your message..."
+              value={input}
+            />
+            <Button type="submit">Send</Button>
+          </div>
+        </form>
+      </SheetFooter>
+    </div>
+  );
+
+  if (mode === "page") {
     return (
-      <aside className={panelClasses}>
-        <div />
-      </aside>
+      <Card className="mx-auto flex h-[68vh] max-w-4xl flex-col shadow-xl">
+        <CardHeader className="border-b px-4 py-3">
+          <CardTitle className="text-2xl text-primary font-serif">AI Assistant</CardTitle>
+        </CardHeader>
+        <CardContent className="flex-1 p-0 overflow-hidden">
+          {ChatContent}
+        </CardContent>
+      </Card>
     );
   }
 
   return (
-    <aside className={panelClasses}>
-      <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
-        <h2 className="acve-heading text-2xl">AI Assistant</h2>
-        {mode === "global" ? (
-          <button
-            className="rounded-md border border-slate-300 px-2 py-1 text-sm text-slate-600 hover:bg-slate-50"
-            onClick={() => setIsOpen(false)}
-            type="button"
-          >
-            Close
-          </button>
-        ) : null}
-      </div>
-
-      <div className="flex-1 space-y-3 overflow-y-auto p-4">
-        {messages.map((message) => (
-          <div
-            key={message.id}
-            className={`max-w-[90%] rounded-lg px-3 py-2 text-sm ${
-              message.role === "user"
-                ? "ml-auto bg-brand text-white"
-                : "mr-auto border border-slate-200 bg-slate-50 text-slate-800"
-            }`}
-          >
-            {message.content}
-          </div>
-        ))}
-      </div>
-
-      <form className="border-t border-slate-200 p-3" onSubmit={send}>
-        <div className="flex gap-2">
-          <input
-            className="flex-1 rounded-md border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand"
-            onChange={(event) => setInput(event.target.value)}
-            placeholder="Type your message..."
-            value={input}
-          />
-          <button className="rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
-            Send
-          </button>
+    <Sheet open={isOpen} onOpenChange={setIsOpen}>
+      <SheetContent className="flex w-full flex-col p-0 sm:max-w-md">
+        <SheetHeader className="px-4 py-3 border-b">
+          <SheetTitle className="text-primary font-serif">AI Assistant</SheetTitle>
+          <SheetDescription className="sr-only">Chat with our AI assistant</SheetDescription>
+        </SheetHeader>
+        <div className="flex-1 overflow-hidden">
+          {ChatContent}
         </div>
-      </form>
-    </aside>
+      </SheetContent>
+    </Sheet>
   );
 }