Feat: Render chat page #3221 (#9298)

### What problem does this PR solve?

Feat: Render chat page #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-chats/hooks/use-click-card.ts

@@ -0,0 +1,20 @@
+import { useClickConversationCard } from '@/hooks/use-chat-request';
+import { useCallback, useState } from 'react';
+
+export function useHandleClickConversationCard() {
+  const [controller, setController] = useState(new AbortController());
+  const { handleClickConversation } = useClickConversationCard();
+
+  const handleConversationCardClick = useCallback(
+    (conversationId: string, isNew: boolean) => {
+      handleClickConversation(conversationId, isNew ? 'true' : '');
+      setController((pre) => {
+        pre.abort();
+        return new AbortController();
+      });
+    },
+    [handleClickConversation],
+  );
+
+  return { controller, handleConversationCardClick };
+}