Feat: Create a conversation #3221 (#9269)

### What problem does this PR solve?

Feat: Create a conversation #3221

### Type of change


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

web/src/pages/next-chats/index.tsx

@@ -11,7 +11,7 @@ import { ChatCard } from './chat-card';
 import { useRenameChat } from './hooks/use-rename-chat';
 
 export default function ChatList() {
-  const { data: chatList, setPagination, pagination } = useFetchDialogList();
+  const { data, setPagination, pagination } = useFetchDialogList();
   const { t } = useTranslation();
   const {
     initialChatName,
@@ -29,11 +29,15 @@ export default function ChatList() {
     [setPagination],
   );
 
+  const handleShowCreateModal = useCallback(() => {
+    showChatRenameModal();
+  }, [showChatRenameModal]);
+
   return (
     <section className="flex flex-col w-full flex-1">
       <div className="px-8 pt-8">
         <ListFilterBar title="Chat apps">
-          <Button>
+          <Button onClick={handleShowCreateModal}>
             <Plus className="size-2.5" />
             {t('chat.createChat')}
           </Button>
@@ -41,7 +45,7 @@ export default function ChatList() {
       </div>
       <div className="flex-1 overflow-auto">
         <div className="flex flex-wrap gap-4 px-8">
-          {chatList.map((x) => {
+          {data.dialogs.map((x) => {
             return (
               <ChatCard
                 key={x.id}
@@ -65,6 +69,7 @@ export default function ChatList() {
           onOk={onChatRenameOk}
           initialName={initialChatName}
           loading={chatRenameLoading}
+          title={initialChatName || t('chat.createChat')}
         ></RenameDialog>
       )}
     </section>