✨ Add QuickSuggestions component to enhance user input options in chat

src/components/chat/chat.tsx

@@ -13,6 +13,7 @@ import { v4 as uuidv4 } from "uuid";
 import useChatStore from "@/app/hooks/useChatStore";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
+import QuickSuggestions from "./quick-suggestions";
 
 export interface ChatProps {
   id: string;
@@ -136,6 +137,7 @@ export default function Chat({ initialMessages, id, isMobile }: ChatProps) {
           <p className="text-center text-base text-muted-foreground">
             How can I help you today?
           </p>
+          <QuickSuggestions input={input} setInput={setInput} handleSubmit={onSubmit} />
           <ChatBottombar
             input={input}
             handleInputChange={handleInputChange}

src/components/chat/quick-suggestions.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ChatRequestOptions } from 'ai';
+import { Button } from '../ui/button';
+
+interface QuickSuggestionsProps {
+    input: string;
+    setInput: React.Dispatch<React.SetStateAction<string>>;
+    handleSubmit: (
+        e: React.FormEvent<HTMLFormElement>,
+        chatRequestOptions?: ChatRequestOptions
+    ) => void;
+}
+
+const quickSuggestions = [
+    "how are you?",
+    "Tell me a joke",
+    "Who is Cristiano Ronaldo?",
+    "What is Capital of India?",
+];
+
+export default function QuickSuggestions({ input, setInput, handleSubmit }: QuickSuggestionsProps) {
+    return (
+        <div className="w-full px-4">
+            <form onSubmit={handleSubmit} className="flex flex-wrap gap-3 mb-3 w-full">
+                {quickSuggestions.map((prompt, index) => (
+                    <Button
+                        key={index}
+                        className="px-4 py-2 text-sm rounded-lg border border-gray-300 shadow-sm  transition"
+                        variant="ghost"
+                        onClick={() => setInput(prompt)}
+                    >
+                        {prompt}
+                    </Button>
+                ))}
+            </form>
+        </div>
+    );
+}