chat page ui updates 2

package-lock.json

@@ -35,6 +35,7 @@
         "@eslint/js": "^9.9.1",
         "@types/react": "^18.3.5",
         "@types/react-dom": "^18.3.0",
+        "@types/react-syntax-highlighter": "^15.5.13",
         "@vitejs/plugin-react": "^4.3.1",
         "autoprefixer": "^10.4.18",
         "eslint": "^9.9.1",
@@ -2286,6 +2287,16 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-syntax-highlighter": {
+      "version": "15.5.13",
+      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
+      "integrity": "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",

package.json

@@ -37,6 +37,7 @@
     "@eslint/js": "^9.9.1",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.18",
     "eslint": "^9.9.1",

src/components/chat/Message.tsx

@@ -2,23 +2,27 @@ 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 { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { vs } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { Copy, Check, ThumbsUp, ThumbsDown } from 'lucide-react';
+import { Copy, Check } 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';
+import type { Components } from 'react-markdown';
 
 interface MessageProps {
   message: ChatMessage;
-  onFeedback?: (messageId: string, isPositive: boolean) => void;
 }
 
-export function Message({ message, onFeedback }: MessageProps) {
+interface CodeBlockProps {
+  language: string;
+  value: string;
+}
+
+export function Message({ message }: 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);
@@ -26,10 +30,49 @@ export function Message({ message, onFeedback }: MessageProps) {
     setTimeout(() => setCopied(false), 2000);
   };
 
-  const handleFeedback = (isPositive: boolean) => {
+  const CodeBlock = React.memo(({ language, value }: CodeBlockProps) => (
-    if (!onFeedback) return;
+    <div className="relative">
-    setFeedback(isPositive ? 'positive' : 'negative');
+      <div className="absolute right-2 top-2 z-10">
-    onFeedback(message.id, isPositive);
+        <Tooltip content={copied ? 'Copied!' : 'Copy code'}>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 w-8 p-0"
+            onClick={() => handleCopy(value)}
+          >
+            {copied ? (
+              <Check className="h-4 w-4" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </Button>
+        </Tooltip>
+      </div>
+      <SyntaxHighlighter
+        language={language}
+        style={vs}
+        customStyle={{ margin: 0 }}
+        PreTag="div"
+      >
+        {value.replace(/\n$/, '')}
+      </SyntaxHighlighter>
+    </div>
+  ));
+
+  const code: Components['code'] = ({ className, children, ...props }) => {
+    const match = /language-(\w+)/.exec(className || '');
+    const language = match ? match[1] : '';
+    const value = String(children).replace(/\n$/, '');
+
+    if (!className) {
+      return (
+        <code className="rounded bg-muted-foreground/20 px-1 py-0.5" {...props}>
+          {children}
+        </code>
+      );
+    }
+
+    return <CodeBlock language={language} value={value} />;
   };
 
   return (
@@ -40,19 +83,19 @@ export function Message({ message, onFeedback }: MessageProps) {
       )}
     >
       {message.role === 'assistant' && (
-        <Avatar className="h-8 w-8 border border-border">
+        <Avatar className="h-8 w-8">
-          <AvatarFallback className="bg-gradient-to-br from-indigo-500 to-purple-500 text-white text-xs font-medium">
+          <AvatarFallback className="bg-gradient-to-br from-blue-400 to-blue-600 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',
+            'relative rounded-2xl px-4 py-3 text-sm',
             message.role === 'user'
-              ? 'bg-primary text-primary-foreground shadow-sm'
+              ? 'bg-blue-500 text-white'
               : 'bg-muted/50 shadow-sm border border-border/50'
           )}
         >
@@ -63,94 +106,20 @@ export function Message({ message, onFeedback }: MessageProps) {
               message.role === 'user' ? 'prose-invert' : 'prose-stone dark:prose-invert'
             )}
             components={{
-              code({ node, inline, className, children, ...props }) {
+              code
-                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">
+        <Avatar className="h-8 w-8">
           <AvatarFallback className="bg-secondary text-secondary-foreground text-xs font-medium">
             You
           </AvatarFallback>

src/pages/dashboard/ask.tsx

@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } 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';
@@ -22,6 +21,8 @@ export default function AskQuestion() {
   const [isNewChat, setIsNewChat] = useState(false);
   const [hasExistingChats, setHasExistingChats] = useState<boolean | null>(null);
   const [isTyping, setIsTyping] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
 
   // Check for existing chats and redirect to most recent if on base path
   useEffect(() => {
@@ -163,6 +164,14 @@ export default function AskQuestion() {
     }
   };
 
+  // Auto-scroll when new messages arrive
+  useEffect(() => {
+    if (scrollAreaRef.current) {
+      const scrollArea = scrollAreaRef.current;
+      scrollArea.scrollTop = scrollArea.scrollHeight;
+    }
+  }, [messages, isTyping]);
+
   // Show loading state while checking for existing chats
   if (hasExistingChats === null) {
     return (
@@ -173,8 +182,9 @@ export default function AskQuestion() {
   }
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="h-full flex flex-col">
-      <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      {/* Header */}
+      <div className="flex-none 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" />
@@ -210,122 +220,177 @@ export default function AskQuestion() {
         </div>
       </div>
 
+      {/* Error Message */}
       {error && (
-        <div className="mx-4 mt-4 flex items-center gap-2 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
+        <div className="flex-none 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-hidden">
+      {/* Messages Area */}
-        <ScrollArea className="h-full">
+      <div className="flex-1 min-h-0 relative">
+        <div className="absolute inset-0 overflow-y-auto">
           <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="h-full flex items-center justify-center min-h-[calc(100vh-16rem)]">
-                <div className="mx-auto flex max-w-md flex-col items-center space-y-4">
+                <div className="max-w-md w-full space-y-8">
-                  <div className="rounded-full bg-primary/10 p-3">
+                  <div className="flex flex-col items-center text-center">
-                    <MessageSquarePlus className="h-6 w-6 text-primary" />
+                    <div className="rounded-full bg-blue-500/20 p-6 mb-8">
-                  </div>
+                      <div className="h-16 w-16 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 shadow-lg" />
-                  <div className="space-y-2">
+                    </div>
-                    <h2 className="text-lg font-semibold">Welcome to StudyAI Chat</h2>
+                    <h2 className="text-xl font-semibold mb-2">Welcome to StudyAI Chat</h2>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-muted-foreground mb-6">
-                      Start a new conversation to get answers to your questions
+                      Start a new chat to begin asking questions about your study materials
                     </p>
+                    <Button
+                      onClick={handleNewChat}
+                      className="w-full bg-blue-500 hover:bg-blue-600 mb-8"
+                    >
+                      <MessageSquarePlus className="mr-2 h-5 w-5" />
+                      Start New Chat
+                    </Button>
+                    <div className="w-full text-left">
+                      <p className="text-sm font-medium mb-3">Example questions you can ask:</p>
+                      <div className="space-y-2">
+                        <Button
+                          variant="outline"
+                          className="w-full justify-start text-left"
+                          onClick={() => {
+                            handleNewChat();
+                            setQuestion("Generate a summary of my uploaded materials");
+                          }}
+                        >
+                          Generate Summary
+                        </Button>
+                        <Button
+                          variant="outline"
+                          className="w-full justify-start text-left"
+                          onClick={() => {
+                            handleNewChat();
+                            setQuestion("What are the key concepts I should focus on?");
+                          }}
+                        >
+                          What are the key concepts?
+                        </Button>
+                        <Button
+                          variant="outline"
+                          className="w-full justify-start text-left"
+                          onClick={() => {
+                            handleNewChat();
+                            setQuestion("Create a study plan based on my materials");
+                          }}
+                        >
+                          Create a study plan
+                        </Button>
+                      </div>
+                    </div>
                   </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="h-full flex items-center justify-center min-h-[calc(100vh-16rem)]">
-                <div className="mx-auto flex max-w-md flex-col items-center space-y-4">
+                <div className="max-w-md w-full space-y-8">
-                  <div className="rounded-full bg-primary/10 p-3">
+                  <div className="flex flex-col items-center text-center">
-                    <MessageSquarePlus className="h-6 w-6 text-primary" />
+                    <div className="rounded-full bg-blue-500/20 p-6 mb-8">
-                  </div>
+                      <div className="h-16 w-16 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 shadow-lg" />
-                  <div className="space-y-2">
+                    </div>
-                    <h2 className="text-lg font-semibold">No messages yet</h2>
+                    <h2 className="text-xl font-semibold mb-2">Ask Your First Question</h2>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-muted-foreground mb-6">
-                      Start by asking a question about your studies
+                      Type your question below or choose from the examples
                     </p>
+                    <div className="w-full space-y-2">
+                      <Button
+                        variant="outline"
+                        className="w-full justify-start text-left"
+                        onClick={() => setQuestion("Generate a summary of my uploaded materials")}
+                      >
+                        Generate Summary
+                      </Button>
+                      <Button
+                        variant="outline"
+                        className="w-full justify-start text-left"
+                        onClick={() => setQuestion("What are the key concepts I should focus on?")}
+                      >
+                        What are the key concepts?
+                      </Button>
+                      <Button
+                        variant="outline"
+                        className="w-full justify-start text-left"
+                        onClick={() => setQuestion("Create a study plan based on my materials")}
+                      >
+                        Create a study plan
+                      </Button>
+                    </div>
                   </div>
                 </div>
               </div>
             ) : (
               <>
-                {messages.map((message, index) => (
+                {messages.map((message) => (
                   <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">
+                    <Avatar className="h-8 w-8">
-                      <AvatarFallback className="bg-gradient-to-br from-indigo-500 to-purple-500 text-white text-xs font-medium">
+                      <AvatarFallback className="bg-gradient-to-br from-blue-400 to-blue-600 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 max-w-3xl items-center space-x-4 rounded-2xl 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 ref={messagesEndRef} />
               </>
             )}
           </div>
-        </ScrollArea>
+        </div>
       </div>
 
-      {(isNewChat || chatId) && (
+      {/* Input Area */}
-        <div className="border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4 py-4">
+      <div className="flex-none border-t bg-background p-4">
-          <form onSubmit={handleSubmit} className="mx-auto flex max-w-3xl gap-2">
+        <form onSubmit={handleSubmit} className="mx-auto max-w-3xl">
-            <div className="relative flex-1">
+          <div className="relative flex items-center gap-2">
-              <textarea
+            <input
-                value={question}
+              type="text"
-                onChange={(e) => {
+              value={question}
-                  setQuestion(e.target.value);
+              onChange={(e) => setQuestion(e.target.value)}
-                  e.target.style.height = 'auto';
+              placeholder="Ask me anything..."
-                  e.target.style.height = `${e.target.scrollHeight}px`;
+              className={cn(
-                }}
+                'w-full rounded-full border bg-background px-4 py-2 text-sm',
-                placeholder="Type your question..."
+                'focus:outline-none focus:ring-2 focus:ring-blue-500/20',
-                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"
+                'placeholder:text-muted-foreground'
-                disabled={loading}
+              )}
-                rows={1}
+              disabled={loading}
-                onKeyDown={(e) => {
+            />
-                  if (e.key === 'Enter' && !e.shiftKey) {
+            <Button
-                    e.preventDefault();
+              type="submit"
-                    if (question.trim() && !loading) {
+              disabled={loading || !question.trim()}
-                      handleSubmit(e as any);
+              className={cn(
-                    }
+                'rounded-full bg-blue-500 text-white h-8 w-8 p-0',
-                  }
+                'hover:bg-blue-600',
-                }}
+                'focus:outline-none focus:ring-2 focus:ring-blue-500/20',
-              />
+                'disabled:bg-blue-500/50'
-              <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" />
               ) : (
                 <Send className="h-4 w-4" />
               )}
             </Button>
-          </form>
+          </div>
-        </div>
+        </form>
-      )}
+      </div>
     </div>
   );
 }