Show all agents, smart sorted, in carousel on home screen of web app (#…

…943)

## Overview
Allow quickly selecting, switching agents from agents pane on home page of web app

## Details
- Show all agents in carousel on home screen agent pane of web app
- Smart Sort
  1. Pin default agent as first for ease of access
  2. Show used agents by MRU for ease of access
  3. Shuffle unused agents for discoverability
- Select most recently used agent to chat with by default
- Push smart sort logic down to API
  - Common logic can be reused across clients
  - Agent sort was previously done in web app
- Focus on chat input on agent select
- Double click agent on home page to open edit agent card on agents page

src/interface/web/app/chat/page.tsx

@@ -14,7 +14,7 @@ import "katex/dist/katex.min.css";
 
 import { Context, OnlineContext, StreamMessage } from "../components/chatMessage/chatMessage";
 import { useIPLocationData, useIsMobileWidth, welcomeConsole } from "../common/utils";
-import ChatInputArea, { ChatOptions } from "../components/chatInputArea/chatInputArea";
+import { ChatInputArea, ChatOptions } from "../components/chatInputArea/chatInputArea";
 import { useAuthenticatedData } from "../common/auth";
 import { AgentData } from "../agents/page";
 

src/interface/web/app/common/auth.ts

@@ -93,3 +93,15 @@ export function useUserConfig(detailed: boolean = false) {
 
     return { userConfig, isLoadingUserConfig };
 }
+
+export function isUserSubscribed(userConfig: UserConfig | null): boolean {
+    return (
+        (userConfig?.subscription_state &&
+            [
+                SubscriptionStates.SUBSCRIBED.valueOf(),
+                SubscriptionStates.TRIAL.valueOf(),
+                SubscriptionStates.UNSUBSCRIBED.valueOf(),
+            ].includes(userConfig.subscription_state)) ||
+        false
+    );
+}

src/interface/web/app/common/utils.ts

@@ -70,3 +70,19 @@ export function useIsMobileWidth() {
 
     return isMobileWidth;
 }
+
+export function useDebounce<T>(value: T, delay: number): T {
+    const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+
+    return debouncedValue;
+}

src/interface/web/app/components/agentCard/agentCard.module.css

@@ -0,0 +1,20 @@
+.agentPersonality p {
+    white-space: inherit;
+    overflow: hidden;
+    height: 77px;
+    line-height: 1.5;
+}
+
+div.agentPersonality {
+    text-align: left;
+    grid-column: span 3;
+    overflow: hidden;
+}
+
+button.infoButton {
+    border: none;
+    background-color: transparent !important;
+    text-align: left;
+    font-family: inherit;
+    font-size: medium;
+}