changes in chat ui

package.json

@@ -19,13 +19,18 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@supabase/supabase-js": "^2.47.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "date-fns": "^3.3.1",
     "lucide-react": "^0.344.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
     "react-router-dom": "^6.22.3",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.2.1"
   },
   "devDependencies": {

src/components/chat/Message.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { formatDistanceToNow } from 'date-fns';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Copy, Check, ThumbsUp, ThumbsDown } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/Button';
+import { Avatar, AvatarFallback } from '../ui/Avatar';
+import { Tooltip } from '../ui/Tooltip';
+import type { ChatMessage } from '../../types/supabase';
+
+interface MessageProps {
+  message: ChatMessage;
+  onFeedback?: (messageId: string, isPositive: boolean) => void;
+}
+
+export function Message({ message, onFeedback }: MessageProps) {
+  const [copied, setCopied] = React.useState(false);
+  const [feedback, setFeedback] = React.useState<'positive' | 'negative' | null>(null);
+
+  const handleCopy = async (text: string) => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleFeedback = (isPositive: boolean) => {
+    if (!onFeedback) return;
+    setFeedback(isPositive ? 'positive' : 'negative');
+    onFeedback(message.id, isPositive);
+  };
+
+  return (
+    <div
+      className={cn(
+        'group flex w-full gap-3 px-4',
+        message.role === 'user' ? 'justify-end' : 'justify-start'
+      )}
+    >
+      {message.role === 'assistant' && (
+        <Avatar className="h-8 w-8 border border-border">
+          <AvatarFallback className="bg-gradient-to-br from-indigo-500 to-purple-500 text-white text-xs font-medium">
+            AI
+          </AvatarFallback>
+        </Avatar>
+      )}
+      
+      <div className="flex flex-col gap-2 max-w-3xl">
+        <div
+          className={cn(
+            'relative rounded-lg px-4 py-3 text-sm',
+            message.role === 'user'
+              ? 'bg-primary text-primary-foreground shadow-sm'
+              : 'bg-muted/50 shadow-sm border border-border/50'
+          )}
+        >
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            className={cn(
+              'prose max-w-none',
+              message.role === 'user' ? 'prose-invert' : 'prose-stone dark:prose-invert'
+            )}
+            components={{
+              code({ node, inline, className, children, ...props }) {
+                const match = /language-(\w+)/.exec(className || '');
+                const language = match ? match[1] : '';
+                
+                if (inline) {
+                  return (
+                    <code className="rounded bg-muted-foreground/20 px-1 py-0.5" {...props}>
+                      {children}
+                    </code>
+                  );
+                }
+
+                return (
+                  <div className="relative">
+                    <div className="absolute right-2 top-2 z-10">
+                      <Tooltip content={copied ? 'Copied!' : 'Copy code'}>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-8 w-8 p-0"
+                          onClick={() => handleCopy(String(children))}
+                          asChild={false}
+                        >
+                          {copied ? (
+                            <Check className="h-4 w-4" />
+                          ) : (
+                            <Copy className="h-4 w-4" />
+                          )}
+                        </Button>
+                      </Tooltip>
+                    </div>
+                    <SyntaxHighlighter
+                      language={language}
+                      style={vscDarkPlus}
+                      customStyle={{ margin: 0 }}
+                      PreTag="div"
+                    >
+                      {String(children).replace(/\n$/, '')}
+                    </SyntaxHighlighter>
+                  </div>
+                );
+              },
+            }}
+          >
+            {message.content}
+          </ReactMarkdown>
+        </div>
+        
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <span>{formatDistanceToNow(new Date(message.created_at), { addSuffix: true })}</span>
+          
+          {message.role === 'assistant' && onFeedback && (
+            <div className="flex items-center gap-1">
+              <Tooltip content="Helpful">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={cn(
+                    'h-6 w-6 p-0 hover:bg-background/80',
+                    feedback === 'positive' && 'text-primary'
+                  )}
+                  onClick={() => handleFeedback(true)}
+                  asChild={false}
+                >
+                  <ThumbsUp className="h-3 w-3" />
+                </Button>
+              </Tooltip>
+              <Tooltip content="Not helpful">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={cn(
+                    'h-6 w-6 p-0 hover:bg-background/80',
+                    feedback === 'negative' && 'text-destructive'
+                  )}
+                  onClick={() => handleFeedback(false)}
+                  asChild={false}
+                >
+                  <ThumbsDown className="h-3 w-3" />
+                </Button>
+              </Tooltip>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {message.role === 'user' && (
+        <Avatar className="h-8 w-8 border border-border">
+          <AvatarFallback className="bg-secondary text-secondary-foreground text-xs font-medium">
+            You
+          </AvatarFallback>
+        </Avatar>
+      )}
+    </div>
+  );
+}

src/components/layout/Sidebar/index.tsx

@@ -4,7 +4,6 @@ import {
   Settings,
   MessageSquarePlus,
   Upload,
-  BookOpen,
   History
 } from 'lucide-react';
 import { cn } from '../../../lib/utils';
@@ -25,12 +24,6 @@ const sidebarItems = [
     label: 'Upload Materials',
     path: '/dashboard/upload'
   },
-  {
-    icon: BookOpen,
-    label: 'Study Resources',
-    path: '/dashboard/resources'
-  },
-
   {
     icon: Settings,
     label: 'Settings',

src/components/ui/Avatar.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cn } from '../../lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-8 w-8 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

src/components/ui/Button.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
 
@@ -29,13 +30,23 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
-
-export function Button({ className, variant, size, ...props }: ButtonProps) {
-  return (
-    <button
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
 }
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

src/components/ui/ScrollArea.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from '../../lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-1.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-1.5 border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb 
+      className={cn(
+        'relative rounded-full bg-border/50',
+        'hover:bg-border/80 transition-colors duration-150 ease-out',
+        'active:bg-border/70'
+      )} 
+    />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

src/components/ui/Tooltip.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '../../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipRoot = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+interface TooltipProps {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  delayDuration?: number;
+}
+
+export function Tooltip({ content, children, delayDuration = 0 }: TooltipProps) {
+  return (
+    <TooltipProvider>
+      <TooltipRoot delayDuration={delayDuration}>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent>{content}</TooltipContent>
+      </TooltipRoot>
+    </TooltipProvider>
+  );
+}

src/contexts/AuthContext.tsx

@@ -43,12 +43,46 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     user,
     loading,
     signIn: async (email: string, password: string) => {
-      const { error } = await auth.signIn(email, password);
-      return { error };
+      try {
+        const { data, error } = await auth.signIn(email, password);
+        if (error) {
+          console.error('Sign in error:', error);
+          return { error };
+        }
+        return { error: null };
+      } catch (err) {
+        console.error('Unexpected sign in error:', err);
+        return { 
+          error: new AuthError('Failed to sign in. Please check your credentials and try again.') 
+        };
+      }
     },
     signUp: async (email: string, password: string) => {
-      const { error } = await auth.signUp(email, password);
-      return { error };
+      try {
+        if (!email || !password) {
+          return { 
+            error: new AuthError('Email and password are required.') 
+          };
+        }
+        
+        if (password.length < 6) {
+          return { 
+            error: new AuthError('Password must be at least 6 characters long.') 
+          };
+        }
+
+        const { data, error } = await auth.signUp(email, password);
+        if (error) {
+          console.error('Sign up error:', error);
+          return { error };
+        }
+        return { error: null };
+      } catch (err) {
+        console.error('Unexpected sign up error:', err);
+        return { 
+          error: new AuthError('Failed to create account. Please try again.') 
+        };
+      }
     },
     signOut: async () => {
       const { error } = await auth.signOut();

src/pages/dashboard/Settings.tsx

@@ -7,60 +7,7 @@ function Settings() {
     <div className="space-y-6">
       <h1 className="text-3xl font-bold">Settings</h1>
 
-      <Card className="p-6">
-        <h2 className="text-xl font-semibold">Profile Settings</h2>
-        <div className="mt-4 space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-foreground">
-              Display Name
-            </label>
-            <input
-              type="text"
-              className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
-              placeholder="Your name"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-foreground">
-              Email
-            </label>
-            <input
-              type="email"
-              className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
-              placeholder="your@email.com"
-            />
-          </div>
-        </div>
-      </Card>
-
-      <Card className="p-6">
-        <h2 className="text-xl font-semibold">Notification Settings</h2>
-        <div className="mt-4 space-y-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <h3 className="font-medium">Email Notifications</h3>
-              <p className="text-sm text-muted-foreground">
-                Receive updates about your study progress
-              </p>
-            </div>
-            <Button variant="outline">Configure</Button>
-          </div>
-        </div>
-      </Card>
-
-      <Card className="p-6">
-        <h2 className="text-xl font-semibold">Account Settings</h2>
-        <div className="mt-4 space-y-4">
-          <div>
-            <Button variant="outline" className="text-destructive">
-              Delete Account
-            </Button>
-            <p className="mt-2 text-sm text-muted-foreground">
-              This action cannot be undone.
-            </p>
-          </div>
-        </div>
-      </Card>
+      
     </div>
   );
 }

src/pages/dashboard/ask.tsx

@@ -2,6 +2,9 @@ import React, { useState, useEffect } from 'react';
 import { Send, Loader2, X, History, MessageSquarePlus, AlertCircle } from 'lucide-react';
 import { Link, useParams, useNavigate } from 'react-router-dom';
 import { Button } from '../../components/ui/Button';
+import { ScrollArea } from '../../components/ui/ScrollArea';
+import { Message } from '../../components/chat/Message';
+import { Avatar, AvatarFallback } from '../../components/ui/Avatar';
 import { cn } from '../../lib/utils';
 import { useAuth } from '../../contexts/AuthContext';
 import { chatService } from '../../lib/chat-service';
@@ -171,117 +174,148 @@ export default function AskQuestion() {
 
   return (
     <div className="flex h-full flex-col">
-      <div className="flex items-center justify-between border-b px-4 py-3">
-        <div>
-          <h1 className="text-lg font-semibold">Ask a Question</h1>
-          {chat && (
-            <p className="text-sm text-muted-foreground">
-              {chat.title}
-            </p>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <Button onClick={handleNewChat}>
-            <MessageSquarePlus className="mr-2 h-4 w-4" />
-            New Chat
-          </Button>
-          {chatId && !isNewChat && messages.length > 0 && (
-            <Button variant="ghost" size="sm" onClick={clearChat}>
-              <X className="mr-2 h-4 w-4" />
-              Clear chat
+      <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="flex h-14 items-center justify-between px-4">
+          <div className="flex items-center gap-2">
+            <MessageSquarePlus className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <h1 className="text-sm font-semibold">Ask a Question</h1>
+              {chat && (
+                <p className="text-xs text-muted-foreground line-clamp-1">
+                  {chat.title}
+                </p>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="sm" onClick={handleNewChat}>
+              <MessageSquarePlus className="mr-2 h-4 w-4" />
+              New Chat
             </Button>
-          )}
-          {hasExistingChats && (
-            <Link to="/dashboard/history">
-              <Button variant="ghost" size="sm">
-                <History className="mr-2 h-4 w-4" />
-                History
+            {chatId && !isNewChat && messages.length > 0 && (
+              <Button variant="ghost" size="sm" onClick={clearChat}>
+                <X className="mr-2 h-4 w-4" />
+                Clear chat
               </Button>
-            </Link>
-          )}
+            )}
+            {hasExistingChats && (
+              <Link to="/dashboard/history">
+                <Button variant="ghost" size="sm">
+                  <History className="mr-2 h-4 w-4" />
+                  History
+                </Button>
+              </Link>
+            )}
+          </div>
         </div>
       </div>
 
       {error && (
-        <div className="m-4 flex items-center gap-2 rounded-lg bg-destructive/15 p-3 text-sm text-destructive">
+        <div className="mx-4 mt-4 flex items-center gap-2 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
           <AlertCircle className="h-4 w-4" />
           {error}
         </div>
       )}
 
-      <div className="flex-1 overflow-y-auto p-4 space-y-4">
-        {!isNewChat && !chatId ? (
-          <div className="flex h-full items-center justify-center text-center">
-            <div className="max-w-md space-y-4">
-              <p className="text-lg font-medium">Welcome to StudyAI Chat</p>
-              <p className="text-sm text-muted-foreground">
-                Start a new conversation by clicking the "New Chat" button above
-              </p>
-              <Button onClick={handleNewChat}>
-                <MessageSquarePlus className="mr-2 h-4 w-4" />
-                Start New Chat
-              </Button>
-            </div>
-          </div>
-        ) : messages.length === 0 ? (
-          <div className="flex h-full items-center justify-center text-center">
-            <div className="max-w-md space-y-2">
-              <p className="text-lg font-medium">No messages yet</p>
-              <p className="text-sm text-muted-foreground">
-                Start by asking a question about your studies
-              </p>
-            </div>
-          </div>
-        ) : (
-          <>
-            {messages.map((message) => (
-              <div
-                key={message.id}
-                className={cn(
-                  'flex w-full',
-                  message.role === 'user' ? 'justify-end' : 'justify-start'
-                )}
-              >
-                <div
-                  className={cn(
-                    'max-w-[80%] rounded-lg px-4 py-2',
-                    message.role === 'user'
-                      ? 'bg-primary text-primary-foreground'
-                      : 'bg-muted'
-                  )}
-                >
-                  {message.content}
-                </div>
-              </div>
-            ))}
-            {/* Typing indicator */}
-            {isTyping && (
-              <div className="flex w-full justify-start">
-                <div className="flex max-w-[80%] items-center space-x-2 rounded-lg bg-muted px-4 py-2">
-                  <div className="flex space-x-1">
-                    <span className="animate-bounce delay-0">•</span>
-                    <span className="animate-bounce delay-150">•</span>
-                    <span className="animate-bounce delay-300">•</span>
+      <div className="flex-1 overflow-hidden">
+        <ScrollArea className="h-full">
+          <div className="flex flex-col space-y-6 p-4">
+            {!isNewChat && !chatId ? (
+              <div className="flex h-[calc(100vh-12rem)] flex-col items-center justify-center text-center">
+                <div className="mx-auto flex max-w-md flex-col items-center space-y-4">
+                  <div className="rounded-full bg-primary/10 p-3">
+                    <MessageSquarePlus className="h-6 w-6 text-primary" />
                   </div>
-                  <span className="text-sm text-muted-foreground">AI is thinking...</span>
+                  <div className="space-y-2">
+                    <h2 className="text-lg font-semibold">Welcome to StudyAI Chat</h2>
+                    <p className="text-sm text-muted-foreground">
+                      Start a new conversation to get answers to your questions
+                    </p>
+                  </div>
+                  <Button onClick={handleNewChat}>
+                    <MessageSquarePlus className="mr-2 h-4 w-4" />
+                    Start New Chat
+                  </Button>
                 </div>
               </div>
+            ) : messages.length === 0 ? (
+              <div className="flex h-[calc(100vh-12rem)] flex-col items-center justify-center text-center">
+                <div className="mx-auto flex max-w-md flex-col items-center space-y-4">
+                  <div className="rounded-full bg-primary/10 p-3">
+                    <MessageSquarePlus className="h-6 w-6 text-primary" />
+                  </div>
+                  <div className="space-y-2">
+                    <h2 className="text-lg font-semibold">No messages yet</h2>
+                    <p className="text-sm text-muted-foreground">
+                      Start by asking a question about your studies
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <>
+                {messages.map((message, index) => (
+                  <Message
+                    key={message.id}
+                    message={message}
+                    onFeedback={async (messageId, isPositive) => {
+                      // Implement feedback handling here
+                      console.log('Feedback:', messageId, isPositive);
+                    }}
+                  />
+                ))}
+                {/* Typing indicator */}
+                {isTyping && (
+                  <div className="flex w-full items-start gap-3 px-4">
+                    <Avatar className="h-8 w-8 border border-border">
+                      <AvatarFallback className="bg-gradient-to-br from-indigo-500 to-purple-500 text-white text-xs font-medium">
+                        AI
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="flex max-w-3xl items-center space-x-4 rounded-lg bg-muted/50 px-4 py-3 text-sm shadow-sm border border-border/50">
+                      <div className="flex space-x-2">
+                        <div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:0ms]" />
+                        <div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:150ms]" />
+                        <div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground/50 [animation-delay:300ms]" />
+                      </div>
+                      <span className="text-muted-foreground">AI is thinking...</span>
+                    </div>
+                  </div>
+                )}
+              </>
             )}
-          </>
-        )}
+          </div>
+        </ScrollArea>
       </div>
 
       {(isNewChat || chatId) && (
-        <div className="border-t p-4">
-          <form onSubmit={handleSubmit} className="flex gap-2">
-            <input
-              type="text"
-              value={question}
-              onChange={(e) => setQuestion(e.target.value)}
-              placeholder="Type your question..."
-              className="flex-1 rounded-md border border-input bg-background px-3 py-2"
-              disabled={loading}
-            />
+        <div className="border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4 py-4">
+          <form onSubmit={handleSubmit} className="mx-auto flex max-w-3xl gap-2">
+            <div className="relative flex-1">
+              <textarea
+                value={question}
+                onChange={(e) => {
+                  setQuestion(e.target.value);
+                  e.target.style.height = 'auto';
+                  e.target.style.height = `${e.target.scrollHeight}px`;
+                }}
+                placeholder="Type your question..."
+                className="min-h-[44px] w-full resize-none rounded-md border border-input bg-background px-3 py-2 pr-12 focus:outline-none focus:ring-2 focus:ring-primary/20"
+                disabled={loading}
+                rows={1}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    if (question.trim() && !loading) {
+                      handleSubmit(e as any);
+                    }
+                  }
+                }}
+              />
+              <div className="absolute bottom-2 right-2 text-xs text-muted-foreground">
+                Press <kbd className="rounded border px-1 bg-muted">⏎</kbd> to send
+              </div>
+            </div>
             <Button type="submit" disabled={loading || !question.trim()}>
               {loading ? (
                 <Loader2 className="h-4 w-4 animate-spin" />

src/pages/dashboard/resources.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { Book, File, Folder } from 'lucide-react';
-import { Card } from '../../components/ui/card';
-
-const mockResources = [
-  {
-    id: '1',
-    type: 'folder',
-    name: 'Biology',
-    itemCount: 12,
-  },
-  {
-    id: '2',
-    type: 'folder',
-    name: 'Physics',
-    itemCount: 8,
-  },
-  {
-    id: '3',
-    type: 'file',
-    name: 'Math Notes.pdf',
-    size: '2.4 MB',
-  },
-  {
-    id: '4',
-    type: 'book',
-    name: 'Chemistry Textbook',
-    author: 'John Smith',
-  },
-];
-
-function StudyResources() {
-  return (
-    <div className="space-y-6">
-      <h1 className="text-3xl font-bold">Study Resources</h1>
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {mockResources.map((resource) => (
-          <Card key={resource.id} className="p-4 hover:bg-muted/50 cursor-pointer">
-            <div className="flex items-start space-x-4">
-              {resource.type === 'folder' && <Folder className="h-6 w-6 text-blue-500" />}
-              {resource.type === 'file' && <File className="h-6 w-6 text-green-500" />}
-              {resource.type === 'book' && <Book className="h-6 w-6 text-purple-500" />}
-              <div>
-                <h3 className="font-medium">{resource.name}</h3>
-                {resource.type === 'folder' && (
-                  <p className="text-sm text-muted-foreground">{resource.itemCount} items</p>
-                )}
-                {resource.type === 'file' && (
-                  <p className="text-sm text-muted-foreground">{resource.size}</p>
-                )}
-                {resource.type === 'book' && (
-                  <p className="text-sm text-muted-foreground">By {resource.author}</p>
-                )}
-              </div>
-            </div>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default StudyResources;

src/routes/index.tsx

@@ -22,7 +22,6 @@ const Signup = React.lazy(() => import('../pages/auth/Signup'));
 // Dashboard Pages
 const AskQuestion = React.lazy(() => import('../pages/dashboard/ask'));
 const UploadMaterials = React.lazy(() => import('../pages/dashboard/upload'));
-const StudyResources = React.lazy(() => import('../pages/dashboard/resources'));
 const StudyHistory = React.lazy(() => import('../pages/dashboard/history'));
 const Settings = React.lazy(() => import('../pages/dashboard/Settings'));
 
@@ -60,7 +59,6 @@ export const AppRouter: React.FC = () => {
           <Route path="ask" element={withSuspense(AskQuestion)} />
           <Route path="ask/:chatId" element={withSuspense(AskQuestion)} />
           <Route path="upload" element={withSuspense(UploadMaterials)} />
-          <Route path="resources" element={withSuspense(StudyResources)} />
           <Route path="history" element={withSuspense(StudyHistory)} />
           <Route path="settings" element={withSuspense(Settings)} />
         </Route>

src/routes/routes.ts

@@ -9,7 +9,6 @@ export const routes = {
       root: '/dashboard',
       ask: '/dashboard/ask',
       upload: '/dashboard/upload',
-      resources: '/dashboard/resources',
       history: '/dashboard/history',
       settings: '/dashboard/settings',
     }