Show all agents in carousel on home screen agent pane of web app

This change wraps the agent pane in a scroll area with all agents shown.
It allows selecting an agent to chat with directly from the home
screen without breaking flow and having to jump to the agents page.

The previous flow was not convenient to quickly and consistently start
chat with one of your standard agents.

This was because a random subet of agents were shown on the home page.
To start chat with an agent not shown on home screen load you had to
open the agents page and initiate the conversation from there.

src/interface/web/app/page.tsx

@@ -23,6 +23,7 @@ import { AgentData } from "@/app/agents/page";
 import { createNewConversation } from "./common/chatFunctions";
 import { useIsMobileWidth } from "./common/utils";
 import { useSearchParams } from "next/navigation";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 interface ChatBodyDataProps {
     chatOptionsData: ChatOptions | null;
@@ -112,7 +113,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
         const shuffledAgents = agentsData ? [...agentsData].sort(() => 0.5 - Math.random()) : [];
         const agents = agentsData ? [agentsData[0]] : []; // Always add the first/default agent.
 
-        shuffledAgents.slice(0, nSlice - 1).forEach((agent) => {
+        shuffledAgents.forEach((agent) => {
             if (!agents.find((a) => a.slug === agent.slug)) {
                 agents.push(agent);
             }
@@ -194,7 +195,8 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     </h1>
                 </div>
                 {!props.isMobileWidth && (
-                    <div className="flex pb-6 gap-2 items-center justify-center">
+                    <ScrollArea className="w-full max-w-[600px] mx-auto">
+                        <div className="flex pb-2 gap-2 items-center justify-center">
                             {agentIcons.map((icon, index) => (
                                 <Card
                                     key={`${index}-${agents[index].slug}`}
@@ -213,15 +215,9 @@ function ChatBodyData(props: ChatBodyDataProps) {
                                     </CardTitle>
                                 </Card>
                             ))}
-                        <Card
-                            className="border-none shadow-none flex justify-center items-center hover:cursor-pointer"
-                            onClick={() => (window.location.href = "/agents")}
-                        >
-                            <CardTitle className="text-center text-md font-normal flex justify-center items-center px-1.5 py-2">
-                                See All →
-                            </CardTitle>
-                        </Card>
                         </div>
+                        <ScrollBar orientation="horizontal" />
+                    </ScrollArea>
                 )}
             </div>
             <div className={`mx-auto ${props.isMobileWidth ? "w-full" : "w-fit"}`}>
@@ -285,6 +281,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     <div
                         className={`${styles.inputBox} pt-1 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 mx-1 rounded-t-2xl rounded-b-none`}
                     >
+                        <ScrollArea className="w-full max-w-[85vw]">
                             <div className="flex gap-2 items-center justify-left pt-1 pb-2 px-12">
                                 {agentIcons.map((icon, index) => (
                                     <Card
@@ -299,17 +296,9 @@ function ChatBodyData(props: ChatBodyDataProps) {
                                         </CardTitle>
                                     </Card>
                                 ))}
-                            <Card
-                                className="border-none shadow-none flex justify-center items-center hover:cursor-pointer"
-                                onClick={() => (window.location.href = "/agents")}
-                            >
-                                <CardTitle
-                                    className={`text-center ${props.isMobileWidth ? "text-xs" : "text-md"} font-normal flex justify-center items-center px-1.5 py-2`}
-                                >
-                                    See All →
-                                </CardTitle>
-                            </Card>
                             </div>
+                            <ScrollBar orientation="horizontal" />
+                        </ScrollArea>
                         <ChatInputArea
                             isLoggedIn={props.isLoggedIn}
                             sendMessage={(message) => setMessage(message)}