Feat: Display a separate chat multi-model comparison page #3221 (#9461)

### What problem does this PR solve?
Feat: Display a separate chat multi-model comparison page #3221

### Type of change


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

web/src/pages/next-chats/chat/chat-box/multiple-chat-box.tsx

@@ -2,6 +2,11 @@ import { NextMessageInput } from '@/components/message-input/next';
 import MessageItem from '@/components/message-item';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { MessageType } from '@/constants/chat';
 import {
   useFetchConversation,
@@ -10,7 +15,7 @@ import {
 } from '@/hooks/use-chat-request';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import { buildMessageUuidWithRole } from '@/utils/chat';
-import { Trash2 } from 'lucide-react';
+import { ListCheck, Plus, Trash2 } from 'lucide-react';
 import { useCallback } from 'react';
 import {
   useGetSendButtonDisabled,
@@ -19,19 +24,30 @@ import {
 import { useCreateConversationBeforeUploadDocument } from '../../hooks/use-create-conversation';
 import { useSendMessage } from '../../hooks/use-send-chat-message';
 import { buildMessageItemReference } from '../../utils';
+import { LLMSelectForm } from '../llm-select-form';
 import { useAddChatBox } from '../use-add-box';
 
 type MultipleChatBoxProps = {
   controller: AbortController;
   chatBoxIds: string[];
-} & Pick<ReturnType<typeof useAddChatBox>, 'removeChatBox'>;
-
-type ChatCardProps = { id: string } & Pick<
-  MultipleChatBoxProps,
-  'controller' | 'removeChatBox'
+} & Pick<
+  ReturnType<typeof useAddChatBox>,
+  'removeChatBox' | 'addChatBox' | 'chatBoxIds'
 >;
 
-function ChatCard({ controller, removeChatBox, id }: ChatCardProps) {
+type ChatCardProps = { id: string; idx: number } & Pick<
+  MultipleChatBoxProps,
+  'controller' | 'removeChatBox' | 'addChatBox' | 'chatBoxIds'
+>;
+
+function ChatCard({
+  controller,
+  removeChatBox,
+  id,
+  idx,
+  addChatBox,
+  chatBoxIds,
+}: ChatCardProps) {
   const {
     value,
     // scrollRef,
@@ -49,6 +65,8 @@ function ChatCard({ controller, removeChatBox, id }: ChatCardProps) {
   const { data: currentDialog } = useFetchDialog();
   const { data: conversation } = useFetchConversation();
 
+  const isLatestChat = idx === chatBoxIds.length - 1;
+
   const handleRemoveChatBox = useCallback(() => {
     removeChatBox(id);
   }, [id, removeChatBox]);
@@ -57,15 +75,31 @@ function ChatCard({ controller, removeChatBox, id }: ChatCardProps) {
     <Card className="bg-transparent border flex-1">
       <CardHeader className="border-b px-5 py-3">
         <CardTitle className="flex justify-between items-center">
-          <div>
-            <span className="text-base">Card Title</span>
-            <Button variant={'ghost'} className="ml-2">
-              GPT-4
-            </Button>
+          <div className="flex items-center gap-3">
+            <span className="text-base">{idx + 1}</span>
+            <LLMSelectForm></LLMSelectForm>
+          </div>
+          <div className="space-x-2">
+            <Tooltip>
+              <TooltipTrigger>
+                <Button variant={'ghost'}>
+                  <ListCheck />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Apply model configs</p>
+              </TooltipContent>
+            </Tooltip>
+            {!isLatestChat || chatBoxIds.length === 3 ? (
+              <Button variant={'ghost'} onClick={handleRemoveChatBox}>
+                <Trash2 />
+              </Button>
+            ) : (
+              <Button variant={'ghost'} onClick={addChatBox}>
+                <Plus></Plus>
+              </Button>
+            )}
           </div>
-          <Button variant={'ghost'} onClick={handleRemoveChatBox}>
-            <Trash2 />
-          </Button>
         </CardTitle>
       </CardHeader>
       <CardContent>
@@ -111,6 +145,7 @@ export function MultipleChatBox({
   controller,
   chatBoxIds,
   removeChatBox,
+  addChatBox,
 }: MultipleChatBoxProps) {
   const {
     value,
@@ -125,31 +160,37 @@ export function MultipleChatBox({
   const { conversationId } = useGetChatSearchParams();
   const disabled = useGetSendButtonDisabled();
   const sendDisabled = useSendButtonDisabled(value);
+
   return (
-    <section className="h-full flex flex-col">
-      <div className="flex gap-4 flex-1 px-5 pb-12">
-        {chatBoxIds.map((id) => (
+    <section className="h-full flex flex-col px-5">
+      <div className="flex gap-4 flex-1 px-5 pb-14">
+        {chatBoxIds.map((id, idx) => (
           <ChatCard
             key={id}
+            idx={idx}
             controller={controller}
             id={id}
+            chatBoxIds={chatBoxIds}
             removeChatBox={removeChatBox}
+            addChatBox={addChatBox}
           ></ChatCard>
         ))}
       </div>
-      <NextMessageInput
-        disabled={disabled}
-        sendDisabled={sendDisabled}
-        sendLoading={sendLoading}
-        value={value}
-        onInputChange={handleInputChange}
-        onPressEnter={handlePressEnter}
-        conversationId={conversationId}
-        createConversationBeforeUploadDocument={
-          createConversationBeforeUploadDocument
-        }
-        stopOutputMessage={stopOutputMessage}
-      />
+      <div className="px-[20%]">
+        <NextMessageInput
+          disabled={disabled}
+          sendDisabled={sendDisabled}
+          sendLoading={sendLoading}
+          value={value}
+          onInputChange={handleInputChange}
+          onPressEnter={handlePressEnter}
+          conversationId={conversationId}
+          createConversationBeforeUploadDocument={
+            createConversationBeforeUploadDocument
+          }
+          stopOutputMessage={stopOutputMessage}
+        />
+      </div>
     </section>
   );
 }