Feat: Adjust the icons in the chat page's collapsible panel. (#12755)

### What problem does this PR solve?

Feat: Adjust the icons in the chat page's collapsible panel.

### Type of change


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

web/src/pages/next-chats/chat/app-settings/chat-settings.tsx

@@ -2,6 +2,7 @@ import { Button } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
 import { Separator } from '@/components/ui/separator';
 import { DatasetMetadata } from '@/constants/chat';
+import { useSetModalState } from '@/hooks/common-hooks';
 import { useFetchDialog, useSetDialog } from '@/hooks/use-chat-request';
 import {
   removeUselessFieldsFromValues,
@@ -9,7 +10,7 @@ import {
 } from '@/utils/form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { isEmpty, omit } from 'lodash';
-import { X } from 'lucide-react';
+import { PanelRightClose, Settings } from 'lucide-react';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -21,14 +22,18 @@ import { ChatPromptEngine } from './chat-prompt-engine';
 import { SavingButton } from './saving-button';
 import { useChatSettingSchema } from './use-chat-setting-schema';
 
-type ChatSettingsProps = { switchSettingVisible(): void };
+type ChatSettingsProps = { hasSingleChatBox: boolean };
-export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
+
+export function ChatSettings({ hasSingleChatBox }: ChatSettingsProps) {
   const formSchema = useChatSettingSchema();
   const { data } = useFetchDialog();
   const { setDialog, loading } = useSetDialog();
   const { id } = useParams();
   const { t } = useTranslation();
 
+  const { visible: settingVisible, switchVisible: switchSettingVisible } =
+    useSetModalState(true);
+
   type FormSchemaType = z.infer<typeof formSchema>;
 
   const form = useForm<FormSchemaType>({
@@ -94,11 +99,29 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
     }
   }, [data, form]);
 
+  if (settingVisible) {
+    return (
+      <div className="p-5">
+        <Button
+          className="w-full"
+          onClick={switchSettingVisible}
+          disabled={!hasSingleChatBox}
+          variant={'ghost'}
+        >
+          <Settings />
+        </Button>
+      </div>
+    );
+  }
+
   return (
-    <section className="p-5  w-[440px] border-l flex flex-col">
+    <section className="p-5  w-[440px] flex flex-col">
       <div className="flex justify-between items-center text-base pb-2">
         {t('chat.chatSetting')}
-        <X className="size-4 cursor-pointer" onClick={switchSettingVisible} />
+        <PanelRightClose
+          className="size-4 cursor-pointer"
+          onClick={switchSettingVisible}
+        />
       </div>
       <Form {...form}>
         <form

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

@@ -12,7 +12,6 @@ import {
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { SharedFrom } from '@/constants/chat';
-import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import {
   useFetchConversationList,
@@ -48,8 +47,6 @@ export default function Chat() {
 
   const { handleConversationCardClick, controller, stopOutputMessage } =
     useHandleClickConversationCard();
-  const { visible: settingVisible, switchVisible: switchSettingVisible } =
-    useSetModalState(true);
 
   const { isDebugMode, switchDebugMode } = useSwitchDebugMode();
   const { removeChatBox, addChatBox, chatBoxIds, hasSingleChatBox } =
@@ -114,7 +111,7 @@ export default function Chat() {
   }
 
   return (
-    <section className="h-full flex flex-col pr-5">
+    <section className="h-full flex flex-col">
       <PageHeader>
         <Breadcrumb>
           <BreadcrumbList>
@@ -135,13 +132,9 @@ export default function Chat() {
         </Button>
       </PageHeader>
       <div className="flex flex-1 min-h-0 pb-9">
-        <Sessions
+        <Sessions handleConversationCardClick={handleSessionClick}></Sessions>
-          hasSingleChatBox={hasSingleChatBox}
-          handleConversationCardClick={handleSessionClick}
-          switchSettingVisible={switchSettingVisible}
-        ></Sessions>
 
-        <Card className="flex-1 min-w-0 bg-transparent border h-full">
+        <Card className="flex-1 min-w-0 bg-transparent border-none shadow-none h-full">
           <CardContent className="flex p-0 h-full">
             <Card className="flex flex-col flex-1 bg-transparent min-w-0">
               <CardHeader
@@ -162,11 +155,7 @@ export default function Chat() {
                 ></SingleChatBox>
               </CardContent>
             </Card>
-            {settingVisible && (
+            <ChatSettings hasSingleChatBox={hasSingleChatBox}></ChatSettings>
-              <ChatSettings
-                switchSettingVisible={switchSettingVisible}
-              ></ChatSettings>
-            )}
           </CardContent>
         </Card>
       </div>

web/src/pages/next-chats/chat/sessions.tsx

@@ -12,13 +12,7 @@ import {
   useRemoveConversation,
 } from '@/hooks/use-chat-request';
 import { cn } from '@/lib/utils';
-import {
+import { Check, PanelLeftClose, Plus, Trash2 } from 'lucide-react';
-  Check,
-  PanelLeftClose,
-  PanelRightClose,
-  Plus,
-  Trash2,
-} from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHandleClickConversationCard } from '../hooks/use-click-card';
@@ -28,12 +22,8 @@ import { ConversationDropdown } from './conversation-dropdown';
 type SessionProps = Pick<
   ReturnType<typeof useHandleClickConversationCard>,
   'handleConversationCardClick'
-> & { switchSettingVisible(): void; hasSingleChatBox: boolean };
+>;
-export function Sessions({
+export function Sessions({ handleConversationCardClick }: SessionProps) {
-  hasSingleChatBox,
-  handleConversationCardClick,
-  switchSettingVisible,
-}: SessionProps) {
   const { t } = useTranslation();
   const {
     list: conversationList,
@@ -115,15 +105,19 @@ export function Sessions({
 
   if (!visible) {
     return (
-      <PanelRightClose
+      <div className="p-5">
-        className="cursor-pointer size-4 mt-8"
+        <RAGFlowAvatar
-        onClick={switchVisible}
+          avatar={data.icon}
-      />
+          name={data.name}
+          className="size-8 cursor-pointer"
+          onClick={switchVisible}
+        ></RAGFlowAvatar>
+      </div>
     );
   }
 
   return (
-    <section className="p-6 w-[296px] flex flex-col">
+    <section className="p-5 w-[296px] flex flex-col">
       <section className="flex items-center text-base justify-between gap-2">
         <div className="flex gap-3 items-center min-w-0">
           <RAGFlowAvatar
@@ -159,9 +153,11 @@ export function Sessions({
             <ConfirmDeleteDialog
               onOk={handleBatchDelete}
               title={t('chat.batchDeleteSessions')}
-              content={t('chat.deleteSelectedConfirm', {
+              content={{
-                count: selectedCount,
+                title: t('chat.deleteSelectedConfirm', {
-              })}
+                  count: selectedCount,
+                }),
+              }}
             >
               <Button
                 variant="ghost"
@@ -245,16 +241,6 @@ export function Sessions({
           </Card>
         ))}
       </div>
-      <div className="py-2">
-        <Button
-          className="w-full"
-          onClick={switchSettingVisible}
-          disabled={!hasSingleChatBox}
-          variant={'outline'}
-        >
-          {t('chat.chatSetting')}
-        </Button>
-      </div>
     </section>
   );
 }