fix: ui input UI

amanbairagi30 · amanbairagi30 · commit 713069af9cfb · 2025-06-17T14:32:56.000+05:30
diff --git a/src/app/(app)/ask/layout.tsx b/src/app/(app)/ask/layout.tsx
@@ -18,7 +18,7 @@ export default function ChatLayout({
     <>
       <UIStructure />
       <SidebarInset className="!h-svh p-2">
-        <div className="bg-muted/80 relative h-full max-h-svh w-full overflow-hidden rounded-xl p-4">
+        <div className="bg-muted/80 relative h-full max-h-svh w-full rounded-xl p-4">
           <div className="absolute top-0 left-0 flex h-12 w-full items-center justify-between px-3">
             <SidebarToggle />
             <div className="flex items-center gap-2">
@@ -31,7 +31,7 @@ export default function ChatLayout({
               <SelectTheme />
             </div>
           </div>
-          <div className="mx-auto flex h-full w-full max-w-3xl flex-col">
+          <div className="mx-auto flex max-h-fit w-full max-w-3xl overflow-y-hidden">
             {children}
           </div>
         </div>
diff --git a/src/app/(app)/ask/page.tsx b/src/app/(app)/ask/page.tsx
@@ -14,20 +14,24 @@ const AskPage = () => {
   }, []);
   return (
     <div className="flex w-full max-w-screen flex-col items-center justify-center gap-4">
-      <div className="flex flex-col items-center gap-4">
-        {!token && <div className="w-full h-screen flex items-center justify-center"><Turnstile
-          sitekey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY!}
-          onVerify={(token) => {
-            setToken(token);
-            localStorage.setItem("turnstileToken", token);
-            toast.success("Verification successful", {
-              description: "You can now ask a question",
-            });
-          }}
-          theme="light"
-          size="normal"
-          className="mb-4"
-        /></div>} 
+      <div className="flex w-full flex-col items-center gap-4">
+        {!token && (
+          <div className="flex h-screen w-full items-center justify-center">
+            <Turnstile
+              sitekey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY!}
+              onVerify={(token) => {
+                setToken(token);
+                localStorage.setItem("turnstileToken", token);
+                toast.success("Verification successful", {
+                  description: "You can now ask a question",
+                });
+              }}
+              theme="light"
+              size="normal"
+              className="mb-4"
+            />
+          </div>
+        )}
         {token && <UIInput />}
       </div>
     </div>
diff --git a/src/app/_components/Chat.tsx b/src/app/_components/Chat.tsx
@@ -58,14 +58,12 @@ const Chat = () => {
     scrollToBottom();
   }, [messages]);
 
-
   const saveChat = api.chat.createChat.useMutation({
     onError: (error) => {
       console.error("Error saving chat:", error);
     },
   });
 
-
   const processStream = async (response: Response, userMessage: string) => {
     if (!response.ok) {
       console.error("Error from API:", response.statusText);
@@ -208,7 +206,6 @@ const Chat = () => {
     }
   };
 
-
   useEffect(() => {
     const query = localStorage.getItem("chatQuery");
     if (query) {
@@ -218,9 +215,8 @@ const Chat = () => {
   }, []);
 
   return (
-    <div className="h-full">
-      <div className="relative flex h-full w-full flex-col">
-
+    <div className="h-[96vh] w-full">
+      <div className="relative flex h-full w-full flex-col border">
         <div className="flex flex-1 flex-col overflow-y-auto px-4 pb-40 md:px-8 lg:px-16">
           <div className="mx-auto w-full max-w-4xl py-4">
             {messages.length === 0 ? (
@@ -232,11 +228,7 @@ const Chat = () => {
                 {messages.map((message) => (
                   <div
                     key={message.id}
-                    className={`mb-4 flex flex-col gap-2 rounded-lg p-4 ${
-                      message.role === "user"
-                        ? "bg-primary/10 w-full self-end md:w-5/6 lg:w-3/4"
-                        : "bg-muted w-full self-start md:w-5/6 lg:w-3/4"
-                    }`}
+                    className={`mb-8 flex w-fit flex-col gap-2`}
                   >
                     <div className="font-medium">
                       {message.role === "user" ? "You" : "AI"}
diff --git a/src/components/ui/ui-input.tsx b/src/components/ui/ui-input.tsx
@@ -7,7 +7,9 @@ import { Badge } from "@/components/ui/badge";
 import {
   ChatCircleDotsIcon,
   MicrophoneIcon,
+  RobotIcon,
   SpinnerGapIcon,
+  UserIcon,
 } from "@phosphor-icons/react";
 import {
   Select,
@@ -104,7 +106,7 @@ const UIInput = () => {
               msg.id === tempMessageId ? { ...msg, content } : msg,
             ),
           );
-        }, 50); 
+        }, 50);
       };
 
       while (true) {
@@ -242,10 +244,10 @@ const UIInput = () => {
   const { selectedFont } = useFont();
 
   return (
-    <div className="flex h-screen max-h-svh w-full">
+    <div className="flex h-[96vh] w-full overflow-hidden">
       <div className="relative flex h-full w-full flex-col">
         {showWelcome && messages.length === 0 ? (
-          <div className="mt-20 flex w-full flex-col">
+          <div className="flex h-full w-full flex-col">
             <div className="flex h-full w-full flex-col items-center justify-center">
               <div className="drop-shadow-primary/60 bg-primary relative mb-6 size-[4.5rem] overflow-hidden rounded-xl drop-shadow-2xl">
                 <div className="bg-foreground absolute top-1/2 left-1/2 flex size-12 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full">
@@ -263,21 +265,38 @@ const UIInput = () => {
             </div>
           </div>
         ) : (
-          <div className="flex flex-1 flex-col gap-4 overflow-y-auto px-4 py-4 pb-40 md:px-8 lg:px-16">
-            <div className="mx-auto w-full max-w-4xl">
+          <div className="mt-6 flex h-full w-full flex-1 flex-col gap-4 overflow-y-auto px-4 py-4 md:px-8">
+            <div className="mx-auto h-full w-full max-w-4xl">
               {messages.map((message) => (
                 <div
                   key={message.id}
-                  className={`mb-4 flex flex-col gap-2 rounded-lg p-4 ${
-                    message.role === "user"
-                      ? "bg-primary/10 w-full self-end md:w-5/6 lg:w-3/4"
-                      : "bg-muted w-full self-start md:w-5/6 lg:w-3/4"
-                  }`}
+                  className={`mb-8 flex w-fit flex-col gap-2`}
                 >
                   <div className="font-medium">
-                    {message.role === "user" ? "You" : "AI"}
+                    {message.role === "user" ? (
+                      <div className="flex w-fit items-center gap-2 text-base font-semibold">
+                        <div className="bg-accent flex size-6 items-center justify-center rounded-md">
+                          <UserIcon weight="bold" />
+                        </div>
+                        <div>You</div>
+                      </div>
+                    ) : (
+                      <div className="flex w-fit items-center gap-2 text-base font-semibold">
+                        <div className="bg-accent flex size-6 items-center justify-center rounded-md">
+                          <RobotIcon weight="bold" />
+                        </div>
+                        <div>AI</div>
+                      </div>
+                    )}
                   </div>
-                  <div className="prose dark:prose-invert max-w-none">
+                  <div
+                    className={cn(
+                      "prose dark:prose-invert max-w-none rounded-lg border px-4 py-2",
+                      message.role === "user"
+                        ? "bg-primary w-fit max-w-full font-bold"
+                        : "bg-muted w-full",
+                    )}
+                  >
                     <ReactMarkdown
                       remarkPlugins={[remarkGfm]}
                       components={{
@@ -385,12 +404,12 @@ const UIInput = () => {
             </div>
           </div>
         )}
-      
-        <div className="bg-muted border-border/20 absolute bottom-0 w-full border-t p-2">
+
+        <div className="bg-muted border-border/20 w-full rounded-2xl border-t p-2">
           <div className="mx-auto w-full max-w-4xl">
             <form
               onSubmit={handleCreateChat}
-              className="bg-accent/30 flex w-full flex-col rounded-xl p-3 pb-6"
+              className="bg-accent/30 flex w-full flex-col rounded-xl p-3 pb-3"
             >
               <Textarea
                 value={query}
